.quick-start,.home-demo-sections {
  --demo-ink:#3c241c;
  --demo-muted:#785646;
  --demo-surface:#fff3e6;
  --demo-wash:#ffe7d4;
  --demo-line:#dfb697;
  --demo-accent:#a74223;
  --demo-apricot:#ff9e53;
}
[data-dashboard-mode=dark] :is(.quick-start,.home-demo-sections) {
  --demo-ink:#fff0df;
  --demo-muted:#e1baa6;
  --demo-surface:#352019;
  --demo-wash:#2b1813;
  --demo-line:#775242;
  --demo-accent:#ffad78;
}
.quick-start [hidden],.home-demo-sections [hidden]{display:none!important}
.quick-start{max-width:650px;margin-block:0 38px;text-align:center;color:var(--demo-ink)}
.quick-start h2{display:flex;align-items:center;gap:16px;margin-bottom:10px;font-size:14px;color:var(--demo-muted)}
.quick-start h2::before,.quick-start h2::after{content:"";flex:1;height:1px;background:var(--demo-line)}
.quick-start form{padding:12px 16px;border-radius:22px;border:1px solid var(--demo-line);background:var(--demo-surface);box-shadow:0 10px 28px #7736180b}
.quick-field{position:relative;display:flex;gap:8px;align-items:center;direction:ltr;padding:6px;border-radius:30px;border:1px solid var(--demo-line);background:var(--demo-wash)}
.quick-field:focus-within{border-color:var(--demo-accent);box-shadow:0 0 0 3px #ff9e5335}
.quick-label{position:absolute;clip-path:inset(50%);width:1px;height:1px;overflow:hidden}
.quick-address{display:flex;align-items:baseline;min-width:0;flex:1;padding-inline-start:13px;gap:3px}
.quick-address span{color:var(--demo-accent);font-weight:700;font-size:14px;white-space:nowrap}
.quick-address input{background:transparent;border:0;outline:none;flex:1;min-width:0;padding:7px 0;color:var(--demo-ink);font-size:17px;font-weight:700}
.quick-address input::placeholder{color:var(--demo-muted);opacity:.75}
.quick-start .home-button{min-height:40px;border-radius:25px;padding:6px 15px;gap:10px}
.quick-start button:disabled{opacity:.58;transform:none;cursor:default}
.quick-start p{margin-top:8px;color:var(--demo-muted);font-size:12px}
.quick-result{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:5px 11px;margin-top:8px;font-size:12px}
.quick-status{font-weight:700;color:var(--demo-accent)}
.quick-status[data-state=available]{color:#346446}
[data-dashboard-mode=dark] .quick-status[data-state=available]{color:#a9e1ae}
.quick-edit{border:0;background:none;color:var(--demo-accent);text-decoration:underline;text-underline-offset:3px}
.quick-slug-edit{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:8px;margin:8px auto;color:var(--demo-muted);font-size:13px}
.quick-slug-edit input{width:min(100%,230px);padding:5px 9px;border-radius:8px;border:1px solid var(--demo-line);background:var(--demo-wash);color:var(--demo-ink)}

.home-demo-sections{color:var(--demo-ink);background:var(--demo-wash)}
.live-showcase{padding:clamp(52px,7vw,100px) 0 clamp(32px,5vw,65px);background:radial-gradient(ellipse at 50% 44%,#fabe92 0%,transparent 50%)}
[data-dashboard-mode=dark] .live-showcase{background:radial-gradient(ellipse at 50% 44%,#643825 0%,transparent 50%)}
.live-inner{max-width:1100px;text-align:center}
.live-heading{max-width:620px;margin-inline:auto}
.showcase-eyebrow{color:var(--demo-accent);font-size:12px;font-weight:700}
.live-heading h2,.pdf-copy h2{font-size:clamp(30px,4vw,55px);line-height:1.18;font-weight:700;margin-block:6px 13px}
.live-heading h2 em{color:var(--demo-accent);font-style:normal}
.live-heading>p:last-child,.pdf-copy>p:not(.showcase-eyebrow){color:var(--demo-muted);font-size:15px}
.live-controls{margin-top:22px}
.live-types,.live-filters,.live-devices,.live-tools,.live-actions{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap}
.live-types,.live-devices{width:max-content;max-width:100%;margin-inline:auto;gap:3px;padding:4px;border:1px solid var(--demo-line);border-radius:13px;background:var(--demo-surface)}
.live-types button,.live-filters button,.live-devices button,.live-expand,.live-dialog-close{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:6px 12px;min-height:38px;
  border:1px solid transparent;border-radius:9px;background:transparent;color:var(--demo-ink);font-size:13px;font-weight:700;
}
.live-types button[aria-pressed=true],.live-devices button[aria-pressed=true],.live-filters button[aria-pressed=true]{background:#ffb276;color:#3d2216;border-color:#e58c56}
.live-types b,.live-filters b{display:inline-grid;place-items:center;min-width:20px;border-radius:6px;background:#8f432019;font-size:11px}
.live-filters{margin:11px auto 0;gap:5px}
.live-filters button{padding:3px 9px;min-height:33px;border-color:var(--demo-line);border-radius:22px;background:var(--demo-surface);font-size:12px}
.live-stage{--screen-width:760px;--screen-ratio:1.79;display:flex;justify-content:center;margin:24px auto 0;padding:9px 7px 27px;min-width:0}
.live-stage[data-device=laptop]{--screen-width:680px;--screen-ratio:1.63}
.live-stage[data-device=tablet]{--screen-width:475px;--screen-ratio:1.28}
.live-stage[data-device=phone]{--screen-width:280px;--screen-ratio:.53}
.live-device{position:relative;isolation:isolate;min-width:0;background:linear-gradient(145deg,#765345,#3a261f 42%,#1f1511);box-shadow:0 32px 42px -25px #4e230e91,0 3px 0 #976044;border:1px solid #ac8069}
.live-primary{flex:0 1 var(--screen-width);width:min(100%,var(--screen-width));padding:6px;border-radius:16px}
.live-viewport{position:relative;isolation:isolate;overflow:hidden;background:#fff5e8;border-radius:7px}
.live-primary .live-viewport{aspect-ratio:var(--screen-ratio)}
.live-poster{width:100%;height:100%;object-fit:cover;object-position:top;position:absolute;inset:0}
.live-frame,.live-frame iframe{position:absolute;inset:0;border:0}
.live-frame iframe{display:block;max-width:none;transform-origin:top left;background:#fff5e8}
.live-frame iframe[data-loading]{opacity:0}
.live-bezel{display:flex;align-items:center;gap:5px;height:19px;padding:0 5px;background:#eee0d7;border-radius:7px 7px 0 0}
.live-bezel span{width:6px;height:6px;border-radius:50%;background:#c9644f}
.live-bezel span:nth-child(2){background:#eaa450}.live-bezel span:nth-child(3){background:#6d9c74}
.live-bezel i{width:38%;height:8px;border-radius:6px;background:#fff8f1;margin-inline-start:8px}
.live-stage[data-device=desktop] .live-primary::after{content:"";position:absolute;width:24%;height:24px;top:100%;left:38%;background:linear-gradient(#634639,#a07861);clip-path:polygon(42% 0,58% 0,62% 75%,96% 83%,100% 100%,0 100%,4% 83%,38% 75%);z-index:-1}
.live-stage[data-device=laptop] .live-primary::after{content:"";position:absolute;top:100%;left:-4%;width:108%;height:12px;background:linear-gradient(#a98774,#513527);border-radius:0 0 38px 38px;z-index:-1}
.live-stage[data-device=phone] .live-primary,.live-stage[data-device=tablet] .live-primary{padding:7px;border-radius:24px}
.live-stage[data-device=phone] .live-primary .live-viewport{border-radius:17px}
.live-stage[data-device=phone] .live-primary .live-bezel,.live-stage[data-device=tablet] .live-primary .live-bezel{display:none}
.live-tools{gap:8px 13px;margin-top:2px}
.live-caption{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:7px}
.live-caption small{color:var(--demo-muted);font-size:12px}
.live-devices{margin:0}
.live-devices button,.live-expand{min-width:40px;padding:5px;min-height:36px}
.live-expand,.live-dialog-close{border-color:var(--demo-line);background:var(--demo-surface)}
.device-icon{position:relative;display:inline-block;width:18px;height:12px;border:1.5px solid currentColor;border-radius:2px}
.device-icon::after{content:"";position:absolute;left:50%;transform:translateX(-50%);bottom:-4px;width:10px;border-bottom:1.5px solid currentColor}
.device-icon-laptop::after{width:21px;bottom:-3px}
.device-icon-tablet,.device-icon-phone{width:12px;height:17px;border-radius:3px}
.device-icon-phone{width:9px;height:16px}
.device-icon-tablet::after,.device-icon-phone::after{width:3px;bottom:1px}
.device-icon-expand{width:17px;height:17px;border-style:dashed}
.device-icon-expand::after{display:none}
.live-open,.live-library{color:var(--demo-accent);font-size:13px;font-weight:700;text-decoration:underline;text-underline-offset:4px}
.live-rail{display:grid;grid-template-columns:34px minmax(0,1fr) 34px;align-items:center;gap:8px;margin:20px auto 0;max-width:985px}
.live-rail>button{width:34px;height:34px;border:1px solid var(--demo-line);border-radius:50%;color:var(--demo-ink);background:var(--demo-surface);font:25px/1 Arial,sans-serif}
.live-rail>button:disabled{visibility:hidden}
.live-choices{display:flex;overflow:auto;scrollbar-width:none;gap:9px;padding:5px;scroll-snap-type:x proximity;overflow-anchor:none}
.live-choices>button{display:grid;align-content:start;text-align:start;flex:0 0 clamp(112px,13vw,148px);gap:2px;scroll-snap-align:center;border:0;border-radius:8px;background:none;color:var(--demo-ink);padding:0 0 5px;font-size:12px}
/* Auto margins center the group when it fits and collapse when it overflows. */
.live-choices>button:first-child{margin-inline-start:auto}
.live-choices>button:last-child{margin-inline-end:auto}
.live-choices>button:only-child{text-align:center}
.live-choices>button img{width:100%;height:auto;aspect-ratio:1.65;object-fit:cover;object-position:top;border:2px solid var(--demo-line);border-radius:8px;background:var(--demo-surface)}
.live-choices>button[aria-pressed=true] img{border-color:var(--demo-accent);box-shadow:0 3px 12px #b8582d29}
.live-choices strong,.live-choices small{padding-inline:3px}
.live-choices small{color:var(--demo-muted);font-size:11px}
.live-actions{margin-top:17px;gap:13px 20px}
.live-actions .home-button,.pdf-copy .home-button{background:var(--demo-apricot);color:#392015}
.live-qr{display:flex;align-items:center;gap:8px;color:var(--demo-muted);font-size:12px}
.live-qr img{border:1px solid var(--demo-line);border-radius:8px;background:white}
.live-dialog{position:fixed;width:min(1120px,calc(100% - 28px));max-height:calc(100dvh - 28px);padding:12px;border:1px solid var(--demo-line);border-radius:16px;background:var(--demo-surface);color:var(--demo-ink)}
.live-dialog::backdrop{background:#25130ee0}
.live-dialog-tools{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.live-dialog-screen .live-viewport{height:min(76dvh,710px);margin:auto}
.live-dialog-screen[data-device=phone] .live-viewport{max-width:390px}
.live-dialog-screen[data-device=tablet] .live-viewport{max-width:768px}

.pdf-story{position:relative;--tear:0;--fold:0;--phones:0;--qr:0;--strike:0;background:linear-gradient(180deg,transparent,#f4c7a84c 32%,transparent)}
.pdf-story[data-animated]{min-height:calc(100svh + 570px)}
.pdf-sticky{min-height:clamp(430px,66vw,650px);display:grid;grid-template-columns:.9fr 1.1fr;align-items:center;gap:clamp(18px,5vw,64px);padding-block:20px 34px}
.pdf-story[data-animated] .pdf-sticky{position:sticky;top:var(--pin-top,105px)}
.pdf-copy{max-width:460px}
.pdf-copy h2 span{position:relative;display:inline-block}
.pdf-copy h2 i{position:absolute;z-index:1;left:-4%;right:-4%;top:57%;height:.11em;background:#e96e43;border-radius:100%;transform:rotate(-6deg) scaleX(var(--strike));transform-origin:left}
.pdf-copy>p:not(.showcase-eyebrow){max-width:390px;line-height:1.85}
.pdf-copy .home-button{margin-top:21px}
.pdf-scene{position:relative;isolation:isolate;direction:ltr;min-width:0;aspect-ratio:1.12}
.pdf-scene::before{content:"";position:absolute;inset:4% -5% 0;background:radial-gradient(ellipse,#b75b3134,transparent 67%);z-index:-1}
.pdf-sheet{position:absolute;z-index:2;inset:7% 24% 10%;transform:rotate(-5deg);pointer-events:none}
.pdf-fragments,.pdf-fragment,.pdf-paper{position:absolute;inset:0}
.pdf-fragment{transform:translate(calc(var(--dx)*var(--tear)),calc(var(--dy)*var(--tear) + 15%*var(--fold))) rotate(calc(var(--angle)*var(--tear))) rotateY(calc(var(--flip)*var(--fold)));opacity:calc(1 - var(--fold));will-change:transform}
.pdf-fragment:nth-child(1){--dx:-30%;--dy:-12%;--angle:-12deg;--flip:78deg;clip-path:polygon(0 0,51% 0,47% 21%,55% 40%,49% 58%,39% 52%,24% 62%,0 56%)}
.pdf-fragment:nth-child(2){--dx:30%;--dy:-7%;--angle:13deg;--flip:-79deg;clip-path:polygon(51% 0,100% 0,100% 65%,76% 69%,49% 58%,55% 40%,47% 21%)}
.pdf-fragment:nth-child(3){--dx:-20%;--dy:20%;--angle:9deg;--flip:-75deg;clip-path:polygon(0 56%,24% 62%,39% 52%,49% 58%,54% 77%,48% 100%,0 100%)}
.pdf-fragment:nth-child(4){--dx:28%;--dy:28%;--angle:-9deg;--flip:77deg;clip-path:polygon(49% 58%,76% 69%,100% 65%,100% 100%,48% 100%,54% 77%)}
.pdf-paper{direction:rtl;text-align:center;overflow:hidden;padding:12% 8%;color:#553a25;background:repeating-linear-gradient(0deg,#f1e3c5,#f1e3c5 2px,#f4e8cd 3px,#f4e8cd 5px);border-radius:4px}
.pdf-paper>strong{display:block;font-size:clamp(14px,2.25vw,32px);font-weight:700;line-height:1.3}
.pdf-paper>small{display:block;color:#735137;font-size:clamp(7px,1vw,12px)}
.pdf-paper-columns{display:grid;grid-template-columns:1fr 1fr;gap:6%;padding-block:8%;margin:8% 0 4%;border-top:3px double #8b6b49;border-bottom:1px solid #b69b75;text-align:start;font-size:clamp(5px,.85vw,11px)}
.pdf-paper-columns b{display:block;color:#823e25;margin-block:4% 2%}
.pdf-paper-columns p{display:flex;align-items:baseline;gap:2px;white-space:nowrap}
.pdf-paper-columns i{flex:1;border-bottom:1px dotted #85634c}
.pdf-file{position:absolute;right:-13%;top:-4%;padding:6px 13px;border-radius:9px;color:#fff0dc;background:#533024;box-shadow:0 6px 10px #43221248;font-size:clamp(10px,1.2vw,14px);font-weight:700;opacity:calc(1 - var(--tear))}
.pdf-phones{position:absolute;inset:5% 1% 12%;display:flex;align-items:center;justify-content:center;opacity:var(--phones)}
.pdf-phone{position:relative;display:block;width:33%;margin-inline:-.3%;padding:5px;border:1px solid #8f6655;border-radius:13%/7%;background:#2a1b16;box-shadow:0 16px 28px -12px #442311a1;transform:translateY(calc(48px*(1 - var(--phones)))) rotate(-11deg)}
.pdf-phone:last-child{transform:translateY(calc(48px*(1 - var(--phones)))) rotate(11deg)}
.pdf-phone-main{z-index:1;transform:translateY(calc(-15px + 55px*(1 - var(--phones))))}
.pdf-phone img{width:100%;height:auto;aspect-ratio:390/770;object-fit:cover;object-position:top;border-radius:11%/6%}
.pdf-phone span{position:absolute;bottom:7%;inset-inline-start:8%;padding:3px 7px;border-radius:8px;background:#3e251eef;color:#fff2e4;font-size:clamp(7px,1vw,12px);font-weight:700;direction:rtl;white-space:nowrap}
.pdf-qr{position:absolute;z-index:3;left:8%;bottom:1%;width:clamp(78px,25%,138px);display:grid;gap:5px;padding:8px;border-radius:11px;text-align:center;background:#543227;color:#fff4e6;font-size:clamp(8px,1.1vw,12px);font-weight:700;opacity:var(--qr);transform:translateY(calc(28px*(1 - var(--qr)))) rotate(8deg);box-shadow:0 12px 22px -11px #442311a1}
.pdf-qr img{width:100%;height:auto;background:white;border-radius:5px}
.pdf-story:not([data-animated]){--phones:1;--qr:1;--strike:1}
.pdf-story:not([data-animated]) .pdf-sheet{display:none}
.showcase-contact{padding-top:12px}

@media(max-width:760px){
  .live-inner,.pdf-sticky{width:calc(100% - 28px)}
  .live-stage{padding-inline:1px}
  .live-primary{border-radius:10px;padding:4px}
  .live-heading>p:last-child,.pdf-copy>p:not(.showcase-eyebrow){font-size:14px}
}
@media(max-width:560px){
  .quick-start{width:calc(100% - 32px);margin-bottom:25px}
  .quick-start form{padding-inline:8px}
  .quick-address{padding-inline-start:6px}
  .quick-address span{font-size:12px}
  .quick-address input{font-size:14px}
  .quick-start .home-button{padding-inline:9px;font-size:12px;gap:5px}
  .live-stage{margin-top:15px;padding-bottom:24px}
  .live-stage[data-device=phone]{--screen-width:300px;--screen-ratio:.57}
  .live-stage[data-device=desktop] .live-primary::after{height:15px}
  .live-caption{width:100%}
  .live-rail{grid-template-columns:28px minmax(0,1fr) 28px;gap:2px}
  .live-rail>button{width:28px;height:28px}
  .live-actions{gap:10px 14px}
  .live-qr{display:none}
  .pdf-sticky{grid-template-columns:1fr;gap:4px;min-height:0;text-align:center;padding-top:16px;padding-bottom:12px}
  .pdf-copy,.pdf-copy>p:not(.showcase-eyebrow){margin-inline:auto}
  .pdf-copy h2{margin-block:4px 8px}
  .pdf-copy .home-button{margin-top:12px;min-height:41px;padding-block:7px}
  .pdf-scene{width:min(95%,355px);margin-inline:auto}
  .pdf-story[data-animated]{min-height:calc(100svh + 390px)}
}
@media(pointer:coarse){.live-devices button,.live-expand,.live-filters button{min-height:44px}}

/* Availability is a clear badge on the address field, after a successful lookup. */
.quick-status[data-state=available]{position:absolute;z-index:2;left:50%;top:0;transform:translate(-50%,-50%);display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:32px;padding:3px 14px;border:1px solid var(--demo-line);border-radius:999px;background:var(--demo-surface);box-shadow:0 3px 12px #43231912;color:var(--demo-ink);font-size:15px;font-weight:700;line-height:1.5;white-space:nowrap;direction:rtl}
.quick-status-icon{display:inline-grid;place-items:center;flex:none;width:19px;height:19px;border:1.7px solid #218449;border-radius:50%;color:#218449;font:700 12px/1 Arial,sans-serif}
.quick-field[data-state=available]{border-color:#b2693d;box-shadow:0 0 0 3px #ff9e531a}
[data-dashboard-mode=dark] .quick-status[data-state=available]{color:var(--demo-ink)}
[data-dashboard-mode=dark] .quick-status-icon{color:#6cda94;border-color:#6cda94}
html[dir=ltr] .quick-status[data-state=available]{direction:ltr}
.quick-start form{padding-top:20px}

/* A phone chassis surrounds the live iframe; hardware never intercepts demo input. */
.live-phone-hardware{display:none;position:absolute;inset:0;z-index:4;pointer-events:none;color:#1b1816}
.live-stage[data-device=phone]{--screen-width:292px;--screen-ratio:.48}
:is(.live-stage[data-device=phone] .live-primary,.live-dialog-screen[data-device=phone]){position:relative;padding:7px;border:2px solid #b7a99b;border-radius:44px;background:#171513;box-shadow:inset 0 0 0 1px #e0d4c5,0 0 0 1px #79695c,0 25px 40px -17px #43231975;transform:none}
:is(.live-stage[data-device=phone] .live-primary,.live-dialog-screen[data-device=phone]) .live-viewport{border-radius:35px;background:#f7f3ec}
:is(.live-stage[data-device=phone] .live-primary,.live-dialog-screen[data-device=phone]) .live-phone-hardware{display:block}
:is(.live-stage[data-device=phone] .live-primary,.live-dialog-screen[data-device=phone]) .live-frame{top:31px;bottom:12px}
.live-stage[data-device=phone] .live-poster{top:31px;height:calc(100% - 43px)}
:is(.live-stage[data-device=phone] .live-primary,.live-dialog-screen[data-device=phone]) .live-viewport::after{content:"";position:absolute;z-index:3;bottom:4px;left:50%;transform:translateX(-50%);width:29%;height:4px;border-radius:5px;background:#1b1816;pointer-events:none}
.live-phone-island{position:absolute;top:15px;left:50%;transform:translateX(-50%);width:74px;height:20px;border-radius:16px;background:radial-gradient(circle at calc(100% - 10px) 50%,#1d2b3c 0 2px,#0a0a0b 3px 4px,transparent 5px),#090909;box-shadow:inset 0 0 0 1px #252321}
.live-phone-time{position:absolute;top:20px;left:27px;font:700 9px/1 Arial,sans-serif;letter-spacing:-.15px}
.live-phone-status{position:absolute;top:19px;right:24px;display:block}
.live-phone-key{position:absolute;left:-5px;width:3px;background:linear-gradient(90deg,#8f7c6b,#cfc0ad);border-radius:2px 0 0 2px;box-shadow:0 0 0 1px #5f50402b}
.live-phone-mute{top:75px;height:18px}
.live-phone-volume-up{top:111px;height:31px}
.live-phone-volume-down{top:153px;height:31px}
.live-phone-power{left:auto;right:-5px;top:137px;height:47px;border-radius:0 2px 2px 0;background:linear-gradient(90deg,#cfc0ad,#8f7c6b)}
.live-dialog-screen[data-device=phone]{width:min(390px,calc(100% - 12px));margin:5px auto}
@media(max-width:560px){.live-stage[data-device=phone]{--screen-width:292px;--screen-ratio:.48}}

.live-filters{
  width:max-content;
  max-width:100%;
  margin:14px auto 0;
  gap:4px;
  padding:5px;
  border:1px solid var(--demo-line);
  border-radius:16px;
  background:var(--demo-surface);
}
.live-filters button{
  min-height:36px;
  padding:5px 12px;
  border:1px solid transparent;
  border-radius:11px;
  background:transparent;
  font-size:13px;
  white-space:nowrap;
}
.live-filters button:not([aria-pressed=true]):hover{background:var(--demo-wash)}
.live-filters button[aria-pressed=true]{background:var(--demo-accent);border-color:transparent;color:var(--demo-surface)}
.live-filters b{min-width:18px;padding-inline:4px;background:var(--demo-wash);color:var(--demo-muted)}
.live-filters button[aria-pressed=true] b{background:#ffffff24;color:inherit}
@media(max-width:560px){
  .live-filters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
  .live-filters button{padding-inline:6px;font-size:12px}
  .live-filters button:last-child:nth-child(4){grid-column:2}
}
@media(pointer:coarse){.live-filters button{min-height:44px}}