@font-face{font-family:Inter;src:url(studio-logo-inter.woff2) format('woff2');font-weight:100 900;font-display:swap}*{box-sizing:border-box}body{margin:0;color:#191918;background:#f4f1ec;font:16px/1.5 Inter,system-ui,sans-serif}button,input{font:inherit}button,a,input{touch-action:manipulation}[hidden]{display:none!important}.signup-page{min-height:100vh;display:grid;grid-template-columns:minmax(360px,33.333%) 1fr}.setup-rail{position:sticky;top:0;height:100vh;background:#191918;color:#fff;padding:51px clamp(36px,6vw,88px) 54px;display:flex;flex-direction:column}.setup-brand{display:block}.setup-count,.eyebrow{font:500 11px/1.5 ui-monospace,monospace;letter-spacing:.18em}.setup-count{margin:48px 0 30px}.eyebrow{color:#B0400D;margin:0 0 18px}#setup-steps{list-style:none;counter-reset:steps;padding:0;margin:0}#setup-steps li{counter-increment:steps;min-height:60px;position:relative;display:flex;align-items:flex-start;gap:18px;color:#999;font-weight:550}#setup-steps li:before{content:counter(steps);display:grid;place-items:center;width:36px;height:36px;flex:none;border:1px solid #45433e;border-radius:50%;font-size:13px;color:white;margin-top:-6px}#setup-steps li:not(:last-child):after{content:'';position:absolute;left:17px;top:34px;height:17px;width:1px;background:#45433e}#setup-steps li.active{color:white;font-weight:700}#setup-steps li.active:before{border-color:#B0400D}#setup-steps li.complete:before{content:'\2713';background:#B0400D;border-color:#B0400D}.rail-note{margin:auto 0 0;max-width:490px;color:#d6d3ce;font-size:clamp(25px,3vw,43px);line-height:1.13;letter-spacing:-.035em}.setup-main{padding:clamp(40px,9vh,112px) clamp(24px,6vw,96px);display:flex;flex-direction:column;justify-content:flex-start}#signup-form,#building{width:100%;max-width:610px;margin:0 auto}h1{font-size:clamp(32px,3vw,44px);font-weight:700;line-height:1.08;letter-spacing:-.045em;margin:0 0 30px;max-width:22ch}.intro{font-size:22px;line-height:1.5}.help{color:#817c76;font-size:15px;line-height:1.65;margin:23px 0}.help strong{color:#5e5953}a{color:#B0400D}fieldset{border:0;padding:0;margin:0}.chips{display:flex;gap:10px;flex-wrap:wrap}.chips label{position:relative}.chips input{position:absolute;opacity:0;inset:0}.chips span{display:block;padding:12px 19px;background:#faf9f7;border:1px solid #ddd8d1;border-radius:11px;cursor:pointer;font-size:15px}.chips input:checked+span{background:#26231f;border-color:#26231f;color:white}.chips input:focus-visible+span{outline:2px solid #B0400D;outline-offset:3px}.chips label:hover span{border-color:#a49b90}.choices{display:grid;gap:10px}.choices label{display:flex;gap:14px;align-items:center;padding:16px 18px;background:#faf9f7;border:1px solid #ddd8d1;border-radius:12px;cursor:pointer}.choices label:hover,.choices label:focus-within{border-color:#B0400D}.choices label:has(input:checked){border-color:#B0400D;background:#f7eae0}input[type=radio],input[type=checkbox]{accent-color:#B0400D;width:18px;height:18px;flex:none}.field select{display:block;width:100%;height:52px;background:white;border:1px solid #ded9d2;border-radius:12px;padding:12px 14px;margin-top:8px;color:#1a1a19;font:600 18px/1.2 Inter,system-ui,sans-serif;letter-spacing:-.03em;text-transform:none}.field select:hover{border-color:#a49b90}.field select:focus{outline:2px solid #B0400D;outline-offset:1px;border-color:#B0400D}
.password-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}.password-show{display:flex;align-items:center;gap:9px;font-size:14px}footer{display:flex;align-items:center;border-top:1px solid #e2dcd3;margin-top:72px;padding-top:26px;gap:20px}.primary{display:inline-flex;align-items:center;justify-content:center;background:#B0400D;color:#fff;font-size:16px;font-weight:650;min-height:52px;padding:14px 30px;border:0;border-radius:11px;text-decoration:none;cursor:pointer}.primary:hover{background:#94350b}.primary:disabled{opacity:.55;cursor:wait}.back{margin-left:auto;border:0;background:none;color:#817c76;cursor:pointer;padding:14px}button:focus-visible,a:focus-visible{outline:2px solid #B0400D;outline-offset:4px}.error{border-left:3px solid #B0400D;padding:10px 16px;color:#8a2705;background:#fff5ee;font-size:15px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}.studio-miniature{margin:32px 0 30px;border:1px solid #d6d0c7;border-radius:12px;background:#fff;overflow:hidden;box-shadow:0 18px 50px #3025190d;transform:perspective(1200px) rotateX(3deg);transition:transform .5s ease}.mini-browser{height:25px;border-bottom:1px solid #eee8e1;display:flex;gap:5px;align-items:center;padding:0 13px;background:#faf9f7}.mini-browser i{width:5px;height:5px;border-radius:50%;background:#d5cfc6}.mini-header{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:25px 26px;font-size:10px;opacity:0;transform:translateY(5px);transition:opacity .5s,transform .5s}.mini-header strong{font-size:16px;font-weight:550;overflow-wrap:anywhere}.mini-header span{color:#777;white-space:nowrap;font-size:8px}.mini-content{padding:0 26px 25px}.mini-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}.mini-work{min-height:116px;background:#f4f1ed;border:1px dashed #ded8cf}.mini-work img{display:block;width:100%;height:130px;object-fit:contain;opacity:0;transition:opacity .6s}.mini-work span{display:block;margin:9px 0;width:65%;height:4px;background:#ded7cd;opacity:0;transition:opacity .5s}.mini-copy{padding-top:24px;opacity:0;transition:opacity .5s}.mini-copy i{display:block;height:4px;background:#e8e1d8;margin:7px auto;width:65%}.mini-copy i:last-child{width:42%}.mini-footer{padding:13px;text-align:center;border-top:1px solid #eee8e1;font-size:9px;color:#888;opacity:0;transition:opacity .5s}.studio-miniature[data-stage="1"] .mini-header,.studio-miniature[data-stage="2"] .mini-header,.studio-miniature[data-stage="3"] .mini-header,.studio-miniature[data-stage="4"] .mini-header,.studio-miniature[data-stage="5"] .mini-header{opacity:1;transform:none}.studio-miniature.art-ready .mini-work{border-color:transparent;background:white}.studio-miniature.art-ready .mini-work img,.studio-miniature.art-ready .mini-work span{opacity:1}.studio-miniature.pages-ready .mini-copy,.studio-miniature.pages-ready .mini-footer{opacity:1}.studio-miniature.finished{transform:none}.studio-miniature.empty .mini-work img{display:none}.studio-miniature.empty .mini-work{height:125px;background:#faf9f7;border:1px dashed #ded8cf}.build-track{height:8px;background:#ded7cd;border-radius:10px;overflow:hidden}#build-fill{height:100%;width:0;background:#B0400D;border-radius:inherit;transition:width .45s ease}#build-status{color:#777;font-size:14px;margin:13px 0 26px}.enter-studio{margin-top:8px}
@media(max-width:760px){.signup-page{display:block}.setup-rail{height:auto;position:relative;padding:22px 24px}.setup-brand .login-brand-head{display:flex;align-items:center;gap:12px}.setup-brand .login-mark{width:34px;height:34px}.setup-brand .login-wordmark{margin:0;font-size:20px}.setup-brand .login-product{display:none}.setup-count{margin:22px 0 0}#setup-steps,.rail-note{display:none}.setup-main{padding:34px 24px 48px}h1{font-size:34px}.password-row{display:block}footer{margin-top:40px}.mini-header{padding:20px 16px}.mini-header span{display:none}.mini-content{padding:0 16px 18px}.mini-work img{height:100px}.mini-gallery{gap:8px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important}.studio-miniature{transform:none}}

/* Keep actions aligned without a nested scrolling area or clipped focus rings. */
#signup-form{display:grid;grid-template-rows:minmax(470px,auto) auto auto}
#signup-form>[data-step]{grid-area:1/1;overflow:visible;min-width:0;padding-bottom:20px}
#signup-form>[data-step="0"]{align-self:end}
@media(min-width:761px){#signup-form>[data-step="0"]{position:relative;top:-80px}}
#form-error{grid-area:2/1;margin:0 0 16px;background:#fff5ee}
#setup-actions{grid-area:3/1;margin-top:0}
#building{display:grid;grid-template-rows:470px auto}
.build-body{overflow:auto;min-height:0;padding-bottom:24px}
.build-actions{margin-top:0}
.build-actions .enter-studio{margin-top:0}
@media(max-width:760px){#signup-form{display:block}#building{grid-template-rows:max(300px,calc(100svh - 290px)) auto}}
/* Keep the miniature, progress bar and stage text visible above the fixed action row. */
.build-body .eyebrow{margin-bottom:10px}
.build-body h1{margin-bottom:12px}
.build-body .help{margin:8px 0 16px}
.build-body .studio-miniature{margin:12px 0}
.build-body .mini-header{padding:12px 18px}
.build-body .mini-content{padding:0 18px 10px}
.build-body .mini-work{min-height:0}
.build-body .mini-work img{height:88px}
.build-body .mini-copy{padding-top:4px}
.build-body .mini-copy i{margin:5px auto}
.build-body .mini-footer{padding:6px}
.build-body #build-status{margin:10px 0 0}
.build-body .studio-miniature.empty .mini-work{height:88px}
/* Build presentation follows the supplied 18px supporting typography. */
.build-body{display:grid;grid-template-rows:auto auto auto minmax(0,1fr) 8px auto;gap:10px;overflow:hidden;min-width:0;padding:0 0 16px}
.build-body>.eyebrow,.build-body>h1,.build-body>.help,.build-body>#build-status{margin:0}
.build-body>.help,.build-body>#build-status{font-size:18px;line-height:1.6;color:#5a554e}
.build-body .studio-miniature{display:flex;flex-direction:column;min-height:0;min-width:0;margin:4px 0;transform:none;box-shadow:none;overflow:hidden}
.build-body .mini-browser{height:20px;flex:none}
.build-body .mini-header{padding:10px 18px;flex:none}
.build-body .mini-content{display:flex;flex-direction:column;flex:1;min-height:0;padding:0 18px 8px}
.build-body .mini-gallery{flex:1;min-height:0}
.build-body .mini-work{display:flex;flex-direction:column;min-height:0;overflow:hidden}
.build-body .mini-work img{flex:1;min-height:0;height:0;object-fit:contain;transition:opacity 1.3s ease}
.build-body .mini-work:nth-child(2) img{transition-delay:.4s}
.build-body .mini-work:nth-child(3) img{transition-delay:.8s}
.build-body .mini-work span{flex:none;margin:7px 0}
.build-body .mini-copy{flex:none;padding-top:4px}
.build-body .mini-footer{flex:none;padding:5px}
.build-body .studio-miniature.empty .mini-work{height:auto}
.build-body #build-fill{transition:width 2.8s ease-in-out}
.build-body:has(#build-error:not([hidden])){grid-template-rows:auto auto auto minmax(0,1fr) 8px auto auto}
.build-body #build-error{margin:0}
@media(prefers-reduced-motion:reduce){.build-body #build-fill,.build-body .mini-work img{transition:none}}

/* Assemble the studio in place, with each piece given time to arrive. */
.build-body h1{overflow-wrap:anywhere}
.build-body .studio-miniature{animation:studio-frame 3s ease both}
.build-body .mini-header{transition:opacity 1.8s ease,transform 1.8s ease}
.build-body .mini-work{opacity:0;transform:translateY(16px);transition:opacity 1.6s ease,transform 1.6s ease;border:0;background:transparent}
.build-body .art-ready .mini-work,.build-body .empty[data-stage="2"] .mini-work,.build-body .empty[data-stage="3"] .mini-work,.build-body .empty[data-stage="4"] .mini-work,.build-body .empty[data-stage="5"] .mini-work{opacity:1;transform:none}
.build-body .mini-work:nth-child(2){transition-delay:1.3s}
.build-body .mini-work:nth-child(3){transition-delay:2.6s}
.build-body .mini-work img{transition:opacity 1.8s ease}
.build-body .mini-work:nth-child(2) img{transition-delay:1.3s}
.build-body .mini-work:nth-child(3) img{transition-delay:2.6s}
.build-body .mini-copy{transition:opacity 2s ease;transform-origin:left center}
.build-body .pages-ready .mini-copy i{animation:studio-line 2s ease both}
.build-body .pages-ready .mini-copy i:nth-child(2){animation-delay:.7s}
.build-body .pages-ready .mini-copy i:nth-child(3){animation-delay:1.4s}
.build-body .mini-footer{opacity:0;transition:opacity 2s ease}
.build-body .studio-miniature[data-stage="4"] .mini-footer,.build-body .studio-miniature[data-stage="5"] .mini-footer{opacity:1}
.build-body #build-fill{transition:width 5s cubic-bezier(.25,.1,.25,1)}
.build-body .studio-miniature:not(.finished) .mini-browser i{animation:studio-pulse 2.4s ease-in-out infinite}
.build-body .studio-miniature:not(.finished) .mini-browser i:nth-child(2){animation-delay:.3s}
.build-body .studio-miniature:not(.finished) .mini-browser i:nth-child(3){animation-delay:.6s}
@keyframes studio-frame{from{opacity:0;clip-path:inset(0 0 100% 0)}to{opacity:1;clip-path:inset(0)}}
@keyframes studio-line{from{transform:scaleX(0);opacity:0}to{transform:scaleX(1);opacity:1}}
@keyframes studio-pulse{50%{background:#B0400D}}
@media(prefers-reduced-motion:reduce){.build-body *, .build-body .studio-miniature{animation:none!important;transition:none!important}}
.build-body:has(.studio-miniature.finished) #build-fill{transition:none}

#build-stage-title,#build-stage-description{display:block}#build-stage-title{font-weight:600;color:#191918}#build-stage-description{margin-top:4px}.build-body #build-status{min-height:91px}

.signup-address{display:flex;align-items:center;height:52px;border:1px solid #ded9d2;border-radius:12px;background:white;margin-top:8px}
.signup-address input{height:50px;min-width:0;flex:1;border:0;margin:0;outline:none!important;border-radius:12px;box-shadow:none;text-align:right;padding-right:0}
.signup-address>span{font:600 18px/1.2 Inter,system-ui,sans-serif;letter-spacing:-.03em;text-transform:none;white-space:nowrap;color:#555;padding-right:14px}
.signup-address:hover{border-color:#a49b90}
.signup-address:focus-within{outline:2px solid #B0400D;outline-offset:1px;border-color:#B0400D}
.password-row{min-width:0}.password-row>.field{min-width:0}

/* Account credentials stay compact enough to read the rules beside the fields. */
[data-step="4"] h1{margin-bottom:20px}
[data-step="4"] .help{margin:12px 0;font-size:13px}
[data-step="4"] .password-show{margin:10px 0}
.linklike{border:0;background:none;color:#B0400D;text-decoration:underline;padding:0;cursor:pointer}.linklike:hover{color:#94350b}

.currency-results{display:flex;flex-wrap:wrap;gap:8px}.currency-results button{font:inherit;font-size:15px;text-align:left;background:#faf9f7;border:1px solid #ddd8d1;border-radius:11px;padding:10px 14px;color:#191918;cursor:pointer}.currency-results button:hover,.currency-results button:focus-visible{border-color:#B0400D}.currency-results:empty{display:none}

.ready-site-address{display:none;margin-left:auto;padding-left:82px;min-width:0;text-align:right}.build-actions.ready .ready-site-address{display:block}.ready-site-address>span{display:block;font:500 10px/1.5 Inter,system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#817c76;margin-bottom:5px}.ready-site-address>strong{display:block;font:600 18px/1.25 Inter,system-ui,sans-serif;letter-spacing:-.025em;color:#191918;overflow-wrap:anywhere}@media(max-width:760px){.build-actions{flex-wrap:wrap}.ready-site-address{flex-basis:100%;padding-left:0;margin-top:20px;text-align:left}}

.password-show a,.password-show a:visited{color:#191918;text-underline-offset:3px}.password-show a:hover{color:#B0400D}
/* Signup sits in the same 1920px framed sheet as the Studio shell on very wide screens. */
html:has(>body.signup-page){background:#d8d4ce}.signup-page{width:100%;max-width:1920px;margin:0 auto;border:solid #e2ded8;border-width:0 1px;box-shadow:0 0 16px rgba(0,0,0,.25),0 0 80px rgba(0,0,0,.45)}
@media(min-width:761px) and (min-height:1081px){html:has(>body.signup-page){min-height:100vh;display:flex;align-items:center}.signup-page{min-height:1080px;border-width:1px}.setup-rail{height:1078px}}

/* Help icons beside the field labels: same look as inside the studio. */
.help-dot{display:inline-grid;place-items:center;width:15px;height:15px;margin-left:4px;vertical-align:middle;color:#413e39;background:#ded9d1;border-radius:50%;font:700 10px/1 Inter,system-ui,sans-serif;letter-spacing:0;cursor:default;user-select:none}
.help-dot:hover,.help-dot:focus-visible{color:#1a1a19;background:#cfc9c0;outline:none}
.help-bubble{position:fixed;top:0;left:0;z-index:10000;display:block;box-sizing:border-box;width:max-content;max-width:min(268px,calc(100vw - 24px));padding:13px 15px;color:#3d3a35;background:#fff;border:1px solid #e2ded8;border-radius:10px;font:400 13px/1.5 Inter,system-ui,sans-serif;letter-spacing:0;text-align:left;text-transform:none;box-shadow:0 10px 30px rgba(26,26,25,.13);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .12s}
.help-bubble.is-visible{opacity:1;visibility:visible}
#address-status:empty{display:none}

/* Six steps now: keep the list centered in the dark panel instead of hanging from the top. */
@media(min-width:761px){.setup-brand{margin-bottom:32px}.setup-count{margin-top:auto}#setup-steps{margin-bottom:auto}.rail-note{margin-top:0;padding-top:24px}}
/* Make it yours: the number code replaces the account fields in the same spot, so the button never moves. */
@keyframes setup-swap{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
#signup-form>[data-step="5"]:not([hidden]){animation:setup-swap .28s ease both}
@media(prefers-reduced-motion:reduce){#signup-form>[data-step="5"]:not([hidden]){animation:none}}

/* The dark side is the sign-in panel: same logo block, same left edge, about a third of the screen. */
@font-face{font-family:"MuseumStudioWordmark";src:url("fonts/museum-studio-wordmark.woff2") format("woff2");font-weight:800;font-style:normal;font-display:block}
.login-brand-head{margin-left:-1px;font-optical-sizing:none}
.login-mark{display:block;width:56px;height:56px;fill:#fff}
.login-wordmark{margin:19px 0 0 -1px;color:#fff;font-family:"MuseumStudioWordmark",Inter,ui-sans-serif,system-ui,sans-serif;font-size:23.4px;font-weight:800;line-height:24px;letter-spacing:-.013em}
.login-wordmark span{color:#a2a2a0}
.login-product{margin:11px 0 0;color:#fff;font-size:17.1px;font-weight:500;line-height:18px;letter-spacing:0}
/* Short laptop screens: a smaller closing line so the steps and the line never collide. */
@media(min-width:761px) and (max-height:860px){.rail-note{font-size:clamp(22px,2.4vw,30px)}}

/* Student trial (computer width only): the extra School email line may make the account step taller than the fixed
   row, so let the row grow with it. The buttons stay below the Terms tick box instead of on top of it. */
@media(min-width:761px){#signup-form:has(#student-box:checked){grid-template-rows:minmax(600px,auto) auto auto}}

/* Advert sign-up only (signup_ad_view.php): its password screen keeps screen 1's space above the field. On screen 1
   the fields sit in a .password-row grid, so the text's 12px and the label's 10px add up at computer width. */
@media(min-width:761px){#ad-password>.field{margin-top:22px}}