/* =========================================================
   "Mock Up Yours" project builder
   ========================================================= */
.builder{display:grid;grid-template-columns:minmax(0,400px) minmax(0,1fr);gap:40px;align-items:start;}
@media(max-width:1000px){.builder{grid-template-columns:1fr;}}
.b-controls{display:flex;flex-direction:column;gap:30px;min-width:0;}
.b-preview{position:sticky;top:96px;min-width:0;}
@media(max-width:1000px){.b-preview{position:static;}}

.b-types{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);}
.b-types button{
  background:var(--ink);border:none;padding:16px 10px;cursor:pointer;text-align:center;
  display:flex;flex-direction:column;gap:4px;transition:background .2s;
}
.b-types button strong{font-family:var(--serif);font-size:19px;font-weight:600;color:var(--cream);}
.b-types button span{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-2);}
.b-types button[aria-pressed="true"]{background:var(--tan);}
.b-types button[aria-pressed="true"] strong,.b-types button[aria-pressed="true"] span{color:var(--ink);}

.b-group{display:flex;flex-direction:column;gap:12px;}
.b-group > .label{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);}
.b-group select,.b-group input[type=text]{
  width:100%;background:transparent;border:none;border-bottom:1px solid var(--line);border-radius:0;
  color:var(--cream);font-family:var(--sans);font-size:16px;padding:10px 2px;
}
.b-group select{appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 12px) 55%,calc(100% - 7px) 55%;background-size:5px 5px;background-repeat:no-repeat;}
.b-group select option{background:var(--ink);color:var(--cream);}
.b-group input:focus,.b-group select:focus{outline:none;border-color:var(--cream);}
.b-hint{font-size:12.5px;color:var(--muted-2);}

.b-styles{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px;}
.b-style{border:1px solid var(--line);background:none;cursor:pointer;padding:10px;text-align:left;border-radius:2px;transition:border-color .2s;}
.b-style .sw{display:flex;height:26px;margin-bottom:8px;border-radius:1px;overflow:hidden;}
.b-style .sw i{flex:1;}
.b-style span{font-size:12.5px;color:var(--muted);}
.b-style[aria-pressed="true"]{border-color:var(--tan);}
.b-style[aria-pressed="true"] span{color:var(--cream);}
.b-accent{display:flex;align-items:center;gap:12px;font-size:13px;color:var(--muted);}
.b-accent input[type=color]{width:38px;height:30px;border:1px solid var(--line);background:none;padding:2px;cursor:pointer;}
.b-accent button{background:none;border:none;color:var(--muted-2);font-size:12px;text-decoration:underline;cursor:pointer;}

.b-panel[hidden]{display:none !important;}

/* Summary + send */
.b-summary{border:1px solid var(--line);padding:24px;display:flex;flex-direction:column;gap:14px;background:var(--panel);}
.b-summary .k{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);}
.b-summary .price{font-family:var(--serif);font-size:30px;font-weight:600;color:var(--tan);line-height:1.1;}
.b-summary ul{list-style:none;display:flex;flex-wrap:wrap;gap:6px;}
.b-summary li{font-size:12px;border:1px solid var(--line);padding:4px 10px;color:var(--muted);border-radius:2px;}
.b-summary p{font-size:13px;}

/* Preview chrome */
.b-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px;flex-wrap:wrap;}
.b-toolbar .eyebrow{font-size:12px;}
.b-device{display:flex;border:1px solid var(--line);}
.b-device[hidden]{display:none;}
.b-device button{background:none;border:none;padding:7px 14px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);cursor:pointer;}
.b-device button[aria-pressed="true"]{background:var(--tan);color:var(--ink);}
.b-stage{background:oklch(0.13 0.015 40);border:1px solid var(--line-soft);padding:22px;display:flex;justify-content:center;min-height:540px;}
.b-stage.is-mobile .m-browser{max-width:380px;}
.b-note{font-size:12px;color:var(--muted-2);margin-top:10px;text-align:center;}

/* ---------- Website mock ---------- */
.m-browser{width:100%;border-radius:8px;overflow:hidden;box-shadow:0 30px 60px oklch(0.05 0.02 40 / .55);transition:max-width .35s ease;background:#fff;}
.m-bar{display:flex;align-items:center;gap:6px;padding:10px 12px;background:#2b2724;}
.m-bar i{width:9px;height:9px;border-radius:50%;background:#5a524b;}
.m-url{margin-left:10px;flex:1;background:#3a3430;color:#cfc6bc;font-size:11px;padding:4px 10px;border-radius:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mock{
  container-type:inline-size;background:var(--m-bg);color:var(--m-fg);font-family:var(--m-body);
  max-height:640px;overflow-y:auto;position:relative;line-height:1.5;
}
.mock *{box-sizing:border-box;}
.mock h1,.mock h2,.mock h3,.mock .m-logo{font-family:var(--m-head);font-weight:var(--m-hw,600);color:var(--m-fg);line-height:1.1;}
.m-nav{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 26px;border-bottom:1px solid color-mix(in oklab,var(--m-fg) 12%,transparent);position:sticky;top:0;background:var(--m-bg);z-index:2;}
.m-logo{font-size:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:40%;}
.m-links{display:flex;gap:16px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--m-muted);flex-wrap:wrap;justify-content:flex-end;}
.m-burger{display:none;font-size:18px;color:var(--m-fg);}
.m-btn{display:inline-block;white-space:nowrap;background:var(--m-accent);color:var(--m-on-accent);padding:11px 20px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;border-radius:var(--m-radius,2px);font-weight:500;}
.m-btn.ghost{background:transparent;color:var(--m-fg);border:1px solid color-mix(in oklab,var(--m-fg) 30%,transparent);}
.m-btn.sm{padding:8px 14px;}
.m-hero{padding:64px 26px 56px;text-align:var(--m-align,center);display:flex;flex-direction:column;align-items:var(--m-items,center);gap:16px;
  background:linear-gradient(180deg,color-mix(in oklab,var(--m-accent) 10%,var(--m-bg)),var(--m-bg));}
.m-eyebrow{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--m-accent);}
.m-hero h1{font-size:clamp(28px,6cqi,52px);max-width:16ch;}
.m-hero p{color:var(--m-muted);max-width:46ch;font-size:15px;}
.m-hero .m-ctas{display:flex;gap:10px;flex-wrap:wrap;justify-content:var(--m-items,center);}
.m-sec{padding:44px 26px;border-top:1px solid color-mix(in oklab,var(--m-fg) 9%,transparent);}
.m-sec h2{font-size:26px;margin-bottom:18px;text-align:center;}
.m-sec .m-sub{text-align:center;color:var(--m-muted);font-size:13px;margin:-10px 0 20px;}
.m-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.m-card{background:var(--m-surface);padding:20px;border-radius:var(--m-radius,2px);}
.m-card h3{font-size:18px;margin-bottom:6px;}
.m-card p{font-size:12.5px;color:var(--m-muted);}
.m-gallery{display:grid;grid-template-columns:2fr 1fr 1fr;grid-auto-rows:90px;gap:8px;}
.m-gallery i{border-radius:var(--m-radius,2px);background:linear-gradient(135deg,color-mix(in oklab,var(--m-accent) 55%,var(--m-surface)),var(--m-surface));}
.m-gallery i:first-child{grid-row:span 2;}
.m-menu{max-width:520px;margin:0 auto;display:grid;gap:12px;}
.m-menu div{display:flex;align-items:baseline;gap:10px;font-size:14px;}
.m-menu div span:nth-child(2){flex:1;border-bottom:1px dotted color-mix(in oklab,var(--m-fg) 30%,transparent);}
.m-menu div span:last-child{color:var(--m-accent);}
.m-slots{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;}
.m-slots span{border:1px solid color-mix(in oklab,var(--m-fg) 22%,transparent);padding:8px 14px;font-size:12px;border-radius:var(--m-radius,2px);}
.m-slots span.on{background:var(--m-accent);color:var(--m-on-accent);border-color:var(--m-accent);}
.m-products .m-card i{display:block;height:90px;margin:-20px -20px 14px;background:linear-gradient(135deg,color-mix(in oklab,var(--m-accent) 40%,var(--m-surface)),var(--m-surface));}
.m-lines{display:grid;gap:8px;max-width:420px;margin:0 auto;}
.m-lines i{height:9px;border-radius:5px;background:color-mix(in oklab,var(--m-fg) 12%,transparent);}
.m-lines i:nth-child(2){width:80%;}.m-lines i:nth-child(3){width:60%;}
.m-reviews{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;}
.m-reviews .m-card{display:grid;gap:8px;}
.m-reviews .stars{color:var(--m-accent);letter-spacing:2px;font-size:12px;}
.m-form{max-width:420px;margin:0 auto;display:grid;gap:10px;}
.m-form i{display:block;height:36px;border:1px solid color-mix(in oklab,var(--m-fg) 18%,transparent);border-radius:var(--m-radius,2px);}
.m-form i.tall{height:70px;}
.m-news{display:flex;gap:8px;max-width:420px;margin:0 auto;}
.m-news i{flex:1;height:38px;border:1px solid color-mix(in oklab,var(--m-fg) 18%,transparent);border-radius:var(--m-radius,2px);}
.m-foot{padding:26px;text-align:center;font-size:11px;color:var(--m-muted);border-top:1px solid color-mix(in oklab,var(--m-fg) 9%,transparent);}
.m-chat{position:sticky;bottom:14px;margin:-10px 14px 14px auto;width:max-content;max-width:calc(100% - 28px);margin-left:auto;display:flex;align-items:center;gap:8px;
  background:var(--m-accent);color:var(--m-on-accent);padding:10px 14px;border-radius:22px;font-size:12px;box-shadow:0 10px 24px rgba(0,0,0,.25);}
.m-chat::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--m-on-accent);opacity:.8;}
@container (max-width:760px){
  .m-logo{max-width:70%;}
  .m-links{display:none;}
  .m-burger{display:block;}
}
@container (max-width:560px){
  .m-nav .m-btn{display:none;}
  .m-grid3,.m-reviews{grid-template-columns:1fr;}
  .m-gallery{grid-template-columns:1fr 1fr;}
  .m-gallery i:first-child{grid-column:span 2;grid-row:auto;}
  .m-hero{padding:44px 20px 40px;}
  .m-sec{padding:34px 20px;}
}

/* ---------- AI assistant mock ---------- */
.ai-wrap{width:100%;max-width:440px;display:flex;flex-direction:column;gap:12px;}
.ai-site{border-radius:8px;overflow:hidden;box-shadow:0 30px 60px oklch(0.05 0.02 40 / .55);background:var(--m-bg);font-family:var(--m-body);color:var(--m-fg);}
.ai-head{display:flex;align-items:center;gap:12px;padding:14px 16px;background:var(--m-accent);color:var(--m-on-accent);}
.ai-avatar{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--m-head);font-weight:600;font-size:16px;background:color-mix(in oklab,var(--m-on-accent) 20%,transparent);}
.ai-head strong{display:block;font-size:14px;}
.ai-head span{font-size:11px;opacity:.85;}
.ai-body{padding:16px;display:flex;flex-direction:column;gap:10px;max-height:470px;overflow-y:auto;}
.ai-msg{max-width:84%;padding:10px 13px;font-size:13px;line-height:1.45;border-radius:14px;}
.ai-msg.bot{background:var(--m-surface);border-bottom-left-radius:4px;align-self:flex-start;}
.ai-msg.user{background:var(--m-accent);color:var(--m-on-accent);border-bottom-right-radius:4px;align-self:flex-end;}
.ai-chips{display:flex;flex-wrap:wrap;gap:6px;}
.ai-chips span{font-size:11.5px;border:1px solid color-mix(in oklab,var(--m-fg) 25%,transparent);padding:5px 10px;border-radius:14px;}
.ai-handoff{font-size:11.5px;color:var(--m-muted);text-align:center;padding:4px 0;}
.ai-input{display:flex;gap:8px;padding:12px 16px;border-top:1px solid color-mix(in oklab,var(--m-fg) 10%,transparent);}
.ai-input i{flex:1;height:34px;border-radius:17px;border:1px solid color-mix(in oklab,var(--m-fg) 18%,transparent);}
.ai-input b{width:34px;height:34px;border-radius:50%;background:var(--m-accent);}

/* ---------- Automation mock ---------- */
.flow{width:100%;max-width:520px;display:flex;flex-direction:column;align-items:stretch;}
.flow-node{background:var(--panel);border:1px solid var(--line);padding:16px 18px;display:flex;gap:14px;align-items:flex-start;}
.flow-node.trigger{border-color:var(--tan);}
.flow-node .ic{flex:none;width:34px;height:34px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:16px;color:var(--tan);}
.flow-node .k{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);}
.flow-node strong{display:block;font-family:var(--serif);font-size:19px;font-weight:600;color:var(--cream);margin:2px 0;}
.flow-node p{font-size:12.5px;}
.flow-node .tools{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px;}
.flow-node .tools span{font-size:11px;border:1px solid var(--line);padding:2px 8px;color:var(--muted);}
.flow-link{width:1px;height:26px;background:var(--line);margin:0 auto;position:relative;}
.flow-link::after{content:'';position:absolute;bottom:-1px;left:-4px;border:4px solid transparent;border-top-color:var(--line);border-bottom:0;}
.flow-end{text-align:center;font-family:var(--serif);font-style:italic;font-size:18px;color:var(--muted);padding:12px;}

/* Send */
.b-send{max-width:720px;margin:0 auto;}
.b-send .row-2{margin-bottom:24px;}

/* Live estimate */
.b-summary ul.b-break{display:grid;gap:6px;flex-wrap:nowrap;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:10px 0;}
.b-summary ul.b-break li{display:flex;justify-content:space-between;gap:12px;border:none;padding:0;font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums;}
.b-summary ul.b-break li span:last-child{color:var(--cream);}
.b-summary ul.b-break[hidden]{display:none;}
.b-summary .price{font-variant-numeric:tabular-nums;}
.b-summary .price.bump{animation:priceBump .5s ease;}
@keyframes priceBump{0%{transform:translateY(0);}35%{transform:translateY(-3px);color:var(--cream);}100%{transform:none;}}
@media(prefers-reduced-motion:reduce){.b-summary .price.bump{animation:none;}}
[id="b-topics-group"][hidden]{display:none !important;}

/* AI kinds */
.ai-caption{font-size:13px;color:var(--muted);text-align:center;}
.ai-caption strong{color:var(--cream);font-weight:500;}
.ai-adds{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;}
.ai-adds span{font-size:11.5px;border:1px solid var(--line);padding:4px 10px;color:var(--muted);}
.ai-msg .m-lines{margin-top:8px;max-width:none;}
.ai-card{background:var(--m-surface);border-radius:10px;padding:14px;display:flex;flex-direction:column;gap:9px;}
.ai-card .k{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--m-muted);}
.ai-card .m-lines{max-width:none;}
.ai-row{display:grid;grid-template-columns:70px 1fr;align-items:center;gap:10px;font-size:12px;color:var(--m-muted);}
.ai-row i{height:9px;border-radius:5px;background:color-mix(in oklab,var(--m-fg) 14%,transparent);}
.ai-flag{align-self:flex-start;font-size:11px;background:var(--m-accent);color:var(--m-on-accent);padding:4px 10px;border-radius:12px;}
.ai-actions{display:flex;gap:8px;justify-content:flex-end;}
.ai-actions span{font-size:11.5px;padding:6px 12px;border-radius:14px;border:1px solid color-mix(in oklab,var(--m-fg) 25%,transparent);}
.ai-actions span.on{background:var(--m-accent);color:var(--m-on-accent);border-color:var(--m-accent);}
.ai-doc{display:flex;align-items:center;gap:12px;padding:14px;border:1px dashed color-mix(in oklab,var(--m-fg) 30%,transparent);border-radius:10px;font-size:12.5px;color:var(--m-muted);}
.ai-doc i{width:30px;height:38px;border-radius:3px;background:color-mix(in oklab,var(--m-fg) 14%,transparent);flex:none;}
.ai-arrow{text-align:center;color:var(--m-accent);font-size:16px;line-height:1;}
.ai-bullet{display:flex;align-items:center;gap:8px;}
.ai-bullet b{width:6px;height:6px;border-radius:50%;background:var(--m-accent);flex:none;}
.ai-bullet i{flex:1;height:9px;border-radius:5px;background:color-mix(in oklab,var(--m-fg) 14%,transparent);}
.ai-bullet:nth-child(odd) i{max-width:80%;}
.ai-steps{display:flex;flex-direction:column;gap:6px;}
.ai-step{border:1px solid color-mix(in oklab,var(--m-fg) 18%,transparent);border-radius:10px;padding:12px 14px;}
.ai-step .k{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--m-muted);}
.ai-step strong{display:block;font-family:var(--m-head);font-size:16px;font-weight:var(--m-hw,600);margin-top:2px;}
.ai-step.on{background:var(--m-accent);color:var(--m-on-accent);border-color:var(--m-accent);}
.ai-step.on .k{color:inherit;opacity:.8;}

/* =========================================================
   Per-style layouts. Each style gets its own structure,
   independent of the L'AIRE Digitals site design.
   ========================================================= */
.mock h1,.mock h2,.mock h3,.mock .m-logo{text-transform:var(--m-up,none);letter-spacing:var(--m-ls,0);}
.m-card{border-radius:var(--m-card,2px);}
.m-hero{display:grid;grid-template-columns:1fr;gap:28px;text-align:left;align-items:center;background:var(--m-bg);}
.m-hero-text{display:flex;flex-direction:column;gap:16px;align-items:flex-start;min-width:0;}
.m-hero .m-ctas{justify-content:flex-start;}
.m-hero-img{position:relative;min-height:220px;background:linear-gradient(140deg,color-mix(in oklab,var(--m-accent) 65%,var(--m-surface)),var(--m-surface) 75%);overflow:hidden;}
.m-hero-tag{position:absolute;left:16px;bottom:16px;display:grid;gap:6px;background:var(--m-bg);padding:12px 14px;width:min(58%,180px);border-radius:var(--m-card,4px);}
.m-hero-tag b{height:10px;width:60%;border-radius:5px;background:var(--m-accent);}
.m-hero-tag i{height:7px;border-radius:4px;background:color-mix(in oklab,var(--m-fg) 14%,transparent);}

/* Modern Minimal: split, airy, pill buttons */
.mock[data-layout="split"] .m-hero{grid-template-columns:1.05fr .95fr;padding:64px 30px;}
.mock[data-layout="split"] .m-hero h1{font-size:clamp(28px,5.4cqi,50px);}
.mock[data-layout="split"] .m-hero-img{border-radius:28px;min-height:280px;}
.mock[data-layout="split"] .m-sec h2{text-align:left;}
.mock[data-layout="split"] .m-sec .m-sub{text-align:left;}

/* Classic Elegant: centered, ruled, wide image band */
@container (min-width:761px){.mock[data-layout="center"] .m-nav{flex-direction:column;gap:10px;padding:18px 26px 12px;}.mock[data-layout="center"] .m-logo{max-width:90%;}}
.mock[data-layout="center"] .m-logo{font-size:24px;font-style:italic;}
.mock[data-layout="center"] .m-hero{text-align:center;padding:56px 30px 40px;}
.mock[data-layout="center"] .m-hero-text{align-items:center;}
.mock[data-layout="center"] .m-hero .m-ctas{justify-content:center;}
.mock[data-layout="center"] .m-eyebrow{display:flex;align-items:center;gap:12px;color:var(--m-muted);}
.mock[data-layout="center"] .m-eyebrow::before,.mock[data-layout="center"] .m-eyebrow::after{content:'';width:28px;height:1px;background:var(--m-accent);}
.mock[data-layout="center"] .m-hero h1{font-size:clamp(30px,6cqi,56px);font-style:italic;}
.mock[data-layout="center"] .m-hero-img{min-height:170px;margin:0 -30px -40px;}
.mock[data-layout="center"] .m-card{border-top:2px solid var(--m-accent);background:transparent;text-align:center;}

/* Bold Editorial: huge stacked type, color slab */
.mock[data-layout="stack"] .m-hero{padding:40px 26px 0;gap:22px;}
.mock[data-layout="stack"] .m-eyebrow{background:var(--m-fg);color:var(--m-bg);padding:4px 10px;}
.mock[data-layout="stack"] .m-hero h1{font-size:clamp(46px,13cqi,120px);line-height:.9;max-width:none;}
.mock[data-layout="stack"] .m-hero-img{min-height:180px;margin:0 -26px;background:var(--m-accent);}
.mock[data-layout="stack"] .m-hero-tag{border-radius:0;}
.mock[data-layout="stack"] .m-sec h2{font-size:42px;text-align:left;border-bottom:3px solid var(--m-fg);padding-bottom:8px;}
.mock[data-layout="stack"] .m-sec .m-sub{text-align:left;margin-top:0;}
.mock[data-layout="stack"] .m-card{background:transparent;border:2px solid var(--m-fg);}

/* Warm & Natural: soft, centered, arched image */
.mock[data-layout="arch"] .m-hero{text-align:center;padding:52px 30px 46px;background:linear-gradient(180deg,var(--m-surface),var(--m-bg));}
.mock[data-layout="arch"] .m-hero-text{align-items:center;}
.mock[data-layout="arch"] .m-hero .m-ctas{justify-content:center;}
.mock[data-layout="arch"] .m-hero h1{font-size:clamp(30px,6cqi,54px);font-weight:400;}
.mock[data-layout="arch"] .m-hero-img{width:min(260px,80%);min-height:230px;margin:0 auto;border-radius:200px 200px 18px 18px;}
.mock[data-layout="arch"] .m-hero-tag{left:50%;transform:translateX(-50%);}

/* Clean Tech: dark, gridded, product-card hero */
.mock[data-layout="grid"] .m-hero{grid-template-columns:1fr 1fr;padding:56px 28px;
  background-image:linear-gradient(color-mix(in oklab,var(--m-fg) 6%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in oklab,var(--m-fg) 6%,transparent) 1px,transparent 1px);
  background-size:28px 28px;}
.mock[data-layout="grid"] .m-eyebrow{border:1px solid color-mix(in oklab,var(--m-accent) 50%,transparent);padding:4px 10px;border-radius:999px;}
.mock[data-layout="grid"] .m-hero h1{font-size:clamp(28px,5cqi,46px);}
.mock[data-layout="grid"] .m-hero-img{min-height:230px;border-radius:12px;border:1px solid color-mix(in oklab,var(--m-fg) 14%,transparent);
  background:linear-gradient(180deg,var(--m-surface),color-mix(in oklab,var(--m-accent) 18%,var(--m-surface)));}
.mock[data-layout="grid"] .m-hero-img::before{content:'';position:absolute;left:16px;right:16px;top:16px;height:70px;border-radius:8px;
  background:linear-gradient(90deg,color-mix(in oklab,var(--m-accent) 60%,transparent) 0 35%,color-mix(in oklab,var(--m-fg) 10%,transparent) 35%);}
.mock[data-layout="grid"] .m-card{border:1px solid color-mix(in oklab,var(--m-fg) 12%,transparent);}

/* Bright & Playful: chunky borders, hard shadows */
.mock[data-layout="pop"] .m-nav{border-bottom:3px solid var(--m-fg);}
.mock[data-layout="pop"] .m-hero{grid-template-columns:1fr .9fr;padding:52px 28px;}
.mock[data-layout="pop"] .m-hero h1{font-size:clamp(30px,6cqi,56px);line-height:1;}
.mock[data-layout="pop"] .m-hero-img{border:3px solid var(--m-fg);border-radius:20px;box-shadow:8px 8px 0 var(--m-fg);transform:rotate(2deg);min-height:240px;}
.mock[data-layout="pop"] .m-btn{border:2px solid var(--m-fg);box-shadow:3px 3px 0 var(--m-fg);}
.mock[data-layout="pop"] .m-card{border:2px solid var(--m-fg);box-shadow:4px 4px 0 var(--m-fg);background:var(--m-bg);}
.mock[data-layout="pop"] .m-eyebrow{background:var(--m-surface);color:var(--m-fg);padding:4px 10px;border-radius:999px;border:2px solid var(--m-fg);}

@container (max-width:560px){
  .mock[data-layout="split"] .m-hero,.mock[data-layout="grid"] .m-hero,.mock[data-layout="pop"] .m-hero{grid-template-columns:1fr;}
  .mock[data-layout="split"] .m-hero-img,.mock[data-layout="grid"] .m-hero-img,.mock[data-layout="pop"] .m-hero-img{min-height:180px;}
  .mock[data-layout="center"] .m-hero-img{margin:0 -20px -40px;}
  .mock[data-layout="stack"] .m-hero-img{margin:0 -20px;}
  .mock[data-layout="pop"] .m-hero-img{transform:none;}
}

/* AI widget follows the chosen style's shape too */
.ai-site{border-radius:var(--m-card,8px);}
.ai-head strong{font-family:var(--m-head);font-weight:var(--m-hw,600);text-transform:var(--m-up,none);letter-spacing:var(--m-ls,0);font-size:15px;}
.ai-msg{border-radius:var(--m-card,14px);}
.ai-card,.ai-step,.ai-doc{border-radius:var(--m-card,10px);}