/* The "How it works" step pictures, shared by the homepage and the How it works page (1 Nov 2026). */
.mini{height:196px;margin:0 0 22px;border-radius:16px;background:var(--raised,#1c1b16);position:relative;overflow:hidden}
/* "How it works" (Orhan, 1 Nov 2026): one concept website, Saffron House, in three moments. 1: on a phone as the
   private preview; 2: the same page with two numbered notes; 3: live in a browser. Each step names what is paid. */
.step-tag{display:flex;align-items:center;gap:9px;margin:0 0 10px;color:var(--accent,#e8c547);font-size:13px;font-weight:700;letter-spacing:.02em}
.step-tag b{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--accent,#e8c547);color:#15140f;font-size:12px;font-weight:800}
.mini img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.mini-phone .phone{position:absolute;right:28px;top:18px;bottom:-28px;aspect-ratio:1/2;border:3px solid #3a382f;border-radius:20px;overflow:hidden;background:#0c0b08}
/* step 1: the request and VOLT's reply beside the phone that holds the preview (Orhan: "a bit empty", 1 Nov) */
.mini-phone{container-type:inline-size}
.mini-phone .chat{position:absolute;left:18px;top:50%;transform:translateY(-50%);width:calc(100% - 176px);max-width:260px;display:flex;flex-direction:column;gap:8px}
.mini-phone .bub{max-width:100%;padding:8px 12px;font-size:12.5px;line-height:1.35;color:var(--ink)}
.mini-phone .you{align-self:flex-end;border-radius:12px 12px 3px 12px;background:rgba(232,197,71,.18)}
.mini-phone .us{align-self:flex-start;border-radius:12px 12px 12px 3px;background:#2c2b23}
@container (max-width:300px){.mini-phone .you{display:none}.mini-phone .bub{font-size:11.5px;padding:7px 10px}}
.mini-edit .win,.mini-live .win{position:absolute;left:18px;right:18px;top:18px;bottom:-12px;border-radius:10px 10px 0 0;overflow:hidden}
.mini-edit{container-type:inline-size}
.mini-edit .win{top:50%;bottom:auto;transform:translateY(-50%);border-radius:10px}   /* centred, as tall as the picture: no bare strip at any width; the notes sit mid-picture */
/* one column (900 px and below on both pages): the screenshot is taller than its box, so it starts at the top and the notes stay in view */
@media (max-width:900px){.mini-edit .win{top:18px;transform:none}}
@container (max-width:300px){.mini-edit .note{padding:3px 7px;font-size:10px}.mini-edit .pin{width:17px;height:17px;font-size:10px}}
.mini-edit .shot{position:relative;display:block;aspect-ratio:16/10}
.mini-edit .pin{position:absolute;display:grid;place-items:center;width:20px;height:20px;border-radius:50% 50% 50% 3px;background:var(--accent,#e8c547);color:#15140f;font-size:11px;font-weight:800}
.mini-edit .note{position:absolute;padding:5px 9px;border-radius:8px;background:var(--ink);color:#15140f;font-size:11.5px;font-weight:600;white-space:nowrap}
.mini-edit .p1{left:5%;top:10%}.mini-edit .n1{left:calc(5% + 26px);top:calc(10% - 1px)}   /* above the headline, so the headline stays readable */
.mini-edit .p2{left:74%;top:44%}.mini-edit .n2{left:calc(74% - 64px);top:calc(44% + 26px)}   /* under the pin, on the dish, clear of the headline */
.mini-live .win{top:58px}
.mini-live .browser{position:absolute;left:18px;right:18px;top:18px;height:32px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.mini-live .url{display:flex;align-items:center;gap:8px;min-width:0;padding:7px 12px;border-radius:99px;background:#2a2921;color:var(--ink);font-size:12.5px;white-space:nowrap}
.mini-live .lock{flex:none;width:9px;height:7px;border-radius:2px;background:var(--muted);position:relative;margin-top:3px}
.mini-live .lock::before{content:"";position:absolute;left:1.5px;bottom:5px;width:6px;height:5px;border:1.5px solid var(--muted);border-bottom:0;border-radius:4px 4px 0 0;box-sizing:border-box}
.mini-live .live{display:flex;gap:8px;align-items:center;flex:none;font-size:13px;font-weight:800;font-stretch:115%}
.mini-live{--live:#5fd38d}   /* the green "Live" Orhan chose */
.mini-live .live i{position:relative;width:9px;height:9px;border-radius:50%;background:var(--live)}.mini-live .live i::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--live);opacity:0}
@media (prefers-reduced-motion: no-preference){.mini-live .live i::after{animation:live-pulse 2.4s ease-out infinite}}
@keyframes live-pulse{0%{transform:scale(1);opacity:.5}70%,100%{transform:scale(3);opacity:0}}