@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;550;600;650;700&family=Manrope:wght@400;500;600;650;700;750;800&display=swap');
:root{--paper:#F5F9FD;--ink:#002E5F;--muted:#62778F;--accent:#ABC9ED;--accent-soft:#D8E9FB;--line:#D5E2F0;--font:'DM Sans',sans-serif;--heading:'Manrope',sans-serif}*{box-sizing:border-box}body{margin:0;background:#E7EFF8;color:var(--ink);font-family:var(--font);font-size:14px;-webkit-font-smoothing:antialiased}button,a,input{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer;color:inherit}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #2879BE;outline-offset:4px}button{border:0}a{color:inherit}svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.svg-defs{position:absolute;width:0;height:0;overflow:hidden}.hub{max-width:500px;margin:32px auto;background:var(--paper);border:1px solid #D5E2F0;border-radius:26px;padding:28px 30px 0;overflow:hidden;box-shadow:0 18px 90px #002E5F10;position:relative}.header{display:flex;align-items:center;justify-content:space-between}.brand{text-decoration:none;display:flex;align-items:center;gap:8px;font-family:var(--heading);font-size:26px;font-weight:800;letter-spacing:-1.5px}.brand-dot{align-self:flex-start;font-size:10px;letter-spacing:0;margin:4px 0 0 -5px}.brand-mark{display:flex;width:32px;height:32px;background:var(--ink);border-radius:9px;align-items:center;justify-content:center}.brand-mark svg{stroke:var(--accent-soft);width:25px;height:25px;stroke-width:1.8}.brand-mark path+path{fill:var(--accent-soft);stroke:none}.icon-btn{display:flex;align-items:center;justify-content:center;background:transparent;border:1px solid var(--line);width:39px;height:39px;border-radius:50%;flex-shrink:0}.icon-btn svg{width:18px;height:18px}.intro{padding-top:37px;text-align:center}.eyebrow{font-size:9px;letter-spacing:1.55px;font-weight:700;display:flex;align-items:center;justify-content:center;gap:7px}.live-dot{height:5px;width:5px;background:#347EBB;border-radius:50%}h1{font-family:var(--heading);font-size:63px;line-height:1.03;letter-spacing:-3.8px;font-weight:650;margin:17px 0 14px}.you{position:relative}.you svg{position:absolute;width:105%;height:16px;left:-3px;bottom:-8px;stroke:#5A93CB;stroke-width:3}.period{color:#2D75B6}.intro p{font-size:13px;color:#60758E;line-height:1.6;margin:18px 0 0}.showcase{height:249px;position:relative;margin:8px -15px 5px;isolation:isolate}.case{position:absolute;width:98px;line-height:0;filter:drop-shadow(7px 14px 7px #002E5F20);transform-origin:center bottom}.case svg{width:100%;height:auto;stroke:none;border-radius:17%}.case-main{width:112px;left:calc(50% - 56px);top:12px;transform:rotate(-6deg);z-index:3}.case-left{left:calc(50% - 145px);top:32px;transform:rotate(-20deg);z-index:1}.case-right{left:calc(50% + 43px);top:30px;transform:rotate(18deg);z-index:2}.orbit{position:absolute;width:345px;height:120px;border:1px solid #D7E5F3;border-radius:50%;left:calc(50% - 172px);top:76px;z-index:-1;transform:rotate(-12deg)}.orbit-two{width:310px;left:calc(50% - 155px);top:93px;transform:rotate(15deg)}.show-star{position:absolute;color:#6595C5;font-size:37px;top:13px;right:38px;transform:rotate(13deg)}.round-sticker{position:absolute;display:flex;align-items:center;justify-content:center;gap:4px;flex-direction:column;width:76px;height:76px;border-radius:50%;background:var(--accent-soft);border:1px solid #002E5F;right:12px;top:150px;transform:rotate(12deg);z-index:4;box-shadow:0 2px 0 #002E5F20}.round-sticker span{font-size:10px;font-weight:800;line-height:1.15;text-align:center;letter-spacing:-.2px}.round-sticker svg{fill:var(--ink);stroke:none;width:15px;height:15px}.image-caption{position:absolute;bottom:0;left:0;right:0;font-size:8px;letter-spacing:1.9px;text-align:center;color:#7289A0}.links{display:grid;gap:10px;margin-top:21px}.studio-link{padding:18px 19px;background:var(--ink);color:var(--paper);border-radius:17px;text-align:left;transition:transform .2s,background .2s}.link-top{display:flex;align-items:center;justify-content:space-between}.tiny{font-size:8px;letter-spacing:1.6px;font-weight:600;color:#E4EFFB}.pill{background:var(--accent-soft);color:#002E5F;font-size:7px;font-weight:800;letter-spacing:.7px;padding:5px 7px;border-radius:4px}.link-bottom{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:12px;font-family:var(--heading);font-weight:700;font-size:19px;letter-spacing:-.6px}.link-description{display:block;font-family:var(--font);font-weight:400;font-size:11px;letter-spacing:0;color:#D3E3F4;margin-top:6px}.arrow-circle{width:34px;height:34px;border-radius:50%;background:var(--accent-soft);color:var(--ink);display:flex;align-items:center;justify-content:center;flex-shrink:0}.arrow-circle svg{width:19px}.link-card{display:flex;align-items:center;text-align:left;padding:14px;background:#FFFFFF;border:1px solid var(--line);border-radius:15px;gap:13px;transition:transform .2s,border-color .2s,background .2s;min-height:80px}.link-icon{display:flex;align-items:center;justify-content:center;width:43px;height:43px;border-radius:12px;flex-shrink:0;background:#E0ECF9}.link-icon svg{height:20px;width:20px}.link-icon.lavender{background:#DBEAFB}.link-icon.cream{background:#E9F2FC}.link-copy{font-family:var(--heading);font-size:14px;font-weight:750;letter-spacing:-.35px;flex:1}.link-copy small{font-family:var(--font);display:block;color:var(--muted);font-size:10.5px;font-weight:400;letter-spacing:0;margin-top:5px}.link-arrow{width:19px;height:19px;flex-shrink:0}.support{margin-top:5px;background:transparent;border-color:transparent;padding-left:5px;padding-right:5px;gap:12px;min-height:67px}.support .link-icon{width:36px;height:36px;background:transparent;border:1px solid #C9DCEC;border-radius:50%}.support .link-copy{font-size:12px}.support .link-copy small{font-size:10px}.support-label{font-size:8px;letter-spacing:.6px;font-weight:700;white-space:nowrap}.support-label span{font-size:16px;margin-left:5px}.how{border-top:1px solid var(--line);padding:23px 0 0;margin-top:16px}.section-label{font-size:8px;letter-spacing:1.45px;text-align:center;color:#6C8199;font-weight:650}.steps{display:flex;align-items:center;justify-content:space-between;padding:20px 2px}.steps span{display:flex;flex-direction:column;gap:8px;font-size:10px}.steps b{font-size:9px;font-weight:500;color:#7D94AC}.steps i{font-size:12px;color:#9DB4CB;font-style:normal}footer{background:#E6F0FB;margin:4px -30px 0;padding:27px 20px 21px;text-align:center;border-top:1px solid #D3E3F4}.footer-mark{font-family:var(--heading);font-size:20px;font-weight:800;letter-spacing:-1px}.footer-mark span{display:inline-block;margin-left:6px;font-size:21px;color:#417BB4}footer p{font-size:11px;color:#607C99;margin:6px 0 20px}.concept-label{font-size:7px;letter-spacing:1.25px;color:#617C97}.margin-note{position:fixed;top:100px;left:max(35px,calc(50% - 490px));font-size:9px;letter-spacing:1.6px;line-height:1.7;color:#7891AB}.side-star{font-size:80px;color:#B4CCE5;margin:110px 0 135px}.margin-sign{position:fixed;right:max(35px,calc(50% - 490px));top:225px;font-family:var(--heading);font-size:30px;line-height:1.15;font-weight:650;letter-spacing:-1.5px;color:#90ABC8}.margin-sign>span+span{display:block;font-size:75px;color:#AEC9E6;margin-top:12px}dialog{position:fixed;width:min(460px,calc(100% - 24px));border:1px solid var(--line);border-radius:25px;background:var(--paper);padding:23px;color:var(--ink);max-height:calc(100dvh - 36px);overflow-y:auto;box-shadow:0 25px 100px #1114}dialog::backdrop{background:#002E5F80;backdrop-filter:blur(6px)}.sheet-top{display:flex;align-items:center;justify-content:space-between}.sheet-top .eyebrow{font-size:8px}.close{font-size:15px;width:33px;height:33px}.sheet-title{font-family:var(--heading);font-size:29px;line-height:1.15;font-weight:650;letter-spacing:-1.1px;margin:19px 0 8px}.sheet-desc{font-size:12px;color:#627A94;line-height:1.6;margin:0 0 18px}.studio-preview{background:#E7F0FA;border-radius:18px;display:flex;justify-content:center;align-items:center;min-height:240px;position:relative;margin-bottom:18px}.studio-preview:after{content:'ILLUSTRATIVE CASE PREVIEW';position:absolute;bottom:13px;font-size:7px;letter-spacing:1.3px;color:#6F87A0}.studio-preview svg{width:99px;height:auto;stroke:none;filter:drop-shadow(5px 9px 5px #002E5F20);transform:rotate(-7deg)}label,.field-label{display:block;font-size:11px;font-weight:650;margin:16px 0 8px}.name-input{width:100%;padding:13px;border:1px solid #CBDDED;border-radius:10px;background:#fff;font-size:16px;color:var(--ink)}.color-options{display:flex;gap:12px}.swatch{width:33px;height:33px;border-radius:50%;border:3px solid var(--paper);box-shadow:0 0 0 1px #D2E0ED}.swatch.active{box-shadow:0 0 0 2px var(--ink)}.sheet-button{width:100%;background:var(--ink);color:var(--paper);padding:15px 12px;border-radius:11px;margin-top:20px;font-weight:650;font-size:12px}.sheet-button.secondary{background:transparent;border:1px solid #C7DAED;color:var(--ink);margin-top:9px}.studio-note{font-size:9px;line-height:1.6;color:#667E97;text-align:center;margin:12px 0 0}.catalogue-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.catalogue-item{padding:14px 5px 12px;border:1px solid #D1DFEE;border-radius:13px;background:#EDF4FC;min-width:0}.catalogue-item svg{width:65%;height:auto;stroke:none;transform:rotate(-6deg);filter:drop-shadow(3px 5px 2px #002E5F20)}.catalogue-item b{display:block;font-size:10px;font-weight:600;margin-top:12px}.catalogue-item small{display:block;font-size:8px;color:#637E99;margin-top:4px}.details-list{padding:0;margin:18px 0;list-style:none}.details-list li{border-top:1px solid var(--line);padding:13px 0;display:flex;gap:13px;font-size:12px}.details-list span{color:#7B92A9;font-size:10px}.toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,20px);background:var(--ink);color:white;opacity:0;pointer-events:none;border-radius:10px;padding:13px 18px;max-width:calc(100% - 40px);width:max-content;text-align:center;font-size:12px;z-index:9;transition:opacity .2s,transform .2s}.toast.visible{opacity:1;transform:translate(-50%,0)}@media(hover:hover){.studio-link:hover{transform:translateY(-2px);background:#174779}.link-card:hover{transform:translateY(-2px);border-color:#8FB5DD;background:#fff}.icon-btn:hover{background:#E3EFFB}.catalogue-item:hover{background:#E1EDF9}}@media(min-width:1000px){.hub{margin-top:35px;margin-bottom:35px}}@media(max-width:950px){.margin-note,.margin-sign{display:none}}@media(max-width:550px){body{background:var(--paper)}.hub{margin:0 auto;padding:24px 24px 0;border:0;border-radius:0;box-shadow:none;max-width:460px}.intro{padding-top:29px}h1{font-size:59px}.showcase{margin-top:10px;height:239px}.case-main{width:108px}.case-left,.case-right{width:94px}.case-left{left:calc(50% - 124px)}.case-right{left:calc(50% + 34px)}.show-star{right:18px}.round-sticker{right:0;top:142px;width:70px;height:70px}.round-sticker span{font-size:9px}.link-bottom{font-size:17px}.link-description{font-size:10px}.studio-link{padding:17px}.link-card{padding:13px;gap:11px}.link-copy{font-size:13px}.link-copy small{font-size:10px}footer{margin-left:-24px;margin-right:-24px}.links{margin-top:20px}.support{padding-left:2px;padding-right:2px}.support-label{font-size:7px}.support .link-copy small{font-size:9px}dialog{margin:auto auto 12px;max-height:calc(100dvh - 24px)}.sheet-title{font-size:27px}}@media(max-width:355px){.hub{padding-left:18px;padding-right:18px}.link-bottom{font-size:15px}.link-copy{font-size:12px}.link-copy small{font-size:9px}.pill{font-size:6px}.showcase{transform:scale(.94)}.support-label{display:none}.steps span{font-size:9px}footer{margin-left:-18px;margin-right:-18px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

.official-logo{display:block;object-fit:contain}.footer-mark .official-logo{margin:0 auto}.studio-link,.link-card{text-decoration:none}.sample-link{display:block;background:transparent;font-size:10px;text-decoration:underline;text-underline-offset:4px;margin:-4px auto 19px;color:#346B9D;padding:6px}

/* Casesnap blue theme and original brand product previews. */
.round-sticker{background:#002E5F;color:#FFFFFF;border-color:#002E5F}.round-sticker svg{fill:#FFFFFF}.arrow-circle{background:#FFFFFF;color:#002E5F}.showcase{background:var(--paper)}.case{filter:none;mix-blend-mode:multiply}.case img{display:block;width:100%;height:auto;filter:brightness(1.045) contrast(1.015)}.case:focus-visible{outline:3px solid #2879BE;outline-offset:6px;border-radius:15px}.official-logo{filter:brightness(0) saturate(100%) invert(14%) sepia(57%) saturate(1830%) hue-rotate(184deg) brightness(91%) contrast(109%)}

.orbit{display:none}

/* Original personalised cases, hung from a photographed clothesline layer. */
.showcase.clothesline-scene{height:auto;aspect-ratio:1.35;margin-top:16px;isolation:isolate;background:var(--paper)}
.clothesline{position:absolute;left:0;top:0;width:100%;height:auto;transform:translateY(-18%);z-index:5;pointer-events:none;user-select:none}
.clothesline-scene .case{width:24%;transform-origin:50% 0;filter:drop-shadow(1px 7px 5px #002e5f18);mix-blend-mode:normal}
.clothesline-scene .case img{display:block;width:100%;height:auto;filter:none}
.clothesline-scene .case-left{left:20%;top:21.5%;transform:translateX(-50%) rotate(-7deg);z-index:2}
.clothesline-scene .case-main{left:50%;top:16.5%;width:25.5%;transform:translateX(-50%) rotate(-4deg);z-index:3}
.clothesline-scene .case-right{left:80%;top:21.5%;transform:translateX(-50%) rotate(-6deg);z-index:1}
.clothesline-scene .image-caption{bottom:1px;font-size:7.5px;letter-spacing:1.6px}
@media(max-width:355px){.showcase.clothesline-scene{transform:none}.clothesline-scene .image-caption{font-size:6.5px;letter-spacing:1.3px}}

/* Clear studio headline with room for the full phrase on small screens. */
#headline{font-size:54px;line-height:1.05;letter-spacing:-2.6px}
#headline .you svg{width:100%;left:0}
@media(max-width:550px){#headline{font-size:48px}}
@media(max-width:355px){#headline{font-size:42px;letter-spacing:-2.2px}}

/* One consistent link layout, with a simple primary action. */
.link-card .link-copy{line-height:1.35}
.link-card .link-copy small{line-height:1.45}
.studio-simple{background:var(--ink);border-color:var(--ink);color:#fff}
.studio-simple .link-icon{background:#ffffff14}
.studio-simple .link-copy small{color:#d5e5f5}
.community-link{width:100%;color:var(--ink)}
.community-link .link-icon{background:#e6f0fb}
.support .link-copy{font-size:13px}
.support .link-copy small{font-size:10.5px}
footer{margin-top:24px}
@media(hover:hover){.studio-simple:hover{background:#174779;border-color:#174779}}
@media(max-width:550px){.link-card .link-copy{font-size:13px}.link-card .link-copy small{font-size:10px}}
@media(max-width:355px){.link-card{gap:10px;padding:12px}.link-card .link-icon{width:37px;height:37px}.link-card .link-copy{font-size:12px}.link-card .link-copy small{font-size:9.5px}.support{padding-left:2px;padding-right:2px}}