/* Extend the approved Workshop typography and paper surfaces. */
body[data-seo-page] #checkout #show-example .example-label{color:#fff;line-height:1.25}
/* Make the same checkout example accessible on phones as on desktop. */
@media(max-width:800px){
 body[data-seo-page][data-checkout-design="workshop"] #checkout .checkout-right{display:grid}
 body[data-seo-page][data-checkout-design="workshop"] #checkout .checkout-example-heading,
 body[data-seo-page][data-checkout-design="workshop"] #checkout #show-example{display:block}
}
/* Match /putin: one left edge and the shared responsive type scale. */
body[data-seo-page] .paper-intro h1{margin-left:0;margin-right:0;padding-right:0}
body[data-seo-page] .paper-intro>p{margin:0 0 18px;max-width:800px}
.seo-wishes-link,.seo-text-card>a{text-decoration:underline;text-underline-offset:4px}
.seo-wishes-link{color:var(--paper-accent);text-decoration-thickness:1px}
.seo-wishes-link:hover{text-decoration-thickness:2px}
body[data-seo-page] .paper-intro>p .seo-wishes-link,.seo-editor-wishes{text-decoration:none}
.paper-workshop #examples{--sheet:#e6f1ea}
/* Keep any number of examples on one desktop carousel row, like mobile. */
@media(min-width:801px){
 body[data-seo-page] .paper-examples-track{display:flex;flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:10px;scrollbar-width:none;overscroll-behavior-x:contain}
 body[data-seo-page] .paper-examples-track::-webkit-scrollbar{display:none}
 body[data-seo-page] .paper-examples-track figure{flex:0 0 calc((100% - 64px)/3);scroll-snap-align:start}
 body[data-seo-page] .example-arrow{display:grid;place-items:center;position:absolute;top:45%;width:44px;height:44px;border:1px solid #e4e1dd;border-radius:50%;background:#ffffffed;box-shadow:0 3px 9px #1112;z-index:3;cursor:pointer}
 body[data-seo-page] .example-arrow.previous{left:-16px}
 body[data-seo-page] .example-arrow.next{right:-16px}
 body[data-seo-page] .example-arrow:disabled{opacity:.35;cursor:default}
}
.paper-workshop #texts{--sheet:#e5eff8}
.paper-workshop #ideas{--sheet:#fff4df}
.paper-workshop #how{--sheet:#e6f1ea}
.seo-editor-wishes{display:block;width:max-content;max-width:100%;font-size:14px;line-height:1.5;margin:-14px 0 22px 58px}
.paper-site #examples .paper-section-heading{display:block}
.paper-site .seo-examples-subtitle{font-size:18px;color:#545961;margin-top:18px}
.paper-workshop #examples-title em{color:var(--paper-accent)}
.paper-workshop #examples-title em::after{inset:12% -6px -2px;height:auto;background:#f9c8d2;transform:rotate(-1deg);clip-path:polygon(0 5%,99% 0,100% 96%,1% 100%)}
@media(max-width:800px){.seo-editor-wishes{font-size:12px;margin-left:42px}.paper-site .seo-examples-subtitle{font-size:15px}}
.seo-section{padding-block:70px}
.seo-section h2{font-size:clamp(26px,3vw,42px);line-height:1.2;margin-bottom:26px;text-wrap:balance}
.seo-section h3{font-size:20px;line-height:1.35;margin-bottom:12px}
.seo-section p{font-size:16px;line-height:1.75;max-width:78ch}
.seo-text-grid,.seo-ideas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:28px}
.seo-text-card{background:#fffaf0;border:1px solid #dacbb5;padding:28px;box-shadow:4px 5px 0 #dfcdb64d;display:flex;flex-direction:column;min-width:0;border-radius:3px}
.seo-text-card>a{font-size:13px;margin-bottom:14px;align-self:flex-start}
.seo-text-card p{margin:0 0 24px}
.seo-text-card button{margin-top:auto;padding:12px 0;border:0;border-top:1px dashed #bfa98c;text-align:left;font:inherit;font-weight:700;color:inherit;cursor:pointer;background:transparent}
.seo-text-card button:hover{text-decoration:underline}
.seo-more{margin-top:28px}
.seo-more>summary{cursor:pointer;font-weight:700;padding:14px 0}
.seo-ideas{gap:32px 48px}
.seo-ideas article{padding-top:18px;border-top:1px dashed #bfa98c}
.seo-steps{padding-left:0;margin:30px 0}
.seo-cta{display:inline-flex;text-decoration:none;margin-top:10px}
.seo-section a:focus-visible,.seo-section button:focus-visible,.seo-more>summary:focus-visible{outline:3px solid #96562c;outline-offset:5px}
@media(max-width:800px){.seo-text-grid,.seo-ideas,.seo-steps{grid-template-columns:1fr}.seo-section{padding-block:44px}.seo-text-card{padding:22px}.seo-steps{gap:22px}.seo-cta{max-width:100%;white-space:normal}}

/* Small taped cards echo the existing paper photo frames. */
.seo-text-card{position:relative}
.seo-text-card::before{content:"";position:absolute;top:-9px;left:26px;width:66px;height:17px;background:#ecc9cfb5;transform:rotate(-4deg);clip-path:polygon(2% 0,98% 5%,100% 90%,0 100%);pointer-events:none}
.seo-text-card:nth-child(even)::before{left:auto;right:26px;background:#c8dbdbb5;transform:rotate(4deg)}
.seo-section .paper-width>h2{max-width:1000px}
.seo-decoration{background-image:url("/assets/seo-celebration-20261011/atlas.webp");position:absolute;width:180px;height:180px;z-index:0;pointer-events:none;background-repeat:no-repeat;background-size:300% 200%}
.seo-decoration-texts-left{left:0;top:180px;background-position:0 0;transform:rotate(-12deg)}
.seo-decoration-texts-right{right:0;top:35px;background-position:50% 0;transform:rotate(12deg)}
.seo-decoration-ideas-left{left:0;bottom:55px;background-position:100% 0;transform:rotate(-10deg)}
.seo-decoration-ideas-right{right:0;top:36px;background-position:0 100%;transform:rotate(12deg)}
.seo-decoration-how-left{left:0;top:100px;background-position:50% 100%;transform:rotate(-12deg)}
.seo-decoration-how-right{right:0;bottom:24px;background-position:100% 100%;transform:rotate(14deg)}
@media(min-width:1600px){.seo-decoration{width:220px;height:220px}}
@media(max-width:1180px){.seo-decoration{width:130px;height:130px}.seo-decoration-texts-left,.seo-decoration-ideas-left,.seo-decoration-how-left{left:-38px}.seo-decoration-texts-right,.seo-decoration-ideas-right,.seo-decoration-how-right{right:-38px}}
@media(max-width:800px){body[data-seo-page] .paper-intro>p{max-width:100%;font-size:14px}.seo-section .paper-width>h2{padding-right:26px}.seo-decoration{width:112px;height:112px}.seo-decoration-texts-left,.seo-decoration-ideas-left,.seo-decoration-how-left{left:-54px}.seo-decoration-texts-right,.seo-decoration-ideas-right,.seo-decoration-how-right{right:-47px}.seo-decoration-texts-right,.seo-decoration-ideas-right{top:12px}}
/* Keep ribbons beside card edges, clear of the introductory paragraph. */
.seo-decoration-texts-left{top:245px}
@media(max-width:800px){.seo-decoration-texts-left{top:auto;bottom:110px;left:-76px}.seo-decoration-ideas-left,.seo-decoration-how-left{left:-76px}}
/* Keep unbacked text columns clear; the larger illustrations peek from the margins. */
.seo-decoration-ideas-left,.seo-decoration-how-left{left:-90px;width:150px;height:150px}
.seo-decoration-how-right{right:-90px;width:150px;height:150px}
@media(max-width:1180px){.seo-decoration-ideas-left,.seo-decoration-how-left{left:-125px}.seo-decoration-how-right{right:-125px}}
@media(max-width:800px){.seo-decoration-texts-left{left:-100px}.seo-decoration-ideas-left,.seo-decoration-how-left{left:-132px}.seo-decoration-how-right{right:-132px}}

/* The example's exact words use the same editor action as the text cards. */
.seo-example-use{display:block;padding:10px 2px 2px;margin:0 auto;border:0;background:transparent;color:var(--paper-accent);font:inherit;font-size:14px;font-weight:700;text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.seo-example-use:focus-visible{outline:3px solid var(--paper-accent);outline-offset:4px}