@import "https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@1,600&display=swap";:root{color:#183529;font-synthesis:none;text-rendering:optimizelegibility;--ink:#183529;--muted:#6c7e74;--green:#285f45;--lime:#c6e86b;--paper:#fffef9;--line:#dce5da;background:#f3f7f0;font-family:DM Sans,system-ui,sans-serif}.result-image{object-fit:contain;border:1px solid var(--line);border-radius:18px;width:min(100%,620px);max-height:52vh;margin:18px auto;display:block}.result-actions{flex-wrap:wrap;justify-content:center;gap:10px;margin:14px 0;display:flex}.result-actions a{text-decoration:none}.contact-input{border:1px solid var(--line);background:var(--paper);width:min(100%,420px);color:var(--ink);font:inherit;border-radius:14px;margin:12px auto;padding:15px 16px}.help-panel{border:1px solid var(--line);text-align:left;background:#fffef9c7;border-radius:14px;width:min(100%,420px);margin:18px auto;padding:14px}.help-panel summary{color:var(--green);cursor:pointer;font-size:12px;font-weight:700}.help-panel p{margin:10px 0 0;font-size:11px}.help-panel .contact-input{margin-bottom:8px}.help-panel .secondary-button{width:100%}.sales-note{margin-top:12px!important;font-size:11px!important}*{box-sizing:border-box}html{background:#f3f7f0}body{min-width:320px;min-height:100vh;margin:0}button,input,select{font:inherit}button{color:inherit}button:focus-visible,input:focus-visible,select:focus-visible,label:focus-within{outline-offset:2px;outline:3px solid #457f5b40}.app-shell{min-height:100vh;padding-bottom:106px}.hero{padding:calc(18px + env(safe-area-inset-top)) 20px 40px;border-bottom:1px solid var(--line);background:radial-gradient(circle at 93% 14%,#c6e86b9e 0 9%,#0000 9.5%),radial-gradient(circle at 88% 21%,#c6e86b29 0 19%,#0000 19.5%),linear-gradient(145deg,#edf4e8,#f9fbf4);position:relative;overflow:hidden}.hero:after{content:"B";color:#285f450b;font:600 210px/1 Georgia,serif;position:absolute;bottom:-72px;right:-16px;transform:rotate(-5deg)}.topline{justify-content:space-between;align-items:center;margin-bottom:54px;display:flex}.wordmark{letter-spacing:.16em;align-items:center;gap:9px;font-size:12px;font-weight:700;display:flex}.wordmark span,.brand-mark{color:#f9fff4;background:var(--green);border-radius:9px 9px 9px 2px;place-items:center;width:32px;height:32px;font:700 18px Georgia,serif;display:grid}.context-pill{color:#527061;background:#ffffffa8;border:1px solid #d8e6d4;border-radius:999px;align-items:center;gap:7px;padding:7px 10px;font-size:11px;font-weight:600;display:flex}.context-pill i{background:#62b17a;border-radius:50%;width:7px;height:7px;box-shadow:0 0 0 3px #62b17a24}.context-pill.demo i{background:#daa94b;box-shadow:0 0 0 3px #daa94b24}.eyebrow{color:#557567;letter-spacing:.14em;text-transform:uppercase;margin:0 0 10px;font-size:11px;font-weight:700}.hero h1{z-index:1;letter-spacing:-.055em;max-width:340px;margin:0;font-size:clamp(39px,12vw,58px);line-height:.96;position:relative}.hero h1 em{color:var(--green);font-family:Playfair Display,Georgia,serif;font-weight:600}.hero-copy{z-index:1;max-width:300px;color:var(--muted);margin:20px 0 0;font-size:14px;line-height:1.55;position:relative}.benefit-row{z-index:1;flex-wrap:wrap;gap:7px;margin-top:16px;display:flex;position:relative}.benefit-row span{color:#456656;background:#ffffffb8;border:1px solid #d7e4cf;border-radius:999px;padding:7px 10px;font-size:10px;font-weight:700}.form-flow{gap:14px;max-width:680px;margin:auto;padding:16px 12px;display:grid}.config-card,.error-banner{background:var(--paper);border:1px solid #3350401a;border-radius:22px;padding:22px 18px;box-shadow:0 6px 24px #1f3f2d0b}.section-heading{gap:13px;margin-bottom:22px;display:flex}.section-heading>span{color:#91a299;letter-spacing:.08em;flex:none;padding-top:3px;font-size:10px;font-weight:700}.section-heading h2{letter-spacing:-.025em;margin:0 0 4px;font-size:20px}.section-heading p{color:var(--muted);margin:0;font-size:12px;line-height:1.4}.project-summary{justify-content:space-between;align-items:center;gap:14px;padding:16px 18px;display:flex}.project-summary>div{gap:2px;min-width:0;display:grid}.project-summary span{color:var(--muted);letter-spacing:.1em;text-transform:uppercase;font-size:9px;font-weight:700}.project-summary strong{text-overflow:ellipsis;white-space:nowrap;font-size:17px;overflow:hidden}.project-summary small{color:var(--muted);font-size:10px}.project-summary button{color:var(--green);cursor:pointer;background:#fff;border:1px solid #bfd0c2;border-radius:10px;padding:8px 10px;font-size:10px;font-weight:700}.text-field{border-bottom:2px solid #b8cbbd;align-items:center;transition:border-color .2s;display:flex}.text-field:focus-within{border-color:var(--green)}.text-field input{min-width:0;color:var(--ink);letter-spacing:.02em;text-transform:none;background:0 0;border:0;outline:0;flex:1;padding:10px 2px 13px;font-size:26px;font-weight:600}.text-field span{color:#96a49c;font-size:11px}.letter-preview{background:linear-gradient(#ffffffbd,#ffffffbd),repeating-linear-gradient(0deg,#0000,#0000 13px,#d6ddd4 14px),repeating-linear-gradient(90deg,#0000,#0000 13px,#d6ddd4 14px),#e9eee7;border-radius:14px;justify-content:center;align-items:center;min-height:90px;margin-top:17px;padding:15px;display:flex;overflow:hidden}.letter-preview b{color:#315a47;text-shadow:1px 2px #0c331f2e;font:700 clamp(25px,9vw,47px)/1 Georgia,serif;transition:color .2s,transform .2s}.letter-preview.layout-arc b:first-child,.letter-preview.layout-arc b:last-child{transform:translateY(9px)rotate(5deg)}.letter-preview.layout-arc b:nth-child(2),.letter-preview.layout-arc b:nth-last-child(2){transform:translateY(3px)}.letter-preview.layout-stacked{flex-flow:column wrap;align-content:center;gap:0 3px;max-height:126px}.letter-preview.layout-stacked b{font-size:27px}.segmented-control{background:#edf1eb;border-radius:12px;grid-template-columns:repeat(3,1fr);padding:3px;display:grid}.segmented-control button{color:#687a70;cursor:pointer;background:0 0;border:0;border-radius:10px;min-height:40px;padding:7px;font-size:11px;font-weight:600}.segmented-control button.active{color:var(--ink);background:#fff;box-shadow:0 2px 8px #27453317}.auto-note{background:#f7faf4;border:1px dashed #cddbc9;border-radius:12px;align-items:center;gap:12px;margin-top:16px;padding:14px;display:flex}.auto-note span{width:31px;height:31px;color:var(--green);background:#e1edc5;border-radius:50%;flex:none;place-items:center;display:grid}.auto-note p{color:var(--muted);margin:0;font-size:12px;line-height:1.45}.swatch-grid{grid-template-columns:repeat(3,1fr);gap:9px;margin-top:16px;display:grid}.swatch-grid button{border:1px solid var(--line);cursor:pointer;background:#fff;border-radius:10px;align-items:center;gap:7px;padding:7px;display:flex}.swatch-grid button.selected{border-color:var(--green);box-shadow:inset 0 0 0 1px var(--green)}.swatch-grid i{border:1px solid #00000012;border-radius:7px;flex:none;width:25px;height:25px}.swatch-grid small{text-overflow:ellipsis;font-size:10px;overflow:hidden}.letter-colors{gap:7px;max-height:270px;margin-top:16px;display:grid;overflow-y:auto}.letter-colors label{border:1px solid var(--line);border-radius:10px;grid-template-columns:33px 1fr 25px;align-items:center;gap:9px;padding:7px 9px;display:grid}.letter-colors label span{background:#eff3ed;border-radius:7px;place-items:center;height:28px;font-family:Georgia,serif;font-weight:700;display:grid}.letter-colors select{min-width:0;color:var(--ink);background:#fff;border:0;outline:0;font-size:12px}.letter-colors i{border:1px solid #00000012;border-radius:50%;width:24px;height:24px}.toggle-row{cursor:pointer;grid-template-columns:1fr auto;align-items:center;display:grid;position:relative}.toggle-row div{gap:3px;display:grid}.toggle-row strong{font-size:13px}.toggle-row small{color:var(--muted);font-size:11px}.toggle-row input{opacity:0;position:absolute}.toggle-row>i{background:#cbd4cc;border-radius:99px;width:46px;height:26px;transition:all .2s;position:relative}.toggle-row>i:after{content:"";background:#fff;border-radius:50%;width:20px;height:20px;transition:all .2s;position:absolute;top:3px;left:3px;box-shadow:0 1px 4px #0003}.toggle-row input:checked+i{background:var(--green)}.toggle-row input:checked+i:after{transform:translate(20px)}.consent-row{border-top:1px solid var(--line);margin-top:18px;padding-top:16px}.size-options{gap:7px;margin-top:16px;padding-bottom:3px;display:flex;overflow-x:auto}.size-options button{border:1px solid var(--line);cursor:pointer;background:#fff;border-radius:10px;min-width:57px;padding:10px 7px;display:grid}.size-options button.selected{border-color:var(--green);background:#eff6eb}.size-options strong{font-size:13px}.size-options small{color:var(--muted);font-size:9px}.subheading{color:#6f8177;letter-spacing:.1em;text-transform:uppercase;margin:22px 0 10px;font-size:10px}.layout-options{grid-template-columns:repeat(3,1fr);gap:8px;display:grid}.layout-options button{border:1px solid var(--line);cursor:pointer;background:#fff;border-radius:12px;place-items:center;min-height:77px;padding:8px;display:grid}.layout-options button.selected{border-color:var(--green);box-shadow:inset 0 0 0 1px var(--green);background:#f2f7ee}.layout-options span{letter-spacing:-.08em;font:700 15px Georgia,serif}.layout-options small{color:var(--muted);font-size:10px}.upload-zone{cursor:pointer;background:#f7faf5;border:1.5px dashed #b8cbb9;border-radius:15px;place-items:center;min-height:190px;padding:20px;display:grid}.upload-zone input,.photo-actions input{opacity:0;width:1px;height:1px;position:absolute}.upload-icon{width:45px;height:45px;color:var(--green);background:#deebd5;border-radius:50%;place-items:center;margin-bottom:10px;font-size:22px;display:grid}.upload-zone strong{font-size:13px}.upload-zone small{color:var(--muted);margin-top:4px;font-size:10px}.photo-stage{cursor:crosshair;touch-action:none;-webkit-user-select:none;user-select:none;background:#dfe5df;border-radius:15px;min-height:210px;position:relative;overflow:hidden}.photo-stage img{object-fit:contain;pointer-events:none;width:100%;max-height:430px;display:block}.placement-box{border:2px solid var(--lime);pointer-events:none;background:#1e4f3740;place-items:center;display:grid;position:absolute;box-shadow:0 0 0 999px #0a191121}.placement-box:before,.placement-box:after{content:"";background:var(--green);border:2px solid #fff;width:7px;height:7px;position:absolute}.placement-box:before{top:-5px;left:-5px}.placement-box:after{bottom:-5px;right:-5px}.placement-box span{color:#fff;text-overflow:ellipsis;white-space:nowrap;text-shadow:0 2px 8px #0000008c;max-width:96%;font:700 clamp(13px,5vw,30px) Georgia,serif;overflow:hidden}.draw-hint{color:#fff;white-space:nowrap;pointer-events:none;background:#14281dbf;border-radius:99px;padding:8px 12px;font-size:10px;position:absolute;bottom:14px;left:50%;transform:translate(-50%)}.photo-actions{justify-content:space-between;align-items:center;margin-top:10px;display:flex}.photo-actions p{color:var(--muted);margin:0;font-size:10px}.photo-actions label{color:var(--green);cursor:pointer;font-size:10px;font-weight:700;position:relative}.error-banner{color:#713e2a;background:#fff7f2;border-color:#e6c7b8}.error-banner strong{font-size:13px}.error-banner ul{margin:7px 0 0;padding-left:18px;font-size:11px;line-height:1.6}.submit-bar{z-index:20;padding:12px 14px calc(12px + env(safe-area-inset-bottom));-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:#fffef9eb;border-top:1px solid #274c371f;justify-content:space-between;align-items:center;display:flex;position:fixed;bottom:0;left:0;right:0;box-shadow:0 -8px 32px #19392714}.submit-bar>div{gap:2px;padding-left:4px;display:grid}.submit-bar small{color:var(--muted);font-size:9px}.submit-bar strong{font-size:12px}.primary-button,.secondary-button{background:var(--green);color:#fff;cursor:pointer;border:0;border-radius:14px;min-height:48px;padding:0 22px;font-size:13px;font-weight:700;box-shadow:0 7px 18px #285f4533}.primary-button span{margin-left:10px}.primary-button:disabled{opacity:.65;cursor:wait}.secondary-button{color:var(--green);box-shadow:none;background:#fff;border:1px solid #bfd0c2}.button-loader,.loader{border:2px solid #ffffff4d;border-top-color:#fff;border-radius:50%;width:19px;height:19px;animation:.8s linear infinite spin;display:inline-block;margin:0!important}.loader{border-color:#d1dfd0;border-top-color:var(--green);width:26px;height:26px}@keyframes spin{to{transform:rotate(360deg)}}.state-screen{text-align:center;background:radial-gradient(circle at 50% 36%,#e6f0d9,#f3f7f0 42%);flex-direction:column;justify-content:center;align-items:center;min-height:100vh;padding:30px;display:flex}.state-screen .brand-mark{width:52px;height:52px;margin-bottom:22px;font-size:26px}.state-screen .loader{margin:10px 0 15px}.state-screen h1{letter-spacing:-.04em;max-width:370px;margin:0 0 12px;font-size:30px}.state-screen p{max-width:330px;color:var(--muted);margin:0 0 22px;font-size:13px;line-height:1.55}.success-orbit{border:1px solid #b9d098;border-radius:50%;place-items:center;width:105px;height:105px;margin-bottom:27px;display:grid;box-shadow:0 0 0 16px #c6e86b29,0 0 0 34px #c6e86b12}.success-orbit span{background:var(--green);color:#fff;border-radius:50%;place-items:center;width:62px;height:62px;font-size:25px;display:grid}.success-screen .eyebrow{margin-bottom:10px}.reference{color:var(--muted);background:#ffffffb3;border-radius:9px;margin:0 0 26px;padding:10px 14px;font-size:10px}.reference strong{color:var(--ink);margin-left:6px}@media (width>=700px){.hero{padding-left:max(24px,50% - 330px)}.form-flow{grid-template-columns:1fr 1fr}.error-banner,.photo-card{grid-column:1/-1}.submit-bar{border:1px solid #274c371f;border-bottom:0;border-radius:18px 18px 0 0;width:680px;left:50%;right:auto;transform:translate(-50%)}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important}}