/* ===========================================================
   designer.css — AI Wall Designer, "Stage & Tray"
   Self-contained: this file styles the whole tool. It does NOT
   depend on styles.css (the old prototype storefront sheet).

   Structure is one component with one breakpoint at 900px.
   Same markup both ways — grid areas do the reflow, nothing is
   duplicated and nothing is sticky to the viewport (we live in
   an iframe and cannot know how tall the window is).
   =========================================================== */

:root{
  /* four canonical brand colours */
  --chalk:#F9F7F2; --doe:#C49D5E; --obsidian:#211B14; --white:#FFFFFF;
  /* derived tones */
  --ivory-2:#FCFBF8; --ink-soft:#4A4036; --muted:#8A7E6E; --line:#E7E2D8;
  --gold:#8D6B34; --gold-bright:#D2AC70; --gold-pale:#E9DBC3;
  --sel:#FDFAF3; --expired:#F1EDE4; --dim:#A79C8C; --dash:#DCD5C8;
  --chip-ink:#5A4A2E; --quad:#FF2D9B;
  --r:14px;
  --display:'Fraunces',Georgia,serif;
  --body:'Hanken Grotesk',system-ui,-apple-system,sans-serif;
  --mono:ui-monospace,'SF Mono',Menlo,monospace;
  /* Doe is a FILL, never text: 2.4:1 on Chalk. Gold text uses --gold. */
  --doe-fill:linear-gradient(180deg,#D2AC70,#C49D5E);
  --ring:0 0 0 3px rgba(196,157,94,.13);
  --pad:14px;
  --cap:420px;                     /* stage height cap, mobile */
  --ar:4/3;                        /* set from the photo's own ratio */
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--chalk)}
body{font-family:var(--body);color:var(--obsidian);-webkit-font-smoothing:antialiased}
p{text-wrap:pretty}
img{max-width:100%}
a{color:var(--gold);text-decoration:none}
a:hover{text-decoration:underline}
input,select,button,textarea{font-family:var(--body)}
button{cursor:pointer}
[hidden]{display:none !important}

/* ---------- shell ---------- */
.dz{max-width:1280px;margin:0 auto;background:var(--chalk);border:1px solid var(--line);
    border-radius:18px;overflow:hidden}
body.embed .dz{border:0;border-radius:0}

/* ---------- header: the step bar IS the loader ---------- */
.dz-head{background:var(--white);border-bottom:1px solid var(--line);padding:13px 14px 12px}
.dz-head .row{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.dz-steps{flex:1;font:600 12px/1 var(--body);color:var(--obsidian);min-width:0}
.dz-steps .now{color:var(--gold)}
.dz-steps .next{color:var(--dim)}
.dz-hist{flex:0 0 auto;border:1px solid var(--line);border-radius:999px;padding:6px 11px;
  font:600 11px/1 var(--body);color:var(--ink-soft);cursor:pointer;white-space:nowrap;background:var(--white)}
.dz-hist:hover{border-color:var(--gold);color:var(--obsidian)}
.dz-quota{flex:0 0 auto;background:var(--gold-pale);border-radius:999px;padding:6px 11px;
  font:600 11px/1 var(--body);color:var(--chip-ink);white-space:nowrap}
.dz-elapsed{flex:0 0 auto;font:500 11px/1 var(--mono);color:var(--muted)}
.dz-bar{display:flex;gap:5px}
.dz-bar i{flex:1;height:5px;border-radius:999px;background:var(--line);
  overflow:hidden;font-style:normal}
.dz-bar i.on{background:var(--doe)}
.dz-bar i b{display:block;height:100%;width:0;border-radius:999px;background:var(--doe);
  transition:width .6s linear}

/* ---------- layout ----------
   One markup, one reflow. Under 900px the two column wrappers collapse with
   display:contents and `order` puts the blocks in reading order; over it they
   become a flex:1 stage column and a fixed 400px tray column. Nothing is
   duplicated, and the DOM never changes. */
.dz-body{display:flex;flex-direction:column;gap:14px;padding:var(--pad)}
.col{min-width:0}
#stage-wrap,#cta,#acts,#past,#tray,#cartblock,#interrupt{min-width:0}

/* ---------- stage ----------
   The photo is never cropped: contain, never cover. The stage takes the
   photo's own ratio, so in the common case there is no letterbox at all;
   width:100% holds the width while max-height caps the height, and a tall
   portrait mats left/right on Obsidian, which reads as a gallery mount. */
.stage{position:relative;width:100%;aspect-ratio:var(--ar);max-height:var(--cap);
  border-radius:var(--r);overflow:hidden;background:var(--obsidian);
  display:flex;align-items:center;justify-content:center}
/* .photo is the RENDERED PHOTO RECT. Everything positioned in percentages
   inside it — quad corners, wipe divider, tags — therefore survives a rotate,
   a resize and the height cap without a line of JS. */
.photo{position:relative;height:100%;aspect-ratio:var(--ar);max-width:100%;
  background-position:center;background-size:contain;background-repeat:no-repeat}
.photo .aft{position:absolute;inset:0;background-position:center;background-size:contain;
  background-repeat:no-repeat}
.stage.wipe{touch-action:none;cursor:ew-resize}
.stage.mark{touch-action:none}

/* corner tags + hint pills */
.tag{position:absolute;border-radius:999px;padding:6px 11px;font:600 11px/1 var(--body);
  white-space:nowrap;z-index:3}
.tag.before{left:10px;top:10px;background:rgba(33,27,20,.8);color:var(--white)}
.tag.after {right:10px;top:10px;background:rgba(210,172,112,.95);color:var(--obsidian)}
.tag.bl{left:10px;bottom:10px;top:auto;background:rgba(33,27,20,.8);color:var(--white);padding:7px 12px}
.tag.fsb{right:10px;bottom:10px;top:auto;background:rgba(33,27,20,.8);color:var(--white);cursor:pointer;z-index:7}

/* full screen — the API path and the no-API fallback (iPhone) share the class:
   the stage pins to the viewport and the photo keeps its TRUE ratio inside it,
   so the wipe divider and the tags stay percentage-accurate */
.stage.fs{position:fixed;inset:0;z-index:999;width:auto;height:auto;aspect-ratio:auto;max-height:none;
  background:#211b14;display:flex;align-items:center;justify-content:center}
.stage.fs::backdrop{background:#211b14}
.stage.fs .photo{height:min(100vh,calc(100vw / var(--arn,1.3333)))}
.pill{border-radius:999px;padding:9px 13px;font:600 12px/1 var(--body);white-space:nowrap}
.pill.dark{background:rgba(33,27,20,.82);color:var(--white)}
.pill.light{background:rgba(249,247,242,.92);color:var(--ink-soft);cursor:pointer}
/* wrap-reverse: on a narrow portrait stage the second pill stacks ABOVE the
   first rather than off the right edge or below the clipped bottom */
.stage-hint{position:absolute;left:0;right:0;bottom:10px;display:flex;gap:8px;
  align-items:center;justify-content:center;flex-wrap:wrap-reverse;padding:0 10px;z-index:6}
.stage-hint.left{justify-content:flex-start}
.stage-top{position:absolute;left:0;right:0;top:12px;display:flex;justify-content:center;z-index:6;
  opacity:0;transition:opacity .15s}
.stage.dragging .stage-top{opacity:1}

/* wipe divider */
.divider{position:absolute;top:0;bottom:0;width:2px;background:var(--white);
  box-shadow:0 0 8px rgba(33,27,20,.35);z-index:4;pointer-events:none}
.divider b{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:46px;height:46px;border-radius:999px;background:var(--white);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;font:600 13px/1 var(--body);
  color:var(--gold);box-shadow:0 2px 10px rgba(33,27,20,.2)}

/* ---------- the quad ----------
   One element for the dim (evenodd punches the quad out as a hole), one inline
   svg for the outline, four handles. No canvas, no second image. */
.quad-dim{position:absolute;inset:0;background:rgba(33,27,20,.6);z-index:1;pointer-events:none}
.quad-svg{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}
.hnd{position:absolute;width:38px;height:38px;margin:-19px 0 0 -19px;border-radius:999px;
  background:rgba(255,45,155,.16);border:2px solid var(--quad);
  box-shadow:0 0 0 2px rgba(255,255,255,.75);display:flex;align-items:center;justify-content:center;
  cursor:grab;touch-action:none;z-index:5}
.hnd:active{cursor:grabbing}
.hnd i{width:9px;height:9px;border-radius:999px;background:var(--quad);display:block}

/* ---------- generating: the magic blur ---------- */
.magic{position:absolute;inset:0;z-index:6}
.magic .blur{position:absolute;inset:-40px;
  -webkit-backdrop-filter:blur(18px) saturate(1.4) brightness(.66);
          backdrop-filter:blur(18px) saturate(1.4) brightness(.66)}
.magic .lights{position:absolute;inset:0;overflow:hidden;mix-blend-mode:screen}
.magic .lights u{position:absolute;border-radius:50%;display:block}
.magic .l1{width:78%;height:130%;left:-14%;top:-22%;filter:blur(26px);animation:drift1 7s ease-in-out infinite;
  background:radial-gradient(closest-side,rgba(210,172,112,.9),rgba(210,172,112,0))}
.magic .l2{width:64%;height:120%;right:-16%;top:-14%;filter:blur(30px);animation:drift2 9.5s ease-in-out infinite;
  background:radial-gradient(closest-side,rgba(233,219,195,.75),rgba(233,219,195,0))}
.magic .l3{width:60%;height:100%;left:22%;bottom:-28%;filter:blur(28px);animation:drift3 12s ease-in-out infinite;
  background:radial-gradient(closest-side,rgba(196,157,94,.95),rgba(196,157,94,0))}
.magic .vig{position:absolute;inset:0;
  background:radial-gradient(115% 85% at 50% 46%,rgba(33,27,20,.06),rgba(33,27,20,.66))}
.magic .sheen{position:absolute;left:0;top:0;bottom:0;width:26%;filter:blur(6px);
  animation:sheen 3.6s ease-in-out infinite;
  background:linear-gradient(90deg,rgba(255,250,240,0),rgba(255,250,240,.4),rgba(255,250,240,0))}
.magic .say{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:24px;
  font-family:var(--display);font-weight:500;font-size:21px;line-height:1.25;letter-spacing:-.02em;
  color:var(--white);text-align:center;animation:breathe 3.2s ease-in-out infinite;
  text-shadow:0 0 30px rgba(210,172,112,.7),0 1px 2px rgba(33,27,20,.5)}
@keyframes drift1{0%,100%{transform:translate(-8%,-6%) scale(1)}50%{transform:translate(14%,10%) scale(1.3)}}
@keyframes drift2{0%,100%{transform:translate(12%,12%) scale(1.15)}50%{transform:translate(-14%,-8%) scale(.85)}}
@keyframes drift3{0%,100%{transform:translate(2%,16%) scale(.9)}50%{transform:translate(-16%,-6%) scale(1.35)}}
@keyframes sheen{0%{transform:translateX(-140%) skewX(-14deg)}100%{transform:translateX(260%) skewX(-14deg)}}
@keyframes breathe{0%,100%{opacity:.55}50%{opacity:1}}
@media(prefers-reduced-motion:reduce){
  .magic .l1,.magic .l2,.magic .l3,.magic .sheen,.magic .say{animation:none}
  .magic .sheen{opacity:.35}
}

/* the checklist under the stage — a rotating line alone reads as a stall */
.checklist{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:6px 14px}
.checklist div{display:flex;align-items:center;gap:11px;padding:10px 0;border-bottom:1px solid var(--expired)}
.checklist div:last-child{border-bottom:0}
.checklist s{width:22px;height:22px;flex:0 0 auto;border-radius:999px;background:var(--ivory-2);
  border:1px solid var(--line);display:flex;align-items:center;justify-content:center;
  font:600 12px/1 var(--body);color:var(--muted);text-decoration:none}
.checklist .done s{background:var(--doe-fill);border:0;color:var(--obsidian)}
.checklist .now  s{background:var(--gold-pale);border:0;color:var(--chip-ink)}
.checklist span{font:500 14px/1.3 var(--body);color:var(--dim)}
.checklist .done span,.checklist .now span{color:var(--obsidian)}

/* ---------- type ---------- */
.h-xl{font-family:var(--display);font-weight:500;font-size:27px;line-height:1.12;
  letter-spacing:-.025em;margin:16px 0 8px;text-align:center}
.h-l{font-family:var(--display);font-weight:500;font-size:24px;line-height:1.15;
  letter-spacing:-.02em;margin:0 0 8px}
.h-m{font-family:var(--display);font-weight:500;font-size:19px;line-height:1.3;
  letter-spacing:-.02em;margin:0 0 4px}
em{font-family:var(--display);font-weight:400;font-style:italic;color:var(--gold)}
.sub{font:400 14px/1.55 var(--body);color:var(--ink-soft);margin:0 0 16px;text-align:center}
.eyebrow{font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.note{text-align:center;font:400 12px/1.5 var(--body);color:var(--muted);margin-top:10px}

/* ---------- buttons ---------- */
.btn{display:flex;align-items:center;justify-content:center;text-align:center;border-radius:999px;
  border:1px solid transparent;font:600 16px/1 var(--body);padding:17px;text-decoration:none}
.btn:hover{text-decoration:none}
.btn-primary{width:100%;background:var(--doe-fill);color:var(--obsidian);border:0}
/* the cart buttons are anchors (target=_top breaks out of the iframe), so an
   anchor with no href is the "nothing to add yet" state */
.btn-primary[disabled],a.btn-primary:not([href]){background:var(--expired);color:var(--dim);
  cursor:default;pointer-events:none}
.btn-dark{width:100%;background:var(--obsidian);color:var(--chalk);border:0;padding:15px;font-size:15px}
.btn-ghost{background:var(--white);border:1px solid var(--line);color:var(--ink-soft);
  padding:14px 8px;font:500 13px/1 var(--body)}
.btn-dashed{background:var(--ivory-2);border:1px dashed var(--doe);color:var(--gold);
  padding:14px 8px;font:600 13px/1 var(--body)}
.quiet{display:inline-block;font:500 13px/1 var(--body);color:var(--gold);
  border-bottom:1px solid var(--gold-pale);padding-bottom:2px;background:none;
  border-top:0;border-left:0;border-right:0;cursor:pointer;text-decoration:none}
.quiet:hover{text-decoration:none}
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:16px}

/* ---------- tray ---------- */
.tray-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:0 2px 9px}
.link{font:600 12px/1 var(--body);color:var(--gold);background:none;border:0;padding:0}
.chosen{display:flex;gap:9px}
.chosen .c{flex:1;min-width:0;background:var(--white);border:1.5px solid var(--doe);border-radius:12px;
  padding:9px;display:flex;gap:9px;align-items:center;box-shadow:var(--ring)}
.chosen .c img{width:38px;height:38px;flex:0 0 auto;border-radius:8px;object-fit:cover;background:var(--chalk)}
.chosen .c div{min-width:0}
.chosen .c b{display:block;font:600 13px/1.2 var(--body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chosen .c i{display:block;font:400 11px/1.3 var(--body);font-style:normal;color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chosen .add{width:58px;flex:0 0 auto;background:var(--ivory-2);border:1px dashed var(--doe);
  border-radius:12px;display:flex;align-items:center;justify-content:center;
  font:500 22px/1 var(--body);color:var(--gold)}
.chosen .empty{flex:1;background:var(--ivory-2);border:1px dashed var(--dash);border-radius:12px;
  padding:14px;font:500 13px/1.4 var(--body);color:var(--muted);text-align:center}
/* nothing chosen yet: a swipeable strip of real swatches — one tap chooses */
.chosen .mini-rail{flex:1;min-width:0;display:flex;gap:10px;overflow-x:auto;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;padding:2px}
.chosen .mini-rail::-webkit-scrollbar{display:none}
.chosen .mini{flex:0 0 auto;width:64px;background:none;border:0;padding:0;text-align:center}
.chosen .mini .sw{display:block;width:64px;height:64px;border-radius:12px;
  border:1.5px solid var(--line);background-size:cover;background-position:center;
  background-color:var(--chalk)}
.chosen .mini i{display:block;font:500 10px/1.2 var(--body);font-style:normal;color:var(--muted);
  margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* sizer teaser (idle) */
.teaser{display:flex;align-items:center;gap:12px;background:var(--white);border:1px solid var(--line);
  border-radius:var(--r);padding:14px 16px;width:100%;text-align:left}
.teaser div{flex:1;min-width:0}
.teaser b{display:block;font:600 15px/1.3 var(--body)}
.teaser i{display:block;font:400 13px/1.4 var(--body);font-style:normal;color:var(--muted)}
.teaser s{font:500 18px/1 var(--body);color:var(--gold);text-decoration:none}

/* ---------- picker ---------- */
.pick-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.pick-done{background:var(--obsidian);color:var(--gold-bright);border:0;border-radius:999px;
  padding:7px 13px;font:600 12px/1 var(--body)}
.search{display:flex;align-items:center;background:var(--white);border:1px solid var(--line);
  border-radius:999px;padding:0 16px;height:48px;margin-bottom:10px}
.search input{flex:1;min-width:0;width:100%;border:0;background:transparent;
  font:500 15px/1 var(--body);color:var(--obsidian);outline:none}
.search s{font:500 15px/1 var(--body);color:var(--dim);text-decoration:none}
.rail{display:flex;gap:7px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;
  -webkit-overflow-scrolling:touch;margin-bottom:12px}
.rail::-webkit-scrollbar{display:none}
.rail button{flex:0 0 auto;background:var(--white);border:1px solid var(--line);color:var(--ink-soft);
  border-radius:999px;padding:9px 14px;font:600 13px/1 var(--body)}
.rail button.on{background:var(--obsidian);border-color:var(--obsidian);color:var(--chalk)}
/* the ONE internal scroller in the whole tool */
.grid{max-height:300px;overflow-y:auto;padding:2px}
.grid .g{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tile{position:relative;background:var(--white);border:1px solid var(--line);border-radius:12px;
  overflow:hidden;padding:0;text-align:left;display:block;width:100%}
.tile.on{border:1.5px solid var(--doe);box-shadow:var(--ring)}
.tile .sw{height:104px;background:var(--chalk) center/128% no-repeat;position:relative}
.tile .sw.none{display:flex;align-items:center;justify-content:center;padding:10px;
  font:600 13px/1.3 var(--body);color:var(--muted);text-align:center}
.tile .tick{position:absolute;right:8px;top:8px;width:26px;height:26px;border-radius:999px;
  background:rgba(255,255,255,.82);border:1px solid var(--line);display:flex;align-items:center;
  justify-content:center;font:700 13px/1 var(--body);color:transparent}
.tile.on .tick{background:var(--doe-fill);border:0;color:var(--obsidian)}
.tile .cap{padding:10px}
/* real product titles run to two lines; reserving both keeps the tile grid even
   so nothing shifts under a thumb as you scroll */
.tile .cap b{display:block;font:600 14px/1.2 var(--body);color:var(--obsidian);min-height:34px}
.tile .cap i{display:block;font:500 12px/1.4 var(--body);font-style:normal;color:var(--ink-soft)}
.tile[disabled]{opacity:.55}
.no-match{grid-column:1/-1;font:400 13px/1.5 var(--body);color:var(--muted);padding:10px 2px}

/* options strip — one shared row, so no tile ever grows under a thumb */
.opts{background:var(--sel);border:1px solid var(--gold-pale);border-radius:12px;padding:12px;margin-top:12px}
.opts .eyebrow{display:block;margin-bottom:9px;letter-spacing:.1em}
.opts .row{display:flex;gap:9px}
.opts select{flex:1;min-width:0;height:44px;background:var(--white);border:1px solid var(--line);
  border-radius:10px;padding:0 12px;font:500 14px/1 var(--body);color:var(--obsidian);
  appearance:none;-webkit-appearance:none}
.opts label{display:flex;align-items:center;gap:8px;height:44px;padding:0 13px 0 11px;border-radius:10px;
  background:var(--white);border:1px solid var(--line);flex:0 0 auto;cursor:pointer}
.opts label span{font:500 13px/1 var(--body);color:var(--ink-soft);white-space:nowrap}
.opts label input{position:absolute;opacity:0;width:0;height:0}
.opts label s{width:22px;height:22px;flex:0 0 auto;border-radius:6px;background:var(--white);
  border:1px solid var(--line);display:flex;align-items:center;justify-content:center;
  font:700 12px/1 var(--body);color:transparent;text-decoration:none}
.opts label input:checked+s{background:var(--doe-fill);border:0;color:var(--obsidian)}
.pick-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px}
.pick-foot span{font:400 12px/1.4 var(--body);color:var(--muted)}
.pick-foot b{font:600 13px/1 var(--body);color:var(--obsidian)}

/* ---------- cart block ---------- */
.sizer-row{display:flex;align-items:center;gap:9px;margin-bottom:13px}
.sizer-row>span{font:600 14px/1 var(--body);color:var(--ink-soft);flex:0 0 auto}
.sizer-row .x{font:400 15px/1 var(--body);color:var(--muted)}
/* min-width:0 on the wrapper AND width:100% on the input — without both, the
   input's intrinsic width sets the flex floor and this row overflows at 390px */
.sizer-row label{flex:1;min-width:0}
.sizer-row .f{display:flex;align-items:center;background:var(--ivory-2);border:1px solid var(--line);
  border-radius:10px;padding:0 11px;height:48px}
.sizer-row input{flex:1;min-width:0;width:100%;border:0;background:transparent;
  font:600 18px/1 var(--body);color:var(--obsidian);outline:none;appearance:none;-moz-appearance:textfield}
.sizer-row input::-webkit-outer-spin-button,.sizer-row input::-webkit-inner-spin-button{
  -webkit-appearance:none;margin:0}
.sizer-row .f s{font:500 12px/1 var(--body);color:var(--muted);text-decoration:none}
.sizer-fine{font:500 13px/1.5 var(--body);color:var(--ink-soft);margin-bottom:14px}
.cart-alts{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:12px;flex-wrap:wrap}

/* secondary action row */
.acts{display:flex;gap:8px}
.acts .btn{flex:1;min-width:0}
.acts .btn:last-child{flex:1.2}

/* ---------- past designs ---------- */
.past-rail{display:flex;gap:9px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;
  -webkit-overflow-scrolling:touch}
.past-rail::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;display:flex;gap:9px;align-items:center;background:var(--white);
  border:1px solid var(--line);border-radius:12px;padding:7px 12px 7px 7px;text-align:left}
.chip.on{border:1.5px solid var(--doe);box-shadow:var(--ring)}
.chip s{width:40px;height:40px;flex:0 0 auto;border-radius:8px;background:var(--chalk) center/cover no-repeat;
  text-decoration:none;display:block}
.chip b{display:block;font:600 13px/1.2 var(--body);white-space:nowrap}
.chip i{display:block;font:400 11px/1.3 var(--body);font-style:normal;color:var(--muted);white-space:nowrap}
.chip.expired{background:var(--expired);border:1px dashed var(--dash);opacity:.7;cursor:default}
.chip.expired b,.chip.expired i{color:var(--dim)}

/* ---------- interruptions: inline cards, never overlays ---------- */
/* Running out is a moment, not an advert. It gets the same white ground, the
   same border, the same radius and the same heading size as every other card
   in the tool — the old inverted grain panel was the ONLY dark surface here
   and that is exactly why it read as something injected from elsewhere. */
.lim{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:18px}
.lim .eyebrow{display:block;color:var(--gold);margin-bottom:11px}
.lim input{width:100%;height:50px;background:var(--ivory-2);border:1px solid var(--line);
  border-radius:999px;padding:0 18px;font:500 15px/1 var(--body);color:var(--obsidian);
  outline:none;margin-bottom:10px}
.lim input:focus{border-color:var(--doe);box-shadow:var(--ring)}
.lim input::placeholder{color:var(--dim)}
.lim .fine{font:400 11px/1.5 var(--body);color:var(--muted);text-align:center;margin-top:10px}
/* WhatsApp keeps its place, as a line under a rule rather than its own card
   with its own divider and its own button */
.lim .alt{border-top:1px solid var(--line);margin-top:16px;padding-top:13px;
  font:400 13px/1.5 var(--body);color:var(--muted)}
.lim .used{display:flex;gap:6px;margin-bottom:13px}
.lim .used i{flex:1;height:7px;border-radius:999px;background:var(--doe)}
/* it heads the tray, with the picker carrying on below it */
#tray .lim{margin-bottom:16px}
.warm{background:var(--ivory-2);border:1px solid var(--gold-pale);border-radius:var(--r);padding:18px}
.warm .ic{width:34px;height:34px;border-radius:999px;background:var(--gold-pale);color:var(--chip-ink);
  display:flex;align-items:center;justify-content:center;font:600 17px/1 var(--body);margin-bottom:13px}
.warm h4,.lim h4{font-family:var(--display);font-weight:500;font-size:21px;line-height:1.2;
  letter-spacing:-.02em;margin:0 0 7px}
.warm p,.lim p{font:400 14px/1.55 var(--body);color:var(--ink-soft);margin:0 0 14px}
.lim p b{color:var(--gold);font-weight:600}
.hand b{display:block;font:600 15px/1.3 var(--body);margin-bottom:5px}
.hand p{font:400 13px/1.5 var(--body);color:var(--muted);margin:0 0 13px}
.cf-slot{height:66px;border-radius:10px;border:1px dashed var(--dash);background:var(--ivory-2);
  display:flex;align-items:center;justify-content:center}
.stack{display:flex;flex-direction:column;gap:14px}

/* the pitch, when it sits in the tray column (desktop idle) */
.pitch{text-align:center}
.pitch .h-l{margin:0 0 8px;font-size:26px;line-height:1.15}
.pitch .sub{margin-bottom:14px}

/* example rail — fused to the stage it controls, not a card in the far column.
   No border or ground of its own: it reads as part of the picture block. */
#examples{margin-top:12px}
#examples .eyebrow{display:block;margin-bottom:9px}
.walls{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.walls button{display:block;width:100%;padding:0;border:0;background:none;text-align:left}
.walls i{display:block;font:500 11px/1.3 var(--body);font-style:normal;color:var(--muted);margin-top:6px}
.walls button.on i{color:var(--gold);font-weight:600}
/* two halves side by side, each the photo's own ratio — a fixed height leaves
   the halves letterboxed once the rail is as wide as the stage */
.walls s{aspect-ratio:calc(var(--arn,1.3333) * 2);border-radius:10px;border:1px solid var(--line);
  display:flex;overflow:hidden;text-decoration:none;transition:border-color .15s,box-shadow .15s}
.walls button:hover s{border-color:var(--doe)}
.walls button.on s{border:1.5px solid var(--doe);box-shadow:var(--ring)}
/* contain, not cover: at half-tile width a cover crop of two shots of the same
   room reads as one picture, and the point of the pair is the difference */
.walls s u{width:50%;background:var(--obsidian) center/contain no-repeat;display:block}

/* ---------- non-embed chrome ---------- */
.site{background:var(--white);border-bottom:1px solid var(--line)}
.site .in{max-width:1280px;margin:0 auto;height:64px;display:flex;align-items:center;
  justify-content:space-between;padding:0 22px}
.site img{height:44px;width:auto;display:block}

/* ---------- the one breakpoint ---------- */
@media(max-width:899px){
  .col{display:contents}
  #stage-wrap{order:1} #cta{order:2} #tray{order:3} #cartblock{order:4}
  #acts{order:5} #interrupt{order:6} #past{order:7}
  .desk-only{display:none !important}
  /* ---------- one spine ----------
     A phone reads down a single narrow column, and this one used to alternate
     three times on the way down: the example rail left, the pitch centred, the
     cards left again. Every run of text now starts on the same x.
     Two deliberate exceptions. Buttons keep centred labels, because they are
     full-width and the label is not a line of copy. And the pills sitting ON
     the photo keep their own alignment, because they belong to the picture,
     not to the column — "Drag to see the difference" is centred under the
     divider it describes. */
  .h-xl,.sub,.note,.lim .fine{text-align:left}
  .cart-alts{justify-content:flex-start}
  /* a portrait photo may run taller than the landscape cap so it can hold the
     full stage width instead of matting to a strip. px, never vh (embed). */
  #stage-wrap.tall{--cap:520px}
}
@media(min-width:900px){
  :root{--pad:22px;--cap:560px}
  .dz-body{flex-direction:row;align-items:flex-start;gap:22px}
  .col.left{flex:1;display:flex;flex-direction:column;gap:16px}
  .col.side{width:400px;flex:0 0 auto;display:flex;flex-direction:column;gap:14px}
  .dz-head{padding:14px 22px 13px}
  .h-xl{font-size:44px;line-height:1.05;letter-spacing:-.03em}
  .mob-only{display:none !important}
  .acts .btn{padding:15px 10px;font-size:14px}
  .divider b{width:50px;height:50px;font-size:14px}
  .hnd{width:40px;height:40px;margin:-20px 0 0 -20px}
  .hnd i{width:10px;height:10px}
  /* The idle examples are the image model's own output, and it hard-caps at
     ~1184px however you ask. At a 560 stage a retina screen wants ~1500 device
     pixels for them and gets a 1.26x upscale, which is exactly the softness
     you can see. 480 asks for ~1280 — near native — and shortens the idle page
     as a bonus. Uploaded and result stages keep the full 560: a phone photo
     gives us 2048 to composite onto, so there is real detail to show. */
  /* Capping only the HEIGHT in a column much wider than the picture pads it out
     with obsidian. Capping the WIDTH to the same box means the photo fills the
     stage exactly — no mat at all — and it sits centred on the page ground.
     Uploaded and result keep the taller stage: there the mat is deliberate, and
     with 2048px to show it barely appears. */
  .dz[data-phase="idle"] .stage{max-height:480px;max-width:calc(480px * var(--arn,1.3333));
    margin-left:auto;margin-right:auto}
  /* the strip lines up with the stage above it, not with the whole column */
  .dz[data-phase="idle"] #examples{max-width:calc(480px * var(--arn,1.3333));
    margin-left:auto;margin-right:auto}
}