/* Studio Lab (/business/websites/). Page-specific rules, prefixed .lab- and .cfg-. Logical properties only. */

/* jump chips in the hero */
.lab-jump{display:flex;flex-wrap:wrap;gap:8px}
.lab-jump a{display:inline-flex;align-items:center;min-block-size:34px;padding:0 12px;border-radius:var(--r-pill);background:var(--glass);border:1px solid var(--line-sky);font-size:var(--fs-14);font-weight:var(--fw-semibold);color:var(--ink-2);text-decoration:none}
.lab-jump a:hover{background:var(--white);color:var(--primary-ink)}

/* demo cards */
.lab-card{display:flex;flex-direction:column;gap:var(--s-4);min-inline-size:0}
.lab-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s-3);flex-wrap:wrap}
.lab-card-head h3{font-size:var(--fs-24)}
.lab-why{margin:0;color:var(--ink-2);font-size:var(--fs-15)}
.lab-foot{margin:auto 0 0;padding-block-start:var(--s-3);border-block-start:1px dashed var(--border-strong);font-size:var(--fs-14);color:var(--muted)}
.lab-lbl{display:block;font-size:var(--fs-14);font-weight:var(--fw-semibold);color:var(--ink-2);margin-block-end:6px}
.lab-form{display:block}
.lab-wa{background:var(--wa);color:var(--on-wa);border-color:var(--wa);white-space:normal;text-align:center;line-height:1.25;padding-block:10px}
.lab-wa:hover{filter:brightness(.92);color:#fff}
.lab-wa .icon{inline-size:20px;block-size:20px;flex:none}
.lab-card .result{box-shadow:none;background:var(--card-2)}
.lab-card .btn.btn-block{white-space:normal;text-align:center;line-height:1.25;padding-block:10px}
.lab-seg-wrap{flex-wrap:wrap;border-radius:var(--r-md);justify-content:flex-start}
.lab-try{font-size:var(--fs-14);color:var(--muted)}

/* quote calculator lines */
.lab-lines{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.lab-lines li{display:flex;justify-content:space-between;gap:var(--s-3);font-size:var(--fs-15);color:var(--ink-2)}
.lab-line-v{font-variant-numeric:tabular-nums;font-weight:var(--fw-semibold);color:var(--ink);white-space:nowrap}

/* chips (days, times, assistant questions) */
.lab-chips{display:flex;flex-wrap:wrap;gap:8px}
.lab-chip{min-block-size:44px;padding:0 14px;border-radius:var(--r-pill);border:1px solid var(--border-strong);background:var(--card);color:var(--ink);font-size:var(--fs-14);font-weight:var(--fw-semibold);cursor:pointer}
.lab-chip:hover{background:var(--card-2)}
.lab-chip[aria-pressed="true"]{background:var(--sky);border-color:var(--primary);color:var(--primary-ink)}
.lab-chip:disabled{opacity:.55;text-decoration:line-through;cursor:not-allowed}

/* WhatsApp chat mock */
.lab-chat-mock{background:#EDE6D6;border:1px solid var(--border-strong);border-radius:var(--r-lg);padding:var(--s-3);display:flex;flex-direction:column;gap:10px}
.lab-chat-head{margin:0;display:flex;justify-content:space-between;align-items:center;gap:8px;font-weight:var(--fw-semibold);font-size:var(--fs-14);color:var(--ink-2)}
.lab-bubble{margin:0;align-self:flex-end;max-inline-size:92%;background:#DDEBDC;color:var(--ink);border-radius:16px 16px 4px 16px;padding:10px 14px;font-size:var(--fs-15);line-height:1.45;box-shadow:var(--shadow-1)}
.lab-bubble[dir="rtl"]{border-radius:16px 16px 16px 4px}

/* five-language preview */
.lab-site-name{font-size:var(--fs-24)}
.lab-site-tag{margin:0;color:var(--ink-2)}
.lab-site-list{margin:0;padding-inline-start:1.1em;display:flex;flex-direction:column;gap:4px;font-size:var(--fs-15);color:var(--ink-2)}
.lab-site-dir{margin:0;font-size:var(--fs-13);color:var(--muted)}
#l-wa,#l-call{cursor:default;white-space:normal;text-align:center;line-height:1.25;padding-block:8px}
#l-wa{color:#fff}

/* tracking timeline */
.lab-track{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0}
.lab-track li{display:flex;gap:12px;align-items:flex-start;padding-block:8px;position:relative}
.lab-track li:not(:last-child)::after{content:"";position:absolute;inset-inline-start:7px;inset-block-start:30px;inset-block-end:-8px;inline-size:2px;background:var(--border-strong)}
.lab-track-dot{flex:none;inline-size:16px;block-size:16px;border-radius:50%;border:2px solid var(--border-strong);background:var(--card);margin-block-start:3px}
.lab-track .is-done .lab-track-dot{background:var(--ok);border-color:var(--ok)}
.lab-track .is-next .lab-track-dot{border-color:var(--primary);background:var(--sky)}
.lab-track .is-done:not(:last-child)::after{background:var(--ok)}
.lab-track-body{display:flex;flex-direction:column;gap:2px;font-size:var(--fs-15)}
.lab-track-date{font-size:var(--fs-14);color:var(--muted)}
.lab-track .is-todo strong{color:var(--muted);font-weight:var(--fw-medium)}

/* assistant */
.lab-chat{display:flex;flex-direction:column;gap:10px;max-block-size:300px;overflow-y:auto;padding:var(--s-3);background:var(--card-2);border:1px solid var(--border);border-radius:var(--r-lg)}
.lab-msg{max-inline-size:90%;border-radius:16px;padding:10px 14px;font-size:var(--fs-15);line-height:1.45;display:flex;flex-direction:column;gap:6px}
.lab-msg p{margin:0}
.lab-msg.is-user{align-self:flex-end;background:var(--primary);color:var(--on-primary);border-end-end-radius:4px}
.lab-msg.is-bot{align-self:flex-start;background:var(--card);border:1px solid var(--border);border-end-start-radius:4px}
.lab-src{font-size:var(--fs-13);color:var(--muted)}
.lab-src-link{font-size:var(--fs-14);font-weight:var(--fw-semibold);color:var(--wa)}
.lab-ask{display:flex;gap:10px;flex-wrap:wrap;margin-block-start:var(--s-3)}
.lab-ask .input{flex:1 1 200px}

/* installable-app phone */
.lab-phone{inline-size:min(100%,270px);margin-inline:auto;border:8px solid #2B2A33;border-radius:34px;background:var(--canvas);overflow:hidden;box-shadow:var(--shadow-3)}
.lab-phone-bar{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 14px;background:#F1ECE0;font-size:var(--fs-13);color:var(--ink-2)}
.lab-phone-url{direction:ltr;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lab-phone-screen{min-block-size:340px;padding:16px;display:flex;flex-direction:column}
.lab-pv{display:none;flex-direction:column;gap:10px;font-size:var(--fs-15);color:var(--ink-2)}
.lab-pv p{margin:0}
.lab-pv-h{font:var(--fw-semibold) var(--fs-20)/1.2 var(--font-serif);color:var(--ink)}
.lab-pv-tip{display:flex;gap:8px;align-items:center;margin-block-start:8px!important;padding:10px 12px;border-radius:var(--r-md);background:var(--sky);color:var(--primary-ink);font-size:var(--fs-14);font-weight:var(--fw-semibold)}
.lab-pv-tip .icon{inline-size:18px;block-size:18px;flex:none}
.lab-pv-cap{font-size:var(--fs-14);color:var(--muted)}
.lab-pv-badge{align-self:flex-start;padding:3px 10px;border-radius:var(--r-pill);background:var(--warn-bg);color:var(--warn-ink);font-size:var(--fs-13);font-weight:var(--fw-semibold)}
.lab-icons{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding-block:8px}
.lab-icons i,.lab-icons b{display:grid;place-items:center;aspect-ratio:1;border-radius:14px;background:var(--border)}
.lab-icons b{background:var(--navy);color:var(--gold);font:var(--fw-semibold) var(--fs-20)/1 var(--font-serif);box-shadow:0 0 0 3px var(--gold-soft)}
#p-phone[data-view="browser"] .lab-pv-browser,#p-phone[data-view="home"] .lab-pv-home,#p-phone[data-view="offline"] .lab-pv-off{display:flex}
.lab-steps{margin:0;padding-inline-start:1.3em;display:flex;flex-direction:column;gap:6px;font-size:var(--fs-15);color:var(--ink-2)}

/* dashboard */
.lab-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-3)}
.lab-kpi{display:flex;flex-direction:column;gap:2px;padding:var(--s-3) var(--s-4);background:var(--card-2);border:1px solid var(--border);border-radius:var(--r-md)}
.lab-kpi-n{font:var(--fw-semibold) var(--fs-28)/1.1 var(--font-serif);font-variant-numeric:tabular-nums}
.lab-kpi-l{font-size:var(--fs-14);color:var(--muted)}
.lab-chart-h{font:var(--fw-semibold) var(--fs-14)/1.3 var(--font-sans);color:var(--ink-2);margin:var(--s-2) 0 0}
.lab-chart{min-inline-size:0}
.lab-two{display:grid;gap:var(--s-5);grid-template-columns:minmax(0,1fr)}
@media (min-width:700px) and (max-width:859px),(min-width:1100px){.lab-two{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}}

/* configurator */
.cfg{display:flex;flex-direction:column;gap:var(--s-5)}
.cfg-side{position:sticky;inset-block-start:var(--top-h);z-index:5}
.cfg-card{background:var(--card);border:1px solid var(--border-strong);border-radius:var(--r-lg);box-shadow:var(--shadow-3);overflow:hidden}
.cfg-brief{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s-4);padding:var(--s-4) var(--s-5);background:var(--brief-bg)}
.cfg-brief-main,.cfg-brief-sub{display:flex;flex-direction:column;gap:2px;min-inline-size:0}
.cfg-brief-sub{text-align:end}
.cfg-k{font-size:var(--fs-13);font-weight:var(--fw-semibold);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--muted)}
:root[dir="rtl"] .cfg-k{text-transform:none;letter-spacing:0}
.cfg-total{font:var(--fw-semibold) var(--fs-40)/1 var(--font-serif);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.cfg-tier{font-size:var(--fs-14);color:var(--ink-2)}
.cfg-monthly{font:var(--fw-semibold) var(--fs-28)/1 var(--font-serif);font-variant-numeric:tabular-nums}
.cfg-more{display:none;padding:var(--s-4) var(--s-5) var(--s-5);flex-direction:column;gap:var(--s-3)}
.cfg-more p{margin:0;font-size:var(--fs-15);color:var(--ink-2)}
.cfg-founding{padding:10px 12px;border-radius:var(--r-md);background:var(--gold-soft);border:1px solid var(--gold-line);color:var(--ink)!important;font-size:var(--fs-14)!important}
.cfg-refund{margin-block-start:var(--s-2)}
@media (max-width:959px){.cfg-total{font-size:var(--fs-32)}.cfg-brief{padding:10px 14px}.cfg-tier{display:none}}
@media (min-width:960px){
  .cfg{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:var(--s-8);align-items:start}
  .cfg-main{grid-column:1;grid-row:1}
  .cfg-side{grid-column:2;grid-row:1;inset-block-start:calc(var(--top-h) + 16px)}
  .cfg-more{display:flex}
}
.cfg-group{margin:0 0 var(--s-6);padding:0}
.cfg-group legend{font:var(--fw-semibold) var(--fs-20)/1.2 var(--font-serif);color:var(--ink);padding:0;margin-block-end:var(--s-3)}
.cfg-presets{display:grid;gap:var(--s-3);grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr))}
.cfg-preset{display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:start;padding:var(--s-4);border:1px solid var(--border-strong);border-radius:var(--r-md);background:var(--card);cursor:pointer}
.cfg-preset:hover{background:var(--card-2)}
.cfg-preset[aria-pressed="true"]{border-color:var(--primary);background:var(--sky);box-shadow:0 0 0 3px var(--primary-soft)}
.cfg-preset-n{font:var(--fw-semibold) var(--fs-20)/1.1 var(--font-serif)}
.cfg-preset-d{font-size:var(--fs-14);color:var(--ink-2)}
.cfg-preset-p{font-size:var(--fs-15);font-weight:var(--fw-semibold);color:var(--primary-ink);font-variant-numeric:tabular-nums}
.cfg-group .hint{margin-block-start:var(--s-3)}
.cfg-care{display:flex;flex-direction:column;gap:8px}
.cfg-send{margin-block-start:var(--s-6);padding:var(--s-6);background:var(--card-2);border:1px solid var(--border);border-radius:var(--r-lg);display:flex;flex-direction:column;gap:var(--s-4)}
.cfg-send:focus{outline:none}
.cfg-res{min-inline-size:0}
.cfg-form .btn-lg{white-space:normal;text-align:center;line-height:1.25;padding-block:12px}
.cfg-done:focus{outline:none;box-shadow:var(--shadow-focus)}
.cfg-src{margin:0}

/* closing band */
.lab-end{display:flex;gap:var(--s-6);align-items:center;justify-content:space-between;flex-wrap:wrap}
.lab-end>div:first-child{flex:1 1 320px}
.lab-end .actions{flex:0 1 auto;min-inline-size:0}
@media (max-width:520px){.lab-end .actions .btn{inline-size:100%}}

/* ?preset= note */
.cfg-preset-note{margin:0 0 var(--s-3);padding:var(--s-2) var(--s-3);background:var(--sky);border:1px solid var(--info-line);border-radius:var(--r-sm);font-size:15px;color:var(--ink)}
/* closed details: the demos and small print are folded (same look as the FAQ rows) */
.fold{background:var(--card);border:1px solid var(--border);border-radius:var(--r-md);box-shadow:var(--shadow-1);overflow:hidden;margin-block-start:var(--s-4)}
.fold>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);padding:14px 18px;font-weight:var(--fw-semibold);font-size:var(--fs-16);color:var(--ink);min-block-size:52px}
.fold>summary::-webkit-details-marker{display:none}
.fold>summary::after{content:"";inline-size:10px;block-size:10px;border-inline-end:2px solid var(--muted);border-block-end:2px solid var(--muted);transform:rotate(45deg);flex:none;margin-inline-end:4px;transition:transform var(--dur-fast) var(--ease)}
.fold[open]>summary::after{transform:rotate(225deg)}
.fold>summary:hover{background:var(--card-2)}
.fold>summary:focus-visible{box-shadow:inset var(--shadow-focus)}
.fold>.fold-in{padding:0 18px 18px;color:var(--ink-2)}
.fold>.fold-in>p{max-inline-size:var(--read-max)}.cfg-care .ae-row{margin:0}
/* the sample panels are drawn by script (about 800-850px tall at every width): hold that room until they are, so the estimator below does not jump (CLS, task Q6) */
#sw-panels:empty{min-block-size:800px}

.cfg-why{margin:var(--s-2) 0 0;font-size:var(--fs-14);line-height:1.45;color:var(--ink-2)}
.cfg-step{font-weight:var(--fw-semibold,600)}
.cfg .ae-ln{min-inline-size:0;overflow-wrap:anywhere}
.cfg .ae-lv{text-align:end}
.cfg .ae-lv{flex:none}
.cfg-card>.cfg-why{margin:0;padding:var(--s-2) var(--s-5) var(--s-3)}
@media (max-width:959px){.cfg-card>.cfg-why{padding:6px 14px 8px}}

/* founding price line (from founding.css) */
/* Founding offer (founding.js). Static text, no animation: nothing here moves, so reduced-motion needs no override.
   Logical properties only (RTL safe). No text under 13px. */
[data-founding][hidden]{display:none}
.fo{margin:var(--s-5) 0 0;padding:var(--s-4) var(--s-5);background:var(--card-2);border:1px solid var(--border);border-inline-start:4px solid var(--gold);border-radius:var(--r-md);display:grid;gap:var(--s-3)}
.fo-top{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-3);align-items:center}
.fo-top .badge{flex:none}
.fo-ends{font-size:var(--fs-15);font-weight:var(--fw-semibold);color:var(--ink);font-variant-numeric:tabular-nums}
.fo-line{margin:0;font-size:var(--fs-16);line-height:1.55;color:var(--ink-2);max-inline-size:var(--read-max,68ch)}
.fo-count{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-4);align-items:center}
.fo-count-t{font-size:var(--fs-15);color:var(--ink);font-variant-numeric:tabular-nums}
.fo-meter{display:inline-flex;gap:4px;align-items:center}
.fo-meter i{display:block;inline-size:14px;block-size:14px;border-radius:50%;border:2px solid var(--border-strong);background:var(--white)}
.fo-meter i.on{background:var(--gold);border-color:var(--gold)}
.fo-note{margin:0;font-size:var(--fs-14);color:var(--muted)}
.fo-compact{margin:var(--s-3) 0 0;font-size:var(--fs-15);color:var(--ink-2)}
.fo-compact strong{color:var(--ink)}