#how{--process-ink:#242624;--process-muted:#62655f;--process-label:#747770;--process-line:#dadcd7;--process-point:#f4f5f2;--process-ring:#c8cbc3;color:var(--process-ink);font-family:Arial,Helvetica,sans-serif}
 #how[data-finish=warm]{--process-ink:#302f2b;--process-muted:#69665f;--process-label:#7a766d;--process-line:#ddd8ce;--process-point:#f3f0e9;--process-ring:#cec8bc;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
 #how h2{font-family:inherit;font-weight:700;hyphens:none;max-width:22ch;overflow-wrap:normal;text-wrap:balance;color:var(--process-ink);letter-spacing:-.03em}
 #how .eyebrow{color:var(--process-label)}
 #how .section-head .lead{color:var(--process-muted);text-wrap:pretty}
 #how .section-head .lead .wide-line-start{display:inline;white-space:normal}
 @media(min-width:681px){#how .section-head .lead .wide-line-start{display:block;white-space:nowrap}}
 #how .process-grid{display:block;border:0;margin:0;padding:0;list-style:none}
 #how .step{position:relative;border:0;margin:0;padding:0;min-width:0}
 #how .step-num{display:flex;align-items:center;gap:10px;margin:0 0 12px;font-size:12px;line-height:1.35;letter-spacing:.075em;font-weight:600;color:var(--process-label)}
 #how .point{position:relative;z-index:1;display:grid;place-items:center;flex:0 0 28px;width:28px;height:28px;border:1px solid var(--process-ring);border-radius:50%;background:var(--axis-point,var(--process-point));color:var(--process-point-text,var(--process-ink));font-size:11px;line-height:1;letter-spacing:0;font-weight:600}
 #how .step h3{font-family:inherit;font-size:20px;font-weight:600;line-height:1.25;letter-spacing:-.02em;color:var(--process-ink);hyphens:none;overflow-wrap:normal;text-wrap:balance}
 #how .phrase{display:inline-block;max-width:100%;white-space:nowrap}
 #how .step p{font-size:16px;line-height:1.55;font-weight:400;margin:10px 0 0;color:var(--process-muted);text-wrap:pretty;hyphens:none}
 @media(min-width:1041px){
 #how[data-layout=adaptive] .process-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:24px}
 #how[data-layout=adaptive] .step:not(:last-child)::after{content:'';position:absolute;left:28px;right:-24px;top:14px;height:1px;background:var(--process-line)}
 #how[data-layout=adaptive] .step-num{align-items:flex-start;flex-direction:column;gap:13px;margin-bottom:12px}
 #how[data-layout=adaptive] .step h3{max-width:18ch}
 #how[data-layout=adaptive] .phrase{display:block}
 #how[data-arrangement=inline] .step-num{position:relative;z-index:1;flex-direction:row;align-items:center;gap:10px;margin-bottom:16px}
 #how[data-arrangement=inline] .step-num>span:last-child{background:#fff;padding-right:8px}
 }
 @media(max-width:1040px){
 #how[data-layout=adaptive] .step{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.3fr);gap:22px;padding:0 0 22px 46px;align-content:start}
 #how[data-layout=adaptive] .step:not(:last-child)::before{content:'';position:absolute;left:13.5px;top:28px;bottom:0;width:1px;background:var(--process-line)}
 #how[data-layout=adaptive] .point{position:absolute;left:0;top:0}
 #how[data-layout=adaptive] .step-num{min-height:28px;margin-bottom:5px}
 #how[data-layout=adaptive] .step p{margin:3px 0 0}
 }
 #how[data-layout=vertical] .step{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.4fr);gap:30px;padding:0 0 22px 46px}
 #how[data-layout=vertical] .step:not(:last-child)::before{content:'';position:absolute;left:13.5px;top:28px;bottom:0;width:1px;background:var(--process-line)}
 #how[data-layout=vertical] .point{position:absolute;left:0;top:0}
 #how[data-layout=vertical] .step-num{min-height:28px;margin-bottom:5px}
 #how[data-layout=vertical] .step p{margin:3px 0 0;max-width:62ch}
 @media(max-width:680px){
 #how h2{font-size:28px;line-height:1.16;text-wrap:pretty}
 #how[data-layout=adaptive] .step,#how[data-layout=vertical] .step{display:block;padding:0 0 22px 44px}
 #how[data-layout=adaptive] .step p,#how[data-layout=vertical] .step p{margin:8px 0 0}
 #how .step h3{font-size:20px;line-height:1.25}
 #how .step:last-child{padding-bottom:0}
 }
 #how .step:last-child{padding-bottom:0}
 #how .point{-webkit-user-select:none;user-select:none;transform-origin:center;transition:background-color 180ms ease,transform 180ms ease}
 #how[data-points=graphite]{--process-point-hover:#2c2e2c}
 #how[data-points=taupe]{--process-point-hover:#736b5f}
 #how[data-points=sage]{--process-point-hover:#475b4d}
 #how[data-points=light]{--process-point-hover:#e9ebe8}
 #how .point::before{content:"";position:absolute;inset:-7px;z-index:-1;border-radius:50%;pointer-events:none;background:radial-gradient(circle closest-side,rgb(82 102 88 / 7%) 60%,rgb(82 102 88 / 3%) 78%,transparent 100%);opacity:0;transition:opacity 180ms ease}
 #how .step.is-reading .point{background:var(--axis-point,var(--process-point-hover,#475b4d));transform:scale(1.015)}
 #how .step.is-reading .point::before{opacity:1}
 #how .step p{transition:color 180ms ease}
 #how .step.is-reading p{color:#41483f}
 @media(min-width:681px) and (hover:hover) and (pointer:fine){
 #how .step:hover .point{background:var(--axis-point,var(--process-point-hover,#475b4d));transform:scale(1.015)}
 #how .step:hover .point::before{opacity:1}
 #how .step:hover p{color:#41483f}
 }
 @media(prefers-reduced-motion:reduce){
 #how .point,#how .point::before,#how .step p{transition:none}
 #how .step:hover .point,#how .step.is-reading .point{transform:none}
 }
 #how[data-arrangement=solid]{--process-line:#ccccca;--process-point:#ececea;--process-label:#686863}
 #how[data-arrangement=solid][data-finish=warm]{--process-line:#d1ccc4;--process-point:#eeeae2}
 #how[data-layout][data-points=graphite]{--process-point:#303230;--process-ring:#303230;--process-point-text:#fff;--process-line:#ccccca}
 #how[data-layout][data-points=taupe]{--process-point:#776f63;--process-ring:#776f63;--process-point-text:#fff;--process-line:#d1ccc4}
 #how[data-layout][data-points=sage]{--process-point:#526658;--process-ring:#526658;--process-point-text:#fff;--process-line:#cbd3cd}
 #how[data-layout][data-accent=line],#how[data-layout][data-accent=line-labels],#how[data-layout][data-accent=line-headings]{--process-line:#becac1;--process-line-focus:#8b9c90}
 #how[data-accent=line-labels] .step-num>span:last-child{color:#286446}
 #how[data-accent=line-headings] .step-num>span:last-child{color:#686868}
 #how[data-accent=line-headings] .step h3{color:#435548}
 #how[data-accent=line-headings] .eyebrow{color:#526658}
 #how[data-accent=line-headings] h2{color:#242c26}
 #how::selection,#how ::selection{background:#dfe5df;color:#27372d;text-shadow:none}
 #how[data-arrangement=solid] .point{flex-basis:30px;width:30px;height:30px;border:0;font-size:12px;font-weight:700}
 @media(min-width:1041px){
 #how[data-arrangement=solid] .step:not(:last-child)::after{left:30px;top:14.5px;height:1px}
 #how[data-arrangement=solid] .step-num{flex-direction:column;align-items:flex-start;gap:10px;margin-bottom:10px}
 }
 @media(max-width:1040px){
 #how[data-arrangement=solid] .step:not(:last-child)::before{left:14.5px;top:30px;width:1px}
 #how[data-arrangement=solid] .step-num{min-height:30px}
 }
 @media(min-width:681px) and (max-width:1040px){
 #how[data-layout=adaptive] .step{grid-template-columns:minmax(0,.82fr) minmax(0,1.43fr);column-gap:28px;row-gap:5px;padding-bottom:14px}
 #how[data-layout=adaptive] .step-heading{display:contents}
 #how[data-layout=adaptive] .step-num{grid-column:1 / -1;grid-row:1;margin:0}
 #how[data-layout=adaptive] .step h3{grid-column:1;grid-row:2;align-self:start}
 #how[data-layout=adaptive] .step p{grid-column:2;grid-row:2;margin:0;align-self:start;max-width:48ch}
 #how[data-layout=adaptive] .step:last-child{padding-bottom:0}
 }
 #how[data-layout] .step:not(:last-child)::before,#how[data-layout] .step:not(:last-child)::after{background:var(--axis-segment,var(--process-line))}