body{margin:0;background:#fbfaf9}
*{box-sizing:border-box}
a{color:#332c2a}a:hover{color:#c94c2d}
.page{font-family:Outfit,ui-sans-serif,system-ui,sans-serif;color:#332c2a;background:#fbfaf9;overflow-x:clip;position:relative;isolation:isolate;timeline-scope:--day,--night}
.wrap{max-width:1240px;margin:0 auto;padding:0 20px}
.row{display:grid;grid-template-columns:160px minmax(0,1fr);gap:0 0;padding:0 0 112px}
.m{font:600 12px/16px Outfit,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#67625f;padding-top:10px}
.h2{margin:0;font:600 clamp(30px,3.4vw,44px)/1.15 Outfit,sans-serif;letter-spacing:-.02em;max-width:720px}
.p{margin:16px 0 0;font:400 18px/28px Outfit,sans-serif;color:#67625f;max-width:560px}
.sm{margin:14px 0 0;font:500 12px/18px Outfit,sans-serif;letter-spacing:.02em;color:#67625f;max-width:640px}
.night .m{color:#8c8582}.night .sm{color:#cfc7c2}.night .h2{color:#f3f0ee}.night .p{color:#cfc7c2}.night a{color:#f3f0ee}
/* nav */
/* nav: transparent over the hero so nothing grey sits on the sun; goes espresso as the night rises */
@property --navink{syntax:"<color>";inherits:true;initial-value:#67625f}
@property --navink2{syntax:"<color>";inherits:true;initial-value:#332c2a}
.nav{position:sticky;top:0;z-index:20;background:#fbfaf9;border-bottom:1px solid #e3e1df;--navink:#67625f;--navink2:#332c2a}
.nav::before{content:"";position:absolute;inset:-1px 0 -1px;background:#332c2a;opacity:0;pointer-events:none}
.nav .wrap{position:relative}
.nav .logo{display:flex;position:relative}
.nav .logo img{height:24px;width:auto;display:block}
.nav .logo-dark{position:absolute;left:0;top:0;opacity:0}
.nav .login{margin-left:auto;font-weight:600;color:var(--navink2)}
@keyframes navnight{to{opacity:1}}
@keyframes navnightink{to{--navink:#cfc7c2;--navink2:#f3f0ee}}
@keyframes navdark{from{background:rgba(251,250,249,0);border-color:rgba(227,225,223,0)}to{background:rgba(251,250,249,.92);border-color:#e3e1df}}
@keyframes navink{to{color:#cfc7c2}}
@keyframes navink2{to{color:#f3f0ee}}
@keyframes fadeout{to{opacity:0}}
@keyframes fadein{from{opacity:0}to{opacity:1}}
@supports (animation-timeline:scroll()){
  .nav{background:transparent;animation:navdark linear both,navnightink linear both;animation-timeline:scroll(root),--day;animation-range:40vh 90vh,exit 55% exit 100%}
  .nav::before{animation:navnight linear both;animation-timeline:--day;animation-range:exit 55% exit 100%}
  .nav .logo-dark{animation:navnight linear both;animation-timeline:--day;animation-range:exit 55% exit 100%}
  .nightwrap{view-timeline-name:--night}
  .sun2{animation:setM linear both;animation-timeline:--day;animation-range:exit 10% exit 100%}
}
.nav .wrap{display:flex;align-items:center;gap:32px;height:68px}
.nav .login{white-space:nowrap}
.nav a{text-decoration:none;font:500 14px/20px Outfit,sans-serif;color:var(--navink)}
.nav a.btn,.nav a.btn:hover,.night a.btn,.night a.btn:hover{color:#fff}
.btn{display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 22px;border-radius:8px;background:#c94c2d;color:#fff;font:600 14px/20px Outfit,sans-serif;text-decoration:none;border:0;cursor:pointer;transition:background .25s}
.btn:hover{background:#ae4024;color:#fff}
/* hero */
.hero{position:relative;min-height:calc(100vh - 68px);display:flex;align-items:center}
/* THE sun: the TanPlan mark, fixed behind every section. One continuous move keyed to the day span: full sun in the hero, then it lowers, dims and turns to rust across the afternoon, and finally drops behind the horizon as the night arrives. */
.sun{position:fixed;left:calc(50% + 150px);bottom:-4vw;width:min(52vw,760px);height:auto;color:#f25929;z-index:-1;will-change:transform,opacity,color;pointer-events:none}
/* the copy stops before the sun starts, at every desktop width; the trust line lives below the hero, not in it */
.hero .copy{max-width:min(610px,calc(50vw - 40px))}
.proof{margin:44px 0 0;padding-top:22px;border-top:1px solid #e3e1df;font:600 20px/28px Outfit,sans-serif;color:#332c2a;display:flex;gap:12px;align-items:flex-start}
.proof svg{flex:0 0 auto;margin-top:7px}
.hero .proof{max-width:540px}
.ticks{margin:18px 0 0;display:flex;flex-wrap:wrap;gap:10px 22px;font:500 14px/20px Outfit,sans-serif;color:#67625f}
.ticks span{display:inline-flex;align-items:center;gap:7px}
.ticks svg{flex:0 0 auto}

.hero .wrap{position:relative;z-index:3;padding-top:24px;padding-bottom:64px;width:100%}
.strap{margin:0;font-weight:700;font-size:clamp(48px,5.4vw,80px);line-height:.98;letter-spacing:-.035em;max-width:760px}
.strap span{display:block;font-variation-settings:"wght" 300;animation:settle 1.8s cubic-bezier(.22,1,.36,1) forwards}
.strap span:nth-child(1){animation-delay:.1s}.strap span:nth-child(2){animation-delay:.22s}.strap span:nth-child(3){animation-delay:.34s}
@keyframes settle{to{font-variation-settings:"wght" 700}}
.hero .p{transition:color .3s}
/* scroll-driven: sun sets, night rises, ink pales */
/* cover range on the day span: at the top of the page progress is already ~20%; the hero bottom passes at ~37%; the night reaches the viewport bottom at ~81%; 100% when the night fills it */
@keyframes day{
  0%{opacity:1;color:#f25929;transform:none}
  36%{opacity:1;color:#f25929;transform:none}
  70%{opacity:.5;color:#dc5a2c;transform:translate(2vw,8vh)}
  81%{opacity:.45;color:#c94c2d;transform:translate(3vw,12vh)}
  100%{opacity:.45;color:#c94c2d;transform:translate(5vw,80vh)}
}
@keyframes dayM{
  0%{opacity:1;color:#f25929;transform:none}
  36%{opacity:1;color:#f25929;transform:none}
  70%{opacity:.5;color:#dc5a2c;transform:translate(2vw,4vh)}
  81%{opacity:.42;color:#c94c2d;transform:translate(3vw,7vh)}
  100%{opacity:.38;color:#c94c2d;transform:translate(4vw,22vh)}
}
@supports (animation-timeline:scroll()){
  .sun{animation:day linear both;animation-timeline:--day;animation-range:cover 0% cover 100%}
  .day{view-timeline-name:--day}
  .rise{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 45%}
  .rise.d1{animation-range:entry 5% entry 50%}.rise.d2{animation-range:entry 10% entry 55%}.rise.d3{animation-range:entry 15% entry 60%}
}
@keyframes setM{to{transform:translateY(34vw)}}
@keyframes fadeSun{from{opacity:1;transform:none}to{opacity:0;transform:translateY(10vh)}}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
/* phones */
.phones{display:flex;gap:40px;margin-top:48px;align-items:flex-start}
.ph{width:200px;border-radius:30px;background:#0b0b0b;padding:7px;flex:0 0 auto;box-shadow:inset 0 0 0 1.5px #2a2a2a,0 8px 24px rgba(51,44,42,.12);transition:transform .6s cubic-bezier(.22,1,.36,1),box-shadow .6s;box-shadow:0 8px 24px rgba(51,44,42,.12)}
.ph:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(51,44,42,.14)}
.ph .scr{border-radius:21px;overflow:hidden;height:380px;display:flex;flex-direction:column}
.dots{display:none}
.ph .top{padding:8px 12px 10px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;font:700 10px/14px Outfit,sans-serif;letter-spacing:.08em;text-transform:uppercase}
.ph .sb{flex-basis:100%;display:flex;justify-content:space-between;align-items:center;font:600 9px/12px Outfit,sans-serif;letter-spacing:0;text-transform:none;opacity:.9;margin-bottom:10px}
.ph .sb svg{display:block}
.ph .tab{margin-top:auto;display:grid;grid-template-columns:repeat(4,1fr);padding:8px 6px 14px;border-top:1px solid rgba(0,0,0,.08);font:500 7.5px/10px Outfit,sans-serif;text-align:center;opacity:.6}
.ph .tab .on{opacity:1;font-weight:700}
.ph .home{height:3px;width:60px;border-radius:9999px;background:currentColor;opacity:.35;margin:0 auto 6px}
.ph .pill{font:600 8px/12px Outfit,sans-serif;padding:3px 8px;border-radius:9999px;border:1px solid currentColor}
.ph .bd{padding:12px 14px;display:flex;flex-direction:column;gap:8px}
.ph .t1{margin:0;font:400 9px/13px Outfit,sans-serif;opacity:.7}
.ph .t2{margin:0;font:600 15px/18px Outfit,sans-serif}
.ph .c{padding:9px 10px;border-radius:9px}
.ph .c .l{margin:0;font:600 7px/10px Outfit,sans-serif;letter-spacing:.1em;text-transform:uppercase;opacity:.7}
.ph .c .v{margin:3px 0 0;font:600 11px/14px Outfit,sans-serif}
.ph .c .s{margin:1px 0 0;font:400 9px/12px Outfit,sans-serif;opacity:.8}
.ph .cta{margin-top:4px;height:30px;border-radius:6px;display:flex;align-items:center;justify-content:center;font:600 9px/12px Outfit,sans-serif}
.cap{margin:14px 0 0;font:400 13px/19px Outfit,sans-serif;color:#67625f;max-width:200px}
.cap b{display:block;font-weight:600;color:#332c2a;font-size:14px}
/* index + the desk. The index scrolls; one Studio screen stays put and changes state with it */
#inside{timeline-scope:--m1,--m2,--m3,--m4,--m5,--m6}
.scene{display:grid;grid-template-columns:minmax(0,1fr) 540px;gap:64px;align-items:start;margin-top:40px}
.idx{border-top:1px solid #332c2a}
.idx a{display:block;padding:32px 0;min-height:36vh;box-sizing:border-box;border-bottom:1px solid #e3e1df;text-decoration:none;position:relative}
.idx a:hover h3{transform:translateX(8px)}
.idx h3{margin:0;font:600 22px/28px Outfit,sans-serif;color:#332c2a;transition:transform .45s cubic-bezier(.22,1,.36,1)}
.idx .run{margin:10px 0 0;font:400 14px/23px Outfit,sans-serif;color:#67625f;max-width:420px}
.idx a:nth-child(1){view-timeline-name:--m1}.idx a:nth-child(2){view-timeline-name:--m2}.idx a:nth-child(3){view-timeline-name:--m3}.idx a:nth-child(4){view-timeline-name:--m4}.idx a:nth-child(5){view-timeline-name:--m5}.idx a:nth-child(6){view-timeline-name:--m6}
.stage{position:sticky;top:104px}
.desk{position:relative;width:100%;aspect-ratio:540/370;background:#fff;border:1px solid #e3e1df;border-radius:16px;overflow:hidden;box-shadow:0 24px 60px rgba(51,44,42,.10);font-family:Outfit,sans-serif;color:#332c2a}
.dtop{height:34px;display:flex;align-items:center;gap:6px;padding:0 14px;border-bottom:1px solid #eeeae7;background:#fbfaf9}
.dtop i{width:8px;height:8px;border-radius:50%;background:#e3e1df;display:block}
.dtop span{margin-left:auto;margin-right:auto;font:500 10px/14px Outfit,sans-serif;color:#8c8582;background:#fff;border:1px solid #eeeae7;border-radius:6px;padding:2px 10px}
.pane{position:absolute;top:34px;left:0;right:0;bottom:0;display:grid;grid-template-columns:118px minmax(0,1fr);opacity:0;background:#fff}
.pane.p1{opacity:1}
.pane aside{border-right:1px solid #eeeae7;padding:14px 0;background:#fbfaf9;display:flex;flex-direction:column;gap:2px}
.pane aside b{display:flex;align-items:center;gap:6px;padding:0 14px 12px;font:700 11px/14px Outfit,sans-serif;color:#332c2a}
.pane aside b i{width:10px;height:10px;border-radius:50%;background:#f25929;display:block}
.pane aside span{padding:6px 14px;font:500 10.5px/14px Outfit,sans-serif;color:#8c8582;border-left:2px solid transparent}
.pane aside span.on{color:#332c2a;font-weight:600;border-left-color:#f25929;background:#fff}
.pane .main{padding:16px 18px;display:flex;flex-direction:column;gap:12px;min-width:0}
.pane .hd{display:flex;justify-content:space-between;align-items:baseline}
.pane .hd h4{margin:0;font:600 14px/18px Outfit,sans-serif}
.pane .hd span{font:400 10.5px/14px Outfit,sans-serif;color:#8c8582}
.pane .hd em{font:600 10.5px/14px Outfit,sans-serif;color:#c94c2d;font-style:normal}
/* p1 diary */
.diary{display:grid;grid-template-columns:40px repeat(3,minmax(0,1fr));gap:4px;font:500 9.5px/12px Outfit,sans-serif}
.diary .h{color:#8c8582;font-weight:600;padding-bottom:4px;text-align:center}
.diary .t{color:#8c8582;font-variant-numeric:tabular-nums;align-self:start;padding-top:4px}
.diary .cell{height:34px;box-sizing:border-box;border-radius:5px;background:#f6f3f1}
.diary .bk{height:34px;box-sizing:border-box;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;border-radius:5px;padding:5px 7px;background:#f3e7df;color:#332c2a;border-left:2px solid #c94c2d}
.diary .bk b{display:block;font-weight:600}
.diary .bk.mem{background:#eeeae7;border-left-color:#332c2a}
.toast{margin-top:auto;display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:8px;background:#332c2a;color:#fff;font:500 10.5px/14px Outfit,sans-serif}
.toast i{width:7px;height:7px;border-radius:50%;background:#f25929;display:block;flex:0 0 auto}
.toast span{margin-left:auto;color:#cfc7c2}
/* p2 sales list */
.lst{display:flex;flex-direction:column}
.lst div{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) 54px 56px;gap:8px;align-items:center;padding:8px 0;border-bottom:1px solid #eeeae7;font:500 10.5px/14px Outfit,sans-serif}
.lst div span:nth-child(2){color:#8c8582}
.lst div span:nth-child(3){text-align:right;font-variant-numeric:tabular-nums}
.lst .tag{justify-self:end;font:600 8.5px/12px Outfit,sans-serif;padding:2px 7px;border-radius:9999px;background:#eef6ee;color:#2d6a3a}
.lst .tag.rec{background:#f3e7df;color:#c94c2d}
.lst .tag.rc{background:#332c2a;color:#fff}
/* p3 beds */
.beds{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.bed{border:1px solid #eeeae7;border-radius:10px;padding:10px;font:500 10px/13px Outfit,sans-serif}
.bed b{display:block;font:600 11px/14px Outfit,sans-serif}
.bed .st{margin-top:2px;color:#8c8582}
.bed .bar{margin-top:8px;height:4px;border-radius:9999px;background:#eeeae7;overflow:hidden}
.bed .bar i{display:block;height:100%;width:62%;background:#f25929;border-radius:9999px}
.bed .go{margin-top:8px;height:22px;border-radius:5px;background:#332c2a;color:#fff;display:flex;align-items:center;justify-content:center;font:600 9.5px/12px Outfit,sans-serif}
.bed.ready{border-style:dashed}
.till{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-radius:8px;background:#fbfaf9;border:1px solid #eeeae7;font:500 10.5px/14px Outfit,sans-serif}
.till b{font:600 16px/20px Outfit,sans-serif;font-variant-numeric:tabular-nums}
/* p4 rota */
.rota{display:grid;grid-template-columns:52px repeat(7,minmax(0,1fr));gap:4px;font:500 9.5px/12px Outfit,sans-serif}
.rota .h{color:#8c8582;font-weight:600;text-align:center;padding-bottom:4px}
.rota .n{color:#332c2a;font-weight:600;align-self:center}
.rota .sh{height:30px;border-radius:5px;background:#f3e7df;display:flex;align-items:center;justify-content:center;font-size:8.5px;color:#332c2a}
.rota .sh.l{background:#eeeae7}
.rota .off{height:30px;border-radius:5px;background:#f6f3f1}
.rota .sh.me{background:#332c2a;color:#fff}
/* p5 journey */
.flow{display:flex;flex-direction:column;gap:0;position:relative}
.flow div{display:grid;grid-template-columns:16px minmax(0,1fr) auto;gap:10px;align-items:center;padding:7px 0;font:500 10.5px/14px Outfit,sans-serif}
.flow div i{width:10px;height:10px;border-radius:50%;border:2px solid #332c2a;background:#fff;display:block;justify-self:center;position:relative;z-index:1}
.flow div.hot i{background:#f25929;border-color:#f25929}
.flow div span:last-child{color:#8c8582;font-size:9.5px}
.flow::before{content:"";position:absolute;left:7px;top:14px;bottom:14px;width:1px;background:#e3e1df}
.flow .msg{margin:2px 0 4px 26px;padding:7px 9px;border-radius:7px;background:#f3e7df;font:400 9.5px/13px Outfit,sans-serif;color:#332c2a}
/* p6 reports */
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.tile{border:1px solid #eeeae7;border-radius:10px;padding:10px}
.tile .k{margin:0;font:600 8.5px/12px Outfit,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#8c8582}
.tile .v{margin:4px 0 0;font:600 16px/20px Outfit,sans-serif;font-variant-numeric:tabular-nums}
.tile .d{margin:1px 0 0;font:400 9.5px/12px Outfit,sans-serif;color:#2d6a3a}
.chart{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;align-items:end;height:70px;padding:0 4px;border-bottom:1px solid #eeeae7}
.chart i{display:block;border-radius:3px 3px 0 0;background:#f3e7df;transform-origin:bottom}
.chart i.hi{background:#f25929}
.chart+div{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;padding:4px 4px 0;font:500 9px/12px Outfit,sans-serif;color:#8c8582;text-align:center}
@keyframes pane{from{opacity:0}to{opacity:1}}
@keyframes focus{0%{color:#b5aeaa}30%,80%{color:#332c2a}100%{color:#b5aeaa}}
@keyframes focus1{0%,80%{color:#332c2a}100%{color:#b5aeaa}}
@keyframes focus6{0%{color:#b5aeaa}30%,100%{color:#332c2a}}
@keyframes toast{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes grow{from{transform:scaleY(.15)}to{transform:none}}
@supports (animation-timeline:scroll()){
  .pane{animation:pane linear both;animation-range:cover 46% cover 58%}
  .pane.p1{animation:none}.pane.p2{animation-timeline:--m2}.pane.p3{animation-timeline:--m3}.pane.p4{animation-timeline:--m4}.pane.p5{animation-timeline:--m5}.pane.p6{animation-timeline:--m6}
  .idx h3{animation:focus linear both;animation-range:cover 46% cover 86%}
  .idx a:nth-child(1) h3{animation-name:focus1;animation-timeline:--m1}.idx a:nth-child(2) h3{animation-timeline:--m2}.idx a:nth-child(3) h3{animation-timeline:--m3}.idx a:nth-child(4) h3{animation-timeline:--m4}.idx a:nth-child(5) h3{animation-timeline:--m5}.idx a:nth-child(6) h3{animation-name:focus6;animation-timeline:--m6}
  .toast{animation:toast linear both;animation-timeline:--m1;animation-range:cover 40% cover 52%}
  .chart i{animation:grow linear both;animation-timeline:--m6;animation-range:cover 50% cover 66%}
}
/* night */
.nightwrap{position:relative;z-index:1;margin-top:24px;padding-top:320px;padding-bottom:40px}
.nightwrap .dusk{position:absolute;inset:0;z-index:0;background:linear-gradient(to bottom,rgba(51,44,42,0) 0,rgba(51,44,42,.06) 50px,rgba(51,44,42,.18) 105px,rgba(51,44,42,.38) 170px,rgba(51,44,42,.62) 235px,rgba(51,44,42,.84) 290px,#332c2a 340px)}
.nightwrap>.wrap,.horizon{position:relative;z-index:1}
.sun2{display:none}
.horizon{position:absolute;left:0;right:0;top:340px;height:1px;background:#574d49;z-index:1}
.dawn{position:relative;height:64px;border-top:1px solid #e3e1df;overflow:hidden}
.money{display:grid;grid-template-columns:minmax(0,1fr) 72px minmax(0,1.2fr) 72px minmax(0,1fr);align-items:center;margin-top:40px;gap:0}
.box{padding:24px;border:1px solid #574d49;border-radius:16px;transition:border-color .25s}
.box:hover{border-color:#f25929}
.box .k{margin:0;font:600 11px/16px Outfit,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#8c8582}
.box .v{margin:6px 0 0;font:600 22px/28px Outfit,sans-serif;color:#f3f0ee}
.box .s{margin:4px 0 0;font:400 13px/19px Outfit,sans-serif;color:#cfc7c2}
.step{width:44px;height:44px;border-radius:8px;border:1px solid #574d49;background:transparent;color:#f3f0ee;font:600 20px/1 Outfit,sans-serif;cursor:pointer;transition:border-color .2s}
.step:hover{border-color:#f25929}
.receipt{margin-top:40px;padding:28px;border:1px solid #574d49;border-radius:16px;max-width:520px;font-variant-numeric:tabular-nums}
.hero .gains{margin:14px 0 0;max-width:520px;font:500 17px/26px Outfit,sans-serif;color:#332c2a}
#brand .p .lead{font-weight:600;color:#332c2a}
/* pricing: the live site's worked examples as presets, then two counters */
.receipt{max-width:560px}
.receipt .rk{margin:0 0 16px;font:600 12px/16px Outfit,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#8c8582}
.receipt .rl{margin:0 0 10px;font:400 14px/20px Outfit,sans-serif;color:#cfc7c2}
.presets{display:grid;grid-template-columns:minmax(0,1fr);grid-auto-rows:1fr;gap:8px;margin:0 0 12px}
.chip{display:flex;justify-content:space-between;align-items:center;gap:16px;width:100%;min-height:52px;padding:14px 20px;border-radius:12px;border:1px solid #574d49;background:transparent;color:#f3f0ee;font:600 15px/20px Outfit,sans-serif;text-align:left;cursor:pointer;transition:border-color .2s}
.chip em{font-style:normal;font-weight:400;color:#cfc7c2;white-space:nowrap}
.chip:hover{border-color:#cfc7c2}
.chip[aria-pressed="true"]{border:2px solid #f25929;padding:13px 19px}
.chip[aria-pressed="true"] em{color:#f3f0ee}
/* pricing: copy and calculator side by side on wide screens, stacked below 1100px */
.pricecopy .sm{margin-top:28px;max-width:460px}
@media (min-width:1101px){
  .pricegrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:start}
  .pricegrid .receipt{margin-top:0;max-width:none}
  .pricegrid .price{font-size:clamp(56px,5vw,72px) !important;line-height:1.02 !important}
  .pricegrid .price span{display:inline-block;text-wrap:balance}
}
.receipt .line{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0;border-bottom:1px dashed #574d49;color:#f3f0ee;font:400 16px/24px Outfit,sans-serif}
.receipt .line>span:first-child{display:flex;flex-direction:column}
.receipt .line small{font:400 13px/18px Outfit,sans-serif;color:#cfc7c2;margin-top:2px}
.receipt .line b{font-weight:600}
.receipt .ctl{display:inline-flex;align-items:center;gap:10px;flex:0 0 auto;margin-left:auto}
.receipt .ctl .n{min-width:28px;text-align:center}.receipt .ctl .c{min-width:52px;text-align:right}
.receipt .tot{display:flex;justify-content:space-between;align-items:baseline;padding:18px 0 0;color:#f3f0ee}
.receipt .tot>span{font:600 16px/24px Outfit,sans-serif}
.receipt .tot b{font:700 44px/48px Outfit,sans-serif;letter-spacing:-.02em}
.receipt .multi{margin:16px 0 0;font:400 14px/20px Outfit,sans-serif;color:#cfc7c2}
.step:disabled{opacity:.35;cursor:default}.step:disabled:hover{border-color:#574d49}
.chip:focus-visible,.step:focus-visible,.demo input:focus-visible,.demo .btn:focus-visible{outline:2px solid #f25929;outline-offset:2px}
/* demo form, on the night ground */
.demo{margin-top:24px;display:flex;flex-direction:column;gap:16px;max-width:520px}
.demo .two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.demo label{display:flex;flex-direction:column;gap:6px;font:600 14px/20px Outfit,sans-serif;color:#f3f0ee}
.demo label span{font-weight:400;font-size:13px;line-height:18px;color:#cfc7c2}
.demo input{height:48px;padding:0 14px;border:1px solid #8c8582;border-radius:8px;background:transparent;color:#f3f0ee;font:400 16px Outfit,sans-serif}
.demo input[aria-invalid="true"]{border-color:#f25929}
.demo .go{display:flex;gap:20px;align-items:center;flex-wrap:wrap;margin-top:4px}
.demo .go a{font:600 15px/20px Outfit,sans-serif}
.demo .err{display:none;margin:0;font:500 14px/20px Outfit,sans-serif;color:#f3f0ee;padding-left:12px;border-left:2px solid #f25929}
.demo .fine{margin:0;font:400 12px/18px Outfit,sans-serif;color:#8c8582}
.sent{margin-top:24px}

/* footer */
.foot .legal{max-width:min(760px,calc(100% - 400px))}
.foot .dawn{position:absolute;right:max(20px,calc(50% - 620px));bottom:-170px;width:320px;height:auto}
.foot{position:relative;z-index:1;background:#fbfaf9;overflow:hidden;padding:72px 0 48px}
.foot .grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px}
.foot a{color:#332c2a;text-decoration:none;font:400 14px/24px Outfit,sans-serif;display:block}
.foot a:hover{color:#c94c2d}
.foot .k{margin:0 0 8px;font:600 12px/16px Outfit,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#67625f}
@media (prefers-reduced-motion:reduce){.sun,.strap,.strap span,.hero .p,.rise,.ph,.pane,.idx h3,.toast,.chart i{animation:none !important;transition:none !important;opacity:1;transform:none}.pane{opacity:0}.pane.p1{opacity:1}.idx a{min-height:0}.sun{opacity:.5}.strap span{font-variation-settings:"wght" 700}}
/* headings balance their lines, so no single word is left alone on the last line */
.h2{text-wrap:balance}
/* below 1100px the sun no longer fits beside the copy: it drops BELOW it, never behind it, so no grey or rust ever sits on orange */
@media (max-width:1100px){
  .hero{min-height:auto}
  .hero .wrap{padding-bottom:40vw}
  .hero .copy{max-width:100%}
  .sun{left:42vw;bottom:-30vw;width:80vw}
  .scene{grid-template-columns:minmax(0,1fr) 440px;gap:40px}
  .pane{grid-template-columns:100px minmax(0,1fr)}.pane .main{padding:12px 14px;gap:9px}
}
@media (max-width:860px){
  .row{grid-template-columns:minmax(0,1fr);padding-bottom:64px}
  .m{padding:0 0 10px}
  .nav .links{display:none !important}
  .nav .wrap{gap:16px}.nav a.btn{white-space:nowrap;padding:0 16px}
  /* phone: the sun lives in the hero, then sets once more behind the dusk; nothing fixed behind full-width text */
  /* phone: the sun stays in the hero's background (fixed, bottom right) and fades out as the hero scrolls away; it returns at the night */
  .hero{min-height:calc(100svh - 68px);overflow:visible}
  .hero .wrap{padding-bottom:40px}
  .sun{position:fixed;left:52vw;bottom:-46vw;width:108vw;opacity:1}
  .proof,.ticks{max-width:60%}
  .ticks{flex-direction:column;gap:6px}
  .page>.wrap{padding-top:56px !important}
  .sun2{display:block;position:absolute;left:30vw;top:-36vw;width:86vw;height:auto;color:#c94c2d;opacity:.9;z-index:0;pointer-events:none}
  .nightwrap{clip-path:inset(-40vw 0 0 0)}
  .strap{max-width:100%}
  .phones{margin:32px -20px 0;padding:8px 20px 16px;overflow-x:auto;scroll-snap-type:x mandatory;gap:20px}
  .phones>div{scroll-snap-align:start}
  .scene{display:flex;flex-direction:column;align-items:stretch;margin-top:24px;gap:0}.stage{order:-1;position:sticky;top:68px;z-index:5;background:#fbfaf9;padding:8px 0 16px;margin:0 -20px;padding-left:20px;padding-right:20px}
  .desk{aspect-ratio:auto;height:300px;border-radius:12px}.pane{grid-template-columns:84px minmax(0,1fr);animation:none !important}.pane .main{padding:12px;gap:9px}.pane aside span{padding:5px 10px;font-size:9.5px}.pane aside b{padding:0 10px 8px}
  .diary{grid-template-columns:34px repeat(3,minmax(0,1fr))}.toast{font-size:9.5px;animation:none !important}.toast span{display:none}
  .idx a{padding:16px 0;min-height:0;display:flex;align-items:center;justify-content:space-between}
  .idx h3{animation:none !important;color:#332c2a}
  .idx a::after{content:"→";font:400 18px/1 Outfit,sans-serif;color:#c94c2d}
  .idx h3{font-size:17px;line-height:22px}
  .idx .run{display:none}
  .money{grid-template-columns:minmax(0,1fr);gap:8px;margin-top:24px}
  .money svg{transform:rotate(90deg);justify-self:center;height:40px}
  .box{padding:16px}.box .v{font-size:18px;line-height:24px}
  .receipt{margin-top:24px;padding:20px}
  .chip{padding:12px 16px}.chip[aria-pressed="true"]{padding:11px 15px}
  .receipt .line{flex-wrap:wrap}.receipt .tot b{font-size:36px;line-height:40px}
  .demo .two{grid-template-columns:minmax(0,1fr)}
  .hero .gains{font-size:15px;line-height:23px;max-width:100%}
  .foot{padding:48px 0 32px}.foot .grid{grid-template-columns:1fr 1fr;gap:24px}
  .price{font-size:52px !important;line-height:54px !important}
  .h2{font-size:28px;line-height:34px}
  .p{font-size:16px;line-height:25px;margin-top:12px}
  .sm{font-size:11px;line-height:16px}
  .hero .wrap{padding-top:16px;padding-bottom:62vw}
  .proof{margin-top:28px;font-size:17px;line-height:24px}
  .ticks{gap:8px 16px;font-size:13px}
  .phones{margin-top:24px}
  .ph{width:62vw}.ph .scr{height:350px}
  .phones{padding-right:26vw;scroll-padding-left:20px}
  .dots{display:flex;gap:6px;justify-content:center;margin-top:4px}.dots i{display:block;width:6px;height:6px;border-radius:3px;background:#e3e1df;transition:width .3s,background .3s}.dots i.on{width:18px;background:#c94c2d}
  .idx a{flex-wrap:wrap;cursor:pointer}
  .idx .run{display:none;flex-basis:100%;order:2;margin:10px 0 2px;font-size:13px;line-height:21px}
  .idx a::after{order:1}
  .idx a.open .run{display:block}
  .idx a.open h3{color:#c94c2d}
  .idx a::after{transition:transform .3s}.idx a.open::after{transform:rotate(90deg)}
  .pane{display:none}.pane.show{display:grid;opacity:1}.pane .main{overflow:hidden}
  .p3 .lst,.p2 .lst div:nth-child(n+4){display:none}.bed .go{font-size:8.5px;white-space:nowrap;padding:0 4px}.beds{gap:6px}.bed{padding:8px}
  .cap{margin-top:10px}
  .nightwrap{padding-top:150px;margin-top:40vw}.nightwrap .dusk{background:linear-gradient(to bottom,rgba(51,44,42,0) 0,rgba(51,44,42,.1) 30px,rgba(51,44,42,.3) 70px,rgba(51,44,42,.6) 115px,rgba(51,44,42,.86) 155px,#332c2a 180px)}.nightwrap .horizon{top:180px}
  .foot{padding-bottom:120px}.foot .dawn{width:150px;bottom:-72px;right:20px}
  #demo{padding-bottom:40px !important}
  .foot .legal{max-width:100%}
  .nightwrap .wrap{padding-top:64px !important}
  .row:last-child{padding-bottom:96px !important}
}
@supports (animation-timeline:scroll()){@media (max-width:860px){.sun{animation:fadeSun linear both;animation-timeline:scroll(root);animation-range:15vh 75vh}}}

/* legal pages */
.legal-top{background:#fbfaf9;border-bottom:1px solid #e3e1df}
.legal-top .wrap{height:72px;display:flex;align-items:center}
.legal-top a:focus-visible{outline:2px solid #c94c2d;outline-offset:2px}
.legal-main{padding-bottom:96px}
.legal-col{max-width:680px}
.legal-col h1{margin:48px 0 0;font:700 44px/48px Outfit,sans-serif;letter-spacing:-0.02em;color:#332c2a}
.legal-col .updated{margin:12px 0 0;font:500 12px/16px Outfit,sans-serif;letter-spacing:.02em;color:#67625f}
.legal-col h2{margin:40px 0 8px;font:600 20px/28px Outfit,sans-serif;color:#332c2a}
.legal-col p,.legal-col li{font:400 16px/26px Outfit,sans-serif;color:#332c2a}
.legal-col p{margin:0 0 16px}
.legal-col ul{margin:0 0 16px;padding-left:20px}
.legal-col a{color:#332c2a;text-decoration:underline}
.legal-col a:hover{color:#c94c2d}
.legal-col a:focus-visible{outline:2px solid #c94c2d;outline-offset:2px}
/* demo booking (demo.html, home demo section) */
.book-main{position:relative;z-index:1;padding-top:64px;padding-bottom:96px;max-width:1000px}
.legal-top{position:relative;z-index:1}
.book-sun{position:absolute;top:24px;right:-110px;width:320px;height:auto;pointer-events:none;z-index:0}
.book-head{position:relative;max-width:620px}
.book-head h1{margin:0;font:700 clamp(40px,5vw,56px)/1.07 Outfit,sans-serif;letter-spacing:-.02em;color:#332c2a}
.book-head p{margin:16px 0 0;font:400 18px/28px Outfit,sans-serif;color:#67625f}
.book-card{position:relative;margin-top:40px;background:#fff;border:1px solid #e3e1df;border-radius:16px;overflow:hidden}
.cal{display:block;width:100%;height:720px;border:0}
.book-off{padding:24px;font:400 16px/24px Outfit,sans-serif;color:#332c2a}
.book-fine{margin:24px 0 0;font:500 12px/16px Outfit,sans-serif;letter-spacing:.02em;color:#67625f}
.sent .book-card{margin-top:24px;border:0}
@media (max-width:860px){.book-sun{width:220px;right:-80px;top:20px}.page>.book-main{padding-top:200px !important}}
@media (max-width:700px){.cal{height:1080px}}
/* tablet portrait (iPad): the fixed phone/desktop sun is too big for a tall screen and slides behind the next section's copy. Here the sun belongs to the hero: it sits on the hero's bottom edge like a horizon and scrolls away with it, so no text ever passes over it. The rust sun returns at the night. */
@media (min-width:600px) and (max-width:1100px){
  .hero{overflow:hidden;min-height:auto}
  .hero .wrap{padding-bottom:46vw}
  .sun{position:absolute;left:auto;right:-10vw;bottom:-30vw;width:76vw;opacity:1;transform:none;color:#f25929;animation:none !important}
  .proof,.ticks{max-width:min(540px,62%)}
  .page>.wrap{padding-top:72px !important}
}
@media (min-width:861px) and (max-width:1100px){
  .sun2{display:block;position:absolute;left:34vw;top:-30vw;width:70vw;height:auto;color:#c94c2d;opacity:.9;z-index:0;pointer-events:none}
  .nightwrap{clip-path:inset(-40vw 0 0 0);margin-top:34vw}
}