.docs-main{padding-top:calc(var(--header-h) + 72px)}.docs-title{width:min(1280px,calc(100% - 48px));margin:0 auto 76px;padding-bottom:30px;border-bottom:2px solid #111827}.docs-title>span,.component-heading>span{display:inline-flex;padding:7px 14px;border-radius:99px;background:var(--pink);color:var(--accent);font:600 13px Outfit,sans-serif}.docs-title h1{font-size:48px;line-height:1.2;margin:16px 0 10px;letter-spacing:-.04em}.docs-title p{margin:0;color:#6b7280;font-size:15px}.docs-layout{position:relative;width:min(1280px,calc(100% - 48px));margin:auto}.docs-content{width:calc(100% - 110px)}.guide-section{display:grid;grid-template-columns:minmax(0,.85fr) minmax(480px,1.15fr);gap:48px;align-items:center;margin-bottom:92px;scroll-margin-top:110px}.guide-copy{min-width:0}.section-title,.component-heading{display:flex;align-items:center;gap:12px;margin-bottom:22px}.section-title span{padding:5px 11px;background:rgba(255,0,64,.06);color:var(--accent);border-radius:99px;font:600 12px Outfit,sans-serif}.section-title h2,.component-heading h2{margin:0;font-size:26px}.variant-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}.variant-tabs button{border:2px solid #e5e7eb;background:#fff;color:#6b7280;border-radius:11px;padding:8px 14px;font-size:13px;font-weight:700;cursor:pointer}.variant-tabs button.active{border-color:#111;background:#111;color:#fff}.guide-note,.component-note{padding:20px 22px;border:1px solid #d1d5db;border-radius:15px;background:#f3f4f6}.guide-note b,.component-note b{display:block;margin-bottom:9px;font-size:14px}.guide-note p,.component-note p{margin:0;color:#6b7280;font-size:13px;line-height:1.65}.tablet-preview{min-height:420px;border:2px solid #111827;border-radius:28px;background:#fff;box-shadow:0 12px 24px rgba(17,24,39,.07);padding:32px;display:flex;align-items:center;justify-content:center;text-align:center}.tablet-preview button,.landing-preview button,.complete-preview button{border:0;border-radius:13px;padding:13px 30px;background:var(--accent);color:#fff;font-weight:700}.landing-preview{gap:24px}.landing-preview.vertical{flex-direction:column}.landing-preview.horizontal{flex-direction:row}.landing-preview p,.survey-preview p,.analysis-preview p,.complete-preview p{color:#6b7280;font-size:13px}.mock-icon{width:86px;height:86px;border-radius:50%;background:var(--soft-pink);color:var(--accent);display:grid;place-items:center;font-size:34px}.dialog-demo{width:360px;padding:28px;border:2px solid #111827;border-radius:22px}.dialog-demo>div{display:grid;grid-template-columns:1fr 1fr;gap:10px}.dialog-demo button:first-child{background:#fff;color:#6b7280;border:2px solid #e5e7eb}.survey-preview{flex-direction:column}.survey-preview input{width:280px;height:48px;border:1px solid #ddd;padding:0 14px}.qr-box{width:140px;height:140px;border:2px dashed #cbd5e1;display:grid;place-items:center;color:#94a3b8}.visit-row,.choice-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;width:min(420px,100%)}.choice-grid.four{grid-template-columns:repeat(3,1fr)}.choice-grid button,.visit-row button{min-height:62px;border:2px solid #e5e7eb;border-radius:13px;background:#fff;color:#111827;padding:10px}.choice-grid button.selected,.visit-row button.selected{border-color:var(--accent);background:var(--soft-pink);color:var(--accent)}.progress-demo{display:flex;align-items:center;gap:14px;width:min(360px,100%);margin-bottom:30px}.progress-demo i{height:8px;flex:1;border-radius:99px;background:#e5e7eb;overflow:hidden}.progress-demo i span{display:block;width:38%;height:100%;background:var(--accent)}.logic-preview{flex-direction:column}.logic-node{padding:14px 24px;border:1px solid #d1d5db;border-radius:10px}.logic-line{width:1px;height:25px;background:#d1d5db}.logic-row{display:flex;gap:40px}.logic-row>div{display:flex;flex-direction:column;gap:12px}.logic-row span,.logic-row b{padding:10px 18px;border:1px solid #d1d5db;border-radius:9px;font-size:12px}.logic-row b{background:var(--soft-pink);border-color:var(--accent);color:var(--accent)}.analysis-preview,.complete-preview{flex-direction:column}.progress-ring{width:96px;height:96px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--accent) 75%,#e5e7eb 0);position:relative;font-weight:700}.progress-ring::before{content:"";position:absolute;inset:9px;border-radius:50%;background:#fff}.progress-ring>*{position:relative}.complete-preview>div{width:62px;height:62px;border-radius:16px;border:2px solid var(--accent);background:var(--soft-pink);color:var(--accent);display:grid;place-items:center;font-size:24px}.receipt-preview{background:#f9fafb}.receipt{width:240px;min-height:320px;text-align:left;padding:20px;background:#fff;border:2px solid #111827;border-radius:14px;box-shadow:0 10px 20px rgba(0,0,0,.08)}.receipt h3{margin:8px 0}.receipt dl div{display:flex;justify-content:space-between;font-size:11px}.receipt dd{font-weight:700}.receipt p{font-size:10px}.qr-mini{width:48px;height:48px;background:#eee;display:grid;place-items:center;font-size:10px;margin-top:15px}.section-nav{position:fixed;right:24px;top:50%;transform:translateY(-50%);z-index:20;width:126px;padding:17px 12px;border-radius:22px;background:rgba(255,255,255,.94);box-shadow:0 2px 10px rgba(0,0,0,.11);backdrop-filter:blur(10px)}.section-nav>strong{display:block;padding:0 10px 8px;color:#9ca3af;font:600 10px Outfit,sans-serif;letter-spacing:.12em}.section-nav nav{display:grid;gap:3px}.section-nav a{display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:12px;font-size:12px;color:#333;white-space:nowrap}.section-nav a::before{content:"";width:6px;height:6px;border-radius:50%;background:#d1d5db}.section-nav a.active{color:var(--accent);background:var(--soft-pink);font-weight:700}.section-nav a.active::before{background:var(--accent)}
@media(max-width:1100px){.guide-section{grid-template-columns:minmax(0,1fr);gap:24px}.docs-content{width:calc(100% - 96px)}.tablet-preview{width:100%;min-width:0;max-width:100%;overflow:hidden}.section-nav{right:12px;width:116px}.dialog-demo{max-width:100%}}
@media(max-width:900px){.docs-main{padding-top:154px}.docs-title,.docs-layout{width:calc(100% - 40px)}.docs-title{margin-bottom:48px}.docs-title h1{font-size:34px}.docs-title p{line-height:1.6}.docs-content{width:100%}.guide-section{margin-bottom:64px;scroll-margin-top:142px}.guide-copy,.tablet-preview{min-width:0;width:100%}.tablet-preview{min-height:320px;padding:20px;border-radius:20px}.section-nav{position:fixed;left:0;right:0;top:70px;transform:none;z-index:95;width:100%;height:52px;margin:0;overflow-x:auto;overflow-y:hidden;border-radius:0;padding:8px 12px;box-shadow:0 4px 12px rgba(0,0,0,.08);scrollbar-width:none}.section-nav::-webkit-scrollbar{display:none}.docs-layout{display:flex;flex-direction:column}.section-nav>strong{display:none}.section-nav nav{display:flex;gap:4px;width:max-content}.section-nav a{font-size:11px;padding:8px 9px}.landing-preview.horizontal{flex-direction:column}.section-title h2{font-size:22px}.logic-row{gap:12px;flex-wrap:wrap;justify-content:center}.choice-grid.four{grid-template-columns:repeat(2,1fr)}.survey-preview input{width:min(280px,100%)}.visit-row,.choice-grid{width:100%}}
.docs-main{padding-top:calc(var(--header-h) + 28px)}.docs-title{margin-bottom:58px}#collect-preview{gap:14px}#collect-preview input{margin-bottom:12px}#guide-choice .tablet-preview{height:420px;min-height:420px}#choice-preview{grid-template-columns:repeat(4,minmax(0,1fr));width:100%;max-width:540px}#choice-preview[data-count="2"]{grid-template-columns:repeat(2,minmax(0,1fr));max-width:270px}#choice-preview button{min-width:0}.progress-ring span{position:relative;z-index:1}
@media(max-width:900px){.docs-main{padding-top:138px}.docs-title{margin-bottom:38px}#guide-choice .tablet-preview{height:390px;min-height:390px}#choice-preview,#choice-preview[data-count="2"]{grid-template-columns:repeat(2,minmax(0,1fr));max-width:100%}}
.docs-content{width:100%}
@media(max-width:900px){.docs-main{padding-top:166px}}