:root{
--paper:#faf7ef;
--ink:#243c36;
--muted:#52645c;
--coral:#bd533e;
--coral-dark:#973d2d;
--sage:#e7eade;
--line:#d5dacd;
--serif:Georgia,'Times New Roman',serif;
--sans:'Segoe UI',Arial,sans-serif}
*{
box-sizing:border-box}
html{
scroll-behavior:smooth;
scroll-padding-top:24px}
body{
margin:0;
background:var(--paper);
color:var(--ink);
font-family:var(--sans);
font-size:16px;
line-height:1.65;
-webkit-font-smoothing:antialiased}
a{
color:inherit;
text-decoration:none}
button,summary{
font:inherit}
button{
cursor:pointer}
button:disabled{
cursor:not-allowed}
h1,h2,h3,p,figure{
margin:0}
h1,h2{
font-family:var(--serif);
font-weight:400;
letter-spacing:-.055em;
line-height:1.07}
h1{
font-size:clamp(3.6rem,6.5vw,6.2rem)}
h2{
font-size:clamp(2.5rem,4.4vw,4.15rem)}
h3{
font-size:1.16rem;
line-height:1.4;
font-weight:600;
letter-spacing:-.02em}
em{
font-weight:400;
color:var(--coral)}
svg{
display:block;
width:100%;
height:auto}
::selection{
background:#e4c8a5}
a:focus-visible,button:focus-visible,summary:focus-visible{
outline:3px solid var(--coral);
outline-offset:6px;
border-radius:4px}
.container{
width:min(1240px,calc(100% - 96px));
margin-inline:auto}
.section-pad{
padding-block:112px}
.eyebrow{
text-transform:uppercase;
font-size:.68rem;
letter-spacing:.18em;
font-weight:650;
line-height:1.7;
margin-bottom:22px}
.body-copy,.section-description{
color:var(--muted);
font-size:1rem;
max-width:510px}
.section-description{
margin-top:25px}
.body-copy{
margin-top:21px}
.skip-link{
position:absolute;
left:20px;
top:-100px;
z-index:10;
background:var(--ink);
color:white;
padding:12px 20px}
.skip-link:focus{
top:12px}
.site-header{
border-bottom:1px solid rgba(36,60,54,.1)}
.header-inner{
min-height:100px;
display:flex;
align-items:center;
justify-content:space-between;
gap:30px}
.wordmark{
display:inline-flex;
align-items:center;
gap:8px;
font-size:1.42rem;
font-weight:750;
letter-spacing:.035em;
line-height:1}
.brand-spark{
font-size:2.15rem;
color:var(--coral);
font-weight:400}
.brand-dot{
color:var(--coral);
margin-left:-6px}
.header-inner nav{
display:flex;
gap:34px;
font-size:.78rem}
.header-inner nav a,.footer-top nav a{
padding-block:12px}
.header-inner nav a:hover,.footer-top nav a:hover{
color:var(--coral)}
.header-action{
font-size:.75rem;
border-bottom:1px solid var(--ink);
padding-block:10px;
display:flex;
gap:18px}
.hero{
display:grid;
grid-template-columns:1fr 1fr;
gap:58px;
align-items:center;
padding-block:76px 72px}
.hero-copy .eyebrow{
display:flex;
align-items:center;
gap:11px}
.tiny-star{
font-size:1.1rem;
color:var(--coral)}
.hero-description{
max-width:405px;
color:var(--muted);
font-size:1.02rem;
margin-block:26px 29px;
line-height:1.75}
.button{
border:0;
border-radius:7px;
display:inline-flex;
align-items:center;
justify-content:center;
gap:13px;
padding:18px 22px;
min-height:56px;
font-size:.81rem;
font-weight:600;
text-align:center;
line-height:1.4}
.button--primary{
background:var(--coral);
color:#fff}
.button--primary:not(:disabled):hover{
background:var(--coral-dark)}
.button--primary:disabled{
background:#dfcec0;
color:#514337}
.play-mark{
font-size:1.1rem}
.cta-note{
font-size:.7rem;
margin-top:9px;
color:var(--muted)}
.text-link{
display:inline-flex;
gap:36px;
align-items:center;
font-size:.83rem;
margin-top:25px;
border-bottom:1px solid #b8beb1;
padding-bottom:5px}
.hero-footnote{
font-size:.68rem;
color:var(--muted);
margin-top:24px}
.hero-visual{
min-width:0;
position:relative}
.hero-art-shell{
position:relative;
border-radius:180px 180px 22px 22px;
background:#ede4cf;
padding:26px 27px 38px;
box-shadow:0 26px 50px -30px #59654c4d}
.visual-topline{
display:flex;
justify-content:space-between;
align-items:center;
font-size:.57rem;
letter-spacing:.2em;
position:relative;
z-index:1;
padding:14px 55px 0;
color:#536753}
.visual-topline span:last-child{
font-size:1.5rem}
.artwork{
position:relative;
aspect-ratio:560/500;
overflow:hidden}
.storybook-scene{
height:100%;
width:100%;
object-fit:contain}
.hero-art-title{
text-align:center;
position:relative;
margin-top:9px;
line-height:1.4}
.hero-art-title span{
font-family:var(--serif);
display:block;
font-size:1.8rem;
font-style:italic}
.hero-art-title strong{
font-size:.58rem;
letter-spacing:.16em;
text-transform:uppercase;
font-weight:500}
.illustration-stamp{
position:absolute;
right:-20px;
bottom:80px;
display:grid;
place-content:center;
background:var(--paper);
width:90px;
height:90px;
border:1px solid #acb19d;
border-radius:50%;
font-size:.64rem;
font-style:italic;
text-align:center;
line-height:1.4;
transform:rotate(12deg)}
.hero-visual figcaption,.open-book-figure figcaption{
font-size:.62rem;
text-align:center;
margin-top:15px;
color:var(--muted)}
.art-orbit{
position:absolute;
color:#bb744e}
.art-orbit--one{
top:15%;
left:7%;
font-size:2rem}
.art-orbit--two{
top:22%;
right:2%;
font-size:1.8rem}
.experience{
background:#eeeee3}
.experience-layout{
display:grid;
grid-template-columns:1fr 1fr;
gap:100px;
align-items:center}
.experience-visual{
position:relative;
min-height:400px;
display:grid;
place-items:center}
.paper-note{
background:#faf5e8;
width:78%;
padding:34px 35px 47px;
transform:rotate(-5deg);
box-shadow:0 22px 50px -24px #5166514a;
border:1px solid #ded8c6}
.note-number{
font-size:.59rem;
letter-spacing:.16em}
.note-star{
font-size:4rem;
color:var(--coral);
margin:15px 0 12px}
.paper-note p{
font-family:var(--serif);
font-size:2.9rem;
line-height:1.12;
letter-spacing:-.04em}
.note-line{
display:block;
margin-top:25px;
height:1px;
width:90%;
background:#cecbbb}
.note-line--short{
margin-top:13px;
width:62%}
.floating-note{
position:absolute;
right:0;
bottom:4%;
background:#d9decb;
border-radius:3px;
padding:19px 25px;
transform:rotate(6deg);
font-family:var(--serif);
font-size:1.1rem;
line-height:1.4}
.inline-disclosure{
border-top:1px solid #bfc5b5;
border-bottom:1px solid #bfc5b5;
margin-top:31px;
max-width:510px}
.inline-disclosure summary{
list-style:none;
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
cursor:pointer;
min-height:58px;
padding:12px 0;
font-size:.84rem}
.inline-disclosure summary::-webkit-details-marker, .area-item summary::-webkit-details-marker,.faq-list summary::-webkit-details-marker{
display:none}
.inline-disclosure summary>span{
font-size:1.3rem}
.inline-disclosure p{
font-size:.87rem;
color:var(--muted);
padding-bottom:20px}
.inline-disclosure[open] summary>span{
transform:rotate(45deg)}
.how .section-intro{
text-align:center}
.steps{
list-style:none;
padding:0;
display:grid;
grid-template-columns:repeat(3,1fr);
gap:65px;
margin:70px 0 0}
.steps li{
border-top:1px solid var(--line);
padding-top:25px}
.step-number{
font-family:var(--serif);
font-size:2rem;
color:var(--coral);
display:block;
margin-bottom:24px}
.steps p{
font-size:.89rem;
color:var(--muted);
margin-top:16px}
.areas{
background:#243c36;
color:#fbf7ec}
.areas-heading{
display:grid;
grid-template-columns:1.3fr 1fr;
gap:130px;
align-items:end}
.areas em{
color:#ebbc8f}
.areas .eyebrow{
color:#d5c4a5}
.areas-heading>p{
font-size:.92rem;
color:#ccd6cd;
max-width:345px;
padding-bottom:7px}
.area-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:0 55px;
margin-top:58px}
.area-item{
border-top:1px solid #587067}
.area-item summary{
list-style:none;
cursor:pointer;
display:flex;
align-items:center;
gap:21px;
min-height:125px;
padding:25px 0}
.area-icon{
display:grid;
place-items:center;
color:#eabc91;
background:#365148;
width:62px;
height:62px;
border-radius:50%;
flex-shrink:0}
.area-icon svg{
width:34px}
.area-label{
display:flex;
flex-direction:column;
gap:7px}
.area-formal{
font-size:.61rem;
letter-spacing:.11em;
text-transform:uppercase;
color:#c6d2c8}
.area-label strong{
font-family:var(--serif);
font-size:1.6rem;
font-weight:400;
line-height:1.2;
letter-spacing:-.035em}
.area-plus{
margin-left:auto;
font-size:1.25rem;
color:#d9c4a2}
.area-item[open] .area-plus{
transform:rotate(45deg)}
.area-item>p{
font-size:.87rem;
max-width:400px;
margin:0 0 24px 83px;
color:#d6ded4}
.areas-note{
text-align:center;
color:#c7d2c7;
font-family:var(--serif);
font-style:italic;
margin-top:50px;
font-size:1.2rem}
.storybook{
background:#f3ead9;
overflow:hidden}
.storybook-heading{
display:flex;
justify-content:space-between;
gap:50px}
.storybook-heading .section-intro{
max-width:680px}
.book-side-note{
font-family:var(--serif);
font-style:italic;
font-size:1.5rem;
align-self:center;
line-height:1.3;
transform:rotate(7deg);
color:#826340;
white-space:nowrap}
.book-side-note span{
display:block;
font-size:3rem}
.open-book-figure{
margin-top:56px}
.open-book{
display:grid;
grid-template-columns:1fr 1fr;
margin-inline:auto;
width:92%;
background:#fff9ed;
border-radius:8px 12px 12px 8px;
box-shadow:0 5px 0 #dfd4be,0 10px 0 #e7ddc9,0 32px 48px -24px #6c664461;
transform:rotate(-2deg);
border:1px solid #ded4bd}
.book-page{
position:relative;
min-width:0;
aspect-ratio:1.04}
.book-page--art{
padding:18px 15px;
background:linear-gradient(90deg,#fff9ed 85%,#ded6c644)}
.book-page--art .artwork{
height:100%;
aspect-ratio:auto}
.book-page--type{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
text-align:center;
padding:35px;
background:linear-gradient(90deg,#ded6c650,#fff9ed 15%);
border-left:1px solid #d2c8b5}
.book-kicker{
font-size:.53rem;
letter-spacing:.2em;
color:#796e59}
.book-spark{
font-size:3.8rem;
color:#c3764c;
margin-block:14px}
.book-page--type p{
font-family:var(--serif);
font-size:clamp(1.4rem,3.2vw,3rem);
line-height:1.2;
letter-spacing:-.04em}
.book-rule{
height:1px;
width:45px;
background:#cfc4ae;
margin:22px 0}
.book-description{
font-size:.6rem;
color:#7b705e;
line-height:1.8}
.book-page-number{
position:absolute;
bottom:16px;
left:50%;
font-size:.55rem;
color:#8f8572}
.open-book-figure figcaption{
margin-top:33px}
.book-disclosure{
margin:35px auto 0}
.why-layout{
display:grid;
grid-template-columns:1fr 1fr;
gap:100px}
.why-points>div{
position:relative;
padding:0 0 27px 48px;
border-bottom:1px solid var(--line);
margin-bottom:29px}
.why-points>div:last-child{
margin-bottom:0}
.why-points span{
position:absolute;
left:0;
top:0;
font-family:var(--serif);
color:var(--coral);
font-size:1.1rem}
.why-points p{
color:var(--muted);
font-size:.89rem;
margin-top:12px}
.parent-trust{
background:var(--sage)}
.trust-layout{
display:grid;
grid-template-columns:.65fr 1.35fr;
gap:90px;
align-items:center}
.trust-emblem{
font-size:10rem;
color:#77836b;
text-align:center;
line-height:1;
display:flex;
align-items:center;
flex-direction:column;
gap:20px}
.trust-emblem span{
font-family:var(--sans);
font-size:.65rem;
letter-spacing:.22em;
line-height:1.8;
color:var(--ink)}
.faq-layout{
display:grid;
grid-template-columns:.8fr 1.2fr;
gap:90px}
.faq-list details{
border-top:1px solid var(--line)}
.faq-list details:last-child{
border-bottom:1px solid var(--line)}
.faq-list summary{
display:flex;
align-items:center;
gap:20px;
list-style:none;
cursor:pointer;
font-size:.91rem;
min-height:86px;
padding:20px 0;
line-height:1.5}
.faq-index{
font-family:var(--serif);
color:var(--coral);
font-size:.8rem}
.faq-plus{
font-size:1.2rem;
margin-left:auto;
flex-shrink:0}
.faq-list details[open] .faq-plus{
transform:rotate(45deg)}
.faq-list details>p{
font-size:.88rem;
color:var(--muted);
padding:0 35px 25px}
.final-conversion{
background:#bd533e;
color:#fff9ed;
padding:85px 0 80px;
position:relative}
.final-inner{
text-align:center;
max-width:850px}
.final-star{
font-size:2.6rem;
color:#f3c294;
display:block;
margin-bottom:25px}
.final-inner h2{
font-size:clamp(2.7rem,5.4vw,5.1rem)}
.final-inner h2 em{
color:#ffe0bf}
.final-inner>p:not(.eyebrow){
max-width:450px;
margin:24px auto 29px;
font-size:.95rem;
color:#ffeddf}
.play-action--light .button{
background:#fff7e9;
color:#783425}
.play-action--light .button:disabled{
background:#ebc6b2;
color:#743f32}
.play-action--light .cta-note{
color:#fff0e2}
.final-secondary{
display:inline-flex;
align-items:center;
gap:18px;
margin-top:25px;
font-size:.8rem;
border-bottom:1px solid #eed0b3;
padding-bottom:5px}
.site-footer{
padding:65px 0 25px}
.footer-top{
display:flex;
justify-content:space-between;
gap:40px}
.footer-top p{
font-size:.78rem;
margin-top:16px;
color:var(--muted)}
.footer-top nav{
display:grid;
grid-template-columns:repeat(3,auto);
gap:8px 35px;
font-size:.78rem;
align-content:start}
.footer-bottom{
margin-top:52px;
border-top:1px solid var(--line);
padding-top:23px;
display:flex;
justify-content:space-between;
gap:25px;
font-size:.65rem;
color:var(--muted)}
.real-product-art{
width:100%;
height:auto;
object-fit:contain}
@media(min-width:1500px){
.hero{
padding-block:90px}
.hero-art-shell{
padding-inline:32px}
}
@media(max-width:1100px){
.container{
width:calc(100% - 64px)}
.hero{
gap:35px}
.header-inner nav{
gap:20px}
.header-action{
display:none}
.experience-layout,.why-layout{
gap:55px}
.areas-heading{
gap:60px}
.trust-layout,.faq-layout{
gap:55px}
.area-label strong{
font-size:1.35rem}
.section-pad{
padding-block:85px}
.steps{
gap:35px}
}
@media(max-width:760px){
.container{
width:calc(100% - 40px)}
.header-inner{
min-height:78px;
gap:14px}
.wordmark{
font-size:1.15rem}
.brand-spark{
font-size:1.8rem}
.header-inner nav{
gap:15px;
font-size:.65rem}
.header-inner nav a:first-child{
display:none}
.hero{
grid-template-columns:1fr;
padding-block:46px 52px;
gap:38px}
.hero-copy .eyebrow{
font-size:.59rem;
letter-spacing:.12em;
margin-bottom:20px}
h1{
font-size:clamp(3.4rem,11vw,5rem)}
.hero-description{
max-width:500px;
font-size:.95rem;
margin-block:22px 25px}
.button{
padding:17px 19px;
font-size:.76rem;
min-height:56px}
.hero-copy .button{
width:100%;
max-width:380px}
.hero-footnote{
margin-top:18px}
.hero-visual{
width:min(100%,490px);
margin-inline:auto}
.hero-art-shell{
padding:20px 20px 30px;
border-radius:150px 150px 16px 16px}
.visual-topline{
padding-inline:35px;
font-size:.49rem}
.illustration-stamp{
right:0;
width:74px;
height:74px;
font-size:.55rem;
bottom:70px}
.hero-art-title span{
font-size:1.5rem}
.hero-art-title strong{
font-size:.5rem}
.section-pad{
padding-block:66px}
h2{
font-size:clamp(2.35rem,8.5vw,3.3rem)}
.eyebrow{
font-size:.6rem;
letter-spacing:.14em;
margin-bottom:17px}
.section-description,.body-copy{
font-size:.92rem}
.experience-layout{
grid-template-columns:1fr;
gap:38px}
.experience-layout>div:last-child{
order:-1}
.experience-visual{
min-height:325px}
.paper-note{
width:min(85%,380px);
padding:25px 30px 38px}
.paper-note p{
font-size:2.65rem}
.note-star{
font-size:3.2rem}
.floating-note{
right:0;
bottom:0;
font-size:1rem}
.steps{
grid-template-columns:1fr;
margin-top:35px;
gap:28px}
.steps li{
position:relative;
padding:25px 0 0 58px}
.step-number{
position:absolute;
left:0;
top:21px;
font-size:1.7rem}
.steps p{
margin-top:10px}
.areas-heading{
grid-template-columns:1fr;
gap:24px}
.areas-heading>p{
max-width:500px}
.area-grid{
grid-template-columns:1fr;
margin-top:32px}
.area-item summary{
min-height:112px;
gap:17px}
.area-icon{
width:52px;
height:52px}
.area-icon svg{
width:30px}
.area-label strong{
font-size:1.5rem}
.area-formal{
font-size:.57rem}
.area-item>p{
margin-left:69px;
font-size:.86rem}
.areas-note{
margin-top:30px;
font-size:1.1rem}
.storybook-heading{
display:block}
.book-side-note{
display:none}
.open-book-figure{
margin-top:35px}
.open-book{
width:100%;
transform:rotate(-1deg)}
.book-page{
aspect-ratio:.76}
.book-page--art{
padding:5px}
.book-page--type{
padding:15px 9px}
.book-page--type p{
font-size:clamp(1.1rem,4.7vw,1.7rem)}
.book-kicker{
font-size:.4rem;
letter-spacing:.1em}
.book-spark{
font-size:2.2rem;
margin-block:12px}
.book-rule{
margin:16px 0}
.book-description{
font-size:.48rem}
.book-page-number{
bottom:10px}
.open-book-figure figcaption{
font-size:.56rem;
max-width:290px;
margin:25px auto 0}
.why-layout{
grid-template-columns:1fr;
gap:38px}
.why-points>div{
padding-left:38px}
.trust-layout{
grid-template-columns:1fr;
gap:30px}
.trust-emblem{
font-size:5rem;
align-items:flex-start;
gap:10px}
.trust-emblem span{
text-align:left;
font-size:.55rem}
.faq-layout{
grid-template-columns:1fr;
gap:35px}
.faq-list summary{
min-height:78px;
gap:14px}
.faq-list details>p{
padding-left:28px;
padding-right:10px}
.final-conversion{
padding-block:66px}
.final-inner h2{
font-size:clamp(2.7rem,9vw,4rem)}
.final-inner .button{
width:100%;
max-width:380px}
.final-inner>.eyebrow{
font-size:.55rem}
.footer-top{
flex-direction:column;
gap:30px}
.footer-top nav{
grid-template-columns:1fr 1fr;
gap:2px 20px}
.footer-bottom{
flex-wrap:wrap;
gap:14px 25px;
margin-top:32px}
.footer-bottom>span:nth-child(2){
width:100%;
order:3}
.site-footer{
padding-top:45px}
}
@media(max-width:360px){
.container{
width:calc(100% - 32px)}
.header-inner nav{
gap:10px;
font-size:.6rem}
.wordmark{
font-size:1rem}
.brand-spark{
font-size:1.6rem}
.button{
gap:9px;
font-size:.7rem}
.area-label strong{
font-size:1.35rem}
}
@media(prefers-reduced-motion:reduce){
html{
scroll-behavior:auto}
*,*::before,*::after{
animation:none!important;
transition:none!important}
}
.header-inner nav a,.footer-top nav a,.text-link,.final-secondary{
min-height:44px;
display:inline-flex;
align-items:center}
.footer-bottom a{
display:inline-flex;
align-items:center;
min-height:44px}
.wordmark{
min-height:44px}


/* Approved artwork and cohesive homepage presentation. */
.hero { grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:44px; padding-block:64px 80px; }
.hero h1 { font-size:clamp(3.4rem,5.2vw,5.5rem); }
.hero-description { max-width:440px; }
.hero-explore { background:var(--ink); color:var(--paper); border-radius:100px; margin-bottom:18px; box-shadow:0 8px 24px -16px var(--ink); }
.hero-explore:hover { background:#36594d; }
.hero-copy .play-action .button { padding:12px 16px; min-height:48px; }
.hero-reassurance { display:flex; flex-wrap:wrap; gap:8px; list-style:none; padding:0; margin:22px 0 0; font-size:.7rem; }
.hero-reassurance li { background:#ececdf; padding:7px 11px; border-radius:100px; }
.approved-hero { width:100%; }
.approved-art-frame { padding:8px; background:#fffaf0; border:1px solid #e1d2b8; border-radius:18px; box-shadow:0 24px 60px -32px #68533580; }
.approved-art-frame .real-product-art { display:block; border-radius:10px; }
.approved-hero figcaption { text-align:center; font-family:var(--serif); font-style:italic; font-size:1rem; color:var(--muted); margin:20px auto 0; max-width:450px; }
.experience-card { width:100%; max-width:440px; padding:40px; border-radius:90px 90px 18px 18px; background:linear-gradient(145deg,#fffaf0,#eee5ce); border:1px solid #dad5bf; box-shadow:0 20px 40px -30px #51665170; text-align:center; }
.journey-label { display:block; font-size:.65rem; font-weight:650; letter-spacing:.06em; color:var(--muted); }
.experience-spark { display:block; font-size:5rem; color:var(--coral); line-height:1.2; margin:22px 0; }
.experience-card>p { font-family:var(--serif); font-size:2.6rem; line-height:1.15; }
.experience-path { display:block; margin-top:26px; font-size:.75rem; color:var(--muted); }
.steps { gap:24px; margin-top:42px; }
.steps li { background:#f0eddf; border:1px solid #e1dccb; border-radius:18px; padding:30px; }
.step-number { display:grid; place-items:center; width:48px; height:48px; background:#fff9ec; border-radius:50%; font-size:1.4rem; margin-bottom:18px; }
.area-grid { gap:16px; }
.area-item { border:1px solid #587067; border-radius:18px; padding-inline:20px; background:#2c463e; }
.area-item[open] { background:#304e43; }
.open-book { transform:none; width:100%; max-width:1100px; }
.book-page--art { display:flex; align-items:center; padding:24px; aspect-ratio:auto; }
.book-page--art .real-product-art { display:block; border-radius:6px; }
.book-page--type { aspect-ratio:auto; min-height:360px; }
.book-description { font-size:.75rem; color:var(--muted); line-height:1.8; }
.open-book-figure figcaption { text-align:center; color:var(--muted); font-size:.78rem; }
.why-points>div { padding:24px 24px 24px 64px; background:#f0eddf; border:1px solid #e1dccb; border-radius:18px; margin-bottom:16px; }
.why-points span { left:24px; top:25px; }
.parent-trust { border-block:1px solid #d5dacd; }
.faq-list details[open] { background:#f2eee2; }
.faq-list details[open] summary { padding-inline:14px; }
.final-conversion { background:radial-gradient(ellipse at top,#c56148,#a94131); }
.footer-top nav a:hover { text-decoration:underline; text-underline-offset:5px; }
@media(max-width:1100px) and (min-width:761px) {
  .hero { gap:28px; }
  .hero h1 { font-size:clamp(3.2rem,5.6vw,4.8rem); }
  .experience-card { padding:28px; }
}
@media(max-width:760px) {
  .hero { grid-template-columns:1fr; padding-block:38px 52px; gap:32px; }
  .hero h1 { font-size:clamp(3.3rem,11vw,5rem); }
  .hero-visual { width:100%; max-width:600px; }
  .approved-art-frame { padding:5px; border-radius:12px; }
  .approved-art-frame .real-product-art { border-radius:7px; }
  .approved-hero figcaption { font-size:.9rem; margin-top:16px; }
  .hero-explore { width:100%; max-width:380px; }
  .steps li { padding:24px 24px 24px 84px; }
  .steps .step-number { left:22px; top:24px; }
  .experience-card { padding:30px 24px; }
  .experience-spark { font-size:4rem; }
  .open-book { grid-template-columns:1fr; max-width:600px; }
  .book-page { aspect-ratio:auto; }
  .book-page--art { padding:16px; }
  .book-page--type { min-height:280px; border-left:0; border-top:1px solid #d2c8b5; padding:26px 20px 38px; background:#fff9ed; }
  .book-page--type p { font-size:2rem; }
  .book-kicker { font-size:.63rem; }
  .book-page--art .book-page-number { display:none; }
  .area-item { padding-inline:16px; }
}.operator-shell { width:min(1280px,calc(100% - 48px)); margin:40px auto 80px; }
.operator-heading { display:flex;justify-content:space-between;align-items:center;gap:24px;margin-bottom:24px; }
.operator-shell h1 {font-size:clamp(2rem,4vw,3.5rem);}
.operator-shell h2 {font-family:var(--sans);font-size:1.35rem;letter-spacing:-.02em;margin-bottom:16px;}
.provenance-banner {background:#e5ecdf;border:1px solid #9aac92;padding:18px 22px;border-radius:12px;}
.provenance-sample {background:#ffebc5;border-color:#b48332;color:#60451d;}
.operator-lanes {display:flex;flex-wrap:wrap;gap:10px;margin:24px 0;}
.operator-lanes a {padding:10px 16px;border:1px solid var(--line);border-radius:8px;min-height:44px;}
.operator-lanes a[aria-current] {background:var(--ink);color:var(--paper);}
.operator-metrics {display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-block:28px;}
.operator-metrics div {background:#f0eddf;padding:20px;border-radius:12px;}
.operator-metrics strong {display:block;font-size:1.7rem;}
.operator-panel {padding:28px;border:1px solid var(--line);background:#fffaf0;border-radius:16px;margin-top:24px;}
.operator-panel details {border-top:1px solid var(--line);padding:14px 0;}
.operator-shell summary {cursor:pointer;min-height:44px;}
.operator-shell pre {font-size:.75rem;white-space:pre-wrap;overflow-wrap:anywhere;max-height:420px;overflow:auto;background:#f1efe5;padding:16px;border-radius:8px;}
.operator-table-wrap {overflow-x:auto;}
.operator-shell table {border-collapse:collapse;width:100%;font-size:.9rem;}
.operator-shell th,.operator-shell td {padding:14px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top;}
.operator-shell label {display:block;font-weight:600;margin-top:18px;}
.operator-shell input,.operator-shell textarea {font:inherit;width:100%;padding:12px;border:1px solid #7b8a7f;border-radius:8px;margin:10px 0 18px;}
.operator-shell input:focus-visible,.operator-shell textarea:focus-visible {outline:3px solid var(--coral);outline-offset:3px;}
.operator-controls {display:flex;gap:12px;flex-wrap:wrap;}
.operator-controls details,.operator-controls p {width:100%;}
.operator-access {max-width:660px;}
.operator-access h1 {margin-block:24px;}
@media(max-width:760px) {.operator-heading {display:block}.operator-metrics {grid-template-columns:1fr 1fr}.operator-panel{padding:20px}.operator-shell{width:calc(100% - 32px)}}
.resource-main {padding-block:56px 90px;min-height:65vh;}
.resource-main nav[aria-label="Breadcrumb"] {font-size:.8rem;color:var(--muted);margin-bottom:42px;}
.resource-main nav a {text-decoration:underline;text-underline-offset:4px;}
.resource-main h1 {font-size:clamp(2.8rem,5vw,5rem);max-width:900px;}
.resource-lead {font-size:1.1rem;color:var(--muted);max-width:720px;margin-top:28px;}
.resource-empty {margin-top:44px;padding:30px;border-block:1px solid var(--line);max-width:720px;}
.resource-grid {display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:44px;}
.resource-grid article {padding:30px;border:1px solid var(--line);border-radius:18px;}
.resource-grid h2 {font-size:1.9rem;margin-bottom:20px;}
.resource-article {max-width:800px;}
.resource-article section {margin-top:42px;}
.resource-article section h2,.resource-article nav h2 {font-size:2rem;margin-bottom:20px;}
.resource-article section p {white-space:pre-line;}
.resource-byline {font-size:.85rem;color:var(--muted);margin-top:28px;}
.resource-article section a {text-decoration:underline;text-underline-offset:4px;}
@media(max-width:760px){.resource-grid{grid-template-columns:1fr}.resource-main{padding-block:36px 66px}}

.community-workspace form {display:grid;gap:12px;margin:18px 0;padding:16px;border:1px solid var(--line);border-radius:12px}.community-workspace label{display:block}.community-workspace textarea,.community-workspace input:not([type=checkbox]),.community-workspace select{display:block;width:100%;max-width:100%;padding:10px;margin-top:6px}.community-workspace input[type=checkbox]{margin-right:8px}.community-workspace button{margin:6px 8px 6px 0}.community-workspace pre{white-space:pre-wrap;overflow-wrap:anywhere}.community-workspace .operator-panel{margin-top:20px}.community-workspace button:disabled{opacity:.5;cursor:not-allowed}


.community-workspace input[type=checkbox]{display:inline-block;width:auto;padding:0;margin:0 8px 0 0;vertical-align:middle}