:root {
  --meta-blue: #137A43;
  --primary: var(--meta-blue);
  --meta-blue-dark: #0B5E32;
  --ink: #17241D;
  --muted: #66746C;
  --line: #D9E8DF;
  --soft: #F2FAF5;
  --white: #ffffff;
  --success: #16A85B;
  --warning: #E6A300;
  --danger: #E63E4F;
  --radius: 16px;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 8px 26px rgba(0, 0, 0, 0.05);
  --preview-primary: #137A43;
  --preview-secondary: #E8FFF1;
  --preview-accent: #39E17D;
  --preview-text: #17241D;
  --preview-font: 'Cairo', sans-serif;
  --logo-font: 'Alexandria', sans-serif;
  --logo-font-ar: 'Alexandria', sans-serif;
  --logo-font-en: 'Inter', sans-serif;
  --preview-column-width: 372px;
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --surface-subtle: #F7FCF9;
  --field-border: #C9DDD1;
  color-scheme: light;
}

:root[data-theme="dark"] {
  --ink: #F0FFF6;
  --muted: #AEC4B7;
  --line: #30463A;
  --soft: #101A15;
  --white: #17251F;
  --surface: #17251F;
  --surface-raised: #203129;
  --surface-subtle: #0D1712;
  --field-border: #3C5949;
  --meta-blue: #62F09A;
  --meta-blue-dark: #39E17D;
  --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: contain; object-position: center; }
.brand picture{display:flex;align-items:center}.header-menu-backdrop{display:none}
.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 { object-fit: cover; background: transparent; border-radius: 50%; }
.header-language-flag { width: 25px; height: 25px; display: block; object-fit: cover; border-radius: 50%; box-shadow: 0 1px 4px rgba(23,50,77,.18); }
.country-header-trigger { color: var(--meta-blue); background: transparent; border: 0; }
.country-header-trigger:hover, .country-header-trigger[aria-expanded="true"] { color: var(--ink); background: var(--soft); }
.country-header-trigger svg { width: 22px; height: 22px; stroke-width: 1.9; }
.country-mega-menu { width: min(680px,calc(100vw - 28px)); padding: 14px; }
.country-mega-heading { padding: 4px 4px 12px; display: grid; grid-template-columns:minmax(120px,.8fr) minmax(230px,1.2fr); align-items:center; gap:18px; border-bottom:1px solid var(--line); }
.country-mega-heading-copy { display:flex; flex-direction:column; }.country-mega-heading-copy strong { font-size:15px; }.country-mega-heading-copy small { color:var(--muted); font-size:10px; }
.country-mega-current { min-width:0; padding:8px 10px; display:grid; grid-template-columns:42px minmax(0,1fr); align-items:center; gap:10px; background:var(--soft); border-radius:12px; }.country-mega-current>.country-item-flag{font-size:31px;line-height:1}
.country-mega-search { height: 44px; margin: 12px 0 10px; padding-inline: 12px; display: flex; align-items: center; gap: 8px; background: var(--surface-subtle); border: 1px solid var(--field-border); border-radius: 11px; }
.country-mega-search:focus-within { border-color: var(--meta-blue); box-shadow: 0 0 0 3px rgba(73,108,92,.1); }.country-mega-search > span { color: var(--muted); font-size: 20px; }
.country-mega-search input { width: 100%; height: 40px; padding: 0; color: var(--ink); background: transparent; border: 0; outline: 0; }
.country-mega-list { max-height: 390px; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; overflow-y: auto; overscroll-behavior: contain; }
.country-mega-option { min-width: 0; min-height: 76px; padding: 9px 10px; display: grid; grid-template-columns: 42px minmax(0,1fr) 17px; align-items: center; gap: 10px; color: var(--ink); background: transparent; border: 1px solid transparent; border-radius: 11px; text-align: start; }
.country-mega-option:hover { background: var(--soft); }.country-mega-option.selected { background: color-mix(in srgb,var(--meta-blue) 8%,var(--surface)); border-color: color-mix(in srgb,var(--meta-blue) 22%,var(--line)); }
.country-mega-option > .country-item-flag { font-size: 31px; line-height: 1; }.country-mega-option > .country-item-copy { min-width: 0; }.country-mega-option .country-item-copy > strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }.country-mega-option > .country-item-check { color: var(--meta-blue); font-style: normal; opacity: 0; }.country-mega-option.selected > .country-item-check { opacity: 1; }
.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-label{display:flex;align-items:center;gap:5px}.header-project-count{min-width:16px;height:16px;padding:0 4px;display:inline-flex;align-items:center;justify-content:center;color:#fff;background:#E63E4F;border-radius:999px;font-size:9px;font-weight:800;line-height:1;box-shadow:0 0 0 2px var(--surface)}.header-project-count[hidden]{display:none}
.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 { direction:ltr; unicode-bidi:isolate; display:inline-flex; flex-direction:row; align-items:center; gap:5px; }.account-menu-phone .phone-meta-icon { width:14px; height:14px; flex:0 0 14px; }.account-menu-phone b { font:inherit; }
.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"], input[type="url"], 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: min(430px,calc(100vw - 28px)); 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 10px; display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: 11px; }.account-menu-heading > button { width: 34px; height: 34px; flex:0 0 34px;color: var(--meta-blue); background: var(--soft); border: 1px solid var(--line); border-radius: 10px; font-size: 18px; }.account-menu-heading .account-projects-link { width: auto; min-width:0;height:42px;flex:1;padding:0 13px; display: inline-flex; align-items: center; justify-content:space-between;gap: 10px; color:var(--header-green-ink);background:linear-gradient(135deg,color-mix(in srgb,var(--header-green) 20%,var(--surface)),color-mix(in srgb,var(--header-green) 8%,var(--surface)));border:1px solid color-mix(in srgb,var(--header-green) 38%,var(--line));border-radius:12px;font-size:11px;font-weight:800;box-shadow:0 7px 18px color-mix(in srgb,var(--header-green) 14%,transparent);transition:transform .18s ease,box-shadow .18s ease,background .18s ease}.account-projects-link:hover { background:color-mix(in srgb,var(--header-green) 25%,var(--surface));box-shadow:0 9px 22px color-mix(in srgb,var(--header-green) 20%,transparent);transform:translateY(-1px)}.account-projects-link span { font-size: 16px; 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-copy { 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; }
.builder-progress-grid{margin-bottom:20px;display:grid;grid-template-columns:var(--preview-column-width) minmax(0,1fr);grid-template-areas:"usage completion";gap:20px;align-items:stretch;direction:ltr}.builder-progress-grid>.overall-progress{grid-area:completion;margin-bottom:0;direction:rtl}.upload-usage{grid-area:usage;min-width:0;padding:15px 18px;display:flex;flex-direction:column;justify-content:center;gap:12px;direction:rtl}.upload-usage-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.upload-usage-heading>strong{font-size:12px}.upload-usage-meta{min-width:0;display:grid;justify-items:end;gap:2px;color:var(--muted);font-size:11px}.upload-usage-meta>span{direction:ltr;white-space:nowrap}.upload-usage-heading b{color:var(--meta-blue);font-size:17px}.upload-usage-meta button{padding:0;color:var(--meta-blue);background:transparent;border:0;font-size:8px;font-weight:800;text-decoration:underline;text-underline-offset:2px}.upload-usage-triangle{display:none;margin-inline-start:3px;color:#e49b19;font-size:9px;font-style:normal}.upload-usage.over-twenty .upload-usage-triangle{display:inline}.upload-usage-track{height:10px;overflow:hidden;background:#E3E7E2;border-radius:999px}.upload-usage-track span{display:block;width:0;height:100%;background:linear-gradient(90deg,#39E17D,#45B8FF);border-radius:inherit;transition:width .3s ease,background-color .2s ease}.upload-usage.near-limit .upload-usage-track span{background:linear-gradient(90deg,#FFC857,#FF6B6B)}.upload-usage-warning{display:flex;align-items:center;justify-content:space-between;gap:9px}.upload-usage-warning p{margin:0;color:var(--danger);font-size:9px;font-weight:700;line-height:1.45}.upload-usage-warning button{flex:0 0 auto;padding:5px 8px;color:#102419;background:#39E17D;border:0;border-radius:7px;font-size:9px;font-weight:800}.upload-limit-hint{display:block!important;color:var(--muted)!important;font-size:10px!important;font-weight:700}.upload-limit-hint:before{content:'•';margin-inline-end:5px;color:var(--meta-blue)}#transferHelpDialog a{color:var(--meta-blue);font-weight:800;text-underline-offset:3px}
.progress-copy { display: flex; align-items: center; gap: 16px; }
.progress-copy .progress-icon { width: 104px; height: 104px; flex: 0 0 104px; display: grid; place-items: center; color: var(--meta-blue); background: transparent; font-size: 27px; }
.rocket-lottie { width: 100%; height: 100%; display: block; overflow: hidden; pointer-events: none; }
.rocket-lottie svg { width: 100%; height: 100%; display: block; }
.progress-icon .rocket-lottie { width: 112px; height: 112px; filter: drop-shadow(0 7px 9px rgba(23,50,77,.16)); }
.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; }
.preview-language-toggle { min-width: 72px; height: 30px; padding: 3px 8px 3px 4px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; color: var(--ink); background: var(--soft); border: 1px solid var(--line); border-radius: 999px; box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 2px 7px rgba(23,50,77,.08); transition: transform .18s ease, border-color .18s ease, background-color .18s ease, box-shadow .18s ease; }
.preview-language-toggle:hover { border-color: color-mix(in srgb,var(--meta-blue) 45%,var(--line)); background: color-mix(in srgb,var(--meta-blue) 7%,var(--surface)); transform: translateY(-1px); }
.preview-language-toggle:focus-visible { outline: 3px solid color-mix(in srgb,var(--meta-blue) 24%,transparent); outline-offset: 2px; }
.preview-language-flag { width: 22px; height: 22px; display: block; flex: 0 0 22px; object-fit: cover; background: var(--surface); border: 1px solid rgba(23,50,77,.12); border-radius: 50%; box-shadow: 0 1px 4px rgba(23,50,77,.13); }
.preview-language-name { font-size: 8px; font-weight: 800; line-height: 1; white-space: nowrap; }
.preview-language-toggle[data-language="ar"] { padding: 3px 4px 3px 8px; direction: rtl; }
.preview-language-toggle[data-language="en"] { padding-right: 7px; direction: ltr; background: color-mix(in srgb,#173b76 7%,var(--surface)); }
.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; }
.mini-contact-details-preview { padding: 28px 18px; color: var(--preview-text); background: color-mix(in srgb,var(--preview-secondary) 38%,white); }
.mini-contact-details-heading h4 { margin: 4px 0 6px; font-size: 16px; }
.mini-contact-details-heading p { margin: 0 0 14px; color: color-mix(in srgb,var(--preview-text) 62%,white); font-size: 7px; line-height: 1.6; }
.mini-contact-details-grid { margin-bottom: 14px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
.mini-contact-detail-card { min-width: 0; padding: 9px; display: flex; align-items: flex-start; gap: 7px; background: color-mix(in srgb,white 91%,var(--preview-secondary)); border: 1px solid color-mix(in srgb,var(--preview-primary) 15%,transparent); border-radius: 8px; }
.mini-contact-detail-icon { width: 20px; height: 20px; flex: 0 0 20px; display: grid; place-items: center; color: white; background: var(--preview-primary); border-radius: 6px; font-size: 8px; }
.mini-contact-detail-card div { min-width: 0; display: grid; gap: 3px; }
.mini-contact-detail-card strong { color: var(--preview-primary); font-size: 7px; }
.mini-contact-detail-card small { overflow-wrap: anywhere; color: color-mix(in srgb,var(--preview-text) 70%,white); font-size: 6.3px; line-height: 1.35; }
.mini-map-illustration { position: relative; height: 185px; overflow: hidden; background: linear-gradient(135deg,color-mix(in srgb,var(--preview-secondary) 78%,white),color-mix(in srgb,var(--preview-primary) 12%,white)); border: 1px solid color-mix(in srgb,var(--preview-primary) 20%,transparent); border-radius: 12px; }
.mini-map-road { position: absolute; height: 22px; background: rgba(255,255,255,.88); border: 1px solid color-mix(in srgb,var(--preview-primary) 9%,transparent); box-shadow: 0 0 0 5px color-mix(in srgb,var(--preview-secondary) 30%,transparent); }
.mini-map-road::after { content: ''; position: absolute; inset: 50% 5px auto; border-top: 1px dashed color-mix(in srgb,var(--preview-primary) 32%,transparent); }
.mini-map-road.road-one { width: 125%; inset: 28px auto auto -12%; transform: rotate(-11deg); }
.mini-map-road.road-two { width: 115%; inset: 108px auto auto -8%; transform: rotate(15deg); }
.mini-map-road.road-three { width: 65%; inset: 72px -8% auto auto; transform: rotate(72deg); }
.mini-map-block { position: absolute; display: block; background: color-mix(in srgb,var(--preview-primary) 15%,white); border-radius: 4px; opacity: .72; }
.mini-map-block.block-one { width: 54px; height: 28px; inset: 9px auto auto 14px; }.mini-map-block.block-two { width: 67px; height: 35px; inset: 68px 15px auto auto; }.mini-map-block.block-three { width: 46px; height: 44px; inset: auto auto 10px 20px; }.mini-map-block.block-four { width: 38px; height: 24px; inset: auto 74px 15px auto; }
.mini-map-pin { position: absolute; z-index: 3; width: 34px; height: 34px; inset: 55px auto auto 50%; display: grid; place-items: center; background: var(--preview-primary); border: 4px solid white; border-radius: 50% 50% 50% 0; box-shadow: 0 7px 18px color-mix(in srgb,var(--preview-primary) 35%,transparent); transform: translateX(-50%) rotate(-45deg); }
.mini-map-pin i { width: 8px; height: 8px; background: var(--preview-accent); border-radius: 50%; transform: rotate(45deg); }
.mini-map-caption { position: absolute; z-index: 4; inset: auto 10px 10px; padding: 8px 10px; display: grid; gap: 2px; color: var(--preview-text); background: rgba(255,255,255,.9); border-radius: 7px; box-shadow: 0 5px 15px rgba(22,32,29,.1); backdrop-filter: blur(5px); }
.mini-map-caption strong { color: var(--preview-primary); font-size: 7.5px; }.mini-map-caption small { overflow-wrap: anywhere; font-size: 6.2px; line-height: 1.35; }
#previewViewport[data-design-style="bold"] .mini-contact-details-preview { padding: 34px 18px; }
#previewViewport[data-design-style="bold"] :is(.mini-contact-detail-card,.mini-map-illustration,.mini-map-caption) { border-radius: 0; }
#previewViewport[data-design-style="technologic"] .mini-contact-details-preview,
#previewViewport[data-design-style="digital"] .mini-contact-details-preview { color: #eef5f3; background: color-mix(in srgb,var(--preview-text) 90%,#05080b); }
#previewViewport[data-design-style="technologic"] .mini-contact-detail-card,
#previewViewport[data-design-style="digital"] .mini-contact-detail-card { background: color-mix(in srgb,var(--preview-text) 72%,#111820); border-color: color-mix(in srgb,var(--preview-accent) 28%,transparent); box-shadow: 0 0 14px color-mix(in srgb,var(--preview-accent) 8%,transparent); }
#previewViewport[data-design-style="technologic"] .mini-contact-detail-card small,
#previewViewport[data-design-style="digital"] .mini-contact-detail-card small { color: #c6d2cf; }
#previewViewport[data-design-style="technologic"] :is(.mini-contact-detail-card,.mini-map-illustration,.mini-map-caption) { border-radius: 2px; }
#previewViewport[data-design-style="light"] .mini-contact-details-preview { background: #fffaf6; }
#previewViewport[data-design-style="light"] :is(.mini-contact-detail-card,.mini-map-caption) { background: rgba(255,255,255,.88); border-color: #eee1da; border-radius: 16px; box-shadow: 0 10px 24px rgba(90,65,53,.06); }
#previewViewport[data-design-style="minimal"] .mini-contact-details-preview { text-align: center; background: white; }
#previewViewport[data-design-style="minimal"] .mini-contact-detail-card { text-align: start; background: transparent; border-width: 0 0 1px; border-radius: 0; }
#previewViewport[data-design-style="soft"] :is(.mini-contact-detail-card,.mini-map-illustration,.mini-map-caption) { border-radius: 18px; }
#previewViewport[data-design-style="retro"] :is(.mini-contact-detail-card,.mini-map-illustration,.mini-map-caption) { border-radius: 3px; box-shadow: 3px 3px 0 color-mix(in srgb,var(--preview-primary) 25%,transparent); }
#previewViewport[data-design-style="eighties"] :is(.mini-contact-detail-card,.mini-map-illustration,.mini-map-caption) { border-radius: 0; border-width: 2px; box-shadow: 4px 4px 0 color-mix(in srgb,var(--preview-accent) 58%,transparent); }
#previewViewport[data-design-style="calm"] :is(.mini-contact-detail-card,.mini-map-illustration,.mini-map-caption) { border-radius: 14px; box-shadow: none; }
.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; }

.social-posts-preview { min-height: 100%; padding: 15px; color: var(--preview-text); background: linear-gradient(145deg,#dfe4eb,#c7ced8); font-family: var(--preview-font); }
.social-preview-heading { margin-bottom: 12px; display: flex; align-items: end; justify-content: space-between; gap: 10px; }.social-preview-heading span { color: #697386; font-size: 7px; font-weight: 700; }.social-preview-heading strong { font-size: 10px; }
.social-post-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.social-post { position: relative; aspect-ratio: 1; padding: 16px; overflow: hidden; background: #fff; border-radius: 11px; box-shadow: 0 10px 24px rgba(23,50,77,.13); }.social-post:last-child { grid-column: 1/-1; aspect-ratio: 2.08/1; }
.social-post-number { position: absolute; top: 10px; inset-inline-end: 11px; color: var(--preview-primary); font-size: 6px; font-weight: 800; opacity: .55; }.social-post small { color: var(--preview-primary); font-size: 6px; font-weight: 800; }.social-post h3,.social-post h4 { margin: 4px 0; font-family: var(--logo-font); line-height: 1.3; }.social-post h3 { font-size: 15px; }.social-post h4 { font-size: 12px; }.social-post p,.social-post span { font-size: 6px; line-height: 1.6; }
.social-post-intro { display: flex; flex-direction: column; justify-content: center; background: radial-gradient(circle at 82% 18%,color-mix(in srgb,var(--preview-accent) 50%,transparent) 0 13%,transparent 14%),linear-gradient(145deg,#fff 0 58%,var(--preview-secondary) 58%); }.social-post-intro div { position: relative; z-index: 2; max-width: 86%; }
.social-post-story { background: radial-gradient(circle at 82% 78%,color-mix(in srgb,var(--preview-primary) 16%,transparent) 0 22%,transparent 23%),var(--preview-secondary); }.social-post-story p { position: relative; z-index: 2; width: 84%; }
.social-post-services { background: linear-gradient(150deg,#fff,var(--preview-secondary)); }.social-post-services>div { margin-top: 10px; display: grid; gap: 5px; }.social-post-services>div span { padding: 6px 7px; background: #fff; border-inline-start: 3px solid var(--preview-accent); border-radius: 5px; font-weight: 700; box-shadow: 0 3px 8px rgba(23,50,77,.08); }
.social-post-proof { display: flex; align-items: end; gap: 8px; background: radial-gradient(circle at 22% 20%,color-mix(in srgb,var(--preview-accent) 46%,transparent) 0 18%,transparent 19%),var(--preview-primary); color: #fff; }.social-post-proof div { position: relative; z-index: 2; width: 100%; }.social-post-proof small { color: var(--preview-accent); }
.social-post-contact { display: flex; flex-direction: column; justify-content: center; background: radial-gradient(circle at 85% 10%,color-mix(in srgb,var(--preview-accent) 58%,transparent),transparent 30%),linear-gradient(125deg,var(--preview-primary),color-mix(in srgb,var(--preview-primary) 66%,var(--preview-text))); color: #fff; }.social-post-contact small { color: var(--preview-accent); }.social-post-contact h4 { font-size: 18px; }.social-post-contact p { max-width: 70%; color: rgba(255,255,255,.78); }.social-post-contact strong { margin-top: 9px; color: #fff; font-family: var(--logo-font); font-size: 8px; }

.print-designs-preview { min-height: 100%; padding: 28px 16px 38px; color: var(--preview-text); background: radial-gradient(circle at 20% 16%,color-mix(in srgb,var(--preview-accent) 20%,transparent),transparent 28%),linear-gradient(145deg,#d9dee7,#bfc7d3); font-family: var(--preview-font); }
.print-designs-preview .business-card-stage { min-height: 0; margin-bottom: 22.5px; }
.stationery-stage { display: grid; justify-items: center; gap: 0; }
.letterhead-preview { width: 82%; aspect-ratio: 1/1.414; padding: 20px 18px 15px; display: flex; flex-direction: column; background: #fff; box-shadow: 0 18px 36px rgba(23,50,77,.22); transform: rotate(-1.2deg); }.letterhead-preview header { padding-bottom: 10px; display: flex; justify-content: space-between; gap: 8px; border-bottom: 2px solid var(--preview-primary); }.letterhead-preview header strong { color: var(--preview-primary); font-family: var(--logo-font); font-size: 10px; }.letterhead-preview header span,.letterhead-preview footer span { color: #768091; font-size: 4.8px; }.letterhead-lines { margin-top: 35px; display: grid; gap: 10px; }.letterhead-lines i { width: 87%; height: 3px; background: #e8ebef; border-radius: 9px; }.letterhead-lines i:nth-child(2),.letterhead-lines i:nth-child(5) { width: 68%; }.letterhead-preview footer { margin-top: auto; padding-top: 10px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid #e7eaee; }.letterhead-preview footer b { width: 25px; height: 4px; background: var(--preview-accent); border-radius: 9px; }
.envelope-preview { position: relative; width: 92%; aspect-ratio: 1.8/1; margin-top: 26px; padding: 18px; overflow: hidden; display: flex; flex-direction: column; justify-content: end; align-items: flex-start; background: #fff; box-shadow: 0 18px 36px rgba(23,50,77,.22); transform: rotate(1.4deg); }.envelope-flap { position: absolute; inset: 0 0 auto; height: 62%; background: linear-gradient(155deg,transparent 49.5%,color-mix(in srgb,var(--preview-secondary) 72%,white) 50%); border-bottom: 1px solid color-mix(in srgb,var(--preview-primary) 18%,transparent); }.envelope-preview strong,.envelope-preview span { position: relative; z-index: 2; }.envelope-preview strong { color: var(--preview-primary); font-family: var(--logo-font); font-size: 11px; }.envelope-preview span { margin-top: 3px; color: #778191; font-size: 5px; }.envelope-preview i { position: absolute; width: 42px; height: 42px; inset-inline-end: 18px; bottom: 17px; border: 7px solid var(--preview-primary); border-radius: 50%; opacity: .22; }
.letterhead-preview header strong{min-width:72px;min-height:22px;background-size:contain!important;background-position:left center!important;font-size:15px}.envelope-preview strong{min-width:88px;min-height:26px;background-size:contain!important;background-position:left center!important;font-size:17px}

/* Premium live preview: a cohesive website, social, and print 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-topbar{min-height:25px;padding:5px 17px;display:flex;align-items:center;justify-content:space-between;gap:10px;color:#667085;background:#f7f9f8;border-bottom:1px solid #e8ece9;font-size:5.5px}.mini-top-contact{display:flex;align-items:center;gap:10px;direction:ltr}.mini-top-contact span{display:flex;align-items:center;gap:3px}.mini-top-contact svg{width:8px;height:8px;color:var(--preview-primary);fill:none;stroke:currentColor}.mini-top-contact b{font-weight:600}.mini-top-socials{display:flex;align-items:center;gap:4px;direction:ltr}
.mini-site-nav { height:52px;padding:0 17px;gap:13px;color:#26332d;background:#fff;border-bottom:1px solid #e8ece9;font-size:6.7px;direction:ltr; }
.mini-site-nav strong { color:var(--preview-primary);font-size:12px; }
.mini-site-nav > div { display: flex; align-items: center; gap: 9px; }
.mini-site-nav #previewSiteNav { min-width:18px;flex:0 0 18px;overflow:hidden;order:3; }
.mini-site-nav>.preview-brand-name{order:1;margin:0;margin-right:auto;direction:auto}.mini-site-nav>.mini-site-socials{order:2;margin:0}.mini-site-nav>.mini-site-socials:empty{display:none}
.preview-brand-name.has-uploaded-logo{display:block;min-width:64px;min-height:22px;color:transparent;background-repeat:no-repeat!important;background-position:center!important;background-size:contain!important}
.mini-site-nav>.preview-brand-name.has-uploaded-logo{width:var(--uploaded-logo-width,70px);min-width:var(--uploaded-logo-width,70px);height:28px;min-height:28px;flex:0 0 var(--uploaded-logo-width,70px);background-position:left center!important}
.mini-menu-icon{width:18px;height:15px;display:flex!important;flex-direction:column;justify-content:space-between;flex:0 0 auto!important}.mini-menu-icon i{width:100%;height:2px;display:block;background:#26332d;border-radius:99px}
.mini-site-socials,.mini-top-socials,.mini-footer-socials { display:flex;align-items:center;gap:4px!important;direction:ltr;color:#fff; }
.mini-site-socials span,.mini-top-socials span,.mini-footer-socials span { width:10px;height:10px;display:grid;place-items:center;color:#fff;background:transparent;border:0; }
.mini-site-socials svg,.mini-top-socials svg,.mini-footer-socials svg { width:9px;height:9px;fill:none;stroke:currentColor;stroke-width:1.8; }
.mini-site-socials .icon-fill,.mini-top-socials .icon-fill,.mini-footer-socials .icon-fill { fill:currentColor;stroke:none; }
.mini-site-nav .mini-site-socials,.mini-site-topbar .mini-top-socials{color:var(--preview-primary)}
.mini-site-nav .mini-site-socials span,.mini-site-topbar .mini-top-socials span{color:var(--preview-primary)}
.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-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; }
:is(.mini-hero-actions button,.detail-block-button) { padding:8px 14px;color:#fff;background:var(--preview-primary);border:1px solid color-mix(in srgb,var(--preview-primary) 78%,#fff);border-radius:999px;box-shadow:0 6px 14px color-mix(in srgb,var(--preview-primary) 26%,transparent);font-size:6.5px;font-weight:800; }
.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)); }
.hero-art{width:172px;height:210px;overflow:hidden;background-repeat:no-repeat;background-size:200% 200%;border-radius:76px 18px 76px 18px;box-shadow:0 18px 34px rgba(23,50,77,.2)}.hero-art::before{inset:0;background:linear-gradient(145deg,transparent 55%,color-mix(in srgb,var(--preview-primary) 24%,transparent));border-radius:inherit;transform:none}
.hero-art{background-color:color-mix(in srgb,var(--preview-secondary) 65%,#fff);background-repeat:no-repeat;background-size:auto 100%}
.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; }
.mini-service-card.has-photo{min-height:125px;justify-content:flex-end;color:#fff;border:0;background-repeat:no-repeat;box-shadow:0 10px 24px rgba(12,22,18,.18)}.mini-service-card.has-photo::after{display:none}.mini-service-card.has-photo>span{color:#fff;background:rgba(255,255,255,.18);backdrop-filter:blur(4px)}.mini-service-card.has-photo strong{color:#fff;font-size:9px}.mini-service-card.has-photo small{color:rgba(255,255,255,.82)}
.website-preview[data-profession="restaurant"] .mini-card-row { grid-template-columns: 1fr; }
.website-preview[data-profession="restaurant"] .mini-service-card { min-height: 82px; }
.website-preview[data-offering-layout="courses"] .mini-card-row{grid-template-columns:1fr}.website-preview[data-offering-layout="courses"] .mini-service-card{min-height:82px;padding:10px 12px;display:grid;grid-template-columns:30px 1fr;grid-template-rows:auto auto;column-gap:10px;border-inline-start:4px solid var(--preview-primary);border-radius:4px 12px 12px 4px}.website-preview[data-offering-layout="courses"] .mini-service-card>span{grid-row:1/3}.website-preview[data-offering-layout="courses"] .mini-service-card strong{margin:0;font-size:9px}.website-preview[data-offering-layout="packages"] .mini-card-row{align-items:stretch}.website-preview[data-offering-layout="packages"] .mini-service-card{min-height:128px;border:1px solid color-mix(in srgb,var(--preview-primary) 20%,#e8ebf0);border-bottom:5px solid var(--preview-primary);border-radius:16px 16px 7px 7px}.website-preview[data-offering-layout="packages"] .mini-service-card:nth-child(even){transform:translateY(8px)}
.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: visible; background: transparent; }
.mini-about-art span { position: absolute; width: 72px; height: 72px; left: 50%; bottom: 12px; background:color-mix(in srgb,var(--preview-secondary) 72%,transparent);border-radius:50%;transform:translateX(-50%);filter:blur(2px); }
.mini-about-art img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; transform:perspective(480px) rotateY(-3deg) translateY(3px);filter:drop-shadow(0 13px 12px rgba(23,50,77,.16)); }
.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-detail-list { display: grid; gap: 5px; }
.mini-detail-list span { padding: 5px 7px; color: var(--preview-text); background: rgba(255,255,255,.72); border-inline-start: 2px solid var(--preview-accent); border-radius: 5px; font-size: 5.8px; line-height: 1.45; }
.mini-collection-section { padding: 27px 18px 29px; background: #fff; }
.mini-collection-section:nth-of-type(even) { background: linear-gradient(145deg, #fff, color-mix(in srgb, var(--preview-secondary) 55%, white)); }
.mini-collection-section h4 { margin: 3px 0 13px; font-size: 15px; line-height: 1.35; }
.mini-collection-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
.mini-collection-card, .gallery-tile { min-height: 88px; padding: 11px; display: flex; flex-direction: column; gap: 5px; background: #fff; border: 1px solid #e7ebef; border-radius: 10px; box-shadow: 0 7px 18px rgba(23,50,77,.06); }
.mini-collection-card i { width: 25px; height: 20px; display: grid; place-items: center; color: var(--preview-primary); background: var(--preview-secondary); border-radius: 6px; font-size: 6px; font-style: normal; font-weight: 800; }
.mini-collection-card strong { margin-top: auto; font-size: 8px; }
.mini-collection-card small { color: #687385; font-size: 5.8px; line-height: 1.5; }
.mini-collection-card b { color: var(--preview-primary); font-size: 6.5px; }
.mini-pricing-card{min-height:128px;padding:13px;justify-content:flex-start;background:linear-gradient(155deg,#fff,color-mix(in srgb,var(--preview-secondary) 42%,#fff));border:1px solid color-mix(in srgb,var(--preview-primary) 20%,#e7ebef);border-top:4px solid var(--preview-primary)}
.mini-pricing-card strong{margin-top:5px;font-size:9px;line-height:1.35}.mini-pricing-card b{font-size:11px;line-height:1.2}.mini-pricing-card small{margin-top:auto;padding-top:5px}
.mini-collection-card.has-photo{min-height:145px;justify-content:flex-end;color:#fff;border:0;background-repeat:no-repeat;box-shadow:0 10px 24px rgba(12,22,18,.18)}.mini-collection-card.has-photo i{color:#fff;background:rgba(255,255,255,.18);backdrop-filter:blur(4px)}.mini-collection-card.has-photo strong,.mini-collection-card.has-photo b{color:#fff}.mini-collection-card.has-photo small{color:rgba(255,255,255,.8)}.mini-collection-card.portfolio-photo-card{min-height:178px}.mini-collection-card.portfolio-photo-card strong{font-size:9px}
.mini-custom-preview-section { padding: 25px 18px; background: linear-gradient(145deg, var(--preview-secondary), #fff); }
.mini-custom-preview-section h4 { margin: 3px 0 8px; font-size: 15px; }
.mini-custom-preview-section p { margin: 0; color: #687385; font-size: 6.4px; line-height: 1.7; white-space: pre-line; }
.mini-testimonials-preview, .mini-gallery-preview { padding:27px 18px 30px; background:#fff; }
:is(.mini-testimonials-preview,.mini-gallery-preview) h4,.mini-contact-form-preview h4 { margin:3px 0 13px; font-size:15px; }
.mini-testimonials-grid { display:block; }
.mini-testimonial-track { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch;gap:10px; }
.mini-testimonial-track .mini-testimonial-card:only-child { grid-column:1/-1; }
.mini-testimonials-grid:not(.is-slider) .mini-testimonial-card:nth-child(3) { grid-column:1/-1; }
.mini-testimonial-card { min-height:148px;padding:15px 12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;text-align:center;background:#fff;border:1px solid #edf0ee;border-radius:12px;box-shadow:0 7px 18px rgba(23,50,77,.05); }
.mini-client-photo { width:48px;height:48px;display:grid;place-items:center;overflow:hidden;color:#fff;background:var(--preview-primary) center/cover;border:3px solid #fff;border-radius:50%;box-shadow:0 5px 12px rgba(23,50,77,.12); }
.mini-client-photo svg { width:100%;height:100%; }
.mini-testimonial-card p { max-width:220px;margin:0;color:#4f5c68;font-size:6.5px;line-height:1.7; }
.mini-testimonial-card strong { font-size:7px; }
.mini-slider-arrow { width:24px;height:24px;padding:0;display:grid;place-items:center;color:#fff;background:var(--preview-primary);border:0;border-radius:50%;font-size:14px;line-height:1; }
.mini-slider-dots { margin-top:10px;display:flex;justify-content:center;gap:4px; }.mini-slider-dots i { width:4px;height:4px;background:#bdc8c1;border-radius:50%;transition:width .2s ease,background .2s ease; }.mini-slider-dots i.active { width:12px;background:var(--preview-primary);border-radius:99px; }
.mini-contact-form-preview { padding:27px 18px 29px; background:#fff; }
.mini-contact-form-preview>div:first-child p { margin:-8px 0 13px; color:#687385; font-size:6px; }
.mini-form-fields { display:grid;gap:8px; }
.mini-form-row{display:grid;gap:8px}.mini-form-row.count-1{grid-template-columns:1fr}.mini-form-row.count-2{grid-template-columns:repeat(2,minmax(0,1fr))}.mini-form-row.is-small.count-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.mini-form-fields label { display:grid;color:var(--preview-text);font-size:5.8px;font-weight:800; }
.mini-form-fields input,.mini-form-fields textarea { width:100%;min-height:22px;padding:5px 7px;resize:none;background:#f8faf9;border:1px solid #dfe5e1;border-radius:6px;font:inherit; }
.mini-form-fields textarea { min-height:48px; }
.mini-contact-form-preview>button { margin-top:10px; padding:7px 13px; color:#fff; background:var(--preview-primary); border:0; border-radius:7px; font-size:6px; font-weight:800; }
.mini-site-footer { min-height:64px; padding:15px 18px; display:grid; grid-template-columns:1fr auto; align-items:center; gap:10px; color:#fff; background:color-mix(in srgb,var(--preview-text) 93%,var(--preview-primary)); }
.mini-site-footer small { font-size:5.5px; opacity:.72; }

.testimonial-entry-grid { display:grid; grid-template-columns:minmax(0,1fr) 122px; align-items:end; gap:16px; }
.testimonial-photo-upload { min-width:0;min-height:86px;padding:9px;display:grid;grid-template-columns:34px minmax(0,1fr);align-items:center;gap:2px 8px;overflow:hidden;cursor:pointer;background:var(--surface-subtle);border:1px dashed var(--line);border-radius:11px; }
.testimonial-photo-upload input { position:absolute; width:1px; height:1px; opacity:0; }
.testimonial-photo-preview { position:relative;grid-row:1/3;width:34px;height:34px;display:grid;place-items:center;color:#fff;background:var(--surface) center/cover;border-radius:50%;font-weight:900;box-shadow:0 0 0 1px var(--line); }
.testimonial-photo-preview svg { width:31px;height:31px; }.testimonial-photo-preview i { position:absolute;inset:auto -2px -2px auto;width:14px;height:14px;display:grid;place-items:center;color:#fff;background:#137A43;border:2px solid var(--surface);border-radius:50%;font-size:9px;font-style:normal;line-height:1; }
.testimonial-photo-upload strong,.testimonial-photo-upload small{min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.testimonial-photo-upload strong { align-self:end;font-size:11px; }.testimonial-photo-upload small { align-self:start;color:var(--muted);font-size:9px; }
.contact-form-builder-heading { margin-bottom:12px; display:flex; justify-content:space-between; gap:14px; color:var(--muted); }.contact-form-builder-heading strong { color:var(--ink); }
.contact-form-builder { display:grid; gap:10px; }
.contact-form-field { padding:12px;display:grid;grid-template-columns:32px minmax(150px,1fr) auto 36px 36px;align-items:center;gap:8px;background:var(--surface-subtle);border:1px solid var(--line);border-radius:12px; }
.contact-field-sort { display:grid;gap:3px;align-self:center; }.contact-field-sort button { width:30px;height:25px;padding:0;display:grid;place-items:center;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:6px;line-height:1; }.contact-field-sort button svg{width:16px;height:10px;display:block;fill:none;stroke:currentColor;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}.contact-field-sort button:disabled { opacity:.28;cursor:not-allowed; }
.contact-field-main { display:grid; gap:4px; }.contact-field-main label { color:var(--muted); font-size:10px; font-weight:800; }.contact-field-main input { min-width:0; height:40px; }
.contact-field-main.is-large input { height:72px;padding-bottom:34px; }
.contact-field-required,.contact-field-add,.contact-field-delete { min-height:36px; padding:7px 10px; border-radius:8px; font-weight:850; }
.contact-field-required { color:var(--muted);background:var(--surface);border:1px solid var(--line);font-size:10px;font-weight:600; }.contact-field-required.is-required { color:var(--danger);background:color-mix(in srgb,var(--danger) 7%,var(--surface));border-color:color-mix(in srgb,var(--danger) 24%,var(--line)); }.contact-field-required:disabled { opacity:.72;cursor:not-allowed; }
.contact-field-add { width:36px; padding:0; color:var(--meta-blue); background:color-mix(in srgb,var(--meta-blue) 8%,var(--surface)); border:1px solid color-mix(in srgb,var(--meta-blue) 30%,var(--line)); font-size:18px; }
.contact-field-delete { width:36px; padding:0; color:var(--danger); background:color-mix(in srgb,var(--danger) 7%,var(--surface)); border:1px solid color-mix(in srgb,var(--danger) 24%,var(--line)); font-size:18px; }
.form-submission-email { margin-top:24px;padding:18px;display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,.8fr);align-items:center;gap:16px;background:color-mix(in srgb,var(--meta-blue) 9%,var(--surface));border:2px solid color-mix(in srgb,var(--meta-blue) 38%,var(--line));border-radius:14px;box-shadow:0 8px 22px color-mix(in srgb,var(--meta-blue) 8%,transparent); }.form-submission-email>div { display:grid;gap:4px; }.form-submission-email strong { font-size:14px; }.form-submission-email small { color:var(--muted);font-size:11px; }.form-submission-email input { height:46px;background:var(--surface);border-color:color-mix(in srgb,var(--meta-blue) 45%,var(--line));direction:ltr;text-align:left; }
.form-section.portfolio-only .project-description-field,.form-section.portfolio-only .supplementary-data-section{display:none}.form-section.portfolio-only .project-item .item-upload{min-height:118px}
.address-contact-entry{align-items:stretch}.address-contact-entry .map-link-field{margin-top:7px}.map-link-field input{direction:ltr;text-align:left}
#previewViewport>article { pointer-events:none;user-select:none;-webkit-user-select:none; }
.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; }
:is(.tabs-scroll,.gallery-layout-arrow) { 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; }
:is(.tabs-scroll,.gallery-layout-arrow)[hidden] { display: none !important; }
:is(.tabs-scroll,.gallery-layout-arrow):hover:not(:disabled) { color: white; background: var(--meta-blue); border-color: var(--meta-blue); }
:is(.tabs-scroll,.gallery-layout-arrow):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"] :is(.tabs-scroll,.gallery-layout-arrow)[data-scroll="prev"] { order: 1; transform: none; }
[dir="ltr"] :is(.tabs-scroll,.gallery-layout-arrow)[data-scroll="next"] { order: 3; transform: none; }
[dir="rtl"] .section-tabs-wrap { direction: ltr; }
[dir="rtl"] .section-tabs { direction: rtl; }
#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; }
.upload-zone.drag-over { border-color: var(--meta-blue); background: color-mix(in srgb,var(--meta-blue) 9%,var(--surface)); box-shadow: inset 0 0 0 2px color-mix(in srgb,var(--meta-blue) 16%,transparent); }
.upload-zone.drag-over .upload-icon { transform: translateY(-2px) scale(1.05); }
.upload-progress-indicator { width: 88px; margin: 2px 0 7px; display: grid; grid-template-columns: minmax(0, 1fr) 29px; align-items: center; gap: 6px; color: var(--meta-blue); font-size: 10px; font-weight: 800; line-height: 1; direction: ltr; }
.upload-progress-indicator[hidden] { display: none !important; }
.upload-progress-indicator::before { content: ''; grid-column: 1; grid-row: 1; height: 6px; background: color-mix(in srgb, var(--meta-blue) 14%, var(--surface)); border-radius: 999px; }
.upload-progress-indicator i { grid-column: 1; grid-row: 1; width: 0; height: 6px; background: linear-gradient(90deg, #39E17D, #45B8FF); border-radius: 999px; box-shadow: 0 0 8px color-mix(in srgb, #39E17D 38%, transparent); transition: width .08s linear; }
.upload-progress-indicator b { grid-column: 2; grid-row: 1; min-width: 29px; font: inherit; text-align: end; }
.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-help-box { margin: 26px auto 22px; padding: 20px; text-align: start; background: linear-gradient(135deg,color-mix(in srgb,var(--meta-blue) 10%,var(--surface)),color-mix(in srgb,#f4c95d 12%,var(--surface))); border: 1px solid color-mix(in srgb,var(--meta-blue) 24%,var(--line)); border-radius: 22px; box-shadow: 0 12px 28px rgba(23,50,77,.09); }
.payment-help-heading { display: flex; align-items: center; gap: 13px; }.payment-help-heading .help-question-icon { flex: 0 0 44px; width: 44px; height: 44px; color: white; background: var(--meta-blue); border-radius: 14px; }.payment-help-heading h2 { margin: 0; font-size: clamp(17px,2.4vw,21px); line-height: 1.45; }.payment-help-heading p { margin: 3px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.payment-help-options { margin-top: 17px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }.payment-help-options .help-option { min-height: 70px; padding: 10px 12px; background: color-mix(in srgb,var(--surface) 92%,transparent); border: 1px solid var(--line); border-radius: 15px; box-shadow: 0 4px 12px rgba(23,50,77,.05); transition: transform .15s ease,border-color .15s ease,background .15s ease; }.payment-help-options .help-option:hover { background: var(--surface); border-color: color-mix(in srgb,var(--meta-blue) 32%,var(--line)); transform: translateY(-1px); }.payment-help-options .help-option + .help-option { margin-top: 0; }
.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; }
.phone-input-combo { min-width:0; display:flex; direction:ltr; }.phone-country-prefix { min-width:94px; height:52px; padding:0 12px; display:inline-flex; align-items:center; justify-content:center; gap:8px; color:var(--ink); background:var(--soft); border:1px solid var(--field-border); border-inline-end:0; border-radius:11px 0 0 11px; font-size:13px; font-weight:800; white-space:nowrap; user-select:none; }.phone-prefix-flag{font-size:22px;line-height:1}.phone-prefix-code{direction:ltr;unicode-bidi:isolate}.phone-input-combo>input { min-width:0; flex:1; height:52px; padding:0 14px; direction:ltr; color:var(--ink); background:var(--surface-subtle); border:1px solid var(--field-border); border-radius:0 11px 11px 0; outline:0; }.phone-input-combo:focus-within .phone-country-prefix,.phone-input-combo:focus-within>input{border-color:var(--meta-blue)}.phone-input-combo:focus-within{filter:drop-shadow(0 0 0 rgba(0,0,0,0))}
.country-select { position: relative; min-width: 0; }.country-select.open { z-index: 40; }.country-select-trigger { width: 100%; min-height: 66px; padding: 6px 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; flex: 1; display: grid; grid-template-columns: 42px minmax(0,1fr); align-items: center; gap: 10px; }.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: none; padding: 10px; display: none; overflow: hidden; 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: 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: 290px; display: grid; grid-template-columns: 1fr; gap: 4px; overflow-y: auto; overscroll-behavior: contain; }.country-option { min-width: 0; min-height: 70px; padding: 8px 10px; display: grid; grid-template-columns: 42px minmax(0,1fr) 18px; align-items: center; gap: 10px; color: var(--ink); background: transparent; border: 1px solid transparent; border-radius: 11px; 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)); border-color: color-mix(in srgb,var(--meta-blue) 22%,var(--line)); }.country-option > .country-item-flag,.country-select-value > .country-item-flag { font-size: 31px; line-height: 1; }.country-option > .country-item-check { color: var(--meta-blue); font-style: normal; opacity: 0; }.country-option.selected > .country-item-check { opacity: 1; }.country-no-results { margin: 0; padding: 24px 12px; color: var(--muted); font-size: 12px; text-align: center; }
.country-item-copy { min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:4px; text-align:start; }.country-item-copy > strong { overflow:hidden; max-width:100%; color:var(--ink); font-size:13px; text-overflow:ellipsis; white-space:nowrap; }.country-item-meta { width:100%; display:flex; flex-wrap:wrap; align-items:center; gap:5px 10px; }.country-item-meta small { min-width:0; display:inline-flex; align-items:center; gap:5px; color:var(--muted); font-size:11px; font-weight:700; line-height:1.3; text-align:start; }.country-meta-icon { width:17px; height:17px; flex:0 0 17px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }.currency-meta-icon { color:#c39116; }.phone-meta-icon { color:#2f9d65; }.country-item-phone { direction:ltr!important; unicode-bidi:isolate; flex-direction:row!important; }
[dir="rtl"] .country-item-copy{align-items:flex-start;text-align:right}[dir="rtl"] .country-item-meta,[dir="rtl"] .country-item-meta small{justify-content:flex-start;text-align:right}
[dir="rtl"] .country-item-phone,[dir="rtl"] .account-menu-phone{flex-direction:row-reverse!important}
.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; inset-inline-end: 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.webp'); }
:root[data-theme="dark"] .profession-card,
:root[data-theme="dark"] :is(.tabs-scroll,.gallery-layout-arrow),
: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-wordmark-start { color: #39E17D; }
.site-footer-wordmark-kit { color: var(--ink); }
.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: 981px) {
  [dir="ltr"] .workspace { grid-template-columns: minmax(0,1fr) var(--preview-column-width); grid-template-areas: "forms preview"; }
  [dir="ltr"] .builder-progress-grid{grid-template-columns:minmax(0,1fr) var(--preview-column-width);grid-template-areas:"completion usage"}[dir="ltr"] .builder-progress-grid>.overall-progress,[dir="ltr"] .upload-usage{direction:ltr}
}
[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: 980px) {
  .topbar { padding-inline: 14px; gap: 8px; }
  .brand { flex: 0 1 132px; min-width: 92px; }
  .brand picture { min-width: 0; }
  .platform-logo { width: min(132px,100%); height: 52px; object-fit: contain; }
  .header-actions { min-width: 0; flex: 1 1 auto; justify-content: flex-end; gap: 3px; }
  .home-menu-button { width: 44px; min-width: 44px; padding-inline: 0; justify-content: center; }
  .home-menu-button span, .help-menu-copy, .help-chevron, .user-menu-copy, .user-menu-chevron, .header-projects-copy, .header-projects-chevron { display: none; }
  .help-menu-button, .user-menu-button, .header-projects-menu-button { min-width: 44px; padding: 3px; justify-content: center; }
  .preference-controls { flex: 0 0 auto; padding-inline-start: 3px; }
}
@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: 980px) {
  html,body{max-width:100%;overflow-x:clip}.header-menu-backdrop{position:fixed;z-index:49;inset:72px 0 0;display:block;padding:0;background:rgba(12,18,15,.38);border:0;border-radius:0;backdrop-filter:blur(1.5px)}.header-menu-backdrop[hidden]{display:none!important}
  .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: 74px 12px auto 12px; width: auto; }
  .workspace { grid-template-columns: 1fr; grid-template-areas: "forms"; }.preview-panel { display: none; }
  .builder-progress-grid,[dir="ltr"] .builder-progress-grid{grid-template-columns:1fr;grid-template-areas:"completion" "usage";gap:12px}.upload-usage{min-height:96px}
  .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 { color: #fff; background: var(--danger); border-color: color-mix(in srgb,var(--danger) 72%,#fff); box-shadow: 0 12px 30px color-mix(in srgb,var(--danger) 42%,transparent); }
  body.mobile-preview-open .mobile-preview-toggle:hover { background: color-mix(in srgb,var(--danger) 86%,#000); box-shadow: 0 16px 34px color-mix(in srgb,var(--danger) 50%,transparent); }
  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; }.topbar .account-menu,.topbar .user-menu,.topbar .header-projects-menu,.topbar .help-menu,.topbar .preference-menu { position: fixed; top:74px;right:12px;bottom:auto;left: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 { min-width:0;font-size: 15px; }.topbar { height: 62px; padding: 0 8px;gap:5px }.brand{flex:0 0 42px}.brand picture{width:42px;height:48px;justify-content:center}.platform-logo,:root[data-theme="dark"] .platform-logo { width:42px;height:42px;object-fit:contain;content:url('assets/startkit-mark.webp') }.header-menu-backdrop{inset-block-start:62px}
  .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; }.topbar .account-menu,.topbar .user-menu,.topbar .header-projects-menu,.topbar .help-menu,.topbar .preference-menu { position:fixed;top:64px;right:12px;bottom:auto;left: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; }:is(.tabs-scroll,.gallery-layout-arrow) { 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 (max-width: 380px){.topbar{padding-inline:5px;gap:2px}.header-actions{min-width:0;gap:1px}.brand{flex-basis:36px}.brand picture,.platform-logo{width:36px;height:36px}.home-menu-button{width:34px;min-height:34px}.header-projects-menu-button,.user-menu-button{min-height:36px;padding:1px}.header-projects-icon,.user-avatar,.help-question-icon{width:34px;height:34px;flex-basis:34px;border-radius:10px}.header-projects-icon .ui-icon{width:30px;height:30px}.user-avatar .ui-icon{width:27px;height:27px}.help-menu-button{min-height:36px;padding:1px}.preference-controls{gap:0;padding-inline-start:1px}.preference-trigger{width:29px;height:32px}.preference-trigger svg{width:17px;height:17px}}
@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;color:#718078;border:1px solid #dfe5e0;border-radius:50%;background:linear-gradient(currentColor,currentColor) center/9px 1.5px no-repeat,linear-gradient(currentColor,currentColor) center/1.5px 9px no-repeat;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-copy .landing-hero-visual{width:min(100%,390px);margin:12px auto 2px}.landing-hero-copy .landing-hero-visual img{width:100%;max-width:100%;transform:none}
.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{width:min(100%,310px);min-height:61px;padding:8px 20px 8px 25px;justify-content:space-between;gap:22px;color:#123525;background:#39E17D;box-shadow:0 13px 30px rgba(35,190,102,.26)}
.landing-price-button:hover{color:#102f21;background:#2ed873;box-shadow:0 17px 36px rgba(35,190,102,.34)}
.landing-price-button:focus-visible{outline:3px solid rgba(57,225,125,.34);outline-offset:4px}
.landing-price-button .landing-button-copy small{color:rgba(18,53,37,.72)}
.landing-price-lead .localized-price { margin-inline: .18em; display: inline-flex; flex-direction:row!important; direction:ltr!important; align-items: baseline; gap: .2em; color: var(--meta-blue); font-weight: 900; white-space: nowrap; unicode-bidi:isolate; }
[dir="rtl"] .landing-price-lead .localized-price { flex-direction:row-reverse!important; }
.landing-price-lead .price-amount { order:1; direction:ltr; unicode-bidi:isolate; font-size:1.62em; line-height:1; }.landing-price-lead .price-code { order:2; direction:auto; unicode-bidi:isolate; font-size:1.18em; letter-spacing:.035em; }
.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-hero-visual.hero-rotator{aspect-ratio:3/2;isolation:isolate}
.landing-hero-visual .hero-rotation-image{position:absolute;inset:0;width:100%;height:100%;max-height:none;object-fit:contain;opacity:0;visibility:hidden;transition:opacity .9s ease,visibility 0s linear .9s;will-change:opacity}
.landing-hero-visual .hero-rotation-image.active{z-index:1;opacity:1;visibility:visible;transition:opacity .9s ease,visibility 0s linear 0s}
@media(prefers-reduced-motion:reduce){.landing-hero-visual .hero-rotation-image{transition:none}}
.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:1180px;margin:0 auto;display:grid;grid-template-columns:repeat(3,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}.deliverables-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.deliverable-card:last-child{grid-column:1/-1;max-width:520px;width:100%;justify-self:center}.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:last-child{grid-column:auto;max-width:none}.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:720px){.country-mega-heading{grid-template-columns:1fr;gap:10px}.country-mega-list{grid-template-columns:repeat(2,minmax(0,1fr));max-height:58vh}.country-mega-menu{padding:12px}.landing-price-lead .localized-price{display:inline-flex}}
@media(max-width:430px){.country-mega-list{grid-template-columns:1fr}.country-mega-option{min-height:54px}}

.admin-mode .builder-project-number{color:#521407!important;background:linear-gradient(145deg,#ff4a2d,#ffb21d)!important;box-shadow:0 8px 22px rgba(223,61,22,.22)!important}
.admin-mode .section-tab.active,.admin-mode .identity-subtab.active,.admin-mode .account-tab.active{color:#b72c17;background:#fff5e5;border-color:#efaa70}
.admin-mode .section-tab.active .ui-icon,.admin-mode .identity-subtab.active .ui-icon{color:#d9381d}
.admin-mode .section-tab.active::before{background:linear-gradient(90deg,#e82f1b,#ff9d18)}
.admin-mode .tab-status::after,.admin-mode .progress-track>i,.admin-mode .overall-progress-bar>i{background:linear-gradient(90deg,#e7301d,#ffad18)}
.admin-mode .overall-progress{border-color:#efbd8e;background:#fffaf2}
@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 svg{width:32px;height:32px;display:block;overflow:visible;fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round;transform:none}
.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:#137A43;
  --meta-blue-dark:#0B5E32;
  --ink:#17241D;
  --muted:#66746C;
  --line:#D9E8DF;
  --soft:#F2FAF5;
  --white:#fff;
  --success:#16A85B;
  --warning:#E6A300;
  --preview-primary:#137A43;
  --preview-secondary:#E8FFF1;
  --preview-accent:#39E17D;
  --preview-text:#17241D;
  --surface:#fff;
  --surface-raised:#fff;
  --surface-subtle:#F7FCF9;
  --field-border:#C9DDD1;
  --shadow:0 1px 2px rgba(32,37,40,.05),0 12px 30px rgba(45,68,55,.06);
}
:root[data-theme="dark"]{
  --ink:#F0FFF6;
  --muted:#AEC4B7;
  --line:#30463A;
  --soft:#101A15;
  --white:#17251F;
  --surface:#17251F;
  --surface-raised:#203129;
  --surface-subtle:#0D1712;
  --field-border:#3C5949;
  --meta-blue:#62F09A;
  --meta-blue-dark:#39E17D;
  --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:#E8FFF1}
.profession-card:nth-child(4n+2) .profession-illustration{background:#FFF6D8}
.profession-card:nth-child(4n+3) .profession-illustration{background:#EAF7FF}
.profession-card:nth-child(4n) .profession-illustration{background:#F3EEFF}
.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)}
.topbar{--header-green:#39E17D;--header-green-ink:#16733D;--header-gold:#FFC857;--header-gold-ink:#8A5B00;--header-coral:#FF6B6B;--header-coral-ink:#A52F3B;--header-sky:#45B8FF;--header-sky-ink:#176899;--header-violet:#A78BFA;--header-violet-ink:#6548B8}
.topbar .header-projects-icon,.topbar .header-projects-menu .account-icon{color:var(--header-green-ink);background:color-mix(in srgb,var(--header-green) 14%,var(--surface))}
.topbar .header-projects-menu .account-summary>.account-icon{background:transparent}.topbar .header-projects-menu .account-summary>.account-icon .ui-icon{display:block;margin:auto;transform:translate(0)}
.topbar .user-avatar,.topbar .user-menu-avatar{color:var(--header-sky-ink);background:color-mix(in srgb,var(--header-sky) 17%,var(--surface))}
.topbar .help-question-icon,.topbar .faq-option .help-option-icon{color:var(--header-violet-ink);background:color-mix(in srgb,var(--header-violet) 17%,var(--surface))}
.topbar .whatsapp-option .help-option-icon{color:var(--header-green-ink);background:color-mix(in srgb,var(--header-green) 18%,var(--surface))}
.topbar .call-option .help-option-icon{color:var(--header-coral-ink);background:color-mix(in srgb,var(--header-coral) 17%,var(--surface))}
.topbar .sun-icon{color:var(--header-gold-ink);background:color-mix(in srgb,var(--header-gold) 22%,var(--surface))}
.topbar .moon-icon{color:var(--header-violet-ink);background:color-mix(in srgb,var(--header-violet) 17%,var(--surface))}
.topbar .language-icon{background:transparent}
.topbar .preference-option i,.topbar .account-menu-phone .ui-icon,.topbar .account-menu-user-id{color:var(--header-green-ink)!important}
.topbar .header-projects-icon path:nth-of-type(2),.topbar .header-projects-icon path:nth-of-type(4){fill:var(--header-green)}
.topbar .header-projects-icon path:nth-of-type(3){fill:var(--header-gold)}
.topbar .header-projects-icon path:nth-of-type(5){fill:var(--header-coral)}
.topbar .header-projects-menu-button[aria-expanded="true"]{background:color-mix(in srgb,var(--header-green) 10%,var(--surface))}
.topbar .user-menu-button[aria-expanded="true"]{background:color-mix(in srgb,var(--header-sky) 10%,var(--surface))}
.topbar .help-menu-button[aria-expanded="true"]{background:color-mix(in srgb,var(--header-violet) 10%,var(--surface))}
.topbar .help-menu-button[aria-expanded="true"] .help-question-icon{color:#241444;background:var(--header-violet)}
.platform-logo,:root[data-theme="dark"] .platform-logo{filter:none}
@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}
/* Bright StartKit identity: shared across the full product, without altering raster imagery. */
:root{
  --brand-bright:#39E17D;
  --brand-coral:#FF6B6B;
  --brand-gold:#FFC857;
  --brand-sky:#45B8FF;
  --brand-violet:#A78BFA;
  --brand-green-tint:#E8FFF1;
  --brand-sky-tint:#EAF7FF;
  --brand-gold-tint:#FFF6D8;
  --brand-coral-tint:#FFF0F0;
  --brand-violet-tint:#F3EEFF;
}
::selection{color:#102419;background:color-mix(in srgb,var(--brand-bright) 52%,white)}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,label:has(input:focus-visible){outline-color:color-mix(in srgb,var(--brand-bright) 48%,transparent)}
.primary-button,.start-button,.submit-button,.save-button,.main-cta,.hero-cta,.faq-contact-button{background:var(--meta-blue);border-color:var(--meta-blue);box-shadow:0 10px 26px color-mix(in srgb,var(--brand-bright) 18%,transparent)}
.secondary-button,.ghost-button,.outline-button{border-color:color-mix(in srgb,var(--meta-blue) 42%,var(--line))}
.progress-fill,.overall-progress-fill,.completion-fill{background:linear-gradient(90deg,var(--brand-bright),var(--brand-sky))}
.step-pill,.status-badge,.required-label{color:var(--meta-blue-dark);background:var(--brand-green-tint)}
.faq-hero{background:radial-gradient(circle at 82% 12%,color-mix(in srgb,var(--brand-sky) 72%,transparent),transparent 36%),linear-gradient(135deg,#0B5E32 0%,#137A43 56%,#6548B8 100%);box-shadow:0 20px 50px color-mix(in srgb,var(--brand-bright) 20%,transparent)}
.landing-process{background:var(--surface-subtle)}
.process-steps,.process-steps li+li{border-color:var(--line)}
.process-number{color:var(--meta-blue)}
.process-steps h3{color:var(--ink)}
.process-steps p{color:var(--muted)}
a:not(.brand):not(.landing-card):not(.faq-option){text-decoration-color:color-mix(in srgb,var(--brand-bright) 50%,transparent)}
svg [fill="#496C5C"],svg [fill="#496c5c"],svg [fill="#355747"],svg [fill="#6F8F7B"],svg [fill="#7DA18B"],svg [fill="#7da18b"]{fill:var(--brand-bright)}
svg [stroke="#496C5C"],svg [stroke="#496c5c"],svg [stroke="#355747"],svg [stroke="#6F8F7B"],svg [stroke="#7DA18B"],svg [stroke="#7da18b"]{stroke:var(--brand-bright)}
svg [fill="#D8C79F"],svg [fill="#CDB77D"],svg [fill="#B89D62"]{fill:var(--brand-gold)}
svg [stroke="#D8C79F"],svg [stroke="#CDB77D"],svg [stroke="#B89D62"]{stroke:var(--brand-gold)}
svg [fill="#B98273"],svg [fill="#D98B80"]{fill:var(--brand-coral)}
svg [stroke="#B98273"],svg [stroke="#D98B80"]{stroke:var(--brand-coral)}
svg [fill="#7D7385"],svg [fill="#8B8296"]{fill:var(--brand-violet)}
svg [stroke="#7D7385"],svg [stroke="#8B8296"]{stroke:var(--brand-violet)}
svg [fill="#4F8FFF"],svg [fill="#45B8FF"]{fill:var(--brand-sky)}
svg [stroke="#4F8FFF"],svg [stroke="#45B8FF"]{stroke:var(--brand-sky)}
svg [fill="#EDF2ED"],svg [fill="#E2ECE5"]{fill:var(--brand-green-tint)}
svg [stroke="#EDF2ED"],svg [stroke="#E2ECE5"]{stroke:color-mix(in srgb,var(--brand-bright) 42%,var(--line))}
:root[data-theme="dark"]{
  --brand-green-tint:#183B28;
  --brand-sky-tint:#173546;
  --brand-gold-tint:#3D3215;
  --brand-coral-tint:#422326;
  --brand-violet-tint:#30254A;
}
:root[data-theme="dark"] .landing-process{background:var(--surface-subtle)}
:root[data-theme="dark"] .process-steps,:root[data-theme="dark"] .process-steps li+li{border-color:var(--line)}
:root[data-theme="dark"] .process-number{color:var(--brand-bright)}
:root[data-theme="dark"] .process-steps h3{color:var(--ink)}
:root[data-theme="dark"] .process-steps p{color:var(--muted)}
:root[data-theme="dark"] svg [fill="#EDF2ED"],:root[data-theme="dark"] svg [fill="#E2ECE5"]{fill:#234332}
/* Visible landing-page application of the bright identity. */
.landing-screen{--home-ink:#17241D;--home-muted:#607168;--home-line:#CFE4D7;--home-paper:#F7FFF9;--home-blue:#45B8FF;--home-green:#137A43;color:var(--home-ink);background:#FAFFFC}
.landing-eyebrow,.section-kicker{color:#137A43}
.landing-eyebrow:before{background:#39E17D;box-shadow:0 0 0 5px rgba(57,225,125,.16)}
.landing-hero h1 em{color:#16A85B}
.landing-hero-copy>p:not(.landing-hero-note),.landing-hero-note,.landing-scroll-cue,.proof-item,.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{color:var(--home-muted)}
.note-mark,.suite-label-dot{background:#39E17D;box-shadow:0 0 0 4px rgba(57,225,125,.16)}
.landing-text-link,.manifesto-link{color:#137A43}
.landing-text-link:hover,.manifesto-link:hover{color:#0B5E32}
.landing-primary:not(.landing-price-button),.landing-screen .large-button{color:#102419;background:#39E17D;box-shadow:0 10px 26px rgba(19,122,67,.2)}
.landing-primary:not(.landing-price-button):hover,.landing-screen .large-button:hover{color:#102419;background:#62F09A;box-shadow:0 14px 32px rgba(19,122,67,.28)}
.landing-value{background:#EDFFF4}
.value-simple{background:#DFFFF0;border-color:#B8F7D1}
.value-guided{background:#E5F6FF;border-color:#BDE8FF}
.value-reviewed{background:#F1EBFF;border-color:#DCCEFF}
.tile-number,.deliverable-card span,.story-card>div>span,.suite-list article>span,.suite-list article>b{color:#137A43}
.landing-stories{background:#F4EFFF}
.story-card{background:#fff;border-color:#DFD2FF}
.landing-manifesto{background:linear-gradient(135deg,#E5F6FF 0%,#E8FFF1 52%,#FFF6D8 100%)}
.manifesto-mark{color:rgba(57,225,125,.13)}
.landing-start{--landing-start-background:#F4FFF8;background:#F4FFF8}
.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:#F4FFF8}
.field-tags span{color:#0B5E32;background:#E8FFF1;border-color:#B8F7D1}
.profession-set figure:focus-visible{outline-color:#39E17D}
.profession-gallery-arrow{color:#137A43;background:rgba(232,255,241,.72);border-color:rgba(57,225,125,.28);box-shadow:0 10px 30px rgba(19,122,67,.12)}
.profession-gallery-shell .profession-gallery-arrow:hover,.profession-gallery-shell .profession-gallery-arrow:focus-visible{color:#0B5E32;background:#E8FFF1;box-shadow:0 14px 38px rgba(19,122,67,.22)}
.landing-faq-list summary{color:#17241D}
.landing-faq-list summary:after{color:#137A43;border-color:#9BEFBC;background-color:#E8FFF1}
.landing-footer{background:#102419}
.landing-footer>a:first-child span{color:#39E17D}
.landing-footer>a:nth-of-type(2):hover{color:#62F09A}
:root[data-theme="dark"] .landing-screen{--home-ink:#F0FFF6;--home-muted:#AEC4B7;--home-line:#304C3B;color:var(--home-ink);background:#0D1712}
:root[data-theme="dark"] .landing-hero h1 em{color:#62F09A}
:root[data-theme="dark"] .landing-value{background:#13251B}
:root[data-theme="dark"] .value-simple{background:#193426;border-color:#286344}
:root[data-theme="dark"] .value-guided{background:#172E3A;border-color:#24536A}
:root[data-theme="dark"] .value-reviewed{background:#29213C;border-color:#4A3B70}
:root[data-theme="dark"] .landing-stories{background:#211C30}
:root[data-theme="dark"] .story-card{background:#272137;border-color:#463A62}
:root[data-theme="dark"] .landing-manifesto{background:linear-gradient(135deg,#122D38 0%,#153123 52%,#352D16 100%)}
:root[data-theme="dark"] .landing-start{--landing-start-background:#101F17;background:#101F17}
:root[data-theme="dark"] .landing-setup-slot .profession-card,:root[data-theme="dark"] .landing-setup-slot .selected-profession-toggle,:root[data-theme="dark"] .landing-setup-slot .setup-form,:root[data-theme="dark"] .landing-setup-slot .field input,:root[data-theme="dark"] .landing-setup-slot .field textarea{background:#101F17}
:root[data-theme="dark"] .landing-faq-list summary{color:#F0FFF6}
:root[data-theme="dark"] .landing-faq-list summary:after{color:#62F09A;border-color:#286344;background-color:#193426}
:root[data-theme="dark"] .field-tags span{color:#BFFFD5;background:#193426;border-color:#286344}
/* Bright identity for the platform's inner screens. */
.home-menu-button,.primary-button,.large-button{color:#102419;background:#39E17D;border-color:#39E17D;box-shadow:0 8px 22px rgba(19,122,67,.2)}
.home-menu-button:hover,.primary-button:hover,.large-button:hover{color:#102419;background:#62F09A;border-color:#62F09A;box-shadow:0 11px 28px rgba(19,122,67,.28)}
.setup-screen,.builder-screen,.projects-screen,.account-screen,.profile-screen,.faq-screen{background:var(--surface-subtle)}
.card-surface,.form-section,.preview-panel,.project-card,.account-page-shell,.profile-card,.faq-list,.app-dialog{border-color:var(--line);box-shadow:0 12px 32px rgba(19,122,67,.08)}
.profession-card:hover,.mini-profession-card:hover,.choice-card:hover{border-color:color-mix(in srgb,var(--brand-bright) 60%,var(--line));background:color-mix(in srgb,var(--brand-bright) 6%,var(--surface))}
.profession-card.selected,.profession-card[aria-checked="true"],.mini-profession-card.selected,.choice-card.selected,.choice-card:has(input:checked){border-color:#39E17D;background:color-mix(in srgb,var(--brand-bright) 10%,var(--surface));box-shadow:0 0 0 2px color-mix(in srgb,var(--brand-bright) 20%,transparent)}
.selection-check,.completion-badge,.project-card-current{color:#102419;background:#39E17D}
.section-tab.active,.identity-subtab.active,.preview-tab.active,.account-tab.active{color:#0B5E32;background:#E8FFF1;border-color:#9BEFBC}
.section-tab.active .ui-icon,.identity-subtab.active .ui-icon,.preview-tab.active .ui-icon{color:#137A43}
.progress-track,.project-card-progress-track{background:color-mix(in srgb,var(--brand-bright) 11%,var(--surface))}
.progress-track>i,.project-card-progress-track>i,.overall-progress-bar>i{background:linear-gradient(90deg,#39E17D,#45B8FF)}
.upload-zone:hover,.upload-zone.dragging{border-color:#39E17D;background:#E8FFF1}
.account-page-visual{background:radial-gradient(circle at 18% 12%,rgba(255,200,87,.36),transparent 26%),linear-gradient(145deg,#E8FFF1,#EAF7FF 56%,#F3EEFF)}
.dialog-icon,.upload-icon,.choice-icon,.section-icon,.faq-category-icon{color:#137A43;background:#E8FFF1}
.payment-note{background:#FFF6D8;border-color:#FFE299}
.mobile-preview-toggle{color:#102419;background:linear-gradient(135deg,#39E17D,#45B8FF);border-color:rgba(255,255,255,.55);box-shadow:0 14px 35px rgba(19,122,67,.3)}
:root[data-theme="dark"] .card-surface,:root[data-theme="dark"] .form-section,:root[data-theme="dark"] .preview-panel,:root[data-theme="dark"] .project-card,:root[data-theme="dark"] .account-page-shell,:root[data-theme="dark"] .profile-card,:root[data-theme="dark"] .faq-list,:root[data-theme="dark"] .app-dialog{box-shadow:0 14px 34px rgba(0,0,0,.24)}
:root[data-theme="dark"] .section-tab.active,:root[data-theme="dark"] .identity-subtab.active,:root[data-theme="dark"] .preview-tab.active,:root[data-theme="dark"] .account-tab.active{color:#BFFFD5;background:#193426;border-color:#286344}
:root[data-theme="dark"] .profession-card.selected,:root[data-theme="dark"] .profession-card[aria-checked="true"],:root[data-theme="dark"] .mini-profession-card.selected,:root[data-theme="dark"] .choice-card.selected,:root[data-theme="dark"] .choice-card:has(input:checked){background:#193426;border-color:#39E17D}
:root[data-theme="dark"] .account-page-visual{background:radial-gradient(circle at 18% 12%,rgba(255,200,87,.16),transparent 26%),linear-gradient(145deg,#153123,#172E3A 56%,#29213C)}
:root[data-theme="dark"] .dialog-icon,:root[data-theme="dark"] .upload-icon,:root[data-theme="dark"] .choice-icon,:root[data-theme="dark"] .section-icon,:root[data-theme="dark"] .faq-category-icon{color:#62F09A;background:#193426}
:root[data-theme="dark"] .payment-note{background:#3D3215;border-color:#6D581B}
.account-project-option>.account-project-icon{width:31px;height:31px;flex:0 0 31px;display:grid;place-items:center;overflow:hidden;color:#102419;background:var(--project-icon-color,#39E17D);border-radius:9px;font-size:12px;font-weight:900;line-height:1}
.account-project-option>.account-project-icon.has-logo{padding:3px;background:#fff;border:1px solid var(--line)}
.account-project-icon img,.project-card-icon img{width:100%;height:100%;display:block;object-fit:contain}
.project-card-icon{width:92px;height:82px;display:grid;place-items:center;overflow:hidden;color:#102419;background:var(--project-icon-color,#39E17D);border-radius:24px;font-size:30px;font-weight:900;line-height:1;box-shadow:0 10px 24px color-mix(in srgb,var(--project-icon-color,#39E17D) 26%,transparent)}
.project-card-icon.has-logo{padding:10px;background:#fff;border:1px solid var(--line);box-shadow:0 10px 24px rgba(19,122,67,.1)}
:root[data-theme="dark"] .account-project-option>.account-project-icon.has-logo,:root[data-theme="dark"] .project-card-icon.has-logo{background:#F7FCF9}
.project-identity-editor{grid-template-columns:52px minmax(0,1.35fr) minmax(0,1fr) 135px}
.builder-project-number,.account-project-number,.project-card-number{display:grid;place-items:center;color:#102419;background:var(--project-icon-color,#39E17D);font-weight:900;line-height:1}
.builder-project-number{width:52px;height:74px;padding:8px 4px;align-content:center;gap:3px;border-radius:14px;box-shadow:0 8px 22px color-mix(in srgb,var(--project-icon-color,#39E17D) 24%,transparent)}
.builder-project-number small{font-size:7px;font-weight:800;line-height:1.2;text-align:center}.builder-project-number strong{font-size:22px;line-height:1}
.account-project-option>.account-project-number{width:29px;height:29px;flex:0 0 29px;background:var(--project-icon-color,#39E17D)!important;border-radius:9px;font-size:11px}
.account-project-logo{width:40px;height:40px;flex:0 0 40px;padding:0;display:grid;place-items:center;overflow:visible;background:transparent;border:0;border-radius:0}
.account-project-logo img,.project-card-logo img{width:100%;height:100%;display:block;object-fit:contain}
.account-project-option>span:nth-last-child(2){min-width:0;flex:1;display:flex;flex-direction:column}
.account-project-progress{width:55px;flex:0 0 55px;display:grid;gap:3px}
.account-project-progress>span{height:5px;overflow:hidden;display:block;background:color-mix(in srgb,var(--line) 76%,var(--surface));border-radius:999px}
.account-project-progress i{height:100%;display:block;background:linear-gradient(90deg,#39E17D,#45B8FF);border-radius:inherit}
.account-project-progress small{color:var(--muted);font-size:8px;text-align:center;line-height:1}
.project-card-identity{display:flex;align-items:center;gap:10px}
.project-card-number-group{display:flex;align-items:center;gap:8px}.project-last-opened{max-width:none;padding:4px 9px;color:var(--success);background:color-mix(in srgb,var(--success) 10%,var(--surface));border:1px solid color-mix(in srgb,var(--success) 18%,var(--line));border-radius:999px;font-size:8px;font-weight:800;line-height:1.35;white-space:nowrap}
.project-card-number{width:54px;height:54px;flex:0 0 54px;border-radius:17px;font-size:20px;box-shadow:0 9px 22px color-mix(in srgb,var(--project-icon-color,#39E17D) 24%,transparent)}
.project-card-logo{width:72px;height:54px;padding:0;display:grid;place-items:center;overflow:visible;background:transparent;border:0;border-radius:0}
:root[data-theme="dark"] .account-project-logo,:root[data-theme="dark"] .project-card-logo{background:transparent}
@media(max-width:980px){.project-identity-editor{grid-template-columns:46px minmax(0,1.35fr) minmax(0,1fr) 52px}.builder-project-number{width:46px}}
@media(max-width:560px){.project-identity-editor{grid-template-columns:48px minmax(0,1fr)}.builder-project-number{grid-column:1;width:48px}.builder-brand-field{grid-column:2!important}.profession-switcher,.project-identity-editor>.project-tools{grid-column:1/-1}.account-project-progress{width:46px;flex-basis:46px}.account-project-logo{width:34px;height:34px;flex-basis:34px}}
@media(max-width:560px){.topbar .platform-logo,:root[data-theme="dark"] .topbar .platform-logo{filter:hue-rotate(-62deg) saturate(1.35) brightness(1.08)}}
@media(max-width:560px){.payment-help-box{padding:16px;border-radius:18px}.payment-help-heading{align-items:flex-start}.payment-help-options{grid-template-columns:1fr}.payment-help-options .help-option{min-height:66px}}
@media(max-width:560px){.landing-hero-copy .landing-hero-visual{width:min(82vw,300px);margin-top:9px}.upload-usage-warning{align-items:flex-start;flex-direction:column}.upload-usage-warning button{width:100%;min-height:34px}}
.landing-screen .landing-hero .landing-eyebrow{font-size:11px}
@media(max-width:720px){.landing-screen .landing-hero .landing-eyebrow{font-size:10px}}
.project-identity-editor{grid-template-columns:52px minmax(0,1.35fr) minmax(0,1fr)}
.form-actions{align-items:stretch;flex-direction:column}.form-actions .action-group{width:100%;display:grid;grid-template-columns:minmax(190px,1fr) minmax(260px,1.45fr);gap:12px}.launch-button{min-height:56px;display:inline-flex;align-items:center;justify-content:center;gap:11px;font-size:15px;font-weight:900}.launch-action-icon{width:34px;height:34px;flex:0 0 34px;display:grid;place-items:center}.launch-action-icon .ui-icon{width:31px;height:31px}.editor-copy-button{width:100%;min-height:48px;padding:9px 16px;display:flex;align-items:center;justify-content:center;gap:9px;color:var(--meta-blue);background:color-mix(in srgb,var(--meta-blue) 6%,var(--surface));border:1px dashed color-mix(in srgb,var(--meta-blue) 38%,var(--line));border-radius:11px;font-size:12px;font-weight:800}.copy-action-icon{width:25px;height:25px;display:grid;place-items:center}.copy-action-icon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7}.editor-copy-button:disabled{color:var(--muted);background:var(--soft);border-color:var(--line);box-shadow:none;cursor:not-allowed;opacity:.52}.project-publish-button{min-height:52px;display:flex;align-items:center;justify-content:center;gap:9px;font-weight:900}.project-publish-button .launch-action-icon{width:78px;height:78px;flex-basis:78px;margin-block:-16px}.project-publish-button .launch-action-icon .ui-icon{width:76px;height:76px}
@media(max-width:980px){.project-identity-editor{grid-template-columns:46px minmax(0,1.35fr) minmax(0,1fr)}}
@media(max-width:700px){.form-actions .action-group{grid-template-columns:1fr}.launch-button{min-height:60px;font-size:16px;order:-1}.editor-copy-button{min-height:52px;line-height:1.45}.project-publish-button{min-height:56px}.project-card-actions{grid-template-columns:minmax(0,1fr) 44px 44px}}
@media(max-width:560px){.project-identity-editor{grid-template-columns:48px minmax(0,1fr)}.form-actions{padding:16px 12px;gap:11px}.form-actions .action-group{gap:9px}.launch-button,.quiet-button,.editor-copy-button{width:100%}}
.form-actions .editor-management-actions{grid-template-columns:repeat(3,minmax(0,1fr))}.editor-publish-button{width:100%;min-height:64px;font-size:17px}.editor-delete-button{width:100%;min-height:48px;padding:9px 14px;display:flex;align-items:center;justify-content:center;gap:8px;color:var(--danger);background:color-mix(in srgb,var(--danger) 6%,var(--surface));border:1px solid color-mix(in srgb,var(--danger) 28%,var(--line));border-radius:11px;font-size:12px;font-weight:800}.editor-delete-button .ui-icon{width:24px;height:24px}.editor-delete-button:hover{background:color-mix(in srgb,var(--danger) 12%,var(--surface))}
@media(max-width:700px){.form-actions .editor-management-actions{grid-template-columns:1fr}.form-actions .launch-button{order:initial}.editor-publish-button{min-height:64px}.project-manager-card .project-publish-button{position:relative;display:flex;width:100%;margin-top:13px;order:initial}.project-manager-card{display:block}}
@media(max-width:560px){.header-projects-menu-button{position:relative}.header-projects-menu-button>.header-project-count{position:absolute;z-index:2;top:-4px;inset-inline-end:-2px;min-width:17px;height:17px;box-shadow:0 0 0 2px var(--surface)}.editor-delete-button{min-height:52px}.editor-publish-button{min-height:66px;font-size:16px}}
/* Landing-page readability: preserve hero headlines while lifting supporting copy in both languages. */
.landing-screen{font-size:18px}.landing-screen .landing-eyebrow,.landing-screen .section-kicker{font-size:12px}.landing-hero-copy>p:not(.landing-hero-note){font-size:17px}.landing-hero-note,.landing-hero-visual figcaption{font-size:12px}.landing-scroll-cue{font-size:11px}.proof-item{font-size:13px}.proof-item b{font-size:12px}.suite-heading h2,.fields-heading h2,.suite-copy h2,.fields-copy h2,.human-copy h2{font-size:clamp(38px,4.7vw,60px)}.suite-heading p,.fields-heading p,.suite-copy p,.fields-copy p,.human-copy p{font-size:15px}.deliverable-card span,.suite-label b{font-size:11px}.suite-label small,.suite-index,.suite-list article>span{font-size:10px}.deliverable-card h3{font-size:19px}.deliverable-card p,.suite-list article p{font-size:12px}.suite-list article h3{font-size:15px}.section-heading-center h2,.start-heading h2{font-size:clamp(34px,4.2vw,51px)}.section-heading-center p,.start-heading p{font-size:14px}.tile-number,.landing-footnote,.gallery-note,.story-card>div>span,.story-disclaimer,.human-photo span{font-size:11px}.value-tile h3{font-size:18px}.value-tile p,.story-card p{font-size:12px}.field-tags span,.field-photo figcaption{font-size:11px}.story-card h3{font-size:16px}.landing-manifesto h2{font-size:clamp(37px,5.7vw,67px)}.landing-manifesto>p{font-size:14px}.manifesto-link{font-size:12px}.landing-faq-list summary{font-size:14px}.landing-faq-list details p{font-size:12px}.profession-set figcaption{font-size:13px}.landing-button-copy strong{font-size:14px}.landing-button-copy small{font-size:10px}.landing-setup-slot .setup-projects-button{font-size:12px}.landing-setup-slot .setup-intro h1{font-size:28px}.landing-setup-slot .setup-intro p{font-size:14px}.landing-setup-slot .profession-card small{font-size:12px}.landing-setup-slot label,.landing-setup-slot input,.landing-setup-slot button{font-size:14px}.landing-footer p{font-size:11px}.landing-footer>a:nth-of-type(2){font-size:12px}.landing-footer>small{font-size:10px}
@media(max-width:720px){.landing-hero-copy>p:not(.landing-hero-note){font-size:15px}.proof-item{font-size:12px}.suite-copy p,.fields-copy p,.human-copy p,.suite-heading p,.fields-heading p{font-size:14px}.section-heading-center p{font-size:12px}.value-tile p,.story-card p{font-size:11px}.landing-manifesto>p{font-size:12px}.landing-faq-list summary{font-size:13px}.landing-faq-list details p{font-size:12px}}
.header-project-count-mobile{display:none}.header-projects-label .header-project-count-desktop{margin-inline-end:2px}
/* Larger, high-legibility landing type for older readers. */
.landing-screen .landing-eyebrow,.landing-screen .section-kicker{font-size:14px}.landing-hero-copy>p:not(.landing-hero-note){font-size:19px}.landing-hero-note,.landing-hero-visual figcaption,.landing-scroll-cue{font-size:14px}.proof-item{font-size:15px}.proof-item b{font-size:14px}.suite-heading p,.fields-heading p,.suite-copy p,.fields-copy p,.human-copy p{font-size:17px;line-height:1.9}.deliverable-card span,.suite-label b,.suite-label small,.suite-index,.suite-list article>span{font-size:13px}.deliverable-card h3{font-size:21px}.deliverable-card p,.suite-list article p{font-size:15px;line-height:1.8}.suite-list article h3{font-size:17px}.section-heading-center p,.start-heading p{font-size:16px;line-height:1.8}.tile-number,.landing-footnote,.gallery-note,.story-card>div>span,.story-disclaimer,.human-photo span{font-size:13px}.value-tile h3{font-size:20px}.value-tile p,.story-card p{font-size:15px}.field-tags span,.field-photo figcaption{font-size:13px}.story-card h3{font-size:18px}.landing-manifesto>p{font-size:16px}.manifesto-link{font-size:14px}.landing-faq-list summary{font-size:17px}.landing-faq-list details p{font-size:15px}.profession-set figcaption{font-size:15px}.landing-button-copy strong{font-size:16px}.landing-button-copy small{font-size:13px}.landing-setup-slot .setup-projects-button{font-size:14px}.landing-setup-slot .setup-intro p{font-size:16px}.landing-setup-slot .profession-card strong{font-size:19px}.landing-setup-slot .profession-card small{font-size:14px}.landing-setup-slot label,.landing-setup-slot input,.landing-setup-slot button{font-size:16px}.landing-footer p,.landing-footer>a:nth-of-type(2),.landing-footer>small{font-size:13px}
@media(max-width:720px){.landing-screen .landing-eyebrow,.landing-screen .section-kicker{font-size:13px}.landing-hero-copy>p:not(.landing-hero-note){font-size:17px}.landing-hero-note,.landing-hero-visual figcaption,.landing-scroll-cue{font-size:13px}.proof-item,.proof-item b{font-size:13px}.suite-heading p,.fields-heading p,.suite-copy p,.fields-copy p,.human-copy p{font-size:16px}.deliverable-card p,.suite-list article p,.section-heading-center p,.start-heading p,.value-tile p,.story-card p,.landing-manifesto>p,.landing-faq-list details p{font-size:14px}.landing-faq-list summary{font-size:16px}.profession-set figcaption{font-size:14px}.landing-setup-slot label,.landing-setup-slot input,.landing-setup-slot button{font-size:15px}}
@media(max-width:820px){.header-projects-menu-button{position:relative}.header-project-count-desktop{display:none!important}.header-project-count-mobile:not([hidden]){position:absolute;z-index:2;top:-4px;inset-inline-end:-2px;min-width:17px;height:17px;display:inline-flex;box-shadow:0 0 0 2px var(--surface)}}
#contentFontMega{overflow:hidden;border-width:2px;border-color:color-mix(in srgb,var(--meta-blue) 28%,var(--line));box-shadow:0 8px 24px color-mix(in srgb,var(--meta-blue) 8%,transparent)}#contentFontMega>.mega-panel{position:relative;max-height:218px;padding:14px 10px 30px;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scrollbar-color:color-mix(in srgb,var(--meta-blue) 45%,var(--line)) transparent;scrollbar-width:thin;background:linear-gradient(var(--surface) 0 88%,color-mix(in srgb,var(--meta-blue) 7%,var(--surface)))}#contentFontMega>.mega-panel:after{content:'';position:sticky;bottom:-30px;display:block;height:24px;margin:0 -10px -30px;pointer-events:none;background:linear-gradient(transparent,color-mix(in srgb,var(--meta-blue) 10%,var(--surface)))}#contentFontMega .content-font-options{align-items:stretch}#contentFontMega .content-font{min-height:122px}.identity-subpanel[data-identity-panel="fonts"]>#contentFontMega+.font-upload-zone{position:relative;margin-top:52px;min-height:124px;background:color-mix(in srgb,var(--meta-blue) 4%,var(--surface));border-color:color-mix(in srgb,var(--meta-blue) 40%,var(--line))}.identity-subpanel[data-identity-panel="fonts"]>#contentFontMega+.font-upload-zone:before{content:'أو';position:absolute;top:-39px;left:50%;width:36px;height:25px;display:grid;place-items:center;color:var(--muted);background:var(--surface);border:1px solid var(--line);border-radius:999px;font-size:11px;font-weight:800;transform:translateX(-50%)}[lang="en"] .identity-subpanel[data-identity-panel="fonts"]>#contentFontMega+.font-upload-zone:before{content:'OR'}
@media(max-width:560px){#contentFontMega>.mega-panel{max-height:272px}#contentFontMega .content-font{min-height:126px}.identity-subpanel[data-identity-panel="fonts"]>#contentFontMega+.font-upload-zone{margin-top:50px}}
.font-script-heading{grid-column:1/-1;padding:5px 2px 2px;color:var(--ink);font-size:12px;font-weight:800}.font-script-heading[hidden],#logoFontOptions .font-card[hidden]{display:none!important}.font-script-heading[data-script-group="en"]{margin-top:8px;padding-top:14px;border-top:1px solid var(--line);direction:ltr;text-align:left}#logoFontMega{overflow:hidden;border-width:2px;border-color:color-mix(in srgb,var(--meta-blue) 28%,var(--line));box-shadow:0 8px 24px color-mix(in srgb,var(--meta-blue) 8%,transparent)}#logoFontMega>.mega-panel{position:relative;max-height:218px;padding:14px 10px 30px;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scrollbar-color:color-mix(in srgb,var(--meta-blue) 45%,var(--line)) transparent;scrollbar-width:thin;background:linear-gradient(var(--surface) 0 88%,color-mix(in srgb,var(--meta-blue) 7%,var(--surface)))}#logoFontMega>.mega-panel:after{content:'';position:sticky;bottom:-30px;display:block;height:24px;margin:0 -10px -30px;pointer-events:none;background:linear-gradient(transparent,color-mix(in srgb,var(--meta-blue) 10%,var(--surface)))}#logoFontMega .font-card{min-height:122px}.logo-name-font-block>#logoFontMega+.font-upload-zone{position:relative;margin-top:52px;min-height:124px;background:color-mix(in srgb,var(--meta-blue) 4%,var(--surface));border-color:color-mix(in srgb,var(--meta-blue) 40%,var(--line))}.logo-name-font-block>#logoFontMega+.font-upload-zone:before{content:'أو';position:absolute;top:-39px;left:50%;width:36px;height:25px;display:grid;place-items:center;color:var(--muted);background:var(--surface);border:1px solid var(--line);border-radius:999px;font-size:11px;font-weight:800;transform:translateX(-50%)}[lang="en"] .logo-name-font-block>#logoFontMega+.font-upload-zone:before{content:'OR'}
@media(max-width:560px){#logoFontMega>.mega-panel{max-height:272px}#logoFontMega .logo-fonts{grid-template-columns:repeat(2,minmax(0,1fr))}#logoFontMega .font-card{min-height:126px}.logo-name-font-block>#logoFontMega+.font-upload-zone{margin-top:50px}}

/* Keep the selected body font consistent across every preview text element.
   Only brand names and the dedicated logo mark use the selected logo font. */
#previewViewport :is(.website-preview,.slides-preview,.business-card-preview,.social-posts-preview,.print-designs-preview){font-family:var(--preview-font)}
#previewViewport :is(.website-preview,.slides-preview,.business-card-preview,.social-posts-preview,.print-designs-preview) *{font-family:inherit}
#previewViewport .preview-brand-name,#previewViewport .business-card-logo{font-family:var(--logo-font)}
#previewViewport .logo-script-ar,#selectedLogoFontSample .logo-script-ar{font-family:var(--logo-font-ar)}
#previewViewport .logo-script-en,#selectedLogoFontSample .logo-script-en{font-family:var(--logo-font-en)}
@media(min-width:561px){[lang="en"] .platform-logo{content:url('assets/startkit-logo.webp')}:root[data-theme="dark"][lang="en"] .platform-logo{content:url('assets/startkit-logo-dark.webp')}}
.project-card-number{width:62px;height:62px;flex-basis:62px;align-content:center;gap:3px;padding:6px 4px}.project-card-number small{font-size:7px;font-weight:800;line-height:1.15;text-align:center}.project-card-number strong{font-size:20px;line-height:1}

/* Reveal upload usage only when it becomes relevant. */
.builder-progress-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"completion"}
.builder-progress-grid.show-upload-usage{grid-template-columns:var(--preview-column-width) minmax(0,1fr);grid-template-areas:"usage completion"}
[dir="ltr"] .builder-progress-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"completion"}
[dir="ltr"] .builder-progress-grid.show-upload-usage{grid-template-columns:minmax(0,1fr) var(--preview-column-width);grid-template-areas:"completion usage"}
.upload-usage-meta button{color:var(--danger)}
#transferHelpDialog .dialog-icon,#moreFilesHelpDialog .dialog-icon{position:absolute;top:15px;right:15px;margin:0}
#transferHelpDialog form,#moreFilesHelpDialog form{padding-top:84px}
#transferHelpDialog h2,#moreFilesHelpDialog h2{margin-top:0}
#transferHelpDialog a,#moreFilesHelpDialog a{color:var(--meta-blue);font-weight:800;text-underline-offset:3px}
@media(max-width:820px){.builder-progress-grid.show-upload-usage,[dir="ltr"] .builder-progress-grid.show-upload-usage{grid-template-columns:1fr;grid-template-areas:"completion" "usage"}}

/* Identity navigation and always-open, language-tabbed font selectors. */
.identity-subtabs{grid-template-columns:repeat(3,1fr)}
.font-mega-selector>summary{cursor:default}
.font-mega-selector>summary::-webkit-details-marker{display:none}
.font-language-tabs{margin:0 14px;padding:4px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;background:var(--soft);border:1px solid var(--line);border-radius:10px}
.font-language-tabs button{min-height:36px;padding:7px 10px;color:var(--muted);background:transparent;border:0;border-radius:7px;font-size:11px;font-weight:800}
.font-language-tabs button.active{color:var(--meta-blue);background:var(--surface);box-shadow:0 2px 8px rgba(23,50,77,.1)}
.font-language-tabs button[hidden],.font-script-heading{display:none!important}
#logoFontOptions[data-active-script="ar"] .font-card[data-script="en"],#logoFontOptions[data-active-script="en"] .font-card[data-script="ar"],#contentFontOptions[data-active-script="ar"] .content-font[data-script="en"],#contentFontOptions[data-active-script="en"] .content-font[data-script="ar"]{display:none!important}
.identity-subpanel[data-identity-panel="logo"]>.field{margin-top:28px;padding-top:24px;border-top:1px solid var(--line)}
@media(max-width:720px){.identity-subtabs{grid-template-columns:repeat(3,minmax(62px,1fr))}}
.font-language-tabs{margin-top:2px}
#contentFontOptions[data-active-script="ar"] .content-font[data-script="ar"],#contentFontOptions[data-active-script="en"] .content-font[data-script="en"]{display:flex!important}

/* Refined font tabs and stronger primary navigation states. */
.font-mega-selector[open]>summary{border-bottom:0}
.font-language-tabs{margin-top:0}
[lang="en"] .font-language-tabs [data-font-script="en"]{order:-1}
.field-label-with-help{margin-bottom:6px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.field-label-with-help label{margin-bottom:0}
.section-tabs-wrap{overflow:visible;padding-top:10px;padding-bottom:12px}
.section-tabs{min-height:88px;align-items:flex-start;overflow-y:visible}
.section-tab{min-width:118px;min-height:74px;padding:10px 13px;gap:4px;border:2px solid transparent;border-radius:12px;transition:color .15s ease,background-color .15s ease,border-color .15s ease,box-shadow .2s ease,transform .2s ease}
.section-tab>span{width:32px;height:32px;font-size:29px}
.section-tab>span .ui-icon{width:30px;height:30px}
.section-tab em{font-size:14px;font-weight:850;line-height:1.2}
.section-tab.active{z-index:2;color:var(--meta-blue);background:var(--surface);border-color:color-mix(in srgb,var(--meta-blue) 48%,var(--line));border-bottom-color:var(--surface);border-radius:12px 12px 0 0;box-shadow:0 -4px 14px color-mix(in srgb,var(--meta-blue) 12%,transparent);transform:translateY(12px)}
.section-tab:focus-visible{outline:2px solid color-mix(in srgb,var(--meta-blue) 62%,transparent);outline-offset:2px}
.tab-status{top:-7px;left:-5px;width:25px;height:25px;border-width:3px;font-size:15px;box-shadow:0 3px 9px color-mix(in srgb,var(--ink) 22%,transparent)}
.section-tab.incomplete .tab-status{color:var(--surface);background:var(--danger)}
.section-tab.done .tab-status{color:var(--surface);background:var(--success)}

/* Flat segmented tabs based on the supplied navigation reference. */
.section-tabs-wrap{position:sticky;z-index:24;top:72px;padding:0;overflow:hidden;background:var(--soft);border-radius:calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;border-bottom:1px solid var(--line);box-shadow:0 7px 15px color-mix(in srgb,var(--ink) 8%,transparent)}
.section-tabs{min-height:104px;gap:0;align-items:stretch;overflow-x:auto;overflow-y:hidden}
.section-tab,.section-tab.add-tab{min-width:132px;min-height:104px;padding:15px 14px 12px;gap:5px;color:var(--muted);background:transparent;border:0;border-inline-end:1px solid var(--line);border-radius:0;box-shadow:none;transform:none}
.section-tab:first-child{border-inline-start:1px solid var(--line)}
.section-tab:hover,.section-tab.add-tab:hover{color:var(--muted);background:color-mix(in srgb,var(--muted) 5%,var(--surface))}
.section-tab>span{width:34px;height:34px;color:inherit;font-size:30px}
.section-tab>span .ui-icon{width:32px;height:32px;color:inherit}
.section-tab em{color:inherit;font-size:14px;font-weight:850;letter-spacing:.02em}
.section-tab.tab-title-long em{font-size:11px;letter-spacing:0}
.section-tab.tab-title-very-long em{font-size:9.5px}
.section-tab.active{z-index:1;color:var(--meta-blue);background:var(--surface);border:0;border-inline-end:1px solid var(--line);border-radius:0;box-shadow:none;transform:none}
.section-tab.active::before{content:'';position:absolute;top:0;left:0;right:0;height:5px;background:var(--meta-blue)}
.section-tab.active .ui-icon{color:var(--meta-blue)}
.tab-status,.section-tab.done .tab-status,.section-tab.incomplete .tab-status{--section-progress:0%;position:relative;top:auto;left:auto;width:calc(100% - 14px);height:6px;margin-top:4px;display:block;overflow:hidden;color:transparent;background:color-mix(in srgb,var(--muted) 18%,var(--surface));border:0;border-radius:999px;box-shadow:none;font-size:0}
.tab-status::after{content:'';position:absolute;inset:0 auto 0 0;width:var(--section-progress);background:var(--success);border-radius:inherit;transition:width .25s ease}
[dir="rtl"] .tab-status::after{inset:0 0 0 auto}
.section-tab.active .tab-status{background:color-mix(in srgb,var(--meta-blue) 16%,var(--surface))}
:is(.tabs-scroll,.gallery-layout-arrow){align-self:center}
.section-tabs,.section-tab,.section-tab>span,.section-tab em,.tab-status,:is(.tabs-scroll,.gallery-layout-arrow){transition:min-height .22s ease,height .22s ease,width .22s ease,padding .22s ease,font-size .22s ease,gap .22s ease}
.section-tabs-wrap.is-compact .section-tabs{min-height:64px}
.section-tabs-wrap.is-compact .section-tab,.section-tabs-wrap.is-compact .section-tab.add-tab{min-height:64px;padding:6px 10px 5px;gap:1px}
.section-tabs-wrap.is-compact .section-tab>span{width:23px;height:23px;font-size:21px}
.section-tabs-wrap.is-compact .section-tab>span .ui-icon{width:22px;height:22px}
.section-tabs-wrap.is-compact .section-tab em{font-size:10px}
.section-tabs-wrap.is-compact .tab-status{height:4px;margin-top:2px}
.section-tabs-wrap.is-compact :is(.tabs-scroll,.gallery-layout-arrow){height:36px}
.identity-subtabs{position:sticky;z-index:23;top:136px;background:var(--soft);box-shadow:0 7px 15px color-mix(in srgb,var(--ink) 7%,transparent);transition:padding .22s ease,gap .22s ease,border-radius .22s ease}
.identity-subtab,.identity-subtab span,.identity-subtab em{transition:min-height .22s ease,width .22s ease,height .22s ease,padding .22s ease,font-size .22s ease,gap .22s ease}
.identity-subtabs.is-compact{padding:4px;gap:4px;border-radius:0 0 10px 10px}
.identity-subtabs.is-compact .identity-subtab{min-height:42px;padding:4px;display:flex;align-items:center;justify-content:center;gap:5px}
.identity-subtabs.is-compact .identity-subtab span{width:18px;height:18px;font-size:17px}
.identity-subtabs.is-compact .identity-subtab span .ui-icon{width:18px;height:18px}
.identity-subtabs.is-compact .identity-subtab em{font-size:9px}
.social-fields{width:100%;display:grid;grid-template-columns:minmax(0,1fr);gap:18px}
.social-fields .field,.social-fields input{width:100%;min-width:0}
.field-meta-count-only{justify-content:flex-end}
.additional-files-intro{margin:26px 0 -6px;padding:12px 14px;color:var(--muted);background:var(--surface-subtle);border-inline-start:4px solid var(--meta-blue);border-radius:8px;font-size:13px;font-weight:650}
.supplementary-data-section{margin-top:28px;padding-top:2px;border-top:1px solid var(--line)}
.supplementary-data-section .additional-files-intro{margin-top:18px}
.supplementary-links-field{margin-top:18px;padding:18px;background:var(--surface-subtle);border:1px solid var(--line);border-radius:12px}
.supplementary-links-field>label{display:block;margin-bottom:10px;font-size:13px;font-weight:800}
.supplementary-links{display:grid;gap:10px}
.supplementary-link-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center}
.supplementary-link-row:only-child{grid-template-columns:minmax(0,1fr)}
.supplementary-link-row input{width:100%;direction:ltr;text-align:left}
.remove-supplementary-link{width:42px;height:42px;padding:0;color:var(--danger);background:color-mix(in srgb,var(--danger) 8%,var(--surface));border:1px solid color-mix(in srgb,var(--danger) 24%,var(--line));border-radius:9px;font-size:20px;font-weight:800}
.add-link-button{min-height:42px;margin-top:10px;padding:9px 14px;color:var(--meta-blue);background:color-mix(in srgb,var(--meta-blue) 8%,var(--surface));border:1px dashed color-mix(in srgb,var(--meta-blue) 38%,var(--line));border-radius:9px;font-weight:800}
.editor-publish-button{padding:11px 18px 13px;flex-direction:column;gap:8px}
.editor-publish-button .launch-action-icon{width:78px;height:78px;flex-basis:78px;margin-block:-16px}

/* Admin workspace: the frontend structure is retained, with a warmer operational palette. */
:root.admin-mode{
  --meta-blue:#e23b21;
  --meta-blue-dark:#a91f12;
  --header-green:#ff5a2f;
  --header-green-ink:#7b1a0c;
  --soft:#fff3df;
  --line:#f0c39b;
  --field-border:#e9b17f;
}
.admin-mode body{background:linear-gradient(145deg,#fffaf2 0%,#fff2dd 48%,#fff8ec 100%)}
.admin-mode .topbar{border-bottom-color:#f1aa6f;box-shadow:0 8px 26px rgba(171,54,20,.11)}
.admin-mode .header-projects-menu-wrap,.admin-mode .help-menu-wrap,.admin-mode .user-menu-wrap{display:none!important}
.admin-mode .preference-controls>.preference-menu-wrap:not(:first-child){display:none!important}
.admin-mode .home-menu-button{color:#8d210e;background:#fff0d2}
.admin-mode .primary-button,.admin-mode .launch-button{background:linear-gradient(135deg,#ed2f1c,#ff7a1a);box-shadow:0 10px 24px rgba(216,53,19,.22)}
.admin-mode .primary-button:hover,.admin-mode .launch-button:hover{background:linear-gradient(135deg,#c92113,#f05d0e)}
.admin-screen{min-height:calc(100vh - 80px);padding:44px 22px 80px;color:#39160e}
.admin-shell{width:min(1160px,100%);margin:0 auto}
.admin-page-heading{margin-bottom:24px;display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.admin-page-heading h1{margin:4px 0 7px;font-size:clamp(30px,4vw,48px);letter-spacing:-.045em}
.admin-page-heading p{margin:0;color:#85584b;font-size:14px}
.admin-kicker{color:#dd351c;font-size:11px;font-weight:900;letter-spacing:.14em;text-transform:uppercase}
.admin-signout-button,.admin-back-button{min-height:42px;padding:9px 14px;display:inline-flex;align-items:center;gap:8px;color:#a22a18;background:#fff8ee;border:1px solid #efb583;border-radius:11px;font-size:12px;font-weight:850}
.admin-signout-button:hover,.admin-back-button:hover{background:#ffe6ca;border-color:#ea7740}
.admin-back-button{margin-bottom:18px}
.admin-project-back{position:relative;z-index:5;margin:18px 22px 0}
.admin-metrics{margin-bottom:24px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.admin-metrics article{min-height:126px;padding:22px;display:flex;align-items:center;gap:18px;background:linear-gradient(135deg,#fff 0%,#fff0d9 100%);border:1px solid #f1bd8b;border-radius:22px;box-shadow:0 14px 35px rgba(154,48,17,.08)}
.admin-metric-icon{width:58px;height:58px;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,#f23a20,#ff9817);border-radius:17px;font-size:25px;box-shadow:0 9px 18px rgba(222,57,21,.2)}
.admin-metrics small{display:block;color:#8c5b4c;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.07em}
.admin-metrics strong{display:block;margin-top:3px;color:#56190e;font-size:36px;line-height:1}
.admin-panel{margin-top:18px;padding:20px;background:rgba(255,255,255,.88);border:1px solid #efbb8a;border-radius:22px;box-shadow:0 18px 44px rgba(144,43,15,.08)}
.admin-panel-heading{margin-bottom:14px;padding:0 4px 13px;display:flex;align-items:end;justify-content:space-between;gap:12px;border-bottom:1px solid #f4d3b7}
.admin-panel-heading span,.admin-details summary small{display:block;color:#e34122;font-size:10px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}
.admin-panel-heading h2{margin:3px 0 0;font-size:22px}
.admin-panel-heading>small{color:#96675a;font-weight:750}
.admin-list{display:grid;gap:10px}
.admin-user-row,.admin-project-row{padding:12px;display:grid;grid-template-columns:auto minmax(150px,1fr) auto;align-items:center;gap:13px;background:#fffaf4;border:1px solid #f3d0af;border-radius:15px;transition:.18s ease}
.admin-project-row{grid-template-columns:auto 48px minmax(130px,1fr) 125px auto}
.admin-user-row:hover,.admin-project-row:hover{border-color:#ed8b55;transform:translateY(-1px);box-shadow:0 8px 20px rgba(177,54,20,.08)}
.admin-user-row.is-suspended,.admin-project-row.is-suspended{opacity:.63;background:#f7eee9}
.admin-avatar{width:44px;height:44px;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,#ee321c,#ff9a19);border-radius:13px;font-size:18px;font-weight:900}
.admin-row-copy{min-width:0;display:flex;flex-direction:column;gap:3px}
.admin-row-copy strong{overflow:hidden;font-size:14px;text-overflow:ellipsis;white-space:nowrap}
.admin-row-copy small{color:#896157;font-size:11px}
.admin-row-copy em{width:max-content;padding:2px 6px;color:#a72515;background:#ffe0d6;border-radius:999px;font-size:9px;font-style:normal;font-weight:900;text-transform:uppercase}
.admin-row-actions{display:flex;align-items:center;justify-content:flex-end;gap:6px;flex-wrap:wrap}
.admin-row-action{min-width:58px;height:42px;padding:4px 8px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;color:#8d2b1b;background:#fff0dc;border:1px solid #efbd8e;border-radius:10px}
.admin-row-action span{font-size:16px;line-height:1}.admin-row-action small{font-size:8px;font-weight:900}.admin-row-action:hover{color:#fff;background:#e84725;border-color:#e84725}.admin-row-action.danger{color:#be231b;background:#fff0ed;border-color:#f1b8ae}.admin-row-action.danger:hover{color:#fff;background:#c9241b}
.admin-project-logo{width:46px;height:46px;display:grid;place-items:center}.admin-project-logo img{width:100%;height:100%;object-fit:contain}.admin-project-logo-empty{color:#e36e2b;background:#ffe6c6;border-radius:12px}
.admin-project-progress{display:grid;gap:4px}.admin-project-progress>span{height:7px;overflow:hidden;background:#f6dfcb;border-radius:999px}.admin-project-progress i{height:100%;display:block;background:linear-gradient(90deg,#ef301d,#ffb416);border-radius:inherit}.admin-project-progress small{color:#82584d;font-size:9px;text-align:center}
.admin-details{padding:0;overflow:hidden}.admin-details summary{padding:18px 20px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;list-style:none}.admin-details summary::-webkit-details-marker{display:none}.admin-details summary strong{display:block;margin-top:3px;font-size:18px}.admin-details summary i{font-style:normal;transition:transform .18s}.admin-details[open] summary i{transform:rotate(180deg)}
.admin-user-form{padding:18px 20px 22px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;border-top:1px solid #f3d0af}.admin-user-form label{display:grid;gap:7px;color:#743a2b;font-size:11px;font-weight:850}.admin-user-form input{height:48px;padding:0 12px;color:#3c160e;background:#fffaf4;border:1px solid #eeb987;border-radius:10px;outline:0}.admin-user-form input:focus{border-color:#eb4b28;box-shadow:0 0 0 3px rgba(235,75,40,.13)}
.admin-primary-button{grid-column:1/-1;min-height:48px;color:#fff;background:linear-gradient(135deg,#e72e1b,#ff8318);border:0;border-radius:11px;font-weight:900}
.admin-empty-state{padding:34px;color:#926659;background:#fff9f1;border:1px dashed #eebb8d;border-radius:14px;text-align:center}
.admin-export-button{background:linear-gradient(135deg,#e92e1c,#ff8f18)!important}.admin-export-icon{color:#fff;font-size:50px;font-weight:300;line-height:1}.admin-export-note{font-size:10px;opacity:.86}
.admin-mode .site-footer{border-top-color:#efaa70;background:#fff2df}
@media(max-width:850px){.admin-project-row{grid-template-columns:auto 42px minmax(120px,1fr)}.admin-project-progress,.admin-project-row .admin-row-actions{grid-column:2/-1}.admin-project-row .admin-row-actions{justify-content:flex-start}.admin-user-form{grid-template-columns:1fr}}
@media(max-width:620px){.admin-screen{padding:28px 12px 60px}.admin-page-heading{align-items:flex-start;flex-direction:column}.admin-metrics{grid-template-columns:1fr}.admin-user-row{grid-template-columns:auto 1fr}.admin-user-row .admin-row-actions{grid-column:1/-1;justify-content:flex-start}.admin-panel{padding:12px}.admin-row-action{min-width:64px}.admin-project-back{margin-inline:12px}}
.publish-action-title{display:flex;align-items:center;justify-content:center;gap:10px}
.publish-hover-progress{position:relative;width:100%;height:22px;display:block;overflow:hidden;opacity:1}
.publish-progress-track{position:relative;height:22px;display:block;overflow:hidden;background:rgba(255,255,255,.28);border:2px solid rgba(255,255,255,.48);border-radius:999px;box-shadow:inset 0 2px 5px rgba(0,0,0,.16),0 3px 9px rgba(0,0,0,.12)}
.publish-progress-track i{--publish-progress:0%;position:absolute;z-index:1;inset:0;width:100%;display:block;background:linear-gradient(90deg,#365F4C 0%,#B9F6CF 50%,#E9F7B9 78%,#FFF2A6 100%);border-radius:inherit;clip-path:inset(0 calc(100% - var(--publish-progress)) 0 0 round 999px);transition:clip-path .25s ease}
.publish-hover-progress strong{position:absolute;z-index:2;inset:50% auto auto 50%;min-width:44px;color:#173322;font-size:12px;font-weight:950;font-variant-numeric:tabular-nums;line-height:1;direction:ltr;text-align:center;text-shadow:0 1px rgba(255,255,255,.65);transform:translate(-50%,-50%)}
@keyframes tabIconWarning{0%,100%{color:var(--muted);filter:none;transform:scale(1)}50%{color:var(--danger);filter:drop-shadow(0 0 9px color-mix(in srgb,var(--danger) 80%,transparent));transform:scale(1.14)}}
.section-tab.tab-needs-attention>span{animation:tabIconWarning .55s ease-in-out 3}
.toast.toast-bottom{top:auto;bottom:max(20px,env(safe-area-inset-bottom));transform:translateY(18px)}
.toast.toast-bottom.show{transform:translateY(0)}
@media(max-width:560px){.section-tabs-wrap{top:62px}.section-tabs-wrap.is-compact .section-tabs,.section-tabs-wrap.is-compact .section-tab,.section-tabs-wrap.is-compact .section-tab.add-tab{min-height:56px}.section-tabs-wrap.is-compact .section-tab{min-width:92px;padding-inline:6px}.section-tab.tab-title-long em{font-size:9px}.section-tab.tab-title-very-long em{font-size:8px}.testimonial-entry-grid{grid-template-columns:1fr}.testimonial-photo-upload{width:100%}.contact-form-field{grid-template-columns:32px minmax(0,1fr) 36px 36px}.contact-field-sort{grid-column:1;grid-row:1/4}.contact-field-main{grid-column:2/-1;grid-row:1}.contact-field-required{grid-column:2/-1;grid-row:2;justify-self:start}.contact-field-add{grid-column:3;grid-row:3}.contact-field-delete{grid-column:4;grid-row:3}.form-submission-email{grid-template-columns:1fr}.identity-subtabs{top:118px}.identity-subtabs.is-compact .identity-subtab{min-height:38px}.publish-hover-progress{height:22px}}

/* Project design style selector. Each option visually demonstrates its own design language. */
.design-style-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.design-style-card{position:relative;min-height:154px;padding:18px;display:grid;grid-template-columns:84px minmax(0,1fr) 24px;align-items:center;gap:14px;cursor:pointer}
.design-style-card>label{display:contents;cursor:pointer}
.design-style-card input{position:absolute;opacity:0;pointer-events:none}
.design-style-copy{display:grid;gap:5px}.design-style-copy strong{font-size:15px}.design-style-copy small{color:var(--muted);font-size:11px;line-height:1.6}
.design-style-check{width:23px;height:23px;display:grid;place-items:center;opacity:1;color:#fff;background:var(--meta-blue);border:2px solid transparent;border-radius:50%;font-size:13px;font-weight:900}
.design-style-card.selected .design-style-check{opacity:1}
.style-tone-switch{position:absolute;z-index:4;inset-inline-end:14px;bottom:10px;min-width:98px;height:31px;padding:3px 7px;display:flex;align-items:center;justify-content:space-between;gap:7px;color:#aeb3bf;background:transparent;border:0;border-radius:999px;font-size:8px;font-weight:900;letter-spacing:.08em;direction:ltr;cursor:pointer}.style-tone-switch i{position:relative;width:43px;height:24px;display:block;background:#c4cad4;border:2px solid #dce7f3;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.04)}.style-tone-switch i::after{content:'';position:absolute;top:2px;left:2px;width:16px;height:16px;background:#fff;border-radius:50%;box-shadow:0 2px 5px rgba(0,0,0,.18);transition:transform .2s ease}.style-tone-switch.is-on i{background:#181b22;border-color:#68717d}.style-tone-switch.is-on i::after{transform:translateX(19px)}.style-tone-switch:focus-visible{outline:3px solid color-mix(in srgb,var(--meta-blue) 35%,transparent);outline-offset:2px}
[dir="rtl"] .style-tone-switch{inset-inline-start:14px;inset-inline-end:auto}
.design-style-swatch{height:86px;display:grid;overflow:hidden}
.design-style-modern{background:linear-gradient(145deg,var(--surface),var(--surface-subtle));border:1px solid var(--line);border-radius:18px;box-shadow:0 10px 28px color-mix(in srgb,var(--ink) 8%,transparent);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.design-style-modern:hover{transform:translateY(-2px);box-shadow:0 14px 32px color-mix(in srgb,var(--ink) 12%,transparent)}

.design-style-modern .design-style-swatch{padding:11px;gap:7px;background:var(--surface);border-radius:13px;box-shadow:inset 0 0 0 1px var(--line)}
.design-style-modern .design-style-swatch i{display:block;border-radius:7px;background:var(--preview-secondary)}.design-style-modern .design-style-swatch i:first-child{width:62%;background:var(--preview-primary)}.design-style-modern .design-style-swatch i:last-child{width:78%;background:var(--preview-accent)}
.design-style-bold{color:var(--ink);background:var(--preview-accent);border:3px solid var(--ink);border-radius:0;box-shadow:7px 7px 0 var(--ink);transition:transform .12s ease,box-shadow .12s ease}
.design-style-bold:hover{transform:translate(-2px,-2px);box-shadow:10px 10px 0 var(--ink)}

.design-style-bold .design-style-copy small{color:var(--ink)}.design-style-bold .design-style-check{background:var(--ink);border-radius:0}
.design-style-bold .design-style-swatch{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;background:var(--surface);border:3px solid var(--ink)}
.design-style-bold .design-style-swatch i{padding:5px;display:flex;align-items:center;color:var(--surface);background:var(--ink);font-size:12px;font-style:normal;font-weight:950}.design-style-bold .design-style-swatch i:nth-child(2){background:var(--preview-primary);border-inline-start:3px solid var(--ink)}.design-style-bold .design-style-swatch i:last-child{grid-column:1/-1;justify-content:flex-end;color:var(--ink);background:var(--preview-secondary);border-top:3px solid var(--ink);font-size:20px}

/* Bold / brutalist preview: same content, colors and selected fonts; only composition changes. */
#previewViewport[data-design-style="bold"]{background:var(--preview-text);border:3px solid var(--preview-text);border-radius:0;box-shadow:6px 6px 0 var(--preview-accent);scrollbar-color:var(--preview-accent) var(--preview-text)}
#previewViewport[data-design-style="bold"] :is(.website-preview,.social-posts-preview,.print-designs-preview){background:var(--preview-secondary)}
#previewViewport[data-design-style="bold"] :is(.mini-browser-bar,.mini-site-topbar,.mini-site-nav,.mini-hero,.mini-content-section,.mini-stats-section,.mini-why-section,.mini-contact-section,.mini-collection-section,.mini-testimonials-preview,.mini-gallery-preview,.mini-contact-form-preview,.mini-footer){border-radius:0;background-image:none;box-shadow:none}
#previewViewport[data-design-style="bold"] .mini-browser-bar{height:30px;background:var(--preview-text);border-bottom:3px solid var(--preview-text)}
#previewViewport[data-design-style="bold"] .mini-browser-bar i{border-radius:0;background:var(--preview-accent)}
#previewViewport[data-design-style="bold"] .mini-browser-bar span{background:var(--preview-secondary);border:2px solid var(--preview-text);border-radius:0}
#previewViewport[data-design-style="bold"] .mini-site-topbar{color:var(--preview-text);background:var(--preview-accent);border-bottom:3px solid var(--preview-text);text-transform:uppercase;letter-spacing:.08em}
#previewViewport[data-design-style="bold"] .mini-site-nav{height:58px;color:var(--preview-text);background:#fff;border-bottom:3px solid var(--preview-text)}
#previewViewport[data-design-style="bold"] .mini-site-nav strong{font-size:15px;font-weight:900;letter-spacing:-.05em;text-transform:uppercase}
#previewViewport[data-design-style="bold"] .mini-menu-icon i{height:3px;background:var(--preview-text);border-radius:0}
#previewViewport[data-design-style="bold"] .mini-hero{min-height:292px;padding:34px 18px;display:grid;align-content:center;background:var(--preview-secondary);border-bottom:3px solid var(--preview-text)}
#previewViewport[data-design-style="bold"] .mini-hero::before{content:none}
#previewViewport[data-design-style="bold"] .mini-kicker{width:max-content;padding:3px 6px;color:#fff;background:var(--preview-text);font-weight:900;letter-spacing:.08em;text-transform:uppercase}
#previewViewport[data-design-style="bold"] .mini-hero h3{max-width:78%;margin:12px 0 8px;font-size:clamp(26px,8vw,38px);font-weight:900;line-height:.95;letter-spacing:-.055em;text-transform:uppercase}
#previewViewport[data-design-style="bold"] .mini-hero p{max-width:62%;color:var(--preview-text);font-size:8px;font-weight:650}
#previewViewport[data-design-style="bold"] .mini-hero button{padding:8px 14px;color:var(--preview-secondary);background:var(--preview-text);border:2px solid var(--preview-text);border-radius:0;box-shadow:4px 4px 0 var(--preview-accent);font-weight:900;text-transform:uppercase}
#previewViewport[data-design-style="bold"] .hero-art{left:-22px;bottom:-16px;width:145px;height:180px;background:var(--preview-primary);border:3px solid var(--preview-text);border-radius:0;transform:rotate(3deg);opacity:1;filter:contrast(1.08) saturate(.9)}
#previewViewport[data-design-style="bold"] .mini-content-section,#previewViewport[data-design-style="bold"] .mini-collection-section,#previewViewport[data-design-style="bold"] .mini-testimonials-preview,.mini-gallery-preview,#previewViewport[data-design-style="bold"] .mini-contact-form-preview{border-bottom:3px solid var(--preview-text)}
#previewViewport[data-design-style="bold"] :is(.mini-content-section,.mini-collection-section,.mini-testimonials-preview,.mini-gallery-preview,.mini-contact-form-preview) h4{font-size:20px;font-weight:950;line-height:1;letter-spacing:-.04em;text-transform:uppercase}
#previewViewport[data-design-style="bold"] .mini-card-row,#previewViewport[data-design-style="bold"] :is(.mini-collection-grid,.mini-testimonials-grid){gap:0;border:2px solid var(--preview-text)}
#previewViewport[data-design-style="bold"] :is(.mini-service-card,.mini-collection-card,.mini-testimonial-card,.gallery-tile){background:#fff;border:0;border-inline-end:2px solid var(--preview-text);border-top:0;border-radius:0;box-shadow:none}
#previewViewport[data-design-style="bold"] :is(.mini-service-card,.mini-collection-card,.mini-testimonial-card,.gallery-tile):last-child{border-inline-end:0}
#previewViewport[data-design-style="bold"] .mini-service-card span{color:var(--preview-text);font-weight:900}
#previewViewport[data-design-style="bold"] .mini-stats-section{gap:0;padding:0;background:var(--preview-accent);border-bottom:3px solid var(--preview-text)}
#previewViewport[data-design-style="bold"] .mini-stats-section div{padding:15px 5px;color:var(--preview-text);border-inline-end:2px solid var(--preview-text);border-bottom:0}
#previewViewport[data-design-style="bold"] .mini-stats-section div:last-child{border-inline-end:0}
#previewViewport[data-design-style="bold"] .mini-feature-row{gap:0;border:2px solid var(--preview-text)}
#previewViewport[data-design-style="bold"] .mini-feature-row span{background:#fff;border:0;border-inline-end:2px solid var(--preview-text);border-radius:0;font-weight:800}
#previewViewport[data-design-style="bold"] :is(.mini-contact-section,.mini-footer){color:#fff;background:var(--preview-text);border-radius:0}
#previewViewport[data-design-style="bold"] :is(.mini-contact-section,.mini-contact-form-preview) button{background:var(--preview-accent);color:var(--preview-text);border:2px solid var(--preview-text);border-radius:0;box-shadow:3px 3px 0 #fff;font-weight:900}
#previewViewport[data-design-style="bold"] .social-posts-preview{padding:12px}
#previewViewport[data-design-style="bold"] .social-post-grid{gap:8px}
#previewViewport[data-design-style="bold"] .social-post{background-image:none;border:3px solid var(--preview-text);border-radius:0;box-shadow:5px 5px 0 var(--preview-text)}
#previewViewport[data-design-style="bold"] .social-post h3,#previewViewport[data-design-style="bold"] .social-post h4{font-weight:950;line-height:1;letter-spacing:-.045em;text-transform:uppercase}
#previewViewport[data-design-style="bold"] .social-post-number{top:7px;inset-inline-end:7px;padding:2px 4px;color:var(--preview-secondary);background:var(--preview-text);opacity:1}
#previewViewport[data-design-style="bold"] .social-post-services>div span{border-radius:0;border:2px solid var(--preview-text);box-shadow:3px 3px 0 var(--preview-accent)}
#previewViewport[data-design-style="bold"] .print-designs-preview{background:var(--preview-accent)}
#previewViewport[data-design-style="bold"] :is(.business-card-face,.letterhead-preview,.envelope-preview){border:3px solid var(--preview-text);border-radius:0;box-shadow:8px 8px 0 var(--preview-text);background-image:none}
#previewViewport[data-design-style="bold"] .business-card-face{background:linear-gradient(90deg,#fff 0 68%,var(--preview-secondary) 68%)}
#previewViewport[data-design-style="bold"] :is(.business-card-qr,.business-card-contact i){border:2px solid var(--preview-text);border-radius:0;box-shadow:none}
#previewViewport[data-design-style="bold"] :is(.business-card-edge,.business-card-orbit,.envelope-preview i){border-radius:0;transform:rotate(12deg)}
#previewViewport[data-design-style="bold"] .letterhead-lines i{height:4px;background:var(--preview-text);border-radius:0;opacity:.14}
@media(max-width:700px){.design-style-options{grid-template-columns:1fr}.design-style-card{min-height:130px;grid-template-columns:72px minmax(0,1fr) 24px}.design-style-swatch{height:70px}}

/* Minimal selector: an editorial gallery miniature with fine rules and open space. */
.design-style-minimal{color:#262421;background:#fbfbfa;border:1px solid #d9d7d2;border-radius:0;box-shadow:none;transition:background-color .2s ease,border-color .2s ease}
.design-style-minimal:hover{background:#fff;border-color:#85817a}

.design-style-minimal .design-style-check{color:#fff;background:#262421;border-radius:0}
.design-style-minimal .design-style-copy small{color:#74706a}
.design-style-minimal .design-style-swatch{padding:8px;grid-template-rows:13px 1fr 13px;align-items:center;background:#fff;border:1px solid #d9d7d2}
.design-style-minimal .design-style-swatch i{display:block;color:#77736d;font-size:5px;font-style:normal;letter-spacing:.18em;text-align:center}
.design-style-minimal .design-style-swatch i:nth-child(2){color:#262421;font-family:var(--preview-font);font-size:24px;font-weight:500;letter-spacing:-.06em}
.design-style-minimal .design-style-swatch i:last-child{width:34px;height:9px;justify-self:center;background:#262421}

/* Minimal / editorial gallery preview. Content, palette, and chosen fonts remain project-owned. */
#previewViewport[data-design-style="minimal"]{background:#f4f3f0;border:1px solid #dfddd8;border-radius:0;box-shadow:none;scrollbar-color:#aaa69f #f4f3f0}
#previewViewport[data-design-style="minimal"] :is(.website-preview,.social-posts-preview,.print-designs-preview){color:var(--preview-text);background:#fbfbfa}
#previewViewport[data-design-style="minimal"] :is(.mini-browser-bar,.mini-site-topbar,.mini-site-nav,.mini-hero,.mini-content-section,.mini-stats-section,.mini-why-section,.mini-contact-section,.mini-collection-section,.mini-testimonials-preview,.mini-gallery-preview,.mini-contact-form-preview,.mini-footer){border-radius:0;background-image:none;box-shadow:none}
#previewViewport[data-design-style="minimal"] .mini-browser-bar{height:22px;background:#fbfbfa;border-bottom:1px solid #e3e1dc}
#previewViewport[data-design-style="minimal"] .mini-browser-bar i{width:4px;height:4px;background:#c8c5bf;border-radius:50%}
#previewViewport[data-design-style="minimal"] .mini-browser-bar span{background:#f1f0ed;border:0;border-radius:0}
#previewViewport[data-design-style="minimal"] .mini-site-topbar{display:flex;color:#77736d;background:#f7f6f3;border-bottom:1px solid #dedcd7}
#previewViewport[data-design-style="minimal"] .mini-site-nav{height:58px;padding:0 22px;color:var(--preview-text);background:#fbfbfa;border-bottom:1px solid #dedcd7}
#previewViewport[data-design-style="minimal"] .mini-site-nav strong{color:var(--preview-text);font-size:13px;font-weight:700;letter-spacing:.01em;text-transform:uppercase}
#previewViewport[data-design-style="minimal"] .mini-site-socials{display:none}
#previewViewport[data-design-style="minimal"] .mini-menu-icon{height:12px}
#previewViewport[data-design-style="minimal"] .mini-menu-icon i{height:1px;background:var(--preview-text);border-radius:0}
#previewViewport[data-design-style="minimal"] .mini-hero{min-height:430px;padding:54px 26px 28px;display:flex;flex-direction:column;align-items:center;text-align:center;background:#fbfbfa;border-bottom:1px solid #dedcd7}
#previewViewport[data-design-style="minimal"] .mini-kicker{color:#77736d;font-size:6px;font-weight:650;letter-spacing:.18em;text-transform:uppercase}
#previewViewport[data-design-style="minimal"] .mini-hero h3{max-width:96%;margin:20px auto 14px;color:var(--preview-text);font-size:clamp(30px,9vw,44px);font-weight:600;line-height:1.05;letter-spacing:-.045em}
#previewViewport[data-design-style="minimal"] .mini-hero h3 span{font-family:inherit;font-style:italic;font-weight:500}
#previewViewport[data-design-style="minimal"] .mini-hero p{max-width:82%;margin:0 auto 22px;color:#77736d;font-size:8px;line-height:1.75}
#previewViewport[data-design-style="minimal"] .mini-hero button{min-height:34px;padding:9px 18px;color:#fff;background:var(--preview-text);border:1px solid var(--preview-text);border-radius:0;font-size:6px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;box-shadow:none}
#previewViewport[data-design-style="minimal"] .hero-art{position:relative;inset:auto;width:100%;height:172px;margin-top:30px;order:4;background:color-mix(in srgb,var(--preview-primary) 18%,#eceae6);border:0;border-radius:0;transform:none;opacity:1;overflow:hidden}
#previewViewport[data-design-style="minimal"] .hero-art img{width:100%;height:100%;object-fit:cover;filter:saturate(.72) contrast(1.04)}
#previewViewport[data-design-style="minimal"] .mini-content-section,#previewViewport[data-design-style="minimal"] .mini-collection-section,#previewViewport[data-design-style="minimal"] .mini-testimonials-preview,.mini-gallery-preview,#previewViewport[data-design-style="minimal"] .mini-contact-form-preview{padding:40px 22px;background:#fbfbfa;border-bottom:1px solid #dedcd7}
#previewViewport[data-design-style="minimal"] :is(.mini-content-section,.mini-collection-section,.mini-testimonials-preview,.mini-gallery-preview,.mini-contact-form-preview) h4{margin:9px 0 22px;color:var(--preview-text);font-size:22px;font-weight:600;line-height:1.12;letter-spacing:-.035em}
#previewViewport[data-design-style="minimal"] .mini-card-row,#previewViewport[data-design-style="minimal"] :is(.mini-collection-grid,.mini-testimonials-grid){gap:18px}
#previewViewport[data-design-style="minimal"] :is(.mini-service-card,.mini-collection-card,.mini-testimonial-card,.gallery-tile){padding:0 0 14px;background:transparent;border:0;border-bottom:1px solid #dedcd7;border-radius:0;box-shadow:none}
#previewViewport[data-design-style="minimal"] .mini-service-card{min-height:86px}
#previewViewport[data-design-style="minimal"] .mini-service-card span{color:#77736d;letter-spacing:.12em;text-transform:uppercase}
#previewViewport[data-design-style="minimal"] .mini-stats-section{padding:30px 22px;gap:0;background:#f2f0eb;border-bottom:1px solid #dedcd7}
#previewViewport[data-design-style="minimal"] .mini-stats-section div{padding:8px;color:var(--preview-text);border:0;border-inline-end:1px solid #d3d0ca}
#previewViewport[data-design-style="minimal"] .mini-stats-section div:last-child{border-inline-end:0}
#previewViewport[data-design-style="minimal"] .mini-stats-section strong{font-size:17px;font-weight:500}
#previewViewport[data-design-style="minimal"] .mini-feature-row{gap:0;border-block:1px solid #dedcd7}
#previewViewport[data-design-style="minimal"] .mini-feature-row span{padding:14px 6px;background:transparent;border:0;border-inline-end:1px solid #dedcd7;border-radius:0}
#previewViewport[data-design-style="minimal"] .mini-feature-row span:last-child{border-inline-end:0}
#previewViewport[data-design-style="minimal"] .mini-contact-section{padding:44px 24px;color:var(--preview-text);background:#f2f0eb;text-align:center;border-bottom:1px solid #dedcd7}
#previewViewport[data-design-style="minimal"] .mini-contact-section p{color:#77736d}
#previewViewport[data-design-style="minimal"] :is(.mini-contact-section,.mini-contact-form-preview) button{color:#fff;background:var(--preview-text);border:1px solid var(--preview-text);border-radius:0;box-shadow:none;letter-spacing:.08em;text-transform:uppercase}
#previewViewport[data-design-style="minimal"] .mini-footer{color:#fbfbfa;background:var(--preview-text)}
#previewViewport[data-design-style="minimal"] .social-posts-preview{padding:22px;background:#f2f0eb}
#previewViewport[data-design-style="minimal"] .social-preview-heading{padding-bottom:12px;border-bottom:1px solid #d7d4ce}
#previewViewport[data-design-style="minimal"] .social-post-grid{gap:14px}
#previewViewport[data-design-style="minimal"] .social-post{padding:18px;background:#fbfbfa;background-image:none;border:1px solid #dedcd7;border-radius:0;box-shadow:none}
#previewViewport[data-design-style="minimal"] .social-post h3,#previewViewport[data-design-style="minimal"] .social-post h4{color:var(--preview-text);font-weight:600;letter-spacing:-.035em}
#previewViewport[data-design-style="minimal"] .social-post-number{color:#77736d;letter-spacing:.14em;opacity:1}
#previewViewport[data-design-style="minimal"] .social-post-services>div span{padding:8px 0;background:transparent;border:0;border-bottom:1px solid #dedcd7;border-radius:0;box-shadow:none}
#previewViewport[data-design-style="minimal"] .social-post-proof,#previewViewport[data-design-style="minimal"] .social-post-contact{color:#fbfbfa;background:var(--preview-text)}
#previewViewport[data-design-style="minimal"] .print-designs-preview{background:#efede8}
#previewViewport[data-design-style="minimal"] :is(.business-card-face,.letterhead-preview,.envelope-preview){background:#fbfbfa;background-image:none;border:1px solid #d6d3cd;border-radius:0;box-shadow:0 8px 24px rgba(37,34,29,.05);transform:none}
#previewViewport[data-design-style="minimal"] .business-card-face{grid-template-columns:1fr 82px}
#previewViewport[data-design-style="minimal"] :is(.business-card-edge,.business-card-orbit){display:none}
#previewViewport[data-design-style="minimal"] .business-card-logo{color:var(--preview-text);text-transform:uppercase}
#previewViewport[data-design-style="minimal"] .business-card-contact i{color:var(--preview-text);background:transparent;border:1px solid #d6d3cd;border-radius:0}
#previewViewport[data-design-style="minimal"] .business-card-qr{color:var(--preview-text);border:1px solid #d6d3cd;border-radius:0;box-shadow:none}
#previewViewport[data-design-style="minimal"] .letterhead-preview header{border-bottom:1px solid var(--preview-text)}
#previewViewport[data-design-style="minimal"] .letterhead-preview header strong,#previewViewport[data-design-style="minimal"] .envelope-preview strong{color:var(--preview-text)}
#previewViewport[data-design-style="minimal"] .letterhead-lines i{height:1px;background:#d6d3cd;border-radius:0}
#previewViewport[data-design-style="minimal"] .envelope-flap{background:none;border-bottom:1px solid #dedcd7}
#previewViewport[data-design-style="minimal"] .envelope-preview i{border-color:var(--preview-text);border-width:1px;border-radius:50%;opacity:.18}

/* Technologic selector: dark telemetry surface derived from the project's own colors. */
.design-style-technologic{color:#f5fbff;background:#0b0c13;border:1px solid color-mix(in srgb,var(--preview-primary) 65%,#7cfaff);border-radius:5px;box-shadow:inset 0 0 22px color-mix(in srgb,var(--preview-primary) 12%,transparent),0 0 14px color-mix(in srgb,var(--preview-accent) 16%,transparent);transition:border-color .2s ease,box-shadow .2s ease}
.design-style-technologic:hover{border-color:var(--preview-accent);box-shadow:inset 0 0 28px color-mix(in srgb,var(--preview-primary) 16%,transparent),0 0 18px color-mix(in srgb,var(--preview-accent) 24%,transparent)}

.design-style-technologic .design-style-copy small{color:#9da4b4}
.design-style-technologic .design-style-check{color:#07110c;background:var(--preview-accent);border-radius:3px;box-shadow:0 0 12px var(--preview-accent)}
.design-style-technologic .design-style-swatch{padding:8px;grid-template-columns:1fr auto;grid-template-rows:auto 1fr;background-color:#090a10;background-image:linear-gradient(color-mix(in srgb,var(--preview-primary) 18%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--preview-primary) 18%,transparent) 1px,transparent 1px);background-size:12px 12px;border:1px solid color-mix(in srgb,var(--preview-primary) 55%,#7cfaff);border-radius:3px}
.design-style-technologic .design-style-swatch i{position:relative;z-index:1;color:color-mix(in srgb,var(--preview-accent) 72%,#fff);font-size:6px;font-style:normal;font-weight:850;letter-spacing:.12em;text-shadow:0 0 8px var(--preview-accent)}
.design-style-technologic .design-style-swatch i:nth-child(2){font-size:19px}.design-style-technologic .design-style-swatch i:last-child{grid-column:1/-1;align-self:end;padding:5px;color:#07110c;background:linear-gradient(90deg,var(--preview-primary),var(--preview-accent));text-shadow:none}

/* Technologic / DeFi-style preview: dark grid, luminous telemetry, and squared data panels. */
#previewViewport[data-design-style="technologic"]{background:#080910;border:1px solid color-mix(in srgb,var(--preview-primary) 52%,#65f6ff);border-radius:3px;box-shadow:inset 0 0 28px rgba(0,0,0,.35),0 0 16px color-mix(in srgb,var(--preview-accent) 20%,transparent);scrollbar-color:var(--preview-accent) #11131b}
#previewViewport[data-design-style="technologic"] :is(.website-preview,.social-posts-preview,.print-designs-preview){color:#f3f6fb;background-color:#090a10;background-image:linear-gradient(color-mix(in srgb,var(--preview-primary) 14%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--preview-primary) 14%,transparent) 1px,transparent 1px);background-size:30px 30px}
#previewViewport[data-design-style="technologic"] :is(.mini-browser-bar,.mini-site-topbar,.mini-site-nav,.mini-hero,.mini-content-section,.mini-stats-section,.mini-why-section,.mini-contact-section,.mini-collection-section,.mini-testimonials-preview,.mini-gallery-preview,.mini-contact-form-preview,.mini-footer){border-radius:0;background-image:none;box-shadow:none}
#previewViewport[data-design-style="technologic"] .mini-browser-bar{height:26px;background:#080910;border-bottom:1px solid color-mix(in srgb,var(--preview-primary) 45%,#65f6ff)}
#previewViewport[data-design-style="technologic"] .mini-browser-bar i{background:var(--preview-accent);box-shadow:0 0 7px var(--preview-accent)}
#previewViewport[data-design-style="technologic"] .mini-browser-bar span{background:#11131b;border:1px solid #292d3a;border-radius:2px}
#previewViewport[data-design-style="technologic"] .mini-site-topbar{color:#a5adbd;background:#0d0f16;border-bottom:1px solid #252a36;font-variant-numeric:tabular-nums;text-transform:uppercase;letter-spacing:.08em}
#previewViewport[data-design-style="technologic"] .mini-site-nav{height:58px;color:#9ca4b5;background:#090a10;border-bottom:1px solid color-mix(in srgb,var(--preview-primary) 48%,#65f6ff);letter-spacing:.1em;text-transform:uppercase}
#previewViewport[data-design-style="technologic"] .mini-site-nav strong{color:color-mix(in srgb,var(--preview-accent) 64%,#fff);font-size:14px;font-weight:800;text-shadow:0 0 10px var(--preview-accent)}
#previewViewport[data-design-style="technologic"] .mini-site-nav .mini-site-socials,#previewViewport[data-design-style="technologic"] .mini-site-topbar .mini-top-socials{color:var(--preview-accent)}
#previewViewport[data-design-style="technologic"] :is(.mini-site-socials,.mini-top-socials) span{color:#fff}
#previewViewport[data-design-style="technologic"] .mini-menu-icon i{height:2px;background:var(--preview-accent);border-radius:0;box-shadow:0 0 5px var(--preview-accent)}
#previewViewport[data-design-style="technologic"] .mini-hero{min-height:330px;padding:42px 20px 30px;background:rgba(9,10,16,.88);border-bottom:1px solid color-mix(in srgb,var(--preview-primary) 45%,#65f6ff)}
#previewViewport[data-design-style="technologic"] .mini-hero::before{content:none}
#previewViewport[data-design-style="technologic"] .mini-kicker{color:var(--preview-accent);font-size:6px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;text-shadow:0 0 7px var(--preview-accent)}
#previewViewport[data-design-style="technologic"] .mini-hero h3{max-width:72%;margin:14px 0 10px;color:#f5f7fb;font-size:clamp(27px,8vw,39px);font-weight:900;line-height:.98;letter-spacing:-.045em;text-transform:uppercase}
#previewViewport[data-design-style="technologic"] .mini-hero h3 span{color:color-mix(in srgb,var(--preview-accent) 70%,#fff);text-shadow:0 0 8px var(--preview-accent),0 0 20px color-mix(in srgb,var(--preview-accent) 55%,transparent)}
#previewViewport[data-design-style="technologic"] .mini-hero p{max-width:70%;color:#9ba2b1;font-size:7px;line-height:1.7;letter-spacing:.035em}
#previewViewport[data-design-style="technologic"] .mini-hero button{padding:9px 15px;color:#07100d;background:linear-gradient(90deg,var(--preview-primary),var(--preview-accent));border:1px solid color-mix(in srgb,var(--preview-accent) 72%,#fff);border-radius:2px;box-shadow:0 0 14px color-mix(in srgb,var(--preview-accent) 30%,transparent);font-size:6px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
#previewViewport[data-design-style="technologic"] .hero-art{left:-20px;bottom:16px;width:142px;height:185px;background:#10121b;border:1px solid color-mix(in srgb,var(--preview-primary) 55%,#65f6ff);border-radius:3px;transform:none;opacity:1;box-shadow:inset 0 0 24px color-mix(in srgb,var(--preview-primary) 13%,transparent)}
#previewViewport[data-design-style="technologic"] .hero-art img{filter:saturate(.7) contrast(1.2) brightness(.78)}
#previewViewport[data-design-style="technologic"] :is(.mini-content-section,.mini-collection-section,.mini-testimonials-preview,.mini-gallery-preview,.mini-contact-form-preview){padding:28px 18px;background:rgba(9,10,16,.91);border-bottom:1px solid #252b35}
#previewViewport[data-design-style="technologic"] :is(.mini-content-section,.mini-collection-section,.mini-testimonials-preview,.mini-gallery-preview,.mini-contact-form-preview) h4{margin:6px 0 15px;color:#f3f6fb;font-size:18px;font-weight:850;letter-spacing:.055em;text-transform:uppercase}
#previewViewport[data-design-style="technologic"] .mini-card-row,#previewViewport[data-design-style="technologic"] :is(.mini-collection-grid,.mini-testimonials-grid){gap:8px}
#previewViewport[data-design-style="technologic"] :is(.mini-service-card,.mini-collection-card,.mini-testimonial-card,.gallery-tile){background:#10121a;border:1px solid #2b3340;border-top:1px solid color-mix(in srgb,var(--preview-primary) 58%,#65f6ff);border-radius:3px;box-shadow:inset 0 0 18px rgba(0,0,0,.22)}
#previewViewport[data-design-style="technologic"] .mini-service-card span{color:var(--preview-accent);letter-spacing:.1em;text-shadow:0 0 6px var(--preview-accent)}
#previewViewport[data-design-style="technologic"] :is(.mini-service-card,.mini-collection-card,.mini-testimonial-card,.gallery-tile) :is(strong,p){color:#f0f3f8}
#previewViewport[data-design-style="technologic"] :is(.mini-service-card,.mini-collection-card,.mini-testimonial-card,.gallery-tile) :is(small,span){color:#9aa2b2}
#previewViewport[data-design-style="technologic"] .mini-stats-section{padding:14px 18px;gap:8px;background:#090a10;border-bottom:1px solid #29303a}
#previewViewport[data-design-style="technologic"] .mini-stats-section div{padding:12px 4px;color:#dffcff;background:#10131b;border:1px solid color-mix(in srgb,var(--preview-primary) 45%,#65f6ff);border-radius:3px}
#previewViewport[data-design-style="technologic"] .mini-stats-section strong{color:color-mix(in srgb,var(--preview-accent) 72%,#fff);font-size:15px;text-shadow:0 0 8px var(--preview-accent)}
#previewViewport[data-design-style="technologic"] .mini-feature-row{gap:7px}
#previewViewport[data-design-style="technologic"] .mini-feature-row span{color:#c9cfda;background:#10121a;border:1px solid #303744;border-radius:2px}
#previewViewport[data-design-style="technologic"] .mini-contact-section{color:#f4f7fb;background:#0d0f16;border-top:1px solid color-mix(in srgb,var(--preview-primary) 42%,#65f6ff);border-bottom:1px solid #282e39}
#previewViewport[data-design-style="technologic"] .mini-contact-section p{color:#9da5b4}
#previewViewport[data-design-style="technologic"] :is(.mini-contact-section,.mini-contact-form-preview) button{color:#07100d;background:linear-gradient(90deg,var(--preview-primary),var(--preview-accent));border:1px solid var(--preview-accent);border-radius:2px;box-shadow:0 0 12px color-mix(in srgb,var(--preview-accent) 28%,transparent);font-weight:900;text-transform:uppercase}
#previewViewport[data-design-style="technologic"] .mini-footer{color:#aab1bf;background:#080910;border-top:1px solid #282e39}
#previewViewport[data-design-style="technologic"] .social-posts-preview{padding:14px}
#previewViewport[data-design-style="technologic"] .social-preview-heading{color:#dce3ed}
#previewViewport[data-design-style="technologic"] .social-post{color:#eaf0f7;background:#10121a;background-image:linear-gradient(color-mix(in srgb,var(--preview-primary) 9%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--preview-primary) 9%,transparent) 1px,transparent 1px);background-size:16px 16px;border:1px solid #303947;border-radius:3px;box-shadow:inset 0 0 18px rgba(0,0,0,.22)}
#previewViewport[data-design-style="technologic"] .social-post :is(h3,h4,strong){color:#f4f7fb;text-transform:uppercase}
#previewViewport[data-design-style="technologic"] .social-post :is(p,span){color:#aab1bf}
#previewViewport[data-design-style="technologic"] .social-post small,#previewViewport[data-design-style="technologic"] .social-post-number{color:var(--preview-accent);text-shadow:0 0 6px var(--preview-accent)}
#previewViewport[data-design-style="technologic"] .social-post-services>div span{color:#dce3ed;background:#0d0f16;border:1px solid #303947;border-inline-start:2px solid var(--preview-accent);border-radius:2px;box-shadow:none}
#previewViewport[data-design-style="technologic"] .social-post-proof,#previewViewport[data-design-style="technologic"] .social-post-contact{background:#0c0e15}
#previewViewport[data-design-style="technologic"] .print-designs-preview{background-color:#090a10}
#previewViewport[data-design-style="technologic"] :is(.business-card-face,.letterhead-preview,.envelope-preview){color:#edf4fb;background:#10121a;background-image:linear-gradient(color-mix(in srgb,var(--preview-primary) 10%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--preview-primary) 10%,transparent) 1px,transparent 1px);background-size:18px 18px;border:1px solid color-mix(in srgb,var(--preview-primary) 55%,#65f6ff);border-radius:3px;box-shadow:0 0 24px color-mix(in srgb,var(--preview-accent) 16%,transparent)}
#previewViewport[data-design-style="technologic"] .business-card-logo,#previewViewport[data-design-style="technologic"] .business-card-person h3,#previewViewport[data-design-style="technologic"] :is(.letterhead-preview,.envelope-preview) strong{color:color-mix(in srgb,var(--preview-accent) 70%,#fff);text-shadow:0 0 7px var(--preview-accent)}
#previewViewport[data-design-style="technologic"] .business-card-contact span,#previewViewport[data-design-style="technologic"] .business-card-qr-wrap>span,#previewViewport[data-design-style="technologic"] :is(.letterhead-preview,.envelope-preview) span{color:#a7afbf}
#previewViewport[data-design-style="technologic"] .business-card-contact i,#previewViewport[data-design-style="technologic"] .business-card-qr{color:var(--preview-accent);background:#090a10;border:1px solid #35404e;border-radius:2px;box-shadow:0 0 10px color-mix(in srgb,var(--preview-accent) 18%,transparent)}
#previewViewport[data-design-style="technologic"] :is(.business-card-edge,.business-card-orbit){border-radius:3px;opacity:.22}
#previewViewport[data-design-style="technologic"] .letterhead-preview header{border-bottom:1px solid var(--preview-accent)}
#previewViewport[data-design-style="technologic"] .letterhead-lines i{background:#343b48;border-radius:0}
#previewViewport[data-design-style="technologic"] .envelope-flap{background:linear-gradient(155deg,transparent 49.5%,color-mix(in srgb,var(--preview-primary) 14%,#11131b) 50%);border-bottom-color:#303744}

/* Identity subtabs stay in one row at every builder width. */
.identity-subtabs{grid-template-columns:repeat(4,minmax(0,1fr))}
.identity-subtab{min-width:0}
.identity-subtab em{max-width:100%;line-height:1.25;text-align:center;white-space:normal}
@media(max-width:720px){.identity-subtabs{grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;padding:5px}.identity-subtab{min-height:56px;padding:5px 3px}.identity-subtab em{font-size:9px}.identity-subtab span{width:23px;height:23px}.identity-subtab span .ui-icon{width:22px;height:22px}}

/* Bold preview rhythm: consistent insets, heading gaps, and component spacing. */
#previewViewport[data-design-style="bold"] :is(.mini-content-section,.mini-about-section,.mini-why-section,.mini-journey-section,.mini-collection-section,.mini-testimonials-preview,.mini-gallery-preview,.mini-contact-form-preview){padding:30px 18px}
#previewViewport[data-design-style="bold"] :is(.mini-content-section,.mini-about-section,.mini-why-section,.mini-journey-section,.mini-collection-section,.mini-testimonials-preview,.mini-gallery-preview,.mini-contact-form-preview)>.mini-kicker{margin-bottom:8px}
#previewViewport[data-design-style="bold"] :is(.mini-content-section,.mini-about-section,.mini-why-section,.mini-journey-section,.mini-collection-section,.mini-testimonials-preview,.mini-gallery-preview,.mini-contact-form-preview) h4{margin:0 0 18px}
#previewViewport[data-design-style="bold"] .mini-contact-form-preview>div:first-child>.mini-kicker{display:block;margin-bottom:8px}
#previewViewport[data-design-style="bold"] :is(.mini-card-row,.mini-feature-row,.mini-collection-grid,.mini-testimonials-grid){gap:10px}
#previewViewport[data-design-style="bold"] .mini-about-section{column-gap:18px}
#previewViewport[data-design-style="bold"] .mini-about-section p{margin-bottom:12px;line-height:1.65}
#previewViewport[data-design-style="bold"] .mini-detail-list{gap:8px}
#previewViewport[data-design-style="bold"] .mini-detail-list span{padding:7px 8px;border-radius:0}
#previewViewport[data-design-style="bold"] .mini-stats-section{margin:0;padding:0}
#previewViewport[data-design-style="bold"] .mini-stats-section div{min-height:74px;justify-content:center;gap:4px}
#previewViewport[data-design-style="bold"] .mini-contact-section{padding:28px 18px}
#previewViewport[data-design-style="bold"] .mini-contact-section h4{margin:6px 0 10px}
#previewViewport[data-design-style="bold"] .mini-contact-form-preview .mini-form-fields{gap:8px}

/* Minimal hero alignment: CTA and both trust notes form one centered stack. */
#previewViewport[data-design-style="minimal"] .mini-hero-copy{width:100%;display:flex;flex-direction:column;align-items:center;text-align:center}
#previewViewport[data-design-style="minimal"] .mini-hero-actions{width:100%;justify-content:center}
#previewViewport[data-design-style="minimal"] .mini-trust-row{width:100%;justify-content:center;align-items:center;flex-wrap:wrap;gap:6px 12px;text-align:center}
#previewViewport[data-design-style="minimal"] .mini-trust-row span{display:inline-flex;align-items:center;justify-content:center}

/* Light selector: warm invitation card with soft color and generous air. */
.design-style-light{color:#4b403c;background:color-mix(in srgb,var(--preview-secondary) 28%,#fffaf5);border:1px solid color-mix(in srgb,var(--preview-primary) 18%,#e9ddd5);border-radius:22px;box-shadow:0 12px 32px rgba(91,69,58,.07);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.design-style-light:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--preview-primary) 38%,#dfd0c7);box-shadow:0 16px 38px rgba(91,69,58,.1)}

.design-style-light .design-style-copy small{color:#8c7c75}
.design-style-light .design-style-check{color:#fff;background:color-mix(in srgb,var(--preview-primary) 72%,#b98e8e);box-shadow:0 5px 12px color-mix(in srgb,var(--preview-primary) 20%,transparent)}
.design-style-light .design-style-swatch{position:relative;padding:9px;grid-template-rows:13px 1fr 16px;align-items:center;background:linear-gradient(140deg,color-mix(in srgb,var(--preview-secondary) 40%,#fffdf9),#fff 62%);border:1px solid color-mix(in srgb,var(--preview-primary) 14%,#eadfd8);border-radius:18px;overflow:hidden}
.design-style-light .design-style-swatch::after{content:'';position:absolute;width:48px;height:62px;inset:auto -9px -12px auto;background:color-mix(in srgb,var(--preview-primary) 20%,#ead4d0);border-radius:48% 52% 42% 58%;filter:blur(1px);opacity:.8}
.design-style-light .design-style-swatch i{position:relative;z-index:1;display:block;color:#9d817b;font-size:5px;font-style:normal;letter-spacing:.15em;text-align:center}
.design-style-light .design-style-swatch i:nth-child(2){color:#4b403c;font-family:var(--preview-font);font-size:23px;font-weight:500;letter-spacing:-.05em}
.design-style-light .design-style-swatch i:last-child{width:38px;height:12px;justify-self:center;background:color-mix(in srgb,var(--preview-primary) 55%,#d8a8a8);border-radius:999px}

/* Light / romantic event preview: airy layout, washed imagery, and gentle cards. */
#previewViewport[data-design-style="light"]{background:#f4efe9;border:1px solid #eadfd7;border-radius:16px;box-shadow:inset 0 1px 5px rgba(83,61,50,.07);scrollbar-color:color-mix(in srgb,var(--preview-primary) 38%,#d8beb5) #f5f0eb}
#previewViewport[data-design-style="light"] :is(.website-preview,.social-posts-preview,.print-designs-preview){color:color-mix(in srgb,var(--preview-text) 78%,#4c403c);background:#fffaf6}
#previewViewport[data-design-style="light"] :is(.mini-browser-bar,.mini-site-topbar,.mini-site-nav,.mini-hero,.mini-content-section,.mini-stats-section,.mini-why-section,.mini-contact-section,.mini-collection-section,.mini-testimonials-preview,.mini-gallery-preview,.mini-contact-form-preview,.mini-footer){box-shadow:none}
#previewViewport[data-design-style="light"] .mini-browser-bar{height:23px;background:#fffaf6;border-bottom:1px solid #eee4dd}
#previewViewport[data-design-style="light"] .mini-browser-bar i{background:color-mix(in srgb,var(--preview-primary) 36%,#e7c9c9)}
#previewViewport[data-design-style="light"] .mini-browser-bar span{background:#fff;border:1px solid #eee4dd}
#previewViewport[data-design-style="light"] .mini-site-topbar{color:#8d7d76;background:#fdf8f4;border-bottom:1px solid #eee3dc}
#previewViewport[data-design-style="light"] .mini-site-nav{height:58px;color:#6f625c;background:rgba(255,250,246,.96);border-bottom:1px solid #eadfd8}
#previewViewport[data-design-style="light"] .mini-site-nav strong{color:color-mix(in srgb,var(--preview-primary) 62%,#7f6661);font-size:13px;font-weight:600}
#previewViewport[data-design-style="light"] .mini-menu-icon i{height:1px;background:#7f7069}
#previewViewport[data-design-style="light"] .mini-hero{min-height:390px;padding:48px 25px 30px;display:flex;align-items:center;background:linear-gradient(90deg,#fffaf6 0 42%,color-mix(in srgb,var(--preview-secondary) 20%,#f7eee8) 72%,color-mix(in srgb,var(--preview-primary) 14%,#eadfd8));border-bottom:1px solid #eadfd8}
#previewViewport[data-design-style="light"] .mini-hero::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,250,246,.98) 0 36%,rgba(255,250,246,.78) 56%,rgba(255,250,246,.08) 100%);pointer-events:none}
#previewViewport[data-design-style="light"] .mini-hero-copy{position:relative;z-index:4;width:67%;display:flex;flex-direction:column;align-items:flex-start}
#previewViewport[data-design-style="light"] .mini-kicker{padding:4px 9px;color:color-mix(in srgb,var(--preview-primary) 66%,#8e6f69);background:color-mix(in srgb,var(--preview-secondary) 48%,#fbecea);border-radius:999px;font-size:6px;letter-spacing:.06em}
#previewViewport[data-design-style="light"] .mini-kicker::before{width:5px;height:5px;background:color-mix(in srgb,var(--preview-accent) 64%,#d9ad9e);border-radius:50%}
#previewViewport[data-design-style="light"] .mini-hero h3{max-width:100%;margin:18px 0 12px;color:color-mix(in srgb,var(--preview-text) 78%,#51423e);font-size:clamp(28px,8vw,42px);font-weight:500;line-height:1.08;letter-spacing:-.045em}
#previewViewport[data-design-style="light"] .mini-hero h3 span{color:color-mix(in srgb,var(--preview-primary) 48%,#d3a5a5);font-weight:500}
#previewViewport[data-design-style="light"] .mini-hero p{max-width:95%;margin:0 0 18px;color:#84756e;font-size:8px;line-height:1.8}
#previewViewport[data-design-style="light"] :is(.mini-hero-actions button,.detail-block-button){padding:9px 17px;color:#fff;background:color-mix(in srgb,var(--preview-primary) 70%,#c69797);border:0;border-radius:999px;box-shadow:0 7px 18px color-mix(in srgb,var(--preview-primary) 16%,transparent);font-size:6px;font-weight:700}
#previewViewport[data-design-style="light"] .mini-trust-row{color:#9b8a82}
#previewViewport[data-design-style="light"] .hero-art{position:absolute;z-index:1;inset:0 0 0 auto;width:66%;height:100%;margin:0;background-color:color-mix(in srgb,var(--preview-secondary) 35%,#eaded7);background-size:cover;border:0;border-radius:0;box-shadow:none;transform:none;opacity:.78}
#previewViewport[data-design-style="light"] .hero-art::before{inset:0;background:linear-gradient(90deg,rgba(255,250,246,.8),transparent 72%);border-radius:0;box-shadow:none;transform:none}
#previewViewport[data-design-style="light"] .hero-art img{width:100%;height:100%;margin:0;object-fit:cover;filter:saturate(.62) contrast(.92) brightness(1.08);opacity:.72}
#previewViewport[data-design-style="light"] :is(.mini-content-section,.mini-about-section,.mini-why-section,.mini-journey-section,.mini-collection-section,.mini-testimonials-preview,.mini-gallery-preview,.mini-contact-form-preview){padding:38px 20px;background:#fffaf6}
#previewViewport[data-design-style="light"] :is(.mini-content-section,.mini-about-section,.mini-why-section,.mini-journey-section,.mini-collection-section,.mini-testimonials-preview,.mini-gallery-preview,.mini-contact-form-preview):nth-of-type(even){background:color-mix(in srgb,var(--preview-secondary) 18%,#fdf8f4)}
#previewViewport[data-design-style="light"] :is(.mini-content-section,.mini-about-section,.mini-why-section,.mini-journey-section,.mini-collection-section,.mini-testimonials-preview,.mini-gallery-preview,.mini-contact-form-preview) h4{margin:8px 0 20px;color:#584a45;font-size:20px;font-weight:550;letter-spacing:-.035em}
#previewViewport[data-design-style="light"] .mini-card-row,#previewViewport[data-design-style="light"] :is(.mini-collection-grid,.mini-testimonials-grid){gap:10px}
#previewViewport[data-design-style="light"] :is(.mini-service-card,.mini-collection-card,.mini-testimonial-card,.gallery-tile){background:rgba(255,255,255,.86);border:1px solid #eee1da;border-radius:16px;box-shadow:0 10px 24px rgba(90,65,53,.06)}
#previewViewport[data-design-style="light"] .mini-service-card>span{color:color-mix(in srgb,var(--preview-primary) 68%,#9b7772);background:color-mix(in srgb,var(--preview-secondary) 45%,#f6e8e4);border-radius:50%}
#previewViewport[data-design-style="light"] :is(.mini-service-card,.mini-collection-card,.mini-testimonial-card,.gallery-tile) :is(strong,h5){color:#594b46}
#previewViewport[data-design-style="light"] :is(.mini-service-card,.mini-collection-card,.mini-testimonial-card,.gallery-tile) :is(small,p,span){color:#897a73}
#previewViewport[data-design-style="light"] .mini-about-section{gap:18px}
#previewViewport[data-design-style="light"] .mini-about-art img{filter:saturate(.66) contrast(.94) brightness(1.04) drop-shadow(0 12px 20px rgba(96,68,55,.09))}
#previewViewport[data-design-style="light"] .mini-detail-list{gap:7px}
#previewViewport[data-design-style="light"] .mini-detail-list span{padding:7px 9px;color:#665751;background:rgba(255,255,255,.75);border-inline-start:2px solid color-mix(in srgb,var(--preview-primary) 48%,#d8adad);border-radius:8px}
#previewViewport[data-design-style="light"] .mini-stats-section{padding:22px 18px;gap:8px;background:color-mix(in srgb,var(--preview-secondary) 22%,#f9f2ed)}
#previewViewport[data-design-style="light"] .mini-stats-section div{padding:12px 5px;color:#65564f;border:0;border-inline-end:1px solid #e5d7cf}
#previewViewport[data-design-style="light"] .mini-stats-section div:last-child{border-inline-end:0}
#previewViewport[data-design-style="light"] .mini-stats-section strong{color:color-mix(in srgb,var(--preview-primary) 58%,#a47d77);font-size:15px;font-weight:600}
#previewViewport[data-design-style="light"] .mini-feature-row{gap:8px}
#previewViewport[data-design-style="light"] .mini-feature-row span{padding:11px 6px;color:#6d5e57;background:#fff;border:1px solid #eddfd8;border-radius:12px}
#previewViewport[data-design-style="light"] .mini-contact-section{padding:34px 20px;color:#5a4b46;background:color-mix(in srgb,var(--preview-secondary) 24%,#f6ece6)}
#previewViewport[data-design-style="light"] .mini-contact-section p{color:#8e7d75}
#previewViewport[data-design-style="light"] :is(.mini-contact-section,.mini-contact-form-preview) button{color:#fff;background:color-mix(in srgb,var(--preview-primary) 70%,#c69797);border:0;border-radius:999px;box-shadow:0 7px 18px color-mix(in srgb,var(--preview-primary) 15%,transparent)}
#previewViewport[data-design-style="light"] .mini-footer{color:#fdf8f4;background:color-mix(in srgb,var(--preview-text) 78%,#5a4742)}
#previewViewport[data-design-style="light"] .social-posts-preview{padding:18px;background:#f5eee8}
#previewViewport[data-design-style="light"] .social-post-grid{gap:12px}
#previewViewport[data-design-style="light"] .social-post{color:#5b4d47;background:#fffaf6;background-image:none;border:1px solid #eaded7;border-radius:18px;box-shadow:0 12px 26px rgba(89,65,54,.07)}
#previewViewport[data-design-style="light"] .social-post h3,#previewViewport[data-design-style="light"] .social-post h4{color:#584a45;font-weight:550;letter-spacing:-.03em}
#previewViewport[data-design-style="light"] .social-post :is(p,span){color:#897a72}
#previewViewport[data-design-style="light"] .social-post small,#previewViewport[data-design-style="light"] .social-post-number{color:color-mix(in srgb,var(--preview-primary) 64%,#a98079)}
#previewViewport[data-design-style="light"] .social-post-intro,#previewViewport[data-design-style="light"] .social-post-story,#previewViewport[data-design-style="light"] .social-post-services{background:linear-gradient(145deg,#fffaf6,color-mix(in srgb,var(--preview-secondary) 20%,#f9efea))}
#previewViewport[data-design-style="light"] .social-post-services>div span{background:rgba(255,255,255,.75);border:1px solid #eaded7;border-inline-start:3px solid color-mix(in srgb,var(--preview-primary) 50%,#d2a4a0);border-radius:9px;box-shadow:none}
#previewViewport[data-design-style="light"] .social-post-proof,#previewViewport[data-design-style="light"] .social-post-contact{color:#fff;background:linear-gradient(145deg,color-mix(in srgb,var(--preview-primary) 64%,#bd9090),color-mix(in srgb,var(--preview-primary) 40%,#d9b6b2))}
#previewViewport[data-design-style="light"] .social-post-proof :is(p,span),#previewViewport[data-design-style="light"] .social-post-contact :is(p,span,strong){color:#fff}
#previewViewport[data-design-style="light"] .print-designs-preview{background:linear-gradient(145deg,#f7f0ea,#eadfd8)}
#previewViewport[data-design-style="light"] :is(.business-card-face,.letterhead-preview,.envelope-preview){color:#5c4d47;background:linear-gradient(145deg,#fffaf6,#fff);border:1px solid #eaded7;border-radius:16px;box-shadow:0 18px 38px rgba(90,65,53,.1)}
#previewViewport[data-design-style="light"] .business-card-face{background:linear-gradient(135deg,#fffaf6 0 68%,color-mix(in srgb,var(--preview-secondary) 30%,#f3e5df) 68%)}
#previewViewport[data-design-style="light"] .business-card-logo,#previewViewport[data-design-style="light"] .business-card-person h3,#previewViewport[data-design-style="light"] :is(.letterhead-preview,.envelope-preview) strong{color:color-mix(in srgb,var(--preview-primary) 62%,#946f69)}
#previewViewport[data-design-style="light"] .business-card-contact span,#previewViewport[data-design-style="light"] :is(.letterhead-preview,.envelope-preview) span{color:#8d7c74}
#previewViewport[data-design-style="light"] .business-card-contact i{background:color-mix(in srgb,var(--preview-primary) 60%,#bc908c);border-radius:50%}
#previewViewport[data-design-style="light"] .business-card-qr{color:color-mix(in srgb,var(--preview-primary) 58%,#a77e78);border-radius:12px;box-shadow:0 8px 20px rgba(90,65,53,.08)}
#previewViewport[data-design-style="light"] :is(.business-card-edge,.business-card-orbit,.envelope-preview i){background:color-mix(in srgb,var(--preview-primary) 22%,#ead1ce);border-color:color-mix(in srgb,var(--preview-accent) 32%,#e6cbc5);opacity:.55}
#previewViewport[data-design-style="light"] .letterhead-preview header{border-bottom-color:color-mix(in srgb,var(--preview-primary) 48%,#d5aaa4)}
#previewViewport[data-design-style="light"] .letterhead-lines i{background:#eadfd8}
#previewViewport[data-design-style="light"] .envelope-flap{background:linear-gradient(155deg,transparent 49.5%,color-mix(in srgb,var(--preview-secondary) 34%,#f3e5df) 50%);border-bottom-color:#e5d7cf}

/* Digital selector: dark marketplace card with a luminous project-color spectrum. */
.design-style-digital{color:#fff;background:#0c0d10;border:1px solid #30323a;border-radius:13px;box-shadow:0 12px 28px rgba(0,0,0,.24);transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
.design-style-digital:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--preview-accent) 58%,#786bff);box-shadow:0 16px 34px rgba(0,0,0,.3)}

.design-style-digital .design-style-copy small{color:#9da0ab}
.design-style-digital .design-style-check{color:#090a0d;background:linear-gradient(135deg,color-mix(in srgb,var(--preview-primary) 72%,#e72cff),color-mix(in srgb,var(--preview-accent) 70%,#61e7ff));box-shadow:0 0 18px color-mix(in srgb,var(--preview-accent) 35%,transparent)}
.design-style-digital .design-style-swatch{position:relative;padding:8px;grid-template-rows:12px 1fr 13px;align-items:center;background:radial-gradient(circle at 78% 24%,color-mix(in srgb,var(--preview-primary) 25%,transparent),transparent 34%),#090a0d;border:1px solid #32343c;border-radius:10px;overflow:hidden}
.design-style-digital .design-style-swatch::before{content:'';position:absolute;inset:8px;border:1px solid color-mix(in srgb,var(--preview-accent) 36%,#58606d);border-radius:7px}
.design-style-digital .design-style-swatch i{position:relative;z-index:1;display:block;color:#a9acb6;font-size:5px;font-style:normal;letter-spacing:.12em}
.design-style-digital .design-style-swatch i:first-child{justify-self:end;padding:2px 4px;color:#0b0c0f;background:color-mix(in srgb,var(--preview-accent) 72%,#f1ef4f);border-radius:99px;font-weight:900}
.design-style-digital .design-style-swatch i:nth-child(2){color:#fff;font-size:22px;font-weight:800;letter-spacing:-.08em;text-shadow:0 0 14px color-mix(in srgb,var(--preview-primary) 65%,#ed2cff)}
.design-style-digital .design-style-swatch i:last-child{width:42px;height:8px;justify-self:center;background:linear-gradient(90deg,color-mix(in srgb,var(--preview-primary) 80%,#df28ff),color-mix(in srgb,var(--preview-accent) 75%,#59e8ff));border-radius:3px;box-shadow:0 0 12px color-mix(in srgb,var(--preview-accent) 38%,transparent)}

/* Digital / NFT marketplace preview: black canvas, neon gradients, framed media, compact data. */
#previewViewport[data-design-style="digital"]{background:#07080a;border:1px solid #282b32;border-radius:12px;box-shadow:inset 0 1px 7px #000;scrollbar-color:color-mix(in srgb,var(--preview-accent) 58%,#6d67ff) #111318}
#previewViewport[data-design-style="digital"] :is(.website-preview,.social-posts-preview,.print-designs-preview){color:#f8f8fb;background:#090a0d}
#previewViewport[data-design-style="digital"] :is(.mini-browser-bar,.mini-site-topbar,.mini-site-nav,.mini-hero,.mini-content-section,.mini-stats-section,.mini-about-section,.mini-why-section,.mini-journey-section,.mini-contact-section,.mini-collection-section,.mini-testimonials-preview,.mini-gallery-preview,.mini-contact-form-preview,.mini-footer){box-shadow:none}
#previewViewport[data-design-style="digital"] .mini-browser-bar{height:23px;background:#0d0e12;border-bottom:1px solid #272932}
#previewViewport[data-design-style="digital"] .mini-browser-bar i{background:linear-gradient(135deg,var(--preview-primary),var(--preview-accent));box-shadow:0 0 8px color-mix(in srgb,var(--preview-accent) 38%,transparent)}
#previewViewport[data-design-style="digital"] .mini-browser-bar span{background:#16181e;border:1px solid #30333c}
#previewViewport[data-design-style="digital"] .mini-site-topbar{color:#a1a4ae;background:#0b0c0f;border-bottom:1px solid #24262d}
#previewViewport[data-design-style="digital"] :is(.mini-site-socials,.mini-top-socials) span{color:#fff}
#previewViewport[data-design-style="digital"] .mini-site-nav{height:62px;color:#aeb0b9;background:#090a0d;border-bottom:1px solid #292b33}
#previewViewport[data-design-style="digital"] .mini-site-nav strong{color:#fff;font-size:13px;font-weight:800;letter-spacing:-.02em}
#previewViewport[data-design-style="digital"] .mini-menu-icon i{background:#d8d9df}
#previewViewport[data-design-style="digital"] .mini-hero{min-height:410px;padding:50px 24px 32px;align-items:center;background:radial-gradient(circle at 20% 36%,color-mix(in srgb,var(--preview-primary) 13%,transparent),transparent 36%),radial-gradient(circle at 82% 64%,color-mix(in srgb,var(--preview-accent) 10%,transparent),transparent 34%),#090a0d;border-bottom:1px solid #292b33}
#previewViewport[data-design-style="digital"] .mini-hero-copy{position:relative;z-index:3;width:58%;align-items:flex-start}
#previewViewport[data-design-style="digital"] .mini-kicker{padding:5px 9px;color:color-mix(in srgb,var(--preview-accent) 78%,#e5f476);background:#14161a;border:1px solid #32353d;border-radius:999px;font-size:6px;letter-spacing:.1em}
#previewViewport[data-design-style="digital"] .mini-kicker::before{width:5px;height:5px;background:color-mix(in srgb,var(--preview-accent) 70%,#eff34e);border-radius:50%;box-shadow:0 0 9px color-mix(in srgb,var(--preview-accent) 64%,#eff34e)}
#previewViewport[data-design-style="digital"] .mini-hero h3{margin:18px 0 14px;color:#fff;font-size:clamp(31px,9vw,48px);font-weight:800;line-height:1.02;letter-spacing:-.06em}
#previewViewport[data-design-style="digital"] .mini-hero h3 span{color:transparent;background:linear-gradient(90deg,var(--preview-primary),var(--preview-accent));background-clip:text;-webkit-background-clip:text;text-shadow:0 0 22px color-mix(in srgb,var(--preview-primary) 24%,transparent)}
#previewViewport[data-design-style="digital"] .mini-hero p{max-width:94%;margin:0 0 18px;color:#9ea1aa;font-size:8px;line-height:1.75}
#previewViewport[data-design-style="digital"] :is(.mini-hero-actions button,.detail-block-button){padding:10px 18px;color:#08090c;background:linear-gradient(105deg,color-mix(in srgb,var(--preview-primary) 78%,#df27ff),color-mix(in srgb,var(--preview-accent) 76%,#5fe9ff));border:0;border-radius:5px;box-shadow:0 0 22px color-mix(in srgb,var(--preview-primary) 18%,transparent);font-weight:900}
#previewViewport[data-design-style="digital"] .mini-trust-row{color:color-mix(in srgb,var(--preview-accent) 72%,#71e0df);font-weight:800}
#previewViewport[data-design-style="digital"] .hero-art{width:38%;margin:0;background:#121419;border:1px solid #363941;border-radius:12px;box-shadow:0 22px 48px rgba(0,0,0,.42),0 0 28px color-mix(in srgb,var(--preview-primary) 10%,transparent);transform:none}
#previewViewport[data-design-style="digital"] .hero-art::before{inset:-10px 10px 10px -10px;background:linear-gradient(145deg,color-mix(in srgb,var(--preview-primary) 22%,#171920),#111318);border:1px solid #343740;border-radius:12px;box-shadow:none;transform:none}
#previewViewport[data-design-style="digital"] .hero-art img{border-radius:8px;filter:saturate(1.18) contrast(1.08);opacity:.94}
#previewViewport[data-design-style="digital"] :is(.mini-content-section,.mini-about-section,.mini-why-section,.mini-journey-section,.mini-collection-section,.mini-testimonials-preview,.mini-gallery-preview,.mini-contact-form-preview){padding:34px 18px;background:#0b0c0f;border-bottom:1px solid #25272e}
#previewViewport[data-design-style="digital"] :is(.mini-content-section,.mini-about-section,.mini-why-section,.mini-journey-section,.mini-collection-section,.mini-testimonials-preview,.mini-gallery-preview,.mini-contact-form-preview):nth-of-type(even){background:#0e1014}
#previewViewport[data-design-style="digital"] :is(.mini-content-section,.mini-about-section,.mini-why-section,.mini-journey-section,.mini-collection-section,.mini-testimonials-preview,.mini-gallery-preview,.mini-contact-form-preview) h4{margin:8px 0 18px;color:#fff;font-size:21px;font-weight:800;letter-spacing:-.045em}
#previewViewport[data-design-style="digital"] .mini-card-row,#previewViewport[data-design-style="digital"] :is(.mini-collection-grid,.mini-testimonials-grid){gap:10px}
#previewViewport[data-design-style="digital"] :is(.mini-service-card,.mini-collection-card,.mini-testimonial-card,.gallery-tile){color:#fff;background:#13151a;border:1px solid #30333b;border-radius:10px;box-shadow:0 12px 26px rgba(0,0,0,.22)}
#previewViewport[data-design-style="digital"] .mini-service-card>span{color:#090a0d;background:linear-gradient(135deg,var(--preview-primary),var(--preview-accent));border-radius:5px;font-weight:900}
#previewViewport[data-design-style="digital"] :is(.mini-service-card,.mini-collection-card,.mini-testimonial-card,.gallery-tile) :is(strong,h5){color:#fff}
#previewViewport[data-design-style="digital"] :is(.mini-service-card,.mini-collection-card,.mini-testimonial-card,.gallery-tile) :is(small,p,span){color:#999da8}
#previewViewport[data-design-style="digital"] .mini-about-art img{filter:saturate(1.15) contrast(1.08) drop-shadow(0 16px 22px rgba(0,0,0,.35))}
#previewViewport[data-design-style="digital"] .mini-detail-list span{padding:7px 9px;color:#c8cad1;background:#14161b;border:1px solid #2f323a;border-inline-start:3px solid var(--preview-accent);border-radius:5px}
#previewViewport[data-design-style="digital"] .mini-stats-section{padding:20px 18px;background:#090a0d;border-bottom:1px solid #282a31}
#previewViewport[data-design-style="digital"] .mini-stats-section div{color:#9296a1;border-inline-end:1px solid #2d3037}
#previewViewport[data-design-style="digital"] .mini-stats-section strong{color:transparent;background:linear-gradient(90deg,var(--preview-primary),var(--preview-accent));background-clip:text;-webkit-background-clip:text;font-weight:900}
#previewViewport[data-design-style="digital"] .mini-feature-row span{color:#d9dae0;background:#14161a;border:1px solid #30333b;border-radius:7px}
#previewViewport[data-design-style="digital"] .mini-contact-section{color:#fff;background:radial-gradient(circle at 50% 0,color-mix(in srgb,var(--preview-primary) 22%,transparent),transparent 48%),#0c0d11;border-bottom:1px solid #292c33}
#previewViewport[data-design-style="digital"] .mini-contact-section p{color:#a2a5ae}
#previewViewport[data-design-style="digital"] :is(.mini-contact-section,.mini-contact-form-preview) button{color:#090a0d;background:linear-gradient(100deg,var(--preview-primary),var(--preview-accent));border:0;border-radius:5px;box-shadow:0 0 20px color-mix(in srgb,var(--preview-accent) 18%,transparent);font-weight:900}
#previewViewport[data-design-style="digital"] .mini-footer{color:#b2b4bc;background:#07080a;border-top:1px solid #282a31}
#previewViewport[data-design-style="digital"] .social-posts-preview{padding:18px;background:#08090c}
#previewViewport[data-design-style="digital"] .social-post-grid{gap:12px}
#previewViewport[data-design-style="digital"] .social-post{color:#fff;background:#111319;background-image:none;border:1px solid #30333c;border-radius:11px;box-shadow:0 14px 30px rgba(0,0,0,.28)}
#previewViewport[data-design-style="digital"] .social-post h3,#previewViewport[data-design-style="digital"] .social-post h4{color:#fff;font-weight:800;letter-spacing:-.04em}
#previewViewport[data-design-style="digital"] .social-post :is(p,span){color:#a3a6af}
#previewViewport[data-design-style="digital"] .social-post small,#previewViewport[data-design-style="digital"] .social-post-number{color:color-mix(in srgb,var(--preview-accent) 74%,#78e5ff)}
#previewViewport[data-design-style="digital"] .social-post-intro,#previewViewport[data-design-style="digital"] .social-post-story,#previewViewport[data-design-style="digital"] .social-post-services{background:radial-gradient(circle at 80% 10%,color-mix(in srgb,var(--preview-primary) 20%,transparent),transparent 36%),#111319}
#previewViewport[data-design-style="digital"] .social-post-services>div span{background:#171920;border:1px solid #343740;border-inline-start:3px solid var(--preview-accent);border-radius:5px;box-shadow:none}
#previewViewport[data-design-style="digital"] .social-post-proof,#previewViewport[data-design-style="digital"] .social-post-contact{background:linear-gradient(145deg,color-mix(in srgb,var(--preview-primary) 46%,#15131b),color-mix(in srgb,var(--preview-accent) 38%,#101822))}
#previewViewport[data-design-style="digital"] .social-post-proof :is(p,span),#previewViewport[data-design-style="digital"] .social-post-contact :is(p,span,strong){color:#fff}
#previewViewport[data-design-style="digital"] .print-designs-preview{background:radial-gradient(circle at 18% 15%,color-mix(in srgb,var(--preview-primary) 18%,transparent),transparent 28%),#08090c}
#previewViewport[data-design-style="digital"] :is(.business-card-face,.letterhead-preview,.envelope-preview){color:#f6f7fa;background:#111319;border:1px solid #353842;border-radius:10px;box-shadow:0 20px 42px rgba(0,0,0,.36)}
#previewViewport[data-design-style="digital"] .business-card-face{background:linear-gradient(135deg,#111319 0 68%,color-mix(in srgb,var(--preview-primary) 32%,#151521) 68%)}
#previewViewport[data-design-style="digital"] .business-card-logo,#previewViewport[data-design-style="digital"] .business-card-person h3,#previewViewport[data-design-style="digital"] :is(.letterhead-preview,.envelope-preview) strong{color:#fff}
#previewViewport[data-design-style="digital"] .business-card-contact span,#previewViewport[data-design-style="digital"] :is(.letterhead-preview,.envelope-preview) span{color:#a6a9b2}
#previewViewport[data-design-style="digital"] .business-card-contact i{background:linear-gradient(135deg,var(--preview-primary),var(--preview-accent));border-radius:2px}
#previewViewport[data-design-style="digital"] .business-card-qr{color:var(--preview-accent);background:#090a0d;border-color:#3b3e47;box-shadow:0 0 18px color-mix(in srgb,var(--preview-accent) 15%,transparent)}
#previewViewport[data-design-style="digital"] :is(.business-card-edge,.business-card-orbit,.envelope-preview i){background:color-mix(in srgb,var(--preview-primary) 30%,#1c1d25);border-color:var(--preview-accent);opacity:.7}
#previewViewport[data-design-style="digital"] .letterhead-preview header{border-bottom-color:var(--preview-accent)}
#previewViewport[data-design-style="digital"] .letterhead-lines i{background:#30333b}
#previewViewport[data-design-style="digital"] .envelope-flap{background:linear-gradient(155deg,transparent 49.5%,color-mix(in srgb,var(--preview-primary) 24%,#171920) 50%);border-bottom-color:#363943}

/* Design-style selector consistency: illustrated tab icon and numbered miniatures. */
.identity-subtab .identity-style-icon{width:29px;height:29px;overflow:visible}
.design-style-modern .design-style-swatch i:first-child{width:30px;height:24px;display:grid;place-items:center;color:#fff;background:var(--preview-primary);font-size:9px;font-style:normal;font-weight:900;letter-spacing:.06em}
.design-style-light .design-style-swatch i:nth-child(2),.design-style-minimal .design-style-swatch i:nth-child(2){font-variant-numeric:tabular-nums}

/* Photo-card seam guard: crop composite preview sheets slightly past every edge. */
.mini-service-card.has-photo,.mini-collection-card.has-photo{overflow:hidden;background-repeat:no-repeat;background-color:#111;background-origin:border-box;background-clip:border-box;isolation:isolate}

/* Bold: keep heading rhythm and give every content item its own brutalist frame. */
#previewViewport[data-design-style="bold"] .mini-contact-section .mini-kicker{display:inline-block;margin-bottom:9px}
#previewViewport[data-design-style="bold"] .mini-contact-section h4{margin:0 0 10px}
#previewViewport[data-design-style="bold"] .mini-card-row,#previewViewport[data-design-style="bold"] .mini-collection-grid{gap:10px;border:0}
#previewViewport[data-design-style="bold"] :is(.mini-service-card,.mini-collection-card){border:2px solid var(--preview-text);border-radius:0;box-shadow:none}
#previewViewport[data-design-style="bold"] :is(.mini-service-card,.mini-collection-card):last-child{border-inline-end:2px solid var(--preview-text)}

/* Minimal: restore intentional inner spacing for text, prices, and number badges. */
#previewViewport[data-design-style="minimal"] :is(.mini-service-card,.mini-collection-card){padding:16px;gap:7px}
#previewViewport[data-design-style="minimal"] :is(.mini-service-card,.mini-collection-card).has-photo{padding:18px;min-height:145px;border:0;box-shadow:inset 0 0 0 1px rgba(38,36,33,.16)}
#previewViewport[data-design-style="minimal"] .mini-service-card.has-photo>span,#previewViewport[data-design-style="minimal"] .mini-collection-card.has-photo>i{width:30px;height:26px;margin:0 0 10px;padding:0;display:grid;place-items:center;color:#fff;background:rgba(24,23,21,.58);border:1px solid rgba(255,255,255,.24);border-radius:0;backdrop-filter:none;font-size:7px;line-height:1}
#previewViewport[data-design-style="minimal"] :is(.mini-service-card,.mini-collection-card).has-photo :is(strong,b){color:#fff;text-shadow:0 1px 5px rgba(0,0,0,.52)}
#previewViewport[data-design-style="minimal"] :is(.mini-service-card,.mini-collection-card).has-photo small{color:rgba(255,255,255,.9);text-shadow:0 1px 5px rgba(0,0,0,.52)}

/* Light: use the selected hero photo as a full-bleed background and retain contrast on media cards. */
#previewViewport[data-design-style="light"] .hero-art{inset:0;width:100%;height:100%;opacity:.78}
#previewViewport[data-design-style="light"] .hero-art img{display:none}
#previewViewport[data-design-style="light"] .hero-art::before{background:linear-gradient(90deg,rgba(255,250,246,.9) 0,rgba(255,250,246,.64) 45%,rgba(255,250,246,.12) 100%)}
#previewViewport[data-design-style="light"] :is(.mini-service-card,.mini-collection-card).has-photo{padding:15px;background-color:#302a27;border-color:rgba(255,255,255,.2)}
#previewViewport[data-design-style="light"] :is(.mini-service-card,.mini-collection-card).has-photo :is(strong,h5,b){color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.62)}
#previewViewport[data-design-style="light"] :is(.mini-service-card,.mini-collection-card).has-photo :is(small,p){color:rgba(255,255,255,.9);text-shadow:0 1px 6px rgba(0,0,0,.62)}
#previewViewport[data-design-style="light"] .mini-service-card.has-photo>span,#previewViewport[data-design-style="light"] .mini-collection-card.has-photo>i{color:#fff;background:rgba(24,20,18,.52);border:1px solid rgba(255,255,255,.28);text-shadow:none;backdrop-filter:none}

/* Composite-photo corrections: separators belong to the source sheet, never the rendered card. */
#previewViewport[data-design-style="technologic"] :is(.mini-service-card,.mini-collection-card).has-photo{border:0;box-shadow:inset 0 0 18px rgba(0,0,0,.22)}
#previewViewport[data-design-style="digital"] .mini-hero-copy{width:100%}
#previewViewport[data-design-style="digital"] .hero-art{width:100%;height:238px;align-self:center;overflow:hidden;background-repeat:no-repeat!important;border-radius:12px}
#previewViewport[data-design-style="digital"] .hero-art::before{display:none}

/* Soft selector: powdery spa editorial with a warm framed image. */
.design-style-soft{color:#4b4142;background:color-mix(in srgb,var(--preview-secondary) 22%,#fff6f4);border:1px solid #f0deda;border-radius:24px;box-shadow:0 16px 34px rgba(112,77,74,.09)}
.design-style-soft:hover{transform:translateY(-2px);box-shadow:0 20px 40px rgba(112,77,74,.13)}

.design-style-soft .design-style-copy small{color:#8c7c7d}.design-style-soft .design-style-check{background:color-mix(in srgb,var(--preview-primary) 62%,#d999a4)}
.design-style-soft .design-style-swatch{position:relative;padding:9px;grid-template-rows:13px 1fr 12px;background:linear-gradient(145deg,#fff9f7,color-mix(in srgb,var(--preview-secondary) 28%,#fceeed));border:1px solid #eddad6;border-radius:18px}
.design-style-soft .design-style-swatch i{position:relative;z-index:1;color:#9c7f82;font-size:5px;font-style:normal;letter-spacing:.15em;text-align:center}.design-style-soft .design-style-swatch i:nth-child(2){color:#554749;font-size:23px;font-weight:500}.design-style-soft .design-style-swatch i:last-child{width:40px;height:8px;justify-self:center;background:color-mix(in srgb,var(--preview-primary) 45%,#e3aab3);border-radius:999px}

/* Retro selector: friendly warm cream, coral accents, and tactile outlines. */
.design-style-retro{color:#343237;background:#fff8f1;border:2px solid #e79a67;border-radius:22px;box-shadow:6px 6px 0 color-mix(in srgb,var(--preview-primary) 28%,#f3c7aa)}
.design-style-retro:hover{transform:translate(-2px,-2px);box-shadow:9px 9px 0 color-mix(in srgb,var(--preview-primary) 28%,#f3c7aa)}
.design-style-retro .design-style-copy small{color:#736c69}.design-style-retro .design-style-check{color:#343237;background:#f4a064;border:2px solid #343237}
.design-style-retro .design-style-swatch{padding:8px;grid-template-rows:13px 1fr 14px;background:#fffaf5;border:2px solid #3d3b40;border-radius:16px;box-shadow:4px 4px 0 #f5c9ae}.design-style-retro .design-style-swatch i{color:#e57f62;font-size:5px;font-style:normal;font-weight:800;letter-spacing:.13em}.design-style-retro .design-style-swatch i:nth-child(2){place-self:center;color:#343237;font-size:23px}.design-style-retro .design-style-swatch i:last-child{width:44px;height:10px;justify-self:center;background:linear-gradient(90deg,#f09a61,#ef7592,#67cdb4);border:2px solid #343237;border-radius:999px}

/* 80s selector: educational neo-retro geometry and offset ink shadows. */
.design-style-eighties{color:#30364a;background:#fbf7f0;border:3px solid #30364a;border-radius:18px;box-shadow:7px 7px 0 #30364a}
.design-style-eighties:hover{transform:translate(-2px,-2px);box-shadow:10px 10px 0 #30364a}.design-style-eighties .design-style-copy small{color:#656b7c}.design-style-eighties .design-style-check{color:#30364a;background:color-mix(in srgb,var(--preview-accent) 62%,#7ee787);border:2px solid #30364a;border-radius:7px}
.design-style-eighties .design-style-swatch{position:relative;padding:8px;grid-template-rows:14px 1fr 14px;background:#fff;border:3px solid #30364a;border-radius:12px;box-shadow:4px 4px 0 #30364a}.design-style-eighties .design-style-swatch i{color:#30364a;font-size:6px;font-style:normal;font-weight:900;letter-spacing:.1em}.design-style-eighties .design-style-swatch i:nth-child(2){place-self:center;color:color-mix(in srgb,var(--preview-primary) 62%,#55bd68);font-size:23px}.design-style-eighties .design-style-swatch i:last-child{width:42px;height:12px;justify-self:center;background:color-mix(in srgb,var(--preview-secondary) 50%,#b8ddeb);border:2px solid #30364a;border-radius:5px}

/* Calm selector: cool mist, soft glass, and quiet elevation. */
.design-style-calm{color:#475265;background:linear-gradient(145deg,#f5f8fb,#edf4f5);border:1px solid #dce6eb;border-radius:24px;box-shadow:0 15px 38px rgba(83,104,120,.1)}
.design-style-calm:hover{transform:translateY(-2px);box-shadow:0 19px 44px rgba(83,104,120,.14)}.design-style-calm .design-style-copy small{color:#778493}.design-style-calm .design-style-check{background:color-mix(in srgb,var(--preview-primary) 54%,#8eafc2)}
.design-style-calm .design-style-swatch{padding:9px;grid-template-rows:13px 1fr 13px;background:rgba(255,255,255,.72);border:1px solid #dbe5ea;border-radius:18px;box-shadow:0 8px 20px rgba(86,107,122,.1)}.design-style-calm .design-style-swatch i{color:#8392a0;font-size:5px;font-style:normal;letter-spacing:.14em}.design-style-calm .design-style-swatch i:nth-child(2){place-self:center;color:#56687a;font-size:22px;font-weight:650}.design-style-calm .design-style-swatch i:last-child{width:38px;height:9px;justify-self:center;background:linear-gradient(90deg,color-mix(in srgb,var(--preview-primary) 38%,#9ab9ca),color-mix(in srgb,var(--preview-accent) 30%,#afd6c5));border-radius:999px}

/* Shared new-style preview foundations. */
#previewViewport[data-design-style="soft"] :is(.website-preview,.social-posts-preview,.print-designs-preview){color:#4e4546;background:#fff8f6}
#previewViewport[data-design-style="soft"] .mini-site-nav{height:62px;color:#766b6c;background:#fff9f7;border-bottom:1px solid #efdedb}
#previewViewport[data-design-style="soft"] .mini-site-nav strong{color:#55494a;font-weight:650}
#previewViewport[data-design-style="soft"] .mini-hero{min-height:385px;padding:48px 22px;background:linear-gradient(135deg,#fff8f6,color-mix(in srgb,var(--preview-secondary) 20%,#fcefee));border-bottom:1px solid #efdeda}
#previewViewport[data-design-style="soft"] .mini-hero-copy{width:100%}#previewViewport[data-design-style="soft"] .mini-hero h3{margin:16px 0 13px;color:#514647;font-size:39px;font-weight:560;line-height:1.08;letter-spacing:-.045em}#previewViewport[data-design-style="soft"] .mini-hero h3 span{color:color-mix(in srgb,var(--preview-primary) 46%,#dc9ba6)}
#previewViewport[data-design-style="soft"] .mini-kicker{padding:5px 10px;color:#876d71;background:#fbe8e8;border-radius:999px}#previewViewport[data-design-style="soft"] .mini-hero p{color:#897b7c;line-height:1.75}#previewViewport[data-design-style="soft"] .mini-hero button{color:#4c4243;background:color-mix(in srgb,var(--preview-accent) 42%,#f5d34f);border:0;border-radius:999px;box-shadow:0 9px 20px rgba(114,80,75,.1)}
#previewViewport[data-design-style="soft"] .hero-art{width:100%;height:235px;border:8px solid rgba(255,255,255,.82);border-radius:22px;box-shadow:0 20px 42px rgba(102,72,71,.16);transform:none}#previewViewport[data-design-style="soft"] .hero-art::before{display:none}
#previewViewport[data-design-style="soft"] :is(.mini-content-section,.mini-about-section,.mini-collection-section,.mini-testimonials-preview,.mini-gallery-preview,.mini-contact-form-preview){padding:36px 20px;background:#fff8f6}#previewViewport[data-design-style="soft"] :is(.mini-content-section,.mini-about-section,.mini-collection-section,.mini-testimonials-preview,.mini-gallery-preview,.mini-contact-form-preview):nth-of-type(even){background:#fdf0ee}
#previewViewport[data-design-style="soft"] :is(.mini-service-card,.mini-collection-card,.mini-testimonial-card,.gallery-tile){background:#fff;border:1px solid #eeddd9;border-radius:18px;box-shadow:0 12px 28px rgba(101,72,70,.08)}#previewViewport[data-design-style="soft"] :is(.mini-service-card,.mini-collection-card).has-photo{padding:15px;border:7px solid #fff;border-radius:18px}#previewViewport[data-design-style="soft"] .mini-contact-section{color:#55494a;background:#f7e8e7}#previewViewport[data-design-style="soft"] :is(.mini-contact-section,.mini-contact-form-preview) button{background:color-mix(in srgb,var(--preview-primary) 50%,#d69aa4);border:0;border-radius:999px}
#previewViewport[data-design-style="soft"] .social-post{background:#fff8f6;border:1px solid #ead6d3;border-radius:20px;box-shadow:0 14px 30px rgba(99,71,68,.09)}#previewViewport[data-design-style="soft"] :is(.business-card-face,.letterhead-preview,.envelope-preview){background:#fff8f6;border:1px solid #ead6d3;border-radius:18px;box-shadow:0 16px 35px rgba(99,71,68,.11)}

#previewViewport[data-design-style="retro"] :is(.website-preview,.social-posts-preview,.print-designs-preview){color:#38363a;background:#fff9f3}
#previewViewport[data-design-style="retro"] .mini-site-nav{height:62px;background:#fffaf5;border-bottom:2px solid #f0b78f}#previewViewport[data-design-style="retro"] .mini-site-nav strong{color:#343238;font-weight:900}
#previewViewport[data-design-style="retro"] .mini-hero{min-height:380px;padding:42px 20px;background:radial-gradient(circle at 18% 18%,#ffe5d4 0 8%,transparent 9%),radial-gradient(circle at 84% 78%,#d8f4e7 0 10%,transparent 11%),#fff9f3;border-bottom:2px solid #efb58e}#previewViewport[data-design-style="retro"] .mini-hero-copy{width:100%}
#previewViewport[data-design-style="retro"] .mini-kicker{padding:5px 10px;color:#d86f4e;background:#fff1e5;border:1px solid #efbf9e;border-radius:999px}#previewViewport[data-design-style="retro"] .mini-hero h3{margin:16px 0 13px;color:#343238;font-size:39px;font-weight:850;line-height:1.03;letter-spacing:-.05em}#previewViewport[data-design-style="retro"] .mini-hero h3 span{color:#ee7e6e}#previewViewport[data-design-style="retro"] .mini-hero p{color:#716a69;line-height:1.75}
#previewViewport[data-design-style="retro"] .mini-hero button{color:#fff;background:color-mix(in srgb,var(--preview-primary) 48%,#f09054);border:2px solid #3b383d;border-radius:13px;box-shadow:4px 4px 0 #3b383d;font-weight:900}#previewViewport[data-design-style="retro"] .hero-art{width:100%;height:238px;border:3px solid #3b383d;border-radius:26px;box-shadow:7px 7px 0 #f3cab0;transform:none}#previewViewport[data-design-style="retro"] .hero-art::before{display:none}
#previewViewport[data-design-style="retro"] :is(.mini-content-section,.mini-about-section,.mini-collection-section,.mini-testimonials-preview,.mini-gallery-preview,.mini-contact-form-preview){padding:34px 19px;background:#fff9f3}#previewViewport[data-design-style="retro"] :is(.mini-service-card,.mini-collection-card,.mini-testimonial-card,.gallery-tile){background:#fff;border:2px solid #3b383d;border-radius:16px;box-shadow:4px 4px 0 #f3c4a5}#previewViewport[data-design-style="retro"] :is(.mini-service-card,.mini-collection-card).has-photo{padding:14px}
#previewViewport[data-design-style="retro"] .mini-stats-section{background:#fff0e4}#previewViewport[data-design-style="retro"] .mini-contact-section{color:#39363a;background:#dff4e9}#previewViewport[data-design-style="retro"] :is(.mini-contact-section,.mini-contact-form-preview) button{color:#fff;background:#ed875b;border:2px solid #39363a;border-radius:12px;box-shadow:4px 4px 0 #39363a}
#previewViewport[data-design-style="retro"] .social-post{background:#fff9f3;border:2px solid #3b383d;border-radius:18px;box-shadow:5px 5px 0 #f3c4a5}#previewViewport[data-design-style="retro"] :is(.business-card-face,.letterhead-preview,.envelope-preview){background:#fff9f3;border:2px solid #3b383d;border-radius:16px;box-shadow:7px 7px 0 #efb48d}

#previewViewport[data-design-style="eighties"] :is(.website-preview,.social-posts-preview,.print-designs-preview){color:#30364a;background:#fbf7f0}
#previewViewport[data-design-style="eighties"] .mini-site-nav{position:relative;z-index:3;height:66px;margin:9px 10px 8px;background:#fff;border:3px solid #30364a;border-radius:14px;box-shadow:5px 5px 0 #30364a}#previewViewport[data-design-style="eighties"] .mini-site-nav strong{color:#30364a;font-weight:950}
#previewViewport[data-design-style="eighties"] .mini-hero{min-height:400px;padding:14px 22px 36px;background:#fbf7f0;border-bottom:3px solid #30364a}#previewViewport[data-design-style="eighties"] .mini-hero-copy{width:100%}#previewViewport[data-design-style="eighties"] .mini-kicker{padding:5px 10px;color:#30364a;background:color-mix(in srgb,var(--preview-accent) 45%,#a7ef9e);border:2px solid #30364a;border-radius:999px;font-weight:900}
#previewViewport[data-design-style="eighties"] .mini-hero h3{margin:18px 0 13px;color:#30364a;font-size:41px;font-weight:950;line-height:1.02;letter-spacing:-.055em}#previewViewport[data-design-style="eighties"] .mini-hero h3 span{color:color-mix(in srgb,var(--preview-primary) 62%,#55bd68)}#previewViewport[data-design-style="eighties"] .mini-hero p{color:#666c7b;line-height:1.7}
#previewViewport[data-design-style="eighties"] .mini-hero button{color:#30364a;background:color-mix(in srgb,var(--preview-accent) 55%,#6fcf77);border:3px solid #30364a;border-radius:10px;box-shadow:5px 5px 0 #30364a;font-weight:950}#previewViewport[data-design-style="eighties"] .hero-art{width:100%;height:225px;border:3px solid #30364a;border-radius:14px;box-shadow:7px 7px 0 #30364a;transform:none}#previewViewport[data-design-style="eighties"] .hero-art::before{display:none}
#previewViewport[data-design-style="eighties"] :is(.mini-content-section,.mini-about-section,.mini-collection-section,.mini-testimonials-preview,.mini-gallery-preview,.mini-contact-form-preview){padding:34px 19px;background:#fbf7f0;border-bottom:3px solid #30364a}#previewViewport[data-design-style="eighties"] :is(.mini-service-card,.mini-collection-card,.mini-testimonial-card,.gallery-tile){background:#fff;border:3px solid #30364a;border-radius:12px;box-shadow:5px 5px 0 #30364a}#previewViewport[data-design-style="eighties"] :is(.mini-service-card,.mini-collection-card).has-photo{padding:14px}
#previewViewport[data-design-style="eighties"] .mini-stats-section{background:color-mix(in srgb,var(--preview-secondary) 35%,#bcdde8);border-block:3px solid #30364a}#previewViewport[data-design-style="eighties"] .mini-contact-section{color:#30364a;background:color-mix(in srgb,var(--preview-accent) 42%,#a9efa1);border-bottom:3px solid #30364a}#previewViewport[data-design-style="eighties"] :is(.mini-contact-section,.mini-contact-form-preview) button{color:#30364a;background:#fff;border:3px solid #30364a;border-radius:9px;box-shadow:5px 5px 0 #30364a;font-weight:950}
#previewViewport[data-design-style="eighties"] .social-post{background:#fbf7f0;border:3px solid #30364a;border-radius:14px;box-shadow:6px 6px 0 #30364a}#previewViewport[data-design-style="eighties"] :is(.business-card-face,.letterhead-preview,.envelope-preview){background:#fbf7f0;border:3px solid #30364a;border-radius:13px;box-shadow:8px 8px 0 #30364a}

#previewViewport[data-design-style="calm"] :is(.website-preview,.social-posts-preview,.print-designs-preview){color:#485468;background:#f3f7fa}
#previewViewport[data-design-style="calm"] .mini-site-nav{height:64px;color:#738092;background:rgba(248,251,253,.88);border-bottom:1px solid #dce6eb;box-shadow:0 8px 22px rgba(80,103,119,.07)}#previewViewport[data-design-style="calm"] .mini-site-nav strong{color:#4e596c;font-weight:750}
#previewViewport[data-design-style="calm"] .mini-hero{min-height:400px;padding:52px 23px;background:radial-gradient(circle at 18% 84%,rgba(181,220,205,.28),transparent 32%),radial-gradient(circle at 82% 24%,rgba(194,211,229,.38),transparent 36%),#f4f8fb;border-bottom:1px solid #dde7ec}#previewViewport[data-design-style="calm"] .mini-hero-copy{width:100%}
#previewViewport[data-design-style="calm"] .mini-kicker{padding:5px 10px;color:#68778a;background:rgba(255,255,255,.68);border:1px solid #dce6eb;border-radius:999px;box-shadow:0 5px 14px rgba(83,105,122,.07)}#previewViewport[data-design-style="calm"] .mini-hero h3{margin:18px 0 14px;color:#485468;font-size:39px;font-weight:650;line-height:1.08;letter-spacing:-.045em}#previewViewport[data-design-style="calm"] .mini-hero h3 span{color:color-mix(in srgb,var(--preview-primary) 38%,#8fa8bc)}#previewViewport[data-design-style="calm"] .mini-hero p{color:#748293;line-height:1.8}
#previewViewport[data-design-style="calm"] .mini-hero button{color:#fff;background:color-mix(in srgb,var(--preview-primary) 46%,#89aabd);border:0;border-radius:14px;box-shadow:0 10px 24px rgba(78,101,118,.16)}#previewViewport[data-design-style="calm"] .hero-art{width:100%;height:235px;border:1px solid rgba(255,255,255,.75);border-radius:25px;box-shadow:0 18px 45px rgba(80,103,119,.14);transform:none;opacity:.86}#previewViewport[data-design-style="calm"] .hero-art::before{display:none}
#previewViewport[data-design-style="calm"] :is(.mini-content-section,.mini-about-section,.mini-collection-section,.mini-testimonials-preview,.mini-gallery-preview,.mini-contact-form-preview){padding:36px 20px;background:#f4f8fb}#previewViewport[data-design-style="calm"] :is(.mini-content-section,.mini-about-section,.mini-collection-section,.mini-testimonials-preview,.mini-gallery-preview,.mini-contact-form-preview):nth-of-type(even){background:#edf4f5}
#previewViewport[data-design-style="calm"] :is(.mini-service-card,.mini-collection-card,.mini-testimonial-card,.gallery-tile){background:rgba(255,255,255,.8);border:1px solid #dce6eb;border-radius:20px;box-shadow:0 12px 30px rgba(81,104,121,.09)}#previewViewport[data-design-style="calm"] :is(.mini-service-card,.mini-collection-card).has-photo{padding:15px}
#previewViewport[data-design-style="calm"] .mini-stats-section{background:#edf4f5}#previewViewport[data-design-style="calm"] .mini-contact-section{color:#4c586a;background:#e8f1f3}#previewViewport[data-design-style="calm"] :is(.mini-contact-section,.mini-contact-form-preview) button{color:#fff;background:color-mix(in srgb,var(--preview-primary) 46%,#89aabd);border:0;border-radius:14px;box-shadow:0 9px 20px rgba(82,104,120,.14)}
#previewViewport[data-design-style="calm"] .social-post{background:rgba(255,255,255,.78);border:1px solid #dce6eb;border-radius:22px;box-shadow:0 14px 34px rgba(81,104,121,.1)}#previewViewport[data-design-style="calm"] :is(.business-card-face,.letterhead-preview,.envelope-preview){background:#f5f9fb;border:1px solid #d8e4e9;border-radius:20px;box-shadow:0 18px 40px rgba(81,104,121,.12)}

/* Full-bleed hero crops for the styles with wide media frames. */
#previewViewport[data-design-style="digital"] .hero-art,
#previewViewport[data-design-style="soft"] .hero-art,
#previewViewport[data-design-style="retro"] .hero-art,
#previewViewport[data-design-style="eighties"] .hero-art,
#previewViewport[data-design-style="calm"] .hero-art{background-repeat:no-repeat}

/* Hero layout chooser */
.hero-layout-block{padding:22px}.hero-layout-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}:is(.hero-layout-card,.custom-layout-card){position:relative;min-width:0;padding:13px;display:grid;gap:10px;cursor:pointer;background:#fff;border:1px solid #dde5e0;border-radius:14px;transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease}:is(.hero-layout-card,.custom-layout-card):hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--primary) 45%,#dde5e0);box-shadow:0 9px 22px rgba(25,55,39,.08)}:is(.hero-layout-card,.custom-layout-card).selected{border-color:var(--primary);box-shadow:0 0 0 2px color-mix(in srgb,var(--primary) 14%,transparent)}:is(.hero-layout-card,.custom-layout-card) input{position:absolute;opacity:0;pointer-events:none}:is(.hero-layout-card,.custom-layout-card) svg{width:100%;height:auto;color:#397357;background:#f4f8f5;border-radius:9px}:is(.hero-layout-card,.custom-layout-card) svg>rect,:is(.hero-layout-card,.custom-layout-card) svg>path{fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}:is(.hero-layout-card,.custom-layout-card) span{display:grid;gap:3px}:is(.hero-layout-card,.custom-layout-card) strong{font-size:13px}:is(.hero-layout-card,.custom-layout-card) small{color:var(--muted);font-size:11px;line-height:1.45}

.mini-brand-lockup{order:1;margin-right:auto;min-width:0;display:flex;flex-direction:column;align-items:flex-start;direction:auto}.mini-brand-lockup .preview-brand-name{margin:0;line-height:1.05}.mini-brand-lockup small{max-width:125px;margin-top:3px;overflow:hidden;color:color-mix(in srgb,var(--preview-text) 58%,transparent);font-size:5.4px;line-height:1.2;text-overflow:ellipsis;white-space:nowrap}.mini-brand-lockup .preview-brand-name.has-uploaded-logo{width:var(--uploaded-logo-width,70px);min-width:var(--uploaded-logo-width,70px);height:24px;min-height:24px;background-position:left center!important}.mini-brand-lockup:has(.has-uploaded-logo) small{max-width:var(--uploaded-logo-width,70px)}

#previewViewport[data-hero-layout="split"] .mini-hero{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(145px,.94fr)!important;align-items:center!important;text-align:start!important}#previewViewport[data-hero-layout="split"] .mini-hero-copy{width:100%!important;max-width:none!important;align-items:flex-start!important;text-align:start!important}#previewViewport[data-hero-layout="split"] .mini-hero :is(h3,p){max-width:none!important}#previewViewport[data-hero-layout="split"] .mini-hero-actions,#previewViewport[data-hero-layout="split"] .mini-trust-row{justify-content:flex-start!important}#previewViewport[data-hero-layout="split"] .hero-art{position:relative!important;inset:auto!important;display:block!important;width:100%!important;min-height:190px!important;height:230px!important;justify-self:stretch!important;opacity:1!important;transform:none!important}

#previewViewport[data-hero-layout="centered"] .mini-hero{display:flex!important;min-height:340px!important;align-items:center!important;justify-content:center!important;text-align:center!important}#previewViewport[data-hero-layout="centered"] .mini-hero-copy{width:min(88%,430px)!important;max-width:430px!important;display:flex!important;flex-direction:column!important;align-items:center!important;text-align:center!important}#previewViewport[data-hero-layout="centered"] .mini-hero :is(h3,p){max-width:100%!important}#previewViewport[data-hero-layout="centered"] .mini-hero-actions,#previewViewport[data-hero-layout="centered"] .mini-trust-row{justify-content:center!important}#previewViewport[data-hero-layout="centered"] .hero-art{display:none!important}

#previewViewport[data-hero-layout="overlay"] .mini-hero{position:relative!important;min-height:390px!important;padding:48px 24px!important;display:flex!important;align-items:center!important;background:none!important;text-align:start!important}#previewViewport[data-hero-layout="overlay"] .hero-art{position:absolute!important;z-index:0!important;inset:0!important;display:block!important;width:100%!important;height:100%!important;border:0!important;border-radius:0!important;box-shadow:none!important;opacity:1!important;transform:none!important;background-position:center!important;background-size:cover!important}#previewViewport[data-hero-layout="overlay"] .hero-art::before{display:none!important}#previewViewport[data-hero-layout="overlay"] .mini-hero::after{content:""!important;position:absolute!important;z-index:1!important;inset:0!important;display:block!important;background:linear-gradient(90deg,rgba(8,16,13,.82) 0%,rgba(8,16,13,.62) 48%,rgba(8,16,13,.16) 100%)!important;pointer-events:none}#previewViewport[data-hero-layout="overlay"] .mini-hero-copy{position:relative!important;z-index:2!important;width:min(72%,430px)!important;max-width:430px!important;text-align:start!important}#previewViewport[data-hero-layout="overlay"] .mini-hero :is(h3,p),#previewViewport[data-hero-layout="overlay"] .mini-trust-row{color:#fff!important;text-shadow:0 1px 12px rgba(0,0,0,.2)}#previewViewport[data-hero-layout="overlay"] .mini-hero p,#previewViewport[data-hero-layout="overlay"] .mini-trust-row{color:rgba(255,255,255,.82)!important}#previewViewport[data-hero-layout="overlay"] .mini-hero-actions,#previewViewport[data-hero-layout="overlay"] .mini-trust-row{justify-content:flex-start!important}

[dir="rtl"] #previewViewport[data-hero-layout="overlay"] .mini-hero::after{background:linear-gradient(270deg,rgba(8,16,13,.82) 0%,rgba(8,16,13,.62) 48%,rgba(8,16,13,.16) 100%)!important}
@media(max-width:700px){.hero-layout-options{grid-template-columns:1fr}:is(.hero-layout-card,.custom-layout-card){grid-template-columns:110px 1fr;align-items:center}:is(.hero-layout-card,.custom-layout-card) svg{width:110px}}

:is(.hero-layout-card,.custom-layout-card){padding-top:30px}.hero-layout-number{position:absolute;top:9px;inset-inline-start:11px;width:20px;height:20px;display:grid;place-items:center;color:var(--primary);background:color-mix(in srgb,var(--primary) 10%,white);border-radius:7px;font-size:10px;font-style:normal;font-weight:900}.section-heading{position:relative}.section-enable-control{margin-inline-start:auto;flex:0 0 auto}.field-enable-switch{display:inline-flex;align-items:center;gap:7px;cursor:pointer}.field-enable-switch input{position:absolute;opacity:0;pointer-events:none}.field-enable-switch>span{position:relative;width:42px;height:24px;display:block;background:#c9d0cc;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.07);transition:.2s}.field-enable-switch>span::after{content:"";position:absolute;top:3px;inset-inline-start:3px;width:18px;height:18px;background:#fff;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.18);transition:.2s}.field-enable-switch input:checked+span{background:var(--primary)}.field-enable-switch input:checked+span::after{transform:translateX(18px)}[dir="rtl"] .field-enable-switch input:checked+span::after{transform:translateX(-18px)}.field-enable-switch em{color:var(--primary);font-size:11px;font-style:normal;font-weight:800}.field-enable-switch.is-off em,.hero-field-group.is-disabled .field-enable-switch em{color:#8b9490}.section-tab.is-disabled{opacity:.56}.section-tab.is-disabled em{text-decoration:line-through}.form-section.section-disabled>:not(.section-heading){opacity:.42;pointer-events:none;filter:grayscale(.25)}

.hero-field-groups{display:grid;gap:14px}.hero-field-group{overflow:hidden;background:#fff;border:1px solid #dfe6e2;border-radius:18px;box-shadow:0 7px 20px rgba(28,53,40,.045)}.hero-field-group>header{position:relative;min-height:72px;padding:14px 16px;display:flex;align-items:flex-start;gap:14px;background:linear-gradient(145deg,#fff,#f7faf8)}.hero-accordion-toggle{min-width:0;flex:1;padding:0;display:flex;align-items:center;justify-content:space-between;gap:10px;text-align:start;background:none;border:0;cursor:pointer}.hero-accordion-toggle>span{display:grid;gap:4px}.hero-accordion-toggle strong{font-size:14px}.hero-accordion-toggle small{color:var(--muted);font-size:11px;line-height:1.45}.hero-accordion-toggle>i{font-style:normal;transition:transform .2s}.hero-field-group.is-collapsed .hero-accordion-toggle>i{transform:rotate(180deg)}.hero-field-group>header .field-enable-switch{margin-inline-start:auto}.hero-field-content{padding:0 16px 16px;border-top:1px solid #edf1ef}.hero-field-group.is-collapsed .hero-field-content{display:none}.hero-field-group.is-disabled .hero-field-content{opacity:.42;pointer-events:none}.hero-repeat-list{padding-top:14px;display:grid;gap:9px}.hero-repeat-row{display:grid;grid-template-columns:24px minmax(0,1fr) 34px;align-items:center;gap:8px}.hero-repeat-row>span{width:24px;height:24px;display:grid;place-items:center;color:var(--primary);background:color-mix(in srgb,var(--primary) 10%,white);border-radius:7px;font-size:10px;font-weight:900}.hero-repeat-row input,.hero-repeat-row select{min-width:0;height:42px;padding:0 11px;background:#fff;border:1px solid #dce4df;border-radius:10px;font:inherit}.hero-repeat-row>button,.hero-image-chip>button{width:30px;height:30px;display:grid;place-items:center;color:#a54444;background:#fff4f3;border:0;border-radius:8px;font-size:18px;cursor:pointer}.hero-button-row{grid-template-columns:24px minmax(0,1fr) minmax(130px,.7fr) 34px}.hero-add-item{margin-top:11px}.hero-image-list{padding-top:12px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.hero-image-chip{min-width:0;padding:7px;display:grid;grid-template-columns:48px minmax(0,1fr) 30px;align-items:center;gap:8px;background:#f6f9f7;border:1px solid #e3e9e5;border-radius:12px}.hero-image-chip img{width:48px;height:42px;object-fit:cover;border-radius:8px}.hero-image-chip span{overflow:hidden;font-size:11px;text-overflow:ellipsis;white-space:nowrap}

.mini-hero-paragraphs{position:relative;z-index:3;display:grid;gap:5px}.mini-hero-paragraphs p{margin:0!important}.mini-hero h3{display:grid;gap:2px}.mini-hero h3 span{display:block;overflow-wrap:anywhere}.mini-hero h3 .hero-title-2{font-size:.7em;font-weight:650;opacity:.9}.mini-hero h3 .hero-title-3{font-size:.52em;font-weight:550;opacity:.82}.mini-hero h3 .hero-title-4{font-size:.42em;font-weight:500;opacity:.76}.mini-hero h3[data-title-count="3"],.mini-hero h3[data-title-count="4"]{font-size:clamp(18px,3.7vw,34px)!important;line-height:1.08!important}.mini-hero-actions{flex-wrap:wrap}.hero-art[hidden]{display:none!important}.hero-slider-arrow,.hero-slider-dots{position:absolute;z-index:5}.hero-slider-arrow{top:50%;width:24px;height:34px;padding:0!important;display:grid;place-items:center;color:#fff!important;background:rgba(8,16,13,.52)!important;border:1px solid rgba(255,255,255,.35)!important;border-radius:9px!important;box-shadow:none!important;transform:translateY(-50%)}.hero-slider-prev{inset-inline-start:8px}.hero-slider-next{inset-inline-end:8px}.hero-slider-dots{inset-inline:0;bottom:9px;display:flex;justify-content:center;gap:5px}.hero-slider-dots button{width:5px!important;height:5px!important;padding:0!important;background:rgba(255,255,255,.62)!important;border:0!important;border-radius:50%!important;box-shadow:0 1px 4px rgba(0,0,0,.2)!important}.hero-slider-dots button.active{width:15px!important;border-radius:999px!important;background:#fff!important}#previewViewport:not([data-design-style="bold"]):not([data-design-style="digital"]):not([data-design-style="technologic"]):not([data-design-style="retro"]):not([data-design-style="eighties"]) .hero-slider-arrow{display:none!important}#previewViewport:is([data-design-style="bold"],[data-design-style="digital"],[data-design-style="technologic"],[data-design-style="retro"],[data-design-style="eighties"]) .hero-slider-dots{display:none!important}

#previewViewport[data-hero-layout="centered"] .mini-hero{flex-direction:column!important;gap:24px!important}#previewViewport[data-hero-layout="centered"] .hero-art{position:relative!important;inset:auto!important;width:min(82%,360px)!important;height:190px!important;min-height:190px!important;display:block!important;flex:0 0 190px!important;border-radius:24px!important;opacity:1!important;transform:none!important}#previewViewport[data-hero-layout="centered"] .hero-art[hidden]{display:none!important}#previewViewport[data-hero-layout="centered"] .mini-hero-paragraphs{justify-items:center}

@media(max-width:700px){.section-heading{align-items:flex-start}.section-enable-control{position:absolute;top:12px;inset-inline-end:12px}.section-heading>div:nth-child(2){padding-inline-end:74px}.hero-field-group>header{padding-top:16px;flex-direction:column}.hero-field-group>header .field-enable-switch{position:absolute;top:14px;inset-inline-end:14px}.hero-accordion-toggle>span{padding-inline-end:82px}.hero-button-row{grid-template-columns:24px minmax(0,1fr) 34px}.hero-button-row select{grid-column:2/3}.hero-image-list{grid-template-columns:1fr}}

/* Hero editor refinements */
:is(.hero-layout-card,.custom-layout-card){padding:13px}:is(.hero-layout-card,.custom-layout-card)>span{display:flex;align-items:center;gap:8px}.hero-layout-number{position:static;inset:auto;flex:0 0 20px}:is(.hero-layout-card,.custom-layout-card)>span strong{font-size:13px}.hero-required-item{width:30px;height:30px;display:grid;place-items:center;color:var(--primary);font-size:18px;font-style:normal}.mini-hero[hidden]{display:none!important}.mini-hero-paragraphs{margin-top:16px}.mini-hero-actions{margin-top:20px}.mini-hero h3+.mini-hero-paragraphs{padding-top:2px}.hero-slider-arrow{display:none!important}.hero-slider-dots{bottom:12px;gap:7px}.hero-slider-dots button{width:7px!important;height:7px!important}.hero-slider-dots button.active{width:22px!important}#previewViewport:is([data-design-style="bold"],[data-design-style="digital"],[data-design-style="technologic"],[data-design-style="retro"],[data-design-style="eighties"]) .hero-slider-dots{display:flex!important}
#previewViewport[data-hero-layout="split"][data-hero-has-image="false"] .mini-hero{grid-template-columns:1fr!important}#previewViewport[data-hero-layout="split"][data-hero-has-image="false"] .mini-hero-copy{max-width:760px!important}#previewViewport[data-hero-layout="overlay"][data-hero-has-image="false"] .mini-hero{background:linear-gradient(145deg,var(--preview-secondary),#fff)!important}#previewViewport[data-hero-layout="overlay"][data-hero-has-image="false"] .mini-hero::after{display:none!important}#previewViewport[data-hero-layout="overlay"][data-hero-has-image="false"] .mini-hero-copy{width:100%!important;max-width:760px!important}#previewViewport[data-hero-layout="overlay"][data-hero-has-image="false"] .mini-hero :is(h3,p){color:var(--preview-text)!important;text-shadow:none!important}

.landing-cta-note{margin:10px 0 0;color:#68736c;font-size:10px;line-height:1.7}.project-type-badge{width:max-content;padding:5px 8px;display:inline-flex;align-items:center;gap:5px;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) 20%,var(--line));border-radius:999px;font-size:9px;font-weight:850;line-height:1}.project-type-badge .ui-icon{width:15px;height:15px}.project-identity-editor>.project-type-badge{align-self:center}.account-project-option>.project-type-badge{margin-inline:2px;align-self:center}.project-card-number-group .project-type-badge{margin-top:7px}

.content-field-card{margin:0 0 12px;overflow:hidden;background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:0 5px 18px rgba(24,48,35,.04)}.content-field-card>header{min-height:58px;padding:11px 13px;display:flex;align-items:center;gap:12px;background:color-mix(in srgb,var(--surface-subtle) 72%,var(--surface))}.content-field-toggle{min-width:0;flex:1;padding:0;display:flex;align-items:center;justify-content:space-between;gap:10px;color:var(--ink);background:none;border:0;text-align:start;cursor:pointer}.content-field-toggle strong{overflow:hidden;font-size:12px;text-overflow:ellipsis;white-space:nowrap}.content-field-toggle i{font-style:normal;transition:transform .2s}.content-field-card.is-collapsed .content-field-toggle i{transform:rotate(180deg)}.content-field-body{padding:14px;border-top:1px solid var(--line)}.content-field-body>.field,.content-field-body>.contact-group,.content-field-body>.product-category-manager,.content-field-body>.upload-zone{margin:0}.content-field-card.is-collapsed .content-field-body{display:none}.content-field-card.is-disabled .content-field-body{opacity:.4;pointer-events:none}.content-field-card.is-disabled>header{background:color-mix(in srgb,var(--surface-subtle) 88%,var(--surface))}.repeat-item-fold-heading{cursor:pointer}.repeat-item-fold-heading::after{content:'⌃';margin-inline-start:auto;color:var(--muted);font-size:13px;transition:transform .2s}.repeat-item.is-collapsed .repeat-item-fold-heading::after{transform:rotate(180deg)}.repeat-item.is-collapsed>:not(.repeat-item-heading):not(.testimonial-item-actions){display:none!important}
@media(max-width:700px){.content-field-card>header{align-items:flex-start}.content-field-card>header>.field-enable-switch{flex-direction:column;gap:3px}.content-field-card>header>.field-enable-switch em{font-size:9px}.project-identity-editor>.project-type-badge{order:2}}

/* Optional light surfaces for the two dark-first technology styles. */
.design-style-technologic.is-light-tone{color:#172331;background:#f4fbff;border-color:#7abac9;box-shadow:0 12px 28px rgba(54,111,126,.12)}
.design-style-technologic.is-light-tone .design-style-swatch{background:#fff;border-color:#9bd1dc}.design-style-technologic.is-light-tone .design-style-copy small{color:#687783}
.design-style-digital.is-light-tone{color:#171a22;background:#f7f8fb;border-color:#b8bdc9;box-shadow:0 14px 32px rgba(52,57,69,.1)}
.design-style-digital.is-light-tone .design-style-swatch{background:#fff;border-color:#cfd3dc}.design-style-digital.is-light-tone .design-style-copy small{color:#717682}

#previewViewport[data-design-style="technologic"][data-style-tone="light"]{background:#eef8fb;border-color:#7abac9;box-shadow:0 0 18px rgba(63,133,149,.12);scrollbar-color:#6a9eaa #eef8fb}
#previewViewport[data-design-style="technologic"][data-style-tone="light"] :is(.website-preview,.social-posts-preview,.print-designs-preview){color:#16232d;background-color:#f7fcfd;background-image:linear-gradient(rgba(46,126,143,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(46,126,143,.08) 1px,transparent 1px)}
#previewViewport[data-design-style="technologic"][data-style-tone="light"] :is(.mini-browser-bar,.mini-site-topbar,.mini-site-nav,.mini-hero,.mini-content-section,.mini-collection-section,.mini-testimonials-preview,.mini-gallery-preview,.mini-contact-form-preview,.mini-contact-section,.mini-footer){color:#24333e;background-color:#fff;border-color:#cbdde2}
#previewViewport[data-design-style="technologic"][data-style-tone="light"] :is(.mini-hero h3,.mini-content-section h4,.mini-collection-section h4,:is(.mini-testimonials-preview,.mini-gallery-preview) h4,.mini-contact-form-preview h4){color:#14242e}
#previewViewport[data-design-style="technologic"][data-style-tone="light"] :is(.mini-hero p,.mini-contact-section p){color:#687781}
#previewViewport[data-design-style="technologic"][data-style-tone="light"] :is(.mini-service-card,.mini-collection-card,.mini-testimonial-card,.gallery-tile,.mini-feature-row span){color:#17242e;background:#f8fcfd;border-color:#bcd3d9;box-shadow:none}
#previewViewport[data-design-style="technologic"][data-style-tone="light"] :is(.mini-service-card,.mini-collection-card,.mini-testimonial-card,.gallery-tile) :is(strong,p){color:#17242e}
#previewViewport[data-design-style="technologic"][data-style-tone="light"] :is(.mini-service-card,.mini-collection-card,.mini-testimonial-card,.gallery-tile) :is(small,span){color:#687781}
#previewViewport[data-design-style="technologic"][data-style-tone="light"] :is(.mini-site-socials,.mini-top-socials) span{color:#294852}

#previewViewport[data-design-style="digital"][data-style-tone="light"]{background:#eef0f5;border-color:#c9cdd7;box-shadow:inset 0 1px 7px rgba(54,59,70,.08);scrollbar-color:#858d9a #eef0f5}
#previewViewport[data-design-style="digital"][data-style-tone="light"] :is(.website-preview,.social-posts-preview,.print-designs-preview){color:#181b22;background:#f7f8fb}
#previewViewport[data-design-style="digital"][data-style-tone="light"] :is(.mini-browser-bar,.mini-site-topbar,.mini-site-nav,.mini-hero,.mini-content-section,.mini-about-section,.mini-why-section,.mini-journey-section,.mini-collection-section,.mini-testimonials-preview,.mini-gallery-preview,.mini-contact-form-preview,.mini-contact-section,.mini-footer){color:#23262e;background-color:#fff;border-color:#d9dce3}
#previewViewport[data-design-style="digital"][data-style-tone="light"] .mini-hero{background:radial-gradient(circle at 20% 36%,color-mix(in srgb,var(--preview-primary) 10%,transparent),transparent 36%),radial-gradient(circle at 82% 64%,color-mix(in srgb,var(--preview-accent) 9%,transparent),transparent 34%),#fafbfc}
#previewViewport[data-design-style="digital"][data-style-tone="light"] :is(.mini-hero h3,.mini-content-section h4,.mini-about-section h4,.mini-collection-section h4,:is(.mini-testimonials-preview,.mini-gallery-preview) h4,.mini-contact-form-preview h4){color:#151820}
#previewViewport[data-design-style="digital"][data-style-tone="light"] :is(.mini-hero p,.mini-contact-section p){color:#737783}
#previewViewport[data-design-style="digital"][data-style-tone="light"] :is(.mini-service-card,.mini-collection-card,.mini-testimonial-card,.gallery-tile,.mini-feature-row span,.mini-detail-list span){color:#1d2028;background:#f8f9fb;border-color:#d7dae1;box-shadow:0 8px 20px rgba(49,54,66,.07)}
#previewViewport[data-design-style="digital"][data-style-tone="light"] :is(.mini-service-card,.mini-collection-card,.mini-testimonial-card,.gallery-tile) :is(strong,h5){color:#1a1d24}
#previewViewport[data-design-style="digital"][data-style-tone="light"] :is(.mini-service-card,.mini-collection-card,.mini-testimonial-card,.gallery-tile) :is(small,p,span){color:#747986}
#previewViewport[data-design-style="digital"][data-style-tone="light"] :is(.mini-site-socials,.mini-top-socials) span{color:#333844}

/* Keep selection affordances visible and preserve image-card contrast in light modes. */
.design-style-card:not(.selected) .design-style-check{opacity:1!important;color:transparent!important;background:transparent!important;border-color:color-mix(in srgb,var(--ink) 35%,var(--line))!important;box-shadow:none!important}
#previewViewport[data-design-style="technologic"][data-style-tone="light"] :is(.mini-service-card,.mini-collection-card).has-photo,
#previewViewport[data-design-style="digital"][data-style-tone="light"] :is(.mini-service-card,.mini-collection-card).has-photo{color:#fff;background-color:#151820}
#previewViewport[data-design-style="technologic"][data-style-tone="light"] :is(.mini-service-card,.mini-collection-card).has-photo :is(strong,h5,small,p,span,b,i),
#previewViewport[data-design-style="digital"][data-style-tone="light"] :is(.mini-service-card,.mini-collection-card).has-photo :is(strong,h5,small,p,span,b,i){color:#fff;text-shadow:0 1px 5px rgba(0,0,0,.68)}
#previewViewport[data-design-style="technologic"][data-style-tone="dark"] .mini-about-section h4{color:#000!important;text-shadow:none}
#previewViewport[data-design-style="digital"][data-style-tone="light"] .mini-site-nav strong{color:#111!important;text-shadow:none}

/* Light variants extend across website, social posts, and printable stationery. */
#previewViewport[data-design-style="technologic"][data-style-tone="light"] .social-posts-preview{background:#eaf5f7;background-image:linear-gradient(rgba(46,126,143,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(46,126,143,.07) 1px,transparent 1px);background-size:24px 24px}
#previewViewport[data-design-style="technologic"][data-style-tone="light"] .social-post{color:#172631;background:#fff;background-image:none;border-color:#bdd4da;box-shadow:0 10px 24px rgba(48,103,116,.1)}
#previewViewport[data-design-style="technologic"][data-style-tone="light"] .social-post :is(h3,h4,strong){color:#14242e}
#previewViewport[data-design-style="technologic"][data-style-tone="light"] .social-post :is(p,span){color:#60717b}
#previewViewport[data-design-style="technologic"][data-style-tone="light"] .social-post :is(small,.social-post-number){color:#28798b;text-shadow:none}
#previewViewport[data-design-style="technologic"][data-style-tone="light"] .social-post-services>div span{color:#30444e;background:#f5fafb;border-color:#bdd4da;border-inline-start-color:#2c8da0}
#previewViewport[data-design-style="technologic"][data-style-tone="light"] :is(.social-post-proof,.social-post-contact){background:#e1f0f3}
#previewViewport[data-design-style="technologic"][data-style-tone="light"] .print-designs-preview{color:#172631;background:#eaf5f7;background-image:linear-gradient(135deg,rgba(46,126,143,.08),transparent 42%)}
#previewViewport[data-design-style="technologic"][data-style-tone="light"] :is(.business-card-face,.letterhead-preview,.envelope-preview){color:#172631;background:#fff;border-color:#bfd6dc;box-shadow:0 18px 38px rgba(48,103,116,.13)}
#previewViewport[data-design-style="technologic"][data-style-tone="light"] .business-card-face{background:linear-gradient(135deg,#fff 0 68%,#dff0f3 68%)}
#previewViewport[data-design-style="technologic"][data-style-tone="light"] :is(.business-card-logo,.business-card-person h3,.letterhead-preview strong,.envelope-preview strong){color:#17323d}
#previewViewport[data-design-style="technologic"][data-style-tone="light"] :is(.business-card-contact span,.letterhead-preview span,.envelope-preview span){color:#657780}
#previewViewport[data-design-style="technologic"][data-style-tone="light"] .business-card-contact i{color:#fff;background:#2c8394}
#previewViewport[data-design-style="technologic"][data-style-tone="light"] .business-card-qr{color:#245d69;background:#fff;border-color:#b8d1d7;box-shadow:none}
#previewViewport[data-design-style="technologic"][data-style-tone="light"] :is(.business-card-edge,.business-card-orbit,.envelope-preview i){background:#cfe8ed;border-color:#2c8394;opacity:.72}
#previewViewport[data-design-style="technologic"][data-style-tone="light"] .letterhead-lines i{background:#dce9ec}

#previewViewport[data-design-style="digital"][data-style-tone="light"] .social-posts-preview{background:#eef0f5}
#previewViewport[data-design-style="digital"][data-style-tone="light"] .social-post{color:#20242d;background:#fff;background-image:none;border-color:#d3d6de;box-shadow:0 12px 26px rgba(55,60,72,.1)}
#previewViewport[data-design-style="digital"][data-style-tone="light"] .social-post :is(h3,h4,strong){color:#171a21}
#previewViewport[data-design-style="digital"][data-style-tone="light"] .social-post :is(p,span){color:#686d79}
#previewViewport[data-design-style="digital"][data-style-tone="light"] .social-post :is(small,.social-post-number){color:#6557a9}
#previewViewport[data-design-style="digital"][data-style-tone="light"] .social-post-services>div span{color:#343844;background:#f5f6f9;border-color:#d7d9e1;border-inline-start-color:#7565bf}
#previewViewport[data-design-style="digital"][data-style-tone="light"] :is(.social-post-proof,.social-post-contact){background:linear-gradient(145deg,#ece9fa,#e2f3f5)}
#previewViewport[data-design-style="digital"][data-style-tone="light"] .print-designs-preview{color:#20242d;background:radial-gradient(circle at 18% 15%,rgba(117,101,191,.12),transparent 30%),#eef0f5}
#previewViewport[data-design-style="digital"][data-style-tone="light"] :is(.business-card-face,.letterhead-preview,.envelope-preview){color:#20242d;background:#fff;border-color:#d5d8e0;box-shadow:0 18px 40px rgba(55,60,72,.13)}
#previewViewport[data-design-style="digital"][data-style-tone="light"] .business-card-face{background:linear-gradient(135deg,#fff 0 68%,#eceafa 68%)}
#previewViewport[data-design-style="digital"][data-style-tone="light"] :is(.business-card-logo,.business-card-person h3,.letterhead-preview strong,.envelope-preview strong){color:#171a21}
#previewViewport[data-design-style="digital"][data-style-tone="light"] :is(.business-card-contact span,.letterhead-preview span,.envelope-preview span){color:#6b707c}
#previewViewport[data-design-style="digital"][data-style-tone="light"] .business-card-contact i{color:#fff;background:linear-gradient(135deg,#7565bf,#4b9daf)}
#previewViewport[data-design-style="digital"][data-style-tone="light"] .business-card-qr{color:#5d4fa5;background:#fff;border-color:#d3d5df;box-shadow:none}
#previewViewport[data-design-style="digital"][data-style-tone="light"] :is(.business-card-edge,.business-card-orbit,.envelope-preview i){background:#e3dffa;border-color:#7565bf;opacity:.72}
#previewViewport[data-design-style="digital"][data-style-tone="light"] .letterhead-lines i{background:#e2e4e9}

/* Keep the chosen project palette visible across light social and printable previews. */
#previewViewport[data-design-style="technologic"][data-style-tone="light"] .social-posts-preview{background-color:color-mix(in srgb,var(--preview-secondary) 34%,#fff);background-image:linear-gradient(color-mix(in srgb,var(--preview-primary) 10%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--preview-primary) 10%,transparent) 1px,transparent 1px)}
#previewViewport[data-design-style="technologic"][data-style-tone="light"] .social-post{border-color:color-mix(in srgb,var(--preview-primary) 34%,#d8e0e4)}
#previewViewport[data-design-style="technologic"][data-style-tone="light"] .social-post :is(small,.social-post-number){color:color-mix(in srgb,var(--preview-primary) 76%,#18323a)}
#previewViewport[data-design-style="technologic"][data-style-tone="light"] .social-post-services>div span{border-color:color-mix(in srgb,var(--preview-primary) 25%,#d8e0e4);border-inline-start-color:var(--preview-accent)}
#previewViewport[data-design-style="technologic"][data-style-tone="light"] :is(.social-post-proof,.social-post-contact){background:color-mix(in srgb,var(--preview-secondary) 58%,#fff)}
#previewViewport[data-design-style="technologic"][data-style-tone="light"] .print-designs-preview{background:linear-gradient(135deg,color-mix(in srgb,var(--preview-accent) 13%,transparent),transparent 42%),color-mix(in srgb,var(--preview-secondary) 34%,#fff)}
#previewViewport[data-design-style="technologic"][data-style-tone="light"] :is(.business-card-face,.letterhead-preview,.envelope-preview){border-color:color-mix(in srgb,var(--preview-primary) 32%,#d8e0e4)}
#previewViewport[data-design-style="technologic"][data-style-tone="light"] .business-card-face{background:linear-gradient(135deg,#fff 0 68%,color-mix(in srgb,var(--preview-secondary) 62%,#fff) 68%)}
#previewViewport[data-design-style="technologic"][data-style-tone="light"] :is(.business-card-logo,.business-card-person h3,.letterhead-preview strong,.envelope-preview strong){color:color-mix(in srgb,var(--preview-primary) 78%,#172631)}
#previewViewport[data-design-style="technologic"][data-style-tone="light"] .business-card-contact i{background:var(--preview-primary)}
#previewViewport[data-design-style="technologic"][data-style-tone="light"] .business-card-qr{color:var(--preview-primary);border-color:color-mix(in srgb,var(--preview-primary) 28%,#d8e0e4)}
#previewViewport[data-design-style="technologic"][data-style-tone="light"] :is(.business-card-edge,.business-card-orbit,.envelope-preview i){background:color-mix(in srgb,var(--preview-accent) 35%,#fff);border-color:var(--preview-primary)}
#previewViewport[data-design-style="technologic"][data-style-tone="light"] .letterhead-preview header{border-bottom-color:var(--preview-primary)}

#previewViewport[data-design-style="digital"][data-style-tone="light"] .social-posts-preview{background:radial-gradient(circle at 16% 12%,color-mix(in srgb,var(--preview-accent) 13%,transparent),transparent 30%),color-mix(in srgb,var(--preview-secondary) 28%,#fff)}
#previewViewport[data-design-style="digital"][data-style-tone="light"] .social-post{border-color:color-mix(in srgb,var(--preview-primary) 26%,#d8dae2)}
#previewViewport[data-design-style="digital"][data-style-tone="light"] .social-post :is(small,.social-post-number){color:color-mix(in srgb,var(--preview-primary) 74%,#353044)}
#previewViewport[data-design-style="digital"][data-style-tone="light"] .social-post-services>div span{border-color:color-mix(in srgb,var(--preview-primary) 22%,#d8dae2);border-inline-start-color:var(--preview-accent)}
#previewViewport[data-design-style="digital"][data-style-tone="light"] :is(.social-post-proof,.social-post-contact){background:linear-gradient(145deg,color-mix(in srgb,var(--preview-secondary) 62%,#fff),color-mix(in srgb,var(--preview-accent) 18%,#fff))}
#previewViewport[data-design-style="digital"][data-style-tone="light"] .print-designs-preview{background:radial-gradient(circle at 18% 15%,color-mix(in srgb,var(--preview-accent) 15%,transparent),transparent 30%),color-mix(in srgb,var(--preview-secondary) 28%,#fff)}
#previewViewport[data-design-style="digital"][data-style-tone="light"] :is(.business-card-face,.letterhead-preview,.envelope-preview){border-color:color-mix(in srgb,var(--preview-primary) 24%,#d8dae2)}
#previewViewport[data-design-style="digital"][data-style-tone="light"] .business-card-face{background:linear-gradient(135deg,#fff 0 68%,color-mix(in srgb,var(--preview-secondary) 60%,#fff) 68%)}
#previewViewport[data-design-style="digital"][data-style-tone="light"] :is(.business-card-logo,.business-card-person h3,.letterhead-preview strong,.envelope-preview strong){color:color-mix(in srgb,var(--preview-primary) 76%,#171a21)}
#previewViewport[data-design-style="digital"][data-style-tone="light"] .business-card-contact i{background:linear-gradient(135deg,var(--preview-primary),var(--preview-accent))}
#previewViewport[data-design-style="digital"][data-style-tone="light"] .business-card-qr{color:var(--preview-primary);border-color:color-mix(in srgb,var(--preview-primary) 25%,#d8dae2)}
#previewViewport[data-design-style="digital"][data-style-tone="light"] :is(.business-card-edge,.business-card-orbit,.envelope-preview i){background:color-mix(in srgb,var(--preview-accent) 32%,#fff);border-color:var(--preview-primary)}
#previewViewport[data-design-style="digital"][data-style-tone="light"] .letterhead-preview header{border-bottom-color:var(--preview-primary)}

#websitePreview :is(.mini-hero,.mini-about-section,.mini-content-section,.mini-collection-section,.mini-testimonials-preview,.mini-gallery-preview,.mini-contact-details-preview,.mini-contact-form-preview)[hidden]{display:none!important}
#websitePreview .mini-map-illustration[hidden],#websitePreview .mini-topbar span[hidden]{display:none!important}
#previewViewport .hero-art{background-position:center,var(--hero-image-position,center)!important;background-size:100% 100%,var(--hero-image-size,cover)!important}
.repeat-item-fold-heading{gap:8px}.repeat-item-fold-heading::after{order:1;margin-inline-start:auto}.repeat-item-fold-heading>.remove-item{order:2;flex:0 0 auto}.repeat-item.is-collapsed>:not(.repeat-item-heading){display:none!important}


.project-identity-editor{grid-template-columns:52px auto minmax(0,1.35fr) minmax(0,1fr) 135px}
@media(max-width:900px){.project-identity-editor{grid-template-columns:52px auto 1fr}.builder-brand-field,.profession-switcher{grid-column:1/-1}}

/* Project identity badges and responsive first row */
.project-identity-editor{grid-template-columns:52px 52px minmax(220px,1.35fr) minmax(190px,1fr);align-items:stretch}
.project-identity-editor>.project-type-badge{width:52px;height:74px;padding:7px 4px;display:grid;place-items:center;align-content:center;gap:3px;background:var(--surface);border:1px solid color-mix(in srgb,var(--meta-blue) 28%,var(--line));border-radius:14px;font-size:7px;text-align:center;box-shadow:0 8px 22px rgba(19,122,67,.1)}
.project-identity-editor>.project-type-badge .ui-icon{width:27px;height:27px}.project-identity-editor>.project-type-badge b{font-size:8px}
.account-project-option>.project-type-badge{width:34px;height:34px;padding:0;flex:0 0 34px;display:grid;place-items:center;color:var(--meta-blue);background:transparent;border:0;border-radius:0}.account-project-option>.project-type-badge .ui-icon{width:30px;height:30px}.account-project-option>.project-type-badge b{display:none}
.project-card-number-group>.project-type-badge{width:62px;height:62px;margin:0;padding:6px 4px;display:grid;place-items:center;align-content:center;gap:2px;background:var(--surface);border:1px solid color-mix(in srgb,var(--meta-blue) 28%,var(--line));border-radius:17px;text-align:center;box-shadow:0 9px 22px rgba(19,122,67,.1)}.project-card-number-group>.project-type-badge .ui-icon{width:28px;height:28px}.project-card-number-group>.project-type-badge b{font-size:7px}
@media(max-width:900px){.project-identity-editor{grid-template-columns:52px 52px minmax(0,1fr)}.builder-brand-field{grid-column:3}.profession-switcher{grid-column:1/-1}}
@media(max-width:560px){.project-identity-editor{grid-template-columns:52px 52px minmax(0,1fr)}.builder-project-number{grid-column:1}.project-identity-editor>.project-type-badge{grid-column:2}.builder-brand-field{grid-column:3!important}.profession-switcher{grid-column:1/-1}}

/* Contact address and map controls */
.address-contact-entry{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:9px}.address-contact-entry>.input-with-icon{grid-column:1}.address-contact-entry>.remove-contact-button{grid-column:2;grid-row:1}.map-link-row{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:9px}.map-link-row.is-disabled .map-link-field{opacity:.42}.map-enable-switch{padding:6px 8px;background:var(--surface);border:1px solid var(--line);border-radius:10px}.map-enable-switch>span{width:36px;height:21px}.map-enable-switch>span::after{width:15px;height:15px}.map-enable-switch input:checked+span::after{transform:translateX(15px)}[dir="rtl"] .map-enable-switch input:checked+span::after{transform:translateX(-15px)}

/* Hero controls and preview typography */
.hero-button-row{grid-template-columns:24px minmax(150px,1fr) minmax(145px,.8fr) auto 34px;align-items:end}.hero-button-control,.hero-external-link-field{min-width:0;display:grid;gap:4px}.hero-button-control small,.hero-external-link-field small{color:var(--muted);font-size:9px;font-weight:800}.hero-external-link-toggle{width:auto!important;height:42px!important;padding:0 11px!important;color:var(--meta-blue)!important;background:color-mix(in srgb,var(--meta-blue) 7%,var(--surface))!important;border:1px dashed color-mix(in srgb,var(--meta-blue) 35%,var(--line))!important;border-radius:10px!important;font-size:10px!important}.hero-external-link-field{grid-column:2/5}.hero-external-link-field[hidden]{display:none}.mini-explore-button{text-decoration:none}
#previewViewport .mini-hero h3{font-size:clamp(17px,3.25vw,29px)!important}.landing-screen .landing-hero h1 em{font-size:.62em}.landing-screen .landing-price-button{width:auto;min-width:0;padding-inline:22px}.landing-cta-note{line-height:1.55}
@media(max-width:700px){.hero-button-row{grid-template-columns:24px minmax(0,1fr) 34px}.hero-button-control,.hero-external-link-toggle,.hero-external-link-field{grid-column:2}.hero-button-row>.hero-required-item,.hero-button-row>[data-remove-hero-item]{grid-column:3;grid-row:1}}

/* Desktop-only field focus glow */
@media(min-width:901px){}
@media(max-width:900px){}

/* Repeat fields and detailed preview cards */
.testimonial-entry-grid{grid-template-columns:minmax(0,.7fr) minmax(170px,1.3fr)}
.mini-detail-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.mini-detail-list .mini-detail-item{min-width:0;padding:9px;display:flex;align-items:flex-start;gap:7px;background:color-mix(in srgb,#fff 86%,var(--preview-secondary));border:1px solid color-mix(in srgb,var(--preview-primary) 18%,transparent);border-radius:10px}.mini-detail-item>i{width:20px;height:20px;flex:0 0 20px;display:grid;place-items:center;color:#fff;background:var(--preview-primary);border-radius:6px;font-size:8px;font-style:normal}.mini-detail-item>div{min-width:0;display:grid;gap:3px}.mini-detail-item b{color:var(--preview-primary);font-size:6.5px}.mini-detail-item span{padding:0!important;background:none!important;border:0!important;font-size:6px;overflow-wrap:anywhere}

/* Bold Retro overlay extends behind the header */
#previewViewport[data-design-style="retro"][data-hero-layout="overlay"] .website-preview{background-image:var(--hero-background-image);background-position:center top;background-size:100% 452px;background-repeat:no-repeat}
#previewViewport[data-design-style="retro"][data-hero-layout="overlay"] .mini-site-topbar{background:rgba(255,250,245,.76);backdrop-filter:blur(7px)}#previewViewport[data-design-style="retro"][data-hero-layout="overlay"] .mini-site-nav{position:relative;z-index:3;margin:7px 9px;background:rgba(255,250,245,.82);border:2px solid #3b383d;border-radius:16px;box-shadow:4px 4px 0 rgba(59,56,61,.3)}#previewViewport[data-design-style="retro"][data-hero-layout="overlay"] .hero-art{background-color:transparent!important}

.form-actions .editor-management-actions :is(.quiet-button,.editor-copy-button,.editor-delete-button){font-size:12px}

/* October refinement: simpler focus, launch readiness, and responsive project identity */
.landing-suite{display:none!important}

#collectionForm :is(input,textarea,select):focus{outline:0!important;border-color:color-mix(in srgb,var(--meta-blue) 62%,var(--line))!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--meta-blue) 13%,transparent)!important}
.google-map-icon{font-family:Arial,sans-serif!important;font-size:0!important;font-weight:900;background:conic-gradient(from -45deg,#4285f4 0 25%,#34a853 0 46%,#fbbc05 0 68%,#ea4335 0 84%,#4285f4 0);background-clip:text;-webkit-background-clip:text;color:transparent!important}
.google-map-icon::after{content:"G";font-size:17px}
.map-link-row{align-items:stretch}.map-enable-switch{min-height:46px;height:100%;align-self:stretch;white-space:nowrap}.map-enable-switch em{font-size:9px}

.hero-button-row{grid-template-columns:24px minmax(150px,1fr) minmax(145px,.8fr) auto auto 34px}
.hero-link-or{align-self:center;color:var(--muted);font-size:10px;font-weight:850;text-align:center}
.hero-button-control select{min-height:42px;padding-inline:12px 34px;appearance:none;border:1px solid color-mix(in srgb,var(--meta-blue) 25%,var(--line));border-radius:10px;background-color:var(--surface);background-image:linear-gradient(45deg,transparent 50%,var(--meta-blue) 50%),linear-gradient(135deg,var(--meta-blue) 50%,transparent 50%);background-position:calc(100% - 16px) 18px,calc(100% - 11px) 18px;background-size:5px 5px;background-repeat:no-repeat;color:var(--ink);font:inherit;font-size:11px}
[dir="rtl"] .hero-button-control select{background-position:16px 18px,11px 18px;padding-inline:34px 12px}
.hero-external-link-field{grid-column:2/6;grid-template-columns:minmax(0,1fr) 34px;align-items:end}.hero-external-link-field label{min-width:0;display:grid;gap:4px}.hero-external-link-field>button{width:34px!important;height:42px!important;padding:0!important;border-radius:10px!important;color:#b23d3d!important;background:#fff2f2!important;border:1px solid #efc3c3!important}

.payment-card{max-width:900px}.success-icon.is-warning{color:#8a6510;background:#fff3c7;border-color:#e9c55c}.project-summary #paymentProgress.is-ready{color:#15864c}.project-summary #paymentProgress.is-warning{color:#c83d3d}.payment-section-progress{margin:28px 0 34px;padding:20px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;background:color-mix(in srgb,var(--surface) 92%,var(--meta-blue));border:1px solid var(--line);border-radius:18px}.payment-section-progress-item{min-width:0;padding:10px 12px;display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:13px}.payment-section-progress-item>span{font-size:12px;font-weight:850}.payment-progress-ring{width:52px;height:52px;flex:0 0 52px;padding:5px;display:grid;place-items:center;border-radius:50%;background:conic-gradient(var(--success) var(--section-progress),color-mix(in srgb,var(--line) 70%,transparent) 0)}.payment-progress-ring i{width:100%;height:100%;display:grid;place-items:center;background:var(--surface);border-radius:50%;font-style:normal}.payment-progress-ring b{font-size:9px}

.landing-hero{position:relative;overflow:hidden;background:radial-gradient(circle at 14% 18%,rgba(57,225,125,.14),transparent 29%),radial-gradient(circle at 88% 12%,rgba(69,184,255,.16),transparent 31%),linear-gradient(145deg,#f8fbf7,#eef5f0)}.landing-hero::before{content:"";position:absolute;inset:20px;border:1px solid rgba(22,60,39,.09);border-radius:32px;pointer-events:none}.landing-hero-copy{position:relative;z-index:1}.landing-eyebrow{display:inline-flex;padding:7px 12px;border:1px solid rgba(22,60,39,.15);border-radius:999px;background:rgba(255,255,255,.66);backdrop-filter:blur(8px)}.landing-hero h1{max-width:920px;margin-inline:auto;text-wrap:balance;letter-spacing:-.045em}.landing-price-lead{max-width:690px!important;font-size:15px!important;line-height:1.85!important}.landing-actions{margin-top:27px}.landing-primary{box-shadow:0 14px 34px rgba(20,114,65,.22)}.landing-cta-note{font-size:11px!important;font-weight:750}.landing-hero-note{color:#617067!important;font-size:10px!important}

@media(max-width:900px){.project-identity-editor{grid-template-columns:52px 52px minmax(120px,1fr)!important}.builder-project-number{grid-column:1;grid-row:1}.project-identity-editor>.project-type-badge{grid-column:2;grid-row:1}.builder-brand-field{grid-column:3!important;grid-row:1}.profession-switcher{grid-column:1/-1!important;grid-row:2}.hero-button-row{grid-template-columns:24px minmax(0,1fr) 34px}.hero-button-row>.hero-button-control,.hero-link-or,.hero-external-link-toggle,.hero-external-link-field{grid-column:2}.hero-external-link-field{grid-template-columns:minmax(0,1fr) 34px}.payment-section-progress{grid-template-columns:1fr}}
@media(max-width:520px){.project-identity-editor{gap:8px!important;grid-template-columns:48px 48px minmax(110px,1fr)!important}.project-identity-editor>.project-type-badge{width:48px}.builder-brand-field input{font-size:11px}.landing-hero::before{inset:10px;border-radius:24px}}

/* Landing hero: edge-to-edge backdrop with a contained, calmer composition */
.landing-screen .landing-hero{width:100%;max-width:none;min-height:760px;margin:0;padding:68px clamp(24px,6vw,88px) 62px;display:grid;grid-template-columns:minmax(0,1fr);place-items:center;overflow:hidden;box-sizing:border-box;background:radial-gradient(circle at 8% 16%,rgba(57,225,125,.19),transparent 31%),radial-gradient(circle at 92% 14%,rgba(69,184,255,.17),transparent 29%),linear-gradient(155deg,#f8fcf8 0%,#edf6f0 54%,#f7faf7 100%)}
.landing-screen .landing-hero::before{display:none}
.landing-screen .landing-hero-copy{width:min(100%,980px);max-width:980px;margin:auto;display:flex;flex-direction:column;align-items:center;text-align:center!important}
.landing-screen .landing-hero-copy .landing-hero-visual{width:min(100%,310px);margin:13px auto 0;order:1}
.landing-screen .landing-eyebrow{order:0}
.landing-screen .landing-hero h1{order:2;width:min(100%,900px);max-width:900px;margin:15px auto 12px;font-size:clamp(43px,5.4vw,68px);line-height:1.16;text-align:center!important}
.landing-screen .landing-price-lead{order:3;max-width:690px!important;margin:0 auto!important;font-size:15px!important;line-height:1.8!important}
.landing-screen .landing-actions{order:4;margin-top:25px}
.landing-screen .landing-hero-assurance{order:5;width:min(100%,620px);margin:20px auto 0;padding:15px 18px;display:grid;grid-template-columns:1fr 1fr;gap:0;background:rgba(255,255,255,.64);border:1px solid rgba(34,89,57,.1);border-radius:18px;box-shadow:0 12px 34px rgba(32,76,50,.07);backdrop-filter:blur(12px)}
.landing-screen .landing-hero-assurance p{margin:0!important;padding:2px 17px;display:block;color:#58685f!important;font-size:11px!important;font-weight:700;line-height:1.7!important;text-align:start}
.landing-screen .landing-hero-assurance .landing-hero-note{border-inline-start:1px solid rgba(34,89,57,.12)}

/* Full-width editor management rows */
.form-actions .editor-management-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))!important;width:100%}
.form-actions .editor-management-actions :is(.quiet-button,.editor-copy-button){width:100%;min-height:52px}

/* Domain selection and simulated publishing */
.publish-domain-card{margin:30px 0 18px;padding:24px;background:linear-gradient(145deg,color-mix(in srgb,var(--meta-blue) 7%,var(--surface)),var(--surface));border:1px solid color-mix(in srgb,var(--meta-blue) 22%,var(--line));border-radius:20px;text-align:start}.publish-domain-card h2{margin:5px 0 4px;font-size:21px}.publish-domain-card>p{margin:0 0 17px;color:var(--muted);font-size:12px}.publish-domain-field{min-height:56px;padding:5px 6px 5px 14px;display:flex;align-items:center;direction:ltr;background:var(--surface);border:1px solid color-mix(in srgb,var(--meta-blue) 32%,var(--line));border-radius:13px;box-shadow:0 7px 18px rgba(21,74,48,.06)}.publish-domain-field:focus-within{border-color:var(--meta-blue);box-shadow:0 0 0 3px color-mix(in srgb,var(--meta-blue) 13%,transparent)}.publish-domain-field input{min-width:0;flex:1;padding:0 8px;border:0!important;box-shadow:none!important;background:transparent;font-size:16px;font-weight:850;text-align:right}.publish-domain-field span{height:44px;padding:0 13px;display:flex;align-items:center;color:#fff;background:var(--meta-blue);border-radius:9px;font-size:13px;font-weight:900}.publish-domain-card>small{margin-top:7px;display:block;color:var(--muted);font-size:10px}.publish-website-button{width:100%;margin-top:17px}.publish-processing{margin-top:17px;padding:14px;display:flex;align-items:center;justify-content:center;gap:10px;color:var(--meta-blue);background:color-mix(in srgb,var(--meta-blue) 7%,var(--surface));border-radius:12px}.publish-processing[hidden]{display:none}.publish-processing i{width:23px;height:23px;border:3px solid color-mix(in srgb,var(--meta-blue) 20%,transparent);border-top-color:var(--meta-blue);border-radius:50%;animation:publishSpinner .8s linear infinite}.publish-processing strong{font-size:12px}.publish-processing span{min-width:23px;font-size:12px;font-weight:900}@keyframes publishSpinner{to{transform:rotate(360deg)}}
.payment-help-box{margin-top:32px}.publish-success-dialog{position:relative;max-width:520px;padding:36px;text-align:center;border-radius:24px}.publish-success-dialog .dialog-close{position:absolute;inset-block-start:13px;inset-inline-end:13px;width:36px;height:36px;border:0;border-radius:50%;font-size:22px}.publish-success-icon{width:66px;height:66px;margin:0 auto 12px;display:grid;place-items:center;color:#fff;background:var(--success);border-radius:50%;font-size:29px;box-shadow:0 0 0 10px color-mix(in srgb,var(--success) 12%,transparent)}.publish-success-dialog h2{margin:8px 0;font-size:27px}.publish-success-dialog p{color:var(--muted);font-size:13px;line-height:1.75}.publish-success-dialog>strong{margin:15px 0;display:block;direction:ltr;color:var(--meta-blue);font-size:14px;overflow-wrap:anywhere}.publish-success-dialog>a{display:flex;text-decoration:none}

@media(max-width:720px){.landing-screen .landing-hero{min-height:auto;padding:58px 20px 48px}.landing-screen .landing-hero::before{inset:10px}.landing-screen .landing-hero-copy .landing-hero-visual{width:min(76vw,285px)}.landing-screen .landing-hero h1{font-size:clamp(40px,11vw,58px)}.landing-screen .landing-hero-assurance{grid-template-columns:1fr;padding:10px 14px}.landing-screen .landing-hero-assurance p{padding:9px 4px;text-align:center}.landing-screen .landing-hero-assurance .landing-hero-note{border-inline-start:0;border-top:1px solid rgba(34,89,57,.12)}.publish-domain-card{padding:18px}.publish-domain-field span{padding-inline:9px;font-size:11px}.publish-success-dialog{padding:34px 20px 24px}}

/* Local published-site view: reopen the user's completed website without the builder UI. */
body.published-site-mode{margin:0;overflow:auto;background:var(--surface)}
body.published-site-mode>header,body.published-site-mode>main,body.published-site-mode>footer,body.published-site-mode>dialog,body.published-site-mode>#toast,body.published-site-mode>.skip-link{display:none!important}
body.published-site-mode>#previewViewport.published-website-output{width:100%;max-width:none;height:auto;max-height:none;min-height:100vh;margin:0;display:block!important;overflow:visible;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;scrollbar-width:auto;pointer-events:auto;user-select:auto}
body.published-site-mode #websitePreview{width:100%;min-height:100vh;margin:0;display:block!important;border:0;border-radius:0;box-shadow:none}
body.published-site-mode .mini-browser-bar{display:none!important}
body.published-site-mode #previewViewport>article{pointer-events:auto;user-select:auto;-webkit-user-select:auto}
/* Website sizing and interactions now live in website.css, shared by all views. */
@media(max-width:700px){.form-actions .editor-management-actions{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:7px}.form-actions .editor-management-actions :is(.quiet-button,.editor-copy-button,.editor-delete-button){min-width:0;padding-inline:7px;font-size:10px}}

/* Patch 5: desktop live-preview expansion. */
.preview-header-actions{display:flex;align-items:center;gap:6px;direction:ltr}
.preview-expand-toggle{display:none}
@media(min-width:901px){
.preview-expand-toggle{position:relative;display:grid;place-items:center;flex:0 0 40px;width:40px;height:40px;padding:0;color:var(--ink);background:var(--soft);border:1px solid var(--line);border-radius:12px;cursor:pointer;transition:color .18s ease,background-color .18s ease,transform .18s ease}
.preview-expand-toggle:hover{background:color-mix(in srgb,var(--meta-blue) 10%,var(--surface))}
.preview-expand-toggle:active{transform:scale(.96)}
.preview-expand-toggle:focus-visible{outline:3px solid var(--meta-blue);outline-offset:3px}
.preview-expand-toggle svg{width:18px;height:18px;transition:opacity .2s ease,transform .3s cubic-bezier(.2,0,0,1),filter .3s ease}
.preview-expand-toggle .preview-close-icon{position:absolute;width:26px;height:26px;opacity:0;transform:scale(.25);filter:blur(4px)}
.preview-expand-toggle[aria-expanded="true"]{color:#dc2626;background:color-mix(in srgb,#dc2626 9%,var(--surface))}
.preview-expand-toggle[aria-expanded="true"] .preview-expand-icon{opacity:0;transform:scale(.25);filter:blur(4px)}
.preview-expand-toggle[aria-expanded="true"] .preview-close-icon{opacity:1;transform:scale(1);filter:blur(0)}
.preview-expand-toggle::after{content:attr(data-tooltip);position:absolute;top:calc(100% + 8px);left:0;z-index:5;width:max-content;max-width:230px;padding:8px 10px;border-radius:8px;background:var(--ink);color:var(--surface);font-size:11px;line-height:1.5;pointer-events:none;opacity:0;transition:opacity .15s ease}
.preview-expand-toggle:hover::after,.preview-expand-toggle:focus-visible::after{opacity:1}
.preview-expansion-placeholder{grid-area:preview;width:var(--preview-column-width)}
#previewPanel.preview-resizing{position:fixed;z-index:160;min-width:0;max-width:none;margin:0;display:flex;flex-direction:column;transition:left .34s cubic-bezier(.2,0,0,1),top .34s cubic-bezier(.2,0,0,1),width .34s cubic-bezier(.2,0,0,1),height .34s cubic-bezier(.2,0,0,1)}
#previewPanel.preview-resizing .preview-viewport{flex:1;min-height:0;height:auto}
body.desktop-preview-expanded{overflow:hidden}
body.desktop-preview-expanded .form-panel{visibility:hidden}
}
@media(prefers-reduced-motion:reduce){#previewPanel.preview-resizing,.preview-expand-toggle,.preview-expand-toggle svg{transition:none}}

/* Patch 5 refinements: persistent browser chrome and a shared style selector. */
.preview-browser-chrome{height:36px;min-height:36px;margin:0 14px;display:flex;align-items:center;gap:12px;padding:0 12px;direction:ltr;color:#677583;background:#edf0f4;border:1px solid #aeb9c5;border-bottom:1px solid #b9c3cd;border-radius:10px 10px 0 0;flex:0 0 auto;box-shadow:inset 0 1px 0 #fff}
.preview-window-dots{display:flex;gap:5px}.preview-window-dots i{width:8px;height:8px;border-radius:50%;background:#ff6b66}.preview-window-dots i:nth-child(2){background:#f4bd4f}.preview-window-dots i:nth-child(3){background:#4cc776}
.preview-browser-address{min-width:0;flex:1;padding:3px 12px;overflow:hidden;border-radius:5px;background:#fff;border:1px solid #d9dfe6;font:10px/1.5 Arial,sans-serif;text-align:center;text-overflow:ellipsis;white-space:nowrap}
.preview-browser-chrome>svg{width:14px;height:14px}
#previewPanel #previewViewport{border:1px solid #aeb9c5;border-top:0;border-radius:0 0 10px 10px}
body.desktop-preview-expanded #previewPanel .preview-header{background:var(--surface);border-bottom:1px solid var(--line)}
body.desktop-preview-expanded #previewPanel .preview-browser-chrome{height:40px;min-height:40px;margin:0;border-inline:0;border-radius:0;border-top:2px solid #98a6b5;box-shadow:inset 0 1px 0 #fff}
body.desktop-preview-expanded #previewPanel #previewViewport{border-top:1px solid #98a6b5!important}
.project-identity-editor{grid-template-columns:52px 52px minmax(0,1.15fr) minmax(0,1fr) minmax(0,1fr)}
.project-style-home{min-width:0;min-height:74px}
.project-style-control{width:100%;min-width:0}
.project-style-trigger{--chosen-primary:var(--preview-primary);--chosen-secondary:var(--preview-secondary);--chosen-accent:var(--preview-accent);width:100%;min-height:74px;padding:12px 14px;display:flex;align-items:center;gap:12px;text-align:start;color:var(--chosen-primary);background:var(--chosen-secondary);border:1px solid var(--chosen-primary);border-radius:14px;box-shadow:0 5px 15px #1632250a}
.project-style-trigger:hover{box-shadow:0 8px 20px #16322514}
.project-style-caption{min-width:0;flex:1;display:grid;gap:5px}.project-style-caption small{font-size:11px;font-weight:600}.project-style-caption strong{font-size:16px;line-height:1.4;overflow-wrap:anywhere}
.project-style-palette{display:flex;flex:0 0 30px;flex-direction:column;gap:3px}.project-style-palette i{display:block;width:30px;height:10px;border-radius:3px;background:var(--chosen-primary)}.project-style-palette i:nth-child(2){background:var(--chosen-accent)}.project-style-palette i:nth-child(3){background:var(--chosen-secondary);border:1px solid currentColor}
.project-style-chevron{font-size:20px;transition:transform .2s ease}.project-style-trigger[aria-expanded="true"] .project-style-chevron{transform:rotate(180deg)}
.project-style-trigger[data-style="minimal"]{border-radius:0;box-shadow:none;font-family:Georgia,serif}
.project-style-trigger[data-style="bold"],.project-style-trigger[data-style="eighties"]{border-width:2px;border-radius:0;box-shadow:3px 3px 0 var(--chosen-primary)}
.project-style-trigger[data-style="retro"]{border-radius:20px;border-width:2px}
.project-style-trigger[data-style="soft"]{border-radius:24px}
.project-style-trigger.is-dark-style{color:#eef5f3;background:#10151d;border-color:var(--chosen-accent)}
.project-style-trigger[data-style="technologic"]{border-radius:2px;font-family:monospace}
.project-style-trigger[data-style="digital"]{border-radius:7px}
.project-style-menu{position:fixed;z-index:120;inset-inline:50%;width:min(1000px,calc(100vw - 40px));transform:translateX(50%);padding:24px;overflow:auto;overscroll-behavior:contain;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:20px;box-shadow:0 24px 72px #122d2833}
[dir="ltr"] .project-style-menu{transform:translateX(-50%)}
.project-style-menu-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:20px}.project-style-menu-heading h2{margin:0 0 6px;font-size:22px}.project-style-menu-heading p{margin:0;color:var(--muted);font-size:12px}.project-style-menu-heading>button{width:40px;height:40px;flex:0 0 40px;padding:0;border:0;border-radius:10px;background:var(--soft);color:var(--ink);font-size:26px}
.project-style-menu-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.project-style-option{min-width:0;min-height:130px;padding:12px;display:grid;gap:12px;align-content:start;text-align:start;color:var(--ink);background:var(--surface-subtle);border:1px solid var(--line);border-radius:12px}
.project-style-option>.design-style-swatch{display:block;width:100%;height:72px;min-height:72px;margin:0}.project-style-option>strong{font-size:13px;line-height:1.5}

.project-style-option:focus-visible{outline:3px solid var(--meta-blue);outline-offset:3px}
.project-style-sticky-slot{display:none;position:sticky;top:72px;z-index:27;background:var(--surface);border-bottom:1px solid var(--line)}
.project-style-sticky-slot.is-sticky{display:block;height:68px;padding:6px 12px}
.project-style-sticky-slot .project-style-trigger{min-height:54px;height:54px;padding-block:6px;border-radius:10px;box-shadow:none}
.project-style-sticky-slot .project-style-caption{display:flex;align-items:center;gap:12px}.project-style-sticky-slot .project-style-caption small{font-size:11px}.project-style-sticky-slot .project-style-palette{flex-direction:row;flex-basis:auto}.project-style-sticky-slot .project-style-palette i{width:16px;height:24px}
.style-control-stuck .section-tabs-wrap{top:140px}
.style-control-stuck .identity-subtabs{top:204px}
@media(max-width:1100px) and (min-width:901px){.project-identity-editor{gap:10px;grid-template-columns:46px 46px minmax(0,1fr) minmax(0,1fr) minmax(0,1fr)}.project-style-trigger{padding-inline:10px;gap:8px}.project-style-palette{display:none}}
@media(max-width:900px){.project-style-home{grid-column:1/-1;grid-row:3}.project-style-menu-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:700px){
 .testimonial-entry-grid{grid-template-columns:minmax(0,1fr)!important;align-items:stretch;gap:16px}.testimonial-entry-grid>.field,.testimonial-photo-upload{width:100%;min-width:0;grid-column:1}
 .testimonial-photo-upload{min-height:86px;grid-template-columns:54px minmax(0,1fr);padding:14px;gap:4px 12px}.testimonial-photo-preview{width:54px;height:54px}.testimonial-photo-upload strong{font-size:13px}.testimonial-photo-upload small{font-size:11px}
 .custom-form-section>.section-heading{min-height:118px;padding-inline-end:110px;display:grid;grid-template-columns:40px minmax(0,1fr);align-items:start;gap:12px}
 .custom-form-section>.section-heading>div:nth-child(2){padding-inline-end:0}
 .custom-form-section>.section-heading>.remove-section-button{position:absolute;top:0;inset-inline-end:0;max-width:100px;min-height:32px;padding:5px 8px;font-size:10px;gap:4px;white-space:normal}
 .custom-form-section>.section-heading>.section-enable-control{top:48px;inset-inline-end:0;max-width:100px}
 .project-style-menu{width:calc(100vw - 24px);padding:16px;border-radius:16px}.project-style-menu-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.project-style-menu-heading h2{font-size:19px}.project-style-option{min-height:124px}
}
@media(max-width:560px){.project-style-sticky-slot{top:62px}.project-style-sticky-slot.is-sticky{height:64px;padding:5px 8px}.project-style-sticky-slot .project-style-trigger{min-height:52px;height:52px}.style-control-stuck .section-tabs-wrap{top:126px}.style-control-stuck .identity-subtabs{top:182px}.project-style-sticky-slot .project-style-caption{gap:8px}.project-style-sticky-slot .project-style-caption strong{font-size:14px}}

/* The top selector opens across the page; its sticky version stays over the editor. */
.project-style-menu.is-page-style-menu .project-style-menu-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.project-style-menu.is-page-style-menu .project-style-option{min-height:162px;padding:16px}
.project-style-menu.is-page-style-menu .project-style-option>.design-style-swatch{height:104px;min-height:104px}
.project-style-menu.is-column-style-menu .project-style-menu-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:900px){.project-style-menu.is-page-style-menu .project-style-menu-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.project-style-menu.is-column-style-menu .project-style-menu-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.project-style-menu.is-page-style-menu .project-style-menu-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.project-style-menu.is-page-style-menu .project-style-option{min-height:140px;padding:12px}.project-style-menu.is-page-style-menu .project-style-option>.design-style-swatch{height:80px;min-height:80px}}

/* Keep profession cards at their original desktop size while using the page width. */
.profession-menu{max-width:none}
@media(min-width:901px){.profession-menu-grid{grid-template-columns:repeat(auto-fit,158.25px);justify-content:center}}
/* The menus host the original design cards, rather than a reduced copy. */
#projectStyleChoices{display:block;padding:8px}
#projectStyleChoices>.design-style-options{justify-content:center;align-items:stretch}
.design-style-card:focus-within{outline:3px solid var(--meta-blue);outline-offset:4px}
.project-style-miniature{display:block;width:50px;height:46px;flex:0 0 50px;overflow:hidden;border-radius:6px;pointer-events:none}


.project-style-trigger .project-style-palette i{background:var(--preview-primary)}
.project-style-trigger .project-style-palette i:nth-child(2){background:var(--preview-accent)}
.project-style-trigger .project-style-palette i:nth-child(3){background:var(--preview-secondary)}
.project-style-sticky-slot .project-style-miniature{width:40px;height:36px;flex-basis:40px}
@media(max-width:1100px){.project-style-miniature{width:36px;height:40px;flex-basis:36px}}
@media(max-width:700px){#projectStyleChoices{padding:0}}

/* Three identity steps; style selection lives in the project dropdown. */
.identity-subtabs{grid-template-columns:repeat(3,minmax(0,1fr))}
#projectStyleChoices>.design-style-options{width:100%;justify-content:stretch}

.project-style-menu-heading>button{display:grid;place-items:center;line-height:1}
#closeProjectStyleMenu svg{display:block;width:20px;height:20px;flex:none}

/* Mobile preview uses its own open/close control. */
@media(max-width:980px){#previewExpandToggle{display:none}}

/* Keep custom-section actions compact and stacked at every screen width. */
.custom-form-section>.section-heading{min-height:118px;padding-inline-end:110px;align-items:start}
.custom-form-section>.section-heading>.remove-section-button{position:absolute;top:0;inset-inline-end:0;max-width:100px;min-height:32px;padding:5px 8px;font-size:10px;gap:4px;white-space:normal}
.custom-form-section>.section-heading>.section-enable-control{position:absolute;top:48px;inset-inline-end:0;max-width:100px}
.custom-layout-card:focus-within{outline:2px solid var(--primary);outline-offset:3px}

/* Preview controls match the language pill; no editing decorations on the website. */
.preview-expand-toggle{width:30px;height:30px;flex-basis:30px;border-radius:9px}
.preview-expand-toggle .preview-close-icon{width:20px;height:20px}
#projectStyleName,.project-style-menu [data-style-name-ar]{font-family:var(--preview-font)!important}
.section-title-field{margin-bottom:22px}

/* Liquid Glass selection: the same material cue appears on its card and trigger. */
.design-style-glass{border-radius:24px;border:1px solid #ffffffb3;background:radial-gradient(at 0% 0%,color-mix(in srgb,var(--preview-accent) 25%,transparent),transparent 65%),linear-gradient(135deg,#ffffffdf,color-mix(in srgb,var(--preview-secondary) 75%,#fff));box-shadow:inset 0 1px 0 #fff,0 10px 24px #23395112;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.design-style-glass .design-style-swatch{position:relative;overflow:hidden;background:radial-gradient(at 85% 12%,var(--preview-accent),transparent 65%),linear-gradient(140deg,var(--preview-secondary),var(--preview-primary));border:1px solid #ffffffb3;border-radius:20px;box-shadow:inset 0 1px 1px #fff}
.design-style-glass .design-style-swatch i{position:absolute;font-style:normal;color:#142d3c}
.design-style-glass .design-style-swatch i:first-child{inset:9px auto auto 10px;font:7px/1.2 Arial;letter-spacing:1px}
.design-style-glass .design-style-swatch i:nth-child(2){inset:29% 13% 20%;display:grid;place-items:center;background:#ffffff85;border:1px solid #ffffffcc;border-radius:12px;box-shadow:inset 0 1px 0 #fff,0 5px 12px #172a3c22;backdrop-filter:blur(10px);font-size:21px;font-weight:600}
.design-style-glass .design-style-swatch i:last-child{inset:auto 25% 9%;height:4px;border-radius:8px;background:#ffffffa6}
.project-style-trigger.design-style-glass{backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
/* Gallery authoring extends the platform's existing field cards and upload zones. */
#galleryLayouts{margin-block:22px}.gallery-item{display:grid;gap:14px}.gallery-item .content-field-card{margin:0}.gallery-type-options{margin:0 0 16px;padding:0;border:0;min-width:0}.gallery-type-options legend{margin-bottom:10px;font-size:12px;font-weight:700}.gallery-type-options>div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.gallery-type-option{position:relative;display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:10px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink);cursor:pointer;transition:background-color .18s,border-color .18s}.gallery-type-option.selected{border-color:var(--primary);background:color-mix(in srgb,var(--primary) 8%,var(--surface));color:var(--primary)}.gallery-type-option input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}.gallery-type-option svg{width:22px;height:22px;flex-shrink:0}.gallery-type-option strong{font-size:12px}.gallery-type-option:focus-within,.gallery-field-card .field-enable-switch:focus-within,.gallery-upload:focus-within{outline:2px solid var(--primary);outline-offset:3px}.gallery-upload{position:relative}.gallery-upload .upload-icon svg{width:24px;height:24px}.gallery-upload .gallery-upload-sample{display:block;width:96px;height:64px;object-fit:cover;border-radius:8px;margin-top:12px}.gallery-error{display:block;color:var(--danger);margin-top:8px}.gallery-field-card.is-disabled .content-field-body{visibility:visible}.gallery-field-card .field-enable-switch em{white-space:nowrap}.gallery-item .field{margin-bottom:0}.gallery-item .field input,.gallery-item .field textarea{width:100%}#galleryItems:empty{display:none}
.section-duplicate-button{display:grid;place-items:center;flex:0 0 38px;width:38px;height:38px;margin-inline-start:auto;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--meta-blue);cursor:pointer}.section-duplicate-button img{width:18px;height:18px}.section-duplicate-button+.section-enable-control{margin-inline-start:0}.sections-order-list{display:grid;gap:12px;width:100%;margin-top:24px}.section-order-card{display:flex;align-items:center;gap:12px;width:100%;padding:16px;border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--ink);cursor:grab}.section-order-card.is-dragging{opacity:.45}.section-order-card strong{flex:1;min-width:0;font-size:14px}.section-order-icon .ui-icon{width:28px;height:28px}.section-drag-handle img{width:14px;height:22px;opacity:.6}.section-order-card button{display:grid;place-items:center;flex:0 0 40px;width:40px;height:44px;border:1px solid var(--line);border-radius:8px;background:var(--surface-subtle)}.section-order-card button img{width:16px;height:16px}.section-order-card button:disabled{opacity:.3;cursor:default}.social-field-icon{width:20px;height:20px;object-fit:contain;margin-inline-end:9px;vertical-align:middle}.content-field-toggle strong:has(.social-field-icon){display:flex;align-items:center}.social-fields>.content-field-card{grid-column:1/-1}.map-link-help{color:var(--danger)}.section-instance-panel .section-heading{flex-wrap:wrap}.section-instance-panel .field-enable-switch em{white-space:nowrap}@media(max-width:600px){.section-order-card{gap:8px;padding:12px}.section-order-card strong{font-size:12px}.section-duplicate-button{flex-basis:34px;width:34px}}
.local-preview-notice{padding:18px 24px;background:var(--surface);border-bottom:2px solid var(--meta-blue);color:var(--ink);font-size:14px}.local-preview-notice p{margin:8px 0 0;line-height:1.7}
/* Keep section actions separate from the switch hit area on compact screens. */
@media(max-width:700px){
.form-section>.section-heading:has(.section-duplicate-button){min-height:105px;padding-bottom:48px}
.form-section>.section-heading>.section-duplicate-button{position:absolute;bottom:0;inset-inline-end:116px;margin:0;z-index:2}
.form-section>.section-heading:has(.section-duplicate-button)>.section-enable-control{top:auto;bottom:6px;inset-inline-end:0;width:106px}
.form-section>.section-heading:has(.section-duplicate-button)>div:nth-child(2){padding-inline-end:0}
.section-instance-panel>.section-heading>.remove-section-button{position:absolute;bottom:0;inset-inline-end:158px;top:auto;min-height:38px}
}
/* Shared heading actions: copy and remove stay together before the visibility switch. */
@media(min-width:701px){
.section-heading>.section-duplicate-button{margin-top:-7px}
.section-instance-panel>.section-heading{flex-wrap:nowrap}
.section-instance-panel>.section-heading>.remove-section-button{position:static;flex:0 0 38px;width:38px;min-height:38px;padding:0;margin:-7px 0 0;border-radius:10px}
.section-instance-panel>.section-heading>.section-enable-control{margin-inline-start:12px}
}
@media(max-width:700px){
.section-instance-panel>.section-heading>.section-duplicate-button{inset-inline-end:164px}
.section-instance-panel>.section-heading>.remove-section-button{inset-inline-end:116px;width:38px;padding:0}
}
.section-order-card button svg{width:18px;height:18px}
.section-order-card [data-order-delete]{color:var(--danger,#c43d4b)}
.section-order-card[hidden]{display:none!important}
.section-order-placeholder{flex:none;width:100%;border:2px dashed var(--meta-blue);border-radius:14px;background:color-mix(in srgb,var(--meta-blue) 8%,var(--surface));box-shadow:inset 0 0 0 4px var(--surface)}
.section-order-card{will-change:transform}
@media(max-width:600px){.section-order-card{flex-wrap:wrap}.section-order-card strong{flex-basis:calc(100% - 70px)}.section-order-card button{flex-basis:38px;width:38px}.section-order-card button:first-of-type{margin-inline-start:auto}}
body.desktop-preview-expanded #previewPanel .preview-header{display:flex;align-items:center;flex-wrap:nowrap;gap:20px;min-height:66px;padding:10px 20px;border-bottom:2px solid #8795a3;flex:0 0 auto}
body.desktop-preview-expanded #previewPanel .preview-header>div:first-child{flex:0 1 auto;min-width:0}
body.desktop-preview-expanded #previewPanel .preview-header h2{margin:0;font-size:17px;white-space:nowrap}
body.desktop-preview-expanded #previewPanel .preview-header .preview-browser-chrome{flex:1;min-width:0;height:36px;min-height:36px;margin:0;border:1px solid var(--line);border-radius:8px;box-shadow:none;background:var(--soft)}
body.desktop-preview-expanded #previewPanel .preview-header-actions{flex:0 0 auto}
body.desktop-preview-expanded #previewPanel>.demo-note{display:none}
body.desktop-preview-expanded #previewPanel #previewViewport{border-top:0!important}
.section-order-card.is-dragging{position:fixed;opacity:0;pointer-events:none;z-index:-1}
.section-order-card.is-dragging{position:absolute;z-index:1}
.section-drag-handle,.section-order-icon{pointer-events:none;user-select:none}
/* Text actions share one measured icon-and-label treatment. */
.form-section>.section-heading>.section-text-action{position:static;display:inline-flex;align-items:center;justify-content:center;gap:6px;width:auto;min-width:0;height:38px;min-height:38px;flex:0 0 auto;padding:7px 10px;font-family:inherit;font-weight:600;font-size:11px;line-height:1.2;white-space:nowrap}
.section-text-action img,.section-text-action svg{flex:0 0 20px;width:20px;height:20px}
.section-text-action.remove-section-button{color:#c43d4b;border:1px solid #e8b9be;background:var(--surface)}
.section-heading>.section-duplicate-button.section-text-action{margin-inline-start:auto}
.form-section>.section-heading>div:nth-child(2){min-width:0}
@media(max-width:700px){
.form-section>.section-heading:has(.section-text-action){display:flex;flex-wrap:wrap;align-items:center;gap:10px;min-height:0;padding-bottom:0;padding-inline-end:0}
.form-section>.section-heading:has(.section-text-action)>div:nth-child(2){flex:1 1 calc(100% - 65px);padding-inline-end:0}
.form-section>.section-heading>.section-text-action{margin-top:0;margin-bottom:0}
.form-section>.section-heading:has(.section-text-action)>.section-enable-control{position:static;flex:0 0 auto;width:auto;margin:0;align-self:center}
}
.global-tooltip{position:fixed;inset:auto;margin:0;z-index:2147483647;max-width:min(360px,calc(100vw - 16px));padding:9px 13px;border:1px solid #ffffff25;border-radius:9px;background:#202823;color:#fff;box-shadow:0 5px 20px #0003;font:500 12px/1.5 Arial,sans-serif;pointer-events:none;text-align:center;overflow-wrap:anywhere}
.global-tooltip[hidden]{display:none}
[data-tooltip]::after,.tooltip::after{display:none!important}
.section-text-action.remove-section-button svg{display:block;flex:0 0 24px;width:24px;height:24px}
.custom-form-section>.section-heading{display:flex;min-height:0;padding-inline-end:0;align-items:center}
/* The gallery reuses the hero's complete layout-field structure and spacing. */
.gallery-layout-block .hero-layout-options{margin-block:0!important}
.gallery-layout-block{margin-bottom:24px}

.gallery-layout-rail{display:flex;align-items:center;gap:12px;min-width:0}
.gallery-layout-rail .hero-layout-options{display:flex;flex:1;min-width:0;overflow-x:auto;gap:12px;scroll-snap-type:x mandatory;scrollbar-width:none;padding:3px 2px 8px}
.gallery-layout-rail .hero-layout-options::-webkit-scrollbar{display:none}
.gallery-layout-rail .hero-layout-card{flex:0 0 calc((100% - 24px)/3);display:grid;grid-template-columns:1fr;align-content:start;scroll-snap-align:start}
.gallery-layout-rail .hero-layout-card svg{width:100%}
.gallery-layout-arrow{transform:none!important}
[dir="rtl"] .gallery-layout-arrow{transform:scaleX(-1)!important}
@media(max-width:700px){.gallery-layout-rail{gap:6px}.gallery-layout-rail .hero-layout-options{gap:6px}.gallery-layout-rail .hero-layout-card{flex-basis:calc((100% - 12px)/3);padding:6px;gap:7px}.gallery-layout-rail .hero-layout-card>span{flex-wrap:wrap;gap:4px}.gallery-layout-rail .hero-layout-card strong{font-size:11px}.gallery-layout-arrow{flex-basis:28px;width:28px}}

.gallery-layout-rail .hero-layout-card:focus-within{outline:2px solid var(--primary);outline-offset:2px}
@media(max-width:980px){body:not(.published-site-mode){touch-action:pan-x pan-y}body:not(.published-site-mode) :is(button,a,input,select,textarea){touch-action:manipulation}#brandName{font-size:16px!important}}
/* Engineered: Quin's typeset, square-edged frame system. */
.design-style-engineered{background:var(--preview-secondary);border:1px solid color-mix(in srgb,var(--preview-primary) 28%,var(--preview-secondary));border-radius:0;box-shadow:none;color:var(--preview-text)}
.design-style-engineered .design-style-swatch{position:relative;overflow:hidden;background:var(--preview-secondary);border:1px solid color-mix(in srgb,var(--preview-primary) 28%,var(--preview-secondary));border-radius:0;color:var(--preview-primary);box-shadow:none}
.design-style-engineered .design-style-swatch i{position:absolute;font-style:normal}
.design-style-engineered .design-style-swatch i:first-child{inset:0 0 auto;padding:7px;border-bottom:1px solid color-mix(in srgb,var(--preview-primary) 28%,var(--preview-secondary));font:8px 'Geist Mono',monospace;letter-spacing:.6px}
.design-style-engineered .design-style-swatch i:nth-child(2){inset:25% 0 18%;display:grid;place-items:center;font:500 40px 'Instrument Sans',sans-serif;letter-spacing:-2px}
.design-style-engineered .design-style-swatch i:last-child{bottom:0;right:0;width:32%;background:var(--preview-accent);border-inline-start:1px solid color-mix(in srgb,var(--preview-primary) 28%,var(--preview-secondary));text-align:center}
.design-style-engineered .design-style-swatch:after{content:'';position:absolute;inset:auto 32% 0 0;height:18%;border-top:1px solid color-mix(in srgb,var(--preview-primary) 28%,var(--preview-secondary));background:repeating-linear-gradient(90deg,transparent 0 7px,color-mix(in srgb,var(--preview-primary) 28%,var(--preview-secondary)) 7px 8px)}
.project-style-trigger.design-style-engineered{background:var(--preview-secondary)!important;color:var(--preview-primary)!important;border:1px solid color-mix(in srgb,var(--preview-primary) 28%,var(--preview-secondary))!important;border-radius:0!important;box-shadow:none!important}
.project-style-trigger.design-style-engineered .project-style-palette i{background:var(--preview-primary)}.project-style-trigger.design-style-engineered .project-style-palette i:nth-child(2){background:var(--preview-accent)}.project-style-trigger.design-style-engineered .project-style-palette i:nth-child(3){background:var(--preview-accent)}

/* Scale the complete style artwork; never reflow its internal composition. */
.project-style-miniature{position:relative;border-radius:0}
.project-style-miniature>.design-style-swatch{position:absolute!important;left:50%;top:50%;min-height:0!important;max-width:none!important;margin:0!important;transform-origin:center;flex:none}
.section-tabs-wrap{padding-inline:12px!important}
.section-tabs-wrap .tabs-scroll,.section-tabs-wrap.is-compact .tabs-scroll{width:36px;height:36px;flex:0 0 36px;border-radius:50%;padding:0;display:grid;place-items:center;line-height:1;align-self:center;margin:0 3px}

.section-tabs-wrap .tabs-scroll svg{display:block;width:18px;height:18px;flex:none}
/* Neon selector: the same full artwork is scaled for the closed control. */
.design-style-neon{color:#f5f3ff;background:color-mix(in srgb,var(--preview-primary) 10%,#0a0118);border:1px solid color-mix(in srgb,var(--preview-accent) 35%,#ffffff22);border-radius:16px;box-shadow:inset 0 1px 0 #ffffff12}
.design-style-neon .design-style-swatch{position:relative;isolation:isolate;display:block;padding:0;border-radius:12px;border:1px solid #ffffff25;background:radial-gradient(ellipse at 50% 120%,var(--preview-accent),transparent 65%),linear-gradient(150deg,#0a0118,color-mix(in srgb,var(--preview-primary) 25%,#0a0118));box-shadow:inset 0 0 28px #ffffff08}
.design-style-neon .design-style-swatch i{position:absolute;font-style:normal;color:#f5f3ff}
.design-style-neon .design-style-swatch i:first-child{inset:8px auto auto 12px;font:8px/1.5 Inter,sans-serif;letter-spacing:2px;opacity:.65}
.design-style-neon .design-style-swatch i:nth-child(2){inset:22% 28% 16%;display:grid;place-items:center;font:32px Sora,sans-serif;border:1px solid #ffffff30;border-radius:12px;background:#ffffff08;box-shadow:0 12px 24px color-mix(in srgb,var(--preview-accent) 40%,transparent)}
.design-style-neon .design-style-swatch i:last-child{inset:auto 15% 7%;height:1px;background:linear-gradient(90deg,transparent,var(--preview-accent),#fff,var(--preview-primary),transparent)}
.design-style-neon.is-light-tone{background:color-mix(in srgb,var(--preview-secondary) 70%,white);color:#151025;border-color:color-mix(in srgb,var(--preview-primary) 25%,transparent)}
.design-style-neon.is-light-tone .design-style-swatch{background:radial-gradient(ellipse at 50% 120%,color-mix(in srgb,var(--preview-accent) 50%,white),transparent 65%),#f8f7ff;border-color:#271b4933}
.design-style-neon.is-light-tone .design-style-swatch i{color:#211733}
.project-style-trigger.design-style-neon{border-radius:16px!important}
.animated-illustrations-field{margin-top:24px;padding:20px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.illustration-toggle{display:flex;align-items:center;gap:20px;position:relative;cursor:pointer}
.illustration-toggle>span{display:grid;gap:6px;flex:1;min-width:0}
.illustration-toggle strong{font-size:15px;color:var(--ink)}
.illustration-toggle small{font-size:13px;line-height:1.7;color:var(--muted)}
.illustration-toggle input{position:absolute;inset-inline-end:0;width:48px;height:28px;opacity:0;cursor:pointer}
.illustration-toggle>i{width:48px;height:28px;flex:0 0 48px;border-radius:999px;background:var(--line);position:relative;pointer-events:none;transition:background .15s}
.illustration-toggle>i:after{content:'';position:absolute;width:20px;height:20px;inset-block-start:4px;inset-inline-start:4px;border-radius:50%;background:var(--surface);transition:inset-inline-start .15s}
.illustration-toggle input:checked+i{background:var(--meta-blue)}
.illustration-toggle input:checked+i:after{inset-inline-start:24px}
.illustration-toggle input:focus-visible+i{outline:3px solid var(--meta-blue);outline-offset:4px}
@media(prefers-reduced-motion:reduce){.illustration-toggle>i,.illustration-toggle>i:after{transition:none}}

.design-style-cross{background:#f3f3f3;color:#151515;border:2px solid #151515;border-radius:0;box-shadow:none}
.design-style-cross .design-style-swatch{position:relative;display:block;background:#f3f3f3;color:#151515;border:2px solid currentColor;border-radius:0;padding:8px;overflow:hidden}
.design-style-cross .design-style-swatch i{font-style:normal;display:block}
.design-style-cross .design-style-swatch i:first-child{font:700 9px Arial,sans-serif;border-bottom:2px solid;padding-bottom:4px}
.design-style-cross .design-style-swatch i:nth-child(2){font:400 25px/.9 Arial,sans-serif;letter-spacing:-1px;padding-top:8px}
.design-style-cross .design-style-swatch i:last-child{position:absolute;bottom:5px;right:8px;background:var(--preview-accent);color:var(--preview-on-accent);font-size:22px}
.project-style-trigger.design-style-cross{border-radius:0!important;box-shadow:none!important;background:#f3f3f3!important;color:#151515!important;border:2px solid #151515!important}
.project-style-trigger.design-style-cross:not(.is-dark-style) .design-style-swatch{background:#f3f3f3;color:#151515}

/* Keep chevrons out of Unicode bidi mirroring, then flip once for Arabic. */
.gallery-layout-arrow{direction:ltr;unicode-bidi:isolate;transform:none}
.gallery-layout-rail:dir(rtl) .gallery-layout-arrow{transform:scaleX(-1)}
[data-details-image-field]{display:grid;gap:12px}
.details-image-preview{display:block;width:100%;height:160px;object-fit:contain;border:1px solid var(--line);border-radius:10px;background:var(--surface-subtle)}
[data-details-image-field] input[type=file]{width:100%;min-width:0;font-size:13px}
[data-details-image-field] input::file-selector-button,[data-details-image-reset]{padding:10px 14px;border:1px solid var(--line);border-radius:8px;background:var(--surface-subtle);color:var(--ink);cursor:pointer}
[data-details-image-field] input::file-selector-button{margin-inline-end:10px}
[data-details-image-reset]{justify-self:start}
/* Details uses the shared image upload zone without a separate sample preview. */
[data-details-image-field] .upload-zone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}
[data-details-image-field] input[type=file]{font-size:inherit}
.details-icon-choice{display:flex;align-items:center;gap:12px;padding:12px 16px;border:1px solid var(--line);border-radius:10px;background:var(--surface-subtle);color:var(--ink)}
.details-library-icon{display:inline-block;width:24px;height:24px;flex:0 0 24px;background:currentColor;mask-size:contain;mask-repeat:no-repeat;mask-position:center;-webkit-mask-size:contain;-webkit-mask-repeat:no-repeat;-webkit-mask-position:center}
.details-icon-picker{width:min(900px,92vw);max-height:85dvh;padding:20px;border:1px solid var(--line);border-radius:18px;background:var(--surface);color:var(--ink)}
.details-icon-picker::backdrop{background:#0b142b99}
.details-icon-picker header,.details-icon-picker footer{display:flex;align-items:center;justify-content:space-between;gap:16px}
.details-icon-picker input{width:100%;margin-block:12px;padding:12px;border:1px solid var(--line);border-radius:9px}
.details-icon-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px;max-height:52dvh;overflow:auto;padding:4px}
.details-icon-grid button{display:grid;justify-items:center;gap:8px;min-height:84px;padding:10px;border:1px solid var(--line);border-radius:8px;color:var(--ink);background:var(--surface-subtle)}
.details-icon-grid button:hover{border-color:var(--meta-blue);background:var(--soft)}
.details-icon-grid small{max-width:100%;overflow-wrap:anywhere;font-size:10px}
.details-icon-picker button:focus-visible{outline:3px solid var(--meta-blue);outline-offset:2px}
.details-icon-picker footer{margin-top:12px}
@media(min-width:701px){.testimonial-entry-grid{grid-template-columns:minmax(0,2.6fr) minmax(120px,1fr);align-items:start}}
@media(max-width:700px){.testimonial-entry-grid{grid-template-columns:1fr}}
.details-title-icon-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:end}
.details-title-icon-row>.content-field-card{margin:0}
.details-title-icon-row .details-icon-choice{margin-bottom:0;min-height:48px}
@media(max-width:600px){.details-title-icon-row{grid-template-columns:1fr}.details-title-icon-row .details-icon-choice{justify-self:start}}
/* The icon library is part of the editor, independent of website themes. */
.details-icon-picker{font-family:inherit;text-align:start;box-shadow:0 24px 80px #10244540}
.details-icon-picker input{box-sizing:border-box}
.details-icon-picker :is([data-icon-close],[data-icon-page]){display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;padding:0;border:1px solid var(--line);border-radius:50%;background:var(--surface-subtle);color:var(--ink);font-family:inherit;font-size:28px;font-weight:600;line-height:1;cursor:pointer;transition:background .18s,border-color .18s,box-shadow .18s}
.details-icon-picker :is([data-icon-close],[data-icon-page]):hover:not(:disabled){background:var(--soft);border-color:var(--meta-blue);color:var(--meta-blue);box-shadow:0 3px 12px #1877f21a}
.details-icon-picker button:disabled{opacity:.35;cursor:default}
.details-icon-picker[dir=rtl] [data-icon-page]{transform:none}

.details-title-icon-row{align-items:center}
.details-title-icon-row .details-icon-choice{align-self:center}
.file-list[data-preview-file-summary] .file-pill img{object-fit:cover;border-radius:6px}
.details-title-icon-row{align-items:end}
.details-title-icon-row .details-icon-choice{align-self:end;margin-bottom:14px}
.details-title-icon-row:has(>.content-field-card.is-collapsed) .details-icon-choice{align-self:center;margin-bottom:0}
@media(max-width:600px){.details-title-icon-row .details-icon-choice{margin-bottom:0}}

.details-icon-field{display:grid;gap:14px;margin-bottom:0}
.details-icon-field .details-icon-choice{display:flex;align-items:center;justify-content:flex-start;gap:18px;width:100%;min-height:90px;padding:18px;border:1px solid var(--line);border-radius:12px;background:var(--surface-subtle);color:var(--ink);font:inherit;cursor:pointer}
.details-icon-field .details-library-icon{width:46px;height:46px;flex:0 0 46px}
.details-custom-editor .repeat-item>.content-field-card{margin-bottom:18px}
.details-icon-picker [data-icon-close]{display:flex;align-items:center;justify-content:center;padding:0;line-height:1}
.details-icon-picker [data-icon-close] svg{display:block;flex:0 0 20px;margin:0}
.detail-button-field .hero-button-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;padding:0}
.detail-button-field .hero-button-control{min-width:0;display:grid;gap:6px}
.detail-button-field .hero-button-control select,.hero-button-control select{background-image:none!important;padding-inline:12px!important;appearance:auto}
.detail-button-field .hero-external-link-field{grid-column:1/-1}
.detail-button-field .hero-link-or{align-self:center}
.file-list:has(.hero-image-chip){display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:9px;width:100%}
.file-list>.hero-image-chip:not(:has(button)){grid-template-columns:48px minmax(0,1fr)}
.file-list .hero-image-chip .file-remove{border-radius:8px}
.design-style-cross .design-style-swatch i:nth-child(2){font-size:36px;letter-spacing:0;font-weight:700}
/* The shared file chip is the single image thumbnail in testimonial uploads. */
.testimonial-photo-upload .testimonial-photo-preview{display:none}
/* Keep the field's own border state without a second frame around its label. */
#collectionForm :is(input,textarea,select,button,label):focus-visible,#collectionForm label:has(input:focus-visible),#collectionForm :is(.hero-layout-card,.custom-layout-card,.gallery-type-option,.upload-zone):focus-within{outline:none!important;outline-offset:0!important}
#collectionForm .hero-external-link-field{align-items:end}
#collectionForm .hero-external-link-field>button{align-self:end;margin-bottom:7px}
.details-default-block{margin-bottom:18px}
.details-default-block.is-block-disabled>:not(.repeat-item-heading){display:none!important}
.details-default-block>.repeat-item-heading>.field-enable-switch{margin-inline-start:auto}
.contact-form-field{grid-template-columns:28px 30px minmax(0,1fr) auto 34px 34px;align-items:center;gap:10px}
.contact-field-type-icon{display:grid;place-items:center;color:var(--meta-blue)}
.contact-field-type-icon svg{width:23px;height:23px}
.contact-field-main{min-width:0}
.contact-field-main .contact-field-options{width:100%;margin-top:6px}
.contact-field-type-picker{margin-block:22px;padding:18px;border:1px solid var(--line);border-radius:16px;background:var(--surface)}
.contact-field-type-picker>div{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:14px}
.contact-field-type-picker button{display:grid;justify-items:center;gap:9px;padding:16px 8px;border:1px solid var(--line);border-radius:12px;background:var(--surface-subtle);color:var(--ink);font:inherit;font-size:12px;cursor:pointer}
.contact-field-type-picker button:hover{border-color:var(--meta-blue);background:var(--soft)}
.contact-field-type-picker svg{width:28px;height:28px}
@media(max-width:600px){.contact-form-field{grid-template-columns:22px 24px minmax(0,1fr) 30px 30px}.contact-field-required{grid-column:3;grid-row:2}.contact-field-add{grid-column:4;grid-row:1}.contact-field-delete{grid-column:5;grid-row:1}.contact-field-type-picker>div{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Place the whole-block switch beside the fold control at the outer corner. */
.details-default-block>.repeat-item-heading{display:flex;gap:12px}
.details-default-block>.repeat-item-heading>strong{flex:1}
.details-default-block>.repeat-item-heading>.field-enable-switch{order:1;margin-inline-start:0}
.details-default-block>.repeat-item-heading:after{order:2;margin-inline-start:0}
/* Button editors use their full available width at every breakpoint. */
#collectionForm .detail-button-field .hero-button-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr);width:100%;min-width:0}
#collectionForm .detail-button-field .hero-button-row>.hero-button-control{grid-column:auto;width:100%}
#collectionForm .detail-button-field .hero-button-row>.hero-external-link-field{grid-column:1/-1;width:100%}
#collectionForm .hero-external-link-field{display:grid;grid-template-columns:minmax(0,1fr) 34px;align-items:end;column-gap:8px}
#collectionForm .hero-external-link-field[hidden]{display:none}
#collectionForm .hero-external-link-field>label{min-width:0;width:100%;grid-column:1}
#collectionForm .hero-external-link-field>label input{width:100%;min-width:0}
#collectionForm .hero-external-link-field>button{grid-column:2;align-self:end;width:34px;height:34px;margin:0 0 5px;padding:0;display:grid;place-items:center}
#collectionForm .contact-form-label:focus,#collectionForm .contact-field-options:focus,#collectionForm label:focus-within{outline:none!important;box-shadow:none!important}
#collectionForm .contact-form-label:focus{border-color:var(--line)!important}
.contact-field-sort button{width:30px;height:30px;display:grid;place-items:center;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:0}
.contact-field-sort button svg{display:block;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:700px){
#collectionForm .detail-button-field .hero-button-row{grid-template-columns:minmax(0,1fr)}
#collectionForm .detail-button-field .hero-button-row>:is(.hero-button-control,.hero-link-or,.hero-external-link-toggle,.hero-external-link-field){grid-column:1!important;width:100%}
#collectionForm .detail-button-field .hero-link-or{width:24px}
#collectionForm .hero-button-row .hero-external-link-field>label{grid-column:1!important}
}
#collectionForm .hero-external-link-field>label{display:contents;margin:0}
#collectionForm .hero-external-link-field>label>small{grid-column:1;grid-row:1}
#collectionForm .hero-external-link-field>label>input{grid-column:1;grid-row:2}
#collectionForm .hero-external-link-field>button{grid-column:2;grid-row:2;align-self:center;margin:0}
#collectionForm :is(input:not([type="checkbox"]):not([type="radio"]),textarea,select):focus{outline:none!important;box-shadow:none!important}
#builderCustomProfession:focus,#customProfession:focus,.profession-custom-edit:focus-within,.profession-custom-edit:has(input:focus-visible){outline:none!important;box-shadow:none!important;border-color:var(--line)!important}
.custom-form-section>.section-heading{flex-wrap:wrap}
.custom-section-controls{display:flex;align-items:center;justify-content:flex-end;gap:12px;flex:0 0 100%;width:100%}
.custom-section-controls>.section-enable-control,.custom-section-controls>.section-text-action,.custom-section-controls>.remove-section-button,.custom-section-controls>.section-duplicate-button{position:static!important;inset:auto!important;align-self:center;flex:0 0 auto;margin:0!important;width:auto}
.custom-buttons-editor{margin-top:22px}
#newSectionDialog{width:min(820px,calc(100% - 32px));max-height:90dvh;overflow:auto}
.new-section-type-picker{margin-bottom:24px}
.new-section-type-picker>div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:12px}
.new-section-type-card{display:grid;justify-items:center;text-align:center;gap:10px;position:relative;padding:20px;border:1px solid var(--line);border-radius:14px;background:var(--surface-subtle);cursor:pointer}
.new-section-type-card:has(input:checked){border-color:var(--meta-blue);background:var(--soft)}
.new-section-type-card input{position:absolute;opacity:0;inset:0;width:100%;height:100%;cursor:pointer}
.new-section-type-card svg{width:48px;height:48px;fill:none;stroke:currentColor;stroke-width:1.7;color:var(--meta-blue)}
.new-section-type-card small{font-size:12px;line-height:1.6;color:var(--muted)}
@media(max-width:500px){.new-section-type-picker>div{grid-template-columns:1fr}.custom-section-controls{justify-content:space-between;gap:8px}}
.custom-section-controls>.section-duplicate-button{order:0}
.custom-section-controls>.section-enable-control{order:1}
.custom-section-controls>.remove-section-button{order:2}
.section-header-group{display:flex!important;flex-wrap:wrap;align-items:center!important;gap:14px!important;padding:20px!important;margin-bottom:24px;background:linear-gradient(135deg,color-mix(in srgb,var(--meta-blue) 9%,var(--surface)),var(--surface));border:1px solid color-mix(in srgb,var(--meta-blue) 22%,var(--line));border-radius:18px;box-shadow:0 5px 18px #18382406;min-height:0!important}
.section-header-group>.section-icon{flex:0 0 48px;width:48px;height:48px;display:grid;place-items:center;border-radius:12px;background:var(--surface);color:var(--meta-blue)}
.section-header-group>.section-icon svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.7}
.section-header-group>div:not(.section-icon):not(.section-header-actions){flex:1;min-width:0;padding-inline-end:0!important}
.section-header-group h2{margin:0 0 5px}.section-header-group p{margin:0;color:var(--muted);line-height:1.6}
.section-header-group .section-header-actions{display:flex!important;align-items:center;justify-content:flex-end;gap:12px;flex:0 0 100%;width:100%;padding-top:14px;border-top:1px solid var(--line)}
.section-header-actions>.section-enable-control{position:static!important;inset:auto!important;width:auto!important;margin:0!important;order:1;align-self:center}
.section-header-actions>.section-duplicate-button{order:0}
.section-header-actions>.section-delete-action{order:2}
.section-header-actions>.section-text-action{position:static!important;display:inline-flex!important;align-items:center;justify-content:center;gap:8px;width:auto!important;min-height:40px;height:auto;padding:9px 12px!important;margin:0!important;border:1px solid var(--line)!important;border-radius:10px!important;background:var(--surface)!important;color:var(--meta-blue)!important;box-shadow:none!important;font:inherit;font-size:12px!important;cursor:pointer}
.section-header-actions>.section-text-action:is(:hover,:focus-visible){background:var(--soft)!important;border-color:var(--meta-blue)!important}
.section-header-actions>.section-text-action svg,.section-header-actions>.section-text-action img{width:18px!important;height:18px!important;flex:0 0 18px}
.section-header-actions>.section-delete-action{color:var(--danger)!important}
.section-header-actions>[hidden]{display:none!important}
.section-tab svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7}
#deleteContentSectionDialog h2{font-size:22px;line-height:1.4;padding-inline-end:24px}
#deleteContentSectionDialog .dialog-icon svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.7}
@media(max-width:600px){.section-header-group{padding:16px!important}.section-header-actions{gap:8px!important;justify-content:space-between!important}.section-header-actions>.section-text-action{padding:9px!important}.section-header-actions>.section-text-action span{display:none!important}.section-header-actions>.section-enable-control{font-size:11px}}
.section-text-action span{white-space:nowrap!important;word-break:normal!important;overflow-wrap:normal!important}
#previewPanel.has-window-controls .demo-note,#previewPanel.has-window-controls .preview-header>div:has(>#previewTitle){display:none!important}
#previewPanel.has-window-controls .preview-header{display:flex;align-items:center;gap:10px;position:relative;padding:10px 12px;margin:0;background:var(--surface-subtle);border:1px solid var(--line);border-radius:12px 12px 0 0;flex:0 0 auto}
#previewPanel.has-window-controls .preview-browser-chrome{display:flex!important;align-items:center;flex:1;gap:10px;min-width:0;margin:0!important;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important}
#previewPanel.has-window-controls .preview-browser-address{flex:1;min-width:0;padding:0;background:transparent;border:0;text-align:start;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:11px}
#previewPanel.has-window-controls #projectStyleControl{position:static!important;flex:0 1 auto;width:auto!important;margin:0;max-width:260px}
#previewPanel.has-window-controls #projectStyleTrigger{width:auto;min-height:38px;padding:6px 10px;gap:8px;border-radius:9px;box-shadow:none}
#previewPanel.has-window-controls #projectStyleTrigger .project-style-caption small,#previewPanel.has-window-controls #projectStyleTrigger .project-style-palette{display:none}
#previewPanel.has-window-controls #projectStyleTrigger .project-style-caption strong{font-size:12px;white-space:nowrap}
#previewPanel.has-window-controls #projectStyleTrigger .project-style-miniature{width:28px;height:24px}
#previewPanel.has-window-controls #previewLanguageToggle{flex:0 0 auto;margin:0;min-height:34px}
#previewPanel.has-window-controls .preview-header-actions{flex:0 0 auto;margin:0}
#previewPanel.has-window-controls .project-style-menu{z-index:10000}
@media(max-width:600px){#previewPanel.has-window-controls .preview-browser-chrome{gap:6px;flex-wrap:wrap}#previewPanel.has-window-controls .preview-browser-address{flex-basis:100%}#previewPanel.has-window-controls #projectStyleControl{flex:1;max-width:none}#previewPanel.has-window-controls #projectStyleTrigger{width:100%}}
@media(max-width:600px){.section-header-actions>.section-duplicate-button span{display:inline!important;white-space:nowrap!important}.section-header-actions>.section-duplicate-button{font-size:11px!important;gap:5px}}

/* The selected checkmark is enough; do not add an extra green selection frame. */
.design-style-card.selected,.design-style-card:focus-within,.design-style-card:focus-visible,.project-style-option.selected,.project-style-option:focus-within{}
#previewPanel.has-window-controls .preview-browser-chrome{flex-wrap:nowrap!important}
#previewPanel.has-window-controls #projectStyleControl{flex:0 0 auto;max-width:320px;order:0}
#previewPanel.has-window-controls #projectStyleTrigger{display:flex;height:36px;min-height:36px;padding:3px 10px;gap:8px}
#previewPanel.has-window-controls #projectStyleTrigger .project-style-caption{display:flex;align-items:center;gap:5px}
#previewPanel.has-window-controls #projectStyleTrigger .project-style-caption small{display:block;font-size:10px;white-space:nowrap}
#previewPanel.has-window-controls #projectStyleTrigger .project-style-palette{display:flex}
#previewPanel.has-window-controls .preview-browser-address{flex:1;flex-basis:auto!important}
#previewPanel.has-window-controls .preview-header{padding:12px;gap:10px}
@media(max-width:540px){#previewPanel.has-window-controls #projectStyleControl{display:none!important}}
#previewPanel.has-window-controls #projectStyleTrigger{box-shadow:none!important;min-width:0}
#previewPanel.has-window-controls #projectStyleTrigger .project-style-palette{flex-direction:row;flex-basis:auto;gap:2px}
#previewPanel.has-window-controls #projectStyleTrigger .project-style-palette i{width:9px;height:16px;border-radius:2px}
/* Keep the card's own style; selection uses only its checkmark. */
.design-style-card.selected,.design-style-card:focus-within,.design-style-card:focus-visible,.project-style-option.selected,.project-style-option:focus-within{outline:none!important;outline-offset:0!important}
.project-style-option.selected{border:1px solid var(--line)!important;box-shadow:none!important}
.custom-media-images[hidden],[data-custom-video-field][hidden]{display:none!important}
[data-custom-video-field]{display:grid;gap:8px;margin-top:18px}
[data-custom-video-field]>label{font-size:12px;font-weight:700;color:var(--muted)}
[data-custom-media-editor] .gallery-type-options{margin-bottom:18px}
/* Original, custom, and duplicated sections share one header layout. */
.form-section>.section-heading.section-header-group{display:flex;flex-wrap:wrap!important;align-items:center;gap:14px}
.form-section>.section-heading.section-header-group>.section-header-actions{flex:0 0 100%!important;min-width:0;box-sizing:border-box}
.section-header-actions>.section-duplicate-button{flex:0 0 auto!important;white-space:nowrap}
.section-header-actions>.section-enable-control{flex:0 0 auto!important}