/* Source content and measured layout, expressed in an independent stylesheet. */
.demo33-home{font-size:.98rem;line-height:1.6}
.home-main .container{width:86vw;max-width:calc(100% - 24px)}
.home-main :is(h1,h2){font-weight:700;letter-spacing:-.02em;margin:0}
.home-main h1{font-size:clamp(43.2px,calc(4.5vw + 4px),72px);line-height:1}
.home-main :is(.sale-banner,.feature-copy,.layers-copy,.member-section) h2{font-size:clamp(31.3344px,calc(3.15vw + 4px),48.96px);line-height:1.05;text-transform:uppercase}
.home-main .eyebrow{font-size:.85em;font-weight:500;line-height:1.6;margin:0;text-transform:uppercase;letter-spacing:normal}
.home-main .eyebrow+:is(h1,h2){padding-top:.15em}
.home-main .pill-link{height:52px;min-height:52px;padding:0 24px;gap:.5em;font-family:var(--font-display);font-size:.95em;line-height:1.6;font-weight:600;border-radius:28px}
.home-main .pill-link .pill-arrow{display:inline-flex;align-items:center;justify-content:center;flex:0 0 24px;width:24px;margin-right:-8px;font-size:1.6em}
.home-main .pill-link:hover{transform:none}
.home-main .button-row{gap:12px;flex-wrap:wrap;align-items:flex-start}
.home-main .d33-phone-break{display:none}
.home-main .hero{width:100vw;min-height:0;background-position:center bottom}
.home-main .hero::before,.home-main .layers-banner::before{display:none}
.home-main .hero-content{width:86vw;max-width:none;min-height:0;position:relative;left:10px;padding:40vh 0 8vh;align-items:flex-start}
.home-main .hero-copy{width:50%;max-width:none;padding:0 12px}
.home-main .hero-description{font-size:1.1em;font-weight:500;line-height:1.6;margin:8px 0 24px;max-width:none}
.home-main .gift-strip{height:auto;min-height:59.9583px;padding:12px;font-size:.85em;font-weight:500;text-transform:uppercase;background:#9690a214;line-height:1.6}
.home-main .gift-strip p{margin:0}
.home-main .d33-sale-section{padding:24px 0}
.home-main .sale-banner{min-height:0;margin-top:0;padding:32px 20px;background:#2e00e626;display:flex;gap:0;align-items:flex-start}
.home-main .sale-copy{width:70%;padding:0 12px}
.home-main .sale-code{font-size:14.4px;line-height:1;min-height:28px;display:inline-flex;vertical-align:middle;font-weight:500;width:max-content;align-items:center;padding:4px 16px;margin:0;background:#f7f6fe;color:#161519c7;border-radius:0}
.home-main .sale-code strong{margin-left:5px}
.home-main .sale-banner h2{max-width:none}
.home-main .sale-banner .fineprint{font-size:.9em;line-height:1.6;max-width:none;margin:1em 0}
.home-main .sale-actions{position:static;display:flex;flex-wrap:wrap;justify-content:flex-end;width:30%;padding:0 12px;gap:12px;flex-shrink:1}
.home-main .sale-actions .pill-link{height:52px;min-height:52px;padding:0 24px}
.home-main .feature-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:0;margin-bottom:0}
.home-main .feature-card{min-height:0;margin:0;padding:32px;background-position:center;background-size:cover}
.home-main .feature-card::before{display:none}
.home-main .feature-copy{position:static;max-width:none;padding-top:50vh;color:#fff}
.home-main .feature-copy .eyebrow,.home-main .feature-copy>p:not(.eyebrow){color:#ffffffbf}
.home-main .feature-copy>p:not(.eyebrow){font-size:1em;line-height:1.6;margin:8px 0 24px}
.home-main .feature-copy .pill-link{height:44px;min-height:44px;padding:0 20px}
.home-main .d33-home-spacer{height:8vh}
.home-main .layers-banner{width:100vw;min-height:0;background-position:center bottom;display:block}
.home-main .layers-copy{width:86vw;max-width:none;position:relative;left:10px;padding:32vh 0 8vh}
.home-main .layers-text{width:50%;padding:0 12px}
.home-main .layers-copy h2{max-width:none}
.home-main .layers-text>p:not(.eyebrow){margin:8px 0 24px;font-size:1em;line-height:1.6}
.home-main .products-section,.home-main .trending-section{padding:0 12px 8vh}
.home-main :is(.products-section,.trending-section) .section-heading{margin:0 0 20px}
.home-main :is(.products-section,.trending-section) .section-heading h2{font-size:22.6391px;line-height:1.2;letter-spacing:normal}
.home-main .resources-section{padding:0 0 8vh}
.home-main .resources-section .section-heading{padding:0 12px;margin:0 0 20px}
.home-main .resources-section .section-heading h2{font-size:22.6391px;line-height:1.2;letter-spacing:normal}
.home-main .resource-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;padding-inline:12px}
.home-main :is(.resource-hero,.resource-card,.resource-more){height:auto;aspect-ratio:4/5;padding:21.6px;overflow:hidden}
.home-main :is(.resource-hero,.resource-more){background-size:cover;background-position:center}
.home-main .resource-hero span{font-size:.85em;font-weight:500;line-height:1.6}
.home-main .resource-hero strong{font-size:22.6391px;line-height:1.2;padding-top:.15em}
.home-main .resource-card .resource-author{font-size:.85em;line-height:1.2;min-height:40px;padding-left:50px}
.home-main .resource-author::before{width:40px;height:40px}
.home-main .resource-card small,.home-main .resource-card p,.home-main .story-tag{font-size:.9em;line-height:1.6}
.home-main .resource-card div>strong{font-size:1.12em;line-height:1.2;font-weight:700;letter-spacing:normal;margin:4px 0 8px}
.home-main .resource-card p{margin:0 0 12px}
.home-main .resource-more strong{font-size:31.3344px;line-height:1.15}
.home-main .resource-hero i,.home-main .resource-more i{left:auto;right:21.6px;bottom:21.6px;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:#ffffff0d}
.home-main .service-strip{grid-template-columns:repeat(4,minmax(0,1fr));padding:48px 0;border-color:#8a8a9352;gap:0}
.home-main .service-strip>div{padding:0 12px;gap:16px;border-color:#8a8a9352;align-items:center}
.home-main .service-strip>div:first-child{padding-left:12px}
.home-main .service-icon{width:56px;height:56px;background:#9690a20d}
.home-main .service-icon svg{width:23.52px;height:23.52px;stroke-width:1.5}
.home-main .service-icon .demo33-source-icon{font-size:23.52px}
.home-main .service-strip p{font-size:1em;line-height:1;margin:0}
.home-main .service-strip strong{font-family:var(--font-display);font-size:1em;font-weight:600;line-height:1;margin:4px 0 8px;letter-spacing:-.02em}
.home-main .service-strip p span{font-size:.95em;line-height:1}
.home-main .member-section{background:#9690a214;padding:8vh 0 0}
.home-main .member-section>.container{width:86vw;max-width:none;position:relative;left:10px}
.home-main .member-copy{padding:0 12px}
.home-main .member-section h2{max-width:none}
.home-main .member-section p:not(.eyebrow){font-size:1em;line-height:1.6;max-width:none;margin:8px 0 24px}
.home-main .d33-member-divider{margin:32px 12px 0;border-top:1px solid #8a8a9352}
/* The four footer columns and their static source media are shared by all pages. */
.site-footer{background:#9690a214;font-size:15.68px;line-height:1.6}
.site-footer .container{width:86vw;max-width:calc(100% - 24px)}
.site-footer .footer-main{gap:24px;padding:60px 12px;grid-template-columns:repeat(4,minmax(0,1fr))}
.site-footer .footer-column h2{font-size:15.68px;font-weight:700;line-height:1.4;letter-spacing:-.02em;margin:0 0 16px}
.site-footer .footer-menu li{line-height:1.6;margin-bottom:4px}
.site-footer .footer-menu a{font-size:15.68px;color:inherit}
.site-footer .payments-title{margin:24px 0 16px}
.site-footer .payment-logos{display:flex;flex-wrap:wrap;gap:5px;margin:0}
.site-footer .payment-logos svg{width:36px;height:24px;stroke:none;fill:none;flex:none}
.site-footer .footer-signup h2{max-width:none}
.site-footer .newsletter-form{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;background:transparent;height:auto;border-radius:0;padding:0;gap:0}
.site-footer .newsletter-form>input{height:44px;background:#9690a20d;border:0;border-radius:24px 0 0 24px;color:var(--ink);padding:0 0 0 16px;font-size:14.896px;line-height:1.6}
.site-footer .newsletter-form>button{height:44px;background:#9690a20d;border-radius:0 24px 24px 0;padding:0 16px 0 8px;font-size:14.896px;color:var(--ink)}
.site-footer .newsletter-consent{display:flex;grid-column:1/-1;align-items:flex-start;gap:8px;margin-top:16px;font-size:14.112px;line-height:1.6;cursor:pointer}
.site-footer .newsletter-consent input{appearance:none;flex:0 0 16px;width:16px;height:16px;margin:4px 0 0;padding:0;border:1px solid #8a8a9352;border-radius:3px;background:transparent;display:grid;place-items:center}
.site-footer .newsletter-consent input:checked{background:var(--demo33-brand-color,#a578b5);border-color:var(--demo33-brand-color,#a578b5)}
/* Source checkbox uses a centered, rounded white tick on the primary fill. */
.site-footer .newsletter-consent input:checked::after{content:"";width:12px;height:12px;background:#fff;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M4 8l3 3 5-6'/%3E%3C/svg%3E") center/contain no-repeat}
.site-footer .newsletter-result{font-size:14.112px;line-height:1.6;grid-column:1/-1;margin:12px 0 0}
.site-footer .footer-tools{padding:24px 12px;min-height:104px}
.site-footer [data-scroll-top]{display:inline-flex;align-items:center;gap:12px;font-size:14.896px;font-weight:700}
.site-footer .d33-scroll-icon{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#9690a20d}
.site-footer .theme-switch{height:28.8px;padding:0;border-radius:16px;background:#9690a20d;position:relative}
.site-footer .theme-switch button{height:28.8px;min-width:36px;padding:0 10.4px;display:flex;align-items:center;gap:7px;font-size:14.112px;color:inherit;position:relative}
.site-footer .theme-switch button svg{width:18px;height:18px}
.site-footer .theme-switch button[aria-pressed=true]{background:var(--paper);box-shadow:-3px 0 6px #0000000d}
.site-footer .footer-legal{border:0;font-size:14.112px}
.site-footer .footer-legal>.container{padding:21.6px 12px;border-top:1px solid #8a8a9352;gap:24px}
.site-footer .footer-legal nav{display:block}
@media(max-width:1180px){.home-main .container,.site-footer .container{width:calc(100% - 24px)}.site-footer .footer-main{padding-block:5vh}.site-footer .footer-legal>.container{padding-block:12px}}
@media(max-width:768px){
 .home-main .container{width:calc(100% - 24px);max-width:none}
 .home-main h1{font-size:43.2px;line-height:1.05}
 .home-main :is(.sale-banner,.feature-copy,.layers-copy,.member-section) h2{line-height:1.15}
 .home-main .hero{width:100%;background-position:25% bottom}
 .home-main .hero-content{width:calc(100% - 24px);left:0;padding:20vh 0 6vh}
 .home-main .hero-copy{width:100%;padding:0}
 .home-main .d33-phone-break{display:block}
 .home-main .hero .button-row,.home-main .member-section .button-row{flex-direction:column;align-items:flex-start}
 .home-main .sale-banner{padding:32px 0;flex-direction:column;gap:24px}
 .home-main .sale-copy,.home-main .sale-actions{width:100%;padding:0 16px}
 .home-main .sale-actions{justify-content:flex-start;flex-direction:column;align-items:flex-start}
 .home-main .feature-grid{display:grid;grid-template-columns:1fr;gap:24px}
 .home-main .feature-card{padding:16px 32px 32px 16px}
 .home-main .feature-copy{padding-top:25vh}
 .home-main .d33-home-spacer{height:6vh}
 .home-main .layers-banner{width:100%;background-position:25% bottom}
 .home-main .layers-copy{width:calc(100% - 24px);left:0;padding:20vh 0 6vh}
 .home-main .layers-text{width:100%;padding:0}
 .home-main .products-section,.home-main .trending-section{padding:0 0 6vh}
 .home-main :is(.products-section,.trending-section,.resources-section) .section-heading h2{font-size:19.9224px;line-height:1.3}
 .home-main :is(.products-section,.trending-section) .section-heading>a{display:none}
 .home-main .sale-product-grid{grid-template-columns:1fr;gap:24px}
 .home-main .resources-section{padding-bottom:6vh}
 .home-main .resources-section .section-heading{padding:0;margin-bottom:20px}
 .home-main .resources-section .section-heading>a{display:none}
 .home-main .resource-grid{grid-template-columns:1fr;padding:0;gap:24px}
 .home-main :is(.resource-hero,.resource-card,.resource-more){display:flex;height:auto;aspect-ratio:4/5;padding:24px;flex-direction:column}
 .home-main .resource-hero strong{font-size:22.6391px}
 .home-main .resource-card{justify-content:space-between}
 .home-main .resource-card:nth-of-type(3){display:flex}
 .home-main .resource-more strong{font-size:31.3344px}
 .home-main .service-strip{padding:44px 0;grid-template-columns:1fr;gap:24px}
 .home-main .service-strip>div,.home-main .service-strip>div:first-child{padding:0;border:0}
 .home-main .member-section{padding-top:6vh}
 .home-main .member-section>.container{width:calc(100% - 24px);left:0}
 .home-main .member-copy{padding:0}
 .home-main .d33-member-divider{margin-inline:0}
 .site-footer .footer-main{grid-template-columns:1fr;gap:40px;padding-inline:0}
 .site-footer .footer-signup{grid-column:auto}
 .site-footer .footer-tools{padding-inline:0}
 .site-footer .theme-switch button span{display:none}
 .site-footer .footer-legal>.container{display:block;padding-inline:0}
 .site-footer .footer-legal nav{margin-top:12px}
}
html[data-theme=dark] :is(.home-main .member-section,.site-footer){background:#242426}
html[data-theme=dark] .site-footer :is(.newsletter-form>input,.newsletter-form>button,.theme-switch,.d33-scroll-icon){background:#ffffff0d}
/* The soft fill belongs to the rounded email controls, not the consent row. */
html[data-theme=dark] .site-footer .newsletter-form{background:transparent}
html[data-theme=dark] .site-footer .newsletter-form>input[type=email]::placeholder{color:var(--muted);opacity:1}
html[data-theme=dark] .site-footer .newsletter-consent{background:transparent;color:var(--ink)}
html[data-theme=dark] .site-footer .newsletter-consent input:not(:checked){border-color:var(--muted)}
.site-footer .newsletter-form :is(input[type=checkbox],button):focus-visible{outline:2px solid var(--ink);outline-offset:3px}
/* The email and submit button share one pill. Pointer focus follows the
 * source's soft fill; keyboard focus outlines the complete rounded control. */
.site-footer .newsletter-form{position:relative}
.site-footer .newsletter-form>input[type=email]:is(:focus,:active){outline:none;background:color-mix(in srgb,#888789 16%,transparent)}
html[data-theme=dark] .site-footer .newsletter-form>input[type=email]:is(:focus,:active){outline:none;background:color-mix(in srgb,white 10%,transparent)}
.site-footer .newsletter-form::before{content:"";position:absolute;inset:0 0 auto;height:44px;border-radius:24px;pointer-events:none;box-shadow:0 0 0 2px var(--demo33-brand-color,#a578b5);opacity:0}
.site-footer .newsletter-form:has(>input[type=email]:focus-visible)::before{opacity:1}
/* The sale section has source-defined purple fill, but inherits the source
 * dark title and body colors. Its explicitly colored coupon badge stays local. */
html[data-theme=dark] .home-main .sale-banner{color:color-mix(in srgb,white 75%,transparent)}
html[data-theme=dark] .home-main .sale-banner h2{color:#fff}

/* These two photographs remain light in either appearance. Their copy and
 * outlined controls use the photograph's ink rather than the page's dark ink. */
html[data-theme=dark] .home-main :is(.hero,.layers-banner){
 color:#171619;
 --demo33-button-ink:#171619;
 --demo33-button-neutral:rgb(136 135 137);
 --demo33-button-fill:rgb(136 135 137 / 8%);
 --demo33-button-focus:rgb(136 135 137 / 15%);
}
html[data-theme=dark] .home-main :is(.hero-copy,.layers-text) :is(h1,h2,p){color:inherit}


.home-main :is(.products-section,.trending-section,.resources-section) .section-heading h2{font-weight:600}

.home-main .sale-code-container{margin-bottom:12px}

/* The source's desktop outer container stops at 1460px. Internal cards
 * exclude its two 12px gutters; viewport artwork stays full width. */
@media(min-width:1441px){
 .home-main .container{width:calc(100% - 24px);max-width:1436px}
 .home-main :is(.products-section,.trending-section,.resources-section){width:100%;max-width:1460px}
 .home-main :is(.hero,.layers-banner){width:100%}
 .home-main :is(.hero-content,.layers-copy,.member-section>.container){width:100%;max-width:1460px;left:0}
 .site-footer .container{width:100%;max-width:1460px}
}