/* Self-hosted DM Sans + Plus Jakarta Sans (SIL Open Font License 1.1): latin + latin-ext variable subsets in /fonts. */
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400 800;font-display:swap;src:url(/fonts/dm-sans-latin-ext-var.woff2?v=7566166d02) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400 800;font-display:swap;src:url(/fonts/dm-sans-latin-var.woff2?v=7566166d02) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:400 800;font-display:swap;src:url(/fonts/plus-jakarta-sans-latin-ext-var.woff2?v=7566166d02) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:400 800;font-display:swap;src:url(/fonts/plus-jakarta-sans-latin-var.woff2?v=7566166d02) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
:root{--ink:#21263e;--ink-soft:#666b7e;--canvas:#fbfafc;--lav:#8058e7;--purple:#7053de;--line:#e8e8f0;--shadow:0 14px 48px rgba(47,43,78,.095);--font:'Plus Jakarta Sans','DM Sans',Arial,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:95px}body{margin:0;background:var(--canvas);font-family:var(--font);color:var(--ink);-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button,input,select{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.55}img{max-width:100%;display:block}p{line-height:1.7}h1,h2,h3,h4,p,figure{margin-top:0}h1,h2,h3,h4{letter-spacing:-.045em}strong,b{font-weight:800}[hidden]{display:none!important}.wrap{width:min(1250px,calc(100% - 64px));margin:auto}.skip-link{position:fixed;z-index:1000;left:16px;top:-120px;background:#fff;color:#4b2fc0;font-weight:700;font-size:15px;line-height:1.2;padding:12px 20px;border-radius:12px;text-decoration:none;box-shadow:0 8px 24px rgba(40,25,90,.18)}.skip-link:focus,.skip-link:focus-visible{top:12px;outline:3px solid #7053de;outline-offset:2px}[id=main]:focus,main[tabindex="-1"]:focus{outline:none}.top-strip{background:#342d62;color:white;min-height:34px;display:flex;gap:12px;justify-content:center;align-items:center;text-align:center;padding:8px 15px}.top-strip strong{color:#dce9ff}.top-strip span{opacity:.5}.header{height:78px;position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);border-bottom:1px solid #ebebf1;backdrop-filter:blur(18px)}.nav-wrap{height:100%;display:flex;align-items:center;justify-content:space-between;gap:24px}.logo{display:inline-flex;align-items:center;gap:8px;font-size:27px;letter-spacing:-.085em;font-weight:800;white-space:nowrap}.logo-mark{width:35px;height:35px;border-radius:11px;background:linear-gradient(145deg,#7151df,#9c6de2);display:inline-grid;place-items:center;font-size:24px;color:white;transform:rotate(-9deg);letter-spacing:0}.logo-accent{color:var(--lav)}.logo b{color:#ff928f}.nav-links{display:flex;align-items:center;gap:33px;color:#474a5c;font-weight:750}.nav-links a{padding:10px 0}.nav-links a:hover,.nav-current{color:var(--lav)}.nav-create,.btn{border:0;display:inline-flex;align-items:center;justify-content:center;gap:16px;font-weight:800;transition:transform .18s ease,box-shadow .18s ease;white-space:nowrap}.nav-create:hover,.btn:hover{transform:translateY(-2px)}.nav-create{background:#262842;color:white;padding:14px 21px;border-radius:11px}.btn{min-height:53px;padding:15px 25px;border-radius:12px}.btn-dark{background:#262842;color:white;box-shadow:0 8px 22px rgba(35,36,68,.16)}.btn-dark:hover{background:#44416d}.btn-light{background:#fff;color:#302d4c;border:1px solid #e5e4ef}.hero{min-height:570px;display:grid;grid-template-columns:49% 51%;align-items:center;padding-block:65px 45px;gap:20px}.hero-copy{padding:20px 0 20px 20px;position:relative;z-index:2}.pill{display:inline-flex;align-items:center;gap:8px;background:#f1edff;border:1px solid #e4d9ff;color:#6552b0;padding:9px 14px;border-radius:999px;font-size:9px;letter-spacing:.1em;font-weight:800}.pill-dot{width:7px;height:7px;border-radius:50%;background:#8c72eb}.hero h1{font-size:clamp(62px,6.5vw,92px);line-height:1.055;margin:22px 0;letter-spacing:-.072em}.hero h1>span,.gradient-word,.teaser-copy h2 span,.inspo-hero h1 span{background:linear-gradient(90deg,#7955df,#b062d3 70%,#be4f7c);-webkit-background-clip:text;background-clip:text;color:transparent}.hero-copy>p{font-size:15px;max-width:465px;line-height:1.85;color:var(--ink-soft);margin-bottom:27px}.hero-buttons{display:flex;gap:10px;flex-wrap:wrap}.hero-proof{display:flex;flex-wrap:wrap;gap:11px 21px;font-size:10px;color:#777488;font-weight:700;margin-top:25px}.hero-art{height:520px;position:relative;isolation:isolate;overflow:visible}.hero-cloud{position:absolute;z-index:-1;inset:4% 3% 8% 7%;border-radius:41% 52% 47% 48%;background:linear-gradient(140deg,#e8dcff,#fff0e5 75%);transform:rotate(-9deg)}.cloud-two{inset:25% 3% 2% 27%;background:linear-gradient(145deg,#c9f2e7,#ede4ff);transform:rotate(12deg)}.hero-feature{position:absolute;width:50%;height:75%;top:4%;left:12%;transform:rotate(-7deg);background:white;padding:11px 11px 26px;box-shadow:0 30px 48px rgba(40,37,60,.22);border-radius:7px;z-index:2}.hero-feature img{height:100%;width:100%;object-fit:cover;border-radius:2px}.hero-feature figcaption{display:flex;justify-content:space-between;font-weight:800;font-size:10px;color:#57526a;padding:9px 1px}.hero-side{width:43%;height:68%;top:22%;left:52%;z-index:1;transform:rotate(9deg)}.hero-star{position:absolute;color:#fb9b86;font-size:64px;z-index:4;text-shadow:0 3px 8px #fff8}.star-a{top:0;right:3%}.star-b{bottom:8%;left:4%;font-size:33px;color:#917fe4}.hero-note{z-index:5;position:absolute;bottom:2%;left:14%;background:#fefaeb;border:1px solid #ffefcf;padding:15px 18px;transform:rotate(5deg);box-shadow:0 12px 20px #5e4c6c17;border-radius:12px}.hero-note span{display:block;font-size:8px;color:#987f61;letter-spacing:.13em;font-weight:800}.hero-note strong{font-size:14px;color:#5b4765}.quick-path{display:flex;align-items:center;min-height:116px;background:white;border:1px solid var(--line);border-radius:18px;padding:17px 27px;box-shadow:var(--shadow)}.quick-path>div{display:flex;align-items:center;gap:12px}.path-icon{width:52px;height:52px;display:grid;place-items:center;background:#efe9ff;border-radius:13px;color:#6945cf;font-size:24px;font-weight:800}.path-icon.mint{background:#dbf7ed;color:#248667}.path-icon.peach{background:#ffeae0;color:#e67f69}.quick-path strong,.quick-path small{display:block}.quick-path strong{font-size:12px;margin-bottom:4px}.quick-path small{font-size:10px;color:#9392a1}.path-arrow{font-size:25px;color:#cbc6d7}.section-padding{padding-block:95px}.eyebrow{display:block;font-size:10px;font-weight:800;letter-spacing:.145em;color:#8e64d9;margin-bottom:17px}.section-intro{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:27px}.section-intro h2,.teaser-copy h2,.studio-top h2,.faqs h2,.guide-head h2{font-size:clamp(36px,4.2vw,59px);line-height:1.14;letter-spacing:-.075em;margin-bottom:13px}.section-intro p{font-size:13px;color:var(--ink-soft);max-width:580px;margin-bottom:0}.textlink{font-weight:800;white-space:nowrap}.textlink:hover{text-decoration:underline}.discover-bar{display:flex;gap:20px;justify-content:space-between;align-items:center;margin:36px 0 16px}.searchbox{height:47px;background:white;border:1px solid #e6e5ee;border-radius:12px;display:flex;align-items:center;gap:11px;padding:0 15px;max-width:390px;width:100%;color:#9693ad}.searchbox:focus-within{outline:2px solid #b0a3fa}.searchbox input{border:0;outline:0;min-width:0;flex:1;color:var(--ink)}.result-count{font-weight:750}.filter-bar,.inspo-filters{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:13px}.filter,.inspo-filters button{border:1px solid #e7e4ee;padding:11px 16px;border-radius:30px;background:white;font-weight:800;white-space:nowrap}.filter.active,.inspo-filters button.active{background:#302a58;color:white;border-color:#302a58}.catalogue{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px 18px}.product{min-width:0}.product-photo{background:#eee9f1;position:relative;aspect-ratio:4/4.5;border-radius:15px;overflow:hidden;box-shadow:0 8px 20px #1d18401a}.product-photo>img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease}.product-photo:hover img{transform:scale(1.055)}.product-tag{position:absolute;top:11px;left:10px;border-radius:7px;padding:8px 10px;letter-spacing:.02em;font-weight:850;background:#fff;box-shadow:0 4px 12px #12132324}.product-photo button{position:absolute;bottom:11px;left:11px;right:11px;min-height:41px;background:#fff;color:#362f50;border:0;border-radius:10px;font-weight:800;display:flex;align-items:center;justify-content:space-between;padding:0 14px;box-shadow:0 5px 12px #1118}.product-photo button:hover{background:#f1eaff}.product-meta{display:flex;justify-content:space-between;align-items:center;margin-top:14px;gap:10px}.product-meta h3{font-size:15px;letter-spacing:-.04em;margin:0}.product-meta span{font-weight:800}.product>p{margin:7px 0 0}.small-note{font-size:11px;color:#938c9a;margin-top:25px}.inspo-teaser{background:#f0eefb;padding:72px 0}.teaser-grid{display:grid;grid-template-columns:1.18fr 1fr;gap:65px;align-items:center}.teaser-photos{height:400px;position:relative}.teaser-img{position:absolute;overflow:hidden;border:9px solid white;box-shadow:0 15px 30px #58518230;border-radius:14px}.teaser-img img{width:100%;height:100%;object-fit:cover}.teaser-img.a{width:67%;height:84%;top:3%;left:0;transform:rotate(-4deg)}.teaser-img.b{width:50%;height:75%;right:0;bottom:0;transform:rotate(7deg)}.teaser-chip{position:absolute;bottom:0;left:15%;z-index:2;display:block;transform:rotate(-5deg);border-radius:10px;background:#ffe7a7;padding:13px 17px;color:#6d5430;font-size:11px;font-weight:800;box-shadow:var(--shadow)}.teaser-copy h2{margin-bottom:20px}.teaser-copy>p{color:#746f88;font-size:14px;max-width:430px}.teaser-copy .btn{margin-top:9px}.teaser-disclaimer{font-size:10px!important;color:#9691a8!important;margin-top:18px}.process-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.process-grid article{background:white;border:1px solid var(--line);border-radius:17px;padding:20px;min-height:250px}.process-art{height:107px;border-radius:12px;background:#eee8ff;display:flex;align-items:center;justify-content:space-between;padding:0 26px;color:#a08add;font-size:17px;font-weight:800;margin-bottom:21px}.process-art span{font-size:48px}.process-art.pink{background:#ffe9ec;color:#e5a2ad}.process-art.green{background:#e2f9ef;color:#75bca1}.process-grid h3{font-size:19px;margin-bottom:8px}.process-grid p{font-size:12px;color:#7f7a89;margin:0}.studio-band{background:#f3f0fd;padding:83px 0 97px}.studio-top{display:flex;justify-content:space-between;gap:25px;margin-bottom:27px;align-items:end}.studio-top h2{margin-bottom:9px}.studio-top p{color:#7c768d;font-size:13px;max-width:720px}.studio-price{background:white;border-radius:14px;padding:16px 18px;display:flex;align-items:center;gap:17px;white-space:nowrap;border:1px solid #e8e3f6}.studio-price strong{font-size:29px}.studio-price span{font-size:10px;color:#8b869b;line-height:1.5}.studio-layout{display:grid;grid-template-columns:43% 57%;gap:16px;align-items:start}.editor-panel,.result-panel{background:white;border-radius:19px;border:1px solid #e8e5f1;box-shadow:0 14px 31px #2b194c0b;overflow:hidden}.editor-panel{padding:26px}.editor-header{display:flex;align-items:center;gap:13px;padding-bottom:22px;border-bottom:1px solid var(--line)}.editor-round{width:41px;height:41px;background:#f1eaff;border-radius:13px;display:grid;place-items:center;font-size:13px;font-weight:800}.editor-header h3,.result-top h3,.editor-header h2,.result-top h2{margin-bottom:3px;font-size:21px}.editor-header p{font-size:11px;color:#898399;margin:0}.editor-block{padding:22px 0;border-bottom:1px solid var(--line)}.editor-block-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:13px}.field-heading{font-weight:800;color:#3e3b56}.style-picker{display:grid;gap:8px}.mini-card{display:block;text-align:left;background:#f8f7fb;border:2px solid transparent;border-radius:10px;padding:4px;color:#56516c;overflow:hidden;min-width:0}.mini-card.active{background:#efe9ff;border-color:#885fe2}.mini-card img{border-radius:7px}.mini-card>span{display:block;font-weight:800;margin:6px 2px;overflow:hidden;text-overflow:ellipsis}.helper-copy,.studio-footnote{font-size:10px;color:#9c98a8;margin:10px 0 0}.upload-box{background:#faf9ff;border:1.5px dashed #c8b9e9;min-height:137px;border-radius:13px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:6px;cursor:pointer}.upload-box.dragover{background:#ece5ff;border-color:#6f51cb}.upload-icon{display:grid;place-items:center;width:39px;height:39px;border-radius:12px;background:#f0eaff;color:#745bd0;font-size:23px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.form-field{display:block;font-weight:800;color:#4e495f}.form-field small{color:#9c98ae;font-weight:500}.form-field input,.form-field select{display:block;width:100%;height:43px;margin-top:8px;border:1px solid #e6e4f0;border-radius:10px;background:white;padding:0 12px;color:#38344e}.form-field input:focus,.form-field select:focus{outline:2px solid #b6a3f1}.turnstile-mount{margin:14px 0}.connection-status{border-radius:11px;background:#faf7e8;border:1px solid #f6ecd2;color:#827153;padding:11px 12px;margin:19px 0 13px;display:flex;align-items:center;gap:9px;font-size:10px;line-height:1.5}.state-indicator{width:9px;height:9px;border-radius:50%;background:#e5b965;flex:none}.connection-status.ok{background:#ebfaf0;color:#397357}.connection-status.ok .state-indicator{background:#5ac68d}.full-button{width:100%}.result-panel{padding-bottom:0;min-width:0}.result-top{padding:25px 24px;display:flex;justify-content:space-between;gap:10px}.result-top .eyebrow{margin-bottom:6px}.result-state{white-space:nowrap;font-size:9px;border-radius:6px;padding:7px 9px;background:#f2effa;color:#8b75b1;font-weight:800;letter-spacing:.03em}.result-visuals{display:grid;grid-template-columns:1fr 1fr;gap:11px;padding:0 20px}.result-column{min-width:0}.result-image{position:relative;aspect-ratio:1/1.1;background:#f7f6fb;border-radius:12px;overflow:hidden}.result-image>img{width:100%;height:100%;object-fit:contain}.result-image-label{display:block;font-size:9px;font-weight:800;letter-spacing:.09em;margin:10px 0;color:#9c96ad}.preview-placeholder{display:flex;justify-content:center;align-items:center;flex-direction:column;height:100%;text-align:center;padding:20px;background:#f6f3fc}.preview-placeholder>span{font-size:35px;color:#8c76cc;margin-bottom:15px}.preview-placeholder p{font-size:14px;font-weight:800;margin:0 0 5px}.preview-placeholder small{font-size:10px;color:#a29bab}.example-placeholder{padding:0;position:relative}.example-placeholder>img{width:100%;height:100%;object-fit:cover;filter:blur(2px) brightness(.7)}.example-placeholder .example-veil{justify-content:flex-end;padding-bottom:14%}@media(max-width:600px){.example-placeholder .example-veil{padding-bottom:8%}.example-placeholder .example-veil span{display:none}}.example-veil{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#1f1a4466;color:white;padding:12px}.example-veil span{color:#e5cbff;font-size:31px}.example-veil p{font-size:13px;margin:8px 0 4px}.example-veil small{font-size:10px;color:#efe6ff}.result-caption{display:flex;align-items:center;gap:17px;margin:11px 20px 22px;background:#f8f7fd;padding:12px;border-radius:12px}.chosen-example{display:flex;gap:9px;align-items:center;flex-shrink:0}.chosen-example img{width:40px;height:43px;object-fit:cover;border-radius:5px}.chosen-example small,.chosen-example strong{display:block}.chosen-example small{font-size:8px;color:#aaa4bb}.chosen-example strong{font-size:10px}.result-caption>p{margin:0;padding-left:16px;border-left:1px solid #dcd7ea}.purchase-panel{margin:20px;background:#f1eefc;border-radius:13px;padding:19px}.purchase-price{display:flex;justify-content:space-between;gap:10px}.purchase-price h3{font-size:20px}.purchase-price>strong{font-size:25px}.full-field{margin-bottom:14px}.approve-label{display:flex;align-items:start;gap:9px;font-size:10px;color:#625d77;line-height:1.6;margin-bottom:13px}.result-bottom{background:#faf9fd;border-top:1px solid var(--line);padding:16px 20px;text-align:center}.result-bottom a{font-weight:800;color:#7452d1}.faqs{display:grid;grid-template-columns:41% 59%;gap:40px}.faqs>div>p{font-size:13px;color:#8b8694}.faq-list details{border-bottom:1px solid var(--line);padding:15px 3px}.faq-list summary{font-weight:800;cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between}.faq-list summary::-webkit-details-marker{display:none}.faq-list summary:after{content:'+';font-size:21px;font-weight:400;color:#8960db}.faq-list details[open] summary:after{content:'−'}.faq-list p{margin:12px 0 0}.closing{background:#30264e;color:white}.closing-inner{display:flex;align-items:center;justify-content:space-around;gap:50px;padding-block:60px}.closing-inner span{font-size:10px;letter-spacing:.11em;color:#e3c9ff}.closing h2{font-size:clamp(36px,4.5vw,65px);line-height:1.18;margin:19px 0 27px}.closing h2 i{color:#e6bdff;font-style:normal}.closing img{width:240px;height:240px;object-fit:cover;border:10px solid white;transform:rotate(7deg);box-shadow:0 10px 22px #0003;border-radius:3px}.footer{background:white;padding:55px 0 40px}.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1.3fr;gap:45px}.footer p{line-height:1.8;margin:14px 0}.footer h4,.footer .footer-heading{font-size:10px;letter-spacing:.12em;margin:6px 0 21px;color:#8a849e;font-weight:800;line-height:1.3}.footer a:not(.logo){display:block;margin:11px 0}.toast{position:fixed;z-index:90;left:50%;bottom:22px;transform:translateX(-50%);background:#2f2b49;color:white;padding:15px 19px;border-radius:11px;box-shadow:var(--shadow);max-width:min(520px,95vw)}.toast.error{background:#9e4b58}.veil{position:fixed;z-index:110;inset:0;background:#241c41a8;display:grid;place-items:center;padding:16px}.veil-box{background:white;border-radius:18px;text-align:center;max-width:450px;width:100%;padding:38px}.veil-box .loading-mark{font-size:45px;color:#7f5edd}.veil-box h3{font-size:25px}.veil-box p{font-size:12px;color:#888396}.loader{height:5px;background:#eeeafa;border-radius:8px;overflow:hidden}.loader span{display:block;width:30%;height:100%;background:#8058e7;animation:load 1.1s infinite alternate}@keyframes load{to{transform:translateX(235%)}}
/* Inspiration gallery */
.inspo-hero{display:grid;grid-template-columns:47% 53%;gap:35px;align-items:center;padding-top:65px;padding-bottom:70px;min-height:560px}.inspo-hero-copy{padding:15px 0}.inspo-hero h1{font-size:clamp(48px,5.6vw,78px);letter-spacing:-.08em;line-height:1.12;margin-bottom:19px}.inspo-hero-copy>p{max-width:480px;color:#777187;font-size:14px}.inspo-hero-actions{display:flex;gap:11px;flex-wrap:wrap;margin-top:25px}.mockup-note{font-size:10px!important;margin-top:22px;color:#aaa0b0!important}.inspo-hero-photo{height:490px;position:relative;border-radius:22px;overflow:hidden;box-shadow:var(--shadow)}.inspo-hero-photo>img{width:100%;height:100%;object-fit:cover}.floating-info{position:absolute;bottom:20px;left:20px;background:#fffef6ee;backdrop-filter:blur(10px);border-radius:12px;padding:16px 21px;box-shadow:0 8px 24px #0001}.floating-info span{display:block;font-size:9px;color:#785b95;font-weight:800;letter-spacing:.12em;margin-bottom:6px}.floating-info strong{font-size:13px}.inspo-filters{margin:22px 0 28px}.inspo-masonry{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.inspo-card{min-width:0;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 7px 24px #2b27410d}.inspo-card img{width:100%;height:290px;object-fit:cover;transition:transform .3s}.inspo-card:hover img{transform:scale(1.03)}.inspo-card img.top-focus,.room-panel>img.top-focus{object-position:center 12%}.inspo-card{overflow:hidden}.inspo-card-body{padding:19px 20px 20px}.inspo-card-body span{color:#9269c6;font-size:9px;letter-spacing:.1em;font-weight:800}.inspo-card-body h3{margin:8px 0 5px;font-size:18px}.inspo-card-body p{font-size:11px;color:#858099;margin:0 0 15px}.inspo-card-body button{background:#f1edff;border:0;color:#6f50ce;border-radius:8px;padding:10px 13px;font-weight:800}.inspo-card-body button:hover{background:#e6dcff}.print-guide{background:#f1effc;padding:85px 0}.guide-head{max-width:750px}.guide-head p{font-size:13px;color:#77718b}.guide-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin-top:34px}.guide-grid article{background:white;border:1px solid #e7e3f6;border-radius:15px;padding:24px 20px;position:relative;min-height:224px}.guide-num{font-size:10px;color:#7a6ba3;font-weight:800}.guide-emoji{font-size:37px;color:#8b6bdd;margin:15px 0}.guide-grid h3{font-size:15px;margin:0 0 9px}.guide-grid p{font-size:11px;color:#858096;margin:0}.guide-reminder{display:flex;align-items:start;gap:12px;background:#e4def6;border-radius:12px;padding:20px 22px;margin-top:20px;color:#716586}.guide-reminder>span{color:#815acc;font-size:20px}.guide-reminder p{font-size:11px;margin:0}.gallery-cta{margin-top:70px;margin-bottom:70px;border-radius:22px;padding:40px 8% 35px;background:#ffe8e8;display:flex;align-items:center;justify-content:space-between;gap:50px;overflow:hidden}.gallery-cta h2{font-size:clamp(30px,4vw,53px);max-width:650px}.gallery-cta p{font-size:13px;color:#7d7185}.gallery-cta img{width:200px;height:240px;object-fit:cover;border:10px solid white;transform:rotate(8deg);border-radius:3px;box-shadow:var(--shadow)}.room-dialog{position:fixed;z-index:140;inset:0;display:flex;align-items:center;justify-content:center;padding:20px}.room-backdrop{position:absolute;inset:0;background:#1d1833b8}.room-panel{background:white;position:relative;max-width:850px;width:100%;border-radius:18px;overflow:hidden;display:grid;grid-template-columns:1.15fr 1fr;box-shadow:0 30px 70px #0004}.room-panel>img{height:410px;width:100%;object-fit:cover}.room-text{padding:45px 30px;align-self:center}.room-text h2{font-size:31px}.room-text p{font-size:12px;color:#7f7a8f}.room-disclaimer{font-size:10px!important;color:#9d98a5!important;margin:20px 0}.room-close{position:absolute;top:12px;right:12px;width:33px;height:33px;background:#fff;border:1px solid #e9e3ed;border-radius:9px;z-index:2;color:#574967}.legal-main{max-width:800px;padding:75px 0 120px}.legal-main h1{font-size:50px}.legal-main h2{font-size:25px;margin-top:30px}.legal-main p{font-size:13px;color:#777187}.legal-main a{text-decoration:underline;color:#7956c4}
@media(max-width:1080px){.nav-links{gap:15px}.hero{grid-template-columns:1fr 1fr}.hero h1{font-size:65px}.hero-art{height:450px}.catalogue{grid-template-columns:repeat(4,minmax(0,1fr))}.style-picker{gap:5px}.studio-layout{grid-template-columns:46% 54%}.teaser-grid{gap:30px}}@media(max-width:880px){.wrap{width:calc(100% - 40px)}.nav-links{display:none}.hero{grid-template-columns:1fr;gap:0;padding-top:50px}.hero-copy{padding-left:0}.hero h1{font-size:75px}.hero-art{height:450px;max-width:630px;width:100%;margin:auto}.hero-feature{height:83%;top:4%;left:13%;width:46%}.hero-side{left:53%;top:17%;height:74%}.quick-path{margin-top:20px}.catalogue{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.teaser-grid{grid-template-columns:1fr;gap:30px}.teaser-photos{max-width:650px;width:100%;margin:auto}.teaser-copy{max-width:680px}.studio-layout{grid-template-columns:1fr}.result-visuals{max-width:800px;margin:auto}.faqs{grid-template-columns:1fr}.inspo-hero{grid-template-columns:1fr;padding-top:45px;gap:25px}.inspo-hero-photo{height:480px}.inspo-masonry{grid-template-columns:repeat(2,minmax(0,1fr))}.guide-grid{grid-template-columns:repeat(2,1fr)}.footer-grid{grid-template-columns:1.4fr 1fr 1fr}}
@media(max-width:600px){.wrap{width:calc(100% - 30px)}.top-strip span{display:none}.header{height:65px}.logo{font-size:24px}.logo-mark{height:31px;width:31px}.hero{padding-top:34px;padding-bottom:12px}.hero h1{font-size:clamp(50px,12vw,67px);margin:20px 0}.hero-buttons{gap:8px}.hero-buttons .btn{flex:1;padding:13px 10px}.hero-proof{font-size:9px;gap:8px 12px}.hero-art{height:340px}.hero-feature{height:77%;width:48%;left:11%;padding:7px 7px 24px}.hero-side{top:19%;height:67%}.hero-feature figcaption{font-size:8px;margin-top:0}.hero-star{font-size:35px}.hero-note{left:11%;padding:9px 10px}.hero-note span{font-size:6px}.hero-note strong{font-size:10px}.quick-path{min-height:90px}.quick-path>div{gap:6px;flex:1;min-width:0}.quick-path>div .path-icon{height:30px;width:30px;font-size:17px;flex-shrink:0}.path-arrow{font-size:14px;margin:0 4px}.section-padding{padding-block:67px}.section-intro{display:block}.section-intro h2,.studio-top h2,.teaser-copy h2,.faqs h2,.guide-head h2{font-size:39px}.section-intro .textlink{display:inline-block;margin-top:15px}.discover-bar{margin-top:27px}.searchbox{height:44px}.searchbox input{font-size:10px}.filter-bar{margin-right:-15px;padding-right:15px}.filter{font-size:10px;padding:10px 12px}.catalogue{gap:17px 11px}.product-photo{border-radius:10px}.product-tag{font-size:7px;padding:6px;top:7px;left:7px}.product-photo button{left:6px;right:6px;bottom:6px;border-radius:8px;font-size:9px;padding:0 9px;min-height:34px}.product-meta{gap:3px}.product-meta h3{font-size:13px}.product>p{font-size:9px}.inspo-teaser{padding:50px 0}.teaser-photos{height:290px}.teaser-chip{font-size:10px;padding:10px}.teaser-copy>p{font-size:12px}.process-grid{grid-template-columns:1fr}.process-grid article{min-height:160px}.process-art{height:65px;margin-bottom:16px}.process-art span{font-size:30px}.studio-band{padding:58px 0}.studio-top{display:block}.studio-price{display:inline-flex;margin:12px 0 5px}.editor-panel{padding:17px}.editor-block{padding:18px 0}.form-grid{grid-template-columns:1fr}.result-top{padding:19px 15px}.result-top h3,.result-top h2{font-size:18px}.result-state{font-size:8px}.result-visuals{padding:0 9px;gap:7px}.result-image{border-radius:8px}.preview-placeholder{padding:8px}.preview-placeholder>span{font-size:23px}.preview-placeholder p,.example-veil p{font-size:11px}.preview-placeholder small,.example-veil small{font-size:8px}.result-caption{display:block;margin:11px 9px}.result-caption>p{border-left:0;border-top:1px solid #dfdae8;padding:10px 0 0;margin-top:9px}.faqs{gap:12px}.closing-inner{gap:15px;padding:54px 0}.closing h2{font-size:37px}.closing img{width:120px;height:150px;border-width:5px}.footer-grid{grid-template-columns:1fr 1fr;gap:18px;padding-bottom:20px}.footer-grid>div:first-child{grid-column:span 2}.inspo-hero h1{font-size:50px}.inspo-hero-photo{height:350px}.inspo-hero-actions .btn{font-size:11px;padding:12px}.inspo-masonry{grid-template-columns:1fr;gap:14px}.inspo-card img{height:300px}.guide-grid{grid-template-columns:1fr;gap:12px}.guide-grid article{min-height:0}.gallery-cta{padding:30px 20px;gap:12px}.gallery-cta h2{font-size:30px}.gallery-cta img{height:135px;width:100px;border-width:4px}.room-panel{grid-template-columns:1fr;max-height:90vh;overflow:auto}.room-panel>img{height:260px}.room-text{padding:25px}.room-text h2{font-size:23px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
/* Small-screen layout hygiene: decorative, rotated cards must never create page scroll. */
@media(max-width:600px){.hero-art{overflow:hidden}.hero-side{left:51%;width:39%}.hero-copy{min-width:0}.logo{min-width:0}}
.no-styles{grid-column:1/-1;padding:40px;text-align:center;background:white;border:1px solid var(--line);border-radius:16px}.no-styles strong{font-size:17px}.no-styles p{font-size:12px;color:var(--ink-soft);margin-top:7px}
/* V6: product-first homepage, gallery becomes supporting content */
.home-studio{background:radial-gradient(ellipse 50% 40% at 100% 3%,#f6d9ff 0%,transparent 85%),linear-gradient(135deg,#f3f0ff,#fff9f6 85%);padding-top:58px;padding-bottom:76px}
.home-studio .studio-top{align-items:end;margin-bottom:31px;gap:20px}
.home-studio .studio-top>div:first-child{max-width:880px}
.home-studio .studio-top h1{font-size:clamp(40px,5.4vw,75px);line-height:1.07;letter-spacing:-.065em;max-width:860px;margin:12px 0 15px}
.home-studio .studio-hero-description{font-size:clamp(13px,1.28vw,17px);max-width:730px;line-height:1.75;color:var(--ink-soft)}
.home-studio .studio-value-points{display:flex;flex-wrap:wrap;gap:11px 22px;margin-top:17px;font-weight:700}
.home-studio .studio-price{background:#fff;box-shadow:0 12px 32px rgba(55,35,95,.09);border:1px solid #eae4f5;min-width:170px;border-radius:16px;padding:17px 20px}
.home-studio .studio-price strong{font-size:clamp(22px,2.6vw,34px);letter-spacing:-.06em}
.home-studio .studio-price span{font-size:10px;line-height:1.5}
.home-studio .studio-layout{box-shadow:0 22px 54px rgba(48,30,84,.12);border-radius:22px;overflow:hidden;border:1px solid #eee6f3}
.home-studio .editor-panel{background:#fff}
.home-studio .result-panel{background:#fdfdff}
.home-studio .mini-card.active{outline:2px solid #7956e9;outline-offset:1px}
.home-studio .upload-box{background:linear-gradient(120deg,#f8f6ff,#fff8f9);border:2px dashed #d1c4f5}
.home-studio #generateBtn{min-height:54px;font-size:14px;box-shadow:0 7px 16px rgba(93,72,154,.1)}
.home-studio .studio-footnote{line-height:1.6}
.story-hero{margin-top:38px;margin-bottom:60px;border-radius:24px;background:linear-gradient(120deg,#fef8fa,#f4f0ff);padding-inline:48px}
.story-hero h2{font-size:clamp(43px,5.3vw,75px);line-height:1.03;letter-spacing:-.07em;margin:20px 0}
.story-hero .hero-art{overflow:hidden}
@media(max-width:880px){.home-studio{padding-top:35px}.home-studio .studio-top h1{max-width:660px}.story-hero{padding-inline:24px}}
@media(max-width:600px){.home-studio{padding:30px 0 52px}.home-studio .studio-top h1{font-size:clamp(40px,11vw,51px)}.home-studio .studio-hero-description{font-size:13px;line-height:1.65}.home-studio .studio-value-points{gap:7px 13px;font-size:9px}.home-studio .studio-price{padding:11px 14px;margin:16px 0 0}.home-studio .studio-layout{border-radius:14px}.story-hero{margin-top:15px;padding:30px 17px 0}.story-hero h2{font-size:clamp(39px,10vw,52px)}.story-hero .hero-art{height:310px}}
.legal-main ul,.legal-main ol{font-size:13px;color:#777187;padding-left:20px;margin:8px 0}.legal-main li{margin:4px 0}.legal-table{overflow-x:auto;margin:14px 0}.legal-main table{border-collapse:collapse;font-size:12.5px;color:#5f5a70;min-width:520px;width:100%}.legal-main th,.legal-main td{border:1px solid #e6e1ee;padding:8px 10px;text-align:left;vertical-align:top}.legal-main th{background:#f6f3fb;color:#2b2540}.legal-main hr{border:0;border-top:1px solid #e6e1ee;margin:24px 0}
.consent-label span{font-size:12px;line-height:1.45}.consent-label a{text-decoration:underline}.coming-soon{border:1px solid #e3d9f5;background:#faf7ff;border-radius:14px;padding:16px 18px;margin:12px 0}.coming-soon p{font-size:13px;color:#5f5a70;margin:6px 0 10px}.coming-soon form{display:grid;gap:10px}.waitlist-done{font-weight:600;color:#2f6b4f}.success-note{font-size:12.5px;color:#6d6880;margin-top:14px;line-height:1.5}.success-note a{text-decoration:underline;color:#7956c4}.orders-list{display:grid;gap:14px;margin:24px 0}.order-card{border:1px solid #e6e1ee;border-radius:14px;padding:16px 18px;background:#fff}.order-card h3{font-size:18px;margin:0 0 4px}.order-card p{font-size:13px;color:#6d6880;margin:4px 0 10px}.order-card .row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.link-btn{background:none;border:0;color:#7956c4;text-decoration:underline;cursor:pointer;font:inherit;font-size:13px}
.currency-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:4px 0 12px}.currency-field{font-size:12px;font-weight:700;color:#4b4560}.currency-row select{border:1px solid #e0d9ec;border-radius:10px;padding:7px 10px;font:inherit;font-size:13px;background:#fff;max-width:100%}.currency-note{flex-basis:100%;font-size:11.5px;color:#8a8499}
/* audit: 768 overflow */@media(max-width:880px){.studio-top{flex-wrap:wrap}}
/* audit: checkbox tap targets */#photoRights,#consentTerms,#acceptPreview,#waitlistConsent{min-width:20px;min-height:20px}
/* newsletter + coupon (V6 tokens) */.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.newsletter-band{background:linear-gradient(135deg,#f3effe 0%,#fdf0f5 100%);padding:64px 0}.newsletter-card{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:center;background:#fff;border:1px solid #ebe5f7;border-radius:22px;box-shadow:var(--shadow);padding:38px 44px}.newsletter-copy h2{font-size:clamp(30px,3.4vw,46px);line-height:1.1;letter-spacing:-.06em;margin:0 0 12px}.newsletter-copy p{font-size:13px;color:var(--ink-soft);line-height:1.7;margin:0;max-width:460px}.newsletter-form .nl-row{display:flex;gap:8px}.newsletter-form .nl-email{flex:1;min-width:0;height:53px;border:1px solid #e0dbee;border-radius:12px;padding:0 16px;font:inherit;font-size:14px;color:var(--ink);background:#fff}.newsletter-form .nl-email:focus{outline:2px solid #b6a3f1;outline-offset:1px}.newsletter-form .nl-submit{flex:none;margin:0}.newsletter-form .nl-submit:disabled{opacity:.6}.nl-hp{position:absolute!important;left:-10000px;width:1px;height:1px;overflow:hidden}.nl-turnstile:not(:empty){margin-top:10px}.nl-fine{font-size:11px;color:#8f8aa3;margin:10px 0 0}.nl-fine a{color:#7559cd;text-decoration:underline}.nl-status{font-size:12px;font-weight:700;margin:8px 0 0;min-height:1em}.nl-status.ok{color:#23845f}.nl-status.error{color:#c23a5b}.footer-news{margin-top:22px;max-width:360px}.footer-news h4,.footer-news .footer-heading{margin-bottom:12px!important}.footer-news .nl-email{height:43px;font-size:12px}.footer-news .nl-submit{min-height:43px;padding:10px 16px;font-size:12px}.footer .footer-news .nl-fine{font-size:10px;margin:8px 0 0;line-height:1.5}.footer .footer-news .nl-fine a{display:inline;margin:0;font-size:10px;color:#7559cd}.footer .footer-news .nl-status{font-size:11px}
.price-stack{display:flex;flex-direction:column;align-items:flex-end;gap:2px}.price-stack>strong{font-size:25px}.list-price{font-size:13px;color:#9c98ae;font-weight:700}.coupon-row{margin:2px 0 12px}.coupon-label{display:block;font-size:11px;font-weight:800;color:#4e495f;margin-bottom:7px}.coupon-input{display:flex;gap:8px}.coupon-input input{flex:1;min-width:0;height:43px;border:1px solid #e6e4f0;border-radius:10px;padding:0 12px;font:inherit;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#38344e;background:#fff}.coupon-input input:focus{outline:2px solid #b6a3f1}.coupon-input .btn{min-height:43px;padding:8px 18px;margin:0;font-size:12px}.coupon-status{font-size:11px;font-weight:700;margin:7px 0 0;min-height:1em}.coupon-status.ok{color:#23845f}.coupon-status.error{color:#c23a5b}.coupon-remove{background:none;border:0;padding:0;font:inherit;font-size:11px;color:#7559cd;text-decoration:underline;cursor:pointer}.marketing-row{margin:-2px 0 14px;padding:10px 12px;border-radius:10px;background:#f8f6fd}.marketing-note{font-size:10px;color:#625d77;margin:0 0 6px;line-height:1.5}.optout-label{display:flex;align-items:center;gap:8px;font-size:10px;color:#625d77}.optout-label input{min-width:18px;min-height:18px;margin:0}
@media(max-width:880px){.newsletter-card{grid-template-columns:1fr;gap:22px;padding:30px 26px}}@media(max-width:600px){.newsletter-band{padding:44px 0}.newsletter-card{padding:24px 18px;border-radius:18px}.newsletter-copy h2{font-size:31px}.newsletter-form .nl-row{flex-direction:column}.newsletter-form .nl-email{flex:none;width:100%}.footer-news .nl-email{flex:1;width:auto}.newsletter-form .nl-submit{width:100%}.footer-news{max-width:none}.footer-news .nl-row{flex-direction:row}.footer-news .nl-submit{width:auto}}
/* pre-launch additions (V6 tokens) */.upload-box{position:relative}.upload-box:focus-within{outline:3px solid #b6a3f1;outline-offset:2px}.price-about{display:block;font-size:10px;color:#8b8694;font-weight:600;margin-top:2px;text-align:right}.price-about:empty{display:none}.studio-price .price-about{text-align:left}.redo-promise{font-size:11px;color:#3f8a64;font-weight:600;margin:8px 0 0}.redo-promise a{color:#5b45c9}.secure-note{display:block;text-align:center;text-wrap:balance;font-size:11px;color:#625d72;font-weight:600;margin:10px 0 0;line-height:1.45}.secure-note svg{display:inline-block;vertical-align:-1px;margin-right:4px}.coupon-fine{font-size:10px;color:#8b8694;margin:4px 0 0}.coupon-fine a{color:#5b45c9}
.preview-email{margin:16px 0 4px;padding:16px 18px;border:1px dashed #cbbcf3;border-radius:16px;background:linear-gradient(120deg,#faf8ff,#fff8fa)}.pe-head strong{display:block;font-size:14px;color:var(--ink);letter-spacing:-.02em}.pe-head p{font-size:11px;color:#777086;margin:4px 0 10px}.pe-row{display:flex;gap:8px}.pe-email{flex:1;min-width:0;height:44px;border:1px solid #e0dbee;border-radius:12px;padding:0 14px;font:inherit;font-size:13px;color:var(--ink);background:#fff}.pe-email:focus{outline:2px solid #b6a3f1;outline-offset:1px}.pe-row .btn{flex:none;margin:0;min-height:44px}.pe-consent{display:flex;gap:8px;align-items:flex-start;font-size:11px;color:#625d72;margin:10px 0 0;cursor:pointer}.pe-consent input{margin-top:2px;flex:none;width:16px;height:16px;accent-color:#7053de}.pe-status{font-size:12px;font-weight:700;margin:8px 0 0}.pe-status:empty{display:none}.pe-status.ok{color:#2f8a5b}.pe-status.error{color:#c0395a}.pe-fine{font-size:10px;color:#9a95a8;margin:6px 0 0}.pe-fine a{color:#5b45c9}.pe-turnstile{margin-top:10px}
.before-after .section-intro p{max-width:460px;color:#777086;font-size:14px}.ba-track{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:26px}.ba-pair{margin:0;background:#fff;border:1px solid var(--line);border-radius:22px;padding:14px;box-shadow:0 14px 40px rgba(48,33,108,.06)}.ba-imgs{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px}.ba-img{position:relative;border-radius:14px;overflow:hidden;background:#f3effe;aspect-ratio:2/3}.ba-img img{width:100%;height:100%;object-fit:cover;display:block}.ba-tag{position:absolute;left:8px;top:8px;background:rgba(255,255,255,.92);color:#5d5870;font-size:9px;font-weight:800;letter-spacing:.12em;padding:4px 7px;border-radius:999px}.ba-tag.art{background:#7053de;color:#fff}.ba-arrow{font-size:18px;color:#8960db;font-weight:800}.ba-pair figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:12px 4px 2px}.ba-pair figcaption strong{font-size:15px;color:var(--ink);letter-spacing:-.03em}.ba-pair figcaption span{font-size:11px;color:#8b8694}.ba-note{margin-top:16px}
.notfound{min-height:62vh;display:flex;align-items:center}.notfound-card{max-width:620px;margin:0 auto;text-align:center;padding:48px 24px}.notfound-card h1{font-size:clamp(38px,6vw,64px);line-height:1.05;letter-spacing:-.07em;margin:12px 0}.notfound-card p{color:#777086}.notfound-links{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:22px}
@media(max-width:820px){.ba-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;padding:4px 2px 14px;margin-left:-4px;margin-right:-4px;-webkit-overflow-scrolling:touch}.ba-pair{flex:0 0 86%;scroll-snap-align:center}}
@media(max-width:600px){.pe-row{flex-direction:column}.pe-email{flex:none;width:100%}.pe-row .btn{width:100%}}
.eu-waitlist>p{font-size:13px;line-height:1.5;margin:6px 0 10px}
@media(max-width:600px){.studio-price{max-width:100%;flex-wrap:wrap;row-gap:4px}.studio-price .price-about{white-space:normal;flex-basis:100%;order:3}}
/* Tiers, free-preview allowance, preview actions */
.preview-allowance{margin:9px 0 0;font-size:11px;font-weight:700;color:#5f4bb8;background:#f3efff;border:1px solid #e3dafb;border-radius:10px;padding:7px 11px;line-height:1.5}.preview-allowance.none-left{color:#9a3d5c;background:#fff1f5;border-color:#f6d3df}
.tier-picker{border:0;margin:14px 0 4px;padding:0;display:grid;grid-template-columns:1fr 1.15fr;gap:10px}
.tier-card{position:relative;display:flex;flex-direction:column;gap:6px;padding:14px 14px 13px;border:1.5px solid var(--line);border-radius:14px;background:#fff;cursor:pointer;transition:border-color .15s,box-shadow .15s}
.tier-card input{position:absolute;opacity:0;pointer-events:none}.tier-card:focus-within{outline:2px solid #7956e9;outline-offset:2px}
.tier-card.selected{border-color:#7956e9;box-shadow:0 8px 22px rgba(112,83,222,.16)}.tier-featured{background:linear-gradient(160deg,#faf7ff,#fff)}
.tier-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px}.tier-head strong{font-size:15px}.tier-head b{font-size:18px;letter-spacing:-.04em}
.tier-list{line-height:1.55}
.tier-badge{position:absolute;top:-9px;right:12px;background:#7053de;color:#fff;font-weight:800;letter-spacing:.12em;border-radius:999px;padding:3px 9px}
.from-price{font-size:12px;font-weight:700}.studio-price .from-label{display:block;font-size:9px;font-weight:800;letter-spacing:.14em;color:#8e64d9}
.preview-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:12px 0 4px}.preview-actions .btn{padding:10px 14px;font-size:12px}
.preview-actions-note{flex-basis:100%;font-size:11px;color:var(--ink-soft);margin:0}.share-status{flex-basis:100%;font-size:12px;color:#4e495f;margin:0;line-height:1.5;word-break:break-word}
@media(max-width:600px){.tier-picker{grid-template-columns:1fr}.preview-actions .btn{flex:1 1 auto}}
/* Success page */
.success-main{padding:42px 0 70px}
.reveal{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:44px;align-items:start}
.reveal-frame{position:relative;aspect-ratio:2/3;border-radius:20px;overflow:hidden;background:linear-gradient(135deg,#f3f0ff,#fff6f2);box-shadow:0 22px 54px rgba(48,30,84,.14);border:1px solid #eee6f3}
.reveal-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.02);transition:opacity 1.1s ease,transform 1.4s ease}
.reveal-frame.is-revealed img{opacity:1;transform:none}.reveal-frame.is-revealed .reveal-wait{opacity:0;pointer-events:none}
.reveal-wait{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;padding:24px;color:#5f5a72;font-size:13px;transition:opacity .6s}
.reveal-spinner{width:38px;height:38px;border-radius:50%;border:3px solid #e2dafb;border-top-color:#7053de;animation:dpspin 1s linear infinite}@keyframes dpspin{to{transform:rotate(360deg)}}
.reveal-copy h1{font-size:clamp(34px,4.4vw,56px);line-height:1.08;letter-spacing:-.06em;margin:10px 0 14px}
.reveal-lead{color:var(--ink-soft);font-size:15px;margin-bottom:18px;min-height:3.4em}
#downloadBox .full-button{display:flex;justify-content:center;margin-top:10px}.dl-meta{font-size:12px;color:var(--ink-soft);margin:8px 0 4px;line-height:1.55}
.files-box{margin-top:22px;border:1px solid var(--line);border-radius:16px;background:#fff;padding:16px 18px}.files-heading{font-size:15px;margin:0 0 6px}
.files-list{list-style:none;margin:0 0 12px;padding:0}.file-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 0;border-top:1px solid #f0edf6}.file-row:first-child{border-top:0}
.file-group{padding:16px 0 4px;font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#8e64d9;border-top:1px solid #f0edf6}.file-group+.file-row{border-top:0}
.file-info{display:flex;flex-direction:column;min-width:0}.file-info strong{font-size:13px}.file-info small{font-size:11px;color:var(--ink-soft)}
.file-dl{padding:8px 13px;font-size:12px;flex-shrink:0}.file-wait{font-size:11px;font-weight:700;color:#8e64d9;flex-shrink:0}
#zipLink.is-waiting{opacity:.6;pointer-events:none}
.keep-note{font-size:12px;color:#7b7690;margin-top:14px;line-height:1.6}
.wall-section,.success-print,.next-pet,.referral-box,.redo-box{margin-top:54px}
.wall-section h2,.success-print h2,.next-pet h2,.referral-box h2{font-size:clamp(26px,3vw,38px);letter-spacing:-.05em;margin:8px 0 10px}
.wall-section>p,.next-pet>p,.referral-box>p{color:var(--ink-soft);max-width:720px}
.wall-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:18px}.wall-card{margin:0;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden}
.wall-card img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;background:#f4f1fb}.wall-card figcaption{display:flex;align-items:center;gap:10px;padding:10px 14px;font-size:12px;font-weight:700}.wall-card figcaption span{flex:1}
.wall-dl{background:none;border:0;color:#7053de;font-weight:800;font-size:12px;padding:4px}
.print-points{margin:10px 0 14px;padding-left:18px;max-width:760px}.print-points li{margin:7px 0;line-height:1.6;color:#4e495f;font-size:14px}
.code-box{margin:16px 0;padding:16px;border:2px dashed #b6a3f1;border-radius:14px;background:#f8f5ff;text-align:center;max-width:440px;display:flex;flex-direction:column;gap:4px}.code-line{font-size:13px;color:#4e495f}.code-value{font-size:24px;letter-spacing:.1em;color:#7053de}.code-box small{font-size:11px;color:#8f8aa3}
.next-actions{margin:14px 0}.next-styles-label{font-size:12px;font-weight:700;color:var(--ink-soft);margin:8px 0}
.next-styles{display:flex;gap:10px;overflow-x:auto;padding-bottom:6px}.next-style{flex:0 0 92px;display:flex;flex-direction:column;gap:5px;font-size:10px;font-weight:700;text-align:center}.next-style img{width:92px;height:115px;object-fit:cover;border-radius:10px}
.referral-box{background:#fff;border:1px solid #eae4f5;border-radius:18px;padding:22px 24px}.ref-row{display:flex;gap:8px;margin:12px 0 6px;max-width:560px}.ref-row input{flex:1;min-width:0;border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-size:13px}
.ref-fine,.success-fine{font-size:11px;color:#8f8aa3}
.redo-box{background:#fbf8ff;border:1px solid #ece6f8;border-radius:18px;padding:20px 24px}.redo-box h2{font-size:20px;margin:0 0 8px}.redo-box p{font-size:13px;color:#4e495f}.redo-box a{color:#7053de;font-weight:700}
@media(max-width:820px){.reveal{gap:24px}.reveal-art{max-width:360px;width:100%;margin:0 auto}.wall-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.wall-grid{grid-template-columns:1fr}.reveal-copy h1{font-size:34px}.ref-row{flex-direction:column}}
/* Printing guide, find my order, reviews, share page */
.printing-main h2{margin-top:34px}.printing-main ul{padding-left:18px}.printing-main li{margin:6px 0;line-height:1.65}.printing-main .lead{font-size:15px;color:var(--ink-soft)}
.table-wrap{overflow-x:auto;margin:12px 0}.print-table{border-collapse:collapse;width:100%;min-width:560px;font-size:13px;background:#fff;border:1px solid var(--line);border-radius:12px}.print-table th,.print-table td{text-align:left;padding:10px 12px;border-top:1px solid #f0edf6;vertical-align:top;line-height:1.5}.print-table th{background:#f8f5ff;font-size:11px;letter-spacing:.06em;text-transform:uppercase;border-top:0}
.lookup-box{margin:22px 0 30px;background:#fff;border:1px solid #eae4f5;border-radius:16px;padding:18px 20px;max-width:640px}.lookup-box h2{font-size:18px;margin:0 0 6px}.lookup-box p{font-size:13px}.orders-sub{font-size:18px;margin-top:10px}
.reviews-summary{color:var(--ink-soft)}.reviews-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;margin:16px 0}.review-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px}.review-card img{border-radius:10px;margin:8px 0;aspect-ratio:4/3;object-fit:cover;width:100%}.review-stars{color:#f2b33d;font-size:16px;letter-spacing:2px}.review-card p{font-size:13px}.review-card small{font-size:11px;color:var(--ink-soft)}.reviews-fine{font-size:11px;color:#8f8aa3}
.review-top{display:flex;gap:18px;align-items:center;margin-bottom:12px}.review-top img{width:110px;height:auto;border-radius:12px;border:1px solid var(--line)}
.review-form{max-width:560px}.review-form textarea{width:100%;border:1px solid var(--line);border-radius:12px;padding:10px 12px;font:inherit;font-size:14px;resize:vertical}
.stars{border:0;padding:0;margin:8px 0 14px}.stars legend{font-weight:700;font-size:13px;margin-bottom:6px}.star-row{display:inline-flex;flex-direction:row-reverse;gap:4px}.star-row input{position:absolute;opacity:0;pointer-events:none}.star-row label{font-size:34px;line-height:1;color:#ddd6ea;cursor:pointer;transition:color .1s}.star-row input:checked~label,.star-row label:hover,.star-row label:hover~label{color:#f2b33d}.star-row input:focus-visible+label{outline:2px solid #7956e9;border-radius:6px}
.review-done{font-size:16px;font-weight:700;color:#3c7a5a;background:#effaf4;border-radius:12px;padding:14px 16px}
.share-page{text-align:center;max-width:560px;margin:0 auto}.share-page h1{font-size:clamp(30px,4vw,44px);letter-spacing:-.05em;margin:8px 0 18px}.share-img{margin:0 auto;border-radius:18px;box-shadow:0 22px 54px rgba(48,30,84,.14);width:100%;max-width:420px;height:auto}.share-note{font-size:12px;color:var(--ink-soft);margin:14px 0}.share-cta{display:inline-flex;margin:6px 0}.share-page a.share-cta,.share-page a.share-cta:visited{color:#fff;text-decoration:none}.share-fine{font-size:12px;color:var(--ink-soft)}
/* Style picker: every tile shows the whole sample portrait at its true aspect (the sample files are 660 x 830).
height:auto is required: the ![]()
carries width/height attributes, which otherwise pin it to 453 px tall.
4 columns on desktop, 3 on small tablets, 2 on phones. */
.style-picker{grid-template-columns:repeat(4,minmax(0,1fr))}
.mini-card{min-height:44px}
.mini-card img{display:block;width:100%;height:auto;aspect-ratio:660/830;object-fit:cover;object-position:50% 0}
@media(max-width:900px){.style-picker{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}}
@media(max-width:600px){.style-picker{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.mini-card{padding:4px}.mini-card>span{font-size:11px;margin:7px 3px}}
/* 1280 audit: the FAQ grid (41% + 59% + 40px gap) and the nowrap studio price note pushed the page 28 px wider than the viewport.
Desktop only (881px+): unscoped, this overrode the max-width:880px single column and squeezed phones/tablets into two columns.
FAQ columns (Oct 2026): the server renders the questions as two .faq-col lists in reading order. On desktop the first list sits
under the intro on the left and the second fills the right column; .faq-list becomes display:contents so both join the grid.
Rows auto + 1fr: the intro sets row 1 and the right list spans both rows, so opening a question only grows its own column.
Phones/tablets: the two lists stack into the same single list as before. */
@media(min-width:881px){.faqs{grid-template-columns:minmax(0,41fr) minmax(0,59fr);grid-template-rows:auto 1fr;row-gap:22px}
.faqs>div:first-child{grid-column:1;grid-row:1}.faqs>.faq-list{display:contents}
.faqs .faq-col:first-child{grid-column:1;grid-row:2;align-self:start}.faqs .faq-col+.faq-col{grid-column:2;grid-row:1/span 2;align-self:start}}
@media(min-width:601px){.studio-price .price-about{white-space:normal;max-width:240px}}
/* grid audit: 1fr / % tracks let long content widen the page (success 320px +43px, inspiration 1280px +3px) */
@media(min-width:1081px){.inspo-hero{grid-template-columns:minmax(0,47fr) minmax(0,53fr)}}
@media(max-width:1080px){.inspo-hero{grid-template-columns:minmax(0,1fr)}}
@media(max-width:820px){.reveal{grid-template-columns:minmax(0,1fr)}}
/* Seasonal banner tile (Christmas): spans the full picker width above the 12 core tiles, so 13 never leaves an orphan. */
.style-picker .season-card{grid-column:1/-1;display:flex;align-items:center;gap:12px;text-align:left;background:linear-gradient(110deg,#fff7f2 0%,#fbf3ff 60%,#f3f0fd 100%);border:1px solid #efd9cf}
.style-picker .season-card img{width:84px;flex:0 0 84px;border-radius:9px}
.season-copy{display:flex;flex-direction:column;gap:3px;min-width:0;padding-right:6px}
.season-copy strong{font-size:14px;letter-spacing:-.02em;color:#2b2140}
.season-copy small{font-size:11px;line-height:1.35;color:#7c768d}
.limited-badge{align-self:flex-start;font-style:normal;font-size:9px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:linear-gradient(90deg,#b23a48,#d4915a);border-radius:999px;padding:3px 8px}
.product-tag.limited{background:linear-gradient(90deg,#b23a48,#d4915a);color:#fff}
@media(max-width:600px){.style-picker .season-card img{width:92px;flex-basis:92px}.season-copy strong{font-size:15px}}
.style-picker .season-card>.season-copy{display:flex;flex-direction:column;align-items:flex-start;gap:4px;margin:0;white-space:normal;overflow:visible;text-overflow:clip;font-size:inherit;font-weight:inherit;text-align:left}
.style-picker .season-card>.season-copy small{white-space:normal}
/* quick wins 2026-10-22: benefit strip, hero before/after, upload photo guide, busy capture */
.benefit-strip{display:flex;flex-wrap:wrap;justify-content:center;gap:2px 0;padding:7px 15px;background:#f6f3ff;border-bottom:1px solid #ece7fa;color:#5b5670;font-size:11px;font-weight:700;letter-spacing:.01em;text-align:center}
.benefit-strip>span{white-space:nowrap}.benefit-strip>span+span::before{content:"·";margin:0 10px;color:#a896e0}
.benefit-strip a{color:inherit;text-decoration:underline;text-decoration-color:#c9bcf0;text-underline-offset:2px}
@media(max-width:600px){.benefit-strip>span+span::before{margin:0 6px}}
.home-studio .studio-aside{display:flex;flex-direction:column;align-items:stretch;gap:12px;flex:0 0 auto}
.hero-ba{margin:0;display:flex;align-items:center;gap:14px;background:#fff;border:1px solid #eae4f5;border-radius:16px;padding:10px;box-shadow:0 12px 32px rgba(55,35,95,.09)}
.hero-ba-imgs{display:flex;align-items:center;gap:6px}
.hero-ba-img{position:relative;width:92px;aspect-ratio:2/3;border-radius:11px;overflow:hidden;background:#f3effe}
.hero-ba-img img{width:100%;height:100%;object-fit:cover}
.hero-ba .ba-tag{left:5px;top:5px;font-size:7px;padding:3px 5px}
.hero-ba-arrow{color:#8960db;font-weight:800;font-size:15px}
.hero-ba figcaption{display:flex;flex-direction:column;gap:3px;min-width:0}
.hero-ba-label{font-size:9px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#8e64d9}
.hero-ba figcaption strong{font-size:13px;letter-spacing:-.02em;color:var(--ink)}
.hero-ba-cta{margin-top:7px;align-self:flex-start;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 18px;border-radius:12px;background:#262842;color:#fff;font-size:13px;font-weight:800}
.hero-ba-cta:hover{background:#3a3560}.hero-ba-cta:focus-visible{outline:3px solid #b6a3f1;outline-offset:2px}
@media(max-width:880px){.home-studio .studio-aside{flex:1 1 100%}}
@media(max-width:600px){.home-studio .studio-aside{gap:10px;margin-top:14px}.home-studio .studio-aside .studio-price{margin:0}.hero-ba{gap:10px;padding:8px}.hero-ba-img{width:78px}.hero-ba-imgs{gap:4px}.hero-ba-arrow{font-size:13px}.hero-ba-cta{padding:0 14px;font-size:12px}}
.photo-guide{margin-top:12px;padding:12px 12px 10px;border:1px solid #eee9f8;border-radius:13px;background:#fff}
.pg-best{display:flex;gap:8px;align-items:flex-start;margin:0 0 8px;font-size:11px;line-height:1.5;color:#55506a}
.pg-best strong{color:var(--ink)}
.pg-ok{flex:0 0 auto;display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:#e4f4ea;color:#2f7d52;font-size:11px;font-weight:800}
.pg-avoid-title{margin:0 0 6px;font-size:9px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#9a94ab}
.pg-avoid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.pg-avoid li{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 2px 6px;border-radius:10px;background:#faf8ff;color:#6d57c9;font-size:9.5px;font-weight:700;line-height:1.25;text-align:center}
.pg-avoid li span{color:#5b5670}
.pg-avoid li::after{content:"✕";position:absolute;top:4px;right:5px;width:13px;height:13px;border-radius:50%;background:#fde8ec;color:#c2405e;font-size:7.5px;line-height:13px;text-align:center;font-weight:800}
@media(max-width:380px){.pg-avoid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.busy-capture{margin:12px 0 0;padding:16px;border:1px solid #e6defa;border-radius:16px;background:linear-gradient(135deg,#faf7ff,#fff8fa);text-align:left}
.busy-capture h4{margin:0 0 4px;font-size:15px;letter-spacing:-.02em;color:var(--ink)}
.busy-capture p{margin:0 0 10px;font-size:12px;line-height:1.55;color:#5b5670}
.busy-row{display:flex;gap:8px;flex-wrap:wrap}
.busy-row input[type=email]{flex:1 1 190px;min-height:44px;border:1px solid #dcd3f3;border-radius:11px;padding:0 12px;font-size:14px;background:#fff}
.busy-row button{min-height:44px;padding:0 18px;border:0;border-radius:11px;background:#262842;color:#fff;font-weight:800;font-size:13px}
.busy-capture .busy-consent{margin:8px 0 0;font-size:10.5px;color:#8b8694}
.busy-capture .busy-status{margin:8px 0 0;font-size:12px;font-weight:700;color:#3f8a64}
.busy-capture .busy-status.err{color:#b4334f}
.busy-capture .busy-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.busy-turnstile{margin-top:8px}
.original-drop{cursor:pointer;transition:box-shadow .15s ease,background-color .15s ease}
.original-drop:hover{box-shadow:inset 0 0 0 2px #d1c4f5}
.original-drop:focus-visible{outline:3px solid #b6a3f1;outline-offset:2px}
.original-drop.dragover{box-shadow:inset 0 0 0 3px #8e64d9;background-color:#f3eeff}
.original-drop.dragover .original-placeholder{opacity:.85}
.result-title-row{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px}
.result-title-row h2{margin-bottom:3px}
.previews-left{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;font-size:10.5px;font-weight:700;letter-spacing:.01em;color:#5f4bb8;background:#fff;border:1px solid #e3dafb;border-radius:999px;padding:4px 10px 4px 8px;box-shadow:0 2px 8px rgba(95,75,184,.07)}
.previews-left::before{content:"";width:6px;height:6px;border-radius:50%;background:#8e64d9;box-shadow:0 0 0 3px #efe9ff}
.previews-left.none-left{color:#8b8694;background:#f7f6fa;border-color:#e8e6ef;box-shadow:none}
.previews-left.none-left::before{background:#c3bfcf;box-shadow:0 0 0 3px #eeedf3}
.result-top{align-items:flex-start}.result-top .result-state{margin-top:2px}
@media(max-width:600px){.result-title-row{gap:5px 8px}.previews-left{font-size:10px;padding:3px 9px 3px 7px;white-space:normal}.result-heading{min-width:0}}
.previews-left-note{flex-basis:100%;margin:-8px 24px 14px;padding:10px 12px;border-radius:12px;background:linear-gradient(135deg,#faf7ff,#fff8fa);border:1px solid #ece5fb;font-size:12px;line-height:1.55;color:#55506a}
.previews-left-buy{display:inline-flex;align-items:center;gap:5px;min-height:32px;margin-left:2px;padding:0 2px;border:0;background:none;color:#5f4bb8;font-weight:800;font-size:12px;text-decoration:underline;text-decoration-color:#cbbdf4;text-underline-offset:3px}
.previews-left-buy:focus-visible{outline:3px solid #b6a3f1;outline-offset:2px;border-radius:6px}
@media(max-width:600px){.previews-left-note{margin:-6px 15px 12px;font-size:11.5px}}
/* Signature Name pair: the name sits at the top of the art, so its tag moves to the bottom corner. */
.ba-tag.tag-low{top:auto;bottom:8px}
.hero-ba .ba-tag.tag-low{top:auto;bottom:5px}
/* Christmas promise line (Purr & Mutt win): only rendered with the seasonal style, so it retires with it after Boxing Day. */
.season-promise{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;color:#a3413b;letter-spacing:.01em}
.season-promise::before{content:"";width:6px;height:6px;border-radius:50%;background:#c9524a;box-shadow:0 0 0 3px #f8e1dc;flex:0 0 6px}
.product p.season-promise{margin-top:4px}
/* Your previews strip */
.preview-strip{margin:4px 24px 14px;padding:12px 14px;border:1px solid #ece5fb;border-radius:16px;background:#fbf9ff}
.preview-strip-title{margin:0 0 9px;font-size:13px;color:#2b2840}.preview-strip-title small{color:#6c6780;font-size:12px;font-weight:500}
.preview-strip-list{list-style:none;margin:0;padding:0 0 2px;display:flex;gap:10px;overflow-x:auto;scrollbar-width:thin}
.ps-item{display:flex;flex-direction:column;align-items:center;gap:5px;width:76px;padding:5px;border:2px solid transparent;border-radius:12px;background:#fff;cursor:pointer;font:inherit;font-size:11px;font-weight:700;color:#4e495f;box-shadow:0 1px 3px rgba(33,38,62,.08)}
.ps-item img{width:64px;height:96px;object-fit:cover;border-radius:8px;display:block}
.ps-item span{max-width:64px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ps-item:hover{border-color:#d9cdf8}.ps-item.active{border-color:#7a5fc9;background:#f6f2ff}
.ps-item:focus-visible{outline:3px solid #b6a3f1;outline-offset:2px}
@media(max-width:600px){.preview-strip{margin:4px 15px 12px;padding:10px 12px}}
/* Generation progress */
.gen-progress{width:min(280px,80%);height:8px;margin:16px auto 8px;border-radius:999px;background:#ece7fa;overflow:hidden}
.gen-progress span{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,#8e64d9,#e58fb5);transition:width .25s linear}
.gen-stage{margin:0;font-size:13px;font-weight:700;color:#5f4bb8;min-height:1.4em}
@media(prefers-reduced-motion:reduce){.gen-progress span{transition:none}}
/* Contrast (Lighthouse): small labels darkened to >= 4.5:1 */
.hero-ba-label,.studio-price .from-label{color:#7048c2}
.studio-price .price-about,.studio-price>span,.studio-price>span span{color:#6c6780}
.editor-round{color:#5a3fba}.editor-value,#chosenStyleName{color:#6a4bc4}
.helper-copy,.pg-avoid-title{color:#6c6780}
/* ===== Audit fixes 2026-10-22 =====
#05 functional text: at least 14px and 4.5:1 contrast (decorative eyebrows/tags excepted). Colours: #5f5a72 on white
is about 6.6:1, #4f4a63 about 8:1. */
.top-strip{font-size:14px}.top-strip .strip-currency{color:#fff;text-decoration:underline;text-underline-offset:2px;font-weight:700}.top-strip .price-code{opacity:1;font-weight:700}
.nav-links{font-size:14px}.nav-create{font-size:14px}.btn{font-size:14px}
.hero-copy>p,.studio-top p,.home-studio .studio-hero-description{font-size:15px;color:#5f5a72}
.home-studio .studio-value-points{font-size:14px;color:#5f5a72}
.studio-price span,.home-studio .studio-price span{font-size:14px;color:#5f5a72;white-space:normal}
.studio-price a{color:#5b3fc4;font-weight:800;text-decoration:underline}
.section-intro p,.faqs>div>p,.guide-head p,.gallery-cta p,.teaser-copy>p{font-size:14px;color:#5f5a72}
.textlink{font-size:14px;color:#5b3fc4}
.searchbox input{font-size:14px}.result-count{font-size:14px;color:#5f5a72}
.filter,.inspo-filters button{font-size:14px;color:#4f4a63}
.product-photo button{font-size:14px}.product>p{font-size:14px;color:#5f5a72}.product-meta span{font-size:12px;color:#5b3fc4}
.product-tag{font-size:12px;color:#4f4580}
.small-note,.teaser-disclaimer,.mockup-note,.room-disclaimer{font-size:14px!important;color:#5f5a72!important}
.editor-header p,.helper-copy,.studio-footnote{font-size:14px;color:#5f5a72}
.field-heading{font-size:15px}.editor-value{font-size:14px;color:#5b3fc4}
.upload-box strong{font-size:15px}.upload-box small{font-size:14px;color:#5f5a72;line-height:1.5}
.form-field{font-size:14px}.form-field input,.form-field select{font-size:16px}
.preview-placeholder small,.example-veil small{font-size:14px}
.result-caption>p{font-size:14px;color:#5f5a72}
.purchase-price p{font-size:14px;color:#4f4a63}
.approve-label,.pe-consent{font-size:14px;color:#4f4a63}
.result-bottom{font-size:14px;color:#5f5a72}
.faq-list summary{font-size:15px}.faq-list p{font-size:14px;color:#5f5a72}
.footer p{font-size:14px;color:#5f5a72}.footer a:not(.logo){font-size:14px;color:#5f5a72}.footer-last{font-size:14px;color:#5f5a72}
.veil-box p,.room-text p,.inspo-card-body p,.guide-grid p,.guide-reminder p,.legal-main p{font-size:14px;color:#5f5a72}
.inspo-card-body button{font-size:14px}
.toast{font-size:14px}
.mini-card>span{font-size:14px!important;white-space:normal;line-height:1.25}
.tier-list{font-size:14px!important;color:#4f4a63!important}.tier-badge{font-size:11px}
.currency-note,.coupon-fine,.marketing-note,.secure-note,.pe-fine,.nl-fine,.busy-consent,.dl-meta,.keep-note,.success-fine,.ref-fine{font-size:14px!important;color:#5f5a72!important}
.optout-label,.coupon-label,.currency-field{font-size:14px!important}
.benefit-strip span{font-size:14px}
@media(max-width:600px){.top-strip .sep{display:none}.top-strip strong span{display:inline!important;opacity:1}.top-strip .strip-extra{display:none}
.nav-create{font-size:13px;padding:11px 12px}.hero-copy>p{font-size:15px}.hero-buttons .btn{font-size:14px}
.section-intro p{font-size:14px}.searchbox input,.filter{font-size:14px}.product>p,.product-photo button{font-size:14px}.product-meta span{font-size:12px}
.quick-path small{font-size:14px}.quick-path strong{font-size:15px}}
/* #27 subline */
.studio-subline{font-size:17px!important;font-weight:800;color:#4f3fa0!important;margin:-6px 0 10px;letter-spacing:-.01em}
/* #06 currency beside the first price */
.studio-price .price-code{font-size:13px;color:#4f4a63;font-weight:800;margin-left:2px}
.currency-quick{display:inline-flex;align-items:center;gap:6px;font-size:14px;color:#4f4a63;font-weight:700}
.currency-quick select{font-size:14px;border:1px solid #d9d3ea;border-radius:8px;padding:5px 8px;background:#fff;color:#21263e;min-height:36px}
/* #03 mobile upload jump */
.jump-upload{display:none}
@media(max-width:880px){.jump-upload{display:flex;align-items:center;justify-content:center;gap:6px;margin:4px 0 16px;padding:13px 16px;border-radius:12px;background:#262842;color:#fff;font-size:15px;min-height:48px}.jump-upload strong{color:#fff}}
/* #02 comparison */
.compare{background:#fff;border:1px solid #e6e0f4;border-radius:18px;padding:20px 22px;margin:0 0 24px;box-shadow:0 10px 26px rgba(55,35,95,.06)}
.compare-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 18px;margin-bottom:12px}
.compare-head h2{font-size:22px;margin:0;letter-spacing:-.03em}.compare-head p{margin:0;font-size:14px;color:#5f5a72}
.compare-cards{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.compare-card{border:1px solid #e8e3f6;border-radius:14px;padding:14px 16px;background:#fbfaff}
.compare-card.cc-bundle{border-color:#cbbdf5;background:#f6f2ff}
.cc-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px}.cc-top h3{font-size:18px;margin:0}
.cc-price{margin:0;font-size:20px;font-weight:800;color:#21263e;white-space:nowrap}.cc-price small{font-size:13px;color:#4f4a63;margin-left:3px}
.cc-upgrade{margin:2px 0 0;font-size:14px;color:#4f3fa0;font-weight:800}
.compare-card ul{margin:10px 0 0;padding-left:18px;font-size:14px;color:#4f4a63;line-height:1.55}.compare-card li{margin:3px 0}
.cc-note{margin:8px 0 0;font-size:14px;color:#4f4a63;font-weight:700}
.compare-facts{display:flex;flex-wrap:wrap;gap:6px 22px;margin:12px 0 0;padding:0;list-style:none;font-size:14px;color:#4f4a63}
.compare-facts li:before{content:'✓ ';color:#248667;font-weight:800}
@media(max-width:600px){.compare{padding:16px 14px}.compare-cards{grid-template-columns:1fr}.compare-facts{display:block}.compare-facts li{margin:4px 0}}
/* #14 one pet note, #09 save note */
.one-pet-note{font-size:14px;color:#4f4a63;margin:2px 0 10px;line-height:1.5}
.save-note{font-size:14px;color:#4f4a63;margin:4px 0 10px;line-height:1.5}
.keep-note strong{color:#21263e}
/* #16 four steps */
.quick-path{flex-wrap:wrap;gap:14px 18px;justify-content:center}
.quick-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:0;padding:0;list-style:none;flex:1 1 640px}
.quick-steps li{display:flex;align-items:center;gap:12px;min-width:0}.quick-steps strong,.quick-steps small{display:block}
.quick-steps strong{font-size:15px;margin-bottom:3px}.quick-steps small{font-size:14px;color:#5f5a72}
.quick-cta{flex:0 0 auto}
@media(max-width:880px){.quick-steps{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.quick-path{padding:16px 14px}.quick-steps{grid-template-columns:1fr;gap:10px}.quick-steps .path-icon{width:38px;height:38px;font-size:19px;flex-shrink:0}.quick-cta{width:100%}}
/* 25 Oct 2026: the four steps sit inside the studio, directly above "Create their portrait" (no button: step 1 is right below) */
.studio-steps{margin:0 0 16px;min-height:0;padding:18px 24px}
@media(max-width:880px){.studio-steps{margin:0 0 16px;padding:18px 20px}.studio-steps .quick-steps{gap:14px 18px}}
@media(max-width:600px){.studio-steps{padding:16px 15px;margin-bottom:14px}.studio-steps .quick-steps{gap:12px}}
/* #23 mobile menu */
.nav-toggle{display:none}
@media(max-width:880px){.nav-wrap{position:relative}
.nav-toggle{display:inline-grid;place-items:center;width:46px;height:46px;border:1px solid #e1ddeb;border-radius:11px;background:#fff;color:#262842;margin-left:-14px}
.nav-toggle-bars,.nav-toggle-bars:before,.nav-toggle-bars:after{display:block;width:20px;height:2px;background:currentColor;border-radius:2px;position:relative}
.nav-toggle-bars:before,.nav-toggle-bars:after{content:'';position:absolute;left:0}.nav-toggle-bars:before{top:-6px}.nav-toggle-bars:after{top:6px}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars{background:transparent}.nav-toggle[aria-expanded="true"] .nav-toggle-bars:before{top:0;transform:rotate(45deg)}.nav-toggle[aria-expanded="true"] .nav-toggle-bars:after{top:0;transform:rotate(-45deg)}
.mobile-menu{position:absolute;top:calc(100% + 6px);right:0;left:0;z-index:60;background:#fff;border:1px solid #e6e2ef;border-radius:14px;box-shadow:0 18px 40px rgba(35,30,70,.16);padding:8px;display:grid}
.mobile-menu a{display:block;padding:14px 16px;border-radius:10px;font-size:16px;font-weight:800;color:#21263e}.mobile-menu a:hover,.mobile-menu a:focus-visible{background:#f3efff}
.mobile-menu a[aria-current]{color:#5b3fc4}}
@media(min-width:881px){.mobile-menu{display:none!important}}
/* (d) toasts at the top on mobile */
@media(max-width:600px){.toast{top:calc(12px + env(safe-area-inset-top));bottom:auto;width:calc(100% - 24px)}}
/* #24 inspiration actions */
.room-actions{display:flex;flex-wrap:wrap;gap:10px}.room-style-note{font-size:14px!important;color:#5f5a72!important;margin:10px 0 0}
/* gift box (success) */
.gift-box{background:#fff;border:1px solid var(--line);border-radius:18px;padding:24px;margin:24px 0}
.gift-box h2{font-size:24px;margin-bottom:8px}.gift-box p{font-size:14px;color:#5f5a72}
.gift-box.gift-box-top{margin:18px 0 22px;padding:20px;text-align:left}
/* printing */
.print-max{background:#f6f2ff;border:1px solid #e1d8fb;border-radius:12px;padding:12px 16px}
.printing-main h3{font-size:19px;margin:22px 0 8px}
/* Top strip: full message on desktop, short one on phones. The price spans must never be hidden (an older
".top-strip span{display:none}" rule hid the price on iPhone). */
.top-strip .strip-long,.top-strip .strip-short{opacity:1}
.top-strip span[data-price-digital],.top-strip .price-code{display:inline!important;opacity:1!important}
.top-strip .sep{opacity:.6}
.strip-short{display:none!important}
@media(max-width:600px){.top-strip{font-size:13px;line-height:1.45;flex-wrap:wrap;gap:2px 6px;padding:7px 12px}
.strip-long{display:none!important}.strip-short{display:inline!important}.top-strip .strip-short strong{color:#fff}}
/* Benefit strip on phones: compact two-by-two that wraps cleanly */
@media(max-width:600px){.benefit-strip{display:flex;flex-wrap:wrap;justify-content:center;gap:2px 0;padding:8px 10px;font-size:13px;line-height:1.4}
.benefit-strip span{font-size:13px;white-space:normal;text-align:center}}
.btn-list-price{opacity:.7;font-weight:600;margin-right:6px}
.consent-label span,.approve-label span{font-size:14px;line-height:1.5;color:#4f4a63}.consent-label a{color:#5b3fc4}
@media(max-width:600px){.closing-inner>div{min-width:0;flex:1 1 auto}.closing .btn{white-space:normal;text-align:center;padding:13px 16px}.closing img{flex:0 0 auto}}
.studio-price strong span,.home-studio .studio-price strong span{font-size:inherit;color:inherit;line-height:inherit;white-space:nowrap}
.studio-price .price-about{font-size:13px;color:#5f5a72}
@media(max-width:600px){.purchase-price{flex-direction:column-reverse;gap:4px}.purchase-price .price-stack{align-items:flex-start;flex-direction:row;gap:8px;align-items:baseline}.purchase-panel{margin:14px 10px;padding:16px 14px}}
#checkoutBtn{white-space:normal;flex-wrap:wrap;gap:6px 10px;text-align:center}
/* Tick lists: comparison cards + purchase-panel tier cards (22 Oct 2026) */
.compare-card ul.tick-list,.tick-list{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:7px;font-size:14px;line-height:1.45;color:#4f4a63}
.tick-list>li,.tick-list>[role=listitem]{display:flex;align-items:flex-start;gap:8px;margin:0}
.tick-list .tick{flex:0 0 18px;width:18px;height:18px;margin-top:1px;color:var(--purple)}
.tick-lead{display:block;margin:10px 0 0;font-size:14px;font-weight:700;color:var(--ink)}
.tier-card .tick-lead{margin:8px 0 0}.tier-card .tick-list{margin-top:8px;gap:5px}
.tier-card .tick-list>[role=listitem]{font-size:14px}
.compare-onepet,.tier-onepet{margin:10px 0 0;font-size:14px;color:#5f5a72;text-align:center}
.tier-onepet{text-align:left;margin:6px 0 0}
.pkg-branding{display:block;margin:6px 0 0;font-size:12.5px;line-height:1.45;color:#6b6680}
.compare>.pkg-branding{text-align:center}
/* Hero balance on desktop (22 Oct 2026): right column centred against the headline, larger before/after images */
@media(min-width:881px){.home-studio .studio-top{align-items:center}.hero-ba-img{width:clamp(104px,9.6vw,148px)}.hero-ba{padding:12px;gap:16px}.hero-ba-imgs{gap:8px}.hero-ba figcaption strong{font-size:15px}.hero-ba .ba-tag{font-size:8px}}
/* Hero label (23 Oct 2026): a touch smaller so "Your photo → instant preview" sits on 1 line where the caption is wide enough (>=1240px: 173px text in a 174-178px caption). Below that the caption is only 118-164px, so it keeps its 2-line break. */
@media(min-width:881px){.hero-ba-label{font-size:9px;letter-spacing:.06em}}@media(min-width:1240px){.hero-ba-label{white-space:nowrap}}
/* Studio layout (22 Oct 2026): start block full width; upload + preview side by side; "Keep the art" full width below */
.home-studio .editor-start .editor-header{padding-bottom:18px}
.home-studio .editor-start .editor-block{margin-bottom:0}
.home-studio .studio-layout>#purchasePanel{margin:0;border-radius:16px}
@media(min-width:881px){
.home-studio .studio-layout{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;padding:16px;background:#f7f5fc}
.home-studio .editor-start,.home-studio .studio-layout>#purchasePanel{grid-column:1/-1}
.home-studio .editor-start .editor-header{padding-bottom:16px;margin-bottom:16px}
/* Studio style picker: 4 per row (3 rows of 12) on desktop, bigger tiles; srcset serves the 660px sample when needed (23 Oct 2026).
* The Christmas banner thumbnail doubles (84px -> 168px, uncropped 660:830); the banner grows and its text stays centred. */
.home-studio .editor-start .style-picker{grid-template-columns:repeat(4,minmax(0,1fr))}
.home-studio .editor-start .style-picker .season-card img{width:168px;flex:0 0 168px}
.home-studio .editor-upload,.home-studio .result-panel{align-self:stretch}
/* Left column = 4 auto rows + a 1fr spacer row; the right column spans all 5, so when it grows (e.g. the gift form)
* the extra height lands in the spacer row and the left column stays packed at the top (23 Oct 2026). */
.home-studio .studio-layout>#purchasePanel:not([hidden]){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto auto auto 1fr;gap:4px 28px;align-items:start;padding:24px}
.home-studio #purchasePanel>.purchase-price,.home-studio #purchasePanel>.tier-picker,.home-studio #purchasePanel>.tier-onepet,.home-studio #purchasePanel>.currency-row{grid-column:1}
.home-studio #purchasePanel>#checkoutFields,.home-studio #purchasePanel>.eu-waitlist{grid-column:2;grid-row:1/span 5}
.home-studio #purchasePanel>.result-bottom{grid-column:1/-1;margin:14px -24px -24px}
}
@media(max-width:880px){.home-studio .studio-layout>#purchasePanel{margin:0 0 4px}}
@media(min-width:881px){.home-studio .studio-top>div:first-child{flex:1 1 50%;min-width:0}.home-studio .studio-aside{flex:0 1 50%;max-width:620px;min-width:0}.home-studio .studio-aside .studio-price{flex-wrap:wrap;white-space:normal;row-gap:8px}}
@media(min-width:881px) and (max-width:1180px){.home-studio .studio-top h1{font-size:clamp(40px,5vw,60px)}}
@media(max-width:880px){.header .nav-create{min-height:44px;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}}@media(max-width:420px){.header .nav-create{padding:12px 12px}.header .logo{font-size:22px;gap:7px}}
/* Comparison inside the hero's right column at >=1024px; full-width section below the hero under 1024px (22 Oct 2026) */
@media(max-width:1023px){
.home-studio .studio-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px 24px;align-items:center}
.home-studio .studio-top>div:first-child{grid-column:1;grid-row:1/span 2}
.home-studio .studio-aside{display:contents}
.home-studio .studio-aside>.hero-ba{grid-column:2;grid-row:1;align-self:end}
.home-studio .studio-aside>.studio-price{grid-column:2;grid-row:2;align-self:start;margin:0}
.home-studio .studio-aside>.jump-upload,.home-studio .studio-aside>.compare{grid-column:1/-1;margin-bottom:0}
}
@media(max-width:880px){
.home-studio .studio-top{grid-template-columns:minmax(0,1fr);gap:12px}
.home-studio .studio-top>div:first-child,.home-studio .studio-aside>.hero-ba,.home-studio .studio-aside>.studio-price{grid-column:1;grid-row:auto}
}
@media(min-width:1024px){
.home-studio .studio-aside{gap:12px}
.home-studio .studio-aside>.studio-price{border-radius:14px 14px 0 0;border-bottom:0;margin:0}
.home-studio .studio-aside>.compare{margin:-12px 0 0;border-radius:0 0 14px 14px;border-color:#e8e3f6;border-top:1px dashed #e3dcf3;padding:14px 16px 14px;box-shadow:none}
.home-studio .studio-aside .compare-head{margin-bottom:8px}
.home-studio .studio-aside .compare-head h2{font-size:18px}
.home-studio .studio-aside .compare-cards{gap:10px}
.home-studio .studio-aside .compare-card{padding:11px 12px}
.home-studio .studio-aside .compare-card h3{font-size:16px}
.home-studio .studio-aside .cc-top{gap:6px}
.home-studio .studio-aside .tick-list{gap:4px;margin-top:8px}
.home-studio .studio-aside .tick-lead{margin-top:6px}
.home-studio .studio-aside .cc-upgrade,.home-studio .studio-aside .cc-note{margin-top:4px}
.home-studio .studio-aside .compare-onepet{text-align:left}
.home-studio .studio-aside .compare>.pkg-branding{text-align:left;margin-top:4px}
.home-studio .studio-top{margin-bottom:28px}
}
#chooseStyle{scroll-margin-top:110px}#chooseStyleHeading:focus{outline:none}#chooseStyleHeading:focus-visible{outline:3px solid #b6a3f1;outline-offset:3px;border-radius:4px}
@media(min-width:1024px){
.home-studio .studio-top>div:first-child{flex:1 1 46%}
.home-studio .studio-aside{flex:0 1 54%;max-width:690px}
/* Bigger Charlie photo + portrait (23 Oct 2026): fills most of the right column's spare height so the pricing card sits lower and
* the notes keep a natural rhythm. About 158px at 1024 → 194px at 1280 → 206px max; 2:3 via .hero-ba-img aspect-ratio (no CLS).
* 480w srcset keeps them sharp at 2x. */
.home-studio .hero-ba-img{width:clamp(156px,calc(14vw + 15px),206px)}
.home-studio .hero-ba{padding:10px 12px}
.home-studio .studio-aside>.studio-price{padding:12px 16px;gap:6px 14px}
.home-studio .studio-aside .cc-note{font-size:14px;font-weight:600}
/* Hero right card fills the column (both hero columns are already stretched to equal height), and any spare height
* spreads out the notes under Digital/Bundle: above "One pet per portrait." and between the tick lines (23 Oct 2026).
* Scoped to the hero's .studio-aside only; the checkout panel (#purchasePanel) does not use these rules. */
.home-studio .studio-aside>.hero-ba,.home-studio .studio-aside>.studio-price,.home-studio .studio-aside>.hero-voucher-mobile,.home-studio .studio-aside>.hero-gift-mobile{flex:0 0 auto}
.home-studio .studio-aside>.compare{flex:1 1 auto;display:flex;flex-direction:column}
.home-studio .studio-aside .compare-head,.home-studio .studio-aside .compare-cards{flex:0 0 auto}
.home-studio .studio-aside .compare-onepet{flex:1 0 auto;display:flex;align-items:flex-end;margin-top:0;padding-top:12px}
.home-studio .studio-aside .compare-facts{flex:1 0 auto;display:flex;flex-direction:column;justify-content:space-evenly;gap:5px;margin-top:8px}
.home-studio .studio-aside .compare-facts li{margin:0}
}
/* Value adds ON (23 Oct 2026, .va-on added by the worker): the longer Digital/Bundle lists make the right hero column taller than the
* left one, so first tighten the notes spacing, then size the Charlie images so the right column's minimum height matches the left
* column's natural height (both end level, left column not stretched). Widths follow where the tier lists wrap: 68px at 1024,
* 147px at 1280, 176px from 1440. 2:3 stays via aspect-ratio (no CLS); the 480w srcset keeps them sharp. */
@media(min-width:1024px){
.home-studio .studio-aside.va-on .compare-onepet{padding-top:4px}
.home-studio .studio-aside.va-on .compare-facts{margin-top:4px;gap:2px}
.home-studio .studio-aside.va-on .hero-ba-img{width:clamp(68px,calc(68px + (100vw - 1024px) * .5),120px)}
}
@media(min-width:1200px){.home-studio .studio-aside.va-on .hero-ba-img{width:calc(140px + (100vw - 1200px) * .0875)}}
@media(min-width:1312px){.home-studio .studio-aside.va-on .hero-ba-img{width:clamp(164px,calc(164px + (100vw - 1312px) * .094),176px)}}
/* Back to Draw Paw (orders page link; 404 uses .btn) */
.legal-main a.back-home-link{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin-bottom:10px;font-size:14px;font-weight:700;color:#5f43b8;text-decoration:none}.legal-main a.back-home-link:hover{text-decoration:underline}
/* PayPal (second button; only shown when switched on and offered to this visitor) */
.paypal-block{margin-top:10px}.paypal-block[hidden]{display:none}
.paypal-or{display:flex;align-items:center;gap:10px;margin:0 0 10px;color:#8f8aa3;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.paypal-or::before,.paypal-or::after{content:"";flex:1;height:1px;background:#e6e1f2}
.paypal-buttons{min-height:48px;border-radius:14px;overflow:hidden}
.paypal-note{margin:6px 0 0;font-size:12.5px;line-height:1.45;color:#5f5a72}.paypal-note:empty{display:none}
/* Style landing pages (/styles, /styles/) — mobile first */
.style-page{padding:22px 0 80px}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0 0 18px;padding:0;font-size:13px;color:#605b73}
.crumbs li+li::before{content:"›";margin-right:6px;color:#b4aec4}.crumbs a{color:#5b3fc4;font-weight:700}.crumbs a:hover{text-decoration:underline}
.sp-hero{display:grid;gap:22px}
.sp-copy h1,.sp-hub-head h1{font-size:clamp(36px,9vw,64px);line-height:1.08;letter-spacing:-.06em;margin:0 0 14px}
.sp-lead{font-size:17px;line-height:1.6;color:#4f4a63;margin-bottom:14px}
.sp-price{font-size:15px;color:#4f4a63;margin:0 0 16px}.sp-price strong{color:var(--ink)}.sp-price small{display:block;font-size:12px;color:#625c76}
.sp-cta{width:100%;font-size:15px;min-height:54px}
.sp-note,.sp-season-note{font-size:13px;color:#6d6687;margin:10px 0 0}.sp-season-note{background:#fff7e6;border:1px solid #f6e3b8;border-radius:12px;padding:12px 14px;margin:0 0 14px;color:#6d5430}
.sp-gallery{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sp-gallery figure{margin:0;background:#fff;border-radius:16px;padding:7px 7px 0;box-shadow:var(--shadow)}
.sp-gallery img{width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:11px;height:auto}
.sp-gallery figcaption{font-size:12px;font-weight:700;color:#605b73;padding:8px 4px 9px}
.sp-disclaimer{font-size:12px;color:#625c76;margin:14px 0 0}
.sp-body{max-width:720px;margin-top:34px}.sp-body h2{font-size:24px;letter-spacing:-.04em;margin:26px 0 8px}.sp-body p{font-size:16px;line-height:1.7;color:#4f4a63;margin:0}
.sp-body .textlink{display:inline-block;margin-top:16px;font-size:14px}
@media(min-width:700px){.sp-grid.xm-grid4{grid-template-columns:repeat(4,minmax(0,1fr));max-width:none}}
.xm-steps{margin:8px 0 0;padding-left:22px;font-size:16px;line-height:1.7;color:#4f4a63}.xm-steps li{margin:4px 0}.xm-steps strong{color:#1f1b2e}.christmas-page .sp-related>p,.halloween-page .sp-related>p{max-width:720px;font-size:16px;line-height:1.7;color:#4f4a63;margin:0 0 18px}.xm-final{padding-bottom:8px}.xm-final .sp-price{margin-top:14px}
.sp-faq{max-width:720px;margin-top:40px}.sp-faq h2,.sp-related h2{font-size:28px;letter-spacing:-.05em;margin:0 0 6px}
.sp-faq summary{font-size:15px}.sp-faq details p{font-size:15px;color:#5f5a72}
.sp-related{margin-top:46px}
.sp-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 12px;margin-top:16px}
.sp-card{display:flex;flex-direction:column;gap:6px;min-width:0}
.sp-card-img{position:relative;display:block;aspect-ratio:4/4.5;border-radius:14px;overflow:hidden;background:#eee9f1;box-shadow:0 8px 20px #1d18401a}
.sp-card-img img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease}.sp-card:hover .sp-card-img img{transform:scale(1.05)}
.sp-limited{position:absolute;top:8px;left:8px;background:#fff;color:#a33c4d;font-style:normal;font-size:11px;font-weight:800;border-radius:7px;padding:5px 8px;box-shadow:0 4px 12px #12132324}
.sp-card strong{font-size:16px;letter-spacing:-.03em;margin-top:6px}
.sp-card-desc{font-size:13px;line-height:1.5;color:#6d6687}
.sp-card-more{font-size:13px;font-weight:800;color:#5b3fc4}
.sp-all{margin-top:18px}.sp-all .textlink{font-size:14px}.sp-related .sp-all .textlink{white-space:normal}
.sp-hub-head{max-width:760px}.sp-hub-advice{max-width:760px;margin:34px 0 0}.sp-hub-advice p{font-size:15px;line-height:1.7;color:#5f5a72;margin:0}
.style-hub .sp-grid{margin-top:26px}
.product-more{display:inline-block;margin-top:6px;font-size:13px;font-weight:800;color:#5b3fc4}.product-more:hover{text-decoration:underline}
.helper-link{color:#5b3fc4;font-weight:800;text-decoration:underline;text-underline-offset:2px}
.intro-links{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
@media(max-width:600px){.intro-links{align-items:flex-start;gap:4px;margin-top:12px}.intro-links .textlink{margin-top:0}}
@media(min-width:700px){.sp-cta{width:auto}.sp-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:26px 18px}}
@media(min-width:960px){.sp-related .sp-grid{max-width:820px}.style-page{padding:36px 0 110px}.sp-hero{grid-template-columns:1.05fr 1fr;gap:48px;align-items:center}.sp-gallery{gap:16px}.style-hub .sp-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.style-page .eyebrow{color:#6a3fc2}
/* Order-complete page, phones: cap the portrait so the main download button is on the first screen. */
@media(max-width:520px){.success-main .reveal-art{max-width:min(100%,calc(40vh * 2 / 3),calc(40svh * 2 / 3))}.success-main .reveal{gap:16px}}
/* Desktop header: three equal-sided columns so the nav is centred on the page (lines up with the centred benefit strip)
regardless of logo vs CTA width. Previously flex space-between put it 13px right of centre. Mobile (<=880px) unchanged. */
@media(min-width:881px){.nav-wrap{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}.nav-wrap>.logo{justify-self:start}.nav-wrap>.nav-create{justify-self:end}}
/* Home hero left column (23 Oct 2026). The trust points are a list with matching tick icons. At >=1024px the column
* stretches to the right column's height. Since 24 Oct 2026 the copy, points, CTAs and gift note are packed at the top with
* a fixed rhythm (no margin-top:auto, which opened big gaps once the right column grew), and any spare height at the
* bottom is taken by a small strip of example style thumbnails (.hero-styles, below). Under 1024px the
* points stay inline as before, and the CTAs and gift note are hidden (layout essentially unchanged). The gift note is
* served `hidden` and only un-hidden by the Worker when GIFTING_ENABLED is on. */
.home-studio .studio-value-points{list-style:none;padding:0;margin:17px 0 0}
.home-studio .studio-value-points li{display:inline-flex;align-items:center;gap:7px}
.home-studio .studio-value-points .tick{flex:none;width:16px;height:16px;color:#7b55e0}
.hero-actions,.hero-gift,.hero-styles{display:none}
@media(min-width:1024px){
.home-studio .studio-top{align-items:stretch}
.home-studio .studio-top>div:first-child{display:flex;flex-direction:column;padding:6px 0 2px}
.home-studio .studio-top>div:first-child>.eyebrow{margin-bottom:0}
.home-studio .studio-top h1{font-size:clamp(40px,4.6vw,66px);margin:14px 0 20px}
.home-studio .studio-top .studio-subline{margin:0 0 12px}
.home-studio .studio-hero-description{margin:0;max-width:560px}
.home-studio .studio-value-points{flex-direction:column;flex-wrap:nowrap;gap:11px;margin-top:0;padding-top:22px;font-size:15px;color:#3f3a58}
.home-studio .studio-value-points .tick{width:22px;height:22px}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:0;padding-top:24px}
.hero-actions .btn{margin:0;min-height:52px;padding:14px 24px;font-size:15px;border-radius:12px}
.hero-gift:not([hidden]){display:flex;align-items:flex-start;gap:12px;margin-top:14px;padding:13px 16px;border:1px solid #e6dff8;border-radius:16px;background:rgba(255,255,255,.78);max-width:560px}
.hero-gift-icon{font-size:24px;line-height:1.2}
.hero-gift strong{display:block;font-size:15px;color:#21263e;margin-bottom:4px}
.hero-gift p{margin:0;font-size:13.5px;line-height:1.55;color:#5f5a72}
.hero-gift-link{font-size:13.5px;font-weight:800;color:#5b3fc4}
}
/* Seasonal feature tile (Christmas): 2x2 so 1 feature + 12 styles fill whole rows (4 cols: 4 rows; 2 cols: 8 rows). */
.catalogue .product-feature{grid-column:span 2;grid-row:span 2;display:flex;flex-direction:column}.catalogue .product-feature .product-photo{aspect-ratio:auto;flex:1 1 auto;min-height:0}.catalogue .product-feature .product-photo>img{position:absolute;inset:0;object-position:50% 30%}
@media(max-width:600px){.catalogue .product-feature .product-photo{aspect-ratio:4/3.6;flex:0 0 auto}}
/* Name styles: keep the lettering at the top of the art in view on tiles. */
.product-photo>img[src*="/signature-name"],.product-photo>img[src*="/pencil-sketch"],.mini-card>img[src*="/signature-name"],.mini-card>img[src*="/pencil-sketch"],.sp-card-img img[src*="/signature-name"],.sp-card-img img[src*="/pencil-sketch"]{object-position:50% 0}.product-photo>img[src*="/signature-name"]{padding-top:32px;background:#fbf8f2}.product-photo>img[src*="/pencil-sketch"]{padding-top:32px;background:#fdfdfd}@media(max-width:600px){.product-photo>img[src*="/signature-name"],.product-photo>img[src*="/pencil-sketch"]{padding-top:28px}}
.style-hub .sp-card-feature{grid-column:1/-1}.style-hub .sp-card-feature .sp-card-img{aspect-ratio:4/3.4}.style-hub .sp-card-feature .sp-card-img img{object-position:50% 35%}
@media(min-width:960px){.style-hub .sp-card-feature{grid-column:span 2;grid-row:span 2}.style-hub .sp-card-feature .sp-card-img{aspect-ratio:auto;flex:1;min-height:0}.style-hub .sp-card-feature .sp-card-img img{position:absolute;inset:0;object-position:50% 30%}}
@media(min-width:700px) and (max-width:959px){.style-hub .sp-card-feature{grid-column:1/-1;grid-row:auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);column-gap:18px;align-content:center}.style-hub .sp-card-feature .sp-card-img{grid-row:1/span 4;aspect-ratio:4/4.5}.style-hub .sp-card-feature .sp-card-img img{position:static}}
/* Step 1 picker = the old home "collection" merged in (23 Oct 2026). Each card: picture, name (the card's one button,
stretched over the whole card), slogan, then its own small "See examples" link that sits above the button so it never
selects. Cards in a row share one height (grid stretch); the link is pushed to the card bottom. */
.style-picker .mini-card{position:relative;display:flex;flex-direction:column;cursor:pointer}
.style-picker .pick-btn{display:block;margin:7px 3px 0;padding:0;border:0;background:none;text-align:left;font:inherit;font-size:14px;font-weight:800;line-height:1.25;letter-spacing:-.01em;color:#2b2140;cursor:pointer}
.style-picker .pick-btn::after{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit}
.style-picker .pick-btn:focus{outline:none}
.style-picker .mini-card:has(.pick-btn:focus-visible){outline:3px solid #b6a3f1;outline-offset:2px}
.style-picker .pick-desc{display:block;margin:3px 3px 0;font-size:12px;line-height:1.35;color:#6c6780}
.style-picker .pick-more{position:relative;z-index:2;align-self:flex-start;display:inline-flex;align-items:center;min-height:30px;margin:auto 0 0;padding:2px 3px 0;font-size:12px;font-weight:800;color:#5b3fc4;white-space:nowrap}
.style-picker .pick-more:hover{text-decoration:underline}
.style-picker .mini-card>.pick-desc+.pick-more{margin-top:auto}
.style-picker .season-card{flex-direction:row}
.style-picker .season-copy .pick-btn{margin:0;font-size:14px;letter-spacing:-.02em}
.style-picker .season-copy .pick-more{margin-top:0;min-height:28px}
.home-studio .editor-start .editor-header{justify-content:space-between;align-items:flex-start;flex-wrap:wrap}
.editor-start .studio-links{align-items:flex-end;gap:8px;margin-top:4px}
.editor-start .studio-links .textlink{margin-top:0}
.anchor-alias{display:block;height:0;scroll-margin-top:110px}
.picker-note{margin:8px 0 0}
@media(max-width:600px){
.style-picker .pick-btn{font-size:14px}
.style-picker .pick-more,.style-picker .season-copy .pick-more{min-height:36px;font-size:13px;padding:2px 3px 0}
.editor-start .studio-links{flex-direction:row;flex-wrap:wrap;align-items:center;gap:2px 18px;margin-top:0}
.editor-start .studio-links .textlink{display:inline-flex;align-items:center;min-height:32px}
}
/* Christmas banner thumbnail = one style-tile image (23 Oct 2026). A tile image is (picker width - (cols-1) x gap) / cols
* minus 12px (2px border + 4px padding each side). The banner has a 1px border, so 5px padding puts its image at the same
* +6px inset as a tile image. Inside the banner, 100% = picker width - 12px. Uncropped 660:830, sized by CSS (no CLS). */
.style-picker{--sp-cols:4;--sp-gap:8px}
@media(max-width:1080px){.style-picker{--sp-gap:5px}}
@media(max-width:900px){.style-picker{--sp-cols:3;--sp-gap:8px}}
@media(max-width:600px){.style-picker{--sp-cols:2;--sp-gap:8px}}
@media(min-width:881px){.home-studio .editor-start .style-picker{--sp-cols:4}}
.style-picker .season-card{padding:5px}
.style-picker .season-card img,.home-studio .editor-start .style-picker .season-card img{--sp-img:calc((100% + 12px - (var(--sp-cols) - 1) * var(--sp-gap)) / var(--sp-cols) - 12px);width:var(--sp-img);flex:0 0 var(--sp-img);height:auto;aspect-ratio:660/830;object-fit:cover}
/* Home hero, >=1024px (24 Oct 2026): example style thumbnails fill whatever height is left at the bottom of the left
* column. flex-basis 0 + size containment means the strip never makes the column taller than its packed content or the
* right column; thumbnails are sized from the strip's own height and width (cq units), up to 132px tall, and the strip
* puts its label beside them when short, and is hidden entirely when there isn't room for a useful row. Under 1024px it isn't shown (lazy images aren't fetched). */
@media(min-width:1024px){
.home-studio .hero-styles{display:block;flex:1 1 0;min-height:0;container:herostyles/size;margin-top:18px}
.hero-styles-inner{display:flex;flex-direction:column;gap:8px}
.hero-styles-label{margin:0;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#8e64d9;line-height:16px}
.hero-styles ul{display:flex;gap:8px;margin:0;padding:0;list-style:none}
.hero-styles li{flex:none;width:min(calc((100cqw - 32px - var(--hs-label-w,0px)) / 5),calc((100cqh - var(--hs-label-h,24px)) * 360 / 453),105px)}
.hero-styles a{display:block;border-radius:10px;overflow:hidden;border:1px solid #e6dff8;background:#fff;transition:transform .15s ease,box-shadow .15s ease}
.hero-styles a:hover,.hero-styles a:focus-visible{transform:translateY(-2px);box-shadow:0 6px 16px rgba(60,40,120,.12)}
.hero-styles a:focus-visible{outline:3px solid #b6a3f1;outline-offset:2px}
.hero-styles img{display:block;width:100%;height:auto;aspect-ratio:360/453;object-fit:cover}
.hero-styles img[src*="/signature-name"],.hero-styles img[src*="/pencil-sketch"]{object-position:50% 0}
}
/* Short strip: label beside the thumbnails instead of above; too short for a useful row: hidden. */
@container herostyles (max-height:110px){.hero-styles-inner{flex-direction:row;align-items:center;gap:12px;--hs-label-w:108px;--hs-label-h:0px}.hero-styles-label{flex:0 0 96px;line-height:16px}}
@container herostyles (max-height:62px){.hero-styles-inner{display:none}}
/* Two Christmas limited editions, Cosy + White (24 Oct 2026). app.js adds .two-season to the picker when both are live.
* Desktop (>=881px): two banners side by side in the top row, 2 columns each (Cosy above Signature Name + Pencil Sketch,
* White above Minimalist + Old Master); --sp-cols:2 keeps each banner image one tile wide.
* Tablet (601-880px): a 6-track grid, so the two banners share the top row (3 tracks each) and the core tiles stay 3 a row.
* Phone (<=600px): both are ordinary tiles; badge and promise are hidden and one full-width strip sits under the first row. */
.season-strip{display:none}
@media(min-width:881px){.style-picker.two-season .season-card{grid-column:span 2;--sp-cols:2}}
@media(min-width:601px) and (max-width:880px){
.style-picker.two-season{grid-template-columns:repeat(6,minmax(0,1fr))}
.style-picker.two-season>.mini-card{grid-column:span 2}
.style-picker.two-season>.season-card{grid-column:span 3}
.style-picker.two-season .season-card img,.home-studio .editor-start .style-picker.two-season .season-card img{width:42%;flex:0 0 42%}
}
@media(max-width:600px){
.style-picker .season-card{grid-column:auto;flex-direction:column;align-items:stretch;gap:0;padding:4px;text-align:left;background:#f8f7fb;border:2px solid transparent}
.style-picker .season-card.active{background:#efe9ff;border-color:#885fe2}
.style-picker .season-card img,.home-studio .editor-start .style-picker .season-card img{width:100%;flex:none;border-radius:7px}
.style-picker .season-card>.season-copy{display:contents}
.style-picker .season-card .limited-badge,.style-picker .season-card .season-promise{display:none}
.style-picker .season-copy .pick-btn{margin:7px 3px 0;font-size:14px;letter-spacing:-.01em}
.style-picker .season-copy .pick-desc{display:block;margin:3px 3px 0;font-size:12px;line-height:1.35;color:#6c6780}
.style-picker .season-copy .pick-more{margin-top:auto}
.style-picker .pick-desc2{display:none} /* the strip carries the date on phones */
.season-strip{display:block;grid-column:1/-1;margin:2px 0;padding:11px 14px;border-radius:12px;background:linear-gradient(90deg,#b23a48,#d4915a);color:#fff;font-size:13px;font-weight:800;line-height:1.4;text-align:center;letter-spacing:.01em;box-shadow:0 6px 16px #b23a4826}
}
/* Style hub with two live Christmas features: 2x2 side by side on 4 columns, a full row each on 3 columns (rules above),
* and ordinary tiles on the 2-column phone grid so they sit side by side. */
/* Two live Christmas editions share the top row (≥960): nothing else sits in their rows to stretch a 2x2 card, so each is a
side-by-side banner (image one tile wide, copy beside it) instead of a flex-filled image. */
@media(min-width:960px){.style-hub .sp-grid-two-feature .sp-card-feature{grid-row:auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:18px;align-content:center}.style-hub .sp-grid-two-feature .sp-card-feature .sp-card-img{grid-row:1/span 4;aspect-ratio:4/4.5;flex:none}.style-hub .sp-grid-two-feature .sp-card-feature .sp-card-img img{position:static;object-position:50% 20%}}
@media(max-width:699px){.style-hub .sp-card-feature{grid-column:auto}.style-hub .sp-card-feature .sp-card-img{aspect-ratio:4/4.5}.style-hub .sp-card-feature .sp-card-img img{object-position:50% 0}}
/* Social profile links in the shared footer (worker/social.mjs, tools/sync_social.mjs): 40px round icon buttons */
.footer-social{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0;padding:0}.footer .footer-social a{display:inline-grid;place-items:center;width:40px;height:40px;margin:0;border-radius:50%;border:1px solid #e5e2ee;background:#fff;color:#5f5a72;transition:color .15s ease,border-color .15s ease,background .15s ease}.footer .footer-social a:hover,.footer .footer-social a:focus-visible{color:#7559cd;border-color:#cfc3f3;background:#f6f2ff}.footer .footer-social a:focus-visible{outline:2px solid #7559cd;outline-offset:2px}.footer-social svg{width:18px;height:18px;display:block}
/* Breed pages (worker/breed-pages.mjs): photo tips list, example captions on style tiles, "Popular breeds" chips on the hubs */
.bp-tips{margin:8px 0 14px;padding-left:20px;line-height:1.65;color:#4f4a63}
.bp-tips li{margin:4px 0}
.sp-card-desc .bp-ex{display:block;margin-top:4px;font-size:12px;color:#8a84a0}
.bp-hub>p{color:#5f5a72;margin:0 0 12px}
.bp-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.bp-chips a{display:inline-block;padding:9px 16px;border:1px solid #e5e2ee;border-radius:999px;background:#fff;color:#2c2640;font-size:14px;font-weight:600;text-decoration:none}
.bp-chips a:hover,.bp-chips a:focus-visible{border-color:#7559cd;color:#7559cd}
.bp-chips a:focus-visible{outline:2px solid #7559cd;outline-offset:2px}
/* ===== Gallery restyle (site-wide; ":root body" matches the specificity of the original homepage-only ".gallery" scope). Plaster / paper / charcoal, serif headings, museum labels, purple as an accent. ===== */
@font-face{font-family:'Cormorant';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/cormorant-400.woff2?v=7566166d02) format('woff2')}
@font-face{font-family:'Cormorant';font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/cormorant-400i.woff2?v=7566166d02) format('woff2')}
@font-face{font-family:'Cormorant';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/cormorant-500.woff2?v=7566166d02) format('woff2')}
:root body{--ink:#1f1d1b;--ink-soft:#5c5852;--canvas:#ffffff;--line:#dfdeda;--purple:#5a43c9;--lav:#5a43c9;--shadow:0 1px 0 rgba(0,0,0,.02);--serif:'Cormorant','Cormorant Garamond',Georgia,'Times New Roman',serif;--font:'DM Sans','Plus Jakarta Sans',Arial,sans-serif;--rule:#e3e2de;background:#ffffff;color:#1f1d1b}
:root body h1,:root body h2,:root body h3{font-family:var(--serif);font-weight:500;letter-spacing:-.01em;color:#1f1d1b}
:root body h2{line-height:1.08}
:root body .gradient-word,:root body h2 span.gradient-word,:root body .teaser-copy h2 span{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:inherit;font-style:italic;font-weight:400}
:root body .eyebrow{font:500 11px/1.5 var(--font);letter-spacing:.22em;text-transform:uppercase}
:root body strong,:root body b{font-weight:600}
/* chrome */
:root body .top-strip{background:#1f1d1b;color:#ecebe8;font-size:12px;letter-spacing:.04em}
:root body .top-strip strong{color:#fff;font-weight:500}
:root body .header{background:rgba(255,255,255,.94);border-bottom:1px solid var(--rule)}
:root body .nav-links a{font-weight:500;color:#3a3733}
:root body .benefit-strip{background:#f6f5f3;color:#5c5852;border-bottom:1px solid var(--rule);letter-spacing:.14em;text-transform:uppercase;font-size:10.5px;padding:9px 10px}
:root body .benefit-strip>span+span::before{color:#a39d92;margin:0 14px}
/* buttons */
:root body .btn,:root body .nav-create{border-radius:2px;font-weight:600;text-transform:uppercase;letter-spacing:.14em;font-size:12px;box-shadow:none;transition:background .2s ease,color .2s ease,border-color .2s ease}
:root body .btn-dark,:root body .nav-create{background:#1f1d1b;color:#fff;border:1px solid #1f1d1b}
:root body .btn-dark:hover,:root body .nav-create:hover{background:var(--accent);border-color:var(--accent);transform:none}
:root body .btn-light{background:transparent;color:#1f1d1b;border:1px solid #1f1d1b}
:root body .btn-light:hover{background:#1f1d1b;color:#fff;transform:none}
/* ---- hero: single centred reading column ---- */
:root body .home-studio{background:#ffffff;overflow-x:clip}
:root body .home-studio .studio-top{display:block}
:root body .home-studio .studio-top>div:first-child{max-width:none}
:root body .studio-head{text-align:center;max-width:1180px;margin:0 auto}
:root body .studio-kicker{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 0;margin:0 0 26px;font-size:11px;color:#5c5852}
:root body .studio-kicker>span{font:inherit;color:inherit;letter-spacing:inherit;max-width:none;margin:0}
:root body .studio-kicker>span+span::before{content:"";display:inline-block;width:4px;height:4px;border-radius:50%;background:var(--accent);margin:0 16px;vertical-align:middle;position:relative;top:-1px}
:root body .home-studio .studio-top h1{font-family:var(--serif);font-weight:500;font-size:clamp(46px,6.6vw,104px);line-height:.98;letter-spacing:-.018em;max-width:none;margin:0 auto;text-wrap:balance}
:root body .home-studio .studio-top h1 .gradient-word{font-weight:400}
:root body .home-studio .studio-aside{display:block;max-width:none;margin:0}
/* Charlie exhibition: full-bleed wall, three steps */
:root body .hero-ba{position:relative;margin:54px calc(50% - 50vw) 0;padding:64px max(32px,calc(50vw - 640px)) 40px;background:linear-gradient(180deg,#f6f5f3 0%,#f1f0ed 100%);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);border-radius:0;box-shadow:none;max-width:none;width:auto}
:root body .hero-ba-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr) 72px minmax(0,1fr) 72px minmax(0,1.55fr);align-items:start}
:root body .hero-ba-step{min-width:0;display:flex;flex-direction:column;align-items:center}
:root body .hero-ba-stage{height:500px;width:100%;display:flex;align-items:center;justify-content:center;position:relative}
:root body .hero-ba img{display:block;width:100%;height:auto;aspect-ratio:2/3;object-fit:cover;border-radius:0}
:root body .hero-ba-snap{width:min(100%,232px);overflow:hidden;box-shadow:0 1px 2px rgba(0,0,0,.08),0 12px 26px -12px rgba(40,32,24,.35);transform:rotate(-2deg)}
:root body .hero-ba-print{width:min(100%,262px);box-shadow:0 1px 1px rgba(0,0,0,.05),0 16px 30px -14px rgba(40,32,24,.4)}
:root body .hero-ba-conn{align-self:start;height:500px;display:flex;align-items:center;justify-content:center;position:relative}
:root body .hero-ba-conn::before{content:"";width:100%;height:1px;background:linear-gradient(90deg,transparent,#a59d90 25%,#a59d90 75%,transparent)}
:root body .hero-ba-conn::after{content:"";position:absolute;left:50%;top:50%;width:7px;height:7px;margin:-4px 0 0 -4px;border-radius:50%;background:#ffffff;border:1px solid #8f877a}
:root body .hero-ba-cap{margin:22px 0 0;text-align:center;line-height:1.45;max-width:270px}
:root body .hero-ba-cap .ba-no{display:block;font:500 10px var(--font);letter-spacing:.24em;color:#8a857d;margin-bottom:6px}
:root body .hero-ba-cap strong{display:block;font:500 22px/1.2 var(--serif);color:#1f1d1b}
:root body .hero-ba-cap>span:last-child{display:block;font-size:12.5px;color:#6b665e;margin-top:3px}
:root body .hero-ba figcaption{display:block;text-align:center;max-width:560px;margin:40px auto 0;padding:22px 26px 24px;background:#fafaf9;border:1px solid var(--rule);box-shadow:0 10px 24px -18px rgba(40,32,24,.35)}
:root body .hero-ba-label{display:block;font:500 10px var(--font);letter-spacing:.22em;text-transform:uppercase;color:#8a857d}
:root body .hero-ba figcaption strong{display:block;font:500 26px/1.2 var(--serif);margin:8px 0 6px;color:#1f1d1b}
:root body .hero-ba-meta{display:block;font-size:13.5px;line-height:1.6;color:#5c5852}
:root body .hero-ba-cta{display:inline-flex;align-items:center;gap:8px;margin-top:16px;padding:12px 22px;border-radius:2px;font:600 12px var(--font);letter-spacing:.14em;text-transform:uppercase}
:root body .hero-ba-cta::after{display:none}
/* price line + copy under the exhibit */
:root body .home-studio .studio-aside .studio-price{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 22px;margin:34px auto 0;max-width:820px;background:none;border:0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);border-radius:0;box-shadow:none;padding:16px 10px;white-space:normal;text-align:center}
:root body .studio-price .from-label{color:#8a857d;letter-spacing:.22em;font-weight:500;font-size:10px}
:root body .home-studio .studio-price strong{font:500 34px/1 var(--serif);letter-spacing:0}
:root body .home-studio .studio-price>span,:root body .studio-price .price-about{font-size:13px;color:#5c5852}
:root body .currency-quick select{border-radius:2px;border:1px solid var(--rule);background:#fafaf9}
:root body .studio-copy{max-width:720px;margin:44px auto 0;text-align:center}
:root body .home-studio .studio-hero-description{font-size:17px;line-height:1.75;color:#4a4641;max-width:640px;margin:0 auto}
:root body .studio-value-points{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 26px;margin:22px 0 0;padding:0;list-style:none}
:root body .studio-value-points li{display:flex;align-items:center;gap:8px;font-size:13.5px;color:#3a3733}
:root body .studio-value-points .tick{color:var(--accent)}
:root body .hero-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:30px}
:root body .hero-gift:not([hidden]){margin:26px auto 0;text-align:left;border-radius:2px;border-color:var(--rule)}
:root body .hero-styles{margin:40px auto 0;display:flex;justify-content:center}
:root body .hero-styles-inner{display:flex;flex-direction:column;align-items:center;gap:12px}
:root body .hero-styles-label{font:500 10px var(--font);letter-spacing:.22em;text-transform:uppercase;color:#8a857d;margin:0}
:root body .hero-styles ul{gap:14px}
:root body .hero-styles img{border-radius:0;border:5px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.06),0 8px 16px -10px rgba(40,32,24,.4)}
:root body .compare{max-width:900px;margin:56px auto 0;background:#fafaf9;border:1px solid var(--rule);border-radius:2px;box-shadow:none;padding:28px 30px}
:root body .compare-head{justify-content:center;flex-direction:column;align-items:center;text-align:center}
:root body .compare-head h2{font:500 32px/1.1 var(--serif)}
:root body .compare-card{border-radius:2px;border-color:var(--rule);background:#fff}
:root body .compare-card.cc-bundle{border-color:#1f1d1b;background:#fff}
:root body .compare-card h3{font-size:24px}
:root body .cc-price{font-family:var(--serif);font-size:24px}
:root body .compare-facts{justify-content:center}
:root body .compare-facts li:before{color:var(--accent)}
:root body .tick{color:var(--accent)}
/* steps strip + studio */
:root body .quick-path{background:#fafaf9;border:1px solid var(--rule);border-radius:2px;box-shadow:none}
:root body .quick-steps strong{font:500 19px/1.2 var(--serif)}
:root body .path-icon,:root body .path-icon.mint,:root body .path-icon.peach{background:#f6f5f3;color:#1f1d1b;border-radius:50%}
:root body .studio-layout{border-radius:2px}
:root body .editor-panel,:root body .result-panel{background:#fafaf9;border:1px solid var(--rule);border-radius:2px;box-shadow:none}
:root body .editor-header h2{font-size:clamp(32px,3.2vw,44px)}
:root body .mini-card{background:#fff;border:1px solid #e6e6e3}
:root body .mini-card img{border-radius:0}
:root body .mini-card.active{background:#fff;border-color:#1f1d1b;outline:1px solid #1f1d1b;outline-offset:2px}
:root body .purchase-panel,:root body .studio-layout>#purchasePanel{background:#ffffff;border:1px solid var(--rule);border-radius:2px}
/* sections */
:root body .faqs h2,:root body .section-intro h2,:root body .teaser-copy h2,:root body .story-hero h2,:root body .closing h2,:root body .newsletter-copy h2{font-family:var(--serif);font-weight:500;letter-spacing:-.01em;line-height:1.04}
:root body .faqs details{border-color:var(--rule)}
:root body .faqs summary{font-weight:500}
:root body .before-after{border-top:1px solid var(--rule)}
:root body .ba-pair{border-radius:2px;border-color:var(--rule);box-shadow:none}
:root body .ba-tag{border-radius:0;background:rgba(250,250,249,.92);color:#1f1d1b;letter-spacing:.16em;font-weight:500}
:root body .ba-tag.art{background:#1f1d1b}
:root body .ba-pair figcaption strong{font:500 20px var(--serif)}
:root body .ba-arrow{color:#8a857d;background:none;box-shadow:none}
:root body .story-hero{background:#f6f5f3;border-radius:2px}
:root body .hero-cloud,:root body .hero-star{display:none}
:root body .pill{background:#fafaf9;border:1px solid var(--rule);border-radius:2px;color:#5c5852;letter-spacing:.18em}
:root body .pill-dot{background:var(--accent)}
:root body .hero-feature{border-radius:0}
:root body .inspo-teaser{background:#f6f5f3;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
:root body .closing{background:#22201e}
:root body .closing h2 i{color:#c9bdf3}
:root body .closing .btn-light{background:#ffffff;border-color:#ffffff;color:#1f1d1b}
:root body .closing .btn-light:hover{background:var(--accent);border-color:var(--accent);color:#fff}
:root body .newsletter-band{background:#ffffff}
:root body .newsletter-card{background:#fafaf9;border:1px solid var(--rule);border-radius:2px;box-shadow:none}
:root body .nl-email{border-radius:2px}
:root body .footer{background:#f6f5f3;border-top:1px solid var(--rule)}
:root body .footer-heading{letter-spacing:.2em;color:#8a857d}
:root body .footer-social a{border-radius:50%;background:#fafaf9;border:1px solid var(--rule);color:#1f1d1b}
/* tablet/mobile: stack the exhibit top to bottom */
@media(max-width:880px){
:root body .home-studio{padding-top:44px}
:root body .hero-ba-stage{height:auto}
:root body .hero-ba-conn{height:56px}
}
@media(max-width:600px){
:root body .home-studio .studio-top h1{font-size:clamp(40px,11.4vw,52px);line-height:1.02}
:root body .studio-kicker{flex-direction:column;align-items:center;gap:6px;font-size:10px;letter-spacing:.2em}
:root body .studio-kicker>span+span::before{display:none}
:root body .studio-kicker .studio-subline{color:#1f1d1b}
:root body .home-studio .studio-hero-description{font-size:15.5px}
:root body .hero-actions .btn{flex:1 1 100%}
:root body .compare{padding:20px 16px}
:root body .hero-styles ul{gap:8px}
}
/* gallery restyle: neutralise the old split-hero rules */
:root body .home-studio .hero-ba{display:block;gap:0}
:root body .home-studio .hero-ba figcaption{display:block}
:root body .home-studio .hero-ba-cta{min-height:0}
:root body .home-studio .studio-top .studio-kicker{align-items:center}
:root body .home-studio .studio-top .studio-kicker .studio-subline{display:inline;font:inherit!important;color:#1f1d1b!important;margin:0;letter-spacing:inherit}
:root body .home-studio .studio-top .studio-kicker>span{font-size:inherit}
:root body .home-studio .hero-actions{display:flex}
:root body .home-studio .hero-styles{display:flex;container-type:normal;flex:none;min-height:0}
:root body .home-studio .hero-styles-inner{display:flex;flex-direction:column;align-items:center}
:root body .home-studio .hero-styles a{border-radius:0;border:0;background:none}
:root body .closing h2{color:#ffffff}
:root body .closing span{color:#bdb6aa}
:root body .home-studio .studio-top .studio-kicker{max-width:none}
:root body .home-studio .studio-layout{background:#f6f5f3;border:1px solid var(--rule);box-shadow:none}
@media(min-width:881px){
:root body .hero-ba-steps{grid-template-columns:minmax(0,1fr) 56px minmax(0,1fr) 56px minmax(0,1.9fr)}
:root body .hero-ba-stage,:root body .hero-ba-conn{height:540px}
:root body .hero-ba-snap{width:min(100%,250px)}
:root body .hero-ba-print{width:min(100%,286px)}
}
:root body .home-studio .studio-value-points{display:flex;justify-content:center;flex-wrap:wrap}
:root body .home-studio .studio-top .studio-kicker{margin:0 0 30px}
@media(min-width:881px){:root body .home-studio .hero-ba{padding-top:44px}}
:root body .home-studio .hero-styles ul{display:flex;padding:0;list-style:none}
:root body .home-studio .hero-styles li{flex:none}
:root body .home-studio .hero-styles a{display:block}
:root body .home-studio .hero-styles img{display:block;width:100%;height:auto;aspect-ratio:360/453;object-fit:cover}
/* --- 26 Oct 2026 (2): hero style strip uses the full width; framed gallery pieces --- */
:root body .home-studio .hero-styles{width:var(--hs-w);max-width:none;margin-left:calc((100% - var(--hs-w)) / 2)}
:root body .home-studio .hero-styles-inner{width:100%}
:root body .home-studio .hero-styles ul{flex-wrap:wrap;justify-content:center;margin:0 auto}
:root body .home-studio .hero-styles a{transition:transform .2s ease}
:root body .home-studio .hero-styles a:hover,:root body .home-studio .hero-styles a:focus-visible{transform:translateY(-3px);box-shadow:none}
:root body .home-studio .hero-styles img{border:4px solid #fff;box-shadow:0 0 0 1px #1f1d1b,0 10px 18px -12px rgba(40,32,24,.5)}
@media(max-width:600px){
:root body .home-studio .hero-styles{margin-top:34px;--hs-w:calc(100vw - 30px)}
:root body .home-studio .hero-styles-inner{align-items:stretch}
:root body .home-studio .hero-styles-label{text-align:center}
:root body .home-studio .hero-styles ul{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin:0 -15px;padding:6px 15px 16px;scroll-padding:0 15px}
:root body .home-studio .hero-styles ul::-webkit-scrollbar{display:none}
:root body .home-studio .hero-styles li{scroll-snap-align:start}
:root body .home-studio .hero-styles img{border-width:3px}
}
/* style picker: each card is a framed piece with a small museum label */
:root body .style-picker .mini-card{background:transparent;border:0;border-radius:0;padding:0;outline:0;box-shadow:none;overflow:visible}
:root body .style-picker .mini-card>img,:root body .style-picker .season-card img{box-sizing:border-box;border-radius:0;transition:box-shadow .2s ease,transform .2s ease}
:root body .style-picker .mini-card:hover>img,:root body .style-picker .season-card:hover img{transform:translateY(-2px)}
:root body .style-picker .pick-btn{margin:12px 0 0;font:500 18px/1.15 var(--serif);letter-spacing:0;color:#1f1d1b}
:root body .style-picker .pick-desc{margin:3px 0 0;font-size:11.5px;line-height:1.4;color:#6b665e}
:root body .style-picker .pick-more{padding:2px 0 0;text-decoration-color:#cacac5;text-underline-offset:4px}
:root body .style-picker .mini-card.active,:root body .home-studio .style-picker .mini-card.active{background:transparent;outline:0}
:root body .style-picker .mini-card.active>img,:root body .style-picker .season-card.active img{box-shadow:0 0 0 4px #fafaf9,0 0 0 6px var(--accent),0 16px 24px -16px rgba(40,32,24,.55)}
:root body .style-picker .mini-card.active .pick-btn::before{content:"Selected";display:block;width:max-content;margin:0 0 6px;padding:3px 7px;background:var(--accent);color:#fff;font:600 9px/1.3 var(--font);letter-spacing:.18em;text-transform:uppercase}
:root body .style-picker .mini-card:has(.pick-btn:focus-visible){outline:2px solid var(--accent);outline-offset:6px}
:root body .style-picker .season-card{background:#fafaf9;border:1px solid var(--rule);padding:16px;gap:20px;align-items:center}
:root body .style-picker .season-card.active{background:#fafaf9;border-color:#1f1d1b}
:root body .style-picker .limited-badge{background:#7a2e38;border-radius:0;font-weight:600;letter-spacing:.2em}
@media(max-width:600px){
:root body .style-picker .mini-card>img,:root body .style-picker .season-card img{border-width:3px}
:root body .style-picker .season-card{background:transparent;border:0}
:root body .style-picker .season-card.active{background:transparent;border:0}
:root body .style-picker .pick-btn{font-size:16px}
}
/* Meet Charlie: each image framed and matted, the tag lettered on the mat */
:root body .ba-pair{background:transparent;border:0;padding:0}
:root body .ba-img{aspect-ratio:auto;overflow:visible;border-radius:0}
:root body .ba-img img{aspect-ratio:2/3;height:auto}
:root body .ba-tag,:root body .ba-tag.art,:root body .ba-tag.tag-low{top:auto;left:0;right:0;width:max-content;padding:0;background:none;color:#8a857d;font-size:8.5px;letter-spacing:.24em;font-weight:500}
:root body .ba-tag.art{color:#1f1d1b}
:root body .ba-pair figcaption{justify-content:center;flex-direction:column;align-items:center;gap:2px;text-align:center;padding:16px 0 0}
:root body .ba-pair figcaption span{font-size:11.5px;color:#6b665e}
/* Your pet. Pure art.: two straight-hung framed pieces with museum labels */
:root body .story-hero .hero-feature{transform:none;top:3%;left:6%;width:44%;height:74%;border:8px solid #1f1d1b;box-shadow:inset 0 0 0 1px rgba(0,0,0,.05),0 2px 3px rgba(0,0,0,.18),0 30px 44px -24px rgba(30,24,16,.6)}
:root body .story-hero .hero-side{top:14%;left:56%;width:38%;height:64%}
:root body .story-hero .hero-feature figcaption{position:absolute;left:50%;top:calc(100% + 18px);transform:translateX(-50%);width:max-content;max-width:100%;padding:7px 12px;background:#fafaf9;border:1px solid var(--rule);font:500 10px/1.3 var(--font);letter-spacing:.18em;text-transform:uppercase;color:#5c5852;box-shadow:0 6px 12px -10px rgba(40,32,24,.4)}
:root body .story-hero .hero-feature figcaption span+span{display:none}
:root body .story-hero .hero-note{top:0;bottom:auto;left:auto;right:5%;transform:none;border-radius:0;background:#fafaf9;border:1px solid var(--rule);box-shadow:none;padding:9px 14px;text-align:center}
:root body .story-hero .hero-note span{color:#8a857d;letter-spacing:.2em;font-weight:500}
:root body .story-hero .hero-note strong{font:500 15px var(--serif);color:#1f1d1b}
:root body .story-hero .hero-art{overflow:visible}
@media(max-width:600px){
:root body .story-hero .hero-art{height:380px}
:root body .story-hero .hero-feature{border-width:5px;height:68%}
:root body .story-hero .hero-side{top:12%;height:62%}
:root body .story-hero .hero-note{display:none}
:root body .story-hero .hero-feature figcaption{font-size:8px;padding:5px 8px;top:calc(100% + 12px)}
}
/* "Giving it as a gift?" as a two-column gallery card */
:root body .hero-gift:not([hidden]){max-width:760px;padding:24px 28px 20px;border:1px solid var(--rule);background:#fafaf9}
:root body .hero-gift-body>strong,:root body .hero-gift>div>strong{font:500 24px/1.2 var(--serif);color:#1f1d1b;text-align:center;margin-bottom:10px}
:root body .hero-gift .hero-gift-option strong{font:500 18px/1.25 var(--serif);color:#1f1d1b}
:root body .hero-gift p{font-size:13px;color:#5c5852}
:root body .hero-gift-option+.hero-gift-option{border-top-color:var(--rule)}
:root body .hero-gift-icon{filter:grayscale(1);opacity:.75}
:root body .hero-gift-link{display:inline-block;margin-top:6px;font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#1f1d1b;text-decoration:underline;text-decoration-color:#cacac5;text-underline-offset:4px}
:root body .hero-gift-link:hover{color:var(--accent);text-decoration-color:currentColor}
/* "Gifting a whole team? See corporate gifts" (CORPORATE_GIFTS_ENABLED, worker/corporate-links.mjs): a quiet text line, not a button. */
:root body .hero-gift p.hero-gift-team{margin:16px 0 0;text-align:center;font-size:12.5px;color:#5c5852}
:root body .hero-gift-team a{color:inherit;text-decoration:underline;text-decoration-color:#cacac5;text-underline-offset:3px}
:root body .hero-gift-team a:hover{color:var(--accent);text-decoration-color:currentColor}
@media(min-width:881px){
:root body .hero-gift-options{display:grid;grid-template-columns:1fr 1fr;gap:0 28px}
:root body .hero-gift-option+.hero-gift-option{border-top:0;border-left:1px solid var(--rule);padding-left:28px}
}
:root body .story-hero .hero-cloud,:root body .story-hero .hero-star{display:none}
@media(max-width:600px){
:root body .benefit-strip{gap:3px 16px;font-size:10px;letter-spacing:.12em;padding:8px 12px}
:root body .benefit-strip span{font-size:10px}
:root body .benefit-strip>span+span::before{content:none}
}
/* phone gift links, gallery style */
:root body .hero-voucher-mobile{border-radius:0;background:#fafaf9;border:1px solid var(--rule);color:#3c3934;font-weight:500}
:root body .hero-voucher-mobile>span[aria-hidden]{filter:grayscale(1);opacity:.75}
:root body .hero-voucher-mobile strong{color:#1f1d1b;font-weight:600;text-decoration:underline;text-decoration-color:#cacac5;text-underline-offset:4px}
:root body .hero-voucher-mobile-alt{color:#1f1d1b;font-weight:500;text-decoration:underline;text-decoration-color:#cacac5;text-underline-offset:4px}
/* studio canvas + upload in the neutral palette */
:root body .home-studio .upload-box,:root body .upload-box{background:#fafaf9;border:1.5px dashed #b9b2a6;border-radius:0}
:root body .upload-box.dragover,:root body .original-drop.dragover{background:#f4f4f2;border-color:#1f1d1b;box-shadow:inset 0 0 0 2px #1f1d1b}
:root body .result-state{border-radius:0;background:#f6f5f3;color:#5c5852;font-weight:600;letter-spacing:.14em}
:root body .result-image{border-radius:0;background:#f4f4f2}
:root body .preview-placeholder{background:#f4f4f2}
:root body .result-caption{border-radius:0;background:#f7f7f5}
:root body .result-caption>p{border-color:var(--rule);color:#6b665e}
/* style + landing pages: framed examples */
:root body .sp-card-img{background:#fff;border:4px solid #1f1d1b;box-shadow:0 2px 2px rgba(0,0,0,.12),0 16px 24px -16px rgba(40,32,24,.55)}
:root body .sp-card-img img{box-sizing:border-box;border:solid #fff;border-width:clamp(8px,7%,18px);transform:none!important}
:root body .sp-card:hover .sp-card-img,:root body .sp-card:focus-within .sp-card-img{box-shadow:0 0 0 3px #ffffff,0 0 0 4px #1f1d1b,0 16px 24px -16px rgba(40,32,24,.55)}
:root body .sp-limited{border-radius:0;background:#7a2e38;color:#fff;font-weight:600;letter-spacing:.14em;text-transform:uppercase;font-size:9px;box-shadow:none;top:16px;left:16px}
:root body .sp-card-desc{color:#6b665e}
:root body .sp-card-more,:root body .textlink{color:#1f1d1b;font-weight:600;text-decoration:underline;text-decoration-color:#cacac5;text-underline-offset:4px}
:root body .sp-card-more:hover,:root body .textlink:hover{color:var(--accent);text-decoration-color:currentColor}
:root body .sp-gallery figure{background:#fff;padding:7%;padding-bottom:0;border:4px solid #1f1d1b;box-shadow:0 2px 2px rgba(0,0,0,.12),0 18px 28px -18px rgba(40,32,24,.6)}
:root body .sp-gallery img{box-shadow:0 0 0 1px rgba(0,0,0,.08)}
:root body .sp-gallery figcaption{font-weight:500;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#6b665e;text-align:center;padding:10px 4px 12px}
/* gift voucher flow + success/orders/review boxes: square gallery cards */
:root body .gv-form,:root body .gv-review-look,:root body .gv-review-summary,:root body .gv-done,:root body .gv-toolbar{border-radius:2px;box-shadow:none;border-color:var(--rule)}
:root body .gv-tier,:root body .gv-choice,:root body .gv-email-frame,:root body .gv-error,:root body .gv-review-warn,:root body .gv-codebox{border-radius:0}
:root body .gv-email-frame{background:#f4f4f2}
:root body .gv-chip{border-radius:0;background:#fafaf9;border-color:var(--rule);color:#1f1d1b;font-weight:600}
:root body .gv-badge{border-radius:0;letter-spacing:.16em;font-weight:600}
:root body .lookup-box,:root body .redo-box,:root body .gift-box,:root body .referral-box,:root body .reveal-frame,:root body .review-form,:root body .wall-section{border-radius:2px}
:root body .gv-tier.is-on,:root body .gv-tier:has(input:checked),:root body .gv-choice:has(input:checked){border-color:#1f1d1b;box-shadow:0 0 0 1px #1f1d1b;background:#fafaf9}
/* inspiration page */
:root body .inspo-card{border-color:var(--rule);box-shadow:none;background:#fafaf9}
:root body .inspo-card-body span{color:#6b665e;font-weight:500;letter-spacing:.18em}
:root body .inspo-card-body h3{font:500 21px/1.2 var(--serif)}
:root body .inspo-filters button{border-radius:0}
:root body .inspo-filters button.active{background:#1f1d1b;color:#ffffff;border-color:#1f1d1b}
:root body .gv-points li{border-radius:0;background:#fafaf9;border:1px solid var(--rule);color:#3c3934;font-weight:500}
/* hero headline line 2: master's purple gradient text, on the gallery serif */
:root body .home-studio .studio-top h1 .gradient-word{background:linear-gradient(90deg,#7955df,#b062d3 70%,#be4f7c);-webkit-background-clip:text;background-clip:text;color:transparent;padding:0 .08em .06em 0;-webkit-box-decoration-break:clone;box-decoration-break:clone}
/* colour pops: master's brand purple, used sparingly on the gallery palette */
:root body{--accent:#7053de;--xmas-green:#2f5d46}
:root body .eyebrow{color:var(--accent)}
:root body .btn-dark.hero-cta,:root body #generateBtn,:root body #checkoutBtn,:root body .nav-create{background:var(--accent);border-color:var(--accent);color:#fff}
:root body .btn-dark.hero-cta:hover,:root body #generateBtn:not(:disabled):hover,:root body #checkoutBtn:hover,:root body .nav-create:hover{background:#5a43c9;border-color:#5a43c9}
:root body #generateBtn:disabled{background:#b9b0de;border-color:#b9b0de}
:root body .quick-steps strong,:root body .quick-steps .path-icon{color:var(--accent)}
:root body .hero-ba-cta{background:var(--accent);border-color:var(--accent);color:#fff}:root body .hero-ba-cta:hover{background:#5a43c9}
/* museum labels: small brand dot */
:root body .ba-tag.art::before,:root body .story-hero figcaption strong::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--accent);margin-right:7px;vertical-align:middle;position:relative;top:-1px}
/* soft lavender band behind Meet Charlie */
:root body .before-after .ba-pair{background:transparent}
/* Christmas duo: burgundy badge + pine green edge */
:root body .season-card .limited-badge{background:#7a2e38;color:#fff}
/* green rule above the Christmas badge: phone only (27 Oct: removed on desktop) */
@media(max-width:600px){:root body .season-card .season-copy{border-top:2px solid var(--xmas-green)}}
:root body .eyebrow.studio-kicker,:root body .studio-kicker>span{color:#3c3934}
/* --- 26 Oct 2026 (4): bigger pictures in every frame; phone hero exhibit in one row --- */
@media(min-width:881px){:root body .home-studio{padding-top:44px}:root body .home-studio .hero-ba{margin-top:36px}}
:root body .home-studio .hero-styles{margin-top:30px}
:root body .home-studio .studio-price{margin-top:22px}
:root body .home-studio .studio-copy{margin-top:28px}
:root body .ba-tag,:root body .ba-tag.art,:root body .ba-tag.tag-low{bottom:2.4%}
:root body .story-hero .hero-feature{padding:0}
:root body .story-hero .hero-feature img{width:100%;height:100%;object-fit:cover;box-shadow:none}
@media(max-width:600px){
:root body .style-picker .mini-card>img,:root body .style-picker .season-card img{padding:0}
:root body .story-hero .hero-feature{padding:0}
}
@media(max-width:880px){
:root body .hero-ba{padding:24px 12px 22px;margin-top:22px}
:root body .hero-ba-steps{--row:calc(100vw - 44px);grid-template-columns:minmax(0,1fr) 10px minmax(0,1fr) 10px minmax(0,1.3fr);justify-items:stretch;align-items:start}
:root body .hero-ba-step{width:auto}
:root body .hero-ba-stage,:root body .hero-ba-room,:root body .hero-ba-conn{height:calc(var(--row) * .43 + 56px);max-width:none}
:root body .hero-ba-snap{width:100%;border-width:3px}
:root body .hero-ba-snap img{border-radius:5px}
:root body .hero-ba-print{width:100%;padding:4px}
:root body .hero-ba-conn{width:auto;margin:0}
:root body .hero-ba-conn::before{width:100%;height:1px;background:#a59d90}
:root body .hero-ba-conn::after{display:none}
:root body .hero-ba-cap{margin-top:9px;max-width:none;line-height:1.3}
:root body .hero-ba-cap .ba-no{font-size:8px;margin-bottom:2px;letter-spacing:.2em}
:root body .hero-ba-cap strong{font-size:13.5px}
:root body .hero-ba-cap>span:last-child{font-size:9.5px;line-height:1.3;margin-top:2px}
:root body .hero-ba figcaption{margin-top:20px}
}
@media(min-width:601px) and (max-width:880px){:root body .hero-ba-steps{--row:min(100vw - 44px,700px);max-width:700px;margin:0 auto}}
:root body .home-studio .studio-top>.compare{margin-top:30px}
/* 01 and 02 in the hero exhibit: no white border, just the shadow */
:root body .hero-ba-snap{border:0;border-radius:12px}
:root body .hero-ba-snap img{border-radius:0;display:block}
:root body .hero-ba-print{padding:0;background:none}
:root body .hero-ba-print img{display:block}
@media(max-width:880px){:root body .hero-ba-snap{border-radius:7px}}
/* Phone: the headline wraps before "into", so it joins the gradient line */
@media(max-width:600px){:root body .home-studio .studio-top h1 .h1-into{font-style:italic;font-weight:400;background:linear-gradient(90deg,#7353de,#7955df);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.04em}}
/* --- 26 Oct 2026 (5): gallery wall, borderless pictures, white Meet Charlie band, phone tidy-ups --- */
/* hero style examples: a touch bigger, closer together */
:root body .home-studio .hero-styles{--hs-w:min(1240px,calc(100vw - 64px))}
:root body .home-studio .hero-styles ul{gap:8px;max-width:none}
:root body .home-studio .hero-styles li{width:clamp(52px,calc((var(--hs-w) - 12 * 8px) / 13),98px)} /* 13 year-round tiles incl. ’80s Glamour (29 Oct 2026) */
:root body .home-studio .hero-styles img{border-width:3px}
/* Create their portrait: no frame, bigger pictures, soft shadow; selected = purple ring */
:root body .style-picker{gap:24px 14px}
:root body .style-picker .mini-card>img,:root body .style-picker .season-card img{border:0;padding:0;background:none;box-shadow:0 1px 2px rgba(0,0,0,.1),0 14px 22px -14px rgba(40,32,24,.5)}
/* Meet Charlie: white band, borderless bigger pictures, the PHOTO / PORTRAIT label under each */
:root body .before-after{background:#fff;box-shadow:none;clip-path:none}
:root body .ba-track{gap:28px}
:root body .ba-imgs{gap:10px}
:root body .ba-img{padding:0;border:0;background:none;box-shadow:none;display:flex;flex-direction:column}
:root body .ba-img img{box-shadow:0 1px 2px rgba(0,0,0,.1),0 18px 26px -16px rgba(40,32,24,.5)}
:root body .ba-tag,:root body .ba-tag.art,:root body .ba-tag.tag-low{position:static;margin:10px auto 0}
/* Your pet. Pure art.: white frames */
:root body .story-hero .hero-feature{border-color:#fff;background:#fff}
@media(max-width:600px){
/* eyebrow: the second phrase on its own line */
:root body .hero-ba-label .hl-sep{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:root body .hero-ba-label .hl-sub{display:block;margin-top:4px}
/* style examples: no borders, a bit bigger */
:root body .home-studio .hero-styles img{border:0;box-shadow:0 1px 2px rgba(0,0,0,.1),0 8px 14px -10px rgba(40,32,24,.5)}
:root body .home-studio .hero-styles ul{gap:8px}
:root body .home-studio .hero-styles li{width:calc((100vw - 30px - 3 * 8px) / 4)}
:root body .style-picker{gap:20px 12px}
/* Meet Charlie: one set at a time, swipe between them */
:root body .ba-track{display:flex;margin:26px 0 0;padding:0 0 6px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
:root body .ba-track::-webkit-scrollbar{display:none}
:root body .ba-pair{scroll-snap-stop:always}
/* Your pet. Pure art.: centred pair */
:root body .story-hero .hero-art{width:100%;max-width:none;margin:0}
:root body .story-hero .hero-feature{left:5%;width:43%;margin:0}
:root body .story-hero .hero-side{left:52%;width:43%}
}
/* phone gift links now sit under Digital or Bundle */
:root body .home-studio .studio-top>.hero-gift-mobile,:root body .home-studio .studio-top>.hero-voucher-mobile{margin:22px auto 0;max-width:520px}
/* --- 26 Oct 2026 (6): 03 back to the plain wall, lighter; master's rounded corners on every other image --- */
:root body .hero-ba-snap,:root body .hero-ba-snap img,:root body .hero-ba-print,:root body .hero-ba-print img{border-radius:11px}
:root body .hero-ba-print{overflow:hidden}
:root body .home-studio .hero-styles a,:root body .hero-styles a,:root body .hero-styles img{border-radius:10px}
:root body .mini-card{border-radius:10px}
:root body .mini-card img,:root body .style-picker .mini-card>img{border-radius:7px}
:root body .style-picker .season-card img{border-radius:9px}
:root body .ba-img,:root body .ba-img img{border-radius:14px}
:root body .story-hero .hero-feature{border-radius:7px}
:root body .story-hero .hero-feature img{border-radius:2px}
:root body .teaser-img{border-radius:14px}
:root body .result-image,:root body .result-image img{border-radius:12px}
:root body .sp-card-img{border-radius:14px}
:root body .sp-card-img img{border-radius:10px}
:root body .sp-gallery figure{border-radius:16px}
:root body .sp-gallery img{border-radius:11px}
:root body .inspo-card{border-radius:16px;overflow:hidden}
:root body .inspo-hero-photo{border-radius:22px}
@media(max-width:600px){
:root body .style-picker .season-card img{border-radius:7px}
:root body .result-image,:root body .result-image img{border-radius:8px}
}
/* phones/tablets: the full "Giving it as a gift?" card (as on desktop) under Digital or Bundle, its two choices stacked as cards */
@media(max-width:1023px){
:root body .home-studio .hero-gift:not([hidden]){display:block;max-width:640px;margin:24px auto 0;padding:24px 16px 16px;text-align:left}
:root body .home-studio .hero-gift:not([hidden])>.hero-gift-icon{display:none}
:root body .home-studio .hero-gift-body>strong{display:block;text-align:center;margin-bottom:14px}
:root body .home-studio .hero-gift-options{display:grid;grid-template-columns:1fr;gap:12px}
:root body .home-studio .hero-gift-option,:root body .home-studio .hero-gift-option+.hero-gift-option{display:flex;gap:12px;padding:16px;border:1px solid var(--rule);border-left:1px solid var(--rule);border-radius:10px;background:#fff}
:root body .home-studio .hero-gift-option p{margin:0 0 6px;line-height:1.55}
}
/* phones: Christmas duo cards, everything left-aligned to the image edge, links level at the bottom */
@media(max-width:600px){
:root body .style-picker .season-card{display:flex;flex-direction:column;align-items:stretch;text-align:left;padding:0;gap:0}
:root body .style-picker .season-card>img{width:100%;flex:none;margin:0}
:root body .style-picker .season-card .pick-btn,:root body .style-picker .season-card .pick-desc{display:block;width:100%;margin-left:0;margin-right:0;padding-left:0;padding-right:0;text-align:left;transform:none;align-self:stretch}
:root body .style-picker .season-card .pick-btn{margin-top:12px}
:root body .style-picker .season-card .pick-desc{margin-top:4px}
:root body .style-picker .season-card .pick-more{margin:auto 0 0;padding-top:10px;align-self:flex-start}
}
/* the original red/orange Christmas gradient (as on master) for the Limited edition badge, tag and phone strip */
:root body .style-picker .limited-badge,:root body .season-card .limited-badge,:root body .limited-badge{color:#fff;background:linear-gradient(90deg,#b23a48,#d4915a);border-radius:999px;font-weight:800;letter-spacing:.14em}
:root body .product-tag.limited{background:linear-gradient(90deg,#b23a48,#d4915a);color:#fff}
:root body .season-strip{background:linear-gradient(90deg,#b23a48,#d4915a);border-radius:12px;border-bottom:0;box-shadow:0 6px 16px #b23a4826;font-weight:800;letter-spacing:.01em}
/* "See examples" links back to master's look: brand purple, sentence case, bold, underline on hover only */
:root body .style-picker .pick-more{font-size:12px;font-weight:800;letter-spacing:normal;text-transform:none;color:#5b3fc4;text-decoration:none}
:root body .style-picker .pick-more:hover{color:#5b3fc4;text-decoration:underline;text-decoration-color:currentColor}
:root body .sp-card-more{font-size:13px;font-weight:800;letter-spacing:normal;text-transform:none;color:#5b3fc4;text-decoration:none}
:root body .sp-card-more:hover{color:#5b3fc4;text-decoration:underline;text-decoration-color:currentColor}
@media(max-width:600px){:root body .style-picker .pick-more{font-size:13px}}
/* section-heading gradient words back as on master, same gradient as the hero line (italic serif kept) */
:root body .gradient-word,:root body h2 span.gradient-word,:root body .teaser-copy h2 span,:root body .inspo-hero h1 span{background:linear-gradient(90deg,#7955df,#b062d3 70%,#be4f7c);-webkit-background-clip:text;background-clip:text;color:transparent;padding:0 .08em .06em 0;-webkit-box-decoration-break:clone;box-decoration-break:clone}
@media(max-width:600px){
/* Meet Charlie: "before and after." on its own line */
:root body #baHeading .gradient-word{display:table}
/* swipe row: the next set peeks in at the right edge */
:root body .ba-track{gap:12px;margin-right:calc(50% - 50vw);padding-right:15px;scroll-padding-left:0}
:root body .ba-pair{flex:0 0 calc((100vw - 30px) * .865);scroll-snap-align:start}
}
/* hero: visible gap strip→headline matches headline→Charlie band (measured on the ink, 26 Oct 2026) */
:root body .home-studio{padding-top:14px}
@media(max-width:600px){:root body .home-studio{padding-top:15px}}
/* --- 28 Oct 2026: 03 is a photo-style room (AI-generated room, the real Signature Name portrait composited into both frames
with perspective), cropped to the tile; a taller crop from 880px down so the narrow phone tile still shows both frames --- */
:root body .hero-ba-room{display:block;padding:0;overflow:hidden;position:relative;border-radius:11px;background:#ece3d6;box-shadow:0 1px 2px rgba(0,0,0,.06),0 30px 60px -40px rgba(40,32,24,.45)}
:root body .hero-ba-room picture{display:block;width:100%;height:100%}
:root body .hero-ba .hero-ba-room img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover;object-position:47% 50%;border-radius:0}
@media(max-width:880px){:root body .hero-ba .hero-ba-room img{object-position:50% 50%}}
/* step captions: number in a thin ring (about twice the old size), then a lead line at the caption size, the title, the caption */
:root body .hero-ba-cap .ba-no{display:flex;align-items:center;justify-content:center;width:46px;height:46px;margin:0 auto 10px;border:1px solid #a59d90;border-radius:50%;font:500 20px/1 var(--font);letter-spacing:.04em;color:#6b665e;font-variant-numeric:tabular-nums}
:root body .hero-ba-cap .ba-lead{display:block;font-size:12.5px;line-height:1.4;color:#6b665e;margin-bottom:2px}
:root body .hero-ba-cap .ba-note{display:block;font-size:12.5px;color:#6b665e;margin-top:3px}
@media(max-width:880px){
:root body .hero-ba-cap .ba-no{width:32px;height:32px;margin-bottom:5px;font-size:16px}
:root body .hero-ba-cap .ba-lead{font-size:9.5px;line-height:1.3;margin-bottom:1px}
:root body .hero-ba-cap .ba-note{font-size:9.5px;line-height:1.3;margin-top:2px}
}
/* style examples sit inside the exhibit band, directly under the "From the studio" card */
:root body .home-studio .hero-ba>.hero-styles{margin-top:36px}
/* phones: half-size thumbnails (~7.5 across), strip runs edge to edge of the band and starts on the page padding */
@media(max-width:600px){
:root body .home-studio .hero-ba>.hero-styles{width:auto;margin:26px -12px 0}
:root body .home-studio .hero-ba>.hero-styles .hero-styles-label{font-size:11px}
:root body .home-studio .hero-ba>.hero-styles ul{gap:6px;margin:0;padding:6px 13px 10px;scroll-padding:0 13px}
:root body .home-studio .hero-ba>.hero-styles li{width:calc((100vw - 26px - 7 * 6px) / 7.6)}
:root body .home-studio .hero-ba>.hero-styles a,:root body .home-studio .hero-ba>.hero-styles img{border-radius:6px}
:root body .home-studio .hero-ba>.hero-styles img{box-shadow:0 1px 2px rgba(0,0,0,.1),0 5px 9px -7px rgba(40,32,24,.5)}}
/* Rounded-corner pass: boxes, cards, panels, placards and image tiles (real picture frames stay square) */
:root body .compare,:root body .compare-card,:root body .hero-gift:not([hidden]),:root body .quick-path,:root body .studio-layout,:root body .editor-panel,:root body .result-panel,:root body .purchase-panel,:root body .studio-layout>#purchasePanel,:root body .ba-pair,:root body .story-hero,:root body .newsletter-card,:root body .mini-card.season-card,:root body .upload-box,:root body .home-studio .upload-box,:root body .result-caption,:root body .result-image,:root body .hero-ba>figcaption,:root body .gv-form,:root body .gv-review-look,:root body .gv-review-summary,:root body .gv-done,:root body .gv-toolbar,:root body .gv-tier,:root body .gv-choice,:root body .gv-email-frame,:root body .gv-codebox,:root body .lookup-box,:root body .redo-box,:root body .gift-box,:root body .referral-box,:root body .review-form,:root body .wall-section,:root body .inspo-card,:root body .inspo-hero-photo,:root body .hero-voucher-mobile{border-radius:11px}
:root body .season-card,:root body .result-image,:root body .inspo-card,:root body .inspo-hero-photo{overflow:hidden}
:root body .story-hero .hero-feature,:root body .teaser-img,:root body .closing-inner>img{border-radius:11px}
:root body .story-hero .hero-feature img,:root body .teaser-img img{border-radius:6px}
:root body .story-hero .hero-feature>figcaption,:root body .story-hero .hero-note,:root body .hero-feature>figcaption,:root body .result-state,:root body .pill,:root body .gv-chip,:root body .gv-badge,:root body .gv-points li,:root body .gv-error,:root body .gv-review-warn,:root body .ba-tag,:root body .chosen-example img,:root body #chosenStyleThumb{border-radius:6px}
:root body .btn,:root body .hero-ba-cta,:root body .currency-quick select,:root body .nl-email,:root body .inspo-filters button,:root body .full-button{border-radius:8px}
:root body header .nav-create,:root body .site-header .nav-create{border-radius:2px}
/* Site-wide consistency: retire leftover pastel lavender/pink panels for the gallery neutrals */
:root body .print-guide{background:#f6f5f3;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
:root body .guide-grid>article{background:#fff;border-color:var(--rule);border-radius:11px}
:root body .guide-reminder{background:#fafaf9;border:1px solid var(--rule);border-radius:11px}
:root body .gallery-cta{background:#f6f5f3;border:1px solid var(--rule);border-radius:11px}
:root body .gallery-cta img,:root body .closing-inner>img{border-radius:11px}
:root body .print-max{background:#fafaf9;border-color:var(--rule);border-radius:11px}
:root body .print-table th{background:#f6f5f3}
:root body .reveal-frame{background:linear-gradient(135deg,#f6f5f3,#fafaf9);border-color:var(--rule);border-radius:11px;overflow:hidden}
/* Keep the browser-check contracts: 44px tap target on the studio card CTA, how-it-works strip within 48px of the pricing block */
:root body .hero-ba-cta,:root body .home-studio .hero-ba-cta{min-height:44px;box-sizing:border-box}
:root body .home-studio .studio-top{margin-bottom:40px}
/* --- 27 Oct 2026: live tweaks --- */
/* Style examples row: the two Christmas thumbnails lead it while the edition is live (worker adds ul.hs-15: 13 year-round + 2 seasonal) */
:root body .home-studio .hero-styles ul.hs-13 li{width:clamp(52px,calc((var(--hs-w) - 12 * 8px) / 13),98px)}
:root body .home-studio .hero-styles ul.hs-14 li{width:clamp(50px,calc((var(--hs-w) - 13 * 8px) / 14),98px)}
:root body .home-studio .hero-styles ul.hs-15 li{width:clamp(48px,calc((var(--hs-w) - 14 * 8px) / 15),98px)} /* 13 year-round + the featured season's 2 */
/* tablets (601px up to where one row fits): two even rows instead of a full row plus a 2-3 tile orphan row */
@media(min-width:601px) and (max-width:835px){:root body .home-studio .hero-styles li{width:min(calc((var(--hs-w) - 6 * 8px) / 7),98px)}}
@media(min-width:601px) and (max-width:895px){:root body .home-studio .hero-styles ul.hs-15 li{width:min(calc((var(--hs-w) - 7 * 8px) / 8),98px)}}
/* phones: the "Swipe for more" hints are shared by every sideways row now (swipe-cue-1030, end of this file) */
/* logo mark: drawn as an SVG asterisk (the text glyph showed as a green emoji tile on iPhones); same mark as the favicon */
.logo-mark svg{display:block;width:62%;height:62%}
/* phones: tidy price block. Left: FROM over the price; right: the tier lines beside a hairline; currency picker centred below */
@media(max-width:600px){
:root body .home-studio .studio-aside .studio-price{display:grid;grid-template-columns:auto auto;justify-content:center;align-items:center;column-gap:16px;row-gap:2px;padding:16px 4px;text-align:left}
:root body .home-studio .studio-aside .studio-price>.from-label{grid-column:1;grid-row:1;align-self:end;margin:0}
:root body .home-studio .studio-aside .studio-price>strong{grid-column:1;grid-row:2;align-self:start;white-space:nowrap}
:root body .home-studio .studio-aside .studio-price>span{grid-column:2;grid-row:1 / span 2;align-self:center;text-align:left;border-left:1px solid var(--rule);padding-left:16px;font-size:13px;line-height:1.5}
:root body .home-studio .studio-aside .studio-price>.currency-quick{grid-column:1 / -1;grid-row:3;justify-self:center;margin:12px 0 0}
:root body .home-studio .studio-aside .studio-price>.price-about{grid-column:1 / -1;grid-row:4;justify-self:center;text-align:center;max-width:none;margin:4px 0 0}
:root body .home-studio .studio-aside .studio-price>.price-about:empty{display:none}}
/* Gift voucher hero (Christmas delivery dates + example voucher), gallery styling: hairline box, 11px corners, serif heading */
:root body .gv-xmas{background:#fff;border:1px solid var(--rule);border-radius:11px;box-shadow:none}
:root body .gv-xmas-h{font-family:var(--serif);font-weight:600;font-size:19px;letter-spacing:0;color:var(--ink)}
:root body .gv-xmas-h::before{content:none}
:root body .gv-xmas-note{color:#5b3fc4}
:root body .gv-card-mini{border-radius:11px;box-shadow:0 1px 2px rgba(0,0,0,.08),0 10px 22px -14px rgba(40,32,24,.45)}
:root body .gv-example figcaption{color:var(--ink-soft)}
@media(max-width:880px){:root body .gv-xmas-h{font-size:17px}:root body .gv-card-mini .gv-card-code{border-radius:6px}}
/* AVIF (28 Oct 2026): the 02 step image sits in a (AVIF first, WebP fallback); keep it a block box like the img. */
:root body .hero-ba-print picture{display:block}
/* --- 28 Oct 2026: phones get a "Start your portrait" button under the headline, so the first step is in view without scrolling.
Same purple, 8px corners and uppercase label as the studio card's "Try it free"; goes to "1 · Choose an art style" like every
other start button. (Shown from 601px up too since 29 Oct 2026, see below.) --- */
.home-studio .hero-start{display:none}
@media(max-width:600px){
:root body .home-studio .studio-head .hero-start{display:flex;flex-direction:column;align-items:center;gap:9px;margin:20px 0 2px}
:root body .home-studio .hero-start-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 30px;box-sizing:border-box;border-radius:8px;background:var(--accent);color:#fff;font:600 13px/1 var(--font);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;box-shadow:0 1px 2px rgba(31,29,27,.08),0 12px 22px -14px rgba(76,52,170,.75)}
:root body .home-studio .hero-start-btn:hover{background:#5a43c9}
:root body .home-studio .hero-start-btn:focus-visible{outline:3px solid #b6a3f1;outline-offset:2px}
:root body .home-studio .hero-start-note{font-size:13px;line-height:1.3;color:var(--ink-soft)}}
/* 29 Oct 2026: the same "Start your portrait" button and note on tablets/desktop too, centred under the headline (phones unchanged). */
@media(min-width:601px){
:root body .home-studio .studio-head .hero-start{display:flex;flex-direction:column;align-items:center;gap:11px;max-width:none;margin:30px auto 4px}
:root body .home-studio .hero-start-btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:54px;padding:0 38px;box-sizing:border-box;border-radius:8px;background:var(--accent);color:#fff;font:600 14px/1 var(--font);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;box-shadow:0 1px 2px rgba(31,29,27,.08),0 12px 22px -14px rgba(76,52,170,.75);transition:background .15s ease,transform .15s ease}
:root body .home-studio .hero-start-btn:hover{background:#5a43c9;transform:translateY(-1px)}
:root body .home-studio .hero-start-btn:focus-visible{outline:3px solid #b6a3f1;outline-offset:2px}
:root body .home-studio .hero-start-note{font-size:14px;line-height:1.3;color:var(--ink-soft)}}
/* --- 28 Oct 2026: "Tap to upload, or drag a photo here" under "Your photo goes here" was #a29bab (2.4:1 on the #f4f4f2 box).
Same purple-grey hue, darker: #6b6478 = 5.1:1 on the box, 5.0:1 on the lilac drag-over tint, so it clears WCAG AA 4.5:1. --- */
:root body .original-placeholder small{color:#6b6478}
/* --- 28 Oct 2026: pale small labels in the create/preview area were ~2.2–2.7:1. Same purple-grey as the upload hint (#6b6478),
which clears WCAG AA 4.5:1 on every background they sit on:
"YOUR PHOTO" / "YOUR ARTWORK" #9c96ad 2.72:1 → 5.41:1 on #fafaf9; "STYLE SELECTED" #aaa4bb 2.24:1 → 5.26:1 on #f7f7f5;
"(optional, added to the artwork)" #9c98ae 2.68:1 → 5.41:1 on #fafaf9. --- */
:root body .result-image-label,:root body .chosen-example small,:root body .editor-panel .form-field small{color:#6b6478}
/* growth-1028: launch offer, seasonal note and reassurance near checkout */
.launch-offer{margin:10px 0 4px;padding:9px 12px;border:1px dashed #b6a3f1;border-radius:10px;background:#f6f2ff;font-size:14px;color:#3d2f7a;line-height:1.45}.launch-offer[hidden],.season-note[hidden]{display:none}.launch-apply{margin-left:4px;border:0;background:#5a43c9;color:#fff;font:600 13px/1 var(--font);padding:7px 11px;border-radius:999px;cursor:pointer}.launch-apply:hover{background:#4a35b0}.launch-apply:focus-visible{outline:3px solid #b6a3f1;outline-offset:2px}.season-note{margin:6px 0 4px;font-size:13px;color:#a24a12;font-weight:600}.buy-assure{margin:4px 0 10px;font-size:14px;color:#3f6f56;font-weight:600;line-height:1.5}
/* growth-1029: a NEW year-round style (’80s Glamour) is a full-width banner after the 12 tiles (app.js pickerCard isNew), so
* 12 tiles + 1 banner fill whole rows on 4, 3 and 2 columns. Same banner look as the desktop seasonal card at every width
* (it never collapses into a phone tile, and never shares a row with the two-season banners). */
.style-picker .new-card,.style-picker.two-season .new-card,.style-picker.two-season>.new-card{grid-column:1/-1}
@media(min-width:881px){.style-picker.two-season .new-card{--sp-cols:4}}
@media(min-width:601px) and (max-width:880px){.style-picker.two-season .new-card img,.home-studio .editor-start .style-picker.two-season .new-card img{width:var(--sp-img);flex:0 0 var(--sp-img)}}
:root body .style-picker .new-badge,:root body .season-card .new-badge{background:linear-gradient(90deg,#5b3fc4,#c04fa8)}
:root body .season-card.new-card .new-badge{display:inline-block}
@media(max-width:600px){
:root body .style-picker .season-card.new-card{grid-column:1/-1;flex-direction:row;align-items:center;gap:14px;padding:10px;background:linear-gradient(110deg,#f6f2ff 0%,#fdf2fa 100%);border:1px solid #e4dcf7;border-radius:12px}
:root body .style-picker .season-card.new-card.active{border-color:var(--accent)}
:root body .style-picker .season-card.new-card>img{width:var(--sp-img);flex:0 0 var(--sp-img)}
:root body .style-picker .season-card.new-card>.season-copy{display:flex;flex-direction:column;align-items:flex-start;gap:4px;border-top:0}
:root body .style-picker .season-card.new-card .pick-btn{margin-top:4px}
}
/* growth-1029: the new year-round style on the /styles hub: a full-row banner (image one tile wide) after the 12 tiles */
.style-hub .sp-card-new{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);grid-template-rows:auto;column-gap:16px;row-gap:6px;align-content:center;align-items:start;padding:12px;border-radius:18px;background:linear-gradient(110deg,#f6f2ff 0%,#fdf2fa 100%);border:1px solid #e4dcf7}
.style-hub .sp-card-new .sp-card-img{grid-column:1;grid-row:1/span 5}
.style-hub .sp-card-new>:not(.sp-card-img){grid-column:2}
.style-hub .sp-card-new>.sp-new{align-self:end;justify-self:start;margin-top:4px;font-style:normal;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:linear-gradient(90deg,#5b3fc4,#c04fa8);border-radius:999px;padding:5px 10px}
.style-hub .sp-card-new strong{font-size:20px;margin-top:2px}
@media(min-width:700px){.style-hub .sp-card-new{grid-template-columns:minmax(0,1fr) minmax(0,2fr);column-gap:22px;padding:16px}.style-hub .sp-card-new>.sp-new{margin-top:auto}}
@media(min-width:960px){.style-hub .sp-card-new{grid-template-columns:minmax(0,1fr) minmax(0,3fr)}.style-hub .sp-card-new strong{font-size:24px}.style-hub .sp-card-new .sp-card-desc{font-size:15px;max-width:520px}}
/* growth-1029: funny cat portraits section on /funny-pet-portraits: 4 tiles in one row from tablet up, 2 x 2 on phones */
.sp-related.lp-cats .sp-grid{max-width:none}
@media(min-width:700px){.sp-related.lp-cats .sp-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* "Change your preview style" (style-quickpick-1029): the Style examples thumbnails again, full width just above
* "2 · Upload a pet photo". Same label style as the Style examples row; a tap only selects the style in step 1 (app.js
* quickStyles). One row: fits across on desktop, scrolls sideways on phones and small tablets like the hero row. */
:root body .quick-styles{grid-column:1/-1;margin:0;padding:10px 0 4px;min-width:0}
:root body .quick-styles[hidden]{display:none}
:root body .quick-styles-label{font:500 10px var(--font);letter-spacing:.22em;text-transform:uppercase;color:#8a857d;margin:0 0 8px;text-align:center}
:root body .quick-styles ul{display:flex;flex-wrap:nowrap;gap:8px;margin:0;padding:6px 4px 12px;list-style:none;overflow-x:auto;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:none}
:root body .quick-styles ul::-webkit-scrollbar{display:none}
:root body .quick-styles li{flex:none;width:clamp(50px,calc((100% - 14 * 8px) / 15),78px);scroll-snap-align:start}
:root body .quick-styles li:first-child{margin-left:auto}
:root body .quick-styles li:last-child{margin-right:auto}
:root body .quick-styles .quick-style{display:block;width:100%;padding:0;margin:0;border:0;background:none;border-radius:10px;cursor:pointer;transition:transform .2s ease;-webkit-tap-highlight-color:transparent}
:root body .quick-styles .quick-style img{display:block;width:100%;height:auto;aspect-ratio:360/453;object-fit:cover;border-radius:10px;border:3px solid #fff;box-shadow:0 0 0 1px #1f1d1b,0 10px 18px -12px rgba(40,32,24,.5)}
:root body .quick-styles img[src*="/signature-name"],:root body .quick-styles img[src*="/pencil-sketch"]{object-position:50% 0}
:root body .quick-styles .quick-style:hover,:root body .quick-styles .quick-style:focus-visible{transform:translateY(-3px)}
:root body .quick-styles .quick-style:focus-visible{outline:3px solid #b6a3f1;outline-offset:2px}
:root body .quick-styles .quick-style.active{transform:translateY(-3px)}
:root body .quick-styles .quick-style.active img{box-shadow:0 0 0 3px #6d4fd8,0 10px 18px -10px rgba(60,40,120,.55)}
@keyframes quickFlash{0%,60%{box-shadow:0 0 0 4px #6d4fd8,0 0 0 10px rgba(109,79,216,.18)}100%{box-shadow:0 0 0 0 rgba(109,79,216,0)}}
:root body #stylePicker .mini-card.quick-flash{animation:quickFlash 1.6s ease-out}
@media(prefers-reduced-motion:reduce){:root body #stylePicker .mini-card.quick-flash{animation:none}:root body .quick-styles .quick-style{transition:none}}
@media(max-width:880px){
:root body .quick-styles{padding:6px 0 0}
:root body .quick-styles ul{margin:0 -4px;padding:6px 8px 12px;scroll-padding:0 8px}
:root body .quick-styles li{width:clamp(56px,calc((100vw - 30px - 5 * 8px) / 6.4),78px)}
:root body .quick-styles .quick-style img{border-width:2px}}
/* Enlarge the studio preview (preview-enlarge-1029): a small text button on the YOUR ARTWORK label row (only once a preview
* exists), and a lightbox with the same watermarked image, sized in app.js (sizeEnlarge: up to 3x the card, 95vw x 92vh). */
:root body .result-label-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:10px 0}
:root body .result-label-row .result-image-label{margin:0}
:root body .enlarge-btn{display:inline-flex;align-items:center;gap:5px;padding:4px 9px;margin:0;border:1px solid #d9d2ee;border-radius:999px;background:#fff;color:#5b3fc4;font:700 11px/1.2 var(--font);letter-spacing:.02em;cursor:zoom-in;min-height:28px}
:root body .enlarge-btn[hidden]{display:none}
:root body .enlarge-btn:hover{background:#f4f0ff;border-color:#b6a3f1}
:root body .enlarge-btn:focus-visible{outline:3px solid #b6a3f1;outline-offset:2px}
:root body .enlarge-dialog{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;background:rgba(20,16,30,.88);cursor:zoom-out;padding:0}
:root body .enlarge-dialog[hidden]{display:none}
:root body .enlarge-panel{position:relative;background:transparent;border:0;outline:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;max-width:95vw;max-height:92vh}
:root body .enlarge-caption{margin:0;max-width:min(95vw,600px);padding:7px 14px;border-radius:999px;background:rgba(255,255,255,.94);color:#2a2540;font:600 13px/1.35 var(--font);text-align:center;box-shadow:0 6px 18px rgba(0,0,0,.25);cursor:default}
@media (max-width:767px){:root body .enlarge-panel{gap:10px}:root body .enlarge-caption{border-radius:14px;font-size:13px;padding:8px 12px}}
:root body .enlarge-img{display:block;width:auto;height:auto;max-width:95vw;max-height:calc(92vh - 64px);object-fit:contain;border:0;outline:0;border-radius:6px;background:transparent;box-shadow:0 24px 60px rgba(0,0,0,.45);cursor:default;-webkit-user-drag:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
:root body .enlarge-close{position:fixed;top:12px;right:12px;width:44px;height:44px;border-radius:50%;border:0;background:#fff;color:#1f1d1b;font:400 28px/1 var(--font);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.3);z-index:1}
:root body .enlarge-close:focus-visible{outline:3px solid #b6a3f1;outline-offset:3px}
html.enlarge-open,html.enlarge-open body{overflow:hidden}
/* Preview-quality note under the studio preview message (preview-enlarge-tweak-1029): shown only while a preview is on the
card. Desktop: the caption becomes a 2-column grid so the note sits directly under the message, beside the style thumb. */
:root body .result-caption>p.preview-quality-note{margin:6px 0 0;font-size:12px;line-height:1.4;color:#7a7488;font-weight:600}
:root body .result-caption>p.preview-quality-note[hidden]{display:none}
@media(min-width:601px){:root body .result-caption:has(>.preview-quality-note:not([hidden])){display:grid;grid-template-columns:auto 1fr;column-gap:17px;align-items:center}:root body .result-caption:has(>.preview-quality-note:not([hidden]))>.chosen-example{grid-row:1/span 2}:root body .result-caption:has(>.preview-quality-note:not([hidden]))>#previewMessage{align-self:end}:root body .result-caption>p.preview-quality-note{align-self:start;padding:6px 0 0 16px;margin:0}}
@media(max-width:600px){:root body .result-caption>p.preview-quality-note{border-top:0;padding-top:0}}
:root body .nowrap-dims{white-space:nowrap}
:root body .enlarge-img:focus{outline:0}
/* "Digital or Bundle?" pricing cards as a plan picker (app.js compareSetup, 29 Oct 2026): the selected card gets the
purple border and a tick badge; the other card goes back to the plain border. Without JS the static look is unchanged. */
:root body .compare-cards.cc-pick .compare-card{position:relative;cursor:pointer;border-color:var(--rule);transition:border-color .15s,box-shadow .15s;-webkit-tap-highlight-color:transparent}
@media(hover:hover){:root body .compare-cards.cc-pick .compare-card:not(.cc-selected):hover{border-color:#b9a8ef}}
:root body .compare-cards.cc-pick .compare-card.cc-selected{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 8px 22px rgba(112,83,222,.14)}
:root body .compare-cards.cc-pick .compare-card.cc-selected::after{content:'';position:absolute;top:-11px;right:14px;width:22px;height:22px;border-radius:50%;background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.6 10.4l2.9 2.9 5.9-6.2' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat;box-shadow:0 0 0 3px #fafaf9}
:root body .compare-cards.cc-pick .compare-card:focus{outline:none}
:root body .compare-cards.cc-pick .compare-card:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
/* Checkout panel, compact (29 Oct 2026): currency and code collapse behind links, one opt-in box, inline field errors,
* a "Card / Apple Pay" note under the pay button and a phone-only sticky bar that scrolls to the pay section (it never pays). */
.link-btn{border:0;background:none;padding:0;font:inherit;font-weight:700;color:#5b3fc4;text-decoration:underline;text-underline-offset:2px;cursor:pointer;min-height:24px}
.link-btn:focus-visible{outline:3px solid #b6a3f1;outline-offset:2px;border-radius:3px}
#purchasePanel .purchase-intro{margin:6px 0 0}
#purchasePanel .tier-onepet{margin:6px 0 0}
#purchasePanel .currency-row{display:block;margin:6px 0 4px}
.currency-line{margin:0;font-size:14px;color:#5f5a72;line-height:1.5}
.currency-line strong{color:#2f2b49}
.currency-pick{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:8px 0 2px}
#purchasePanel .coupon-row{margin:4px 0 12px}
.code-line{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;font-size:14px}
.code-line .launch-offer{margin:0;padding:0;border:0;background:none;font-size:14px;color:#3d2f7a}
.code-line .launch-apply{padding:5px 10px;font-size:12.5px}
.coupon-box{margin:8px 0 0}
#purchasePanel .coupon-status:empty{display:none}
#purchasePanel .form-field{margin-bottom:12px}
.approve-label.has-error,.form-field.has-error{outline:2px solid #c23a5b;outline-offset:4px;border-radius:6px}
.form-field.has-error input{border-color:#c23a5b}
.field-error{margin:-6px 0 12px;font-size:14px;font-weight:700;color:#b02a4c;line-height:1.4}
.optin-label{display:flex;align-items:start;gap:9px;font-size:14px;color:#4f4a63;line-height:1.5;margin:0 0 12px}
.optin-label input{min-width:18px;min-height:18px;margin:2px 0 0}
#purchasePanel .save-note{margin:0 0 10px;font-size:13.5px;line-height:1.45}
.pay-methods{margin:6px 0 0;text-align:center;font-size:13px;color:#5f5a72;font-weight:600}
#purchasePanel .buy-assure{margin:10px 0 0;text-align:center;font-size:13px}
.buy-assure a{color:#5b3fc4}
.pay-sticky{display:none}
@media(max-width:880px){
.pay-sticky:not([hidden]){display:block;position:fixed;z-index:80;left:0;right:0;bottom:0;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:rgba(255,255,255,.96);border-top:1px solid #e6e4f0;box-shadow:0 -6px 20px rgba(40,25,90,.08)}
.pay-sticky .btn{display:block;width:100%;min-height:48px}
}
/* Order page: save reminder under the download button (29 Oct 2026). */
.save-soon{margin:6px 0 4px;font-size:14px;line-height:1.5;color:#3d3a4f}.save-soon strong{color:#21263e}
/* checkout-ux-1029: tighter purchase panel on phones */
@media(max-width:480px){#purchasePanel .purchase-intro{display:none}#purchasePanel .tier-picker{gap:8px;margin:10px 0 2px}#purchasePanel .tier-card{padding:10px 12px 9px;gap:3px}#purchasePanel .tier-card .tick-lead{margin:4px 0 0}#purchasePanel .tier-card .tick-list{gap:2px;margin-top:4px}#purchasePanel .tier-card .tick-list>[role=listitem]{font-size:13.5px;line-height:1.35}#purchasePanel .form-field{margin-bottom:10px}}
/* home-ux-1029 ─────────────────────────────────────────────────────────────────────────────────────────────────────────
* "View all N styles": while #stylePicker is is-collapsed, cards past the first rows (pick-extra) are hidden; the chosen
* style always stays visible. pick-x8 = cards 7-8 of the static first paint, which fill the 4-column desktop row. */
#stylePicker.is-collapsed .mini-card.pick-extra:not(.active){display:none}
@media(min-width:881px){#stylePicker.is-collapsed .mini-card.pick-extra.pick-x8:not(.active){display:flex}}
.styles-toggle{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;min-height:48px;margin:10px 0 2px;padding:10px 16px;border:1px solid rgba(29,24,51,.22);border-radius:999px;background:#fff;color:var(--ink);font-size:15px;font-weight:600;cursor:pointer}
.styles-toggle:hover{border-color:var(--ink)}
.styles-toggle:focus-visible{outline:3px solid #7a5cff;outline-offset:2px}
.styles-toggle[hidden]{display:none}
#stylesToggle,#stylePicker{overflow-anchor:none}
/* The old #studio anchor now sits on the "Create their portrait" panel (same spot as #startPhoto). */
.anchor-alias{display:block;position:relative;height:0;width:0;overflow:hidden;scroll-margin-top:110px}
/* Digital / Bundle comparison and the gift card now sit below the creator. */
.home-studio .studio-after{grid-column:1/-1;margin-top:34px}
.home-studio .studio-after>.compare{margin-top:0}
.home-studio .studio-after>.studio-copy{margin-top:26px}
.price-compare-link{display:inline-flex;align-items:center;min-height:44px;font-size:13px;font-weight:600;text-decoration:underline;text-underline-offset:3px;color:var(--ink)}
/* Currency code beside the price only where the symbol is ambiguous (kr); empty otherwise. */
[data-price-code-amb]:empty{display:none}
[data-price-code-amb]{margin-left:.3em}
/* Inspiration: "Create this look" per room. */
.inspo-create{display:inline-flex;align-items:center;gap:4px;min-height:44px;margin-top:4px;font-size:14px;font-weight:600;color:var(--ink);text-decoration:underline;text-underline-offset:3px}
:root body .inspo-card-body .inspo-create span{font-size:inherit;letter-spacing:0;color:inherit;text-transform:none;font-weight:inherit}
/* legibility floor (home-ux-1029): nothing a visitor has to read is set below 12px (labels, captions, badges, fine print,
* footer headings). Kept last and !important because the originals are spread across several overrides. */
:root body :is(.pill,.hero-proof span,.eyebrow,.small-note,.helper-copy,.studio-footnote,.editor-header p,.result-state,.result-image-label,
.approve-label,.from-label,.studio-price small,.studio-price span,.price-about,.hero-gift-link,.benefit-strip span,.ba-tag,
.hero-ba-label,.hero-ba-label span,.hero-ba-cap span,.pg-avoid span,.pg-avoid-title,.pg-best span,.pg-best strong,.busy-consent,.previews-left,
.limited-badge,.marketing-note,.optout-label,.coupon-fine,.coupon-label,.coupon-remove,.coupon-status,.pe-fine,.footer-heading,.nl-fine,.nl-fine a,
.inspo-card-body span,.next-style,.sp-limited,.sp-gallery figcaption,.pick-desc,.pick-desc2,.season-promise,.chosen-example small,.chosen-example strong,
.hero-note span,.hero-feature figcaption span,.quick-styles-label,.closing-inner span,.teaser-chip,.connection-status span,.preview-allowance,
.hero-styles-label,.preview-placeholder p,.form-field small,.guide-num,.floating-info span,.legal-main .eyebrow,.legal-main thead th,.ba-pair figcaption span){font-size:12px!important}
#uploadHint{display:block;padding:0 16px;max-width:34em;margin-inline:auto;font-size:12px;line-height:1.5}
/* "Got a gift voucher?" and other small text links: a 44px-tall tap target without changing the text size. */
:root body .hero-gift-link{display:inline-flex;align-items:center;min-height:44px;margin-top:0}
:root body :is(#purchasePanel .tier-badge,#purchasePanel .gift-count){font-size:12px!important}
/* Real canvas print (1030): real photos of the first canvas sample, printing page + home under the plan cards */
.real-print{background:#fff;border:1px solid #e6e0f4;border-radius:18px;padding:18px 20px 20px;margin:26px 0;box-shadow:0 10px 26px rgba(55,35,95,.06)}
.studio-after .real-print{max-width:980px;margin:22px auto 0}
.real-print-head{max-width:760px;margin-bottom:14px}
.real-print-badge{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#6a4fc4;background:#f1edff;border:1px solid #e4d9ff;border-radius:999px;padding:5px 11px;margin-bottom:8px}
:root body .real-print h2{font-size:clamp(26px,3vw,34px);line-height:1.15;margin:0 0 8px}
.real-print-head p{font-size:14px;line-height:1.65;color:#5f5a72;margin:0}
.real-print-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.real-print-fig{margin:0;min-width:0}
.real-print-fig picture{display:block;aspect-ratio:3/4;border-radius:12px;overflow:hidden;background:#f1eef7}
.real-print-fig img{width:100%;height:100%;object-fit:cover;display:block}
.real-print-fig figcaption{font-size:13px;line-height:1.5;color:#5f5a72;margin-top:7px}
@media(max-width:600px){.real-print{padding:14px 14px 16px;border-radius:14px}.real-print-grid{grid-template-columns:1fr 1fr;gap:10px}.real-print-front{grid-column:1/-1}.real-print-front picture{aspect-ratio:4/5}.real-print-fig figcaption{font-size:12px}}
/* Price strip fix (1030): the 12px legibility floor (home-ux-1029) matched ".studio-price span" and shrank the big FROM
* price (a span inside ) to 12px, and the desktop flex row put every piece side by side with "Compare Digital and
* Bundle" glued to "pay after approval". The price keeps its size; the strip is a tidy grid at every width. */
:root body .home-studio .studio-price strong span[data-price-digital]{font-size:inherit!important;line-height:1;letter-spacing:inherit}
:root body .home-studio .studio-price .price-compare-link{display:flex;width:fit-content;min-height:44px;margin:0;font-size:13px!important}
@media(min-width:601px){
:root body .home-studio .studio-aside .studio-price{display:grid;grid-template-columns:auto auto auto;justify-content:center;align-items:center;column-gap:22px;row-gap:2px;text-align:left}
:root body .home-studio .studio-aside .studio-price>.from-label{grid-column:1;grid-row:1;align-self:end;margin:0}
:root body .home-studio .studio-aside .studio-price>strong{grid-column:1;grid-row:2;align-self:start;white-space:nowrap}
:root body .home-studio .studio-aside .studio-price>span{grid-column:2;grid-row:1 / span 2;align-self:center;text-align:left;border-left:1px solid var(--rule);padding-left:22px;line-height:1.5}
:root body .home-studio .studio-aside .studio-price>.currency-quick{grid-column:3;grid-row:1;align-self:end;border-left:1px solid var(--rule);padding-left:22px;margin:0}
:root body .home-studio .studio-aside .studio-price>.price-about{grid-column:3;grid-row:2;align-self:start;text-align:left;max-width:none;margin:4px 0 0;padding-left:22px;border-left:1px solid var(--rule)}
:root body .home-studio .studio-aside .studio-price>.price-about:empty{display:none}
:root body .home-studio .studio-aside .studio-price:has(>.price-about:empty)>.currency-quick{grid-row:1 / span 2;align-self:center}}
/* Section rhythm (spacing-1030): desktop gaps between sections were 200-275px (section padding on both sides of each
* divider, plus the story card's own margins). About 40% less on tablet/desktop, the same step for every shared section
* class (homepage, Inspiration and any page using them). Phones keep their spacing. */
@media(min-width:601px){
:root body .section-padding{padding-block:58px}
:root body .home-studio{padding-bottom:48px}
:root body .story-hero{margin-top:22px;margin-bottom:34px;padding-top:46px;padding-bottom:32px}
:root body .inspo-teaser{padding-block:46px}
:root body .closing-inner{padding-block:40px}
:root body .newsletter-band{padding-block:42px}}
/* Phone section rhythm (spacing-mobile-1030): the gaps between homepage sections were 94-119px at 390 (section padding on
* both sides of each boundary plus the story card's margins), with a hairline above Meet Charlie sitting right under the
* FAQ list's own bottom rule. About 45% less on phones, same shared classes as the desktop step above (homepage and
* Inspiration); the doubled divider goes. Desktop untouched. */
@media(max-width:600px){
:root body .section-padding{padding-block:34px}
:root body .home-studio{padding-bottom:30px}
:root body .before-after{border-top:0}
:root body .story-hero{margin-top:12px;margin-bottom:32px}
:root body .inspo-teaser{padding-block:34px}
:root body .newsletter-band{padding-block:32px}}
/* "See all N styles" toggle (styles-toggle-1030): was a white bar with a hairline border that read as a divider. Now a
* solid brand-purple pill with white text (5.6:1), 48px tall, on phones and desktop. It stays secondary to Create /
* Checkout (full width, 54px): sized to its label and centred, a lighter weight, darker on hover, ink focus ring. */
:root body .styles-toggle{width:auto;min-width:min(100%,260px);max-width:100%;min-height:48px;margin:14px auto 4px;padding:12px 26px;border:0;border-radius:999px;background:var(--accent);color:#fff;font-size:15px!important;font-weight:600;line-height:1.2;box-shadow:0 4px 12px rgba(90,67,201,.18);transition:background-color .15s,box-shadow .15s}
:root body .styles-toggle:hover{background:#5a43c9;color:#fff;box-shadow:0 6px 16px rgba(90,67,201,.26)}
:root body .styles-toggle:active{background:#4b37ad}
:root body .styles-toggle:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
:root body .styles-toggle[aria-expanded="true"]{background:#fff;color:#4b37ad;box-shadow:inset 0 0 0 2px var(--accent)}
:root body .styles-toggle[aria-expanded="true"]:hover{background:#f3effe}
:root body .styles-toggle[hidden]{display:none}
/* hero-break-1030: phones break the hero as "Turn their photo / into your favourite / pet portrait."; desktop unchanged. */
.m-br{display:none}
@media(max-width:600px){:root body .home-studio .studio-top h1 .m-br{display:inline}}
/* gift-link-1030: "Give it as a gift" sits directly under "Compare Digital and Bundle" in the price strip (same style and
* 44px tap target) and scrolls to the "Giving it as a gift?" box. Shown only when gifting is on (the Worker drops hidden).
* Smooth scrolling comes from html{scroll-behavior:smooth}, which the prefers-reduced-motion:reduce rule turns off. */
:root body .home-studio .studio-price .price-gift-link{gap:6px;margin-top:0;align-items:flex-start;padding-top:4px;box-sizing:border-box;text-decoration:none}
:root body .home-studio .studio-price .price-gift-link .price-gift-text{text-decoration:underline;text-underline-offset:3px;color:inherit!important;font-size:inherit!important;font-weight:inherit!important;line-height:inherit}
:root body .home-studio .studio-price .price-gift-link[hidden]{display:none!important}
.price-gift-icon{font-size:14px;line-height:1;text-decoration:none;display:inline-block}
#gift-box{scroll-margin-top:24px}
/* ios-16px-1030: iOS Safari zooms into any form field under 16px on focus. Mobile only (desktop unchanged); the viewport
* meta never locks zoom. No field on the site is above 16px, so 16px == max(16px, current). */
@media (max-width:600px){:root body input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]):not([type=submit]):not([type=button]):not([type=reset]):not([type=file]):not([type=color]):not([type=image]),:root body select,:root body textarea{font-size:16px!important}}
/* swipe-cue-1030: one cue for every sideways row (nav.js adds the classes only while the row really overflows).
* .swipe-hint = purple right-aligned "Swipe for more →" directly under the row; it stays while swiping and fades only at
* the row's end (keeping its line so nothing jumps). .cue-more = soft right-edge fade, also removed at the end. */
:root body .swipe-hint{display:none}
:root body .swipe-hint.is-on{display:block;margin:4px 0 0;padding:0 4px;text-align:right;font-size:14px!important;line-height:20px;font-weight:800;letter-spacing:normal;text-transform:none;color:#5b3fc4;transition:opacity .3s ease,visibility .3s}
:root body .swipe-hint.is-on span{display:inline-block;margin-left:3px}
:root body .swipe-hint.is-on.is-done{opacity:0;visibility:hidden}
:root body .cue-more{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 44px),rgba(0,0,0,.15));mask-image:linear-gradient(to right,#000 calc(100% - 44px),rgba(0,0,0,.15))}
@media (prefers-reduced-motion:reduce){:root body .swipe-hint.is-on{transition:none}}
/* chatgpt-review-1030: photo requirements behind a toggle; sizing note under the tier cards */
.photo-reqs{max-width:34em;margin:6px auto 0;padding:0 16px;font-size:12px;line-height:1.5;color:#5f5a72;text-align:center}
.photo-reqs>summary{cursor:pointer;display:inline-block;font-weight:700;color:#4b3f8f;text-decoration:underline;text-underline-offset:2px;padding:4px 2px}
.photo-reqs>p{margin:4px 0 0}
.tier-sizes{font-size:12.5px;line-height:1.5;color:#5f5a72;margin:6px 0 10px}
.tier-sizes strong{color:#2e2a45}
@media(max-width:420px){.teaser-img.b{right:8px}}
/* inapp-1102: visible help when the Turnstile check fails (in-app browsers) */
.security-help{margin:12px 0;padding:12px 14px;border-radius:11px;background:#fff4f2;border:1px solid #f3cfc8;color:#7a3b33;font-size:14px;line-height:1.5}.security-help p{margin:0 0 10px;font-size:14px}.security-help .btn{min-height:44px;padding:10px 18px}
/* v2 mobile upload-first hero (shown <=600px only) */
.v2-mhero,.v2-sticky{display:none}
@media (max-width:600px){
.home-studio .hero-start{display:none}
.v2-mhero{display:block;margin:.6rem 0 0}
.v2-sub{margin:0 0 .5rem;font-size:1.02rem}
.v2-style-chip{display:flex;align-items:center;gap:.5rem;font-size:.9rem;margin:0 0 .6rem}
.v2-style-chip img{border-radius:8px;object-fit:cover}
.v2-style-chip a{margin-left:auto;text-decoration:underline}
.v2-upload-btn{display:flex;justify-content:center;width:100%;min-height:52px;align-items:center;font-size:1.05rem;cursor:pointer}
.v2-thumb{display:block;margin:.5rem auto 0;border-radius:10px;object-fit:cover}
.v2-thumb[hidden]{display:none}
.v2-reassure{margin:.45rem 0 .15rem;text-align:center;font-size:.9rem}
.v2-price,.v2-ai-line,.v2-digital-only{margin:.2rem 0;text-align:center;font-size:.82rem;opacity:.85}
.v2-sticky{display:flex;position:fixed;left:12px;right:12px;bottom:max(12px,env(safe-area-inset-bottom));z-index:60;justify-content:center;align-items:center;min-height:50px;border-radius:999px;background:#2e2a45;color:#fff;font-weight:600;box-shadow:0 6px 20px rgba(0,0,0,.25);transform:translateY(160%);transition:transform .2s;cursor:pointer}
.v2-sticky.show{transform:none}
}
.v2-digital-only[hidden]{display:none}
.upload-error{color:#b3261e;font-weight:600}
.consent-disclosure{font-size:.85rem;margin:.35rem 0 0 1.9rem;opacity:.85}
.v2-survey{margin:.75rem 0;font-size:.95rem}.v2-survey summary{cursor:pointer;font-weight:600}.v2-survey-opts{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.5rem}
@media (max-width:600px){.v2-sticky-create{background:#6c4ce0}.v2-next{display:block;margin:.6rem 0 0;padding:.6rem .8rem;border-radius:12px;background:#f1ecff;font-size:.92rem;text-align:center}.v2-next[hidden]{display:none}.v2-next a{font-weight:700}}
.v2-next{display:none}
/* v2 phone: the "stays private until payment is verified" note repeats the watermark/secure-checkout lines just above; hide it on phones. */
@media (max-width:760px){#checkoutNote{display:none}}
@media (max-width:760px){.preview-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.preview-actions .btn{min-width:0;white-space:normal;padding:10px 8px;letter-spacing:.04em;width:100%;box-sizing:border-box}#shareBtn,.preview-actions-note,.share-status{grid-column:1/-1}}
.consent-disclosure{margin-left:0}
body.public-mode #connectionStatus.ok,body.public-mode #betaNote{display:none}
a.skip-link:focus:not(:focus-visible){left:-9999px}
@media (max-width:760px){.preview-actions,.preview-email{margin-left:14px;margin-right:14px}}
.v2-sticky:not(.show){visibility:hidden;transition:transform .2s,visibility 0s .2s}
/* stall-1105: Generate button while the security check runs */
:root body #generateBtn.is-checking,:root body #generateBtn.is-checking:disabled{background:var(--accent);border-color:var(--accent);color:#fff;opacity:.92;cursor:progress;display:inline-flex;align-items:center;justify-content:center;gap:10px;white-space:normal;text-align:center;line-height:1.3}
#generateBtn .btn-spinner{width:16px;height:16px;flex:0 0 16px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:dpspin .8s linear infinite}
@keyframes dpspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){#generateBtn .btn-spinner{animation:none;border-top-color:rgba(255,255,255,.4)}}
/* desktop-04 (1105): the preview actions, share note and "Email me my preview" box line up with the caption card above (20px inset), not the panel edge. */
@media (min-width:761px){:root body .preview-actions,:root body .preview-email,:root body .preview-strip{margin-left:20px;margin-right:20px}:root body .preview-email{margin-bottom:20px}}
:root body .home-studio .hero-ai-line{text-align:center;margin:.35rem auto 0;font-size:13px;line-height:1.35;color:var(--ink-soft)}
@media (max-width:880px){:root body .home-studio .hero-ba>figcaption{display:none}}
@media (max-width:600px){:root body .benefit-strip>span.bs-opts{font-size:12px;letter-spacing:.02em;white-space:nowrap}}
/* Item 16: phones get 01 + 02 side by side, then 03 full width */
@media(max-width:600px){
:root body .hero-ba-steps{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:12px;row-gap:18px}
:root body .hero-ba-conn{display:none}
:root body .hero-ba-step .hero-ba-stage{height:auto;aspect-ratio:2/3}
:root body .hero-ba-step.step-wall{grid-column:1/-1}
:root body .hero-ba-step.step-wall .hero-ba-stage.hero-ba-room{height:auto;aspect-ratio:1/1}
}
/* Item 18: step headline in brand purple, heavier (≈5.5:1 on the cream band, AA) */
:root body .hero-ba-cap strong{color:#6b4fd8;font-weight:700}
/* === v2 batch 19-27 === */
:root body .benefit-strip{display:flex;justify-content:center;align-items:center;padding:12px 16px;font-size:13px;letter-spacing:.16em;line-height:1.45}
:root body .benefit-strip>span.bs-opts{white-space:normal;text-align:center;font-size:13px;letter-spacing:.16em;font-weight:700;max-width:34em}
:root body .benefit-strip .bs-br{display:none}
@media(max-width:600px){
:root body .benefit-strip{font-size:12.5px;letter-spacing:.14em;padding:11px 14px}
:root body .benefit-strip>span.bs-opts{font-size:12.5px;letter-spacing:.14em;white-space:normal;max-width:22em}
:root body .benefit-strip .bs-br{display:inline}
}
:root body .hero-ba-cap .ba-no{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:4px;width:auto;min-width:46px;height:46px;padding:0 12px;margin:0 auto 10px;border:1px solid #a59d90;border-radius:999px;font:500 13px/1 var(--font);letter-spacing:.04em;color:#6b665e}
:root body .hero-ba-cap .ba-no .ba-step-word{font-size:11px;letter-spacing:.08em;text-transform:none;font-weight:500;opacity:.9}
:root body .hero-ba-cap .ba-no::before{content:"";position:absolute;left:50%;top:-7px;transform:translateX(-50%);width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:7px solid #6b4fd8}
:root body .hero-ba-cap .ba-no::after{content:"";position:absolute;left:50%;top:-5px;transform:translateX(-50%);width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:6px solid #6b4fd8}
@media(max-width:600px){
:root body .hero-ba-cap .ba-no{min-width:32px;height:28px;padding:0 8px;margin-bottom:5px;font-size:11px;gap:3px}
:root body .hero-ba-cap .ba-no .ba-step-word{font-size:9px}
:root body .hero-ba-cap .ba-no::before{top:-6px;border-left-width:5px;border-right-width:5px;border-bottom-width:6px}
:root body .hero-ba-cap .ba-no::after{top:-4px;border-left-width:4px;border-right-width:4px;border-bottom-width:5px}
:root body .hero-ba-cap .ba-note{font-size:9px;white-space:nowrap}
}
@media(max-width:380px){
:root body .hero-ba-cap .ba-note{white-space:normal;max-width:100%;overflow-wrap:break-word}
}
:root body .studio-price .price-print-from{display:block;margin-top:2px;font-size:13px;color:#5c5852;font-weight:600}
:root body .studio-price .price-print-from[hidden]{display:none!important}
:root body .compare-cards{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:880px){:root body .compare-cards{grid-template-columns:1fr}}
:root body .compare-card.cc-print{border-color:var(--rule)}
:root body .compare-card.cc-print .cc-price{font:500 22px/1.1 var(--serif);margin:0}
:root body .compare-card.cc-print .cc-price small{font:500 12px/1 var(--font);margin-left:4px;color:#8a857d}
@media(max-width:600px){
.v2-sticky{background:#2e2a45}
.v2-sticky.is-next{background:#6c4ce0}
.v2-sticky.is-busy{opacity:.7;pointer-events:none}
.v2-sticky[hidden]{display:none!important}
}
/* 5 Nov 2026: no "FROM" label on the headline price; give the mobile price block more air */
@media (max-width:600px){:root body .studio-price>span{line-height:1.65}:root body .studio-price .price-print-from{margin:5px 0 3px;font-size:13px}}
@media(min-width:601px){:root body .home-studio .studio-aside .studio-price>strong{grid-row:1/span 2;align-self:center}}
/* 5 Nov 2026: sticky CTA in brand purple like the hero Start button */
:root body .v2-sticky,:root body .v2-sticky.is-next{background:#6b4fd8;color:#fff}
/* 5 Nov 2026: trust strip = exactly 2 lines on phones ("DIGITAL, FRAMED, CANVAS & POSTER" / "OPTIONS AVAILABLE") */
@media (max-width:600px){:root body .benefit-strip{padding:10px 8px}:root body .benefit-strip>span.bs-opts{white-space:nowrap;max-width:none;font-size:min(12.5px,3.1vw);letter-spacing:.08em}:root body .benefit-strip .bs-br{display:inline}}
@media (max-width:360px){html:root body .benefit-strip>span.bs-opts{font-size:10.5px;letter-spacing:.06em;white-space:nowrap}}
/* 5 Nov 2026: gap under hero "Start your portrait" = gap above the headline */
@media (max-width:600px){:root body .home-studio .studio-top{margin-bottom:14px}}
@media (min-width:601px){:root body .home-studio .studio-top{margin-bottom:16px}}
/* 5 Nov 2026: purchase panel drops the "One pet per portrait" + Instagram post/story credit line above the print box */
:root body #purchasePanel .tier-onepet{display:none}
/* 5 Nov 2026 (Antonio): drop the big left price in the home price strip; the detail lines use the full width */
:root body .home-studio .studio-aside .studio-price>strong,:root body .home-studio .studio-aside .studio-price>.from-label{display:none!important}
:root body .home-studio .studio-aside .studio-price>span{grid-column:1/-1;grid-row:1;border-left:0;padding-left:0;text-align:center;width:100%}
:root body .home-studio .studio-aside .studio-price>span .price-compare-link{margin-inline:auto}
@media(max-width:600px){:root body .home-studio .studio-aside .studio-price{grid-template-columns:1fr;justify-content:stretch}}
@media(min-width:601px){:root body .home-studio .studio-aside .studio-price{grid-template-columns:1fr auto}
:root body .home-studio .studio-aside .studio-price>span{grid-column:1;grid-row:1 / span 2;text-align:left}
:root body .home-studio .studio-aside .studio-price>span .price-compare-link{margin-inline:0}
:root body .home-studio .studio-aside .studio-price>.currency-quick,:root body .home-studio .studio-aside .studio-price>.price-about{grid-column:2}}
/* 5 Nov 2026 (Antonio): Animal picker removed from the upload area (hidden select keeps the "pet" default) */
.form-grid:has(.pet-type-field[hidden]){grid-template-columns:1fr}
/* inspo-fix-1105: room mockups are square; show the whole image, never crop. Filters wrap so no swipe cue. */
:root body .inspo-card img,:root body .inspo-card:hover img{height:auto;aspect-ratio:1/1;object-fit:contain;object-position:center;transform:none}
:root body .inspo-hero-photo{height:auto;aspect-ratio:1/1}
:root body .inspo-hero-photo>img{height:100%;object-fit:contain}
:root body .teaser-img.a,:root body .teaser-img.b{height:auto}:root body .teaser-img img{height:auto;aspect-ratio:1/1;object-fit:cover}
:root body .inspo-filters{flex-wrap:wrap;overflow-x:visible}
:root body .inspo-filters+.swipe-hint{display:none}
/* 6 Nov 2026 v2: feature comparison table (replaces light teaser; keep #pricing hide-with-checkout) */
/* 6 Nov 2026: fit 4-col table on ~320–390px phones — no min-width, no overflow-x scroll */
.price-teaser{max-width:980px;margin:0 auto 22px;background:#fff;border:1px solid #e6e0f4;border-radius:16px;padding:14px 16px 12px}
.price-teaser .pt-link{font-weight:800;color:#6a4fc4;white-space:nowrap}
.price-compare .pct-scroll{overflow-x:visible;margin:0;padding:0}
.price-compare-table{width:100%;table-layout:fixed;border-collapse:collapse;font-size:12.5px;line-height:1.3;color:#2f2b49}
.price-compare-table th,.price-compare-table td{padding:7px 6px;border-bottom:1px solid #efeaf8;vertical-align:middle;overflow-wrap:anywhere;word-break:break-word}
.price-compare-table thead th{text-align:center;background:#faf8ff;border-bottom:1px solid #e6e0f4;padding:8px 4px}
.price-compare-table thead th.pct-feature{background:transparent;border-bottom-color:#e6e0f4;width:40%}
.price-compare-table .pct-plan{display:block;font-size:12px;font-weight:800;letter-spacing:-.01em;color:#2f2b49}
.price-compare-table .pct-price{display:block;margin-top:2px;font-size:11px;font-weight:700;color:#6a4fc4}
.price-compare-table tbody th[scope=row]{text-align:left;font-weight:600;font-size:11.5px;color:#5f5a72}
.price-compare-table .pct-cell{text-align:center;width:20%;padding-left:2px;padding-right:2px}
.price-compare-table .pct-yes{color:#16a34a;font-size:14px;font-weight:800}
.price-compare-table .pct-no{color:#776f87;font-size:13px;font-weight:700}
.price-compare .pct-foot{margin:10px 2px 2px;font-size:12.5px;line-height:1.45;color:#5f5a72}
.price-compare-table thead th.pct-feature{text-align:left;vertical-align:middle}
.pct-corner{display:flex;flex-direction:row;align-items:baseline;justify-content:space-between;width:100%;gap:12px;font-size:12px;font-weight:800;letter-spacing:-.01em;line-height:1.3;color:#2f2b49}
.pct-corner-down,.pct-corner-right{display:inline;white-space:nowrap}
.pct-arrow{display:inline-block;font-size:16px;font-weight:800;line-height:1;margin-left:2px;vertical-align:-1px;color:#6a4fc4}
.pct-arrow-right{transform:rotate(-90deg)}
@media(max-width:480px){.pct-corner{font-size:11px;gap:8px}.pct-arrow{font-size:14px}}
@media(max-width:380px){
.pct-corner{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:2px}
}
@media(max-width:480px){
.price-teaser{padding:10px 8px 8px;margin-bottom:16px}
.price-compare-table{font-size:11px}
.price-compare-table th,.price-compare-table td{padding:5px 3px}
.price-compare-table thead th{padding:6px 2px}
.price-compare-table thead th.pct-feature{width:42%}
.price-compare-table tbody th[scope=row]{font-size:10.5px}
.price-compare-table .pct-plan{font-size:11px}
.price-compare-table .pct-price{font-size:10px}
.price-compare-table .pct-cell{width:20.666%}
.price-compare-table .pct-yes{font-size:13px}
.price-compare-table .pct-no{font-size:12px}
.price-compare .pct-foot{font-size:12px;margin:8px 0 0}
}
/* 6 Nov 2026 v2: collapsible "email me my preview" */
.pe-toggle{all:unset;box-sizing:border-box;display:flex;width:100%;align-items:center;justify-content:space-between;gap:10px;cursor:pointer;min-height:44px}.pe-toggle:focus-visible{outline:2px solid #7053de;outline-offset:3px;border-radius:8px}.pe-chev{flex:none;color:#6a4fc4;transition:transform .2s}.pe-toggle[aria-expanded="true"] .pe-chev{transform:rotate(180deg)}.pe-body{margin-top:8px}
/* 6 Nov 2026 v2: Try again / Another style / Share preview on one row on phones */
@media (max-width:760px){:root body .preview-actions{display:flex;flex-wrap:wrap;gap:6px;align-items:stretch}:root body .preview-actions .btn{flex:1 1 0;min-width:0;min-height:44px;padding:8px 4px;font-size:11px;letter-spacing:.01em;line-height:1.2;white-space:normal;text-align:center;gap:4px}:root body .preview-actions .btn[hidden]{display:none!important}:root body .preview-actions-note,:root body .share-status{flex:0 0 100%}}
/* === desktop homepage layout (Antonio 6 Nov 2026) ===
* Desktop only (min-width: 881px) unless a later tablet block says otherwise.
* 1) benefit strip: one row.
* 2) hide the "Charlie, from a sofa snap" figcaption card (images + 1/2/3 captions stay).
* 3) steps + create studio: full wrap like the live site; price/gift/canvas keep their live max-widths.
* 4) Endless possibilities note: one line on the wider step-3 column only.
* 5) Try again / Another style / Share preview on one row.
* 6) Digital / Bundle / Print checkout cards: one wider row across the purchase panel.
*/
@media (min-width: 881px) {
/* Benefit strip: one line. Slightly tighter tracking so it fits from 881px up without overflow. */
:root body .benefit-strip > span.bs-opts {
white-space: nowrap;
max-width: none;
letter-spacing: .12em;
}
/* Sofa-snap story card: hide on desktop (tablet hide is the max-width:880px rule above). */
:root body .home-studio .hero-ba > figcaption {
display: none;
}
/* Match the live desktop wrap exactly: min(1250px, 100vw - 64px).
width:100% + max-width:none let these two blocks escape the wrap on
wide screens and fill the viewport (the stretch Antonio keeps seeing
on the 4-step bar and Create their portrait). Cap them at the wrap
so they line up with the header and Style examples. Leave the price
row, gift box and canvas photos at their live max-widths (820/980). */
:root body .home-studio .studio-steps,
:root body .home-studio .studio-layout {
max-width: min(1250px, calc(100vw - 64px));
width: min(1250px, calc(100vw - 64px));
margin-left: auto;
margin-right: auto;
}
/* The Nov 5 “detail lines use the full width” rule (1fr auto) parks
Digital/Bundle on the left and Currency on the right. On desktop,
cluster them in the centre like live (auto columns + side 1fr gutters
so the gift chooser can still span the full 820px price strip). */
:root body .home-studio .studio-aside .studio-price {
max-width: 820px;
width: 100%;
margin-left: auto;
margin-right: auto;
grid-template-columns: 1fr auto auto 1fr;
justify-content: center;
column-gap: 22px;
}
:root body .home-studio .studio-aside .studio-price > span {
grid-column: 2;
grid-row: 1 / span 2;
width: auto;
text-align: left;
}
:root body .home-studio .studio-aside .studio-price > .currency-quick {
grid-column: 3;
grid-row: 1;
align-self: end;
justify-self: start;
}
:root body .home-studio .studio-aside .studio-price > .price-about {
grid-column: 3;
grid-row: 2;
align-self: start;
justify-self: start;
text-align: left;
}
:root body .home-studio .studio-aside .studio-price:has(> .price-about:empty) > .currency-quick {
grid-row: 1 / span 2;
align-self: center;
}
:root body .home-studio .studio-aside .studio-price > .gift-chooser {
grid-column: 1 / -1;
grid-row: 3;
}
/* Gift card sits in .studio-copy (720px) so it looks narrower than the
980px pricing table and real canvas print above/below it. Match those. */
:root body .home-studio .studio-after > .studio-copy,
:root body .home-studio .studio-after .hero-gift:not([hidden]) {
max-width: 980px;
width: 100%;
margin-left: auto;
margin-right: auto;
}
/* Step 3 caption: room for "Display it your way…" on one line (steps 1–2 stay at 270px). */
:root body .hero-ba-step.step-wall .hero-ba-cap {
max-width: 420px;
}
:root body .hero-ba-step.step-wall .hero-ba-cap .ba-note {
white-space: nowrap;
}
/* Preview actions: keep Try again / Another style / Share preview on one row. */
:root body .preview-actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: stretch;
}
:root body .preview-actions .btn {
flex: 1 1 0;
min-width: 0;
padding: 10px 6px;
font-size: 12px;
white-space: nowrap;
text-align: center;
}
:root body .preview-actions .btn[hidden] {
display: none !important;
}
:root body .preview-actions-note,
:root body .share-status {
flex: 0 0 100%;
}
/* Checkout cards: span the panel so Digital / Bundle / Print sit in one wider row;
checkout fields start under that row so they are not covered. */
:root body .home-studio #purchasePanel > .purchase-price,
:root body .home-studio #purchasePanel > .tier-picker {
grid-column: 1 / -1;
}
:root body .home-studio #purchasePanel > .tier-picker:has(#tierPrintCard) {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
}
:root body .home-studio #purchasePanel > #checkoutFields,
:root body .home-studio #purchasePanel > .eu-waitlist {
grid-column: 2;
grid-row: 3 / span 8;
}
:root body .home-studio #purchasePanel > #printBundle,
:root body .home-studio #purchasePanel > .tier-sizes {
grid-column: 1;
}
/* 7 Nov 2026: give step 2 unused space from step 1 so the upload subtitle fits one line. */
:root body .home-studio .studio-steps .quick-steps {
grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.32fr) minmax(0, 1.08fr) minmax(0, 0.90fr);
}
/* 7 Nov 2026: a little more space before "Start your portrait" under the compare table. */
:root body .home-studio .price-compare .pct-foot .pt-link {
margin-left: 0.75em;
}
}
@media (min-width: 1200px) {
/* Enough leftover width for the upload subtitle to sit on one line without overflowing. */
:root body .home-studio .studio-steps .quick-steps li:nth-child(2) small {
white-space: nowrap;
}
}
/* === tablet homepage (Antonio 6 Nov 2026): 601–880px ===
* 1) benefit strip on one line (the 34em cap was wrapping it with room to spare).
* 2) hide the "Charlie, from a sofa snap" figcaption (also covered by max-width:880px above).
* 3) print-from line stays a block above Compare options once prints JS unhides it.
*/
@media (min-width: 601px) and (max-width: 880px) {
:root body .benefit-strip > span.bs-opts {
white-space: nowrap;
max-width: none;
letter-spacing: .08em;
font-size: min(12.5px, 1.85vw);
}
:root body .home-studio .hero-ba > figcaption {
display: none;
}
:root body .studio-price .price-print-from:not([hidden]) {
display: block;
margin: 4px 0 2px;
}
:root body .home-studio .studio-aside .studio-price > span {
overflow: visible;
height: auto;
}
}
/* 7 Nov 2026: narrow-phone QA — contain inspiration overflow without page-wide clipping */
@media(max-width:600px){
.teaser-grid > *,
.teaser-copy,
.teaser-photos{min-width:0;max-width:100%}
.teaser-copy .btn{max-width:100%;white-space:normal;height:auto;text-align:center;box-sizing:border-box}
.teaser-photos{overflow:hidden}
}
/* 8 Nov 2026 (Antonio): "Compare options" popup. Reuses the .price-compare / .price-compare-table styles above (incl. the
≤480px no-horizontal-scroll sizes); sits above the sticky bars; the table scrolls vertically inside the panel. */
.cmp-pop{position:fixed;inset:0;z-index:1001;display:flex;align-items:center;justify-content:center;padding:16px}
.cmp-pop[hidden]{display:none}
.cmp-pop-backdrop{position:absolute;inset:0;background:rgba(29,24,51,.72);cursor:pointer}
.cmp-pop-panel{position:relative;display:flex;flex-direction:column;width:min(760px,100%);max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);background:#fff;border:1px solid #e6e0f4;border-radius:18px;box-shadow:0 30px 70px rgba(20,16,40,.35);overflow:hidden}
.cmp-pop-head{flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 10px 10px 18px;border-bottom:1px solid #efeaf8;background:linear-gradient(90deg,#f1ebff,#fff3f5)}
:root body .cmp-pop-head .cmp-pop-title{margin:0;font-size:20px;line-height:1.2;letter-spacing:-.03em;font-weight:800;color:#2f2b49}
.cmp-pop-close{flex:none;width:44px;height:44px;padding:0;border-radius:50%;border:1px solid #e6e0f4;background:#fff;color:#2f2b49;font:400 28px/1 var(--font);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 2px 8px rgba(40,25,90,.1)}
.cmp-pop-close:hover{background:#f6f2ff}
.cmp-pop-close:focus-visible{outline:3px solid #b6a3f1;outline-offset:2px}
.cmp-pop-body{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:10px 16px 14px}
.cmp-pop-body .pct-foot .pt-link{font-weight:800;color:#6a4fc4;white-space:nowrap;margin-left:.5em}
html.cmp-pop-open,html.cmp-pop-open body{overflow:hidden}
@media (max-width:480px){.cmp-pop{padding:10px}.cmp-pop-panel{max-height:calc(100vh - 20px);max-height:calc(100dvh - 20px);border-radius:16px}.cmp-pop-head{padding:8px 8px 8px 14px}:root body .cmp-pop-head .cmp-pop-title{font-size:18px}.cmp-pop-body{padding:6px 8px 10px}}