/* Refinements to the existing Mi Studio page: same sections and visual system. */
:root{--lilac:#875eab;--text:#5c5359;--warm:#faf8f6}
body{background:#fff}
.site-header{background:#fff;justify-content:center}
.section-heading .lead{max-width:520px}
.hero{padding-top:42px;padding-bottom:48px;min-height:650px}
.hero h1>span,.hero h1>em{display:block}
.hero-copy .eyebrow{color:#795594}
.hero-lead{max-width:395px}
.hero-visual{align-self:center}
.mockup-scene{aspect-ratio:1 / 1.08}
.scene-phone{width:49%;left:29%;top:3%;transform:rotate(5deg);z-index:3}
.float-a{width:28%;left:1%;top:9%;transform:rotate(-7deg)}
.float-b{width:25%;right:0;top:25%;transform:rotate(7deg)}
.float-c{width:28%;left:2%;bottom:11%;transform:rotate(-6deg)}
.float-post{border-width:5px;box-shadow:0 12px 27px #35252a1c}
.hero-scene .float-post{border:0;border-radius:6% / 4.8%;background:transparent;z-index:1}
.hero-scene .float-a{width:31.5%;left:4.5%;top:9%;transform:rotate(-6deg)}
.hero-scene .float-b{width:28.25%;right:2.5%;top:19%;transform:rotate(5deg)}
.hero-scene .float-c{width:34.24%;left:4.5%;bottom:9.5%;transform:rotate(-5deg);z-index:3}
.hero-scene .float-d{width:32.3%;right:4.5%;bottom:8%;transform:rotate(4deg);z-index:3}
.hero-scene .scene-phone{width:72.8%;left:13.6%;top:6%;transform:none;filter:none;z-index:2}
.hero-scene .hero-smartphone-image{display:block;width:100%;height:auto;object-fit:contain}
.hero-visual>.visual-note{margin:0;text-align:center}
.collections{border-top:1px solid var(--line);padding-top:78px;padding-bottom:88px}
.catalog-toolbar{font-size:11px;margin-bottom:21px}
.catalog-toolbar>span:first-child{color:#76667e;letter-spacing:.1em;font-size:9px}
.collection-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 28px;align-items:stretch}
.collection-card{height:100%;display:flex;flex-direction:column;border-radius:12px;min-width:0}
.collection-art{width:100%;padding:16px;border:1px solid #291e1b0c;border-radius:10px}
.collection-topline{display:flex;justify-content:space-between;align-items:center;min-height:13px;margin-bottom:13px;gap:8px;font:8px var(--sans);letter-spacing:.12em;color:#5e505e}
.collection-number{position:static;font:inherit;color:inherit}
.collection-preview-label{font-size:7px;color:#665269}
.collection-art .post-grid{gap:6px}
.collection-info{position:relative;flex:1;width:100%;padding:17px 42px 0 2px}
.collection-info .family{font-size:9px;letter-spacing:.08em;color:#785a8c;margin-bottom:5px}
.collection-info h3{font-size:20px;line-height:1.32;letter-spacing:-.03em;font-weight:600}
.collection-info p{font-size:12px;margin-top:5px}
.collection-info .zoom-icon{right:0;bottom:auto;top:28px;width:32px;height:32px;box-shadow:none;border:1px solid #ddd1e3;color:#704688;background:transparent}
.collection-card:hover .collection-art{border-color:#b69aca}
.collection-end .visual-note{font-size:11px;color:#6f5e77}
.extra-item{display:flex;min-width:0}
.filter{min-height:44px;font-size:12px}
.post.variant-0 .post-title,.post.variant-3 .post-title{top:27%;font-size:var(--title-size,16cqw);line-height:1.08;overflow-wrap:anywhere}
.post-bold.variant-0 .post-title,.post-bold.variant-3 .post-title{font-size:var(--title-size,16cqw)}
.post .post-kicker{font-size:3.5cqw}
.post .post-foot{font-size:3.6cqw}
.official-post{background:transparent;box-shadow:none}
.official-post>img{width:100%;height:100%;object-fit:contain}
.business-card h3{font-size:12px}
.included,.how{background:var(--warm);box-shadow:0 0 0 100vmax var(--warm);clip-path:inset(0 -100vmax)}
.included{padding-top:84px}
#biblioteca .included-post{aspect-ratio:4 / 5;border:0;border-radius:8px;background:transparent}
#biblioteca .included-post>img{display:block;width:100%;height:100%;object-fit:contain}
#biblioteca .include-single{width:100%;height:100%;left:0;top:0}
#biblioteca .include-single .post{width:50%;left:8%;top:12%;transform:rotate(-7deg)}
#biblioteca .include-single .post:last-child{left:43%;top:27%;transform:rotate(8deg)}
#biblioteca .include-carousel{top:27%;left:6%;width:88%;gap:3%;transform:rotate(-6deg)}
#biblioteca .include-carousel .post{flex:0 0 31.33%}
#biblioteca .include-stories{top:15%;left:9%;width:82%;height:auto;gap:6%;transform:rotate(5deg);align-items:flex-start}
#biblioteca .include-stories .post{width:47%;height:auto;flex:0 0 47%}
#biblioteca .include-stories .post:last-child{margin-top:24%}
#biblioteca .include-ideas{position:absolute;top:9%;left:19%;width:62%;transform:rotate(-5deg)}
#biblioteca .include-ideas .post{width:100%;box-shadow:0 9px 18px #3928411b}
.how{padding-bottom:84px}
.editor-controls input{font-size:16px;min-height:44px}
.palette{width:44px;height:44px}
.photo-choice{width:48px;height:50px}
.editor-canvas{min-width:0}
.editor-controls>p{font-size:11px}
.news-art .post-grid{transform:none}
.news-art{aspect-ratio:auto;padding:18px}
.preview-tag{position:static;display:inline-block;margin-top:12px;font-size:8px;padding:4px 8px}
.news-info{padding-top:16px}
.news-info>span{font-size:8px}
.news-info h3{font-size:25px}
.offer-card{border-radius:24px}
.offer-card .micro{font-size:10px;line-height:1.7;color:#765c81;margin-top:16px}
.faq{padding-top:106px;padding-bottom:98px}
.visual-note{color:#716476}
.gallery-dialog{padding:22px;width:720px;max-width:calc(100% - 24px);background:#faf8f6}
.gallery-header{top:-22px;background:#faf8f6;padding:1px 0 12px;min-width:0;align-items:flex-start}
.gallery-header>div{min-width:0}
.gallery-header h2{font-size:32px;line-height:1.13;overflow-wrap:anywhere}
.gallery-header .eyebrow{font-size:9px;letter-spacing:.08em}
.close-dialog{flex-basis:44px;width:44px;height:44px}
.gallery-caption{margin-bottom:16px;font-size:12px}
.gallery-feature{width:min(100%,calc((100dvh - 280px)*.8),380px);min-width:140px;max-width:100%;touch-action:pan-y}
.gallery-feature .post{width:100%}
.gallery-navigation{margin-top:16px;gap:25px}
.gallery-navigation button{width:46px;height:46px}
.gallery-navigation button:hover{background:#e9def1}
.gallery-thumbnails{max-width:360px;gap:6px;margin-top:15px}
.gallery-thumbnails button{min-height:44px;padding:2px;border-width:2px}
.gallery-dialog>.visual-note{font-size:10px;margin-top:14px}
.info-dialog .close-dialog{right:14px;top:14px}
.info-dialog .button{min-height:48px}
.footer-links button{min-height:32px}
.footer-bottom>button{min-height:36px}
@media(min-width:1440px){.hero{min-height:700px}}
@media(min-width:761px) and (max-width:1050px){.hero h1{font-size:clamp(42px,5.5vw,60px)}.hero{min-height:570px}.hero-lead{font-size:14px}.collection-info h3{font-size:18px}}
@media(max-width:760px){
  .wrap{width:calc(100% - 40px)}
  .site-header{height:75px}
  .site-header nav{top:64px;background:#fff}
  .section{padding-block:62px}
  h2{font-size:clamp(32px,8vw,42px);line-height:1.13;letter-spacing:-.043em;text-wrap:balance}
  .section-heading{margin-bottom:29px}
  .section-heading .eyebrow{max-width:320px;margin-inline:auto}
  .lead{font-size:13px;line-height:1.75;margin-top:18px}
  .hero{padding-top:37px;padding-bottom:28px;gap:17px;min-height:0}
  .hero h1{font-size:clamp(42px,12.8vw,56px);line-height:1.08;letter-spacing:-.047em}
  .hero h1>span,.hero h1>em{white-space:nowrap}
  .hero-copy .eyebrow{font-size:8px;letter-spacing:.13em;margin-bottom:20px}
  .hero-lead{font-size:13px;line-height:1.8;max-width:365px;margin:20px auto 23px}
  .hero .button,.final-copy .button{min-height:54px;max-width:100%;font-size:11px;gap:22px;padding-inline:25px}
  .hero .micro,.final-copy .micro{font-size:11px}
  .hero-visual{margin-top:1px;width:min(100%,490px)}
  .mockup-scene{aspect-ratio:1 / 1.09}
  .scene-phone{width:49%;left:29%;top:3%;transform:rotate(5deg)}
  .float-a{width:29%;left:0;top:10%;transform:rotate(-6deg)}
  .float-b{width:25%;right:0;top:26%;transform:rotate(6deg)}
  .float-c{width:28%;left:2%;bottom:11%;transform:rotate(-5deg)}
  .float-post{border-width:3px}
  .hero-scene .float-a{width:32.8%;left:4.25%;top:10%;transform:rotate(-5deg)}
  .hero-scene .float-b{width:28.25%;right:2.5%;top:18%;transform:rotate(5deg)}
  .hero-scene .float-c{width:34.24%;left:4.5%;bottom:10%;transform:rotate(-4deg)}
  .hero-scene .float-d{width:31.4%;right:4.5%;bottom:10%;transform:rotate(4deg)}
  .phone{border-width:3px}
  .hero-visual>.visual-note{font-size:9px;margin:3px 0 0}
  .catalog-toolbar{font-size:10px;gap:8px;margin-bottom:17px}
  .catalog-toolbar>span:first-child{font-size:7.5px;letter-spacing:.07em}
  .collection-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:25px 12px}
  .collection-art{padding:9px 7px 8px;border-radius:8px}
  .collection-topline{margin-bottom:9px;font-size:6px;gap:4px;min-height:10px;letter-spacing:.04em}
  .collection-preview-label{font-size:6px;letter-spacing:.06em}
  .collection-art .post-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:3px}
  .collection-info{padding:13px 0 0;display:flex;flex-direction:column;align-items:flex-start}
  .collection-info .family{font-size:8px;letter-spacing:.055em;margin-bottom:5px}
  .collection-info h3{font-size:14px;line-height:1.35;min-height:2.7em;overflow-wrap:normal;hyphens:none}
  .collection-info p{font-size:11px;line-height:1.55;margin-top:5px}
  .collection-info .zoom-icon{position:static;margin-top:10px;width:28px;height:28px;font-size:16px;border-color:#d0bedc}
  .collection-end{margin-top:30px}
  .collection-end .button{font-size:10px;padding-inline:21px;min-height:52px;gap:15px}
  .collection-end .visual-note{font-size:10px;max-width:315px;line-height:1.75}
  .filter-row{gap:7px}
  .filter{font-size:11px;padding:9px 12px;min-height:44px}
  .business-card h3{font-size:11px;line-height:1.4}
  .business-card .post-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:3px}
  .mini-profile{font-size:8px;gap:5px}
  .mini-profile small{font-size:4.5px}
  .adapt-label{font-size:6.5px;letter-spacing:0}
  .adapt-caption{font-size:8px}
  .business-closing{font-size:21px;max-width:340px}
  .included-grid{gap:26px 14px}
  .included-grid h3{font-size:14px}
  .included-grid p{font-size:12px}
  .editor-top{font-size:10px;height:48px}
  .demo-badge{font-size:7px}
  .editor-body{grid-template-columns:1fr}
  .editor-controls{padding:18px;display:grid;grid-template-columns:1fr 1fr;gap:7px 14px;border-right:0;border-bottom:1px solid #e5dfe7}
  .editor-controls label{grid-column:1/-1;font-size:11px;margin:0}
  .editor-controls input{grid-column:1/-1;font-size:16px;padding:10px 12px;min-height:45px;margin:0 0 8px}
  .editor-controls .control-label{display:block;font-size:10px;margin:0;grid-row:3}
  .editor-controls .control-label:nth-of-type(2){grid-column:2}
  .palette-controls{grid-column:1;grid-row:4;gap:4px;align-items:center;margin:0}
  .palette{width:44px;height:44px;flex:0 0 44px;border:5px solid white}
  .photo-controls{grid-column:2;grid-row:4;gap:4px;align-items:center}
  .photo-choice{width:44px;height:44px;flex:0 0 44px}
  .editor-controls>p{grid-column:1/-1;font-size:10px;margin:7px 0 0}
  .editor-canvas{padding:24px}
  .editable-post{width:min(100%,245px);max-width:245px;padding:22px}
  .news-grid{grid-template-columns:1fr;gap:14px}
  .news-card{display:grid;grid-template-columns:1.1fr 1fr;align-items:stretch;min-width:0}
  .news-art{aspect-ratio:auto;padding:10px;position:relative}
  .news-art .post-grid{grid-template-columns:repeat(3,minmax(0,1fr));transform:none;gap:3px}
  .preview-tag{font-size:6.5px;letter-spacing:.08em;margin-top:7px;padding:3px 6px}
  .news-info{align-self:center;padding:15px}
  .news-info>span{font-size:7px;line-height:1.6;letter-spacing:.05em}
  .news-info h3{font-size:24px;line-height:1.12;margin-top:8px}
  .news-info h3 span{display:none}
  .news-terms{font-size:12px;line-height:1.85}
  .news .visual-note{font-size:10px;max-width:310px}
  .offer-card{padding:28px 24px;border-radius:20px}
  .offer-card .button{min-height:54px;font-size:11px;gap:12px}
  .offer-card .micro{font-size:10px;margin-top:16px}
  .offer-card li{font-size:12px}
  .guarantee{margin-top:29px}
  .guarantee h3{font-size:12px}
  .guarantee p{font-size:10px}
  .faq{padding-top:76px;padding-bottom:70px;gap:28px}
  .faq-list summary{font-size:13px;min-height:63px}
  .faq-list details>p{font-size:12px}
  .final-section{padding-top:58px;padding-bottom:25px}
  .final-copy>p:not(.eyebrow):not(.micro){font-size:13px}
  .gallery-dialog{padding:17px 16px;max-width:calc(100% - 16px);width:430px;max-height:94dvh}
  .gallery-header{top:-17px;gap:12px;padding:1px 0 11px}
  .gallery-header h2{font-size:27px;line-height:1.13}
  .gallery-header .eyebrow{font-size:8px;letter-spacing:.05em}
  .gallery-caption{font-size:11px;margin:0 0 14px}
  .gallery-feature{width:min(100%,calc((100dvh - 280px)*.8),340px)}
  .gallery-navigation{gap:22px;margin-top:14px}
  .gallery-navigation button{width:46px;height:46px}
  .gallery-counter{font-size:12px}
  .gallery-thumbnails{margin-top:12px;gap:5px}
  .gallery-thumbnails button{padding:2px;min-height:44px}
  .gallery-dialog>.visual-note{font-size:9px;margin-top:12px}
  .info-dialog p,.info-dialog ul{font-size:12px}
  .footer-links{gap:7px;font-size:12px}
  .footer-links a,.footer-links button{min-height:44px;display:flex;align-items:center}
  .footer-bottom>button{min-height:44px}
}
@media(max-width:374px){
  .hero h1{font-size:46px}
  .editor-controls{padding:16px 14px;gap:7px 10px}
  .palette-controls,.photo-controls{gap:4px}
  .palette,.photo-choice{width:44px;flex-basis:44px}
  .collection-info h3{font-size:13px}
  .offer-card{padding-inline:22px}
}
@media(max-width:339px){
  .wrap{width:calc(100% - 32px)}
  .hero h1{font-size:42px}
  .hero .button,.final-copy .button{font-size:10px;gap:17px;padding-inline:20px}
  .editor-controls{display:block}
  .editor-controls input{margin:7px 0 14px}
  .editor-controls .control-label{margin:12px 0 7px}
}
@media(prefers-reduced-motion:reduce){.collection-card:hover,.news-card:hover,.button:hover{transform:none}}

/* Official catalog: scoped to preserve every existing demonstration and section. */
.official-catalog{gap:24px;grid-template-columns:repeat(2,minmax(0,1fr))}
.official-catalog>.official-card:last-child{grid-column:1 / -1;justify-self:center;width:calc((100% - 24px) / 2)}
.official-card{padding:14px;background:#fff;border:1px solid #291e1b0a;border-radius:24px;box-shadow:0 8px 20px #291e1b0d;overflow:hidden;transition:border-color .2s,box-shadow .2s}
.official-card:hover{transform:none}
.official-card .collection-preview{position:relative;width:100%;isolation:isolate}
.official-card .collection-profile{min-width:0;width:100%;padding:29px 5px 9px}
.official-card .collection-name{margin:0;min-width:0;font:400 34px/1.12 var(--serif);letter-spacing:-.035em;color:var(--ink);overflow-wrap:normal}
.official-card .collection-name>span{display:block;margin-bottom:5px;font:500 10px/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--text)}
.official-card .collection-name>em{display:block;font-weight:400;font-style:italic}
.official-card .collection-art{display:block;width:100%;padding:0;border:0;border-radius:13px;background:#fff;overflow:hidden;aspect-ratio:auto}
.official-grid-image{display:block;width:100%;height:auto;max-width:100%;object-fit:contain}
.official-card .collection-overlay{position:absolute;z-index:1;right:12px;bottom:-18px;display:flex;align-items:center;padding:2px;border:1px solid #e8e1df;border-radius:100px;background:#fff;box-shadow:0 3px 12px #291e1b12;color:var(--ink)}
.collection-overlay svg{display:block;width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.collection-overlay button{display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--ink);cursor:pointer;transition:background .18s,color .18s}
.collection-overlay button:hover{background:var(--warm)}
.collection-overlay .collection-like[aria-pressed="true"]{color:#ed4956}
.collection-overlay .collection-like[aria-pressed="true"] .collection-heart,.collection-overlay .collection-save[aria-pressed="true"] svg{fill:currentColor}
.collection-overlay button:focus-visible{outline:2px solid var(--ink);outline-offset:1px}
.official-gallery{width:min(860px,calc(73.76dvh - 78px));max-width:calc(100% - 24px);padding:18px;background:#fff;overflow-y:auto;overflow-x:hidden}
.official-gallery .gallery-header{top:-18px;background:#fff;padding:0 0 9px;gap:12px}
.official-gallery .gallery-header .eyebrow{margin-bottom:7px}
.official-gallery .gallery-header h2{font-size:30px}
.official-gallery .gallery-caption{margin:0 0 13px;font-size:12px}
.official-gallery .gallery-feature{width:100%;max-width:100%;min-width:0;touch-action:auto}
.official-gallery .official-grid-image{width:auto;max-width:100%;height:auto;max-height:calc(92dvh - 145px);margin-inline:auto;object-fit:contain}
@media(min-width:1050px){
  .official-catalog{grid-template-columns:repeat(3,minmax(0,1fr))}
  .official-catalog>.official-card:last-child{grid-column:2;width:100%}
}
@media(max-width:760px){
  .official-catalog{grid-template-columns:minmax(0,1fr);gap:24px}
  .official-catalog>.official-card:last-child{grid-column:auto;width:100%}
  .official-card{padding:12px;border-radius:22px}
  .official-card .collection-profile{padding:28px 4px 8px}
  .official-card .collection-name{font-size:34px;line-height:1.12}
  .official-card .collection-art{padding:0;border-radius:11px}
  .official-card .collection-overlay{right:10px}
  .official-gallery{width:600px;max-width:calc(100% - 12px);padding:14px;border-radius:12px;max-height:94dvh}
  .official-gallery .gallery-header{top:-14px}
  .official-gallery .gallery-header h2{font-size:27px}
  .official-gallery .gallery-header .eyebrow{font-size:8px}
  .official-gallery .gallery-caption{font-size:11px;margin-bottom:11px}
  .official-gallery .official-grid-image{max-height:calc(94dvh - 135px)}
}

/* Stories image only: preserve the existing yellow tile and its dimensions. */
#biblioteca .visual-stories>.stories-showcase-image{display:block;width:100%;height:100%;object-fit:contain}

/* Planner artwork stays inside the existing lavender tile. */
#biblioteca .visual-ideas>.planner-showcase-image{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain}

/* Frame the two original carousel strips without editing their artwork. */
#biblioteca .visual-carousel>.carousel-showcase{position:absolute;inset:0}
#biblioteca .carousel-strip{position:absolute;left:4%;width:92%;aspect-ratio:1892 / 473;overflow:hidden;border-radius:2px;box-shadow:0 7px 12px #283c4926}
#biblioteca .carousel-strip-clean{top:18.5%;transform:none}
#biblioteca .carousel-strip-creator{top:56%;aspect-ratio:1892 / 474;transform:none}
#biblioteca .carousel-strip>img{position:absolute;display:block;left:-4.12262156%;width:108.24524313%;max-width:none;height:auto;aspect-ratio:2048 / 1134}
#biblioteca .carousel-strip-clean>img{top:-13.31923890%}
#biblioteca .carousel-strip-creator>img{top:-126.16033755%}