/* Shared landing and creation layout. Loaded in the initial document head. */
.ux-preview{--ux-accent:var(--blue);--ux-tint:color-mix(in srgb,var(--blue) 6%,var(--paper));}
.ux-preview .ux-preview-note{font-size:11px;letter-spacing:.07em;color:var(--muted);max-width:1120px;margin:14px auto 0;padding:0 24px;text-align:right}
.ux-preview .ux-eyebrow{font-size:12px!important;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--blue);margin:0 0 22px!important}
body.ux-preview:not(.ux-creating) #quietWelcome{max-width:800px;padding:62px 24px 56px;display:block;margin:0 auto;}
.ux-preview .ux-hero-copy{min-width:0}
.ux-preview .ux-hero-copy>.quiet-kicker,.ux-preview .ux-hero-copy>.welcome-use-case{display:none}
.ux-preview:not(.ux-creating) #quietWelcome h1{font-size:clamp(40px,4.6vw,60px);line-height:1.04;letter-spacing:-.05em;max-width:560px;font-weight:600;margin:0 0 26px;}
.ux-preview #quietWelcome .welcome-ai{line-height:1.65;font-size:18px;max-width:610px;margin-bottom:28px}
.ux-preview #quietWelcome .landing-promise{margin-top:28px;font-size:13px;}
.ux-preview #quietWelcome .quiet-bottom{gap:8px 22px;margin-top:16px}
.ux-benefits{max-width:1072px;margin:0 auto 60px;padding:26px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:grid;grid-template-columns:repeat(3,1fr);gap:36px;}
.ux-benefits article{display:grid;grid-template-columns:28px 1fr;gap:6px 12px}
.ux-benefits svg{color:var(--blue);grid-row:span 2}
.ux-benefits h2{font-size:17px;font-weight:600;letter-spacing:-.02em;margin:0;line-height:1.35}
.ux-benefits p{grid-column:2;font-size:14px;line-height:1.5;color:var(--muted);margin:0;}
.ux-how{max-width:1072px;margin:0 auto 52px;padding:30px 0 44px;}
.ux-how header{max-width:620px;margin-bottom:32px;}
.ux-how header h2{font-size:34px;letter-spacing:-.035em;line-height:1.2;margin:0 0 12px;font-weight:500}
.ux-how header>p:not(.ux-eyebrow){font-size:17px;color:var(--muted);margin:0;}
.ux-how ol{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;list-style:none;margin:0;padding:0}
.ux-how li{padding:26px;border:1px solid var(--line);border-radius:12px;background:var(--ux-tint);}
.ux-step-number{font-size:12px;color:var(--blue);display:block;margin-bottom:22px;font-variant-numeric:tabular-nums}
.ux-how h3{font-weight:500;font-size:20px;letter-spacing:-.025em;margin:0 0 12px}
.ux-how li p{font-size:15px;line-height:1.6;color:var(--muted);margin:0;}
.ux-preview .landing-ai{width:min(1072px,calc(100% - 48px));padding:0 0 46px}
.ux-preview .landing-features{width:min(900px,calc(100% - 48px))}
.ux-preview .feature-layout{grid-template-columns:220px minmax(0,1fr);gap:48px}
.ux-preview .feature-tabs button{border-radius:8px;padding:13px 16px}
.ux-preview .feature-panels{border:1px solid var(--line);padding:26px;border-radius:12px;background:var(--ux-tint)}
.ux-preview .feature-panels p{font-size:16px}
.ux-preview .feature-panels .feature-note{font-size:14px}
.ux-preview .ux-guide[hidden]{display:none}
.ux-preview .ux-setup-heading{display:none}
.ux-creating main{max-width:1120px;margin:38px auto 72px;padding:0 24px;display:grid;grid-template-columns:210px minmax(0,1fr);gap:64px;align-items:start;}
.ux-creating .ux-guide{grid-column:1;grid-row:1;position:sticky;top:32px;}
.ux-creating main>#quietWelcome,.ux-creating main>#build{grid-column:2;grid-row:1;max-width:none;width:100%;margin:0;padding:0;min-width:0;}
.ux-creating #quietWelcome.hidden,.ux-creating #build.hidden{display:none!important}
.ux-creating .landing-marketing,.ux-creating .landing-examples,.ux-creating .landing-why-ai,.ux-creating .ux-hero-example{display:none!important}
.ux-creating #quietWelcome .ux-hero-copy>:not(#landingSetup){display:none!important}
.ux-creating #landingSetup{border:0;padding:0;margin:0;}
.ux-creating .ux-setup-heading{display:block;margin-bottom:30px}
.ux-creating #quietWelcome .ux-setup-heading h1{font-size:38px;line-height:1.15;margin-bottom:16px;letter-spacing:-.035em;font-weight:500}
.ux-creating .ux-setup-heading>p:last-child{font-size:17px;line-height:1.6;color:var(--muted)}
.ux-creating #closePageSetup{margin-bottom:18px}
.ux-creating #quietStart{padding:28px;border:1px solid var(--line);border-radius:14px;background:var(--paper);margin:0!important}
.ux-creating #quietStart .profile-kind-choice>div{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.ux-creating #quietStart .profile-kind-choice label{border-radius:8px;padding:14px 12px;min-width:0}
.ux-creating #quietStart .profile-kind-choice label:has(input:checked){border-color:var(--blue);background:var(--ux-tint)}
.ux-creating #quietStart .quiet-answer{border:1px solid var(--line);border-radius:8px;padding:12px 14px;background:var(--paper);font-size:17px!important;}
.ux-creating #quietStart .quiet-input-label{font-size:14px;letter-spacing:0;text-transform:none;margin-bottom:9px;}
.ux-creating #quietStart .quiet-actions{border-top:1px solid var(--line);padding-top:22px;margin-top:14px;}
.ux-guide ol{list-style:none;margin:0;padding:0;}
.ux-guide li{display:grid;grid-template-columns:30px 1fr;gap:12px;padding:18px 0;color:var(--muted)}
.ux-guide li>span{display:grid;place-items:center;border:1px solid var(--line);width:28px;height:28px;border-radius:50%;font-size:12px}
.ux-guide strong{font-weight:500;font-size:14px;line-height:1.5;display:block;padding-top:3px}
.ux-guide li p{font-size:12px;line-height:1.6;margin:6px 0 0;}
.ux-guide li[aria-current]{color:var(--ink)}
.ux-guide li[aria-current]>span{background:var(--blue);color:var(--paper);border-color:var(--blue)}
.ux-guide .ux-private{border-top:1px solid var(--line);padding-top:22px;margin-top:20px;font-size:12px;color:var(--muted);line-height:1.6;}
.ux-guide>a{font-size:13px;display:inline-flex;align-items:center;min-height:44px;color:var(--ink);text-underline-offset:4px}
.ux-creating #build>.quiet-workhead,.ux-creating #build>.progress{display:none}
.ux-creating #panel1,.ux-creating #panel2{padding:28px;border:1px solid var(--line);border-radius:14px;background:var(--paper);}
.ux-creating #panel1 h1{font-size:32px;line-height:1.2;font-weight:500;letter-spacing:-.035em;margin-top:0}
.ux-creating #panel2:not(.hidden){margin-top:18px}
.ux-creating .resultbox{border-radius:8px;background:var(--paper);color:var(--ink);padding:16px}
.ux-creating #panel3{min-width:0;padding:0}
.ux-review-nav{display:flex;gap:6px;flex-wrap:wrap;padding:10px;border:1px solid var(--line);border-radius:10px;background:var(--paper);margin:0 0 22px;}
.ux-review-nav button{background:transparent;color:var(--ink);border:0;border-radius:6px;padding:12px;font:inherit;font-size:13px;cursor:pointer;min-height:44px;}
.ux-review-nav button:hover{background:var(--ux-tint)}
.ux-creating #build #panel3.preview-checkout-active>#uxReviewNav{display:flex!important}
.ux-creating .preview-toolbar>button{display:none!important}
.ux-creating #editorPreview{max-width:none;width:100%;margin:0;padding:0}
.ux-creating .preview-layout{display:block}
/* The review surface shows one task at a time. Never let a sticky iframe cover consent. */
.ux-creating .preview-page{position:static;min-width:0}
.ux-creating #panel3{scroll-margin-top:90px}
.ux-creating #uxReviewNav{position:sticky;top:8px;z-index:30;box-shadow:0 4px 16px color-mix(in srgb,var(--ink) 6%,transparent)}
.ux-creating #uxReviewNav [aria-current]{background:var(--ux-tint);color:var(--blue);box-shadow:inset 0 -2px var(--blue)}
.ux-creating #uxReviewNav [data-ux-action="save"]{margin-left:auto}
.ux-review-nav #editorSaveStatus{flex-basis:100%;font-size:13px;padding:0 12px}.ux-review-nav #editorSaveStatus:empty{display:none}
.ux-creating #panel3[data-review-view="preview"] .preview-checkout,
.ux-creating #panel3[data-review-view="personalise"] .preview-checkout,
.ux-creating #panel3[data-review-view="publish"] .preview-page,
.ux-creating #panel3:not([data-review-view="personalise"]) #previewPersonalise{display:none!important}
.ux-creating #panel3[data-review-view="personalise"] .preview-toolbar,
.ux-creating #panel3[data-review-view="personalise"] #editorPreview>p{display:none}
.ux-creating #panel3[data-review-view="personalise"] .preview-page{display:none}
.ux-creating #previewFrame{height:70dvh;min-height:320px;max-height:800px}
.ux-creating #previewCheckout,.ux-creating #previewPersonalise,.ux-creating #contentEditor{scroll-margin-top:100px}
.ux-creating #previewCheckout{margin-top:0}
.ux-creating .preview-checkout{margin-top:24px;border:1px solid var(--line);border-radius:12px;padding:24px}
.ux-creating #panel3>.quiet-detail{border:1px solid var(--line);border-radius:10px;padding:20px;margin:16px 0;scroll-margin-top:24px}
.ux-preview :focus-visible{outline:2px solid var(--focus,var(--blue));outline-offset:3px}
@media(max-width:1000px){body.ux-preview:not(.ux-creating) #quietWelcome{gap:32px}.ux-benefits,.ux-how{margin-left:24px;margin-right:24px}.ux-creating main{gap:32px;grid-template-columns:180px minmax(0,1fr)}}
@media(max-width:760px){body.ux-preview:not(.ux-creating) #quietWelcome{grid-template-columns:1fr;gap:36px;padding-top:40px}.ux-hero-example{max-width:540px;width:100%}.ux-hero-example iframe{height:350px}.ux-benefits{grid-template-columns:1fr;gap:24px;margin-bottom:24px}.ux-how ol{grid-template-columns:1fr}.ux-how header h2{font-size:29px}.ux-how li{padding:22px}.ux-step-number{margin-bottom:12px}.ux-creating main{display:block;margin-top:22px;padding:0 20px}.ux-creating .ux-guide{position:static;margin-bottom:28px}.ux-guide ol{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.ux-guide li{display:flex;flex-direction:column;gap:8px;padding:8px 0}.ux-guide li p,.ux-guide .ux-private,.ux-guide>a,.ux-guide>.ux-eyebrow{display:none}.ux-guide strong{font-size:12px}.ux-creating #quietStart{padding:20px}.ux-creating #panel1,.ux-creating #panel2{padding:20px}.ux-preview .feature-layout{display:block}.ux-preview .feature-panels{padding:22px}.ux-preview .feature-tabs{flex-direction:row;flex-wrap:wrap;margin-bottom:18px}.ux-preview .feature-tabs button{font-size:13px}.ux-creating #quietWelcome .ux-setup-heading h1{font-size:32px}.ux-review-nav{gap:0;padding:4px}.ux-review-nav button{font-size:12px;padding:10px}.ux-creating .preview-checkout{padding:18px}}
@media(prefers-reduced-motion:reduce){.ux-preview *{scroll-behavior:auto!important}}