/* Clear product guidance in the warm palette shared with Examples and the catalog. */
.sst-how { padding-top:48px; padding-bottom:56px; color:#243340; }
.sst-how__hero { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.96fr); align-items:start; gap:46px; }
.sst-how__eyebrow { margin:0 0 11px; color:#a04e32; font-size:11px; line-height:1.6; font-weight:750; letter-spacing:.15em; text-transform:uppercase; }
.sst-how__intro h1 { margin:0; color:#243340; font-size:clamp(36px,4.3vw,54px); line-height:1.12; letter-spacing:-.045em; font-weight:750; overflow-wrap:break-word; hyphens:auto; }
.sst-how__lead { margin:23px 0 0; max-width:630px; color:#536571; font-size:17px; line-height:1.85; }
.sst-how__buttons { display:flex; align-items:center; flex-wrap:wrap; gap:11px; margin-top:27px; }
.sst-how__button { display:inline-flex; align-items:center; justify-content:center; gap:16px; min-height:46px; max-width:100%; border:1px solid #bb4521; border-radius:99px; padding:12px 19px; background:#c44a24; color:#fff; font-size:13px; line-height:1.65; font-weight:700; text-align:center; text-decoration:none; transition:background-color .2s,border-color .2s; }
.sst-how__button svg { width:18px; height:18px; flex:0 0 18px; }
.sst-how__button:hover { border-color:#a83918; background:#ad3d1c; }
.sst-how__button--quiet { border-color:#e8d7c4; background:#fff9ed; color:#884729; }
.sst-how__button--quiet:hover { border-color:#d5b697; background:#fff0d9; }
.sst-how :is(a,summary):focus-visible { outline:3px solid #bb653c; outline-offset:4px; }
.sst-how__journey { position:relative; min-width:0; padding:26px; border:1px solid #e8dfd0; border-radius:26px; background:#fffaf0; box-shadow:0 7px 20px #83644208; }
.sst-how__journey h2 { margin:0; color:#34433f; font-size:21px; line-height:1.35; letter-spacing:-.025em; font-weight:700; }
.sst-how__journey-list { display:grid; position:relative; gap:11px; margin:21px 0 0; padding:0; list-style:none; }
.sst-how__journey-list::before { content:''; position:absolute; left:31px; top:20px; bottom:20px; border-left:1px dashed #c9bba6; }
.sst-how__journey-card { position:relative; display:grid; grid-template-columns:35px minmax(0,1fr); gap:12px; min-width:0; padding:14px; border:1px solid #eadbd2; border-radius:17px; background:#fff1eb; }
.sst-how__journey-card[data-how-journey="email"] { border-color:#e9dfbd; background:#fff6db; }
.sst-how__journey-card[data-how-journey="recipient"] { border-color:#d8e4d3; background:#edf5e9; }
.sst-how__journey-icon { display:grid; place-items:center; width:35px; height:35px; border:1px solid #ffffffc7; border-radius:11px; background:#f4dcd0; color:#8c5545; }
.sst-how__journey-icon > svg { width:23px; height:23px; }
.sst-how__journey-card[data-how-journey="email"] .sst-how__journey-icon { background:#f4e1aa; color:#806124; }
.sst-how__journey-card[data-how-journey="recipient"] .sst-how__journey-icon { background:#dce9ce; color:#577046; }
.sst-how__journey-label { margin:0 0 3px; color:#775b42; font-size:10px; line-height:1.5; font-weight:700; letter-spacing:.035em; }
.sst-how__journey-card h3 { margin:0; color:#2d3e40; font-size:16px; line-height:1.4; letter-spacing:-.015em; font-weight:750; overflow-wrap:anywhere; }
.sst-how__journey-copy { margin:6px 0 0; color:#5a685e; font-size:12px; line-height:1.8; }
.sst-how__journey-note { margin:16px 0 0; color:#716959; font-size:12px; line-height:1.75; }
.sst-how__section { margin-top:54px; padding-top:29px; border-top:1px solid #ede4d8; scroll-margin-top:28px; }
.sst-how__heading { margin-bottom:24px; }
.sst-how__heading h2 { margin:0; max-width:850px; color:#243340; font-size:clamp(26px,3vw,34px); line-height:1.25; letter-spacing:-.035em; font-weight:750; overflow-wrap:anywhere; }
.sst-how__ideas { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.sst-how__idea { --how-card:#fff2ed; --how-tile:#f4dbd2; --how-tone:#92554c; --how-edge:#ead8d0; display:flex; flex-direction:column; position:relative; min-width:0; padding:25px; border:1px solid var(--how-edge); border-radius:23px; background:var(--how-card); color:#243340; text-decoration:none; box-shadow:0 5px 15px #83644207; transition:transform .2s,box-shadow .2s; }
.sst-how__idea:nth-child(2) { --how-card:#fff8df; --how-tile:#f3e0aa; --how-tone:#85611e; --how-edge:#e9ddba; }
.sst-how__idea:nth-child(3) { --how-card:#eff6eb; --how-tile:#dce9cd; --how-tone:#567047; --how-edge:#dae4d1; }
.sst-how__idea:hover { transform:translateY(-3px); box-shadow:0 12px 25px #83644212; }
.sst-how__idea-art { display:grid; place-items:center; width:49px; height:49px; border:1px solid #ffffffc7; border-radius:16px; background:var(--how-tile); color:var(--how-tone); }
.sst-how__idea-art > svg { width:29px; height:29px; }
.sst-how__idea h3 { margin:19px 0 0; color:#243340; font-size:21px; line-height:1.3; letter-spacing:-.025em; font-weight:750; overflow-wrap:anywhere; }
.sst-how__idea p { margin:12px 0 0; color:#586773; font-size:14px; line-height:1.8; }
.sst-how__idea-arrow { align-self:flex-end; display:grid; place-items:center; width:29px; height:29px; margin-top:auto; padding-top:16px; box-sizing:content-box; color:var(--how-tone); }
.sst-how__idea-arrow svg { width:20px; height:20px; }
.sst-how__steps { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:15px; margin:0; padding:0; list-style:none; }
.sst-how__step { min-width:0; padding:23px; border:1px solid #eadfc5; border-radius:22px; background:#fff8e8; }
.sst-how__step:nth-child(2) { border-color:#eadad0; background:#fff2ed; }
.sst-how__step:nth-child(3) { border-color:#e1d7ed; background:#f4effb; }
.sst-how__step:nth-child(4) { border-color:#d8e5df; background:#edf5f0; }
.sst-how__number { display:grid; place-items:center; width:38px; height:38px; border:1px solid #ffffffd9; border-radius:12px; background:#ffffffb8; color:#8d5d39; font-size:12px; line-height:1; font-weight:750; font-variant-numeric:tabular-nums; }
.sst-how__step h3 { margin:18px 0 0; color:#243340; font-size:18px; line-height:1.35; letter-spacing:-.02em; font-weight:750; overflow-wrap:anywhere; }
.sst-how__step p { margin:11px 0 0; color:#586773; font-size:13px; line-height:1.85; }
.sst-how__access-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.sst-how__access { display:flex; flex-direction:column; min-width:0; padding:29px; border:1px solid #d7e4d2; border-radius:25px; background:#edf5e9; }
.sst-how__access--account { border-color:#e0d7eb; background:#f4effb; }
.sst-how__access-label { display:inline-flex; align-items:center; gap:7px; width:fit-content; max-width:100%; margin:0 0 18px; border:1px solid #c9ddbf; border-radius:99px; padding:6px 10px; background:#e2efd9; color:#47623d; font-size:12px; line-height:1.6; font-weight:700; }
.sst-how__access-label svg { width:16px; height:16px; flex:0 0 16px; }
.sst-how__access--account .sst-how__access-label { border-color:#e2cf9f; background:#fff0ca; color:#75552a; }
.sst-how__access h3 { margin:0; color:#243340; font-size:25px; line-height:1.25; letter-spacing:-.03em; font-weight:750; overflow-wrap:anywhere; }
.sst-how__access-copy { margin:15px 0 0; color:#586773; font-size:14px; line-height:1.85; }
.sst-how__categories { display:flex; flex-wrap:wrap; gap:8px; margin-top:21px; }
.sst-how__categories a { display:inline-flex; align-items:center; gap:8px; max-width:100%; min-height:39px; border:1px solid #d2e0cb; border-radius:12px; padding:8px 10px; background:#ffffffc9; color:#405b3b; font-size:12px; line-height:1.65; font-weight:650; text-decoration:none; transition:background-color .2s,border-color .2s; }
.sst-how__categories a:hover { border-color:#b8cbae; background:#fff; }
.sst-how__categories svg { width:15px; height:15px; flex:0 0 15px; }
.sst-how__access--account .sst-how__categories a { border-color:#dcd0e9; color:#715187; }
.sst-how__access--account .sst-how__categories a:hover { border-color:#bea9d2; }
.sst-how__access-note { margin:22px 0 0; padding-top:16px; border-top:1px solid #d2dfc9; color:#61705b; font-size:12px; line-height:1.8; }
.sst-how__account-link { display:inline-flex; align-items:center; gap:12px; align-self:flex-start; min-height:44px; margin-top:auto; padding-top:20px; color:#725287; font-size:13px; line-height:1.7; font-weight:750; text-decoration:underline; text-underline-offset:4px; }
.sst-how__account-link svg { width:18px; height:18px; flex:0 0 18px; }
.sst-how__recipient { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.96fr); align-items:center; gap:42px; margin-top:45px; border:1px solid #e8dec6; border-radius:25px; padding:32px; background:#fff8e9; }
.sst-how__recipient h2 { margin:0; color:#243340; font-size:29px; line-height:1.25; letter-spacing:-.035em; font-weight:750; overflow-wrap:anywhere; }
.sst-how__recipient-copy { margin:16px 0 0; color:#586773; font-size:14px; line-height:1.85; }
.sst-how__recipient ul { display:grid; gap:13px; margin:0; padding:0; list-style:none; }
.sst-how__recipient li { display:flex; align-items:flex-start; gap:10px; color:#596759; font-size:14px; line-height:1.8; }
.sst-how__recipient li svg { width:19px; height:19px; flex:0 0 19px; margin-top:4px; color:#607747; }
.sst-how__questions { display:grid; gap:10px; }
.sst-how__questions details { min-width:0; border:1px solid #e7dfd3; border-radius:17px; background:#fffdf9; }
.sst-how__questions details[open] { border-color:#e6d5b3; background:#fffaf0; }
.sst-how__questions summary { display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:60px; padding:18px 23px; color:#344340; font-size:15px; line-height:1.6; font-weight:700; cursor:pointer; list-style:none; }
.sst-how__questions summary::-webkit-details-marker { display:none; }
.sst-how__questions summary svg { width:19px; height:19px; flex:0 0 19px; color:#98613b; }
.sst-how__questions details[open] .sst-how__plus { display:none; }
.sst-how__questions details > p { margin:0; max-width:950px; padding:0 23px 21px; color:#586773; font-size:14px; line-height:1.85; }
.sst-how__closing { display:flex; align-items:center; justify-content:space-between; gap:40px; margin-top:40px; padding:32px; border:1px solid #e5d9c1; border-radius:25px; background:#fff6df; }
.sst-how__closing h2 { margin:0; color:#243340; font-size:29px; line-height:1.25; letter-spacing:-.035em; font-weight:750; }
.sst-how__closing p:not(.sst-how__eyebrow) { margin:13px 0 0; max-width:680px; color:#647064; font-size:14px; line-height:1.8; }
.sst-how__closing .sst-how__button { flex:0 0 auto; max-width:35%; }
@media(max-width:1000px) { .sst-how__hero { gap:28px; } .sst-how__journey { padding:23px; } .sst-how__intro h1 { font-size:44px; } .sst-how__ideas { gap:14px; } .sst-how__idea { padding:23px; } .sst-how__steps { grid-template-columns:repeat(2,minmax(0,1fr)); } .sst-how__access { padding:25px; } .sst-how__recipient { gap:28px; padding:28px; } }
@media(max-width:800px) { .sst-how__hero { grid-template-columns:minmax(0,1fr); gap:31px; } .sst-how__intro h1 { max-width:720px; font-size:47px; } .sst-how__journey { max-width:700px; } .sst-how__journey-copy { font-size:13px; } .sst-how__ideas { grid-template-columns:minmax(0,1fr); } .sst-how__idea { display:grid; grid-template-columns:49px minmax(0,1fr); column-gap:18px; } .sst-how__idea-art { grid-column:1; grid-row:1/3; } .sst-how__idea h3 { grid-column:2; margin-top:0; } .sst-how__idea p { grid-column:2; margin-top:9px; } .sst-how__idea-arrow { grid-column:2; padding-top:8px; } .sst-how__access-grid,.sst-how__recipient { grid-template-columns:minmax(0,1fr); } .sst-how__recipient { gap:25px; } }
@media(max-width:620px) { .sst-how { padding-top:33px; padding-bottom:36px; } .sst-how__intro h1 { font-size:39px; } .sst-how__lead { margin-top:19px; font-size:16px; line-height:1.8; } .sst-how__buttons { align-items:stretch; flex-direction:column; margin-top:23px; } .sst-how__button { width:100%; } .sst-how__journey { padding:22px 19px; border-radius:23px; } .sst-how__journey h2 { font-size:21px; } .sst-how__journey-card { padding:13px 12px; gap:10px; } .sst-how__journey-label { font-size:11px; } .sst-how__section { margin-top:39px; padding-top:25px; } .sst-how__heading { margin-bottom:21px; } .sst-how__heading h2 { font-size:28px; } .sst-how__idea { padding:22px; column-gap:14px; } .sst-how__idea h3 { font-size:20px; } .sst-how__ideas { gap:13px; } .sst-how__steps { grid-template-columns:minmax(0,1fr); gap:13px; } .sst-how__step { display:grid; grid-template-columns:38px minmax(0,1fr); gap:0 15px; padding:22px; } .sst-how__step h3 { margin:0; align-self:center; } .sst-how__step p { grid-column:2; margin-top:10px; } .sst-how__access { padding:24px; } .sst-how__access h3 { font-size:25px; } .sst-how__recipient { margin-top:33px; padding:25px; } .sst-how__recipient h2 { font-size:27px; } .sst-how__questions summary { padding:17px 20px; font-size:14px; gap:17px; } .sst-how__questions details > p { padding:0 20px 20px; } .sst-how__closing { flex-direction:column; align-items:flex-start; gap:23px; padding:26px 24px; } .sst-how__closing .sst-how__button { max-width:100%; } }
@media(max-width:380px) { .sst-how__intro h1 { font-size:35px; } .sst-how__idea { display:flex; padding:22px; } .sst-how__idea h3 { margin-top:16px; } .sst-how__idea-arrow { padding-top:12px; } .sst-how__step { padding:20px; column-gap:12px; } .sst-how__step p { grid-column:1/-1; } .sst-how__access { padding:22px; } .sst-how__categories a { gap:6px; padding:8px 9px; font-size:12px; } }
@media(prefers-reduced-motion:reduce) { .sst-how :is(a,summary) { transition:none; } .sst-how__idea:hover { transform:none; } }