@import url('./assets/fonts/fonts.css');
/* Direction 22: forest-green actions with ivory text; reversed on the olive closing panel. */
:root{--paper:#f7f3eb;--ink:#24251f;--action:#344b3e;--ember:#e8623c;--stone:#e9e3d8;--muted:#64665b;--line:#d5cec0;--display:'Bricolage Grotesque',sans-serif;--body:'DM Sans',sans-serif;--serif:Georgia,'Times New Roman',serif;--section-gap:64px;--inset:36px}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);-webkit-font-smoothing:antialiased}
h1,h2,h3,p,figure,blockquote{margin:0}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font:inherit}
button,a,summary{-webkit-tap-highlight-color:transparent}
button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #e8623c;outline-offset:5px}
::selection{background:var(--ink);color:white}
.wrap{width:calc(100% - 96px);max-width:1180px;margin-inline:auto}
h1,h2,h3{font-family:var(--display);font-weight:500;letter-spacing:-.045em}
h2{font-size:44px;line-height:1.12}
h2 em,h1 em{font-family:var(--serif);font-weight:400}
h1 em{color:var(--ink)}
.eyebrow{text-transform:uppercase;letter-spacing:.11em;font-size:11px;font-weight:600;color:var(--ink);line-height:1.5}
.site-header{height:88px;display:flex;justify-content:space-between;align-items:center;gap:24px;border-bottom:1px solid var(--line)}
.wordmark{display:inline-flex;align-items:center;white-space:nowrap;font-family:var(--display);font-size:25px;font-weight:800;letter-spacing:-1.1px}
.wordmark>span:last-child{font-weight:500}
nav{display:flex;align-items:center;gap:28px;font-size:13px}
.button{display:inline-flex;align-items:center;justify-content:center;border:0;min-height:55px;padding:17px 26px;background:var(--action);color:var(--paper);font-size:14px;font-weight:600;cursor:pointer;border-radius:3px;transition:background .15s}
.button:hover{background:#273b30}
[data-start-board]{box-shadow:0 2px 0 #203326;transition:background .15s,box-shadow .15s}
[data-start-board]:hover{box-shadow:0 2px 0 #203326}
[data-start-board]:active{box-shadow:none}
.final-create [data-start-board]{box-shadow:0 2px 0 #c3c9b7}
.final-create [data-start-board]:active{box-shadow:none}
.button.small{min-height:43px;padding:12px 20px;font-size:12px}
.button.cream{background:var(--paper);color:var(--ink)}
.button.cream:hover{background:white}
.hero{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;padding:44px 0 56px}
.hero h1{font-size:clamp(44px,5.6vw,72px);font-weight:600;line-height:1.08;letter-spacing:-.052em}
.hero h1 em{display:inline-block;color:var(--ink);margin-top:.08em;line-height:1.06}
.hero-description{font-size:18px;line-height:1.65;max-width:440px;margin-top:24px}
.hero-copy>.button{margin-top:28px}
.reassurance{font-size:12px;line-height:1.6;color:var(--ink);margin-top:14px}
.reassurance strong{font-weight:500}
.hero-product{max-width:470px;width:100%;justify-self:end}
.oak-frame{display:block;width:100%;background:linear-gradient(95deg,#c69c70,#ddba8b 40%,#bd8c59);padding:9px;border:1px solid #b68a59;box-shadow:5px 12px 24px #3d2a1b1c;cursor:zoom-in}
.oak-frame>img{width:100%;height:auto;border:12px solid #fffdf5}
.board-open:hover{box-shadow:5px 13px 28px #3d2a1b2e}
.transformation{padding-top:44px;border-top:1px solid var(--line)}
.transformation-intro{margin-bottom:28px;max-width:680px}
.transformation-intro>p{font-size:16px;line-height:1.65;color:var(--muted);margin-top:14px;max-width:630px}
.goal-carousel{background:#e8e2d6;color:var(--ink);position:relative}
.goal-slide{display:grid;grid-template-columns:34% 66%;align-items:stretch}
.goal-slide-copy{display:flex;align-items:center;padding:var(--inset);padding-bottom:110px}
.goal-slide-copy blockquote{font-family:var(--serif);font-size:clamp(30px,3.2vw,42px);line-height:1.16;letter-spacing:-.035em}
.goal-scene{width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;object-position:center}
.carousel-controls{position:absolute;left:var(--inset);bottom:var(--inset);display:flex;align-items:center;gap:10px}
.carousel-controls>span{font-size:12px;font-variant-numeric:tabular-nums;letter-spacing:.06em;color:var(--muted);margin-right:9px}
.carousel-controls button{display:grid;place-items:center;width:43px;height:43px;padding:0;border:1px solid var(--paper);background:var(--paper);color:var(--ink);border-radius:50%;font-size:22px;cursor:pointer;transition:background .15s}
.carousel-controls button:hover{background:var(--ember);color:var(--ink);border-color:var(--ember)}
.how-it-works{padding-block:var(--section-gap);scroll-margin-top:28px}
.process-heading{margin-bottom:28px}
.process-heading h2{font-size:34px}
.steps{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;margin:0;padding:0}
.steps li{border-top:1px solid var(--line);padding-top:18px}
.step-number{display:grid;place-items:center;width:34px;height:34px;background:transparent;border:1px solid #b9b4a8;color:var(--ink);font-family:var(--display);font-size:14px;font-weight:600;border-radius:3px;margin-bottom:16px}

.steps h3{font-size:22px;line-height:1.2;letter-spacing:-.035em;margin-bottom:12px;min-height:53px;max-width:210px}
.steps p{font-size:15px;line-height:1.65;color:var(--muted)}
.at-home{display:grid;grid-template-columns:1.35fr 1fr;gap:44px;align-items:center;background:var(--stone);padding:36px}
.home-visuals{position:relative;padding:0 16px 74px 0}
.room-photo img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.frame-detail{position:absolute;bottom:0;right:0;width:50%;border:8px solid var(--stone);box-shadow:4px 8px 18px #3d2a1b18}
.frame-detail img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.home-copy h2{font-size:40px}
.home-copy h2 em{color:var(--ink)}
.home-copy>p{font-size:15px;line-height:1.7;color:#55564e;margin-top:20px}
.included-copy{margin-top:25px}
.included-copy h3{font-family:var(--body);font-size:15px;font-weight:600;letter-spacing:0}
.included-copy ul{list-style:none;padding:0;margin:12px 0 0}
.included-copy li{font-size:14px;line-height:1.6;padding:9px 0;border-top:1px solid #ccc3b5}
.home-copy>.button{margin-top:24px}
.stories{padding-block:var(--section-gap)}
.section-heading{margin-bottom:28px}

.story{display:flex;flex-direction:column;background:var(--stone);overflow:hidden}
.story-sophie,.story-priya{background:#e4e8df}
.story-jordan,.story-alex{background:#efe0d8}
.story-image{aspect-ratio:4/3;overflow:hidden}
.story-image>img{width:100%;height:100%;object-fit:cover}
.story-body{display:flex;flex-direction:column;flex:1;padding:24px}
.story h3{font-family:var(--serif);font-weight:400;font-size:25px;line-height:1.3;letter-spacing:-.025em}
.story-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding-top:18px}
.story-person{font-size:12px;font-weight:600}
.story-read{display:flex;align-items:center;gap:10px;border:0;padding:4px 0;background:transparent;font-size:12px;color:#555b4f;cursor:pointer}
.story-read>span{font-size:17px;color:var(--ink)}
.story-read:hover{color:var(--ink)}
.sample-note{font-size:10px;color:var(--muted);line-height:1.6;margin-top:16px;text-align:right}
.faq{display:grid;grid-template-columns:1fr 2fr;gap:48px;padding-bottom:var(--section-gap)}
.faq>h2{font-size:29px;line-height:1.3;max-width:240px}
.faq details{border-bottom:1px solid var(--line);padding:18px 0}
.faq details:first-child{padding-top:0}
.faq summary{display:flex;justify-content:space-between;gap:20px;list-style:none;cursor:pointer;font-size:16px;font-weight:500;line-height:1.5}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:'+';color:var(--ink);font-size:20px;font-weight:400;line-height:1}
.faq details[open] summary:after{content:'−'}
.faq details p{font-size:14px;line-height:1.7;color:var(--muted);max-width:620px;padding-top:13px}
.final-create{background:var(--stone);color:var(--ink);text-align:center;padding:40px 32px;margin-bottom:48px}
.final-create h2{font-size:46px}
.final-create h2 em{color:var(--ink)}
.final-create .button{margin-top:26px;background:var(--paper);color:var(--action)}
.final-create .button:hover{background:#fffdf7}
.final-reassurance{font-size:12px;color:var(--muted);margin-top:13px}
.footer{border-top:1px solid var(--line);padding:24px 0 28px;display:flex;align-items:center;justify-content:space-between;gap:30px}
.footer .wordmark{font-size:20px}
.footer p{color:var(--muted);font-size:10px;line-height:1.6}
@media(max-width:1050px){
 :root{--section-gap:52px;--inset:28px}
 .wrap{width:calc(100% - 64px)}
 .wordmark{font-size:23px}
 nav{gap:20px}
 .hero{gap:36px;padding:40px 0 48px}
 .hero h1{font-size:clamp(40px,5.5vw,57px)}
 .hero-description{font-size:16px;line-height:1.65}
 h2{font-size:38px}
 .goal-slide-copy{padding-bottom:100px}
 .goal-slide-copy blockquote{font-size:31px}
 .carousel-controls{gap:8px}
 .carousel-controls>span{margin-right:4px;font-size:11px}
 .carousel-controls button{width:39px;height:39px}
 .steps{gap:22px}
 .steps h3{font-size:21px;min-height:51px}
 .steps p{font-size:14px}
 .at-home{padding:28px;gap:28px;grid-template-columns:1.2fr 1fr}
 .home-visuals{padding-right:12px;padding-bottom:64px}
 .home-copy h2{font-size:34px}
 .home-copy>p{font-size:14px;margin-top:18px}
 .included-copy{margin-top:22px}
 .included-copy li{font-size:13px}
 .home-copy>.button{font-size:13px;padding-inline:18px}
 .story-grid{gap:18px}
 .story-body{padding:22px 20px}
 .story h3{font-size:23px}
 .story-read{font-size:11px}
 .faq{gap:36px}
 .final-create h2{font-size:40px}
}
@media(max-width:740px){
 :root{--section-gap:42px;--inset:24px}
 .wrap{width:calc(100% - 40px)}
 .site-header{height:78px}
 .wordmark{font-size:21px}
 nav>a{display:none}
 .button.small{padding:11px 13px;font-size:10px}
 .hero{grid-template-columns:1fr;gap:30px;padding-block:36px}
 .hero h1{font-size:50px}
 .hero-product{justify-self:center;max-width:420px}
 .hero-description{max-width:470px}
 h2{font-size:35px}
 .transformation{padding-top:36px}
 .transformation-intro>p{font-size:15px}
 .goal-slide{grid-template-columns:1fr}
 .goal-slide-copy{padding:26px 24px 85px}
 .goal-slide-copy blockquote{font-size:31px;max-width:440px}
 .goal-scene{height:auto}
 .carousel-controls{position:static;padding:14px 24px 20px}
 .goal-slide-copy{padding-bottom:26px}
 .steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}
 .steps h3{font-size:20px;min-height:0}
 .at-home{grid-template-columns:1fr;padding:24px;gap:28px}
 .home-visuals{padding-bottom:60px}
 .home-copy h2{font-size:37px}
 .home-copy>p{font-size:15px}
 .included-copy li{font-size:14px}
 .story-grid{grid-template-columns:1fr;gap:24px}
 .story h3{font-size:26px}
 .story-read{font-size:12px}
 .sample-note{text-align:left}
 .faq{grid-template-columns:1fr;gap:25px}
 .faq>h2{max-width:none}
 .final-create{padding:34px 22px;margin-bottom:36px}
 .final-create h2{font-size:35px}
 .footer{align-items:flex-start;flex-direction:column;gap:14px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.button,.carousel-controls button,[data-start-board]{transition:none}.carousel-controls button:hover,[data-start-board]:hover,[data-start-board]:active{transform:none}}

/* Existing dialog and onboarding components. */
.dialog-close{position:absolute;right:13px;top:9px;border:0;background:transparent;font-size:28px;padding:3px 10px;cursor:pointer;color:var(--ink)}
.story-dialog,.board-dialog{border:0;background:var(--paper);color:var(--ink);max-height:calc(100dvh - 48px);padding:0;box-shadow:0 25px 100px #0004}
.story-dialog::backdrop,.board-dialog::backdrop{background:#24251fb8;backdrop-filter:blur(4px)}
.story-dialog{width:min(920px,calc(100% - 48px));overflow:auto}
.story-dialog .dialog-close{position:sticky;top:13px;left:calc(100% - 57px);float:right;z-index:2;width:40px;height:40px;margin:13px 13px -53px 0;background:var(--paper);border-radius:50%;display:grid;place-items:center;line-height:1;padding:0;box-shadow:0 2px 8px #0002}
.story-dialog-image{width:100%;height:300px;object-fit:cover;object-position:center 42%}
.story-dialog-copy{padding:36px 45px 40px;max-width:790px;margin:auto}
.story-dialog-copy h2{font-size:39px;line-height:1.12;margin:15px 0 22px}
.story-dialog-copy blockquote{font-family:var(--serif);font-size:24px;line-height:1.4;color:var(--ink);margin-bottom:22px}
.story-dialog-copy>p:not(.eyebrow){font-size:14px;line-height:1.75;margin-top:15px;max-width:650px}
.story-moment{display:grid;grid-template-columns:100px 1fr;gap:12px 24px;border-top:1px solid var(--line);margin-top:28px;padding-top:22px;font-size:12px;line-height:1.6}
.story-moment span{color:var(--muted)}
.story-moment strong{font-weight:500}
.board-dialog{width:auto;max-width:calc(100vw - 48px);overflow:auto}
.board-dialog-heading{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;gap:35px}
.board-dialog h2{font-size:19px;letter-spacing:-.02em}
.board-dialog .dialog-close{position:static;line-height:1;padding:0 3px;font-size:27px}
.board-dialog>img{height:calc(100dvh - 110px);width:auto;max-width:100%;object-fit:contain}
@media(max-width:740px){
.story-dialog-copy{padding:28px 24px}
.story-dialog-copy h2{font-size:32px}
.story-dialog-image{height:230px}
.story-dialog-copy blockquote{font-size:22px}
.story-moment{grid-template-columns:1fr;gap:5px}
.story-moment strong+span{margin-top:12px}
}
.story-dialog-toolbar{position:sticky;top:0;height:0;z-index:3;display:flex;justify-content:flex-end}
.story-dialog .dialog-close{position:static;float:none;flex:none;margin:13px 13px 0 0}
.story-dialog-intro{display:grid;grid-template-columns:1fr 1.12fr;align-items:center;background:#eeebe2}
.story-dialog-image{height:auto;object-fit:contain;object-position:center;align-self:center}
.story-dialog-title{padding:34px 35px 30px}
.story-dialog-title h2{font-size:33px;line-height:1.13;margin:15px 0 19px}
.story-dialog-title blockquote{font-family:var(--serif);font-size:21px;line-height:1.4;color:var(--ink)}
.story-dialog-title .eyebrow{font-size:10px}
.story-dialog-copy{padding-top:20px;padding-bottom:33px}
#sophie-story .story-dialog-intro{background:#e9ecf1}
#jordan-story .story-dialog-intro{background:#f0e6dd}
@media(max-width:740px){
.story-dialog-intro{grid-template-columns:1fr}
.story-dialog-image{height:auto}
.story-dialog-title{padding:28px 24px}
.story-dialog-title h2{font-size:31px}
}
.board-dialog{width:min(calc((100dvh - 110px) * .809),calc(100vw - 48px))}
.board-dialog>img{width:100%;height:auto}
.board-dialog-heading{padding:14px 16px;gap:20px}
[hidden]{display:none!important}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.board-dialog-heading{background:var(--paper)}
.create-dialog{width:min(940px,calc(100vw - 48px));max-height:calc(100dvh - 48px);padding:0;border:0;background:var(--paper);color:var(--ink);box-shadow:0 25px 100px #0004;overflow:auto}
.create-dialog::backdrop{background:#24251fb8;backdrop-filter:blur(4px)}
.create-header{display:flex;align-items:center;justify-content:space-between;padding:22px 35px 18px;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:3;background:var(--paper)}
.create-header .wordmark{font-size:23px}
.create-header .dialog-close{position:static;padding:0 5px;line-height:1;font-size:29px}
.create-progress{display:flex;list-style:none;margin:0;padding:23px 42px 0;gap:25px;font-size:11px;color:#85867d;counter-reset:step}
.create-progress li{display:flex;align-items:center;gap:7px}
.create-progress li:before{counter-increment:step;content:counter(step);display:grid;place-items:center;width:21px;height:21px;border:1px solid #bfc2b6;border-radius:50%;font-size:10px}
.create-progress li[aria-current="step"]{color:var(--ink);font-weight:600}
.create-progress li[aria-current="step"]:before{background:var(--ink);border-color:var(--ink);color:white}
.create-progress .complete{color:#53624c}
.create-step{padding:31px 42px 26px}
.create-step>h2,.result-copy h2{font-size:43px;line-height:1.07;margin-top:12px;outline:0}
.create-lead{font-size:14px;line-height:1.65;color:var(--muted);margin-top:17px;max-width:610px}
.field-label{display:block;font-size:12px;font-weight:600;margin:25px 0 10px}
.create-dialog textarea{display:block;width:100%;resize:vertical;min-height:116px;max-height:230px;background:#fffdf8;border:1px solid #b9b9ac;border-radius:3px;padding:14px 16px;font:14px/1.6 var(--body);color:var(--ink)}
.create-dialog textarea:focus{outline:2px solid var(--ink);outline-offset:2px}
.create-dialog textarea[aria-invalid="true"]{border-color:#b34c2b}
.field-help,.field-error{font-size:11px;line-height:1.5;margin-top:7px}
.field-help{color:var(--muted)}
.field-error{color:#a73b1a}
.goal-examples{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:18px}
.goal-examples>span{font-size:11px;color:var(--muted);margin-right:3px}
.goal-examples button{background:transparent;border:1px solid var(--line);border-radius:22px;padding:8px 11px;font-size:11px;color:var(--ink);cursor:pointer}
.goal-examples button:hover{border-color:var(--ink);color:var(--ink)}
.create-actions{display:flex;align-items:center;gap:22px;margin-top:28px}
.create-actions .button{min-width:160px}
.create-actions>p{font-size:11px;color:var(--muted)}
.back-button{border:0;background:none;font:12px var(--body);color:var(--muted);padding:12px 0;text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.back-button:hover{color:var(--ink)}
.prototype-note{font-size:10px;color:var(--muted);line-height:1.5;border-top:1px solid var(--line);padding:13px 42px 17px}
.style-options{border:0;padding:0;margin:26px 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px}
.style-option{position:relative;display:flex;flex-direction:column;padding:11px 11px 17px;border:1px solid var(--line);background:#fbf8f2;cursor:pointer}
.style-option:has(input:checked){border:2px solid var(--ink);padding:10px 10px 16px;background:#f0eee7}
.style-option:has(input:focus-visible){outline:3px solid #e8623c;outline-offset:3px}
.style-option input{position:absolute;top:18px;right:18px;z-index:1;accent-color:var(--ink);width:16px;height:16px}
.style-art{height:149px;display:grid;grid-template-columns:repeat(3,1fr);gap:5px;padding:16px 12px 10px;background:#e9dccc;overflow:hidden}
.style-art>span{grid-column:1/-1;font-family:var(--serif);font-size:22px;line-height:1.04;letter-spacing:-.04em}
.style-art i{display:block;height:48px;background:#c9b696}
.style-art i:nth-last-child(2){background:#818f77}
.style-art i:last-child{background:#b79578}
.style-art.bold{background:#eee364}
.style-art.bold>span{font-family:var(--display);font-weight:800;font-size:27px;color:var(--ink)}
.style-art.bold i{background:#f17d50}
.style-art.bold i:nth-last-child(2){background:#a7b7f3}
.style-art.bold i:last-child{background:var(--ink)}
.style-art.calm{background:#e7ebe3}
.style-art.calm>span{font-family:var(--body);font-size:22px;font-weight:300;color:#536151}
.style-art.calm i{background:#c0cbbc}
.style-art.calm i:nth-last-child(2){background:#d4d1c3}
.style-art.calm i:last-child{background:#a6b4a1}
.style-option>strong{font-size:14px;font-weight:600;margin-top:15px}
.style-option>span:last-child{font-size:11px;line-height:1.6;color:var(--muted);margin-top:5px}
.create-result{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:start}
.create-result .create-lead{font-size:13px}
.result-copy h2{font-size:39px}
.brief-review{border-top:1px solid var(--line);margin-top:22px;padding-top:5px}
.brief-review h3{font-family:var(--body);font-size:11px;letter-spacing:0;font-weight:600;margin-top:17px}
.brief-review p{font-size:13px;line-height:1.6;color:var(--muted);margin-top:6px;white-space:pre-wrap;overflow-wrap:anywhere;max-height:130px;overflow:auto}
.result-note{font-size:11px;line-height:1.65;color:var(--muted);margin-top:22px}
.result-copy>.button{font-size:12px;min-height:48px;padding:14px 20px;margin-top:19px}
.result-back{display:block}
.result-board{border:1px solid #d8d1c5;background:#fffdf8;padding:9px;box-shadow:5px 9px 20px #24251f0e}
.result-board img{width:100%;height:auto}
.result-board figcaption{font-size:10px;text-align:center;color:var(--muted);padding:10px 0 2px}
@media(max-width:1050px){
.create-step>h2{font-size:39px}
}
@media(max-width:740px){
.create-header{padding:19px 24px}
.create-progress{padding:20px 24px 0;gap:16px}
.create-step{padding:25px 24px}
.create-step>h2{font-size:34px}
.create-actions{flex-wrap:wrap;gap:14px}
.prototype-note{padding-inline:24px}
.style-options{grid-template-columns:1fr}
.style-option{display:grid;grid-template-columns:95px 1fr;column-gap:15px}
.style-art{grid-row:span 2;height:95px;padding:10px}
.style-art>span{font-size:15px}
.style-art.bold>span{font-size:18px}
.style-art.calm>span{font-size:15px}
.style-art i{height:25px}
.style-option>strong{padding-right:25px}
.style-option>span:last-child{grid-column:2}
.create-result{grid-template-columns:1fr}
.result-board{max-width:380px;margin:auto}
}
.photo-guidance{font-size:11px;line-height:1.65;color:var(--muted);margin-top:21px}
.result-secondary{display:flex;gap:20px;align-items:center;flex-wrap:wrap;margin-top:10px}
.text-link{font-size:11px;line-height:1.5;text-decoration:underline;text-underline-offset:4px;color:var(--muted);padding-block:10px}
.text-link:hover{color:var(--ink)}
.wall-result{display:grid;grid-template-columns:1.2fr 1fr;gap:30px;padding-top:30px;align-items:start}
.wall-preview{padding-top:4px}
.wall-preview img{width:100%;height:410px;object-fit:cover;object-position:center}
.wall-preview figcaption{font-size:10px;color:var(--muted);text-align:center;margin-top:10px}
.wall-copy h2{font-size:36px;line-height:1.1;margin-top:13px;outline:0}
.wall-copy .create-lead{font-size:12px;margin-top:15px}
.framed-details{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:18px 0;margin:20px 0}
.framed-details h3{font-family:var(--body);font-size:13px;letter-spacing:0;font-weight:600}
.framed-details>p{font-size:11px;line-height:1.7;color:var(--muted);margin-top:7px}
.framed-details p.framed-total{font-family:var(--display);font-size:31px;line-height:1.2;color:var(--ink);margin:17px 0}
.framed-total span{font-family:var(--body);font-size:11px;display:block;margin-top:6px;color:var(--muted)}
.wall-copy>.button{font-size:12px;min-height:47px;padding:14px 19px}
.wall-copy .result-note{margin-top:12px;font-size:10px}
.wall-copy .result-secondary{gap:13px}
.wall-copy .back-button,.wall-copy .text-link{font-size:10px}
.delivery-preview{padding:15px;background:#e7eadf;margin-top:16px;font-size:12px;line-height:1.6}
.delivery-preview strong{font-weight:600}
.delivery-preview p{font-size:11px;color:#5d6454;margin-top:6px}
.create-progress{gap:25px}
@media(max-width:1050px){
.wall-result{gap:25px}
.wall-copy h2{font-size:32px}
}
@media(max-width:740px){
.create-progress{gap:14px;font-size:10px}
.create-progress li{gap:5px}
.create-progress li:before{width:18px;height:18px;font-size:9px}
.wall-result{grid-template-columns:1fr}
.wall-preview img{height:auto}
.wall-copy h2{font-size:34px}
}
@media(max-width:430px){
.create-progress{gap:8px;font-size:9px;padding-inline:20px}
.create-progress li{gap:4px}
}

/* A slow, manually browsable story ribbon. Motion is managed in concept-v21.js. */
.stories-heading{display:flex;align-items:center;justify-content:space-between;gap:24px}
.story-controls{display:flex;align-items:center;gap:8px;flex:none}
.story-control{display:grid;place-items:center;width:40px;height:40px;border:1px solid #bdb8ad;border-radius:50%;background:transparent;color:var(--ink);font-size:20px;cursor:pointer}
.story-control:hover{background:var(--stone)}
.story-control.motion-toggle{display:flex;gap:7px;width:auto;padding:0 14px;border-radius:24px;font-size:12px}
.story-viewport{overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain;overflow-anchor:none}
.story-viewport::-webkit-scrollbar{display:none}
.story-viewport:focus-visible{outline:2px solid var(--ink);outline-offset:5px}
.story-track{display:flex;align-items:stretch;gap:24px;width:max-content}
.story-track>.story{flex:0 0 340px;width:340px}
.story-track .story-body{min-height:230px}
.story-elena{background:#e8e2d6}
@media(max-width:1050px){.story-track{gap:18px}.story-track>.story{flex-basis:320px;width:320px}.stories-heading h2{font-size:34px}.story-track .story-body{min-height:230px}}
@media(max-width:740px){.stories-heading{align-items:flex-start;flex-direction:column;gap:18px}.story-track>.story{flex-basis:min(320px,calc(100vw - 56px));width:min(320px,calc(100vw - 56px))}.story-track .story-body{min-height:240px}.story-track .story h3{font-size:23px}}

/* Warm light, fine paper grain and quiet contour lines add depth without competing with the action. */
body{position:relative;isolation:isolate;overflow-x:clip;background-color:var(--paper);background-image:radial-gradient(ellipse 600px 470px at 85% 270px,#e7bc957a,transparent 80%),radial-gradient(ellipse 700px 400px at 5% 160px,#d3ddc875,transparent 80%),radial-gradient(ellipse 620px 450px at 100% 1500px,#d0d8c65c,transparent 80%),radial-gradient(ellipse 850px 500px at 0% 2650px,#edc4aa45,transparent 80%)}
body:before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:url('./assets/paper-grain-v21.svg') repeat;mix-blend-mode:multiply;opacity:.42}
.site-header{border-bottom-color:#b9b09f75}
.hero{position:relative;isolation:isolate;padding-top:58px;padding-bottom:68px}
.hero-product{position:relative;isolation:isolate}
.hero-product:before{content:'';position:absolute;z-index:-1;inset:-26px -22px -23px -24px;border:1px solid #a99f8860;border-radius:48% 48% 3px 3px;background:radial-gradient(ellipse at 50% 40%,#d6c6a732,transparent 75%)}
.hero-product:after{content:'';position:absolute;z-index:-2;inset:-45px -40px -42px -43px;border:1px solid #b5ab9340;border-radius:48% 48% 3px 3px}
.oak-frame{box-shadow:8px 20px 30px #6b482025,0 3px 5px #4a311b14}
.oak-frame:hover{box-shadow:8px 20px 30px #6b482030,0 3px 5px #4a311b20}
.transformation{border-top-color:#c0b5a375}
.goal-carousel{box-shadow:0 12px 32px #493c2810;border:1px solid #cfc3b080;background:radial-gradient(ellipse at 5% 5%,#ece8d3,transparent 75%),linear-gradient(130deg,#e9ddcd,#f0e7db 40%,#e1d9c9)}
.goal-slide-copy{position:relative;isolation:isolate;overflow:hidden}
.goal-slide-copy:before{content:'';position:absolute;z-index:-1;width:290px;height:290px;right:-175px;top:25%;border:1px solid #bdb39b60;border-radius:50%;box-shadow:0 0 0 25px #bdb39b12,0 0 0 50px #bdb39b0d}
.at-home{position:relative;isolation:isolate;background:radial-gradient(ellipse at 100% 0,#cbd4bb80,transparent 65%),radial-gradient(ellipse at 0 100%,#e4bd9b60,transparent 70%),#e8e3d8;border:1px solid #d5cebe;box-shadow:0 12px 36px #5a492010}
.at-home:before,.final-create:before{content:'';position:absolute;inset:0;z-index:-1;background:url('./assets/paper-grain-v21.svg') repeat;mix-blend-mode:multiply;opacity:.5;pointer-events:none}
.frame-detail{border-color:#ebe5d8;box-shadow:3px 9px 21px #56422624}
.story-track>.story{border:1px solid #c8bda84d;box-shadow:0 4px 15px #57462d08}
.stories{position:relative}
.story-viewport{padding-bottom:8px}
.final-create{position:relative;isolation:isolate;overflow:hidden;background:radial-gradient(ellipse at 0 100%,#d4bea683,transparent 70%),radial-gradient(ellipse at 100% 0,#c8d4bca1,transparent 65%),linear-gradient(125deg,#efe2d5,#f5e8dc 55%,#ebe9da);border:1px solid #d0c3ae;padding-block:48px;box-shadow:0 10px 35px #69543912}
.final-create:after{content:'';position:absolute;z-index:-1;width:340px;height:340px;border-radius:50%;border:1px solid #9f9e8050;right:-80px;bottom:-180px;box-shadow:0 0 0 24px #9f9e8010,0 0 0 48px #9f9e800b;pointer-events:none}
@media(max-width:1050px){.hero{padding-top:50px;padding-bottom:60px}.hero-product:before{inset:-19px -16px -16px}.hero-product:after{inset:-33px -28px -28px}.final-create{padding-block:42px}}
@media(max-width:740px){.hero{padding-block:36px;gap:48px}.hero-product{width:calc(100% - 30px)}.hero-product:before{inset:-16px}.hero-product:after{inset:-27px}.final-create{padding-block:36px}}
body{background-image:radial-gradient(ellipse 620px 490px at 87% 270px,#e0ac788c,transparent 80%),radial-gradient(ellipse 730px 450px at 3% 160px,#becdab80,transparent 80%),radial-gradient(ellipse 620px 450px at 100% 1500px,#c5d1b76b,transparent 80%),radial-gradient(ellipse 850px 500px at 0% 2650px,#edc4aa55,transparent 80%)}
.final-create{color:var(--paper);background:radial-gradient(ellipse at 0 110%,#b98b5260,transparent 70%),radial-gradient(ellipse at 100% -10%,#8c9b6570,transparent 65%),#29352f;border-color:#4b5746;box-shadow:0 16px 40px #29352f24}
.final-create h2 em{color:var(--paper)}
.final-create:before{mix-blend-mode:soft-light;opacity:.7}
.final-create:after{border-color:#e5d9b942;box-shadow:0 0 0 24px #d9ccb510,0 0 0 48px #d9ccb50a}
.final-reassurance{color:#e2e0d4}