/* Shared base for the three SmartSell design previews.
   Holds only what every design needs: reset, the Beyond The Box preview bar,
   the bottom "choose this design" bar, and the demo enquiry dialog skeleton.
   Each design styles itself in its own file (d1.css, d2.css, d3.css) and may
   restyle the dialog and buttons through the variables below. */

@font-face{font-family:Instrument;src:url(fonts/instrument.woff2) format('woff2');font-weight:400 700;font-display:swap}
@font-face{font-family:Bricolage;src:url(fonts/bricolage.woff2) format('woff2');font-weight:600 700;font-display:swap}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:110px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg,#fafaf7);color:var(--ink,#111);-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
h1,h2,h3,p,figure,ul,ol,dl,dd,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--focus,#111);outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:fixed;left:16px;top:-100px;background:#fff;color:#111;padding:10px 16px;z-index:100}
.skip:focus{top:52px}

/* ---------- Beyond The Box preview bar (not part of SmartSell's design) ---------- */
.preview-bar{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:46px;padding:6px clamp(12px,3vw,28px);background:#e9e3d9;color:#16130f;border-bottom:1px solid #d6cfc2;font:13px/1.3 Instrument,system-ui,sans-serif}
.preview-bar a{text-decoration:none;font-weight:600}
.preview-bar a:hover{color:#1d4e4a}
.preview-bar .pb-title{font-weight:600}
.preview-bar .pb-title small{font:11px 'Space Mono',ui-monospace,monospace;letter-spacing:.1em;color:#6e675d;margin-left:10px;text-transform:uppercase}
.pb-controls{display:flex;align-items:center;gap:14px}
.pb-choose{border:1px solid #1d4e4a;background:none;border-radius:999px;padding:5px 12px;font-size:12px;font-weight:600;color:#1d4e4a}
.pb-choose[aria-pressed=true]{background:#1d4e4a;color:#fff}
html.embed .preview-bar,html.embed .skip,html.embed .choose-end{display:none}
html.embed{scroll-behavior:auto}

/* ---------- Bottom bar back to the proposal (Beyond The Box) ---------- */
.choose-end{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;justify-content:space-between;padding:22px clamp(16px,4vw,48px);background:#e9e3d9;color:#16130f;border-top:1px solid #d6cfc2;font:14px/1.5 Instrument,system-ui,sans-serif}
.choose-end strong{font:600 18px/1.3 Bricolage,sans-serif}
.choose-end .ce-actions{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.choose-end button{background:#1d4e4a;color:#fff;border:0;border-radius:9px;padding:10px 16px;font-weight:600}
.choose-end a{font-weight:600;color:#1d4e4a}

/* ---------- Demo enquiry dialog: structure only; designs restyle it ---------- */
.enquiry-dialog{border:0;padding:0;max-width:min(560px,calc(100% - 24px));width:100%;background:var(--surface,#fff);color:var(--ink,#111);box-shadow:0 30px 80px rgba(0,0,0,.3)}
.enquiry-dialog::backdrop{background:rgba(10,10,10,.6)}
.dialog-inner{padding:28px;position:relative}
.dialog-close{position:absolute;right:10px;top:8px;border:0;background:none;font-size:26px;line-height:1;width:44px;height:44px}
.dialog-kicker{font-size:13px;opacity:.75}
.enquiry-dialog h2{margin:8px 0 6px}
.demo-notice{font-size:14px;opacity:.8;margin-bottom:18px}
.demo-form{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.demo-form label{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:600}
.demo-form input,.demo-form select{width:100%;min-width:0;min-height:46px;padding:10px 12px;border:1px solid var(--line,#999);background:var(--bg,#fff);color:var(--ink,#111);border-radius:var(--radius,0);font-size:16px;font-weight:400}
.demo-form .consent{grid-column:1/-1;flex-direction:row;align-items:center;gap:10px;font-weight:400;font-size:14px}
.demo-form .consent input{width:24px;height:24px;min-height:0;flex:none;margin:0;accent-color:var(--accent,#111)}
.demo-form button,.form-status{grid-column:1/-1}
.demo-form button{min-height:50px}
.form-status{font-size:14px}
.demo-form.completed>label{opacity:.5}

@media(max-width:760px){
  .preview-bar{flex-wrap:wrap;row-gap:4px;padding:6px 10px;font-size:12px}
  .preview-bar .pb-title{display:none}
  .pb-controls{gap:8px}
  .preview-bar>a,.pb-choose{min-height:40px;display:inline-flex;align-items:center;white-space:nowrap}
  .choose-end{flex-direction:column;align-items:flex-start;padding-bottom:28px}
  .choose-end .ce-actions{width:100%;gap:4px 20px}
  .choose-end button{width:100%;min-height:48px;font-size:15px}
  .choose-end a{display:inline-flex;align-items:center;min-height:44px}
  .dialog-inner{padding:24px 18px}
  .enquiry-dialog{max-height:calc(100dvh - 24px);overflow:auto}
  .demo-form{grid-template-columns:1fr}
}
@media(max-width:400px){.preview-bar>a{font-size:0}.preview-bar>a::before{content:"\2190  All";font-size:12px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition:none!important}html{scroll-behavior:auto}}