/* The examples gallery shares the warm palette and line icons of the home catalog. */
.sst-examples { margin-top:46px; padding-top:32px; border-top:1px solid #ede4d8; scroll-margin-top:28px; color:#243340; }
.sst-examples__heading { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:24px; }
.sst-examples__eyebrow { margin:0 0 9px; color:#a34e30; font-size:11px; line-height:1.6; font-weight:750; letter-spacing:.16em; text-transform:uppercase; }
.sst-examples__heading h2 { margin:0; color:#243340; font-size:clamp(27px,3.2vw,36px); line-height:1.2; letter-spacing:-.035em; font-weight:750; }
.sst-examples__browse { display:inline-flex; align-items:center; justify-content:center; gap:13px; flex:0 0 auto; max-width:40%; min-height:44px; padding:11px 17px; border:1px solid #ecd6bf; border-radius:99px; background:#fff9ed; color:#944725; font-size:13px; line-height:1.6; font-weight:700; text-decoration:none; transition:background-color .2s,border-color .2s; }
.sst-examples__browse svg { width:18px; height:18px; flex:0 0 18px; }
.sst-examples__browse:hover { border-color:#d5ae88; background:#fff1d9; }
.sst-examples__gallery { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:17px; }
.sst-examples__card { --example-bg:#fff8ec; --example-tile:#f9e6be; --example-tone:#825d28; --example-edge:#eadfc7; display:grid; grid-template-areas:'art' 'body' 'footer'; grid-template-rows:auto 1fr auto; grid-column:span 4; position:relative; min-width:0; gap:17px; border:1px solid var(--example-edge); border-radius:23px; padding:24px; background:var(--example-bg); box-shadow:0 5px 15px #83644208; color:#243340; text-decoration:none; isolation:isolate; transition:transform .2s,border-color .2s,box-shadow .2s; }
.sst-examples__card[data-example-page="secret-admirer-message"] { --example-bg:#fff2ed; --example-tile:#f7d9cd; --example-tone:#954d47; --example-edge:#edd8cf; }
.sst-examples__card[data-example-page="funny-birthday-message"] { --example-bg:#fff8df; --example-tile:#f6dfa0; --example-tone:#85611e; --example-edge:#eadcaf; }
.sst-examples__card[data-example-page="fake-award-generator"] { --example-bg:#f1f7e9; --example-tile:#dceac8; --example-tone:#536c3c; --example-edge:#dbe5cd; }
.sst-examples__card[data-example-page="online-treasure-hunt"] { --example-bg:#eef5ee; --example-tile:#d9e8d7; --example-tone:#456950; --example-edge:#d6e2d5; }
.sst-examples__card[data-example-page="anonymous-confession-link"] { --example-bg:#f4effb; --example-tile:#e5d9f5; --example-tone:#76588e; --example-edge:#e2d7ee; }
.sst-examples__card[data-example-page="delayed-message-link"] { --example-bg:#eef5fa; --example-tile:#d7e6f2; --example-tone:#4b6b87; --example-edge:#d7e4ed; }
.sst-examples__card[data-example-page="send-encouragement-message-later"] { --example-bg:#fff7e9; --example-tile:#f5e5bf; --example-tone:#8a6632; --example-edge:#eae0c8; }
.sst-examples__card[data-example-page="wedding-reveal"] { --example-bg:#faf0f1; --example-tile:#f1dbe0; --example-tone:#90596a; --example-edge:#ecdadf; }
.sst-examples__card[data-example-page="anniversary-reveal"] { --example-bg:#fff3ec; --example-tile:#f5ddcb; --example-tone:#966142; --example-edge:#eedbcd; }
.sst-examples__card[data-example-page="hiking-trip-reveal"] { --example-bg:#f3f6e9; --example-tile:#e1e9c5; --example-tone:#63723e; --example-edge:#e1e6cf; }
.sst-examples__card[data-example-page="baby-gender-reveal"] { --example-bg:#f0f5fa; --example-tile:#dce7f3; --example-tone:#576e91; --example-edge:#dce4ed; }
.sst-examples__card:hover { transform:translateY(-3px); border-color:#c8b49a; box-shadow:0 12px 28px #83644214; }
.sst-examples__card:focus-visible,.sst-examples__browse:focus-visible { outline:3px solid #bb653c; outline-offset:4px; }
.sst-examples__art { grid-area:art; display:grid; place-items:center; position:relative; width:46px; height:46px; border:1px solid #ffffffc9; border-radius:15px; background:var(--example-tile); color:var(--example-tone); box-shadow:0 3px 8px #83644209; }
.sst-examples__icon { position:relative; z-index:1; width:27px; height:27px; }
.sst-examples__body { grid-area:body; min-width:0; }
.sst-examples__label { margin:0 0 9px; color:var(--example-tone); font-size:11px; line-height:1.5; font-weight:700; letter-spacing:.045em; }
.sst-examples__card h3 { margin:0; color:#243340; font-size:19px; line-height:1.35; font-weight:750; letter-spacing:-.025em; overflow-wrap:anywhere; }
.sst-examples__description { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; margin:11px 0 0; color:#586773; font-size:13px; line-height:1.75; }
.sst-examples__footer { grid-area:footer; display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:2px; padding-top:15px; border-top:1px solid var(--example-edge); }
.sst-examples__access { display:inline-flex; align-items:center; gap:6px; width:fit-content; max-width:100%; color:#526856; font-size:11px; line-height:1.6; font-weight:600; }
.sst-examples__access svg { width:14px; height:14px; flex:0 0 14px; }
.sst-examples__access--account { border:1px solid #e7d5a7; border-radius:99px; padding:4px 8px; background:#fff4d5; color:#735326; font-weight:700; }
.sst-examples__open { display:grid; place-items:center; width:30px; height:30px; flex:0 0 30px; border:1px solid var(--example-edge); border-radius:50%; background:#ffffff9e; color:var(--example-tone); transition:background-color .2s,transform .2s; }
.sst-examples__open svg { width:17px; height:17px; }
.sst-examples__card:hover .sst-examples__open { transform:translateX(2px); background:#fff; }
.sst-examples__card--featured { grid-column:span 6; grid-template-areas:'body art' 'footer footer'; grid-template-columns:minmax(0,1fr) 128px; grid-template-rows:1fr auto; align-items:center; gap:23px; padding:28px; }
.sst-examples__card--featured h3 { font-size:23px; line-height:1.3; }
.sst-examples__card--featured .sst-examples__description { font-size:14px; }
.sst-examples__card--featured .sst-examples__art { width:128px; height:145px; align-self:center; border:0; border-radius:45% 50% 44% 48%; background:var(--example-tile); box-shadow:none; transform:rotate(-5deg); }
.sst-examples__card--featured .sst-examples__art::before { content:''; position:absolute; inset:30px 8px; border:1px solid #ffffffed; border-radius:13px; background:#fffcf4; box-shadow:0 8px 18px #82624a19; transform:rotate(10deg); }
.sst-examples__card--featured .sst-examples__art::after { content:''; position:absolute; top:9px; right:7px; width:7px; height:7px; border-radius:50%; background:var(--example-tone); opacity:.35; box-shadow:-112px 38px 0 -1px var(--example-tone),-2px 126px 0 -1px var(--example-tone); }
.sst-examples__card--featured .sst-examples__icon { width:61px; height:61px; transform:rotate(5deg); }
.sst-examples__card--featured[data-example-page="funny-birthday-message"] .sst-examples__art { border-radius:50%; transform:rotate(5deg); }
.sst-examples__card--featured[data-example-page="funny-birthday-message"] .sst-examples__art::before { inset:16px 19px; transform:rotate(-12deg); border-radius:32px 32px 15px 15px; }
.sst-examples__card--featured[data-example-page="funny-birthday-message"] .sst-examples__icon { transform:rotate(-5deg); }
.sst-examples__demo-access { margin:15px 0 0; }
@media(max-width:960px) { .sst-examples__card { grid-column:span 6; } .sst-examples__card--featured { grid-template-columns:minmax(0,1fr) 85px; padding:24px; gap:15px; } .sst-examples__card--featured h3 { font-size:21px; } .sst-examples__card--featured .sst-examples__art { width:85px; height:108px; } .sst-examples__card--featured .sst-examples__art::before { inset:20px 5px; } .sst-examples__card--featured .sst-examples__art::after { display:none; } .sst-examples__card--featured .sst-examples__icon { width:47px; height:47px; } .sst-examples__card:last-child { grid-column:1/-1; } }
@media(max-width:620px) { .sst-examples { margin-top:35px; padding-top:25px; } .sst-examples__heading { flex-direction:column; align-items:flex-start; gap:17px; } .sst-examples__browse { max-width:100%; } .sst-examples__gallery { grid-template-columns:minmax(0,1fr); gap:14px; } .sst-examples__card,.sst-examples__card:last-child { grid-column:auto; padding:23px; } .sst-examples__card--featured { grid-template-areas:'art' 'body' 'footer'; grid-template-columns:minmax(0,1fr); grid-template-rows:auto 1fr auto; gap:17px; } .sst-examples__card--featured .sst-examples__art { width:72px; height:77px; justify-self:end; position:absolute; top:18px; right:23px; opacity:.85; } .sst-examples__card--featured .sst-examples__art::before { inset:14px 6px; } .sst-examples__card--featured .sst-examples__icon { width:36px; height:36px; } .sst-examples__card--featured .sst-examples__label { min-height:54px; max-width:calc(100% - 91px); margin-bottom:13px; } .sst-examples__card--featured h3 { font-size:22px; } }
@media(prefers-reduced-motion:reduce) { .sst-examples__card,.sst-examples__browse,.sst-examples__open { transition:none; } .sst-examples__card:hover,.sst-examples__card:hover .sst-examples__open { transform:none; } }

/* Intro, recipient samples and closing invitation use the same gallery palette. */
.sst-examples-page { padding-top:48px; padding-bottom:56px; color:#243340; }
.sst-examples-hero { display:grid; grid-template-columns:minmax(0,1fr) minmax(270px,.52fr); align-items:center; gap:50px; }
.sst-examples-hero h1 { margin:13px 0 0; max-width:740px; color:#243340; font-size:clamp(36px,4.2vw,53px); line-height:1.12; letter-spacing:-.045em; font-weight:750; overflow-wrap:break-word; }
.sst-examples-hero__lead { margin:20px 0 0; max-width:650px; color:#586773; font-size:16px; line-height:1.85; }
.sst-examples-hero__jump { display:inline-flex; align-items:center; gap:12px; min-height:44px; margin-top:15px; color:#934a2e; font-size:13px; line-height:1.65; font-weight:700; text-decoration:none; }
.sst-examples-hero__jump svg { width:17px; height:17px; flex:0 0 17px; }
.sst-examples-hero__jump:hover { text-decoration:underline; text-underline-offset:4px; }
.sst-examples-note { display:flex; align-items:flex-start; gap:14px; padding:24px; border:1px solid #e6ddc9; border-radius:23px; background:#fff9e9; box-shadow:0 5px 15px #83644208; }
.sst-examples-note__icon { display:grid; place-items:center; flex:0 0 36px; width:36px; height:36px; border:1px solid #e2dcc2; border-radius:12px; background:#f5edcc; color:#716039; }
.sst-examples-note__icon svg { width:22px; height:22px; }
.sst-examples-note h2 { margin:2px 0 9px; color:#755b35; font-size:13px; line-height:1.5; font-weight:750; }
.sst-examples-note p { margin:0; color:#6a6658; font-size:13px; line-height:1.8; }
.sst-examples-recipient { margin-top:56px; padding-top:32px; border-top:1px solid #ede4d8; scroll-margin-top:28px; }
.sst-examples-recipient__note { flex:0 0 auto; max-width:40%; padding-bottom:3px; color:#737868; font-size:13px; line-height:1.7; }
.sst-examples-recipient__list { display:grid; gap:24px; }
.sst-example { --sample-bg:#fff8df; --sample-tile:#f4e4b8; --sample-tone:#85611e; --sample-edge:#e7ddbd; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.92fr); grid-template-rows:1fr 1fr; grid-template-areas:'scene copy' 'scene actions'; min-width:0; overflow:hidden; border:1px solid #e9e1d6; border-radius:26px; background:#fffdfa; box-shadow:0 5px 17px #83644207; }
.sst-example:nth-child(even) { grid-template-columns:minmax(0,.92fr) minmax(0,1fr); grid-template-areas:'copy scene' 'actions scene'; }
.sst-example[data-example-demo="secret-message"] { --sample-bg:#fff2ed; --sample-tile:#f2dcd1; --sample-tone:#92544a; --sample-edge:#e8d9cf; }
.sst-example[data-example-demo="funny-notice"] { --sample-bg:#fff7e9; --sample-tile:#f2e3be; --sample-tone:#826436; --sample-edge:#e7dbc1; }
.sst-example[data-example-demo="mystery-box"] { --sample-bg:#fff3e9; --sample-tile:#efd9c5; --sample-tone:#8b5a3f; --sample-edge:#e8d7c8; }
.sst-example[data-example-demo="challenge"] { --sample-bg:#f4effb; --sample-tile:#e5dbf3; --sample-tone:#74548b; --sample-edge:#e0d6ec; }
.sst-example[data-example-demo="secret-voting"] { --sample-bg:#eef5fa; --sample-tile:#dce8f2; --sample-tone:#4d6c85; --sample-edge:#d8e3ec; }
.sst-example__copy { grid-area:copy; min-width:0; align-self:end; padding:34px 36px 0; }
.sst-example__label { margin:0 0 12px; color:var(--sample-tone); font-size:12px; line-height:1.6; font-weight:700; letter-spacing:.04em; }
.sst-example__copy h3 { margin:0; color:#243340; font-size:clamp(24px,2.5vw,30px); line-height:1.25; font-weight:750; letter-spacing:-.035em; overflow-wrap:anywhere; }
.sst-example__description { margin:16px 0 0; color:#586773; font-size:14px; line-height:1.85; }
.sst-example__scene { grid-area:scene; display:grid; place-items:center; position:relative; isolation:isolate; min-width:0; margin:0; padding:34px; overflow:hidden; background:var(--sample-bg); }
.sst-example__scene::before { content:''; position:absolute; width:210px; height:210px; right:-55px; top:-75px; border-radius:50%; background:var(--sample-tile); opacity:.55; }
.sst-example__scene::after { content:''; position:absolute; width:110px; height:110px; left:-45px; bottom:-48px; border:1px solid var(--sample-edge); border-radius:50%; }
.sst-example__paper { position:relative; z-index:1; width:100%; max-width:440px; min-width:0; padding:27px; border:1px solid var(--sample-edge); border-radius:19px; background:#fffefa; box-shadow:0 9px 22px #8364420d; }
.sst-example__caption { display:flex; align-items:center; justify-content:space-between; gap:16px; color:var(--sample-tone); font-size:11px; line-height:1.6; font-weight:700; text-align:right; }
.sst-example__mark { display:grid; place-items:center; flex:0 0 39px; width:39px; height:39px; border-radius:12px; background:var(--sample-tile); color:var(--sample-tone); }
.sst-example__icon { width:24px; height:24px; }
.sst-example__sample-title { margin:22px 0 13px; color:#243340; font-size:27px; line-height:1.23; letter-spacing:-.035em; font-weight:750; overflow-wrap:anywhere; }
.sst-example__sample-body { margin:0; color:#53626b; font-size:14px; line-height:1.85; overflow-wrap:anywhere; }
.sst-example__result { margin-top:24px; padding-top:17px; border-top:1px solid var(--sample-edge); }
.sst-example__result > span { display:block; color:#727368; font-size:11px; line-height:1.6; font-weight:600; }
.sst-example__result > p { margin:5px 0 0; color:var(--sample-tone); font-size:14px; line-height:1.6; font-weight:700; overflow-wrap:anywhere; }
.sst-example__actions { grid-area:actions; min-width:0; align-self:start; padding:22px 36px 34px; }
.sst-example__access { margin:0 0 14px; }
.sst-example__access .sst-examples__access { font-size:12px; }
.sst-example__access .sst-examples__access--account { padding:5px 10px; }
.sst-example__cta { display:inline-flex; align-items:center; justify-content:center; gap:18px; width:fit-content; max-width:100%; min-height:46px; padding:12px 20px; border:1px solid #bb4521; border-radius:99px; 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-example__cta svg { width:18px; height:18px; flex:0 0 18px; }
.sst-example__cta:hover { border-color:#a83919; background:#ad3d1c; }
.sst-example__cta:focus-visible,.sst-examples-hero__jump:focus-visible { outline:3px solid #bb653c; outline-offset:4px; }
.sst-example[data-example-demo="secret-message"] .sst-example__paper { border-radius:8px 23px 17px 8px; background:#fffcf5; }
.sst-example[data-example-demo="secret-message"] .sst-example__paper::after { content:''; position:absolute; top:0; right:0; width:0; height:0; border-top:25px solid #eddcce; border-left:25px solid transparent; border-radius:0 18px 0 0; }
.sst-example[data-example-demo="secret-message"] .sst-example__sample-title { font-family:Georgia,'Times New Roman',serif; font-size:30px; font-weight:500; letter-spacing:-.025em; }
.sst-example[data-example-demo="secret-message"] .sst-example__sample-body { font-family:Georgia,'Times New Roman',serif; font-size:16px; line-height:1.8; }
.sst-example[data-example-demo="funny-notice"] .sst-example__paper { border-radius:9px; }
.sst-example[data-example-demo="funny-notice"] .sst-example__caption > span:last-child { border:1px dashed #b49a67; border-radius:6px; padding:5px 9px; }
.sst-example[data-example-demo="funny-notice"] .sst-example__result > p { width:fit-content; max-width:100%; border:1px dashed #cbb990; border-radius:7px; padding:7px 10px; }
.sst-example[data-example-demo="mystery-box"] .sst-example__scene::before,.sst-example[data-example-demo="mystery-box"] .sst-example__scene::after { width:auto; height:auto; inset:40px 37px; border:1px solid var(--sample-edge); border-radius:17px; background:#f4e3d2; opacity:1; transform:rotate(-4deg); }
.sst-example[data-example-demo="mystery-box"] .sst-example__scene::after { inset:41px 34px; background:#faf0e5; transform:rotate(3deg); }
.sst-example[data-example-demo="challenge"] .sst-example__paper { border-top:3px solid #aa93c2; }
.sst-example[data-example-demo="secret-voting"] .sst-example__paper { border-left:3px solid #9db8cc; }
.sst-examples-ending { display:flex; align-items:center; justify-content:space-between; gap:36px; margin-top:40px; padding:32px; border:1px solid #e8dcc3; border-radius:25px; background:#fff8e9; }
.sst-examples-ending h2 { margin:0; max-width:680px; color:#243340; font-size:27px; line-height:1.25; letter-spacing:-.03em; font-weight:750; }
.sst-examples-ending__copy { margin:13px 0 0; max-width:680px; color:#626c68; font-size:14px; line-height:1.8; }
.sst-examples-ending .sst-example__cta { flex:0 0 auto; max-width:32%; }
@media(max-width:960px) { .sst-examples-hero { grid-template-columns:minmax(0,1fr); gap:26px; } .sst-examples-hero h1 { max-width:760px; } .sst-examples-note { max-width:660px; } .sst-example__copy { padding:27px 25px 0; } .sst-example__actions { padding:21px 25px 27px; } .sst-example__scene { padding:25px; } .sst-example__paper { padding:23px; } .sst-example__sample-title { font-size:24px; } .sst-example__copy h3 { font-size:25px; } .sst-examples-ending { padding:27px; gap:25px; } .sst-examples-ending h2 { font-size:25px; } }
@media(max-width:700px) { .sst-examples-page { padding-top:33px; padding-bottom:35px; } .sst-examples-hero h1 { font-size:38px; } .sst-examples-hero__lead { font-size:15px; line-height:1.8; } .sst-examples-note { padding:21px; } .sst-examples-recipient { margin-top:39px; padding-top:26px; } .sst-examples-recipient__note { max-width:100%; } .sst-example,.sst-example:nth-child(even) { grid-template-columns:minmax(0,1fr); grid-template-rows:auto auto auto; grid-template-areas:'copy' 'scene' 'actions'; border-radius:23px; } .sst-example__copy { padding:25px 24px 22px; } .sst-example__copy h3 { font-size:25px; } .sst-example__description { margin-top:13px; } .sst-example__scene { padding:25px 24px; } .sst-example__paper { padding:23px; } .sst-example__sample-title { font-size:26px; } .sst-example__actions { padding:21px 24px 25px; } .sst-example__cta { width:100%; } .sst-examples-ending { flex-direction:column; align-items:flex-start; gap:23px; padding:26px 24px; } .sst-examples-ending .sst-example__cta { max-width:100%; width:100%; } }
@media(max-width:380px) { .sst-examples-hero h1 { font-size:34px; } .sst-examples-note { gap:11px; padding:19px; } .sst-example__copy,.sst-example__actions { padding-left:20px; padding-right:20px; } .sst-example__scene { padding:23px 17px; } .sst-example__paper { padding:20px; } .sst-example__sample-title { font-size:24px; } .sst-example[data-example-demo="secret-message"] .sst-example__sample-title { font-size:27px; } }
@media(prefers-reduced-motion:reduce) { .sst-example__cta { transition:none; } }