body{display:flex;min-height:100vh;overflow-x:hidden;flex-direction:column}main{min-width:0;flex:1}.sop-hero{padding:64px 0 38px}.hero-layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;align-items:center;gap:75px}.hero-copy{max-width:790px}.sop-hero .eyebrow{padding:0;border:0;box-shadow:none;background:transparent;color:#57546f;font-size:.76rem;font-weight:850;letter-spacing:.12em;text-transform:uppercase}.sop-hero h1{max-width:820px;margin:18px 0 18px;font-size:clamp(2.8rem,6.4vw,5rem)}.hero-copy>p{max-width:700px;margin:0;color:var(--muted);font-size:1.06rem;line-height:1.72}.hero-pills{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}.hero-pills span{display:inline-flex;align-items:center;gap:7px;padding:8px 11px;border:1px solid var(--border);border-radius:999px;color:#55586f;background:rgba(255,255,255,.7);font-size:.73rem;font-weight:800}.hero-pills i{display:grid;width:18px;height:18px;place-items:center;border-radius:50%;color:#087b6c;background:rgba(0,194,168,.11);font-size:.66rem;font-style:normal}.hero-visual{position:relative;padding:26px;border:1px solid rgba(108,92,231,.16);border-radius:27px;background:linear-gradient(145deg,rgba(255,255,255,.94),rgba(240,237,255,.9));box-shadow:0 24px 65px rgba(55,47,126,.15);transform:rotate(2deg)}.hero-visual:before{position:absolute;top:-13px;right:28px;width:46px;height:26px;border-radius:8px;background:rgba(0,194,168,.17);content:"";transform:rotate(7deg)}.visual-label{margin-bottom:19px;font-size:.88rem;font-weight:900}.visual-step{display:flex;align-items:center;gap:11px;margin:11px 0}.visual-step span{display:grid;width:26px;height:26px;place-items:center;border:1px solid var(--border);border-radius:8px;color:#85879a;background:#fff;font-size:.68rem;font-weight:900}.visual-step i{display:block;width:68%;height:7px;border-radius:999px;background:#deddeb}.visual-step:nth-child(3) i{width:82%}.visual-step:nth-child(4) i{width:57%}.visual-step.done span{border-color:transparent;color:#fff;background:var(--accent)}.visual-step.done i{background:#c7f0e9}.visual-step.active span{border-color:rgba(108,92,231,.35);color:var(--primary);background:#eeeaff}.visual-progress{padding-top:14px;margin-top:17px;border-top:1px solid var(--border)}.visual-progress b{display:block;width:50%;height:5px;border-radius:999px;background:linear-gradient(90deg,var(--primary),var(--accent))}.visual-progress span{display:block;margin-top:8px;color:var(--muted);font-size:.64rem;font-weight:800}.builder-section{position:relative;padding:18px 0 80px}.app-shell{display:grid;min-height:720px;grid-template-columns:310px minmax(0,1fr);overflow:hidden;border:1px solid rgba(108,92,231,.16);border-radius:29px;background:rgba(255,255,255,.78);box-shadow:0 30px 85px rgba(55,47,126,.14);backdrop-filter:blur(16px)}.sop-library{display:flex;min-width:0;flex-direction:column;padding:25px 19px;border-right:1px solid var(--border);background:linear-gradient(180deg,rgba(245,243,255,.82),rgba(249,250,255,.55))}.library-top,.editor-toolbar,.steps-heading,.try-head{display:flex;align-items:center;justify-content:space-between;gap:16px}.step-label{display:block;margin-bottom:6px;color:var(--primary);font-size:.66rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase}.library-top h2,.steps-heading h2,.try-head h2{margin:0;letter-spacing:-.035em}.library-top h2{font-size:1.35rem}.square-action{display:grid;width:40px;height:40px;place-items:center;border:0;border-radius:12px;color:#fff;background:var(--primary);box-shadow:0 10px 23px rgba(108,92,231,.27);font-size:1.4rem}.square-action:hover{transform:translateY(-2px)}.search-box{display:flex;align-items:center;gap:8px;padding:0 12px;margin:19px 0 14px;border:1px solid var(--border);border-radius:12px;background:#fff}.search-box:focus-within{border-color:var(--primary);box-shadow:0 0 0 4px rgba(108,92,231,.08)}.search-box svg{width:18px;color:#9395a7}.search-box input{width:100%;height:42px;border:0;outline:0;background:transparent;font-size:.78rem}.sop-list{display:grid;gap:8px;max-height:490px;overflow-y:auto}.sop-list-item{display:grid;width:100%;grid-template-columns:36px minmax(0,1fr);gap:10px;padding:11px;border:1px solid transparent;border-radius:13px;color:var(--text);background:transparent;text-align:left}.sop-list-item:hover{background:rgba(255,255,255,.8)}.sop-list-item.active{border-color:rgba(108,92,231,.16);background:#fff;box-shadow:0 9px 24px rgba(55,47,126,.08)}.list-progress{position:relative;display:grid;width:36px;height:36px;place-items:center;border-radius:50%;background:conic-gradient(var(--accent) var(--list-progress),#e8e7f0 0)}.list-progress:after{position:absolute;inset:4px;border-radius:50%;background:#fff;content:""}.list-progress span{position:relative;z-index:1;color:#5d6078;font-size:.55rem;font-weight:900}.sop-list-copy{min-width:0}.sop-list-copy strong,.sop-list-copy span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sop-list-copy strong{font-size:.78rem}.sop-list-copy span{margin-top:4px;color:var(--muted);font-size:.65rem}.library-empty{display:flex;align-items:center;flex-direction:column;padding:34px 12px;color:var(--muted);text-align:center}.library-empty.hidden{display:none}.library-empty>span{display:grid;width:43px;height:43px;place-items:center;border-radius:13px;color:var(--primary);background:#eeeaff}.library-empty strong{margin-top:13px;color:var(--text);font-size:.8rem}.library-empty p{margin:6px 0 0;font-size:.7rem;line-height:1.5}.storage-note{display:flex;align-items:center;gap:7px;margin:auto 0 12px;color:#6b6e83;font-size:.65rem;font-weight:750}.save-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px rgba(0,194,168,.1)}.storage-note.saving .save-dot{animation:pulse 1s infinite}.storage-note.error .save-dot{background:#d85f5f}.library-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.library-actions button,.toolbar-actions button,.run-summary button,.template-row button,.add-step-row button,.secondary-action{min-height:38px;padding:0 11px;border:1px solid var(--border);border-radius:10px;color:var(--primary);background:#fff;font-size:.69rem;font-weight:850;transition:.2s}.library-actions button:hover,.toolbar-actions button:hover,.run-summary button:hover,.template-row button:hover,.add-step-row button:hover{transform:translateY(-1px);background:#f5f3ff}.sop-workspace{position:relative;min-width:0;padding:34px}.workspace-empty{display:flex;min-height:650px;align-items:center;justify-content:center;flex-direction:column;text-align:center}.workspace-empty[hidden],.workspace-editor[hidden]{display:none}.empty-orbit{position:relative;display:grid;width:110px;height:110px;place-items:center;margin-bottom:30px;border:1px solid rgba(108,92,231,.15);border-radius:34px;color:#fff;background:linear-gradient(145deg,#f5f2ff,#fff);transform:rotate(-3deg)}.empty-orbit span{display:grid;width:54px;height:54px;place-items:center;border-radius:18px;background:linear-gradient(135deg,var(--primary),#8c7bef);box-shadow:0 14px 30px rgba(108,92,231,.28);font-size:1.45rem}.empty-orbit i{position:absolute;width:9px;height:9px;border-radius:50%;background:var(--accent)}.empty-orbit i:nth-child(2){top:12px;right:18px}.empty-orbit i:nth-child(3){right:10px;bottom:20px;width:6px;height:6px}.empty-orbit i:nth-child(4){bottom:14px;left:18px;width:7px;height:7px;background:#9b67f0}.workspace-empty h2{max-width:560px;margin:0;font-size:clamp(2rem,4vw,3.1rem);letter-spacing:-.05em}.workspace-empty>p{max-width:535px;margin:14px auto 25px;color:var(--muted);font-size:.9rem;line-height:1.7}.primary-action{min-height:48px;padding:0 19px;border:0;border-radius:13px;color:#fff;background:linear-gradient(135deg,var(--primary),#8a79f0);box-shadow:0 12px 28px rgba(108,92,231,.27);font-weight:850}.primary-action:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(108,92,231,.34)}.template-row{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:17px}.template-row button{color:#575a72;background:rgba(255,255,255,.72)}.workspace-editor{max-width:790px;margin:auto}.editor-toolbar{padding-bottom:20px;border-bottom:1px solid var(--border)}.status-chip{display:inline-flex;align-items:center;gap:7px;color:var(--muted);font-size:.67rem}.status-chip span{width:7px;height:7px;border-radius:50%;background:var(--accent)}.toolbar-actions{display:flex;flex-wrap:wrap;gap:7px}.toolbar-actions .more-button{color:#a24747}.title-fields{padding:28px 0}.title-fields>label{display:block;margin-bottom:7px;color:var(--muted);font-size:.67rem;font-weight:850;text-transform:uppercase;letter-spacing:.08em}.title-input{width:100%;padding:0 0 8px;border:0;border-bottom:2px solid transparent;outline:0;color:var(--text);background:transparent;font-size:clamp(1.75rem,4vw,2.65rem);font-weight:900;letter-spacing:-.045em}.title-input:focus{border-bottom-color:rgba(108,92,231,.25)}.title-fields textarea{width:100%;min-height:60px;padding:8px 0;border:0;outline:0;resize:vertical;color:var(--muted);background:transparent;font-size:.84rem;line-height:1.6}.meta-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:10px}.meta-row label{display:grid;gap:6px}.meta-row span{color:var(--muted);font-size:.65rem;font-weight:800}.meta-row input,.meta-row select{width:100%;height:42px;padding:0 11px;border:1px solid var(--border);border-radius:11px;outline:0;color:#4f5269;background:#fff;font-size:.75rem}.meta-row input:focus,.meta-row select:focus{border-color:var(--primary);box-shadow:0 0 0 4px rgba(108,92,231,.08)}.run-summary{display:grid;grid-template-columns:70px minmax(0,1fr) auto;align-items:center;gap:17px;padding:18px;border:1px solid rgba(108,92,231,.14);border-radius:19px;background:linear-gradient(135deg,rgba(244,242,255,.9),rgba(241,253,250,.82))}.progress-ring{position:relative;display:grid;width:66px;height:66px;place-items:center;border-radius:50%;background:conic-gradient(var(--accent) var(--progress),rgba(108,92,231,.11) 0)}.progress-ring:before{position:absolute;inset:6px;border-radius:50%;background:#fff;content:""}.progress-ring strong{position:relative;z-index:1;font-size:.82rem}.run-summary h3{margin:0 0 4px;font-size:1rem}.run-summary p{margin:0;color:var(--muted);font-size:.7rem}.steps-heading{margin:30px 0 13px}.steps-heading h2{font-size:1.35rem}.steps-heading>span{padding:6px 9px;border-radius:999px;color:var(--muted);background:#f1f0f7;font-size:.65rem;font-weight:800}.steps-list{display:grid;gap:9px;padding:0;margin:0;list-style:none;counter-reset:step}.step-item{display:grid;min-width:0;grid-template-columns:42px minmax(0,1fr) auto;align-items:start;gap:10px;padding:12px;border:1px solid var(--border);border-radius:15px;background:#fff;transition:.2s}.step-item:hover{border-color:rgba(108,92,231,.2);box-shadow:0 9px 26px rgba(55,47,126,.07)}.step-item.completed{border-color:rgba(0,194,168,.16);background:#f9fffd}.step-check{position:relative;width:38px;height:38px;border:1px solid var(--border);border-radius:11px;background:#f8f8fc}.step-check:before{color:#9698aa;font-size:.68rem;font-weight:900;counter-increment:step;content:counter(step)}.step-check:after{position:absolute;content:"✓";opacity:0;color:#fff;font-size:1rem;font-weight:900}.step-item.completed .step-check{border-color:transparent;background:var(--accent)}.step-item.completed .step-check:before{opacity:0}.step-item.completed .step-check:after{opacity:1}.step-content{min-width:0}.step-text{width:100%;padding:5px 4px;border:0;border-bottom:1px solid transparent;outline:0;color:#36384d;background:transparent;font-size:.82rem;font-weight:760}.step-text:focus{border-color:rgba(108,92,231,.3)}.step-item.completed .step-text{text-decoration:line-through;color:#85879a}.step-note{width:100%;padding:4px;border:0;outline:0;color:var(--muted);background:transparent;font-size:.69rem}.step-note::placeholder{color:#b1b2bf}.step-actions{display:flex;gap:3px}.step-actions button{display:grid;width:29px;height:29px;place-items:center;padding:0;border:0;border-radius:8px;color:#77798e;background:transparent;font-size:.7rem}.step-actions button:hover{color:var(--primary);background:#f1efff}.step-actions button[data-action=remove]:hover{color:#b24747;background:#fff0f0}.add-step-row{display:grid;grid-template-columns:28px minmax(0,1fr) auto;align-items:center;gap:7px;padding:9px 9px 9px 14px;margin-top:11px;border:1px dashed rgba(108,92,231,.27);border-radius:14px;background:rgba(250,249,255,.72)}.add-step-row>span{color:var(--primary);font-size:1.1rem}.add-step-row input{width:100%;height:38px;border:0;outline:0;background:transparent;font-size:.78rem}.add-step-row button{border:0;color:#fff;background:var(--primary)}.keyboard-tip{margin-top:12px;color:#9b9cad;font-size:.61rem;text-align:center}.keyboard-tip kbd{padding:2px 5px;border:1px solid #dedee8;border-radius:5px;color:#686a7e;background:#fff;font:inherit;font-weight:850}.keyboard-tip span{margin:0 6px}.celebration{position:fixed;inset:0;z-index:90;overflow:hidden;pointer-events:none}.confetti{position:absolute;top:-20px;width:9px;height:15px;border-radius:3px;background:var(--confetti);animation:confettiFall 1.8s cubic-bezier(.18,.74,.33,1) forwards;transform:translateX(var(--drift)) rotate(var(--spin))}.seo-section{padding:78px 0;border-block:1px solid rgba(31,34,62,.06);background:rgba(255,255,255,.42)}.seo-intro{max-width:810px}.seo-intro h2{margin:0 0 13px;font-size:clamp(1.85rem,4vw,2.7rem);letter-spacing:-.045em}.seo-intro p,.benefit-card p,.use-cases p,.faq-list p{color:var(--muted);line-height:1.72}.benefit-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;margin-top:30px}.benefit-card{min-width:0;padding:23px;border:1px solid var(--border);border-radius:19px;background:rgba(255,255,255,.78)}.benefit-card>span{display:inline-flex;margin-bottom:25px;color:var(--primary);font-size:.7rem;font-weight:900;letter-spacing:.1em}.benefit-card h3{margin:0 0 8px;font-size:1rem}.benefit-card p{margin:0;font-size:.83rem}.use-cases{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:65px;align-items:start;margin-top:70px;padding:35px;border:1px solid var(--border);border-radius:25px;background:linear-gradient(145deg,#fff,#f5f2ff)}.use-cases h2{margin:0;font-size:clamp(1.55rem,3vw,2.25rem);letter-spacing:-.04em}.use-cases>div p{font-size:.82rem}.use-cases ul{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:0;margin:0;list-style:none}.use-cases li{display:grid;grid-template-columns:29px minmax(0,1fr);gap:9px}.use-cases li>span{display:grid;width:27px;height:27px;place-items:center;border-radius:8px;color:#fff;background:var(--accent);font-size:.65rem;font-weight:900}.use-cases strong{font-size:.82rem}.use-cases li p{margin:3px 0 0;font-size:.7rem}.faq-list{max-width:850px;margin-top:68px}.faq-list h2{margin:0 0 15px;font-size:1.55rem;letter-spacing:-.03em}.faq-list details{padding:17px 0;border-bottom:1px solid var(--border)}.faq-list summary{cursor:pointer;font-size:.9rem;font-weight:850}.faq-list p{margin:10px 0 0;font-size:.82rem}.try-section{padding:76px 0}.try-head{align-items:end;margin-bottom:20px}.try-head h2{font-size:1.65rem}.try-head p{margin:6px 0 0;color:var(--muted);font-size:.86rem}.secondary-action{display:inline-flex;min-height:44px;align-items:center;justify-content:center;padding:0 15px}.try-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.try-card{display:grid;min-width:0;grid-template-columns:46px minmax(0,1fr) auto;align-items:center;gap:13px;padding:18px;border:1px solid var(--border);border-radius:17px;background:rgba(255,255,255,.78);transition:.2s}.try-card:hover{transform:translateY(-3px);background:#fff;box-shadow:0 14px 34px rgba(53,49,110,.09)}.try-icon{display:grid;width:46px;height:46px;place-items:center;border-radius:13px;color:var(--primary);background:#f0edff;font-weight:900}.try-card strong,.try-card span span{display:block}.try-card strong{font-size:.88rem}.try-card span span{margin-top:4px;color:var(--muted);font-size:.7rem;line-height:1.4}.try-card b{color:var(--primary)}.toast{position:fixed;right:22px;bottom:22px;z-index:100;max-width:min(360px,calc(100% - 40px));padding:13px 17px;border-radius:13px;color:#fff;background:#292a43;box-shadow:0 15px 40px rgba(31,34,62,.28);opacity:0;transform:translateY(14px);pointer-events:none;transition:.25s}.toast.show{opacity:1;transform:none}@keyframes pulse{50%{transform:scale(1.6);opacity:.55}}@keyframes confettiFall{0%{opacity:1}100%{top:105vh;opacity:.4;transform:translateX(calc(var(--drift) * 2)) rotate(calc(var(--spin) + 520deg))}}@media(max-width:980px){.hero-layout{grid-template-columns:minmax(0,1fr);gap:30px}.hero-visual{display:none}.app-shell{grid-template-columns:255px minmax(0,1fr)}.sop-workspace{padding:27px}}@media(max-width:780px){.app-shell{grid-template-columns:minmax(0,1fr)}.sop-library{border-right:0;border-bottom:1px solid var(--border)}.sop-list{grid-template-columns:repeat(2,minmax(0,1fr));max-height:240px}.storage-note{margin-top:18px}.workspace-empty{min-height:530px}.use-cases{grid-template-columns:minmax(0,1fr);gap:28px}.benefit-grid,.try-grid{grid-template-columns:minmax(0,1fr)}.seo-section,.try-section{padding:58px 0}}@media(max-width:560px){.sop-hero{padding:44px 0 26px}.app-shell{border-radius:22px}.sop-workspace{padding:21px 15px}.sop-list{grid-template-columns:minmax(0,1fr)}.editor-toolbar{align-items:flex-start;flex-direction:column}.toolbar-actions{width:100%}.toolbar-actions button{flex:1}.meta-row{grid-template-columns:minmax(0,1fr)}.run-summary{grid-template-columns:62px minmax(0,1fr)}.run-summary button{grid-column:1/-1}.step-item{grid-template-columns:38px minmax(0,1fr)}.step-actions{grid-column:2}.add-step-row{grid-template-columns:22px minmax(0,1fr)}.add-step-row button{grid-column:2;width:100%}.use-cases ul{grid-template-columns:minmax(0,1fr)}.try-head{align-items:flex-start;flex-direction:column}.secondary-action{width:100%}.sop-hero h1{font-size:clamp(2.45rem,14vw,3.45rem)}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}