/* ID: WBT-0148 / v29 / 2026-10-27 — a clear path from the first view to a completed action. */
.conversion{position:relative;min-width:0;width:min(1320px,calc(100% - 100px));max-width:none;margin:clamp(32px,5vw,72px) auto;padding:clamp(40px,5vw,68px) clamp(22px,3.4vw,48px);border:1px solid #cedbc8;border-radius:30px;background:var(--paper,#ecefe8) url('../img/paper.webp') repeat;background-size:520px;color:var(--text,#18221b);scroll-margin-top:100px}
.conversion__head,.conversion__steps,.conversion__example,.conversion__actions{position:relative;z-index:2}
.conversion__head{min-width:0;max-width:900px;margin:0 0 34px}
.conversion .eyebrow{margin:0 0 17px;font-family:var(--font-latin,system-ui,sans-serif);font-size:11px;font-weight:850;line-height:1.7;letter-spacing:.1em;color:#356b3c;overflow-wrap:anywhere}
.conversion__head h2{margin:0;color:#142b1b;font-size:clamp(32px,3.9vw,58px);font-weight:850;line-height:1.35;letter-spacing:-.035em;text-wrap:balance;overflow-wrap:anywhere}
.conversion__head>p:not(.eyebrow){max-width:750px;margin:19px 0 0;font-size:14px;font-weight:500;line-height:1.95;overflow-wrap:anywhere}
.conversion__steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;list-style:none;min-width:0;margin:0;padding:0}
.conversion__step{position:relative;display:flex;flex-direction:column;align-items:stretch;min-width:0;padding:24px 19px 23px;border:1px solid #b3caa6;border-radius:21px;background:#fbfdf8;color:#17311f;box-shadow:0 5px 18px #204b2010}
.conversion__number{order:0;display:block;margin:0 0 19px;font-family:var(--font-latin,system-ui,sans-serif);font-size:clamp(40px,3.9vw,58px);font-weight:600;font-style:oblique 8deg;line-height:1;letter-spacing:-.06em;color:#157c45}
.conversion .conversion__phase{order:1;margin:0 0 8px;color:#56724c;font-size:10px;font-weight:850;line-height:1.7;letter-spacing:.07em;overflow-wrap:anywhere}
.conversion__step h3{order:2;margin:0 0 13px;color:inherit;font-size:clamp(18px,1.55vw,23px);font-weight:850;line-height:1.5;overflow-wrap:anywhere;text-wrap:balance}
.conversion__step>p:not(.conversion__phase){order:3;margin:0;font-size:13px;font-weight:500;line-height:1.85;overflow-wrap:anywhere}
.conversion__step>small{order:4;display:block;max-width:100%;margin-top:auto;padding-top:20px;color:#4b6a43;font-size:10px;font-weight:750;line-height:1.8;overflow-wrap:anywhere}
.conversion .conversion__step.is-current{background:#157c45;border-color:#157c45;color:#fff;box-shadow:0 8px 25px #164e2820}
.conversion__step.is-current .conversion__number{color:#c1ed78}
.conversion .conversion__step.is-current .conversion__phase{color:#dcefcf}
.conversion__step.is-current>small{color:#e1f2d8}
.conversion__scope{order:5;display:inline-flex;align-items:center;align-self:flex-start;min-width:0;max-width:100%;min-height:27px;margin:15px 0 0;padding:5px 9px;border:1px solid #b9df78;border-radius:999px;background:#c5ed82;color:#173f23;font-size:10px;font-weight:800;line-height:1.6;overflow-wrap:anywhere}
.conversion__step:not(:last-child):after{content:'→';position:absolute;top:50%;right:-23px;display:grid;place-items:center;width:20px;height:24px;margin-top:-12px;color:#157c45;font-family:var(--font-latin,system-ui,sans-serif);font-size:21px;font-weight:650;line-height:1;pointer-events:none}
.conversion .conversion__example{min-width:0;margin:24px 0 0;padding:17px 20px;border-left:3px solid #70a954;border-radius:0 13px 13px 0;background:#f8fbf3;color:#365331;font-size:12px;font-weight:550;line-height:1.9;overflow-wrap:anywhere}
.conversion__actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;min-width:0;margin:25px 0 0}
.conversion__actions>a{display:inline-flex;align-items:center;justify-content:center;gap:22px;min-width:0;max-width:100%;min-height:48px;height:auto;padding:13px 23px;border:1px solid #157c45;border-radius:999px;background:#157c45;color:#fff;font:inherit;font-size:13px;font-weight:750;line-height:1.6;text-decoration:none;white-space:normal;text-align:center;overflow-wrap:anywhere;transition:background .2s,transform .2s}
.conversion__actions>a:hover{background:#0d6337;transform:translateY(-2px)}
.conversion__actions>a:nth-child(n+2){background:transparent;color:#157c45}
.conversion__actions>a:nth-child(n+2):hover{background:#dfefd0}
.conversion__actions>a [aria-hidden=true]{flex:none;font-size:20px;line-height:1}
.conversion a:focus-visible{outline:3px solid #126a3c;outline-offset:4px;box-shadow:0 0 0 3px #fff}

/* Studio remains the second step; these notes do not overlap the character or page tools. */
.studio-page .studio-live-note{position:relative;display:flex;flex-wrap:wrap;align-items:flex-start;gap:8px;min-width:0;max-width:100%;margin:0;padding:0;font-size:11px;font-weight:750;line-height:1.7;color:#234c2b;list-style:none}
.studio-live-note>span,.studio-live-note>li{display:inline-flex;align-items:center;min-width:0;max-width:100%;min-height:30px;padding:6px 10px;border:1px solid #b6ce9f;border-radius:999px;background:#eff7e3;color:#2c5c30;font-size:11px;font-weight:750;line-height:1.65;overflow-wrap:anywhere;list-style:none}
.studio-live-note>[aria-current=step]{background:#157c45;border-color:#157c45;color:#fff}
.studio-page .studio-scope-note{min-width:0;max-width:850px;margin:13px 0 28px;padding:10px 13px;border-left:3px solid #82b653;border-radius:0 10px 10px 0;background:#f6f9f0;color:#506b46;font-size:11px;font-weight:500;line-height:1.85;overflow-wrap:anywhere}
.studio-editor-panel .studio-live-hint{min-width:0;margin:0 0 21px;padding:11px 12px;border-left:3px solid #82b653;border-radius:0 10px 10px 0;background:#f0f6e7;color:#42603a;font-size:11px;font-weight:500;line-height:1.85;overflow-wrap:anywhere}

@media(min-width:901px) and (max-width:1179px){
 .conversion{width:calc(100% - 60px);padding-inline:25px}
 .conversion__steps{gap:20px}
 .conversion__step{padding:22px 15px}
 .conversion__step h3{font-size:18px}
 .conversion__step>p:not(.conversion__phase){font-size:12px}
 .conversion__step:not(:last-child):after{right:-19px;width:17px;font-size:19px}
}
@media(max-width:900px){
 .conversion{width:calc(100% - 60px);padding:40px 28px;border-radius:26px}
 .conversion__head{margin-bottom:27px}
 .conversion__head h2{font-size:clamp(30px,5vw,43px)}
 .conversion__steps{grid-template-columns:minmax(0,1fr);gap:32px}
 .conversion__step{padding:22px 21px 23px 85px;border-radius:18px}
 .conversion__number{position:absolute;left:21px;top:25px;width:44px;margin:0;font-size:43px}
 .conversion .conversion__phase{margin-bottom:5px}
 .conversion__step h3{margin-bottom:9px;font-size:21px;text-wrap:initial}
 .conversion__step>p:not(.conversion__phase){font-size:13px}
 .conversion__step>small{margin-top:0;padding-top:13px}
 .conversion__scope{margin-top:12px}
 .conversion__step:not(:last-child):after{content:'↓';top:auto;right:auto;bottom:-29px;left:50%;width:24px;height:24px;margin:0;transform:translateX(-50%);font-size:22px}
 .conversion .conversion__example{margin-top:22px;padding:15px 17px}
}
@media(max-width:599px){
 .conversion{width:calc(100% - 28px);margin-block:28px;padding:30px 17px 33px;border-radius:23px}
 .conversion .eyebrow{margin-bottom:13px;font-size:9px;letter-spacing:.06em}
 .conversion__head h2{font-size:30px;line-height:1.4}
 .conversion__head>p:not(.eyebrow){margin-top:15px;font-size:13px;line-height:1.9}
 .conversion__step{padding:21px 15px 21px 66px}
 .conversion__number{left:15px;top:25px;width:36px;font-size:36px}
 .conversion__step h3{font-size:19px;line-height:1.55}
 .conversion__step>p:not(.conversion__phase){font-size:12px}
 .conversion__step>small{font-size:10px}
 .conversion__scope{border-radius:12px;font-size:10px;padding:5px 8px}
 .conversion .conversion__example{padding:13px 14px;font-size:11px;line-height:1.85}
 .conversion__actions{flex-direction:column;align-items:stretch;gap:10px;margin-top:21px}
 .conversion__actions>a{width:100%;min-height:46px;padding:12px 15px;font-size:12px}
 .studio-page .studio-live-note{gap:7px}
 .studio-live-note>span,.studio-live-note>li{min-height:29px;padding:5px 9px;font-size:10px}
 .studio-page .studio-scope-note{margin-bottom:24px;padding:9px 11px;font-size:10px}
}
@media(prefers-reduced-motion:reduce){.conversion__actions>a{transition:none}.conversion__actions>a:hover{transform:none}}