/* A quiet product composition with the headline and device sharing the stage. */
.how-section{padding-block:76px 84px;margin-top:48px;background:var(--canvas)}
.how-section .workflow{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);grid-template-areas:"title visual" "controls visual";grid-template-rows:1fr 1fr;align-items:center;column-gap:104px;row-gap:42px;max-width:1000px;margin-inline:auto}
.how-section .workflow>.section-heading{grid-area:title;align-self:end;margin:0;max-width:580px;text-align:start;font-size:64px;line-height:1.2;letter-spacing:-.045em}
.how-section .section-heading>span{display:block}
.how-section .workflow-visual{grid-area:visual;position:relative;top:auto;height:auto;margin:0;padding:0;z-index:auto;pointer-events:auto;background:transparent}
.how-section .workflow-device.workflow-phone{width:238px;filter:drop-shadow(0 20px 22px rgb(29 29 31 / 9%))}
.how-section .workflow-phone .phone-bezel{z-index:2}
.how-section .workflow-phone .phone-screen{left:5%;top:2.2%;width:90%;height:95.6%;border-radius:14%/6.45%;background:transparent}
.how-section .workflow-phone .phone-screen::after{display:none}
.how-section .phone-screen>video{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.workflow-video-toggle{position:absolute;right:0;bottom:4px;display:none;place-items:center;width:36px;height:36px;padding:0;border:1px solid var(--line);border-radius:50%;background:rgba(255,255,255,.9);color:var(--muted)}
.workflow-video-toggle::before{content:"";width:9px;height:11px;border-inline:3px solid currentColor}
.workflow-video-toggle[aria-pressed=true]::before{width:0;height:0;margin-left:2px;border:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-left:9px solid currentColor}
.workflow-video-toggle[hidden]{display:none}
.how-section .workflow-controls{grid-area:controls;align-self:start;min-width:0}
.how-section .workflow-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;padding:0;min-width:0}
.how-section .workflow-step{display:block;position:relative;width:100%;min-height:48px;scroll-margin-top:0;padding:0 0 18px;border:0;border-bottom:1px solid #d8d8dd;border-radius:0;background:none;box-shadow:none;color:#77777d;text-align:start;transition:color .25s}
.how-section .workflow-step::after{content:"";position:absolute;inset-inline:0;bottom:-1px;height:2px;background:var(--ink);transform:scaleX(0);transform-origin:0 50%;transition:transform .3s var(--ease)}
.how-section .workflow-step.is-active{color:var(--ink)}
.how-section .workflow-step.is-active::after{transform:scaleX(1)}
.how-section .workflow-step:hover{color:var(--ink)}
.how-section .workflow-step-copy,.how-section .workflow-step-title{display:block}
.how-section .workflow-step-title{font-size:16px;font-weight:500;line-height:1.5;letter-spacing:-.015em}
.how-section .workflow-step-description{display:none}
.how-section .workflow-caption{margin:21px 0 0;min-height:3.4em;max-width:31em;font-size:16px;line-height:1.7;color:var(--muted);text-wrap:pretty}
[dir="rtl"] .how-section .workflow-step::after{transform-origin:100% 50%}
@media(max-width:1100px){.how-section .workflow{column-gap:64px}.how-section .workflow>.section-heading{font-size:56px}.how-section .workflow-device.workflow-phone{width:224px}.how-section .workflow-steps{gap:18px}.how-section .workflow-step-title{font-size:15px}}
@media(max-width:959px){.how-section .workflow{column-gap:44px}.how-section .workflow>.section-heading{font-size:49px}.how-section .workflow-device.workflow-phone{width:210px}.how-section .workflow-steps{gap:14px}.how-section .workflow-step-title{font-size:14px}.how-section .workflow-caption{font-size:15px}}
@media(max-width:809px){.how-section{padding-block:58px 56px;margin-top:24px}.how-section .workflow{grid-template-columns:1fr;grid-template-rows:auto;grid-template-areas:"title" "visual" "controls";gap:34px;max-width:480px}.how-section .workflow>.section-heading{justify-self:center;text-align:center;font-size:44px;max-width:100%}.how-section .workflow-device.workflow-phone{width:190px}.how-section .workflow-steps{gap:22px}.how-section .workflow-step{text-align:center;padding-bottom:14px;min-height:44px}.how-section .workflow-step-title{font-size:15px}.how-section .workflow-caption{margin-top:18px;max-width:none;text-align:center;min-height:3.4em}}
@media(max-width:380px){.how-section .workflow>.section-heading{font-size:39px}.how-section .workflow-steps{gap:14px}.how-section .workflow-step-title{font-size:14px}.how-section .workflow-caption{font-size:14px}}
@media(prefers-reduced-motion:reduce){.how-section .workflow-step,.how-section .workflow-step::after,.how-section .workflow-screen{transition:none}}