/* Ashley Griffith Design Service
   Visual system per branding/style-guide/index.html */

@font-face{font-family:"Publico Headline";src:url("fonts/PublicoHeadline-Roman-Web.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Chesna Grotesk";src:url("fonts/chesnagrotesk-regular-webfont.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Chesna Grotesk";src:url("fonts/chesnagrotesk-semibold-webfont.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Chesna Grotesk";src:url("fonts/chesnagrotesk-semibold-webfont.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

:root{
  --ink:#363534; --ink-deep:#20201F; --surface:#F4F3F1; --white:#fff;
  --muted:#767675; --muted-light:#A0A09E; --line:#E3E1DD; --line-strong:#C9C6C1;
  --orange:#F68C2C;
  --serif:"Publico Headline",Georgia,"Times New Roman",serif;
  --sans:"Chesna Grotesk",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --pad-x:64px; --gap:32px; --radius:8px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--white);color:var(--ink);font-family:var(--sans);
  font-size:16px;line-height:24px;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
h1,h2,h3,h4{font-family:var(--serif);font-weight:400;margin:0}
h1{font-size:56px;line-height:56px}
h2{font-size:44px;line-height:48px}
h3{font-size:26px;line-height:32px}
h4{font-size:20px;line-height:24px}
p{margin:0 0 16px}
p:last-child{margin-bottom:0}
a{color:inherit}

.eyebrow{font-size:14px;line-height:18px;letter-spacing:2.1px;text-transform:uppercase;
  color:var(--muted);margin:0 0 14px}

/* Header ---------------------------------------------------------- */
.hdr{display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:14px var(--pad-x);border-bottom:1px solid var(--line);background:var(--white);
  position:sticky;top:2px;z-index:50}
.hdr__logo{display:flex;align-items:center;min-height:44px}
.hdr img{width:132px}
.hdr nav{display:flex;gap:8px;align-items:center;font-size:12px;font-weight:700;
  letter-spacing:2.16px;text-transform:uppercase}
.hdr nav a{text-decoration:none;display:flex;align-items:center;min-height:44px;padding:0 10px}
.hdr nav a:hover{text-decoration:underline;text-underline-offset:4px}

/* Buttons --------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--sans);font-size:12px;line-height:20px;font-weight:700;
  letter-spacing:2.16px;text-transform:uppercase;text-decoration:none;
  padding:14px 28px;border:1px solid var(--ink);background:var(--ink);color:var(--white);
  cursor:pointer;transition:background .15s,color .15s}
.btn:hover:not(:disabled){background:var(--ink-deep);border-color:var(--ink-deep)}
.btn:disabled{opacity:.35;cursor:not-allowed}
.btn--outline{background:transparent;color:var(--ink)}
.btn--outline:hover:not(:disabled){background:var(--ink);color:var(--white)}
.btn--on-dark{background:var(--white);border-color:var(--white);color:var(--ink)}
.btn--on-dark:hover{background:transparent;color:var(--white)}

/* Sections -------------------------------------------------------- */
.sec{padding:64px var(--pad-x)}
.sec--surface{background:var(--surface)}
.sec--ink{background:var(--ink);color:var(--white)}
.sec__head{max-width:760px;margin-bottom:44px}
.wrap{max-width:1280px;margin:0 auto}

/* Hero ------------------------------------------------------------ */
.hero{position:relative;min-height:520px;display:flex;align-items:flex-end;
  padding:64px var(--pad-x);color:var(--white);overflow:hidden}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero__scrim{position:absolute;inset:0;background:rgba(32,32,31,.44)}
.hero__inner{position:relative;max-width:640px}
.hero h1{color:#fff;text-transform:uppercase}
.hero .eyebrow{color:#fff}
.hero p{margin-top:16px;max-width:520px}
.hero__cta{display:flex;gap:16px;flex-wrap:wrap;margin-top:28px}

/* Portrait cards -------------------------------------------------- */
.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap)}
.card img{aspect-ratio:3/4;object-fit:cover;border-radius:var(--radius);width:100%}
.card h4{margin-top:18px;font-family:var(--sans);font-size:16px;line-height:28px;
  font-weight:700;text-align:center}
.card p{font-size:16px;line-height:24px;text-align:center;margin-top:4px}

/* Feature band ---------------------------------------------------- */
.band{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:center;
  gap:64px;background:var(--surface);padding:48px var(--pad-x)}
.band img{aspect-ratio:16/9;object-fit:cover;width:100%}

/* Inverse band ---------------------------------------------------- */
.inverse{background:var(--ink);color:var(--white);display:flex;justify-content:space-between;
  align-items:center;gap:32px;padding:36px var(--pad-x)}
.inverse h3{color:#fff}
.inverse p{margin:6px 0 0}

/* FAQ ------------------------------------------------------------- */
.faq{border-top:1px solid var(--line);max-width:900px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:20px 0;display:flex;
  justify-content:space-between;align-items:center;gap:24px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:20px;color:var(--muted)}
.faq details[open] summary::after{content:"-"}
.faq p{padding:0 0 20px;color:var(--muted)}

/* ================================================================
   QUIZ
   ================================================================ */
.quiz{min-height:100vh;display:flex;flex-direction:column}
.progress{height:2px;background:var(--line);position:sticky;top:0;z-index:60}
.progress span{display:block;height:2px;background:var(--ink);width:0;transition:width .3s}

.step{flex:1;padding:56px var(--pad-x) 120px;max-width:1180px;margin:0 auto;width:100%}
.step__count{font-size:11px;letter-spacing:1.98px;text-transform:uppercase;
  color:var(--muted);margin-bottom:14px}
.step h2{margin-bottom:12px}
.step__sub{color:var(--muted);max-width:640px;margin-bottom:36px}

/* Choice grids ---------------------------------------------------- */
.opts{display:grid;gap:16px}
.opts--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.opts--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.opt{border:1px solid var(--line-strong);background:var(--white);padding:20px;
  cursor:pointer;text-align:left;font-family:var(--sans);font-size:16px;line-height:24px;
  color:var(--ink);transition:border-color .12s,background .12s;position:relative}
.opt:hover{border-color:var(--ink)}
.opt[aria-pressed="true"]{border-color:var(--ink);background:var(--ink);color:var(--white)}
.opt small{display:block;font-size:14px;line-height:20px;color:var(--muted);margin-top:4px}
.opt[aria-pressed="true"] small{color:var(--muted-light)}

/* Visual style picker --------------------------------------------- */
.styles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap)}
.stile{display:block;border:0;padding:0;background:none;cursor:pointer;text-align:left;font-family:var(--sans)}
.stile__img{position:relative;border-radius:var(--radius);overflow:hidden}
.stile__img img{aspect-ratio:3/4;object-fit:cover;width:100%;transition:transform .3s}
.stile:hover .stile__img img{transform:scale(1.03)}
.stile__mark{position:absolute;inset:0;border:0 solid var(--ink);border-radius:var(--radius);
  transition:border-width .12s;pointer-events:none}
.stile[aria-pressed="true"] .stile__mark{border-width:4px}
.stile[aria-pressed="true"] .stile__badge{opacity:1;transform:none}
.stile__badge{position:absolute;top:12px;right:12px;background:var(--ink);color:#fff;
  width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:700;opacity:0;transform:scale(.7);transition:.15s}
.stile h4{margin-top:14px;font-family:var(--sans);font-size:16px;line-height:24px;font-weight:700}
.stile p{font-size:14px;line-height:20px;color:var(--muted);margin-top:2px}

/* Photo upload ----------------------------------------------------
   display:block matters. A label is inline by default, and an inline box
   holding block children fragments into overlapping rectangles. */
.drop{display:block;border:1px dashed var(--line-strong);background:var(--surface);
  padding:48px 24px;text-align:center;cursor:pointer;
  transition:border-color .15s,background .15s}
.drop:hover,.drop.over{border-color:var(--ink);background:#EEEDEA}
.drop input{display:none}
.drop strong{display:block;font-size:16px;line-height:24px}
.drop span{display:block;color:var(--muted);margin-top:6px;font-size:14px;line-height:20px}
.shots{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:24px}
.shot{position:relative}
.shot img{aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius)}
.shot button{position:absolute;top:8px;right:8px;width:26px;height:26px;border:0;
  background:rgba(32,32,31,.82);color:#fff;cursor:pointer;border-radius:50%;font-size:14px;line-height:1}
.swatches{display:flex;gap:8px;margin-top:12px;align-items:center;flex-wrap:wrap}
.swatches i{width:26px;height:26px;border-radius:50%;border:1px solid var(--line);display:block}

/* Footer bar ------------------------------------------------------ */
.bar{position:fixed;bottom:0;left:0;right:0;background:var(--white);
  border-top:1px solid var(--line);padding:16px var(--pad-x);display:flex;
  justify-content:space-between;align-items:center;gap:16px;z-index:60}
.bar__hint{font-size:14px;color:var(--muted)}

/* ================================================================
   RESULT
   ================================================================ */
.verdict{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center}
.verdict img{aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius)}
.mix{margin-top:28px}
.mix__row{display:grid;grid-template-columns:150px 1fr 44px;gap:12px;align-items:center;
  padding:9px 0;border-bottom:1px solid var(--line);font-size:14px}
.mix__bar{display:block;height:6px;background:var(--line)}
.mix__bar span{display:block;height:6px;background:var(--ink)}
.mix__pc{text-align:right;color:var(--muted);font-size:13px}

.pcards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap)}
.pcard{display:block;text-decoration:none;color:inherit}
.pcard img{aspect-ratio:1/1;object-fit:contain;background:var(--white);
  border:1px solid var(--line);border-radius:var(--radius);padding:14px}
.pcard__t{font-size:14px;line-height:20px;margin-top:12px}
.pcard__p{font-size:16px;font-weight:700;margin-top:4px}
.pcard__was{font-size:14px;color:var(--muted);text-decoration:line-through;font-weight:400;margin-left:8px}
.pcard__why{font-size:11px;letter-spacing:1.4px;text-transform:uppercase;color:var(--muted);margin-top:6px}
.pcard:hover img{border-color:var(--line-strong)}

.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:32px}
.chip{border:1px solid var(--line-strong);background:none;padding:9px 16px;cursor:pointer;
  font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:2.16px;
  text-transform:uppercase;color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}

.code{font-family:ui-monospace,Consolas,monospace;font-size:22px;letter-spacing:4px;
  background:var(--surface);color:var(--ink);padding:14px 20px;display:inline-block;
  border:1px solid var(--line)}
.inverse .code{background:transparent;color:#fff;border-color:var(--muted-light)}

.note{font-size:14px;line-height:20px;color:var(--muted);border-left:1px solid var(--line-strong);
  padding-left:16px;margin-top:24px;max-width:760px}

.empty{padding:56px;text-align:center;border:1px solid var(--line);color:var(--muted)}

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width:1180px){
  .cards,.pcards,.styles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .band,.verdict{grid-template-columns:1fr;gap:32px}
}
@media (max-width:900px){
  :root{--pad-x:20px}
  h1{font-size:32px;line-height:36px}
  h2{font-size:26px;line-height:32px}
  h3{font-size:22px;line-height:28px}
  .hdr{gap:8px;padding:8px var(--pad-x)}
  .hdr nav{gap:2px;font-size:10px;letter-spacing:1.2px}
  .hdr nav a{padding:0 6px}
  .hdr img{width:96px}
  .sec{padding:44px var(--pad-x)}
  .sec__head{margin-bottom:28px}
  .hero{min-height:0;padding:120px 20px 40px}
  .hero__cta{gap:10px}
  .hero__cta .btn{flex:1 1 100%}
  .opts--3,.opts--4{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .opt{padding:16px 14px;font-size:15px;line-height:21px}
  .opt small{font-size:13px;line-height:18px}
  .shots{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
  .drop{padding:32px 18px}
  .step{padding:28px 20px 108px}
  .step h2{font-size:26px;line-height:32px}
  .step__sub{margin-bottom:24px}
  .inverse{flex-direction:column;align-items:stretch;gap:20px;padding:28px 20px}
  .inverse .code{text-align:center;font-size:19px;letter-spacing:3px}
  .inverse > div:last-child{flex-direction:column;align-items:stretch}
  .mix__row{grid-template-columns:96px 1fr 38px;gap:8px;font-size:13px}
  .band{padding:32px 20px;gap:24px}
  .verdict h1{font-size:34px;line-height:38px}
  .filters{gap:8px;margin-bottom:24px}
  .chip{padding:10px 12px;font-size:11px;letter-spacing:1.4px}
  .btn{padding:14px 18px;letter-spacing:1.4px;min-height:46px}
  .stile h4{font-size:15px;line-height:20px;margin-top:10px}
  .stile p{font-size:13px;line-height:18px}
  .card h4{font-size:15px;line-height:22px;margin-top:12px}
  .card p{font-size:14px;line-height:20px}

  /* Sticky action bar. Sits above the iOS home indicator and never
     lets the hint text squeeze the two buttons. */
  .bar{padding:10px 16px calc(10px + env(safe-area-inset-bottom));gap:10px;flex-wrap:wrap}
  .bar .btn{flex:1 1 0;min-width:0}
  .bar__hint{order:-1;flex:1 1 100%;text-align:center;font-size:13px;line-height:18px}
  .bar__hint:empty{display:none}
}
@media (max-width:560px){
  .styles{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .pcards,.cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .pcard__t{font-size:13px;line-height:18px}
  .pcard__p{font-size:15px}
  .pcard__why{font-size:10px;letter-spacing:1px}
}

/* ================================================================
   ROOM ANALYSIS AND RECOMMENDATIONS
   ================================================================ */
.analysing{border:1px solid var(--line);background:var(--surface);padding:28px 24px;margin-top:24px}
.analysing__bar{height:2px;background:var(--line-strong);margin-top:16px;overflow:hidden}
.analysing__bar span{display:block;height:2px;background:var(--ink);width:30%;
  animation:slide 1.4s ease-in-out infinite}
@keyframes slide{0%{transform:translateX(-100%)}100%{transform:translateX(400%)}}
@media (prefers-reduced-motion:reduce){.analysing__bar span{animation:none;width:100%}}

.survey{border:1px solid var(--line);margin-top:24px}
.survey__hd{padding:12px 20px;border-bottom:1px solid var(--line);font-size:11px;
  letter-spacing:1.98px;text-transform:uppercase;color:var(--muted);
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.survey__body{padding:24px 20px;display:grid;gap:24px;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.survey__k{font-size:11px;letter-spacing:1.98px;text-transform:uppercase;
  color:var(--muted);margin-bottom:6px}
.survey__v{font-size:15px;line-height:21px}

/* The recommended flag on any option */
.rec{position:absolute;top:-1px;right:-1px;background:var(--ink);color:#fff;
  font-size:9px;letter-spacing:1.2px;text-transform:uppercase;padding:5px 8px;
  font-weight:700;line-height:1}
.opt{position:relative}
.opt[aria-pressed="true"] .rec{background:var(--white);color:var(--ink)}
.stile__rec{position:absolute;top:12px;left:12px;background:var(--ink);color:#fff;
  font-size:9px;letter-spacing:1.2px;text-transform:uppercase;padding:6px 9px;
  font-weight:700;line-height:1;z-index:2}
.recwhy{font-size:14px;line-height:20px;color:var(--muted);margin:-14px 0 26px;
  border-left:1px solid var(--line-strong);padding-left:14px;max-width:700px}

/* ================================================================
   FURNITURE SELECTION AND RENDER
   ================================================================ */
.pick{position:relative;display:block;text-align:left;border:1px solid var(--line);
  background:none;padding:0;cursor:pointer;font-family:var(--sans);color:inherit;width:100%}
.pick img{aspect-ratio:1/1;object-fit:contain;background:var(--white);padding:14px;width:100%}
.pick__meta{display:block;padding:0 12px 14px}
.pick__t{display:block;font-size:13px;line-height:18px}
.pick__p{display:block;font-size:15px;font-weight:700;margin-top:4px}
.pick__d{display:block;font-size:11px;letter-spacing:.6px;color:var(--muted);margin-top:4px}
.pick:hover{border-color:var(--line-strong)}
.pick[aria-pressed="true"]{border-color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.pick__n{position:absolute;top:10px;right:10px;width:26px;height:26px;border-radius:50%;
  background:var(--ink);color:#fff;display:none;align-items:center;justify-content:center;
  font-size:12px;font-weight:700}
.pick[aria-pressed="true"] .pick__n{display:flex}

.tray{position:fixed;bottom:0;left:0;right:0;background:var(--ink);color:#fff;z-index:70;
  padding:14px var(--pad-x) calc(14px + env(safe-area-inset-bottom));
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.tray__n{font-size:14px;line-height:20px}
.tray__n b{font-family:var(--serif);font-size:22px;font-weight:400;margin-right:8px}
.tray__thumbs{display:flex;gap:6px}
.tray__thumbs img{width:38px;height:38px;object-fit:contain;background:#fff;border-radius:4px}

.render{border:1px solid var(--line);margin-top:8px}
/* Cap the height so the whole render plus its heading fit one screen. A 4:3
   image at full desktop width is taller than the viewport otherwise, and the
   customer only sees part of the thing they waited a minute for. */
.render img{display:block;width:min(100%, calc((100vh - 300px) * 4 / 3));height:auto;
  aspect-ratio:4/3;object-fit:contain;margin:0 auto}
/* The width is fixed before the image arrives (every render is 4:3, project.html asks for it), so the
   box keeps its height while it loads: a late image used to push Add all down under the shopper's
   finger and the tap opened a product page instead (2026-10-01). Same height cap as before. */
.render__cap{padding:16px 20px;border-top:1px solid var(--line);font-size:14px;
  line-height:20px;color:var(--muted)}
.plan{margin-top:32px}
.plan__row{display:grid;grid-template-columns:170px 1fr;gap:20px;padding:16px 0;
  border-bottom:1px solid var(--line)}
.plan__row:last-child{border-bottom:0}
.plan__item{font-size:15px;line-height:21px;font-weight:600}
.plan__pos{font-size:15px;line-height:22px}
.plan__why{font-size:13px;line-height:19px;color:var(--muted);margin-top:5px}
.plan__cl{display:inline-block;font-size:10px;letter-spacing:1.2px;text-transform:uppercase;
  border:1px solid var(--line-strong);padding:3px 7px;margin-top:7px;color:var(--muted)}
.flag{border-left:2px solid var(--ink);padding:12px 16px;margin-top:12px;background:var(--surface);
  font-size:14px;line-height:20px}
.flag--warn{border-left-color:#B4741F}
.flag--block{border-left-color:#9B2C1E}
/* Room capacity (project.html, 2026-10-01): the furniture-in-the-photo question, the recommended
   number of each piece, and Generate held back while the room would be crowded. */
.situ{border:0;padding:0;margin:0 0 24px;min-width:0}
.situ .eyebrow{margin-bottom:8px}
.situ__lead{margin:0 0 12px;max-width:760px}
.situ__opts{display:grid;gap:8px;max-width:760px}
.situ__opt{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--line-strong);background:var(--white);padding:14px 16px;cursor:pointer}
.situ__opt input{margin-top:4px;accent-color:var(--ink)}
.situ__opt small{display:block;color:var(--muted);font-size:14px;line-height:20px;margin-top:2px}
.situ__keep{display:grid;gap:8px;margin-top:12px;max-width:760px}
.situ__keep label{display:flex;gap:10px;align-items:center}
#capacity{margin-top:20px;outline:none}
.cap__rec{margin:0;max-width:760px;font-size:15px;line-height:22px}
.btn.is-blocked{opacity:.75}
.flag b{font-weight:700}

@media (max-width:900px){
  .survey__body{padding:18px 16px;gap:18px}
  .plan__row{grid-template-columns:1fr;gap:6px}
  .tray{padding:12px 16px calc(12px + env(safe-area-inset-bottom));gap:10px}
  .tray .btn{flex:1 1 100%}
  .tray__thumbs img{width:32px;height:32px}
}

#renderOut{scroll-margin-top:90px}

/* ================================================================
   SHOPPING LIST under the render
   ================================================================ */
.btn--sm{padding:9px 14px;font-size:10px;letter-spacing:1.4px;min-height:0}
.list{border:1px solid var(--line);margin-top:36px;background:var(--white)}
.list__hd{display:flex;justify-content:space-between;gap:12px;padding:12px 20px;
  border-bottom:1px solid var(--line);font-size:11px;letter-spacing:1.98px;
  text-transform:uppercase;color:var(--muted)}
.list__row{display:grid;grid-template-columns:64px minmax(0,1fr) auto auto;gap:16px;
  align-items:center;padding:14px 20px;border-bottom:1px solid var(--line)}
.list__row img{width:64px;height:64px;object-fit:contain;background:var(--white);
  border:1px solid var(--line);border-radius:4px}
.list__meta{min-width:0}
.list__t{display:block;font-size:15px;line-height:21px;color:var(--ink);
  text-decoration:none;border-bottom:1px solid transparent}
.list__t:hover{border-bottom-color:var(--ink)}
.list__d{display:block;font-size:12px;line-height:17px;color:var(--muted);margin-top:3px}
.list__p{font-size:16px;font-weight:700;white-space:nowrap}
.list__act{display:flex;gap:8px}
.list__ft{display:flex;justify-content:space-between;align-items:center;gap:16px;
  flex-wrap:wrap;padding:20px;background:var(--surface)}
.list__total{font-family:var(--serif);font-size:30px;line-height:34px}
.list__note{font-size:13px;line-height:18px;color:var(--muted);margin-top:2px}

@media (max-width:900px){
  .list__row{grid-template-columns:52px minmax(0,1fr);gap:12px;padding:14px 16px}
  .list__row img{width:52px;height:52px}
  .list__p{grid-column:2;font-size:15px}
  .list__act{grid-column:2}
  .list__act .btn{flex:1 1 0}
  .list__hd,.list__ft{padding:14px 16px}
  .list__ft .btn{flex:1 1 100%}
  .list__total{font-size:26px;line-height:30px}
}

/* ================================================================
   EMBEDDED MODE
   Set by assets/embed-bridge.js when the app runs inside an iframe.
   Every viewport-relative rule has to go, because the host sizes the frame
   to our reported height, so vh becomes a function of our own output and
   the layout ratchets upward without these overrides.
   ================================================================ */
.is-embedded .quiz { min-height: 0; }
.is-embedded .hero { min-height: 380px; }
.is-embedded .render img { width: min(100%, 960px); }
/* The sticky bars are measured out of the height calculation, so give the
   content real clearance instead of relying on viewport maths. */
.is-embedded .step { padding-bottom: 150px; }

/* An expanded iframe has no viewport of its own, so position:fixed anchors to
   the bottom of the whole document rather than to the reader's screen. Both
   bars therefore go back into the flow when embedded, and the tray is moved
   next to the picks by project.html so it stays where it is useful. */
.is-embedded .bar,
.is-embedded .tray {
  position: static;
  padding-bottom: 14px;
}
.is-embedded .quiz .bar { border-top: 1px solid var(--line); margin-top: 8px; }
.is-embedded .step { padding-bottom: 24px; }
.is-embedded .tray { margin-top: 24px; }