/* Public-facing Draftmango UI. Example websites retain their own art direction. */
body.public-theme[data-screen] {
  --paper:#fafafa; --card:#fff; --side:#f7f7f7; --ink:#171717; --muted:#666;
  --line:#e2e2e2; --mango:#efb34c; --orange:#171717; --green:#555;
  --text-secondary:#666; --text-caption:#666; --sans:Inter,Arial,Helvetica,sans-serif;
  --type-body:1rem; --type-control:.875rem; --type-caption:.8125rem;
  background:var(--paper); color:var(--ink); font:400 15px/1.6 var(--sans); letter-spacing:-.015em;
}
body.public-theme[data-screen] :is(button,input,textarea,select) { font-family:var(--sans); letter-spacing:inherit; }
body.public-theme[data-screen] :is(a,button,input,textarea,select,summary):focus-visible { outline:2px solid var(--mango); outline-offset:4px; }
body.public-theme[data-screen] ::selection { background:#f7dfb3; color:#171717; }
body.public-theme[data-screen] .brand { font:650 23px/1 var(--sans); letter-spacing:-1.1px; gap:9px; }
body.public-theme[data-screen] .brand-mark { width:25px; height:29px; color:var(--mango); }
body.public-theme[data-screen] .brand-period { color:var(--ink); }
body.public-theme[data-screen] .eyebrow { font:500 11px/1.6 var(--sans); letter-spacing:.07em; color:var(--muted); }
body.public-theme[data-screen] :is(.hero h1,.section-heading h2,.how-copy h2,.faq-intro h2,.final-cta h2,.pricing-hero h1,.pricing-section-heading h2,.pricing-domain h2,.pricing-faq h2,.pricing-final h2,.welcome-content h1,.account-content h2) { font-family:var(--sans); font-style:normal; font-weight:600; color:var(--ink); letter-spacing:-.05em; }
body.public-theme[data-screen] :is(.hero h1,.section-heading h2,.how-copy h2,.faq-intro h2,.final-cta h2,.pricing-hero h1,.pricing-section-heading h2,.pricing-domain h2,.pricing-faq h2,.pricing-final h2,.welcome-content h1,.account-content h2) em { font:inherit; color:inherit; letter-spacing:inherit; }
body.public-theme[data-screen] .button { border:1px solid var(--line); border-radius:7px; background:var(--card); color:var(--ink); padding:11px 17px; gap:10px; min-height:44px; font-size:14px; font-weight:500; line-height:1.5; box-shadow:none; transition:background .15s; }
body.public-theme[data-screen] .button:hover { transform:none; background:#eee; box-shadow:none; }
body.public-theme[data-screen] .button:is(.button-dark,.button-mango) { background:var(--ink); color:#fff; border-color:var(--ink); }
body.public-theme[data-screen] .button:is(.button-dark,.button-mango):hover { background:#333; }
body.public-theme[data-screen] .icon { stroke-width:1.65; }
body.public-theme[data-screen] .site-header { height:80px; background:var(--card); border-color:var(--line); }
body.public-theme[data-screen] .header-inner { gap:24px; }
body.public-theme[data-screen] .desktop-nav { margin-left:0; gap:28px; font-size:14px; color:var(--muted); }
body.public-theme[data-screen] .desktop-nav a:hover,body.public-theme[data-screen] .desktop-nav [aria-current=page] { color:var(--ink); }
body.public-theme[data-screen] .header-cta { min-height:40px; font-size:14px; padding:9px 14px; }
body.public-theme[data-screen] .mobile-menu { top:79px; background:var(--card); font-size:15px; border-color:var(--line); box-shadow:0 8px 16px #00000008; }
body.public-theme[data-screen] .site-footer { display:flex; flex-wrap:wrap; align-items:center; gap:22px; border-top:1px solid var(--line); padding-block:30px; margin-top:64px; font-size:13px; color:var(--muted); }
body.public-theme[data-screen] .site-footer .brand { color:var(--ink); }
body.public-theme[data-screen] .site-footer>span:first-of-type { margin-left:auto; font-size:13px; }
body.public-theme[data-screen] .site-footer a:not(.brand) { font-size:13px; }
body.public-theme[data-screen] .site-footer a:hover { color:var(--ink); }
body.public-theme[data-screen] .icon-button { border-radius:6px; color:var(--ink); background:transparent; }
body.public-theme[data-screen] .icon-button:hover { background:#eee; }
body.public-theme[data-screen] dialog { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:28px; color:var(--ink); box-shadow:0 22px 70px #0002; }
body.public-theme[data-screen] dialog::backdrop { background:#0005; backdrop-filter:none; }
body.public-theme[data-screen] dialog .eyebrow { font-size:11px; }
body.public-theme[data-screen] .dialog-heading h2 { font:600 26px/1.3 var(--sans); letter-spacing:-.04em; }

/* Homepage: keep the idea-first layout and examples, simplify the surrounding UI. */
body.public-theme[data-screen=home] :is(.hero-grain,.title-spark,.hero-note,.hero-mango,.cta-doodle,.process-sticker,.art-grid) { display:none; }
body.public-theme[data-screen=home] .hero-content { padding:72px 0 48px; }
body.public-theme[data-screen=home] .hero-eyebrow { font-size:11px; gap:9px; }
body.public-theme[data-screen=home] .status-dot { background:var(--mango); box-shadow:none; }
body.public-theme[data-screen=home] .hero h1 { font-size:clamp(48px,5.1vw,72px); line-height:1.08; margin:22px auto; }
body.public-theme[data-screen=home] .hero-description { color:var(--muted); font-size:17px; line-height:1.7; }
body.public-theme[data-screen=home] .prompt-area { max-width:768px; margin-top:32px; }
body.public-theme[data-screen=home] .prompt-box { background:var(--card); border:1px solid #cecece; border-radius:14px; box-shadow:0 2px 4px #00000002; padding:21px; }
body.public-theme[data-screen=home] .prompt-box:focus-within { border-color:#999; box-shadow:0 0 0 3px #17171705; }
body.public-theme[data-screen=home] .prompt-box textarea { font-size:16px; min-height:76px; line-height:1.65; padding:0; }
body.public-theme[data-screen=home] .prompt-box textarea:focus-visible { outline:none; }
body.public-theme[data-screen=home] .prompt-box textarea::placeholder { color:var(--muted); }
body.public-theme[data-screen=home] .surprise-button { font-size:13px; color:var(--muted); }
body.public-theme[data-screen=home] .keyboard-hint { font-size:12px; color:var(--muted); }
body.public-theme[data-screen=home] .idea-chips { flex-wrap:wrap; gap:8px; margin-top:22px; }
body.public-theme[data-screen=home] .chip-label { font-size:13px; color:var(--muted); }
body.public-theme[data-screen=home] .idea-chips button { color:var(--muted); border-color:var(--line); background:transparent; font-size:13px; padding:7px 11px; border-radius:7px; }
body.public-theme[data-screen=home] .idea-chips button:hover { background:#eee; border-color:#ccc; transform:none; color:var(--ink); }
body.public-theme[data-screen=home] .prompt-note { font-size:13px; color:var(--muted); margin-top:18px; }
body.public-theme[data-screen=home] .prompt-note>.icon { display:none; }
body.public-theme[data-screen=home] .hero-baseline { color:var(--muted); font-size:10px; letter-spacing:.06em; padding-block:22px; }
body.public-theme[data-screen=home] .hero-baseline a { font-size:13px; color:var(--ink); }
body.public-theme[data-screen=home] .section-pad { padding-block:80px; }
body.public-theme[data-screen=home] :is(.section-heading h2,.how-copy h2,.faq-intro h2,.final-cta h2) { font-size:clamp(32px,3.5vw,46px); line-height:1.15; }
body.public-theme[data-screen=home] .section-heading p { font-size:15px; color:var(--muted); line-height:1.7; }
body.public-theme[data-screen=home] .filters { gap:6px; flex-wrap:wrap; }
body.public-theme[data-screen=home] .filters button { font-size:14px; padding:9px 13px; color:var(--muted); }
body.public-theme[data-screen=home] .filters button:hover { background:#eee; }
body.public-theme[data-screen=home] .filters button.is-active { background:var(--card); border-color:var(--line); color:var(--ink); }
body.public-theme[data-screen=home] .filters button span { background:#eee; color:var(--muted); font-size:11px; }
body.public-theme[data-screen=home] .concept-label { color:var(--muted); font-size:10px; }
body.public-theme[data-screen=home] .template-preview { border-color:var(--line); border-radius:9px; }
body.public-theme[data-screen=home] .template-preview:hover { transform:none; box-shadow:0 6px 20px #00000008; }
body.public-theme[data-screen=home] .sample-browser { background:var(--card); border-color:var(--line); color:var(--muted); }
body.public-theme[data-screen=home] .template-caption h3 { font-size:16px; color:var(--ink); font-weight:500; }
body.public-theme[data-screen=home] .template-caption p { font-size:13px; color:var(--muted); }
body.public-theme[data-screen=home] .template-caption>span { font-size:10px; color:var(--muted); }
body.public-theme[data-screen=home] .template-overlay>span { background:#fffffff5; border-color:var(--line); font-size:13px; }
body.public-theme[data-screen=home] .gallery-footnote { color:var(--muted); font-size:13px; line-height:1.7; }
body.public-theme[data-screen=home] .gallery-footnote>.icon { display:none; }
body.public-theme[data-screen=home] .how-section { padding-block:72px; background:#f3f3f3; border-block:1px solid var(--line); }
body.public-theme[data-screen=home] .how-copy>p { font-size:15px; color:var(--muted); max-width:380px; line-height:1.75; }
body.public-theme[data-screen=home] .step { border-color:var(--line); background:transparent; padding:20px 0; }
body.public-theme[data-screen=home] .step .step-number { color:var(--muted); font:400 13px var(--sans); background:none; border-color:var(--line); }
body.public-theme[data-screen=home] .step strong { color:var(--ink); font-size:16px; font-weight:500; }
body.public-theme[data-screen=home] .step>span>span { font-size:14px; line-height:1.65; color:var(--muted); }
body.public-theme[data-screen=home] .step.is-active { border-color:var(--ink); }
body.public-theme[data-screen=home] .step>.icon { color:var(--ink); }
body.public-theme[data-screen=home] .process-window { transform:none; border-color:#d4d4d4; border-radius:9px; box-shadow:0 12px 30px #00000008; }
body.public-theme[data-screen=home] .process-window-top { background:var(--card); border-color:var(--line); color:var(--muted); }
body.public-theme[data-screen=home] .process-bubble { background:var(--card); color:var(--ink); border:1px solid var(--line); border-radius:8px; box-shadow:0 4px 12px #00000005; font-size:13px; }
body.public-theme[data-screen=home] .process-caption { color:var(--muted); font-size:10px; }
body.public-theme[data-screen=home] .faq-intro>p { color:var(--muted); font-size:15px; }
body.public-theme[data-screen=home] .faq-list summary { font-size:16px; font-weight:500; padding-block:22px; }
body.public-theme[data-screen=home] .faq-list details>p { color:var(--muted); font-size:15px; line-height:1.8; }
body.public-theme[data-screen=home] .faq-list summary span { color:var(--muted); }
body.public-theme[data-screen=home] .final-cta { border:1px solid var(--line); border-radius:12px; background:var(--card); padding:42px; }
body.public-theme[data-screen=home] .cta-action>span { font-size:13px; color:var(--muted); }
body.public-theme[data-screen=home] #preview-description { font-size:15px; color:var(--muted); }
body.public-theme[data-screen=home] .device-buttons { border-color:var(--line); background:#f4f4f4; border-radius:7px; }
body.public-theme[data-screen=home] .device-buttons button { font-size:13px; color:var(--muted); }
body.public-theme[data-screen=home] .device-buttons button.is-active { background:var(--card); color:var(--ink); border-color:var(--line); }
body.public-theme[data-screen=home] .color-buttons>span { font-size:13px; color:var(--muted); }
body.public-theme[data-screen=home] .demo-stage { background:#f3f3f3; border-color:var(--line); }
body.public-theme[data-screen=home] :is(.prototype-note,.dialog-footer p) { color:var(--muted); font-size:13px; }

/* Account flow: retain the split layout and generous form padding. */
body.public-theme[data-screen=auth] .welcome-panel { background:var(--side); border-color:var(--line); }
body.public-theme[data-screen=auth] .welcome-panel:before { display:none; }
body.public-theme[data-screen=auth] .welcome-panel,body.public-theme[data-screen=auth] .account-panel { padding:30px 40px 24px; }
body.public-theme[data-screen=auth] .welcome-content { max-width:500px; }
body.public-theme[data-screen=auth] .welcome-content h1 { font-size:clamp(32px,3.3vw,46px); line-height:1.13; margin-top:18px; }
body.public-theme[data-screen=auth] .welcome-content>p { font-size:15px; line-height:1.75; color:var(--muted); margin-top:18px; }
body.public-theme[data-screen=auth] .draft-illustration { border-color:#d8d8d8; border-radius:9px; box-shadow:0 10px 28px #00000006; margin-top:28px; flex-basis:330px; min-height:220px; }
body.public-theme[data-screen=auth] .browser-bar { background:var(--card); color:var(--muted); border-color:var(--line); height:32px; font-size:9px; }
body.public-theme[data-screen=auth] .brand-note { margin-top:22px; gap:10px; }
body.public-theme[data-screen=auth] .idea-icon { background:transparent; border:0; color:var(--ink); width:20px; }
body.public-theme[data-screen=auth] .brand-note>div>span { font-size:13px; color:var(--ink); font-weight:500; }
body.public-theme[data-screen=auth] .brand-note p { font-size:13px; color:var(--muted); margin-top:3px; }
body.public-theme[data-screen=auth] .welcome-footer { font-size:12px; color:var(--muted); }
body.public-theme[data-screen=auth] .footer-dot { display:none; }
/* Account form: 368px column, floating labels, and the reference's control spacing. */
body.public-theme[data-screen=auth] .account-panel { background:var(--card); color:#000; letter-spacing:normal; padding:0; gap:0; grid-template-rows:minmax(0,1fr) auto; }
body.public-theme[data-screen=auth] .account-top { display:none; }
body.public-theme[data-screen=auth] .account-body { padding:127px 24px 36px; scrollbar-color:#d7d7d7 transparent; }
body.public-theme[data-screen=auth] .account-content { max-width:368px; padding:0; margin:0 auto; }
body.public-theme[data-screen=auth] .account-content h2 { font-size:34px; font-weight:550; line-height:1.22; letter-spacing:-1.15px; text-align:center; margin:0; }
body.public-theme[data-screen=auth] .form-intro { text-align:center; max-width:none; color:#000; font-size:16px; line-height:1.65; margin:20px 0 28px; }
body.public-theme[data-screen=auth] .form-field { position:relative; }
body.public-theme[data-screen=auth] :is(.form-field,.password-input)>label { position:absolute; z-index:1; left:18px; top:28px; transform:translateY(-50%); display:block; margin:0; padding:0 5px; font-size:16px; font-weight:400; line-height:1; background:#fff; color:#000; cursor:text; pointer-events:none; transition:top .15s,font-size .15s; }
body.public-theme[data-screen=auth] .form-field input { height:56px; border:1px solid #d7d7d7; border-radius:30px; background:#fff; font-size:16px; line-height:1.4; padding:17px 22px; box-shadow:none; }
body.public-theme[data-screen=auth] .form-field input:focus { border-color:#171717; box-shadow:none; }
body.public-theme[data-screen=auth] .form-field input:focus-visible { outline:1px solid #171717; outline-offset:0; }
body.public-theme[data-screen=auth] :is(.form-field,.password-input)>input:is(:focus,:not(:placeholder-shown))~label { top:0; font-size:12px; }
body.public-theme[data-screen=auth] .primary-button { display:flex; align-items:center; justify-content:center; width:100%; height:54.4px; padding:15px 22px; background:#171717; color:#fff; border:1px solid #171717; border-radius:30px; margin-top:20px; font-size:16px; line-height:1.4; font-weight:500; }
body.public-theme[data-screen=auth] .primary-button:hover { background:#333; }
body.public-theme[data-screen=auth] .switch-copy { color:#000; font-size:15px; line-height:24px; margin-top:24px; }
body.public-theme[data-screen=auth] .text-button { color:#000; font-weight:400; }
body.public-theme[data-screen=auth] .password-input input { padding-right:56px; }
body.public-theme[data-screen=auth] .password-input button { border-radius:50%; color:#555; }
body.public-theme[data-screen=auth] .password-input button:hover { background:#eee; color:#000; }
body.public-theme[data-screen=auth] .field-hint { font-size:13px; color:#666; padding:0 22px; }
body.public-theme[data-screen=auth] .forgot-password { font-size:13px; }
body.public-theme[data-screen=auth] .email-summary { background:#fff; border-color:#d7d7d7; border-radius:30px; min-height:54px; padding:14px 22px; font-size:15px; margin-bottom:24px; }
body.public-theme[data-screen=auth] .email-summary button { color:#000; font-size:13px; }
body.public-theme[data-screen=auth] .auth-feedback { background:var(--paper); color:var(--ink); border:1px solid var(--line); border-radius:8px; padding:15px 16px; font-size:14px; line-height:1.7; }
body.public-theme[data-screen=auth] .auth-feedback.is-error { color:#a3282c; border-color:#e4b9bb; background:#fff9f9; }
body.public-theme[data-screen=auth] .account-footer { display:block; padding:22px 24px 30px; font-size:13px; line-height:1.6; }
body.public-theme[data-screen=auth] .account-footer .legal-links { font-size:13px; line-height:1.6; gap:15px; color:#000; }
body.public-theme[data-screen=auth] .account-footer .legal-links a { color:#000; margin:0; text-decoration:underline; text-underline-offset:3px; }
body.public-theme[data-screen=auth] .legal-links>span { color:#000; }
body.public-theme[data-screen=auth] .or-divider { margin:24px 0; font-size:12px; line-height:12px; color:#222; gap:18px; }
body.public-theme[data-screen=auth] .provider-list { gap:12px; }
body.public-theme[data-screen=auth] .provider-button { display:flex; background:#fff; color:#000; border:1px solid #d7d7d7; border-radius:30px; padding:14px 24px; min-height:54px; gap:16px; font-size:16px; line-height:1.4; }
body.public-theme[data-screen=auth] .provider-button:disabled { opacity:1; cursor:not-allowed; color:#000; background:#fff; border-color:#d7d7d7; }
body.public-theme[data-screen=auth] .provider-label { font-size:16px; }
body.public-theme[data-screen=auth] .social-status { color:#666; font-size:12px; line-height:1.6; margin:20px 0 0; text-align:center; }
body.public-theme[data-screen=auth] .signup-terms { font-size:12px; line-height:1.6; color:#000; text-align:center; margin:27px 0 0; }
body.public-theme[data-screen=auth] .signup-terms a { text-decoration:underline; text-underline-offset:2px; }
@media(min-width:761px) and (max-height:850px) {
  body.public-theme[data-screen=auth] .account-body { padding-top:64px; }
}


/* Pricing and plan review use the same restrained cards and controls. */
body.public-theme[data-screen=pricing] :is(.pricing-sprout,.plan-symbol,.pricing-final-spark,.pricing-domain-art) { display:none; }
body.public-theme[data-screen=pricing] .pricing-hero { padding:64px 0 26px; }
body.public-theme[data-screen=pricing] .pricing-hero h1 { font-size:clamp(40px,4.5vw,60px); line-height:1.1; margin:20px auto; }
body.public-theme[data-screen=pricing] .pricing-hero>p { color:var(--muted); font-size:16px; }
body.public-theme[data-screen=pricing] .pricing-dot { background:var(--mango); box-shadow:none; }
body.public-theme[data-screen=pricing] .billing-picker { background:#f1f1f1; border-color:var(--line); border-radius:9px; padding:4px; }
body.public-theme[data-screen=pricing] .billing-picker button { border-radius:6px; color:var(--muted); }
body.public-theme[data-screen=pricing] .billing-picker button[aria-pressed=true] { background:var(--card); border-color:#d8d8d8; color:var(--ink); box-shadow:0 1px 2px #00000005; }
body.public-theme[data-screen=pricing] .billing-picker button>span { background:#e7e7e7; color:#555; border-radius:4px; font-weight:400; }
body.public-theme[data-screen=pricing] .pricing-hero .billing-context { font-size:13px; }
body.public-theme[data-screen=pricing] .launch-notice { font-size:13px; color:var(--muted); margin-bottom:42px; }
body.public-theme[data-screen=pricing] .launch-notice>.icon { display:none; }
body.public-theme[data-screen=pricing] .plan-card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:30px 28px 26px; box-shadow:none; }
body.public-theme[data-screen=pricing] .plan-featured { border-color:#777; }
body.public-theme[data-screen=pricing] .plan-ribbon { background:var(--ink); color:var(--card); border:0; border-radius:8px 8px 0 0; font-size:10px; letter-spacing:.05em; height:35px; top:-26px; padding-top:5px; }
body.public-theme[data-screen=pricing] .plan-ribbon>.icon { display:none; }
body.public-theme[data-screen=pricing] .plan-intro h2 { font:600 24px/1.3 var(--sans); letter-spacing:-.04em; }
body.public-theme[data-screen=pricing] .plan-intro p { font-size:14px; color:var(--muted); min-height:46px; }
body.public-theme[data-screen=pricing] .plan-price strong { font-size:48px; font-weight:550; letter-spacing:-.06em; }
body.public-theme[data-screen=pricing] .plan-billing { font-size:13px; color:var(--muted); }
body.public-theme[data-screen=pricing] .plan-button { justify-content:space-between; }
body.public-theme[data-screen=pricing] :is(.plan-cta-note,.plan-footnote,.pricing-fine-print,.comparison-note) { font-size:13px; color:var(--muted); }
body.public-theme[data-screen=pricing] .plan-credit .icon { color:var(--ink); }
body.public-theme[data-screen=pricing] .plan-credit strong { font-size:16px; font-weight:500; }
body.public-theme[data-screen=pricing] .plan-credit span { font-size:13px; color:var(--muted); }
body.public-theme[data-screen=pricing] .plan-features li { color:var(--ink); font-size:14px; }
body.public-theme[data-screen=pricing] .plan-features li:before { border-color:#666; }
body.public-theme[data-screen=pricing] .pricing-included>div>span,body.public-theme[data-screen=pricing] .pricing-included .icon { color:var(--muted); }
body.public-theme[data-screen=pricing] :is(.pricing-section-heading h2,.pricing-domain h2,.pricing-faq h2,.pricing-final h2) { font-size:36px; line-height:1.2; }
body.public-theme[data-screen=pricing] .pricing-comparison table { background:var(--card); }
body.public-theme[data-screen=pricing] .pricing-comparison td { color:var(--ink); }
body.public-theme[data-screen=pricing] .comparison-basic { background:#f2f2f2; }
body.public-theme[data-screen=pricing] .comparison-scroll { border-radius:10px; border-color:var(--line); }
body.public-theme[data-screen=pricing] .pricing-domain { display:block; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:36px 40px; }
body.public-theme[data-screen=pricing] .pricing-domain>div:last-child { max-width:760px; }
body.public-theme[data-screen=pricing] .pricing-domain h2 br { display:none; }
body.public-theme[data-screen=pricing] .pricing-domain p { color:var(--muted); }
body.public-theme[data-screen=pricing] .pricing-text-link { color:var(--ink); font-size:14px; }
body.public-theme[data-screen=pricing] .pricing-questions summary span { color:var(--muted); }
body.public-theme[data-screen=pricing] .pricing-final { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:38px 40px; }
body.public-theme[data-screen=pricing] #plan-dialog { max-height:calc(100dvh - 32px); }
body.public-theme[data-screen=pricing] #plan-dialog h2 { font:600 28px/1.25 var(--sans); letter-spacing:-.04em; }
body.public-theme[data-screen=pricing] .plan-summary { background:var(--paper); border-color:var(--line); border-radius:8px; }
body.public-theme[data-screen=pricing] .plan-summary dl { border-color:var(--line); }

/* Legal document placeholders remain explicit; this pass changes presentation. */
body.public-theme[data-screen=legal]>header { max-width:1280px; padding:27px 32px; }
body.public-theme[data-screen=legal] .brand img { width:25px; height:29px; }
body.public-theme[data-screen=legal] nav { font-size:14px; color:var(--muted); }
body.public-theme[data-screen=legal] main { max-width:800px; padding:0 32px; margin:64px auto 80px; }
body.public-theme[data-screen=legal] h1 { font:600 48px/1.15 var(--sans); letter-spacing:-.05em; margin:16px 0; }
body.public-theme[data-screen=legal] .intro { font-size:16px; color:var(--muted); margin:20px 0 34px; }
body.public-theme[data-screen=legal] section { background:var(--card); border-color:var(--line); border-radius:10px; padding:28px; margin-top:20px; }
body.public-theme[data-screen=legal] section:target { border-color:#999; box-shadow:none; }
body.public-theme[data-screen=legal] h2 { font:600 22px/1.3 var(--sans); letter-spacing:-.035em; margin:16px 0 12px; }
body.public-theme[data-screen=legal] section p { font-size:15px; color:var(--muted); }
body.public-theme[data-screen=legal] .status { color:var(--muted); border-color:var(--line); border-radius:5px; font-size:12px; padding:3px 8px; }
body.public-theme[data-screen=legal] footer { font-size:13px; color:var(--muted); }

@media(max-width:1000px) {
  body.public-theme[data-screen] .container { width:calc(100% - 56px); }
  body.public-theme[data-screen] .desktop-nav { gap:18px; font-size:13px; }
  body.public-theme[data-screen=home] .template-grid { gap:16px; }
  body.public-theme[data-screen=home] .template-caption { align-items:flex-start; }
  body.public-theme[data-screen=home] .template-caption>span { display:none; }
  body.public-theme[data-screen=auth] .welcome-content h1 { font-size:34px; }
  body.public-theme[data-screen=auth] .welcome-content>p { font-size:14px; }
  body.public-theme[data-screen=pricing] .plan-card { padding-inline:20px; }
}
@media(min-width:761px) and (max-height:760px) {
  body.public-theme[data-screen=auth] .welcome-content h1 { font-size:32px; }
  body.public-theme[data-screen=auth] .welcome-content>p { margin-top:12px; font-size:14px; }
  body.public-theme[data-screen=auth] .draft-illustration { margin-top:20px; flex-basis:260px; min-height:180px; }
  body.public-theme[data-screen=auth] .brand-note { margin-top:16px; }
}
@media(min-width:761px) and (max-height:600px) {
  body.public-theme[data-screen=auth] .welcome-content>.eyebrow,body.public-theme[data-screen=auth] .brand-note { display:none; }
  body.public-theme[data-screen=auth] .welcome-content h1 { font-size:28px; margin-top:0; }
  body.public-theme[data-screen=auth] .draft-illustration { min-height:150px; margin-top:16px; }
}
@media(max-width:760px) {
  body.public-theme[data-screen] .container { width:calc(100% - 32px); }
  body.public-theme[data-screen] .site-header { height:72px; }
  body.public-theme[data-screen] .mobile-menu { top:71px; }
  body.public-theme[data-screen] .desktop-nav { display:none; }
  body.public-theme[data-screen] .header-inner { gap:14px; }
  body.public-theme[data-screen] .header-cta { margin-left:auto; }
  body.public-theme[data-screen] .brand { font-size:21px; }
  body.public-theme[data-screen] .site-footer { gap:18px; padding-block:28px; margin-top:42px; }
  body.public-theme[data-screen] .site-footer>span:first-of-type { margin-left:0; }
  body.public-theme[data-screen] .site-footer .brand { width:100%; }
  body.public-theme[data-screen] .site-footer>a:last-child { margin-left:0; }
  body.public-theme[data-screen] dialog { padding:22px; width:calc(100% - 24px); }
  body.public-theme[data-screen=home] .hero-content { padding:52px 0 34px; }
  body.public-theme[data-screen=home] .hero h1 { font-size:clamp(38px,7.5vw,54px); margin:20px auto; }
  body.public-theme[data-screen=home] .hero-description { font-size:16px; padding-inline:12px; }
  body.public-theme[data-screen=home] .prompt-area { margin-top:28px; }
  body.public-theme[data-screen=home] .prompt-box { padding:17px; }
  body.public-theme[data-screen=home] .prompt-box textarea { min-height:90px; }
  body.public-theme[data-screen=home] .keyboard-hint { display:none; }
  body.public-theme[data-screen=home] .prompt-toolbar { justify-content:space-between; gap:10px; }
  body.public-theme[data-screen=home] .prompt-toolbar .button { padding:10px 12px; }
  body.public-theme[data-screen=home] .idea-chips .chip-label { flex-basis:100%; margin:0 0 3px; }
  body.public-theme[data-screen=home] .idea-chips button { font-size:12px; padding:7px 9px; }
  body.public-theme[data-screen=home] .prompt-note { max-width:320px; margin-inline:auto; font-size:12px; }
  body.public-theme[data-screen=home] .hero-baseline>span { display:none; }
  body.public-theme[data-screen=home] .hero-baseline { justify-content:center; }
  body.public-theme[data-screen=home] .section-pad { padding-block:54px; }
  body.public-theme[data-screen=home] .section-heading { display:block; }
  body.public-theme[data-screen=home] .section-heading p { margin-top:18px; font-size:15px; }
  body.public-theme[data-screen=home] .gallery-toolbar { flex-wrap:wrap; }
  body.public-theme[data-screen=home] .filters { gap:4px; }
  body.public-theme[data-screen=home] .filters button { padding:8px 10px; font-size:13px; }
  body.public-theme[data-screen=home] .concept-label { display:none; }
  body.public-theme[data-screen=home] .template-grid { grid-template-columns:1fr; gap:28px; max-width:480px; margin-inline:auto; }
  body.public-theme[data-screen=home] .how-section { padding-block:54px; }
  body.public-theme[data-screen=home] .how-inner { grid-template-columns:1fr; gap:25px; }
  body.public-theme[data-screen=home] .how-copy>p { max-width:480px; }
  body.public-theme[data-screen=home] .process-art { height:430px; max-width:510px; width:100%; margin-inline:auto; }
  body.public-theme[data-screen=home] .process-bubble { font-size:12px; }
  body.public-theme[data-screen=home] .process-caption { font-size:9px; }
  body.public-theme[data-screen=home] .faq-section { display:block; }
  body.public-theme[data-screen=home] .faq-list { margin-top:28px; }
  body.public-theme[data-screen=home] .final-cta { display:block; padding:28px 24px; }
  body.public-theme[data-screen=home] .cta-action { align-items:flex-start; margin-top:24px; }
  body.public-theme[data-screen=home] .final-cta h2 { font-size:33px; }
  body.public-theme[data-screen=home] .preview-tools { flex-wrap:wrap; gap:14px; }
  body.public-theme[data-screen=pricing] .pricing-hero { padding-top:46px; }
  body.public-theme[data-screen=pricing] .pricing-hero h1 { font-size:clamp(38px,7vw,52px); }
  body.public-theme[data-screen=pricing] .launch-notice { font-size:13px; max-width:100%; margin-bottom:30px; }
  body.public-theme[data-screen=pricing] .plan-grid { grid-template-columns:1fr; max-width:480px; margin-inline:auto; gap:42px; }
  body.public-theme[data-screen=pricing] .plan-card { padding:28px; }
  body.public-theme[data-screen=pricing] .plan-intro p { min-height:0; }
  body.public-theme[data-screen=pricing] .pricing-domain,body.public-theme[data-screen=pricing] .pricing-final { padding:28px 24px; }
  body.public-theme[data-screen=pricing] :is(.pricing-section-heading h2,.pricing-domain h2,.pricing-faq h2,.pricing-final h2) { font-size:32px; }
  body.public-theme[data-screen=pricing] .pricing-faq { grid-template-columns:1fr; gap:28px; padding-block:54px; }
  body.public-theme[data-screen=pricing] .pricing-final { display:block; }
  body.public-theme[data-screen=pricing] .pricing-final>.button { margin-top:24px; }
  body.public-theme[data-screen=legal]>header { padding:25px 24px; flex-wrap:wrap; }
  body.public-theme[data-screen=legal] main { margin-top:38px; padding:0 24px; }
  body.public-theme[data-screen=legal] h1 { font-size:38px; }
  body.public-theme[data-screen=legal] section { padding:24px; }
}
@media(max-width:420px) {
  body.public-theme[data-screen] .header-cta { font-size:12px; padding:8px 10px; gap:6px; }
  body.public-theme[data-screen] .header-cta .icon { display:none; }
  body.public-theme[data-screen] .header-inner { gap:12px; }
  body.public-theme[data-screen] .brand { font-size:20px; gap:7px; }
  body.public-theme[data-screen=home] .filters button { font-size:12px; padding:8px; }
  body.public-theme[data-screen=home] .idea-chips { gap:6px; }
  body.public-theme[data-screen=home] .idea-chips button { font-size:11px; padding:7px 8px; }
  body.public-theme[data-screen=auth] .preview-badge { display:none; }
  body.public-theme[data-screen=pricing] .billing-picker button { padding:9px 11px; gap:7px; }
}

/* Mobile follows the reference's single, naturally scrolling form and footer. */
@media(max-width:760px) {
  html:has(body.public-theme[data-screen=auth]) { height:auto; min-height:100%; overflow-x:clip; overflow-y:auto; }
  body.public-theme[data-screen=auth] { height:auto; min-height:100dvh; overflow:visible; background:#fff; }
  body.public-theme[data-screen=auth] .auth-layout { display:flex; flex-direction:column; height:auto; min-height:100dvh; }
  body.public-theme[data-screen=auth] .welcome-panel { display:flex; align-items:center; flex:none; padding:24px; background:#fff; border:0; }
  body.public-theme[data-screen=auth] .welcome-panel .brand { font-size:23px; line-height:27px; gap:8px; }
  body.public-theme[data-screen=auth] .welcome-panel .brand-mark { height:27px; }
  body.public-theme[data-screen=auth] .account-panel { display:flex; flex-direction:column; flex:1; padding:0; gap:0; }
  body.public-theme[data-screen=auth] .account-body { display:block; flex:none; overflow:visible; padding:42px 24px 36px; }
  body.public-theme[data-screen=auth] .account-content { max-width:368px; margin:0 auto; padding:0; }
  body.public-theme[data-screen=auth] .account-content h2 { font-size:32px; }
  body.public-theme[data-screen=auth] .account-footer { margin-top:auto; padding:22px 24px max(24px,env(safe-area-inset-bottom)); }
}