:root { font-family: Arial, sans-serif; color: #171717; background: #f7f7f5; }
* { box-sizing: border-box; }
body { margin: 0; }
.shell { max-width: 920px; margin: 0 auto; padding: 96px 28px; }
.eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: 12px; }
h1 { font-size: clamp(42px, 8vw, 86px); line-height: .95; margin: 18px 0 28px; }
p { max-width: 720px; font-size: 20px; line-height: 1.5; }
.status { margin-top: 40px; display: inline-block; padding: 10px 14px; border: 1px solid currentColor; border-radius: 999px; }
.site-preview { --preview-canvas: #f5f2eb; --preview-ink: #17382f; --preview-border: #bbc8bf; --preview-radius: 16px; min-height: 100vh; background: var(--preview-canvas); color: var(--preview-ink); }
.preview-theme-modern-business { --preview-canvas: #edf3fa; --preview-ink: #173457; --preview-border: #b5c6d9; --preview-radius: 6px; }
.preview-theme-editorial-luxury { --preview-canvas: #faf0ed; --preview-ink: #532d49; --preview-border: #d0b5bf; --preview-radius: 24px; }
.preview-theme-editorial-luxury :is(.preview-header h1, .preview-section h2, .preview-section h3) { font-family: Georgia, 'Times New Roman', serif; }
.preview-banner { display: flex; justify-content: space-between; gap: 16px; padding: 16px 24px; background: var(--preview-ink); color: #fff; font-size: 14px; }
.preview-banner a { color: #fff; text-underline-offset: 4px; }
.preview-banner a:focus-visible { outline: 3px solid #f9cf7e; outline-offset: 5px; }
.preview-content { max-width: 1080px; margin: auto; padding: 48px 24px; }
.preview-header { margin-bottom: 40px; }
.preview-header h1 { font-size: clamp(30px, 5vw, 56px); line-height: 1.1; overflow-wrap: anywhere; }
.preview-site-name { font-size: 16px; }
.preview-section { background: #fff; padding: clamp(24px, 6vw, 72px); border-radius: var(--preview-radius); margin-bottom: 24px; border: 1px solid var(--preview-border); }
.preview-hero h2 { font-size: clamp(28px, 5vw, 60px); line-height: 1.1; margin: 20px 0; overflow-wrap: anywhere; }
.preview-body { white-space: pre-line; overflow-wrap: anywhere; }
.preview-footer, .preview-empty { font-size: 15px; line-height: 1.5; padding: 24px 0; }
@media (max-width: 600px) { .preview-banner { flex-direction: column; padding: 16px; } .preview-content { padding: 32px 16px; } }

.preview-text h2 { font-size: clamp(24px, 4vw, 36px); line-height: 1.2; margin: 0 0 20px; overflow-wrap: anywhere; }

.preview-services h2 { font-size: clamp(24px, 4vw, 36px); line-height: 1.2; margin: 0 0 20px; overflow-wrap: anywhere; }
.preview-service-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 20px; padding: 0; margin: 28px 0 0; list-style: none; }
.preview-service-card { min-width: 0; padding: 24px; border: 1px solid var(--preview-border); border-radius: var(--preview-radius); background: var(--preview-canvas); }
.preview-service-card h3 { font-size: 23px; line-height: 1.25; margin: 0 0 16px; overflow-wrap: anywhere; }
.preview-service-card p { font-size: 17px; margin: 0; }

.preview-contact h2 { font-size: clamp(24px, 4vw, 36px); line-height: 1.2; margin: 0 0 20px; overflow-wrap: anywhere; }
.preview-contact-details { font-style: normal; overflow-wrap: anywhere; }
.preview-contact-details p { margin: 12px 0; }
.preview-contact-details a { color: inherit; text-underline-offset: 4px; }
.preview-contact-details a:focus-visible { outline: 3px solid var(--preview-ink); outline-offset: 4px; }

.readiness-content h2 { font-size: clamp(22px, 4vw, 30px); line-height: 1.25; margin: 16px 0; overflow-wrap: anywhere; }
.readiness-content p { font-size: 17px; }
.readiness-content a { color: inherit; text-underline-offset: 4px; overflow-wrap: anywhere; }
.readiness-content a:focus-visible { outline: 3px solid #17382f; outline-offset: 4px; }
.readiness-checks { list-style: none; padding: 0; display: grid; gap: 16px; }
.readiness-check { background: white; border: 1px solid #dedfd4; border-left: 5px solid #8a6517; border-radius: 12px; padding: 24px; }
.readiness-pass { border-left-color: #247b50; }
.readiness-review-required { border-left-color: #4a6299; }
.readiness-status { font-size: 13px; font-weight: bold; }

.preview-navigation { max-width: 1080px; margin: auto; padding: 20px 24px 0; }
.preview-navigation ul { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.preview-navigation li { max-width: 100%; }
.preview-navigation a { display: inline-block; min-height: 44px; padding: 10px 14px; border: 1px solid var(--preview-border); border-radius: 6px; color: var(--preview-ink); text-decoration: none; overflow-wrap: anywhere; }
.preview-navigation a[aria-current="page"] { color: white; background: var(--preview-ink); }
.preview-navigation a:focus-visible { outline: 3px solid var(--preview-ink); outline-offset: 3px; }
.preview-navigation-notice { max-width: 1032px; margin: 16px auto 0; padding: 0 24px; font-size: 15px; }
@media (max-width: 600px) { .preview-navigation { padding: 20px 16px 0; } .preview-navigation-notice { padding: 0 16px; } }

.preview-image { display: block; max-width: 100%; width: 100%; height: auto; border-radius: 12px; margin-top: 24px; }
.preview-image + .preview-empty { font-size: 16px; }

.readiness-pages { display: grid; gap: 16px; }
.readiness-page { background: white; border: 1px solid #dedfd4; border-left: 5px solid #8a6517; border-radius: 12px; padding: 24px; }
.readiness-page.readiness-pass { border-left-color: #247b50; }
.readiness-page h3 { margin: 0 0 16px; font-size: 22px; line-height: 1.3; overflow-wrap: anywhere; }
.readiness-page summary { min-height: 44px; padding: 10px 0; cursor: pointer; font-weight: bold; }
.readiness-page summary:focus-visible { outline: 3px solid #17382f; outline-offset: 3px; }
.readiness-page ul { padding-left: 20px; }
.readiness-page li + li { margin-top: 20px; }
.readiness-page-actions { display: flex; flex-wrap: wrap; gap: 16px; }
.readiness-page-actions a { padding: 10px 0; min-height: 44px; }

.preview-action { display: inline-block; max-width: 100%; min-height: 44px; margin: 8px 0 16px; padding: 14px 20px; background: var(--preview-ink); color: white; border: 2px solid var(--preview-ink); border-radius: 6px; font-size: 18px; line-height: 1.4; font-weight: bold; text-decoration: none; overflow-wrap: anywhere; }
.preview-action:focus-visible { outline: 3px solid var(--preview-ink); outline-offset: 4px; }
.preview-action:hover { text-decoration: underline; text-underline-offset: 4px; }
.workspace-links { display: flex; flex-wrap: wrap; gap: 16px 24px; }
.workspace-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 0; }
.site-workspace p { overflow-wrap: anywhere; }
.site-workspace .preview-banner a, .workspace-entry { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 0; }
.workspace-create-form fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 12px; min-width: 0; }
.workspace-create-form label { font-weight: bold; }
.workspace-create-form input, .workspace-create-form button { min-height: 44px; padding: 12px; font: inherit; max-width: 100%; border: 1px solid var(--preview-border); border-radius: 6px; }
.workspace-create-form button { cursor: pointer; color: white; background: var(--preview-ink); }
.workspace-create-form input:focus-visible, .workspace-create-form button:focus-visible { outline: 3px solid var(--preview-ink); outline-offset: 3px; }
.workspace-create-form :disabled { cursor: wait; opacity: .65; }
.workspace-create-details { margin-top: 24px; }
.workspace-create-details summary { cursor: pointer; min-height: 44px; padding: 12px 0; font-weight: bold; }
.workspace-create-details summary:focus-visible { outline: 3px solid var(--preview-ink); outline-offset: 3px; }
.workspace-create-form textarea { min-height: 100px; padding: 12px; font: inherit; width: 100%; max-width: 100%; border: 1px solid var(--preview-border); border-radius: 6px; }
.workspace-create-form textarea:focus-visible { outline: 3px solid var(--preview-ink); outline-offset: 3px; }
