/* Her brand, phone first. Playfair Display headings, DM Sans body, one italic accent word. Pale butter for the
   big backgrounds, butter yellow only as an accent, burgundy and terracotta, black text on light. Large type,
   strong contrast, never cramped. Pictures first: every page opens on one of her rooms. */
@font-face{font-family:"Playfair";src:url(/static/fonts/PlayfairDisplay-VF.ttf) format("truetype");font-weight:400 900;font-display:swap}
@font-face{font-family:"Poppins";src:url(/static/fonts/DMSans-Variable.ttf) format("truetype");font-weight:100 900;font-display:swap}
@font-face{font-family:"Poppins";src:url(/static/fonts/DMSans-Italic-Variable.ttf) format("truetype");font-weight:100 900;font-style:italic;font-display:swap}
@font-face{font-family:"Accent";src:url(/static/fonts/InstrumentSerif-Italic.ttf) format("truetype");font-style:italic;font-display:swap}
:root{--bg:#FBF3D5;--paper:#FFFDF7;--sand:#EDE5D4;--ink:#292929;--soft:#625F5B;--line:#E6DCC4;--butter:#F5E6A8;--burgundy:#5E1A2B;--terracotta:#C4622D;--ok:#3F7A4E;--shadow:0 18px 50px rgba(41,41,41,.14)}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:18px/1.55 "Poppins",system-ui,sans-serif;min-height:100vh}
main{max-width:600px;margin:0 auto;padding:18px 16px 120px}
main.wide{max-width:1100px}
h1,h2,h3{font-family:"Montserrat",system-ui,sans-serif;font-weight:700;line-height:1.1;margin:0 0 .35em;color:var(--burgundy);letter-spacing:-.01em;overflow-wrap:break-word;white-space:normal;max-width:100%}
h1{font-size:clamp(36px,9.5vw,60px)} h2{font-size:clamp(27px,6.8vw,40px)} h3{font-size:clamp(20px,4.8vw,24px)}
em.script{font-family:"Montserrat",system-ui,sans-serif;font-style:normal;font-weight:800;color:var(--terracotta);font-size:1.12em;font-weight:400;display:inline;white-space:normal}
p{margin:0 0 16px} p.lead{color:var(--soft);font-size:19px;margin-bottom:22px;max-width:36em}
.kicker{font-family:"Montserrat",system-ui,sans-serif;font-style:normal;font-weight:800;color:var(--terracotta);font-size:23px;margin:0 0 6px;display:block}
a{color:var(--burgundy)}
/* the top band, like her site header */
.top{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:0 -16px 14px;padding:12px 16px;background:var(--sand);border-bottom:1px solid #E0D6C2;font-size:15px;color:var(--soft)}
.top a.brand{font-family:"Montserrat",system-ui,sans-serif;font-weight:700;font-size:17px;color:var(--burgundy);text-decoration:none;letter-spacing:.01em;white-space:nowrap}
.top #country{display:none}
@media(min-width:700px){.top a.brand{font-size:19px}.top #country{display:inline}}
.top span{flex:1;text-align:right}
.bar{height:8px;background:var(--line);border-radius:4px;margin:4px 0 22px;overflow:hidden}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--terracotta),var(--burgundy));width:0;transition:width .4s}
/* pictures */
.hero{position:relative;margin:0 -16px 22px;min-height:min(62vh,560px);display:flex;align-items:flex-end;overflow:hidden;background:#d9d0c0}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(41,41,41,0) 35%,rgba(41,41,41,.62) 100%)}
.hero .in{position:relative;z-index:1;padding:26px 20px 28px;color:#fff;width:100%}
.hero .in h1,.hero .in h2{color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.35)}
.hero .in .kicker{color:var(--butter)}
.hero .in p{color:rgba(255,255,255,.92);font-size:19px;max-width:30em;margin:0 0 18px;overflow-wrap:break-word}
.hero.tall{min-height:min(78vh,720px)}
.hero.short{min-height:220px}
.strip{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -16px 20px;padding:0 16px 6px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.strip::-webkit-scrollbar{display:none}
.strip .shot{flex:0 0 78%;scroll-snap-align:start;border-radius:18px;overflow:hidden;background:var(--paper);box-shadow:0 6px 22px rgba(41,41,41,.10)}
.strip .shot.sq{flex-basis:62%}
.strip .shot img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.strip .shot.sq img{aspect-ratio:4/5}
.strip .shot small{display:block;padding:9px 12px;color:var(--soft);font-size:14px}
.photo{width:100%;border-radius:18px;display:block;box-shadow:var(--shadow)}
.photo-prev{width:100%;border-radius:16px;display:block;margin:12px 0}
.frame{background:var(--paper);border-radius:22px;padding:14px;box-shadow:var(--shadow);margin:0 0 18px}
.frame figcaption{color:var(--soft);font-size:14px;padding:10px 4px 0}
/* before and after slider */
.ba{position:relative;border-radius:20px;overflow:hidden;aspect-ratio:4/3;box-shadow:var(--shadow);user-select:none;background:#ddd}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ba .after{clip-path:inset(0 0 0 var(--cut,50%))}
.ba .handle{position:absolute;top:0;bottom:0;left:var(--cut,50%);width:3px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.15);transform:translateX(-50%)}
.ba .handle::after{content:"\2194";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:46px;height:46px;border-radius:50%;background:#fff;color:var(--burgundy);display:flex;align-items:center;justify-content:center;font-size:22px;box-shadow:0 4px 14px rgba(0,0,0,.25)}
.ba input{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:ew-resize}
.ba .tag{position:absolute;top:14px;background:rgba(255,255,255,.92);border-radius:999px;padding:6px 12px;font-weight:700;font-size:14px;color:var(--ink)}
.ba .tag.l{left:14px}.ba .tag.r{right:14px;background:var(--burgundy);color:#fff}
/* questions */
.stack{display:grid;gap:12px}
.opt{background:var(--paper);border:2px solid var(--line);border-radius:18px;padding:18px;cursor:pointer;text-align:left;font:inherit;color:inherit;width:100%;display:block;position:relative;transition:transform .12s,border-color .12s}
.opt:active{transform:scale(.99)} .opt:hover{border-color:var(--terracotta)} .opt.on{border-color:var(--burgundy);background:#FFF8E1;box-shadow:0 8px 24px rgba(94,26,43,.10)}
.opt b{font-size:20px;display:block} .opt small{display:block;color:var(--soft);margin-top:4px;font-size:16px}
.opt.pic{padding:0;overflow:hidden}.opt.pic img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}.opt.pic .t{padding:14px 18px}
.pick{display:inline-block;background:var(--butter);border-radius:8px;padding:2px 10px;font-weight:700;font-size:14px;margin-bottom:6px;color:var(--ink)}
.btn{background:var(--terracotta);color:#fff;border:0;border-radius:999px;padding:18px 28px;font:700 18px "Poppins",system-ui,sans-serif;cursor:pointer;width:100%;display:block;text-align:center;text-decoration:none;margin-top:8px;transition:transform .15s,background .15s;box-shadow:0 8px 20px rgba(196,98,45,.25)}
.btn:hover{background:#B95B2E;transform:translateY(-1px)} .btn:disabled{opacity:.35;cursor:default;transform:none;box-shadow:none}
.btn.ghost{background:none;color:var(--burgundy);border:2px solid var(--burgundy);box-shadow:none} .btn.ghost:hover{background:#FFF8E1}
.btn.dark{background:var(--burgundy);box-shadow:0 8px 20px rgba(94,26,43,.22)} .btn.dark:hover{background:#4A1422}
.btn.small{width:auto;display:inline-block;padding:12px 20px;font-size:16px}
.back{background:none;border:0;color:var(--soft);cursor:pointer;font:inherit;padding:10px 0;text-decoration:underline}
.foot{position:fixed;left:0;right:0;bottom:0;background:linear-gradient(transparent,var(--bg) 35%);padding:22px 16px 20px;z-index:4}
.foot > div{max-width:600px;margin:0 auto;display:flex;gap:10px;align-items:center}
.foot .btn{margin:0}
input[type=text],input[type=email],input[type=number],textarea,select{font:inherit;font-size:19px;padding:16px;border:2px solid var(--line);border-radius:16px;background:#fff;width:100%;color:var(--ink)}
input:focus,textarea:focus{outline:0;border-color:var(--terracotta);box-shadow:0 0 0 4px rgba(196,98,45,.14)}
label.check{display:flex;gap:12px;align-items:flex-start;font-size:17px;margin:14px 0}
label.check input{width:24px;height:24px;margin-top:2px;accent-color:var(--terracotta)}
.hint{color:var(--soft);font-size:15px}
/* the quiz */
.duo{display:grid;gap:14px}
.tile{border:0;padding:0;border-radius:22px;overflow:hidden;cursor:pointer;aspect-ratio:4/5;background:#ddd;position:relative;font:inherit;height:min(40vh,110vw);width:auto;margin:0 auto;display:block;box-shadow:var(--shadow);transition:transform .12s}
.tile img{width:100%;height:100%;object-fit:cover;display:block}
.tile:active{transform:scale(.98);outline:5px solid var(--terracotta)}
.tile .ph{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:14px;text-align:left;gap:6px}
.tile .ph b{background:rgba(255,255,255,.9);border-radius:8px;padding:6px 10px;font-weight:500;font-size:15px;width:fit-content}
.tile .letter{position:absolute;top:12px;left:12px;background:#fff;color:var(--burgundy);border-radius:999px;width:40px;height:40px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:19px;box-shadow:0 2px 10px rgba(0,0,0,.2)}
/* cards and the magazine page */
.card{background:var(--paper);border:1px solid var(--line);border-radius:22px;padding:22px;margin:16px 0;box-shadow:0 6px 24px rgba(41,41,41,.06)}
.card h3{margin-top:0}
.card.butter{background:#FFF8E1}
.mag{background:var(--paper);border-radius:26px;overflow:hidden;box-shadow:var(--shadow);margin:0 -16px 20px}
.mag img.cover{width:100%;aspect-ratio:4/5;object-fit:cover;display:block}
.mag .body{padding:22px 20px 26px}
.mag .body h1{font-size:clamp(36px,9.5vw,54px);margin-bottom:6px}
.chips{display:flex;gap:10px;margin:14px 0 6px}
.chip{flex:1;aspect-ratio:1;border-radius:14px;position:relative;background-color:var(--sand);box-shadow:inset 0 -6px 14px rgba(0,0,0,.08),inset 0 4px 10px rgba(255,255,255,.35),0 4px 10px rgba(41,41,41,.12);border:1px solid rgba(0,0,0,.06)}
.chip::after{content:"";position:absolute;inset:8% 10% 55% 10%;border-radius:10px;background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,0))}
.chip-row{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}
.chip-row span{display:inline-flex;align-items:center;gap:8px;background:var(--sand);border-radius:999px;padding:7px 13px;font-size:15px}
.chip-row i{width:16px;height:16px;border-radius:50%;display:inline-block}
.tex{display:flex;gap:8px;overflow-x:auto;margin:8px -16px 6px;padding:0 16px 6px;scrollbar-width:none}
.tex span{flex:0 0 auto;background:linear-gradient(160deg,#F3EADA,#E6D9C3);border-radius:14px;padding:16px 14px;font-weight:600;font-size:15px;color:var(--ink);min-width:110px;text-align:center;box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}
.sw{display:flex;gap:8px;margin:12px 0} .sw i{flex:1;height:54px;border-radius:12px;border:1px solid var(--line)}
ul.clean{padding-left:22px;margin:6px 0 14px} ul.clean li{margin:6px 0}
.tag{display:inline-block;background:var(--butter);border-radius:8px;padding:3px 10px;font-weight:700;font-size:14px}
.note{color:var(--soft);font-size:15px}
.ok{color:var(--ok);font-weight:700}
/* loading, in her voice */
.loading{text-align:center;padding:30px 10px}
.spin{width:44px;height:44px;border:5px solid var(--line);border-top-color:var(--terracotta);border-radius:50%;animation:s 1s linear infinite;margin:30px auto 14px}
.loading .line{font-family:"Montserrat",system-ui,sans-serif;font-style:normal;font-weight:800;font-size:24px;color:var(--terracotta);min-height:1.4em;transition:opacity .4s}
@keyframes s{to{transform:rotate(360deg)}}
.reveal{animation:rv .9s ease-out both}
@keyframes rv{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
/* ask jade */
.ask{position:fixed;right:14px;bottom:18px;background:var(--butter);color:var(--ink);border:0;border-radius:999px;padding:10px 16px;font:700 15px "Poppins";box-shadow:0 2px 10px rgba(0,0,0,.12);cursor:pointer;z-index:5}
.ask.intop{position:static;box-shadow:none;padding:6px 12px;font-size:14px}
.modal{position:fixed;inset:0;background:rgba(41,41,41,.55);display:flex;align-items:flex-end;justify-content:center;z-index:10}
.modal > div{background:var(--paper);border-radius:24px 24px 0 0;padding:22px 18px 28px;width:100%;max-width:600px}
/* doors on the home page */
.doors{display:grid;gap:14px}
.door{background:var(--paper);border-radius:22px;overflow:hidden;text-decoration:none;color:inherit;display:block;box-shadow:var(--shadow);transition:transform .15s}
.door:hover{transform:translateY(-2px)}
.door img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block}
.door .t{padding:16px 18px 18px}
.door b{font-family:"Montserrat",system-ui,sans-serif;font-size:23px;color:var(--burgundy);display:block;margin-bottom:4px} .door small{color:var(--soft);font-size:16px;display:block}
.door .price{display:inline-block;margin-top:8px;background:var(--butter);border-radius:999px;padding:4px 12px;font-weight:700;font-size:14px}
.door.locked img{filter:saturate(.7)}
.intro{display:grid;grid-template-columns:96px 1fr;gap:16px;align-items:center;background:var(--paper);border-radius:22px;padding:16px;box-shadow:var(--shadow)}
.intro img{width:96px;height:96px;border-radius:50%;object-fit:cover;object-position:top}
.pieces .piece{display:flex;flex-direction:column;gap:10px;background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:14px;margin-bottom:10px}
.piece b{font-size:17px}.piece small{display:block;color:var(--soft);font-weight:400}
.seg{display:flex;border:2px solid var(--line);border-radius:999px;overflow:hidden;align-self:flex-start;background:#fff}.seg button{border:0;background:none;padding:10px 16px;font:600 15px "Poppins";color:var(--soft);cursor:pointer}.seg button.on{background:var(--burgundy);color:#fff}
.steps{display:flex;gap:4px;margin:4px 0 16px}.steps i{flex:1;height:8px;border-radius:4px;background:var(--line)}.steps i.on{background:var(--terracotta)}.steps i.done{background:var(--burgundy)}
.pal{display:grid;gap:10px}.col{display:flex;gap:12px;align-items:center;background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:10px}.col i{width:64px;height:64px;border-radius:14px;flex:none;box-shadow:inset 0 -5px 12px rgba(0,0,0,.08),inset 0 3px 8px rgba(255,255,255,.35)}.col b{display:block}.col small{color:var(--soft);display:block;font-size:14px}
.painted{position:relative;border-radius:20px;overflow:hidden;box-shadow:var(--shadow);margin:0 0 18px}
.painted img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.painted .row{position:absolute;left:12px;right:12px;bottom:12px;display:flex;gap:6px}
.painted .row i{flex:1;height:44px;border-radius:10px;border:2px solid rgba(255,255,255,.9);box-shadow:0 4px 12px rgba(0,0,0,.25)}
.recipe{display:grid;grid-template-columns:110px 1fr;gap:14px;background:var(--paper);border-radius:20px;overflow:hidden;box-shadow:0 6px 22px rgba(41,41,41,.08);margin-bottom:12px}
.recipe img{width:110px;height:100%;min-height:140px;object-fit:cover}
.recipe .t{padding:14px 14px 14px 0}.recipe .t h3{font-size:19px;margin-bottom:6px}.recipe ul{padding-left:18px;margin:0;font-size:16px}
.tiers{display:grid;gap:12px}
.share-img{width:100%;border-radius:18px;display:block;margin:10px 0;box-shadow:var(--shadow)}
@media(min-width:700px){
  main{padding:22px 24px 120px}.top{margin:0 -24px 18px;padding:14px 24px}.hero{margin:0 -24px 26px;border-radius:0 0 28px 28px}
  .duo{grid-template-columns:1fr 1fr}.tile{height:auto;width:100%}.btn{width:auto;display:inline-block;min-width:240px}.foot .btn{width:auto}
  .doors{grid-template-columns:1fr 1fr}.strip .shot{flex-basis:46%}.strip .shot.sq{flex-basis:32%}.tiers{grid-template-columns:1fr 1fr 1fr}
  .mag{margin:0 0 22px;display:grid;grid-template-columns:1fr 1fr}.mag img.cover{height:100%}.mag .body{padding:34px 32px}
  main.wide .hero{min-height:min(70vh,640px)}.hero .in{padding:40px 44px 44px;max-width:760px}
}

/* ---------- the program shell ---------- */
body.app{background:var(--bg)}
.shell-bg{display:none}
.parts{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:0 -16px 6px;padding:10px 16px 8px;scroll-snap-type:x proximity}
.parts::-webkit-scrollbar{display:none}
.parts .part{flex:0 0 auto;scroll-snap-align:center;display:flex;align-items:center;gap:7px;border-radius:999px;padding:7px 13px 7px 8px;background:var(--paper);border:1px solid var(--line);font-size:14px;font-weight:600;color:var(--soft);white-space:nowrap}
.parts .part i{width:22px;height:22px;border-radius:50%;background:var(--line);color:var(--ink);display:inline-flex;align-items:center;justify-content:center;font-style:normal;font-size:12px;font-weight:800}
.parts .part.on{background:var(--burgundy);color:#fff;border-color:var(--burgundy)}.parts .part.on i{background:#fff;color:var(--burgundy)}
.parts .part.done{color:var(--burgundy)}.parts .part.done i{background:var(--butter)}
.where{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin:0 0 14px;font-size:14px;color:var(--soft)}
.where b{font-family:"Montserrat",system-ui,sans-serif;font-style:normal;font-weight:800;font-weight:400;font-size:21px;color:var(--terracotta);white-space:nowrap}
.where .saved{font-size:13px;color:var(--ok);opacity:0;transition:opacity .4s}.where .saved.on{opacity:1}
.top .room{font-family:"Montserrat",system-ui,sans-serif;font-style:normal;font-weight:800;color:var(--terracotta);font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;text-align:center}
#view > div{animation:slide .38s cubic-bezier(.2,.7,.2,1) both}
@keyframes slide{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}
#view > div.backward{animation-name:slideback}
@keyframes slideback{from{opacity:0;transform:translateX(-26px)}to{opacity:1;transform:none}}
@media(min-width:900px){
  body.app{background:#D9CFBD}
  .shell-bg{display:block;position:fixed;inset:0;z-index:0;background:#D9CFBD}
  .shell-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(2px) saturate(.9);opacity:.55}
  .shell-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(251,243,213,.55),rgba(251,243,213,.75))}
  .shell-bg .side{position:absolute;top:50%;transform:translateY(-50%);width:min(24vw,360px);aspect-ratio:4/5;border-radius:26px;overflow:hidden;box-shadow:var(--shadow);opacity:.96;filter:none}
  .shell-bg .side img{position:static;filter:none;opacity:1;width:100%;height:100%;object-fit:cover}
  .shell-bg .side.l{left:3vw}.shell-bg .side.r{right:3vw}
  body.app main{position:relative;z-index:1;background:var(--paper);border-radius:30px;box-shadow:var(--shadow);margin:30px auto 120px;padding:0 34px 40px;max-width:640px;overflow:hidden}
  body.app .top{margin:0 -34px 18px;padding:14px 34px}
  body.app .hero{margin:0 -34px 24px;border-radius:0}
  body.app .strip{margin:0 -34px 20px;padding:0 34px 6px}
  body.app .parts{margin:0 -34px 6px;padding:10px 34px 8px}
  body.app .foot{background:none;pointer-events:none}body.app .foot > div{pointer-events:auto;max-width:640px;background:var(--paper);border-radius:999px;box-shadow:var(--shadow);padding:10px 14px}
}
@media(min-width:1500px){.shell-bg .side{width:min(26vw,420px)}}

/* ---------- the app shell (an app, not a page) ---------- */
html.appshell,html.appshell body{height:100dvh;overflow:hidden;overscroll-behavior:none;-webkit-tap-highlight-color:transparent}
html.appshell body{display:flex;flex-direction:column;background:var(--bg)}
.apptop{flex:none;display:flex;align-items:center;gap:10px;padding:calc(10px + env(safe-area-inset-top)) 14px 10px;background:var(--sand);border-bottom:1px solid #E0D6C2;z-index:6}
.apptop .brand{font-family:"Montserrat",system-ui,sans-serif;font-weight:700;font-size:15px;color:var(--burgundy);text-decoration:none;white-space:nowrap}
.apptop .room{flex:1;min-width:0;text-align:center;font-family:"Montserrat",system-ui,sans-serif;font-style:normal;font-weight:800;color:var(--terracotta);font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.apptop .saved{font-size:12px;color:var(--ok);opacity:0;transition:opacity .4s;white-space:nowrap}.apptop .saved.on{opacity:1}
.apptop .ask{position:static;box-shadow:none;padding:6px 10px;font-size:13px;flex:none}
html.appshell main{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:14px 16px calc(120px + env(safe-area-inset-bottom));max-width:none;margin:0;position:relative}
html.appshell main > .inner{max-width:600px;margin:0 auto}
html.appshell .loading{padding-top:40px}
html.appshell .tile{height:auto;width:100%}
html.appshell .hero,html.appshell .strip{margin-left:-16px;margin-right:-16px}
html.appshell .foot{bottom:calc(66px + env(safe-area-inset-bottom));padding:14px 16px 12px;background:linear-gradient(transparent,var(--bg) 40%)}
.tabbar{flex:none;display:flex;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;background:var(--paper);border-top:1px solid #E0D6C2;position:relative;z-index:6;padding:6px 6px calc(6px + env(safe-area-inset-bottom));z-index:6;box-shadow:0 -6px 24px rgba(41,41,41,.06)}
.tabbar::-webkit-scrollbar{display:none}
.tab{flex:0 0 76px;scroll-snap-align:center;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 2px 4px;border:0;background:none;font:600 11.5px "Poppins",system-ui,sans-serif;color:var(--soft);cursor:pointer;border-radius:14px;position:relative;transition:transform .1s}
.tab:active{transform:scale(.94)}
.tab i{width:38px;height:38px;border-radius:13px;background:var(--butter);color:var(--burgundy);display:flex;align-items:center;justify-content:center;font-style:normal}
.tab i svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.tab.on{color:var(--burgundy)}.tab.on i{background:var(--burgundy);color:#fff}
.tab.done i{background:var(--butter);color:var(--burgundy)}
.tab.done i::after{content:"\2713";position:absolute;top:2px;right:12px;width:16px;height:16px;border-radius:50%;background:var(--ok);color:#fff;font-size:10px;display:flex;align-items:center;justify-content:center;font-weight:800}
.tab.locked{opacity:.55}
.rail{display:none}
.skel{background:linear-gradient(90deg,var(--sand) 25%,#F6EFDF 50%,var(--sand) 75%);background-size:200% 100%;animation:sk 1.2s infinite;border-radius:14px}
@keyframes sk{from{background-position:200% 0}to{background-position:-200% 0}}
.sheet{position:fixed;inset:0;background:rgba(41,41,41,.5);display:flex;align-items:flex-end;justify-content:center;z-index:20}
.sheet > div{background:var(--paper);border-radius:26px 26px 0 0;padding:14px 18px calc(24px + env(safe-area-inset-bottom));width:100%;max-width:600px;animation:up .32s cubic-bezier(.2,.7,.2,1) both;box-shadow:0 -18px 50px rgba(0,0,0,.2)}
.sheet .grip{width:44px;height:5px;border-radius:3px;background:var(--line);margin:0 auto 14px}
@keyframes up{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
.btn:active{transform:scale(.97)}
.needs{background:#FFF8E1;border:1px solid var(--butter);border-radius:16px;padding:14px 16px;margin:0 0 16px;font-size:16px}
.ring{width:56px;height:56px;flex:none}
.ring circle{fill:none;stroke-width:6}
.ring .bg{stroke:var(--line)}.ring .fg{stroke:var(--terracotta);stroke-linecap:round;transform:rotate(-90deg);transform-origin:50% 50%;transition:stroke-dasharray .6s}
.ring text{font:700 13px "Poppins",sans-serif;fill:var(--burgundy)}
.roomcard{display:grid;grid-template-columns:84px 1fr auto;gap:10px;align-items:center;background:var(--paper);border-radius:20px;overflow:hidden;box-shadow:var(--shadow);margin-bottom:12px;text-decoration:none;color:inherit}
.roomcard img{width:84px;height:100%;min-height:96px;object-fit:cover}
.roomcard b{font-family:"Montserrat",system-ui,sans-serif;font-size:18px;color:var(--burgundy);display:block}.roomcard small{color:var(--soft);display:block;font-size:13.5px;line-height:1.3}
.roomcard .go{margin:0 10px;background:var(--terracotta);color:#fff;border-radius:999px;padding:8px 12px;font-weight:700;font-size:13px}
@media(min-width:900px){
  html.appshell body{flex-direction:row;flex-wrap:wrap}
  .apptop{width:100%;order:0}
  .rail{display:flex;flex-direction:column;gap:4px;order:1;width:240px;flex:none;padding:18px 12px;background:var(--paper);border-right:1px solid #E0D6C2;position:relative;z-index:2;height:calc(100dvh - 57px);overflow-y:auto}
  .rail .tab{flex:none;flex-direction:row;justify-content:flex-start;gap:12px;padding:10px 12px;font-size:15px;border-radius:14px;text-align:left}
  .rail .tab i{width:34px;height:34px;background:var(--butter);color:var(--burgundy)}.rail .tab.on{background:#FFF8E1}.rail .tab.on i{background:var(--burgundy);color:#fff}.rail .tab.done i{background:var(--butter)}
  .rail .tab .num{font-size:12px;color:var(--soft);display:block;font-weight:500}
  .tabbar{display:none}
  html.appshell main{order:2;flex:1;height:calc(100dvh - 57px);padding:26px 40px 140px;background:#EFE6D2}
  html.appshell main > .inner{max-width:640px;background:var(--paper);border-radius:28px;box-shadow:var(--shadow);padding:0 34px 36px;overflow:hidden}
  html.appshell .hero{margin:0 -34px 24px}html.appshell .strip{margin:0 -34px 20px;padding:0 34px 6px}
  html.appshell .foot{bottom:18px;left:240px;background:none;pointer-events:none}html.appshell .foot > div{pointer-events:auto;max-width:640px;background:var(--paper);border-radius:999px;box-shadow:var(--shadow);padding:10px 14px}
  .shell-bg{display:none}
}

/* option buttons with a small picture or icon on the right; feeling chips */
.opt.row{display:flex;align-items:center;gap:14px}.opt.row .tx{flex:1;min-width:0}.opt.row img{width:76px;height:76px;border-radius:14px;object-fit:cover;flex:none}
.opt.row .ic{width:60px;height:60px;border-radius:14px;background:var(--sand);display:flex;align-items:center;justify-content:center;flex:none}
.opt.row .ic svg{width:34px;height:34px;stroke:var(--burgundy);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.chips3{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0}
.chip-btn{border:2px solid var(--line);background:var(--paper);border-radius:999px;padding:12px 18px;font:600 17px "Poppins",system-ui,sans-serif;color:var(--ink);cursor:pointer;transition:transform .1s}
.chip-btn:active{transform:scale(.96)}.chip-btn.on{background:var(--burgundy);border-color:var(--burgundy);color:#fff}

/* shopping list rows: words left, a small picture or icon right, the Buy button under the price */
.piece.shop{flex-direction:row;align-items:flex-start;gap:12px}.piece.shop .tx{flex:1;min-width:0}
.piece.shop .line2{display:flex;justify-content:space-between;align-items:center;margin-top:8px;gap:8px}
.piece.shop .btn.small{margin-top:10px;padding:10px 18px;font-size:15px}
.piece.shop .thumb{width:84px;height:84px;border-radius:14px;object-fit:cover;flex:none;background:var(--sand)}
.piece.shop .thumb.ic{display:flex;align-items:center;justify-content:center;font-style:normal}
.piece.shop .thumb.ic svg{width:40px;height:40px;stroke:var(--burgundy);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* Jade, 25 Oct: a styled room behind every question, the words on a paper panel; the same air above the first heading as under the button */
html.appshell .shell-bg{display:block;position:fixed;inset:0;z-index:0;background:#E9DFC9}
html.appshell .shell-bg > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(2px) saturate(.92);opacity:1;transition:opacity .6s}
html.appshell .shell-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(251,243,213,.10),rgba(251,243,213,.16) 60%,rgba(251,243,213,.26))}
html.appshell .shell-bg .side{display:none}
html.appshell body{background:#E9DFC9}
html.appshell main{background:transparent;z-index:1;padding:8px 12px calc(124px + env(safe-area-inset-bottom))}
html.appshell #view > div{background:rgba(255,253,247,.96);border-radius:24px;padding:28px 18px 28px;box-shadow:0 12px 36px rgba(41,41,41,.10);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
html.appshell #view > div > h2:first-child,html.appshell #view > div > .kicker:first-child{margin-top:0}
html.appshell .hero,html.appshell .strip{margin-left:-18px;margin-right:-18px}
html.appshell .hero{margin-top:-28px;border-radius:24px 24px 0 0}
html.appshell .hero.short{min-height:220px}
html.appshell .foot{bottom:calc(78px + env(safe-area-inset-bottom));padding:14px 12px 28px;background:linear-gradient(transparent,rgba(233,223,201,.9) 45%)}
html.appshell .loading{background:none;box-shadow:none}
@media(min-width:900px){
  html.appshell .shell-bg{display:block}
  html.appshell main{background:transparent;padding:26px 40px 140px}
  html.appshell main > .inner{background:none;box-shadow:none;padding:0;overflow:visible}
  html.appshell #view > div{padding:40px 34px 40px;border-radius:28px}
  html.appshell .hero,html.appshell .strip{margin-left:-34px;margin-right:-34px}html.appshell .hero{margin-top:-40px;border-radius:28px 28px 0 0}
  html.appshell .foot{bottom:0;padding:16px 40px 40px;left:240px}
}

.toast{position:fixed;left:50%;bottom:calc(96px + env(safe-area-inset-bottom));transform:translateX(-50%) translateY(20px);background:var(--burgundy);color:#fff;padding:12px 18px;border-radius:999px;font:600 15px "Poppins",system-ui,sans-serif;box-shadow:var(--shadow);opacity:0;transition:opacity .3s,transform .3s;z-index:30;white-space:nowrap}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
@media(min-width:900px){.toast{bottom:40px}}

/* the logo in the top bar, the Remi line, the four steps on the home page */
.brand img{height:30px;width:auto;display:block}.apptop .brand img{height:26px}
.apptop .room{white-space:normal;font-family:"Poppins",system-ui,sans-serif;font-style:normal;font-size:13.5px;line-height:1.15;color:var(--burgundy)}
.apptop .room b{font-family:"Montserrat",system-ui,sans-serif;font-style:normal;font-weight:800;font-weight:400;font-size:19px;color:var(--terracotta);margin-right:2px}
.apptop .room i{font-family:"Montserrat",system-ui,sans-serif;font-style:normal;font-weight:800;color:var(--terracotta);font-size:15px}
@media(min-width:900px){.apptop .room{font-size:16px}.apptop .room b{font-size:24px}.apptop .room i{font-size:18px}.apptop .brand img{height:34px}}
.steps4{display:grid;gap:12px;margin:14px 0 6px}
.step4{display:grid;grid-template-columns:104px 1fr;gap:14px;align-items:center;background:var(--paper);border-radius:20px;overflow:hidden;box-shadow:var(--shadow)}
.step4 img{width:104px;height:100%;min-height:112px;object-fit:cover}
.step4 > div{padding:12px 14px 12px 0;position:relative}
.step4 i{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:var(--butter);color:var(--burgundy);font-style:normal;font-weight:800;font-size:13px;margin-bottom:6px}
.step4 b{display:block;font-family:"Montserrat",system-ui,sans-serif;font-size:18px;color:var(--burgundy)}.step4 span{display:block;color:var(--soft);font-size:15px;margin-top:3px}
@media(min-width:700px){.steps4{grid-template-columns:1fr 1fr}}

/* the top bar on a phone: logo and help on the first row, the Remi line on its own row underneath */
.apptop{flex-wrap:wrap;row-gap:2px}
.apptop .brand img{height:24px}
.apptop .room{order:3;flex-basis:100%;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:2px 0 0}
.apptop .saved{order:1;margin-left:auto}.apptop .ask{order:2;padding:6px 10px;font-size:12.5px}
@media(min-width:900px){.apptop{flex-wrap:nowrap}.apptop .room{order:0;flex-basis:auto;flex:1;padding:0}.apptop .saved{order:0;margin-left:0}.apptop .ask{order:0}.apptop .brand img{height:34px}}

/* Her website's language, app-wide (25 Oct): Montserrat headings, Poppins body, kickers as small pills, no italics */
h1,h2,h3,.apptop .brand,.step4 b,.roomcard b,.opt b{font-family:"Montserrat",system-ui,sans-serif;letter-spacing:-.01em}
h2{font-weight:800}h3{font-weight:800}
.kicker{font-family:"Poppins",system-ui,sans-serif;font-style:normal;font-weight:600;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#292929;background:#fff;border-radius:50px;padding:8px 16px;display:inline-block;margin:0 0 12px;box-shadow:0 1px 3px rgba(41,41,41,.08)}
.hero .kicker{background:rgba(255,255,255,.9);color:#292929}
.kicker::before,.kicker::after{content:"\00b7";margin:0 6px;color:var(--terracotta)}
em.script{font-style:normal;font-weight:900;color:var(--terracotta)}
.where b,.apptop .room b,.apptop .room i{font-style:normal}
.apptop .room b{font-family:"Montserrat",system-ui,sans-serif;font-weight:900;color:var(--terracotta)}
.apptop .room i{font-family:"Poppins",system-ui,sans-serif;font-weight:700;color:var(--terracotta)}
.loading .line{font-family:"Poppins",system-ui,sans-serif;font-style:normal;font-weight:500}

/* Desktop (25 Oct, Jade): less scrolling. A wider panel, three options in a row, four or more as two columns, smaller buttons. */
@media(min-width:900px){
  html.appshell main > .inner{max-width:980px}
  html.appshell #view > div{padding:36px 44px 40px}
  html.appshell .hero,html.appshell .strip{margin-left:-44px;margin-right:-44px}
  html.appshell .hero.short{min-height:200px}
  html.appshell h2{font-size:30px;margin:0 0 10px}
  html.appshell .lead{font-size:17px;max-width:70ch}
  html.appshell .stack{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  html.appshell .stack:has(> :nth-child(3)):not(:has(> :nth-child(4))){grid-template-columns:1fr 1fr 1fr}
  html.appshell .stack .opt{padding:16px 18px;height:100%}
  html.appshell .stack .opt b{font-size:17px}html.appshell .stack .opt small{font-size:14px}
  html.appshell .stack .opt.row img{width:64px;height:64px}
  html.appshell .chips3{max-width:none}
  html.appshell .foot > div{max-width:980px;padding:8px 12px}
  html.appshell .foot .btn{width:auto;display:inline-block;padding:13px 30px;font-size:16px;margin-left:auto}
  html.appshell .foot .back{font-size:15px}
  html.appshell .tiers{grid-template-columns:1fr 1fr 1fr}
  html.appshell .pal{grid-template-columns:1fr 1fr}
  html.appshell .duo{grid-template-columns:1fr 1fr;max-width:760px;margin:0 auto}
}

/* the kicker on a hero picture reads dark on a white pill, never butter on a photo */
.hero .in .kicker,.hero .kicker{background:rgba(255,255,255,.94);color:#292929}
/* Part 2: the five destinations for bags and boxes */
.card.dests{padding:4px 20px}
.dest{display:grid;grid-template-columns:minmax(120px,160px) 1fr;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);font-size:16px;line-height:1.4}
.dest:last-child{border-bottom:0}
.dest b{color:var(--burgundy);font-family:"Montserrat",system-ui,sans-serif;font-weight:800}
#out h3{margin-top:26px}
label.check input{flex:0 0 24px}
@media (max-width:540px){.dest{grid-template-columns:1fr;gap:3px;padding:10px 0}}
/* Jade, 26 Oct: a clear centimetre between the words and the buttons on every screen */
html.appshell p.lead{margin-bottom:34px}
html.appshell h2 + .stack,html.appshell h2 + #o,html.appshell h2 + #d,html.appshell h2 + #f,html.appshell h2 + #s{margin-top:30px}
/* Part 10: the course cards with a picture */
.course{display:grid;grid-template-columns:1fr;gap:12px;margin:14px 0 18px}
.course img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:14px;display:block}
@media (min-width:700px){.course{grid-template-columns:200px 1fr;align-items:center}.course img{aspect-ratio:4/3}}
/* The AI declaration card and the No AI Pictures choice (data/ai-disclosure.json) */
.ai-note{margin-top:22px}.ai-note h3{font-size:18px}
.ai-switch{background:var(--paper)}.ai-switch label.check{align-items:flex-start}.ai-switch .ok{color:var(--terracotta)}
/* Why this works, and the Designer's note (the diploma's principles in Jade's words) */
.whybox{margin:4px 0 18px}
.why{font-family:Poppins,system-ui,sans-serif;font-weight:500;font-size:15px;color:var(--terracotta);margin:0 0 6px}
.dnote{border:1px solid var(--line);border-radius:14px;padding:10px 14px;background:var(--paper)}
.dnote summary{cursor:pointer;font-weight:700;font-size:14px;color:var(--burgundy);list-style:none}
.dnote summary::before{content:"+ ";color:var(--terracotta)}.dnote[open] summary::before{content:"– ";content:"- "}
.dnote p{font-size:14px;color:var(--soft);margin:10px 0 0}