/* A small, real editor with a spread ribbon and inline switches. */
.hero.hero-live-first{row-gap:10px;padding-top:12px}
.hero-live-first .hero-copy h1{font-size:30px;line-height:1.12;letter-spacing:-.8px;max-width:none;margin:auto}
.hero-live-first .hero-copy h1 strong{display:block;font-weight:700}
.home-try-heading-small{display:block;font-size:16px;font-weight:450;letter-spacing:0;line-height:1.25}
.hero-carousel.has-home-try .hero-track{aspect-ratio:1}
.hero-carousel.has-home-try.is-home-try .hero-track{height:auto;aspect-ratio:1;border:0;border-radius:12px}.home-try-slide{box-shadow:inset 0 0 0 1px #dce4d4}
.hero-track>.home-try-slide{background:#f6f8f0;container-type:normal}
.home-try{height:100%;display:flex;flex-direction:column;color:#24463d;text-align:left;min-width:0}
.home-try button{cursor:pointer}.home-try button:focus-visible{outline:2px solid #426539;outline-offset:2px}
.home-try-top{display:flex;align-items:center;justify-content:space-between;padding:4px 12px 0;gap:8px;line-height:1.2}
.home-try-top>button{display:flex;align-items:center;gap:5px;border:0;padding:4px 0;background:transparent;color:#365631;font-size:12px;font-weight:650;min-height:28px;border-radius:4px}
.home-try-top a{font-size:10px;color:#526c5e;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.home-try-top i{display:inline-block;width:6px;height:6px;border-radius:50%;background:#729345}
.home-try-design-row{display:flex;align-items:center;justify-content:space-between;padding:0 12px 4px;gap:7px;min-height:32px}
.home-try-design-row>span{font-size:12px;font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.home-try-design-row>button{border:1px solid #afc399;background:#e7eedb;border-radius:6px;font-size:11px;font-weight:600;color:#294e40;min-height:30px;padding:4px 8px;white-space:nowrap}
.home-try-design-row>button>span{font-size:16px;vertical-align:-1px;margin-right:2px}
.home-try-nav{position:relative;margin:0 12px 5px;min-width:0}
.home-try-ribbon{display:flex;gap:6px;width:100%;overflow-x:auto;overflow-y:hidden;touch-action:pan-y pinch-zoom;overscroll-behavior-x:contain;scrollbar-width:none;padding:3px 30px 4px 3px;min-height:58px;position:relative;user-select:none;-webkit-user-select:none}
.home-try-ribbon::-webkit-scrollbar{display:none}
.home-try-thumb{position:relative;flex:0 0 77px;border:2px solid transparent;border-radius:5px;background:#e4e9da;padding:2px;min-height:49px;color:#24463d}
.home-try-thumb[aria-pressed=true]{border-color:#4f753a;background:#dce9c8;box-shadow:0 0 0 1px #4f753a22}
.home-try-thumb-art{display:block;aspect-ratio:1.64;width:100%;background:linear-gradient(90deg,#f2f1e5 49%,#c9cdbe 50%,#f2f1e5 51%);border-radius:2px;overflow:hidden}
.home-try-thumb img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}.home-try-thumb img:not([src]){visibility:hidden}
.home-try-thumb-number{position:absolute;bottom:2px;left:2px;display:grid;place-items:center;min-width:17px;height:16px;border-radius:2px;background:#fffef4f2;font-size:9px;font-weight:650}
.home-try-thumb[aria-pressed=true] .home-try-thumb-number{background:#426535;color:#fff}
.home-try-nav>[data-try-scroll]{position:absolute;right:0;top:3px;bottom:4px;width:26px;display:grid;place-items:center;padding:0;font-size:28px;line-height:1;background:linear-gradient(90deg,#f6f8f0d9,#f6f8f0);color:#426535;border:0;border-radius:0 4px 4px 0}
.home-try-nav-loading{font-size:11px;padding:15px 4px}
.home-try-workspace{position:relative;flex:1;min-height:72px;margin:0 12px 6px;display:flex;flex-direction:column}
.home-try-canvas{flex:1;min-height:0;display:grid;place-items:center;position:relative;background:#e3e8db;border-radius:5px;overflow:hidden}
.home-try-art{position:relative;max-width:100%;max-height:100%;box-shadow:0 3px 9px #253b3024;flex:none}
.home-try-art>img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}
.home-try-hotspots{position:absolute;inset:0}.home-try-frame{position:absolute;padding:0;border:1px solid transparent;background:transparent;border-radius:2px;min-width:18px;min-height:18px}
.home-try-frame>span{position:absolute;inset:0;display:grid;place-items:center;font-size:18px;color:white;text-shadow:0 1px 4px #000;opacity:0;background:#24472f20;transition:opacity .15s}
.home-try-frame:hover>span,.home-try-frame:focus-visible>span{opacity:1}.home-try-frame[aria-pressed=true]{outline:2px solid #91b144;outline-offset:1px}
.home-try-hint{font-size:10px;color:#3e5d43;line-height:1.2;padding-top:4px;text-align:center;min-height:17px}
.home-try-loading{position:absolute;inset:0;background:#f0f4e4df;display:flex;align-items:center;justify-content:center;font-size:12px;gap:8px;text-align:center}
.home-try-loading[hidden],.home-try-photos[hidden],.home-try-guide[hidden]{display:none}.home-try-loading button{min-height:44px;border-radius:6px;background:#d8ee9f;padding:8px}
.home-try-photos{position:absolute;inset:auto 0 0;z-index:5;background:#fffef7;box-shadow:0 -3px 16px #233b3830;border:1px solid #c8d8b3;border-radius:9px;padding:0 9px 8px}
.home-try-photo-head{display:flex;align-items:center;justify-content:space-between;font-size:11px;font-weight:600;gap:6px}.home-try-photo-head button{display:grid;place-items:center;font-size:24px;line-height:1;width:44px;height:36px;background:transparent;color:#31584d}
[data-try-photo-list]{display:flex;gap:8px;justify-content:center}[data-try-photo-list] button{padding:2px;border:2px solid transparent;border-radius:5px;background:#edf1e8;width:52px;height:60px}
[data-try-photo-list] button[aria-pressed=true]{border-color:#658b3d}[data-try-photo-list] img{width:100%;height:100%;object-fit:cover;pointer-events:none}
.home-try-budget{padding:7px 12px;background:#244b3e;color:#f7f9ee}
.home-try-budget-title{display:flex;gap:7px;justify-content:space-between;align-items:center;font-size:14px;font-weight:650;line-height:1.1}
.home-try-from{color:#d8ee9f;font-size:10px;white-space:nowrap;background:transparent;padding:0 0 0 3px;min-height:29px;line-height:1.1}.home-try-from strong{font-size:22px;font-weight:700}
.home-try-options{display:grid;grid-template-columns:1fr 1fr;gap:5px 7px;align-items:center;margin-top:4px}
.home-try-segment{display:flex;align-items:stretch;border:1px solid #88a281;border-radius:6px;background:#193b31;padding:2px;min-width:0}
.home-try-segment button{flex:1;min-width:0;border:0;border-radius:4px;background:transparent;color:#e6eddc;font-size:10px;padding:6px 2px;min-height:29px;line-height:1.2;white-space:nowrap}
.home-try-segment button[aria-pressed=true]{background:#e6f1cc;color:#234639;box-shadow:0 1px 3px #10281a40;font-weight:650}
.home-try-options>span{grid-column:1/-1;text-align:center;font-size:9px;line-height:1.15;color:#dae7d0}
.home-try.is-gloss .home-try-art:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 20%,#fff6 38%,#fff1 45%,transparent 65%)}
.has-home-try .hero-price-action{min-height:44px;margin-top:8px;padding:10px 16px;font-size:15px}
.has-home-try .hero-pagination{flex-wrap:nowrap;justify-content:flex-start;min-height:32px;padding:0;gap:0}.has-home-try .hero-pagination button{height:32px;width:24px}
.has-home-try .hero-count{font-size:10px;margin-left:5px}.has-home-try .hero-pagination .hero-more{margin-left:auto;width:auto;font-size:11px;gap:5px;display:flex;align-items:center;background:transparent;color:#476648;padding:0 1px 0 8px;white-space:nowrap}
.hero-pagination .hero-more:before{display:none}.is-home-try .hero-arrow{display:none}
.home-try-guide{position:fixed;inset:0;z-index:1200;pointer-events:none}
.home-try-spot{position:fixed;border-radius:9px;box-shadow:0 0 0 9999px #102a24a8;outline:2px solid #d7f1a7;outline-offset:1px;pointer-events:none}
.home-try-coach{position:fixed;display:flex;align-items:center;gap:8px;background:#f5ffdd;color:#224237;border:1px solid #cadfa2;border-radius:10px;padding:10px 8px 10px 11px;box-shadow:0 5px 22px #0b211f35;pointer-events:auto;line-height:1.25;text-align:left}
.home-try-coach-arrow{font-size:28px;color:#4d7233;flex:none;align-self:flex-start}
.home-try-coach>div{flex:1}.home-try-coach strong{display:block;font-size:14px;font-weight:700}.home-try-coach [data-coach-detail]{display:block;margin-top:4px;font-size:11px;color:#4d654b}
.home-try-coach>button{display:grid;place-items:center;align-self:flex-start;flex:none;width:32px;height:32px;font-size:23px;line-height:1;padding:0;border:0;border-radius:50%;background:#e4edcf;color:#365333;cursor:pointer}
.home-try-top .is-inviting{animation:homeTryInvite .8s ease-in-out 2}
@keyframes homeTryInvite{50%{background:#e0f3af;box-shadow:0 0 0 5px #cce58e66}}
@media(min-width:761px){.hero-live-first .hero-copy h1{font-size:35px}.home-try-heading-small{font-size:17px}.home-try-top{padding-top:7px}.home-try-top>button{font-size:14px;min-height:31px}.home-try-design-row>span{font-size:14px}.home-try-design-row>button{font-size:12px;min-height:33px}.home-try-thumb{flex-basis:96px}.home-try-budget-title{font-size:18px}.home-try-segment button{font-size:13px;min-height:34px}.home-try-options>span,.home-try-hint{font-size:11px}.home-try-workspace{margin-bottom:8px}}
@media(max-width:760px){#app:has(.hero-live-first)>.wrap .topbar{height:62px}.hero.hero-live-first{padding-top:5px;row-gap:8px}.hero-live-first .hero-copy h1{font-size:28px}.hero-live-first .home-try-heading-small{font-size:14px}.hero-live-first>.code-box{margin-top:10px}}
@media(max-width:350px){.home-try-top,.home-try-design-row{padding-left:8px;padding-right:8px}.home-try-top>button{font-size:11px}.home-try-top a{font-size:9px}.home-try-nav{margin-left:8px;margin-right:8px}.home-try-workspace{margin-left:8px;margin-right:8px}.home-try-budget{padding-left:8px;padding-right:8px}.home-try-budget-title{font-size:12px}.home-try-from strong{font-size:19px}.home-try-segment button{font-size:9px}.home-try-hint{font-size:9px}.has-home-try .hero-pagination button[data-hero-page]{width:19px}.has-home-try .hero-count{display:none}.has-home-try .hero-pagination .hero-more{font-size:10px}}
@media(max-width:760px) and (max-height:700px){.home-try-top{padding-top:2px}.home-try-top>button{min-height:24px}.home-try-design-row{min-height:28px;padding-bottom:1px}.home-try-design-row>button{min-height:27px;padding-top:2px;padding-bottom:2px}.home-try-nav{margin-bottom:3px}.home-try-thumb{flex-basis:69px;min-height:43px}.home-try-ribbon{min-height:49px}.home-try-budget{padding-top:3px;padding-bottom:5px}.home-try-hint{padding-top:3px;min-height:15px}.home-try-workspace{margin-bottom:4px}.home-try-options{margin-top:1px;row-gap:3px}}
@media(max-width:760px) and (max-height:620px){
 .hero-live-first .hero-copy h1{font-size:24px}.hero-live-first .home-try-heading-small{font-size:13px}.hero-live-first .home-try-heading-small:first-child,.hero-live-first .hero-copy h1 strong{display:inline}.hero-live-first .home-try-heading-small:first-child{margin-right:4px}
 .home-try{display:grid;grid-template-columns:55% 45%;grid-template-rows:32px auto minmax(72px,1fr) auto}
 .home-try-top{grid-column:1;grid-row:1;padding-right:0}.home-try-top>button{font-size:10px;white-space:nowrap}.home-try-top a{display:none}
 .home-try-design-row{grid-column:2;grid-row:1;padding-left:0;justify-content:flex-end}.home-try-design-row>span{display:none}.home-try-design-row>button{font-size:10px;padding-left:5px;padding-right:5px}
 .home-try-nav{grid-column:1/-1;grid-row:2}.home-try-workspace{grid-column:1/-1;grid-row:3}.home-try-budget{grid-column:1/-1;grid-row:4}
 .home-try-photos{position:fixed;left:20px;right:20px;bottom:24px;top:auto;z-index:20}.home-try-photos button[data-try-photo]{height:90px;width:60px}
}
@media(prefers-reduced-motion:reduce){.home-try *{transition:none;animation:none}}

/* Keep the interactive slide inside the same square as photographs, even at 320px. */
@media(max-width:400px){
 .home-try{display:grid;grid-template-columns:55% 45%;grid-template-rows:32px auto minmax(65px,1fr) auto}
 .home-try-top{grid-column:1;grid-row:1;padding-right:0;padding-top:0}.home-try-top>button{font-size:10px;white-space:nowrap;min-height:28px}.home-try-top a{display:none}
 .home-try-design-row{grid-column:2;grid-row:1;padding-left:0;padding-bottom:0;justify-content:flex-end}.home-try-design-row>span{display:none}.home-try-design-row>button{font-size:10px;padding:3px 5px;min-height:28px}
 .home-try-nav{grid-column:1/-1;grid-row:2;margin-bottom:3px}.home-try-ribbon{min-height:46px}.home-try-thumb{flex-basis:63px;min-height:38px}
 .home-try-workspace{grid-column:1/-1;grid-row:3;min-height:65px;margin-bottom:4px}.home-try-hint{font-size:9px;min-height:14px;padding-top:2px}
 .home-try-budget{grid-column:1/-1;grid-row:4;padding-top:3px;padding-bottom:5px}.home-try-budget-title{font-size:12px}.home-try-options{margin-top:1px;row-gap:3px}.home-try-options>span{font-size:8px}.home-try-from strong{font-size:19px}
}
