@font-face{font-family:"Hanken Grotesk";src:url("/assets/fonts/HankenGrotesk-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url("/assets/fonts/HankenGrotesk-SemiBold.ttf") format("truetype");font-weight:600 700;font-style:normal;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url("/assets/fonts/HankenGrotesk-ExtraBold.ttf") format("truetype");font-weight:800 900;font-style:normal;font-display:swap}

:root{color-scheme:light;--purple:#482784;--purple-dark:#351c63;--purple-soft:#ab92bf;--cyan:#ceedf3;--teal:#068d9d;--ink:#17141c;--muted:#625d69;--canvas:#f4f1f7;--surface:#fff;--border:#ddd6e4;--danger:#a32020;--success:#157347;--shadow:0 18px 50px rgba(45,26,63,.11);font-family:"Hanken Grotesk",Arial,sans-serif;font-synthesis:none}
*{box-sizing:border-box}
html{background:var(--canvas);color:var(--ink);min-width:320px}
body{margin:0;min-height:100vh;overflow-x:hidden}
button,input{font:inherit}
a{color:inherit}
.site-header{height:72px;padding:0 clamp(20px,4vw,64px);display:flex;align-items:center;justify-content:space-between;background:var(--surface);border-bottom:1px solid var(--border)}
.site-header .brand{display:flex;align-items:center}
.site-header img{display:block;width:clamp(164px,18vw,210px);height:auto}
.site-header p{margin:0;color:var(--muted);font-size:.82rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
main{width:min(1320px,calc(100% - 40px));margin:0 auto;padding:clamp(34px,5vw,72px) 0 48px}
.intro{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:40px;align-items:end;margin-bottom:28px}
.eyebrow,.kicker{margin:0 0 8px;color:var(--purple);font-size:.76rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
h1,h2,p{margin-top:0}
h1{max-width:800px;margin-bottom:14px;font-size:clamp(2.3rem,5vw,5.2rem);line-height:.94;letter-spacing:-.045em;font-weight:800}
.lead{max-width:720px;margin-bottom:0;color:var(--muted);font-size:clamp(1rem,1.7vw,1.28rem);line-height:1.5}
.spec-list{display:flex;gap:1px;margin:0;padding:0;list-style:none;border:1px solid var(--border);background:var(--border)}
.spec-list li{min-width:122px;padding:14px 18px;background:var(--surface)}
.spec-list strong,.spec-list span{display:block}
.spec-list strong{font-size:1rem;font-weight:800}
.spec-list span{margin-top:2px;color:var(--muted);font-size:.75rem}
.privacy-note{display:flex;align-items:center;gap:13px;margin-bottom:22px;padding:14px 18px;border-left:4px solid var(--teal);background:#eaf7f9;color:#23484d;font-size:.9rem;line-height:1.4}
.privacy-note svg{width:24px;height:24px;flex:0 0 auto;fill:var(--teal)}
.workspace{display:grid;grid-template-columns:minmax(340px,440px) minmax(0,1fr);gap:22px;align-items:start}
.panel{background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow)}
.form-panel{padding:clamp(22px,3vw,34px)}
.panel-heading{display:flex;align-items:center;gap:14px;margin-bottom:26px}
.panel-heading h2{margin:0;font-size:1.45rem;line-height:1.1}
.panel-heading .kicker{margin-bottom:3px}
.step{display:grid;place-items:center;width:42px;height:42px;flex:0 0 auto;background:var(--purple);color:#fff;font-size:.76rem;font-weight:800;letter-spacing:.08em}
.field{margin-bottom:18px}
.field>label,.label-line label,.variant-fieldset legend{display:block;margin-bottom:7px;font-size:.86rem;font-weight:700}
.label-line{display:flex;align-items:baseline;justify-content:space-between}
.label-line span{color:var(--muted);font-size:.74rem}
input[type="text"],input[type="email"],input[type="tel"]{width:100%;height:48px;padding:0 13px;border:1px solid #bcb3c5;border-radius:6px;background:#fff;color:var(--ink);outline:none;transition:border-color .16s ease,box-shadow .16s ease}
input::placeholder{color:#938b99}
input:hover{border-color:#83778f}
input:focus{border-color:var(--purple);box-shadow:0 0 0 3px rgba(72,39,132,.15)}
input[aria-invalid="true"]{border-color:var(--danger);box-shadow:0 0 0 3px rgba(163,32,32,.1)}
.field-meta{display:flex;justify-content:space-between;gap:12px;margin-top:5px;color:var(--muted);font-size:.7rem}
.field-error{min-height:1em;margin:5px 0 0;color:var(--danger);font-size:.74rem;font-weight:600}
.variant-fieldset{margin:4px 0 20px;padding:0;border:0}
.variant-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.variant-option{position:relative;cursor:pointer}
.variant-option input{position:absolute;inset:0;z-index:2;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.variant-option>span{display:block;min-height:126px;padding:10px;border:1px solid #bcb3c5;border-radius:8px;background:#fff;transition:border-color .16s ease,box-shadow .16s ease}
.variant-option input:checked+span{border-color:var(--purple);box-shadow:0 0 0 2px rgba(72,39,132,.15)}
.variant-option input:focus-visible+span{outline:3px solid rgba(72,39,132,.35);outline-offset:2px}
.variant-option strong,.variant-option small{display:block}
.variant-option strong{margin-top:8px;font-size:.82rem}
.variant-option small{margin-top:2px;color:var(--muted);font-size:.68rem;line-height:1.25}
.variant-mini{position:relative;display:block;height:62px;overflow:hidden;border:1px solid #ded8e3;background:#fff;box-shadow:0 4px 10px rgba(30,20,40,.08)}
.variant-mini:after{content:"";position:absolute;left:0;right:0;bottom:0;height:12px;background:var(--purple)}
.variant-mini i,.variant-mini b{position:absolute;display:block}
.variant-mini-mark i{left:0;top:0;bottom:12px;width:40%;background:var(--purple)}
.variant-mini-mark b{left:51%;top:14px;width:37%;height:4px;background:var(--ink);box-shadow:0 8px 0 var(--purple),0 16px 0 #8b8490}
.variant-mini-clean i{left:31%;top:14px;width:40%;height:4px;background:var(--ink);box-shadow:0 8px 0 var(--purple),0 16px 0 #8b8490}
.guide-toggle{position:relative;display:flex;align-items:flex-start;gap:11px;min-height:52px;margin:4px 0 22px;padding:10px 0;cursor:pointer}
.guide-toggle input{position:absolute;inset:0;z-index:2;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.checkmark{position:relative;width:22px;height:22px;flex:0 0 auto;border:1px solid #9b91a3;border-radius:4px;background:#fff}
.guide-toggle input:checked+.checkmark{border-color:var(--purple);background:var(--purple)}
.guide-toggle input:checked+.checkmark:after{content:"";position:absolute;left:6px;top:2px;width:6px;height:11px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.guide-toggle input:focus-visible+.checkmark{outline:3px solid rgba(72,39,132,.3);outline-offset:2px}
.guide-toggle strong,.guide-toggle small{display:block}
.guide-toggle strong{font-size:.79rem}
.guide-toggle small{margin-top:2px;color:var(--muted);font-size:.7rem;line-height:1.3}
.download-block{padding-top:20px;border-top:1px solid var(--border)}
.primary-button{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;min-height:54px;padding:0 18px;border:0;border-radius:6px;background:var(--purple);color:#fff;cursor:pointer;font-weight:800;box-shadow:0 8px 20px rgba(72,39,132,.2);transition:background .16s ease,transform .16s ease}
.primary-button svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.primary-button:hover:not(:disabled){background:var(--purple-dark);transform:translateY(-1px)}
.primary-button:focus-visible{outline:3px solid rgba(72,39,132,.35);outline-offset:3px}
.primary-button:disabled{background:#a69bad;cursor:not-allowed;box-shadow:none}
.primary-button[aria-busy="true"]{cursor:progress}
.download-block>p:not(.form-status){margin:9px 2px 0;color:var(--muted);font-size:.7rem;line-height:1.4}
.form-status{min-height:1.2em;margin:10px 2px 0;font-size:.78rem;font-weight:700}
.form-status.success{color:var(--success)}
.form-status.error{color:var(--danger)}
.preview-panel{position:sticky;top:20px;padding:clamp(22px,3vw,34px);background:#ece7f0}
.preview-heading{margin-bottom:20px}
.preview-scale{margin-left:auto;color:var(--muted);font-size:.7rem;font-weight:600;white-space:nowrap}
.preview-scale span{display:inline-block;width:32px;margin:0 7px 3px 0;border-top:1px solid var(--muted)}
.preview-stack{display:grid;gap:22px}
.preview-stack figure{margin:0}
.preview-stack figcaption{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font-size:.76rem}
.preview-stack figcaption span{color:var(--muted)}
.card-preview{width:100%;overflow:hidden;background:#fff;box-shadow:0 14px 35px rgba(41,28,51,.18)}
.card-preview svg{display:block;width:100%;height:auto}
.guide-legend{display:flex;justify-content:flex-end;gap:18px;margin:12px 0 0;color:var(--muted);font-size:.68rem}
.guide-legend[hidden]{display:none}
.guide-legend span{display:flex;align-items:center;gap:6px}
.guide-legend i{display:inline-block;width:24px;border-top:2px dashed}
.trim-line{border-color:var(--teal)!important}
.safe-line{border-color:var(--danger)!important}
.production-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin:22px 0 0;background:#d7cfdd;border:1px solid #d7cfdd}
.production-facts div{padding:10px 11px;background:#fff}
.production-facts dt{color:var(--muted);font-size:.62rem}
.production-facts dd{margin:3px 0 0;font-size:.72rem;font-weight:700}
.order-strip{display:grid;grid-template-columns:260px 1fr;gap:28px;align-items:center;margin-top:22px;padding:26px 30px;background:var(--ink);color:#fff}
.order-strip h2{margin:0;font-size:1.35rem}
.order-strip .kicker{color:var(--cyan)}
.order-strip ol{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:0;padding:0;list-style:none}
.order-strip li{display:flex;align-items:flex-start;gap:11px}
.order-strip li>span{display:grid;place-items:center;width:27px;height:27px;flex:0 0 auto;border:1px solid #82798a;color:var(--cyan);font-size:.72rem;font-weight:800}
.order-strip strong,.order-strip small{display:block}
.order-strip strong{font-size:.78rem}
.order-strip small{margin-top:3px;color:#beb7c4;font-size:.68rem;line-height:1.35}
footer{width:min(1320px,calc(100% - 40px));margin:0 auto;padding:0 0 34px;display:flex;justify-content:space-between;gap:20px;color:var(--muted);font-size:.72rem}
footer a{text-decoration-thickness:1px;text-underline-offset:3px}
footer a:hover{color:var(--purple)}

@media(max-width:1050px){.intro{grid-template-columns:1fr}.spec-list{width:max-content}.workspace{grid-template-columns:minmax(320px,400px) minmax(0,1fr)}.production-facts{grid-template-columns:repeat(2,1fr)}.order-strip{grid-template-columns:1fr}.order-strip ol{grid-template-columns:repeat(3,1fr)}}
@media(max-width:820px){.site-header{height:64px}.site-header p{display:none}main{width:min(100% - 28px,680px);padding-top:34px}.intro{gap:24px}.spec-list{width:100%;display:grid;grid-template-columns:repeat(3,1fr)}.spec-list li{min-width:0;padding:12px}.workspace{grid-template-columns:1fr}.preview-panel{position:static;order:2}.order-strip ol{grid-template-columns:1fr}.order-strip{padding:24px}.preview-scale{display:none}footer{width:min(100% - 28px,680px)}}
@media(max-width:480px){main{width:calc(100% - 20px)}h1{font-size:2.5rem}.lead{font-size:.96rem}.spec-list strong{font-size:.84rem}.spec-list span{font-size:.65rem}.privacy-note{align-items:flex-start;padding:12px;font-size:.8rem}.form-panel,.preview-panel{padding:18px}.panel-heading{margin-bottom:22px}.step{width:38px;height:38px}.variant-grid{grid-template-columns:1fr 1fr}.variant-option>span{min-height:124px}.production-facts{grid-template-columns:1fr 1fr}.order-strip{padding:22px 18px}footer{width:calc(100% - 20px);display:block}footer a{display:block;margin-top:8px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important}}
