/* Custom Creators — site styles. Design: the Montréal métro map. Your site is the transfer station; each service is a line.
   Line colours carry meaning everywhere: orange = Bâtir (your site), green = Économiser, blue = Automatiser. */
:root{
  --ink:#14213D; --ink-2:#1C2B4A; --ink-3:#253558; --ink-line:#33456B;
  --paper:#F7F8FA; --paper-2:#ECEFF4; --card:#FFFFFF; --line:#DDE2EA; --line-2:#C9D0DB;
  --text:#1A2233; --muted:#4A5568; --on-ink:#F7F8FA; --on-ink-muted:#CBD3E1; --on-ink-faint:#A3AEC2;
  --accent:#F26B1D; --accent-text:#B4470B; --accent-text-hover:#8F3708;
  --orange:#F26B1D; --green:#00843D; --green-text:#006B31; --blue:#0072BC; --blue-text:#005A96; --yellow:#FFD100;
  --radius:14px; --display:'Archivo',system-ui,sans-serif; --body:'Atkinson Hyperlegible',system-ui,sans-serif; --mono:'Atkinson Hyperlegible',system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;background:var(--paper);color:var(--text);font:18px/1.6 var(--body);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--accent-text);text-underline-offset:3px} a:hover{color:var(--accent-text-hover)}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:4px}
.dark :focus-visible{outline-color:var(--yellow)}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.skip{position:absolute;left:-9999px;top:8px;background:var(--yellow);color:var(--ink);padding:10px 14px;border-radius:8px;z-index:10}
.skip:focus{left:8px}
.eyebrow{margin:0;font:700 16px/1.4 var(--body);letter-spacing:0;text-transform:none;color:var(--accent-text)} .process .eyebrow{color:var(--accent-text-hover)}
.dark .eyebrow{color:var(--accent)}
h1,h2,h3{font-family:var(--display);font-variation-settings:"wdth" 112;letter-spacing:-.015em;margin:0}
h2{font-weight:800;font-size:clamp(30px,4vw,46px);line-height:1.08;margin-top:10px;max-width:22ch}
h3{font-weight:700}
.lead{color:var(--muted);margin:16px 0 0;max-width:62ch}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 22px;border-radius:10px;text-decoration:none;border:0;font:inherit;font-weight:700;cursor:pointer;transition:background-color .15s,border-color .15s}
.btn-accent{background:var(--accent);color:var(--ink)} .btn-accent:hover{background:#FF8440;color:var(--ink)}
.btn-ghost{border:2px solid var(--ink-line);color:var(--on-ink)} .btn-ghost:hover{border-color:var(--on-ink);color:var(--on-ink)}
.dark{background:var(--ink);color:var(--on-ink)}

/* Header: one calm bar; the language switch and phone stay visible */
.site-header{background:var(--ink);color:var(--on-ink);position:sticky;top:0;z-index:5;box-shadow:inset 0 -4px 0 var(--orange)}
.site-header .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 22px;padding-top:14px;padding-bottom:18px}
.brand{display:flex;align-items:center;gap:10px;color:var(--on-ink);text-decoration:none;font:500 21px var(--display);font-variation-settings:"wdth" 112;letter-spacing:-.01em}
.brand b{font-weight:800} .brand:hover{color:var(--on-ink)}
.nav{display:flex;flex-wrap:wrap;align-items:center;gap:6px 20px;font-size:16px}
.nav a{color:var(--on-ink-muted);text-decoration:none;padding:6px 0} .nav a:hover{color:var(--on-ink);box-shadow:inset 0 -2px 0 var(--orange)}
.lang{font:15px var(--body);color:var(--on-ink-faint)} .lang b{color:var(--on-ink)} .lang a{text-decoration:underline;text-underline-offset:3px}
.nav a.tel{color:var(--on-ink);font-weight:700;white-space:nowrap}
.site-footer a[href^="tel:"]{white-space:nowrap}
.nav .btn{min-height:44px;padding:10px 16px;font-size:16px;color:var(--ink)} .nav .btn:hover{box-shadow:none}

/* Hero */
.hero{position:relative;overflow:hidden}
.hero .wrap{display:flex;flex-wrap:wrap;gap:56px;align-items:center;padding-top:80px;padding-bottom:88px}
.hero-copy{flex:999 1 520px;min-width:0}
.hero .kicker{margin:0 0 22px;font:700 15px var(--body);color:var(--yellow)}
.hero h1{font-weight:900;font-variation-settings:"wdth" 112;font-size:clamp(38px,5.2vw,66px);line-height:1.02;letter-spacing:-.02em;max-width:16ch}
.hero p.sub{margin:28px 0 0;max-width:56ch;font-size:20px;color:var(--on-ink-muted)}
.hero .ctas{margin-top:36px;display:flex;flex-wrap:wrap;gap:14px}
.hero-side{flex:1 1 380px;min-width:0;display:flex;flex-direction:column;gap:14px}
.hero-photo{border-radius:var(--radius);overflow:hidden;aspect-ratio:16/10;background:var(--ink-3);position:relative}
.hero-photo img{width:100%;height:100%;object-fit:cover}
.price-panel{background:var(--ink-2);border:1px solid var(--ink-line);border-radius:var(--radius);padding:8px}
.price-panel .head{display:flex;justify-content:space-between;gap:12px;padding:12px 14px 10px;font:700 14px var(--body);color:var(--on-ink-faint)}
.price-panel a{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:13px 14px;border-radius:10px;color:var(--on-ink);text-decoration:none}
.price-panel a:hover{background:var(--ink-3);color:var(--on-ink)}
.price-panel a b{font:800 20px var(--display);font-variation-settings:"wdth" 108}
.price-panel s.was{color:var(--on-ink-faint);font-weight:400}

/* Sections */
section{scroll-margin-top:80px}
.section{padding-block:104px 40px}
.grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.service{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column}
.service .ph{aspect-ratio:4/3;background:var(--paper-2);overflow:hidden}
.service .ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.service:hover .ph img{transform:scale(1.04)}
.service .body{padding:22px 24px 26px}
.service h3{font-size:23px;margin:0 0 8px}
.service p{margin:0;color:var(--muted)}
.service.feature{background:var(--ink);border-color:var(--ink);color:var(--on-ink)} .service.feature p{color:var(--on-ink-muted)}

.ai{padding-block:64px}
.ai .panel{border-radius:var(--radius);overflow:hidden;display:flex;flex-wrap:wrap}
.ai .copy{flex:999 1 440px;min-width:0;padding:clamp(32px,5vw,64px)}
.ai .copy p{color:var(--on-ink-muted);max-width:540px;margin:22px 0 0}
.ai .copy h2{font-size:clamp(30px,3.6vw,44px)}
.ai .copy .btn{margin-top:32px}
.ai .media{flex:1 1 380px;min-width:0;min-height:320px;position:relative}
.ai .media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.9}
.ai .checks{list-style:none;margin:28px 0 0;padding:0;font-size:16px;max-width:560px}
.ai .checks li{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid var(--ink-line)} .ai .checks li:last-child{border-bottom:0}
.ai .checks span:first-child{flex:0 0 12px;height:12px;margin-top:7px;border-radius:50%;background:var(--orange);font-size:0;color:transparent;overflow:hidden}

.pricing{padding-block:64px}
.pricing h3.group{margin:52px 0 18px;font-size:26px}
.plans{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.plan{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:24px;display:flex;flex-direction:column;gap:10px;position:relative}
.plan .name{margin:0;font-weight:600}
.plan .price{margin:0;font:800 34px/1.1 var(--display);font-variation-settings:"wdth" 108;letter-spacing:-.01em}
.plan .price small{font:500 17px var(--body);color:var(--muted);letter-spacing:0} .plan.dark .price small{color:var(--on-ink-faint)}
.plan .desc{margin:0;color:var(--muted);font-size:15px}
.plan ul{margin:0;padding-left:18px;color:var(--muted);font-size:15px;display:flex;flex-direction:column;gap:6px}
.plan.hl{border:2px solid var(--orange);box-shadow:0 0 0 4px rgba(242,107,29,.14)}
.plan .badge{position:absolute;top:-14px;left:20px;background:var(--yellow);color:var(--ink);font:700 13px var(--body);padding:4px 10px;border-radius:6px}

.plan .pick{margin-top:auto;padding-top:8px;font-weight:600;font-size:15px;text-decoration:none}
.plan.dark .pick{color:var(--accent)}
.note{color:var(--muted);margin:16px 0 0}

.onsite{padding-block:40px}
.onsite .panel{display:flex;flex-wrap:wrap;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.onsite .media{flex:1 1 360px;min-height:300px;position:relative}
.onsite .media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.onsite .copy{flex:999 1 440px;padding:clamp(28px,4vw,56px)}
.onsite .copy h2{font-size:clamp(28px,3.2vw,40px)}
.onsite .copy ul{margin:22px 0 0;padding-left:20px;color:var(--muted);display:flex;flex-direction:column;gap:8px}

.process{background:var(--paper-2);margin-top:40px}
.process .wrap{padding-top:88px;padding-bottom:88px}
.steps{list-style:none;margin:44px 0 0;padding:0;display:grid;gap:28px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.steps li{position:relative;padding-top:58px}
.steps li::before{content:"";position:absolute;left:0;right:-28px;top:17px;height:8px;border-radius:4px;background:var(--orange)}
.steps li:last-child::before{right:0}
.steps{overflow:hidden}
.steps .n{position:absolute;top:0;left:0;margin:0;width:42px;height:42px;border-radius:50%;background:var(--card);border:7px solid var(--orange);display:grid;place-items:center;font:800 16px var(--display);color:var(--ink)}
.steps .t{margin:6px 0;font:800 21px var(--display);font-variation-settings:"wdth" 108}
.steps .d{margin:0;color:var(--muted)}

.local{position:relative;color:var(--on-ink)}
.local img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.local::after{content:"";position:absolute;inset:0;background:rgba(20,33,61,.82)}
.local .wrap{position:relative;z-index:1;padding-top:96px;padding-bottom:96px}
.local h2{max-width:720px}
.local p{color:var(--on-ink-muted);max-width:620px;margin:18px 0 0}

.faq{max-width:860px;margin:0 auto;padding:96px 24px 40px}
.faq h2{margin-bottom:32px}
.faq details{border-top:1px solid var(--line-2);padding:18px 0}
.faq details:last-of-type{border-bottom:1px solid var(--line-2)}
.faq summary{cursor:pointer;font-weight:600;font-size:19px;min-height:44px;display:flex;align-items:center}
.faq details p{margin:6px 0 0;color:var(--muted)}

.contact{padding-block:64px 104px}
.contact .panel{border-radius:var(--radius);padding:clamp(32px,5vw,64px);display:flex;flex-wrap:wrap;gap:48px}
.contact .info{flex:1 1 320px;min-width:0}
.contact .info p{color:var(--on-ink-muted)}
.contact .info .lines{margin-top:28px;font:17px/2 var(--body);color:var(--on-ink-faint)}
.contact .info .lines a{color:var(--on-ink)}
form.request{flex:999 1 440px;min-width:0;display:grid;gap:16px;grid-template-columns:repeat(2,minmax(0,1fr))}
form.request label{display:flex;flex-direction:column;gap:6px;font-size:16px;color:var(--on-ink-muted)}
form.request .full{grid-column:1/-1}
form.request input,form.request select,form.request textarea{min-height:48px;border-radius:10px;border:1px solid var(--ink-line);background:var(--ink-2);color:var(--on-ink);padding:10px 14px;font:inherit;font-size:16px;width:100%}
form.request textarea{resize:vertical;min-height:120px}
form.request input:focus,form.request select:focus,form.request textarea:focus{border-color:var(--accent);outline:none}
form.request .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
form.request .consent{flex-direction:row;align-items:flex-start;gap:10px;font-size:14px}
form.request .consent input{min-height:auto;width:20px;height:20px;margin-top:2px;accent-color:var(--accent)}
form.request button{min-height:52px;font-size:17px}
.form-status{grid-column:1/-1;margin:0;font-size:15px;min-height:1.5em}
.form-status.ok{color:#7EE2B8} .form-status.err{color:#FFB199}

.site-footer{border-top:1px solid var(--line-2)}
.site-footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px;padding-top:28px;padding-bottom:28px;font-size:14px;color:var(--muted)}
.credits{font-size:12px;color:var(--muted);padding-bottom:28px}
.credits a{color:var(--muted)}

@media (max-width:640px){
  .site-header{position:static}
  form.request{grid-template-columns:1fr}
  .hero .wrap{padding-top:56px;padding-bottom:64px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.service .ph img{transition:none}}

.mt48{margin-top:48px}.mt28{margin-top:28px}.mt0{margin-top:0}

/* Black Friday promo (tools/promo.py) */
.bf{background:var(--ink);color:#fff;text-align:center;padding:10px 16px;font-weight:600;font-size:15px;line-height:1.4;border-bottom:3px solid var(--accent,var(--accent))}
.bf b{color:var(--accent,var(--accent));letter-spacing:.04em}
.bf small{display:block;font-weight:400;opacity:.8;font-size:12.5px}
s.was{text-decoration:line-through;text-decoration-thickness:2px;opacity:.8;font-weight:400;margin-right:.3em}
.price-panel b{white-space:nowrap}

/* Tiers */
.tier{align-self:flex-start;font:600 11px var(--mono);letter-spacing:.08em;padding:3px 10px;border-radius:6px}
.tier.t-b{background:#F3D9BC;color:#6B3A0B}
.tier.t-s{background:#E3E8EE;color:#2F3B4A}
.tier.t-g{background:#F6DF8A;color:#5A4300}
.plan:has(.t-g){border-color:#C9A227}
.plan.dark{background:var(--ink)}
.plan.dark li{color:var(--on-ink-muted)}

/* Funnel pages */
.pains{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.pains li{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px;font-weight:500}
.seeall{font:600 15px var(--body);letter-spacing:0;margin-left:10px;white-space:nowrap}
.pricing#offer{padding-top:48px}

/* Legal pages */
.legal{max-width:760px;padding-top:56px;padding-bottom:72px}
.legal h1{font-size:clamp(32px,4vw,44px);margin-bottom:8px}
.legal h2{font-size:22px;margin:32px 0 8px}
.legal p{color:var(--muted)}

/* Site assistant */
.ccchat-open{position:fixed;right:16px;bottom:16px;z-index:50;min-height:48px;padding:0 20px;border:0;border-radius:999px;background:var(--ink);color:var(--on-ink);font:600 15px var(--body);box-shadow:0 8px 24px rgba(0,0,0,.25);cursor:pointer}
.ccchat{position:fixed;right:16px;bottom:16px;z-index:51;width:min(360px,calc(100vw - 32px));max-height:min(540px,80vh);display:flex;flex-direction:column;background:#fff;color:#16171A;border:1px solid #E2DDD3;border-radius:16px;box-shadow:0 16px 48px rgba(0,0,0,.28);overflow:hidden}
.ccchat[hidden],.ccchat-open[hidden]{display:none}
.ccchat-head{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;background:var(--ink);color:var(--on-ink)}
.ccchat-x{min-width:44px;min-height:44px;border:0;background:none;color:inherit;font-size:24px;cursor:pointer}
.ccchat-log{flex:1;overflow:auto;padding:12px 14px;display:flex;flex-direction:column;gap:8px}
.ccchat-log p{margin:0;padding:9px 12px;border-radius:12px;max-width:88%;font-size:15px;line-height:1.45}
.ccchat-log .bot{background:#F3F0EA;align-self:flex-start}.ccchat-log .me{background:#FFE3D6;align-self:flex-end}
.ccchat-form{display:flex;gap:8px;padding:10px 14px;border-top:1px solid #E2DDD3}
.ccchat-form input{flex:1;min-height:44px;border:1px solid #C9C3B7;border-radius:10px;padding:0 12px;font:16px var(--body)}
.ccchat-form button{min-height:44px;padding:0 16px;border:0;border-radius:10px;background:var(--accent);color:var(--ink);font:600 15px var(--body);cursor:pointer}
.ccchat-link{display:block;text-align:center;padding:8px 14px 12px;font-size:14px}

/* Customer review page (/review/) */
.rv{padding-top:40px;padding-bottom:72px;max-width:760px}
.rv-proj{font:500 14px var(--mono);color:var(--muted)}
.rv-prog{position:sticky;top:0;background:var(--bg,#fff);padding:10px 0;margin:0;font-weight:600;border-bottom:1px solid var(--line);z-index:2}
.rv-item{border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;margin:16px 0;background:var(--card);min-width:0}
.rv-item legend{font:700 18px var(--display);padding:0 6px}
.rv-item[data-state=keep]{border-left:4px solid #0B6B3A}
.rv-item[data-state=change]{border-left:4px solid var(--accent)}
.rv-item[data-state=remove]{border-left:4px solid #6B6B6B}
.rv-detail{margin:4px 0 12px;color:var(--muted)}
.rv-seg{display:flex;flex-wrap:wrap;gap:8px}
.rv-opt{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 14px;border:1px solid var(--line);border-radius:999px;cursor:pointer;background:#fff}
.rv-opt:has(input:checked){background:var(--ink);color:var(--on-ink);border-color:var(--ink)}
.rv-opt:focus-within{outline:3px solid var(--accent);outline-offset:2px}
.rv-opt input{accent-color:var(--accent);width:18px;height:18px}
.rv-note{display:block;margin-top:12px}
.rv-note[hidden]{display:none}
.rv-note textarea{display:block;width:100%;margin-top:6px;font:inherit;padding:10px;border:1px solid var(--line);border-radius:8px}
.rv-ai{margin-top:32px;padding:20px;border:2px solid var(--ink);border-radius:var(--radius)}
.rv-ai h2{margin-top:0}
.rv-ack{display:flex;gap:10px;align-items:flex-start;margin:14px 0;font-weight:600}
.rv-ack input{width:22px;height:22px;accent-color:var(--accent);margin-top:2px}
.rv-name{display:block;margin:12px 0}
.rv-name input{display:block;width:100%;min-height:44px;margin-top:6px;font:inherit;padding:8px 10px;border:1px solid var(--line);border-radius:8px}
.rv-ai .btn[disabled]{opacity:.55;cursor:not-allowed}
.rv-hint,.rv-msg{font-size:14px;color:var(--muted);margin:8px 0 0}
.rv-box{padding:24px;border:1px solid var(--line);border-radius:var(--radius);background:var(--card)}

/* Wizard (/start/) */
.wz{padding-top:32px;padding-bottom:72px;max-width:720px}
.wz-step{font:600 14px var(--mono);color:var(--muted);margin:0 0 12px}
.wz-box{border:1px solid var(--line);border-radius:var(--radius);padding:20px;background:var(--card)}
.wz-box h2{margin:0 0 16px;line-height:1.2;font-size:24px}
.wz-type input,.wz-opt input{flex:none}
.wz-f{display:block;margin:14px 0}.wz-f span{display:block;font-weight:600;margin-bottom:4px}
.wz-f input,.wz-f textarea{width:100%;min-height:44px;font:inherit;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:#fff}
.wz-f small{display:block;color:var(--muted);margin-top:4px}
.wz-types{display:grid;gap:12px}
.wz-type{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;cursor:pointer;min-height:44px}
.wz-type:has(input:checked){border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.wz-type:focus-within,.wz-opt:focus-within{outline:3px solid var(--accent);outline-offset:2px}
.wz-type input,.wz-opt input{width:20px;height:20px;accent-color:var(--accent);margin-top:3px}
.wz-tt{display:grid;gap:2px}.wz-tt small{color:var(--muted)}
.wz-pal{display:grid;gap:8px}
.wz-opt{display:flex;gap:10px;align-items:center;min-height:44px;padding:8px 12px;border:1px solid var(--line);border-radius:10px;background:#fff;cursor:pointer}
.wz-opt:has(input:checked){border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.wz-lab{font-weight:600;margin:18px 0 6px}
.wz-item{border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin:12px 0;background:#fff;min-width:0}
.wz-item legend{font-weight:700;padding:0 6px}
.wz-hint{font-size:14px;color:var(--muted);background:#fff;border-left:4px solid var(--accent);padding:8px 12px;margin:10px 0}
.wz-ack{display:flex;gap:10px;align-items:flex-start;margin:16px 0;font-weight:600}.wz-ack input{width:22px;height:22px;accent-color:var(--accent);margin-top:2px}
.wz-msg{color:#9B1C00;font-weight:600;min-height:1.5em;margin:12px 0 0}
.wz-nav{display:flex;gap:12px;margin-top:12px}

/* ---- deals_build.py: deals, marketplace, three doors ---- */
.dl{padding:48px 24px 24px}.dl h1{font-size:clamp(36px,5vw,60px);font-weight:800;line-height:1.02}.dl .lead{margin-bottom:24px}
.dl-bar{display:grid;gap:12px;margin:8px 0 8px}.dl-row{display:flex;flex-wrap:wrap;gap:10px}.dl-row select,.dl-row input[type=search],.dl-row input[type=text]{min-height:48px;padding:10px 14px;border:1px solid var(--line-2);border-radius:12px;font:inherit;background:var(--card);flex:1 1 200px}
.chip[aria-pressed=true]{background:var(--ink);color:var(--on-ink);border-color:var(--ink)}
.dl-count{color:var(--muted);font-size:15px;margin:4px 0 12px}
.dl-list{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.dl-card,.mk-card{display:flex;flex-direction:column;gap:6px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px;color:var(--text);text-decoration:none}
.mk-card:hover{border-color:var(--ink)}
.dl-card h3,.mk-card h3{font-size:22px;line-height:1.15}.dl-meta{margin:0;font:500 12px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.dl-merchant{margin:0;font-weight:600}.dl-price{margin:4px 0 0;font-size:20px}.dl-price s{color:var(--muted);font-size:16px}.dl-price b{font-family:var(--display);font-size:28px}
.dl-save{margin:0;align-self:flex-start;background:var(--accent);color:var(--ink);font-weight:700;padding:4px 10px;border-radius:999px;font-size:15px}
.dl-ends{margin:0;color:var(--muted);font-size:15px}.dl-details{margin:4px 0 0}.dl-cond summary{cursor:pointer;color:var(--accent-text);min-height:44px;display:flex;align-items:center}
.dl-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:auto;padding-top:8px}
.dl-report{background:none;border:0;color:var(--muted);text-decoration:underline;font:inherit;font-size:15px;min-height:44px;cursor:pointer}
.dl-aff{margin:0;font-size:13px;color:var(--muted)}.dl-empty{color:var(--muted);padding:24px 0}.dl-rform{display:grid;gap:8px}.dl-rform textarea,.mk-form textarea,.mk-form input,.mk-form select,.mk-contact textarea,.mk-contact input,.mk-report textarea{width:100%;padding:10px 12px;border:1px solid var(--line-2);border-radius:12px;font:inherit;background:var(--card)}
.mk-price{margin:0;font-family:var(--display);font-size:26px;font-weight:700}.mk-note{color:var(--muted);margin:0 0 8px}.mk-free{display:flex;gap:8px;align-items:center;min-height:48px}
.mk-form{display:grid;gap:12px;max-width:640px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px;margin:8px 0 16px}
.mk-detail{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:24px;display:grid;gap:8px;max-width:760px}.mk-desc{white-space:pre-line}
.mk-tips{background:var(--paper-2);border-radius:var(--radius);padding:16px 20px;max-width:760px;margin:16px 0}.mk-tips h3{font-size:18px}.mk-tips ul{margin:8px 0 0;padding-left:20px}
.mk-contact{max-width:760px;display:grid;gap:10px;margin:16px 0}.mk-contact form{display:grid;gap:12px}.mk-report{max-width:760px;margin:8px 0 32px}.mk-report summary{cursor:pointer;min-height:44px;display:flex;align-items:center;color:var(--muted)}
.mk-back{display:inline-flex;min-height:44px;align-items:center;margin-bottom:8px}
.doors{padding-block:80px 40px}.doors h2{max-width:20ch}
/* The métro map: your site is the transfer station, each service a line with its stops (links). */
.map{margin-top:36px;display:grid;gap:0;grid-template-columns:minmax(0,260px) minmax(0,1fr);background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.hub-st{grid-row:1/4;display:flex;flex-direction:column;justify-content:center;gap:14px;padding:32px 28px;background:var(--ink);color:var(--on-ink)}
.hub-st .ring{width:76px;height:76px;border-radius:50%;background:var(--card);box-shadow:0 0 0 10px var(--orange),0 0 0 20px var(--green),0 0 0 30px var(--blue);margin:30px 0 30px 30px}
.hub-st h3{font-size:28px;color:var(--on-ink);margin-top:14px}.hub-st p{margin:0;color:var(--on-ink-muted)}
.hub-st .btn{align-self:flex-start;margin-top:6px}
.line{--c:var(--orange);--ct:var(--accent-text);display:grid;grid-template-columns:minmax(0,200px) minmax(0,1fr);gap:8px 28px;align-items:center;padding:28px 28px 28px 32px;border-top:1px solid var(--line)}
.line:first-of-type{border-top:0}
.line.l-save{--c:var(--green);--ct:var(--green-text)}.line.l-auto{--c:var(--blue);--ct:var(--blue-text)}
.line .name{margin:0;display:flex;align-items:center;gap:12px;font:800 24px/1.1 var(--display);font-variation-settings:"wdth" 112;color:var(--text)}
.line .name::before{content:"";flex:0 0 auto;width:34px;height:34px;border-radius:9px;background:var(--c)}
.line .what{grid-column:1;margin:0;color:var(--muted);font-size:16px}
.stops{grid-column:2;grid-row:1/3;list-style:none;margin:0;padding:22px 0 0;display:flex;position:relative}
.stops::before{content:"";position:absolute;left:0;right:0;top:9px;height:8px;border-radius:4px;background:var(--c)}
.stops li{flex:1 1 0;position:relative;min-width:0;padding-right:12px}
.stops li::before{content:"";position:absolute;left:0;top:-22px;width:26px;height:26px;border-radius:50%;background:var(--card);border:6px solid var(--c);box-sizing:border-box}
.stops a,.stops span{display:block;padding-top:16px;font-weight:700;color:var(--text);text-decoration:none;line-height:1.3}
.stops a:hover{color:var(--ct);text-decoration:underline}
.stops small{display:block;font-weight:400;color:var(--muted);font-size:15px;margin-top:2px}
.map-foot{margin:18px 0 0;color:var(--muted)}
@media (max-width:860px){
  .map{grid-template-columns:minmax(0,1fr)}
  .hub-st{grid-row:auto;flex-direction:row;flex-wrap:wrap;align-items:center}
  .hub-st .ring{width:44px;height:44px;margin:22px;box-shadow:0 0 0 7px var(--orange),0 0 0 14px var(--green),0 0 0 21px var(--blue)}
  .hub-st .txt{flex:1 1 200px}
  .line{grid-template-columns:minmax(0,1fr);padding:24px 20px}
  .stops{grid-column:1;grid-row:auto;flex-direction:column;padding:4px 0 0 40px}
  .stops::before{left:9px;right:auto;top:6px;bottom:6px;width:8px;height:auto}
  .stops li{padding:0 0 18px}.stops li:last-child{padding-bottom:0}
  .stops li::before{left:-40px;top:2px}
  .stops a,.stops span{padding-top:0}
}
.jump{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0 0;padding:0;list-style:none}
.jump a{display:inline-flex;align-items:center;min-height:44px;padding:8px 16px;border:1px solid var(--line-2);border-radius:999px;background:var(--card);color:var(--text);text-decoration:none;font-weight:500;font-size:15px}
.jump a:hover{border-color:var(--ink)}.jump a:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.pricing h3.group{scroll-margin-top:96px}
/* ---- end deals_build.py ---- */

/* ---- pages_build.py: examples, demo, how it works, guarantees, status, help, resources, industries, check, call ---- */
.hero.pb-hero .wrap,.hero.pb-hero .wrap.solo{padding-top:48px;padding-bottom:20px;max-width:var(--wrap,1200px);min-height:0}.pb-hero .hero-copy{max-width:760px}
.pb-sec{padding-top:28px;padding-bottom:48px}.pb-note{color:var(--muted);font-size:15px;margin:0 0 20px}.pb-small{color:var(--muted);font-size:14px;margin:6px 0 0}
.pb-exgrid{list-style:none;margin:0;padding:0;display:grid;gap:28px;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
.pb-ex{display:grid;gap:14px;align-content:start}.pb-ex-shot{display:block;border-radius:28px;overflow:hidden;border:8px solid #15171E;box-shadow:var(--shadow-2);max-width:320px;background:#15171E}
.pb-ex-shot img{width:100%;height:auto;display:block;aspect-ratio:390/720;object-fit:cover;object-position:top}
.pb-kind{margin:0;color:var(--muted);font-weight:600;font-size:15px}.pb-ex h3{margin:2px 0 10px;font-size:22px}.pb-ctas{display:flex;flex-wrap:wrap;gap:10px;margin:0}
.pb-steps{list-style:none;margin:0;padding:0;display:grid;gap:40px}.pb-step{display:grid;gap:22px;align-items:center}
.pb-step img{width:100%;height:auto;border-radius:var(--r-lg);box-shadow:var(--shadow-2);border:1px solid var(--line)}
.pb-step .n{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--pen,#1E2BB0);color:#fff;font-weight:800;margin:0 0 10px}.pb-step h3{font-size:26px;margin:0 0 8px}.pb-step p{margin:0;color:var(--muted);font-size:18px}
@media (min-width:900px){.pb-step{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:48px}.pb-step:nth-child(even) img{order:2}}
.pb-cards{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr))}
.pb-cards li{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:22px}.pb-cards h3{font-size:20px;margin:0 0 8px}.pb-cards p{margin:0;color:var(--muted)}
.pb-links a{display:block;color:inherit;text-decoration:none;height:100%}.pb-links li:hover{border-color:var(--pen,#1E2BB0)}.pb-more{display:inline-block;margin-top:12px;color:var(--pen,#1E2BB0);font-weight:700}
.pb-status{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:10px;max-width:720px}
.pb-status li{display:flex;gap:12px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 18px}.pb-status b{flex:1}.pb-val{color:var(--muted);font-weight:600}
.pb-dot{width:14px;height:14px;border-radius:50%;background:#CBD5E1;flex:none}.pb-status li.ok .pb-dot{background:#16A34A}.pb-status li.warn .pb-dot{background:#D97706}.pb-status li.bad .pb-dot{background:#DC2626}
.pb-help{display:grid;gap:28px}@media (min-width:900px){.pb-help{grid-template-columns:260px minmax(0,1fr)}.pb-toc{position:sticky;top:96px;align-self:start}}
.pb-toc ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}.pb-toc a{display:block;padding:10px 12px;border-radius:10px;text-decoration:none;color:var(--text);font-weight:600}.pb-toc a:hover{background:var(--paper-2)}
.pb-guide{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;margin:0 0 16px;scroll-margin-top:96px}.pb-guide h2{font-size:24px;margin:0 0 12px}.pb-guide ol{margin:0;padding-left:22px;display:grid;gap:8px}.pb-guide li{color:var(--text)}
.pb-article{max-width:720px}.pb-article h2{font-size:26px;margin:32px 0 10px}.pb-article p{font-size:18px;line-height:1.65}
.pb-ind{display:grid;gap:32px;align-items:start}@media (min-width:900px){.pb-ind{grid-template-columns:minmax(0,1fr) 320px}}
.pb-checks{list-style:none;margin:12px 0 24px;padding:0;display:grid;gap:10px}.pb-checks li{position:relative;padding-left:34px;font-size:18px}.pb-checks li::before{content:"✓";position:absolute;left:0;top:0;width:24px;height:24px;border-radius:50%;background:#DCFCE7;color:#15803D;display:grid;place-items:center;font-weight:800;font-size:14px}
.pb-checkform,.pb-callform{max-width:620px}.pb-checkform{display:grid;gap:12px}
#pb-report{max-width:720px;margin-top:24px}.pb-score{display:flex;align-items:center;gap:18px;margin:0 0 16px}.pb-score b{font:800 52px/1 var(--display)}.pb-score span{color:var(--muted)}
.pb-items{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:10px}.pb-items li{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 16px 14px 48px;position:relative}
.pb-items li::before{content:"✓";position:absolute;left:14px;top:14px;width:24px;height:24px;border-radius:50%;background:#DCFCE7;color:#15803D;display:grid;place-items:center;font-weight:800;font-size:14px}
.pb-items li.no::before{content:"!";background:#FEE2E2;color:#B91C1C}.pb-items li b{display:block}.pb-items li p{margin:4px 0 0;color:var(--muted)}
.pb-strip{padding-top:20px;padding-bottom:4px}.pb-strip ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}.pb-strip a{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:999px;border:1.5px solid var(--line-2);background:#fff;color:var(--text);font-weight:700;text-decoration:none}.pb-strip a:hover{border-color:var(--pen,#1E2BB0);color:var(--pen,#1E2BB0)}
.hero2 .wrap.pb-two,.pb-two{display:block;padding-top:28px;padding-bottom:40px}.pb-two ul{list-style:none;margin:0;padding:0;display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}.pb-two li{display:grid;gap:10px;align-content:start;padding:24px;border:1px solid var(--line);border-radius:var(--r-lg,20px);background:#fff}.pb-two h2{margin:0;font-size:24px;line-height:1.2}.pb-two li>p{margin:0;color:var(--muted);line-height:1.5}.pb-two .pb-two-a{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}.pb-two-more{margin:14px 0 0;color:var(--muted);font-size:15px;line-height:1.6}.pb-two-more a{font-weight:600}
.pb-quotes{list-style:none;margin:0;padding:0;display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}.pb-quotes li{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:24px}.pb-quotes blockquote{margin:0;font-size:18px}.pb-quotes p.who{margin:12px 0 0;color:var(--muted);font-weight:600}
.pb-helper .ph-form{display:grid;gap:12px;max-width:760px}.ph-q{border:1px solid var(--line);border-radius:14px;padding:12px 16px;margin:0;display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;background:#fff}
.ph-q legend{float:left;width:100%;font-weight:700;margin-bottom:6px;padding:0}.ph-q label{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:600;cursor:pointer}.ph-q input{width:20px;height:20px;accent-color:var(--pen,#1E2BB0)}
#ph-out{max-width:760px;margin-top:18px}.ph-res{background:var(--night,#121852);color:#fff;border-radius:var(--r-lg);padding:24px}.ph-res h3{color:#fff;font-size:28px;margin:0 0 8px}.ph-res p{color:#D3D7F2;margin:0 0 12px}.ph-res ul{margin:0 0 16px;padding-left:20px}.ph-res .btn{margin:4px 8px 0 0}.ph-res .btn-ghost{color:#fff;border-color:rgba(255,255,255,.7);background:transparent}.ph-res .btn-ghost:hover{background:rgba(255,255,255,.1)}
.pb-foot{width:100%;font-size:15px;margin-bottom:6px}.pb-foot p{margin:0 0 8px;line-height:1.9}.pb-foot span{color:var(--muted)}
.site-footer .wrap{flex-wrap:wrap}
/* ---- end pages_build.py ---- */

/* ---- accounts_build.py: customer account ---- */
.cl{padding-block:56px 24px;max-width:860px}
.cl h1{font-size:clamp(34px,5vw,56px);line-height:1.02;margin:0 0 12px}
.cl h1.cl-title{font-size:clamp(26px,3.4vw,36px);margin:8px 0 10px}
.cl .lead{margin:0 0 28px}
.cl-form{display:grid;gap:18px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(20px,3vw,32px)}
.cl-field{display:grid;gap:6px}.cl-field label{font-weight:600}
.cl-field input,.cl-field textarea,.cl-field select{width:100%;min-height:48px;padding:12px 14px;border:1px solid var(--line-2);border-radius:12px;font:inherit;background:var(--paper);color:var(--text)}
.cl-field input:focus-visible,.cl-field textarea:focus-visible,.cl-field select:focus-visible{outline:3px solid var(--accent);outline-offset:1px}
.cl-field [aria-invalid=true]{border-color:#B42318}
.cl-err{margin:0;color:#B42318;font-size:15px;min-height:0}.cl-err:empty{display:none}
.cl-group{border:1px solid var(--line);border-radius:var(--radius);padding:16px;margin:0;display:grid;gap:14px;min-width:0}
.cl-group legend{font:700 20px var(--display);padding:0 6px}
.cl-ai{display:grid;gap:8px;justify-items:start}.cl-ai-pan{display:grid;gap:8px;width:100%}.cl-ai-out{display:grid;gap:8px;width:100%}.cl-ai-opt{border:1px solid var(--line);border-radius:var(--radius);padding:10px 12px;display:grid;gap:4px;justify-items:start}.cl-ai-opt p{margin:0;white-space:pre-line}.cl-aiq summary span{display:block;font-size:14px;color:var(--muted,#555);font-weight:400}
.cl-items{list-style:none;margin:0;padding:0;display:grid;gap:12px;counter-reset:it}
.cl-item{display:grid;gap:10px;padding:14px;background:var(--paper);border-radius:12px}
.cl-rm{justify-self:start}
.cl-status{margin:0;color:var(--muted)}.cl-status:empty{display:none}
.cl-alert{background:var(--paper-2);border-left:4px solid var(--accent);border-radius:0 12px 12px 0;padding:14px 16px;margin:0 0 20px}
.cl-alert p{margin:0 0 10px}
.cl-who{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;color:var(--muted);margin:0 0 20px}
.cl-sites{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.cl-site{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:24px;display:grid;gap:8px}
.cl-site h2{font-size:26px;margin:0}
.cl-badge{margin:0;font:500 12px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--accent-text)}
.cl-meta{margin:0;color:var(--muted)}
.cl-acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.cl-back{display:inline-flex;min-height:44px;align-items:center;margin-bottom:8px}
.cl-empty{color:var(--muted)}
.cl .hp{position:absolute;left:-9999px;width:1px;height:1px}
.cl .btn-ghost{color:var(--text);border:1px solid var(--line-2);background:var(--card)}.cl .btn-ghost:hover{border-color:var(--ink)}
/* page editor: basics, blocks (add, edit, move, delete with undo), live preview */
.cl:has(.cl-ed){max-width:1240px}
.cl-picker[hidden],.cl-toast[hidden],.cl-dirty[hidden]{display:none!important}
.cl-page,.cl-blocks,.cl-basics{grid-template-columns:minmax(0,1fr)}.cl-block{min-width:0}
.cl-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cl-tabs{display:flex;gap:6px;background:var(--paper-2);border-radius:999px;padding:4px;margin:0 0 16px;max-width:420px}
.cl-tabs button{flex:1;min-height:44px;border:0;border-radius:999px;background:transparent;font:inherit;font-weight:700;color:var(--text);cursor:pointer}
.cl-tabs button.on{background:var(--card);box-shadow:0 1px 4px rgba(20,33,61,.18)}
.cl-ed{display:grid;gap:24px;align-items:start;grid-template-columns:minmax(0,1fr)}.cl-ed>*,.cl-form>*,.cl-page>*{min-width:0}

.cl-ed .cl-pv{display:none}.cl-ed.show-pv .cl-pv{display:block}.cl-ed.show-pv .cl-side{display:none}
.cl-pv{position:sticky;top:96px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.cl-pvbar{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;border-bottom:1px solid var(--line);background:var(--paper)}
.cl-pvst{color:var(--muted);font-size:15px}
.cl-pv iframe{display:block;width:100%;height:min(72vh,760px);border:0;background:#fff}
.cl-pv.kf iframe{outline:3px solid var(--cc-focus,#3D5AFE);outline-offset:-3px}
.cl-pvnote{margin:0;padding:10px 14px;color:var(--muted);font-size:15px;border-top:1px solid var(--line)}
@media (min-width:1024px){.cl-tabs{display:none}.cl-ed{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.cl-ed .cl-pv,.cl-ed.show-pv .cl-side{display:block}.cl-ed.show-pv .cl-pv{display:block}}
.cl-basics>summary{cursor:pointer;list-style:none;display:grid;gap:2px;min-height:48px}.cl-basics>summary::-webkit-details-marker{display:none}
.cl-basics>summary b{font:700 22px var(--display)}.cl-basics>summary span{color:var(--muted)}
.cl-basics>summary b::after{content:" ▾";color:var(--muted)}.cl-basics[open]>summary b::after{content:" ▴"}
.cl-pal{border:0;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:10px}.cl-pal legend{font-weight:600;margin-bottom:6px;padding:0}
.cl-pal .sw{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:6px 14px 6px 8px;border:2px solid var(--line-2);border-radius:999px;cursor:pointer;background:var(--card)}
.cl-pal .sw input{position:absolute;opacity:0;width:1px;height:1px}
.cl-pal .sw:has(input:checked){border-color:var(--ink);box-shadow:0 0 0 2px var(--ink) inset}
.cl-pal .sw:has(input:focus-visible){outline:3px solid var(--accent);outline-offset:2px}
.cl-pal .chip{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#111214 50%,#FF5B1F 50%)}
.cl-pal .sw-forest .chip{background:linear-gradient(135deg,#16301f 50%,#2f7d4f 50%)}.cl-pal .sw-sunset .chip{background:linear-gradient(135deg,#3b1d12 50%,#c2410c 50%)}
.cl-page h2,.cl-page h3{font:700 22px var(--display);margin:0;max-width:none}.cl-help{margin:0;color:var(--muted)}
.cl-blocks{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.cl-block{background:var(--paper);border:2px solid var(--line);border-radius:14px;transition:border-color .15s,box-shadow .15s}
.cl-block.is-open{border-color:var(--ink);background:var(--card)}.cl-block.is-drag{opacity:.5}.cl-block.is-over{box-shadow:0 -4px 0 var(--accent)}
.cl-bhead{display:flex;align-items:center;gap:4px;padding:6px}
.cl-grip{flex:none;display:none;width:28px;height:44px;place-items:center;color:var(--muted);cursor:grab}
@media (hover:hover) and (pointer:fine){.cl-grip{display:grid}}
.cl-bt{flex:1;min-width:0;display:flex;align-items:center;gap:12px;min-height:56px;padding:6px 8px;border:0;background:transparent;font:inherit;text-align:left;color:var(--text);cursor:pointer;border-radius:10px}
.cl-bt:hover{background:var(--paper-2)}
.cl-btxt{flex:1;min-width:0;display:grid}.cl-btxt b{font-weight:700}
.cl-bsum{color:var(--muted);font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cl-bedit{flex:none;color:var(--accent-text);font-weight:700;font-size:15px}
.cl-i{flex:none;display:inline-grid;place-items:center;width:40px;height:40px;border-radius:10px;background:var(--paper-2);color:var(--ink)}
.cl-i svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.cl-grip .cl-i{background:none;width:20px}.cl-grip svg{fill:currentColor;stroke:none}
.cl-acts2{flex:none;display:flex;gap:2px}
.cl-ib{display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:10px;background:transparent;color:var(--ink);cursor:pointer}
.cl-ib .cl-i{background:none;width:24px;height:24px}.cl-ib svg{width:20px;height:20px}
.cl-ib:hover{background:var(--paper-2)}.cl-ib:disabled{opacity:.3;cursor:default;background:transparent}
.cl-del{color:#B42318}.cl-del:hover{background:#FDECEA}
.cl-bbody{display:grid;gap:14px;padding:4px 14px 16px}
.cl-done{justify-self:start}
.cl-thumb{display:block;max-width:100%;max-height:240px;border-radius:10px;object-fit:cover}
.cl-file{position:absolute;opacity:0;width:1px;height:1px}
.cl-photo-btn{justify-self:start;color:var(--text);border:1px solid var(--line-2);background:var(--card)}
.cl-block .cl-err{padding:0 14px 12px}
.cl-add{justify-self:start;min-height:52px;font-size:18px}
.cl-picker{background:var(--paper);border:2px dashed var(--line-2);border-radius:14px;padding:14px;display:grid;gap:12px}
.cl-pick-h{margin:0;font-weight:700}
.cl-pick-grid{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr))}
.cl-pick{display:flex;align-items:center;gap:12px;text-align:left;min-height:64px;padding:10px 12px;border:1px solid var(--line-2);border-radius:12px;background:var(--card);font:inherit;color:var(--text);cursor:pointer}
.cl-pick:hover{border-color:var(--ink)}.cl-pick b{display:block}.cl-pick small{display:block;color:var(--muted);font-size:15px;line-height:1.3}
.cl-pick-h2{margin:6px 0 0;font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}.cl-pick-g,.cl-ready-g{display:grid;gap:8px}.cl-pick-g[hidden],.cl-ready-g[hidden],.cl-pick[hidden],.cl-help[hidden]{display:none!important}
.cl-pick-q{width:100%;min-height:48px;padding:10px 14px;border:1px solid var(--line-2);border-radius:12px;font:inherit;background:var(--card);color:var(--text)}
.cl-pick.is-off{opacity:.62;border-style:dashed;cursor:help}.cl-pick.is-off:hover{border-color:var(--line-2)}
.cl-send{position:sticky;bottom:0;z-index:2;margin:0 calc(-1 * clamp(20px,3vw,32px)) calc(-1 * clamp(20px,3vw,32px));padding:14px clamp(20px,3vw,32px);background:var(--card);border-top:1px solid var(--line);border-radius:0 0 var(--radius) var(--radius);display:grid;gap:6px}
.cl-sendrow{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center}
.cl-dirty{color:var(--accent-text);font-weight:700;font-size:15px}.cl-dirty::before{content:"● "}
.cl-toast-wrap{position:fixed;left:0;right:0;bottom:16px;display:flex;justify-content:center;pointer-events:none;z-index:20;padding:0 16px}
.cl-toast{pointer-events:auto;display:flex;align-items:center;gap:14px;background:var(--ink);color:var(--on-ink);border-radius:999px;padding:6px 6px 6px 18px;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.cl-toast .btn-ghost{min-height:44px;color:var(--ink);background:var(--yellow);border:0}
@media (prefers-reduced-motion:reduce){.cl-block{transition:none}}
@media (max-width:520px){.cl-form{padding:16px}.cl-group{padding:12px}.cl-send{margin:0 -16px -16px;padding:12px 16px}.cl-bt>.cl-i,.cl-grip,.cl-bedit{display:none}.cl-bhead{padding:4px 4px 4px 6px;gap:2px}.cl-bt{padding:6px}.cl-ib{width:42px}}
/* sign-up steps, create a site, draft checklist */
.cl-steps{list-style:none;counter-reset:st;margin:0 0 24px;padding:0;display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))}
.cl-steps li{counter-increment:st;display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px;font-weight:700}
.cl-steps li::before{content:counter(st);flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--ink);color:var(--on-ink);font:700 16px var(--display)}
.cl-steps li:nth-child(2)::before{background:var(--blue)}.cl-steps li:nth-child(3)::before{background:var(--green)}
.cl-new{min-height:52px;font-size:18px}
.cl-kinds{border:0;margin:0;padding:0;display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr))}
.cl-kinds legend{font-weight:700;margin-bottom:8px;padding:0}
.cl-kind{position:relative;display:flex;gap:12px;align-items:flex-start;min-height:72px;padding:14px;border:2px solid var(--line-2);border-radius:14px;background:var(--card);cursor:pointer}
.cl-kind input{width:22px;height:22px;margin-top:2px;flex:none;accent-color:var(--accent)}
.cl-kind b{display:block}.cl-kind small{display:block;color:var(--muted);font-size:15px;line-height:1.35}
.cl-kind:has(input:checked){border-color:var(--ink);box-shadow:0 0 0 2px var(--ink) inset;background:var(--paper)}
.cl-kinds .cl-err{grid-column:1/-1}
.cl-consent{display:flex;gap:12px;align-items:flex-start;font-size:16px}.cl-consent input{width:22px;height:22px;flex:none;margin-top:2px;accent-color:var(--accent)}
.cl-todo:empty{display:none}.cl-todo{background:#FFF7E0;border-left:4px solid var(--yellow);border-radius:0 12px 12px 0;padding:12px 16px}.cl-todo ul{margin:6px 0 0;padding-left:20px}
.cl-dirty.is-saved{color:var(--green-text)}.cl-dirty.is-saved::before{content:"✓ "}
/* progress of a site on its way online */
.cl-track{list-style:none;margin:6px 0 4px;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;counter-reset:tk}
.cl-track li{counter-increment:tk;position:relative;padding-top:30px;font-size:14px;line-height:1.25;color:var(--muted);text-align:center}
.cl-track li::before{content:counter(tk);position:absolute;top:0;left:50%;transform:translateX(-50%);width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--paper-2);color:var(--muted);font:700 14px/26px var(--display);z-index:1}
.cl-track li::after{content:"";position:absolute;top:12px;left:-50%;width:100%;height:3px;background:var(--line)}
.cl-track li:first-child::after{display:none}
.cl-track li.done{color:var(--text)}.cl-track li.done::before{content:"✓";background:var(--green);color:#fff}.cl-track li.done::after,.cl-track li.now::after{background:var(--green)}
.cl-track li.now{color:var(--text);font-weight:700}.cl-track li.now::before{background:var(--accent);color:var(--ink)}
.cl-next{margin:4px 0 0}.cl-note{margin:0;background:#FFF7E0;border-left:4px solid var(--yellow);padding:10px 14px;border-radius:0 10px 10px 0}
.cl-st-live{border-top-color:var(--green)!important}.cl-st-you{border-top-color:var(--accent)!important}.cl-st-rejected{border-top-color:#B42318!important}
@media (max-width:420px){.cl-track{gap:2px}.cl-track li{font-size:11.5px;padding-left:1px;padding-right:1px;hyphens:auto;overflow-wrap:anywhere}}
/* ---- end accounts_build.py ---- */
/* ---- story.py: pages, story band, compact mobile header ---- */
/* Fonts served from our own domain (no request to Google: visitors' addresses stay with us) */
@font-face{font-family:'Schibsted Grotesk';font-style:normal;font-weight:400 900;font-display:swap;src:url(/assets/fonts/schibsted-grotesk.woff2) format('woff2')}
@font-face{font-family:'Schibsted Grotesk';font-style:italic;font-weight:400 900;font-display:swap;src:url(/assets/fonts/schibsted-grotesk-italic.woff2) format('woff2')}
@font-face{font-family:'Reenie Beanie';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/reenie-beanie.woff2) format('woff2')}
.lead{max-width:60ch;color:var(--muted)}
.builder{display:grid;gap:28px;margin-top:28px}
.group{border:0;padding:0;margin:0;min-width:0}
.group legend{font:700 22px var(--display);padding:0;margin-bottom:12px}
.mods{list-style:none;margin:0;padding:0;display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.mod label{display:grid;grid-template-columns:24px 1fr;gap:4px 12px;align-items:start;min-height:44px;padding:14px 16px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);cursor:pointer;height:100%}
.mod label:has(input:checked){border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.mod input{width:22px;height:22px;margin:1px 0 0;accent-color:var(--accent)}
.mod .mt{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline}
.mod .md{grid-column:2;color:var(--muted);font-size:15px}
.tag{font:500 12px var(--mono);color:var(--muted)}
.tag.ready{color:#0B6B3A}
.mod label:focus-within{outline:3px solid var(--accent);outline-offset:2px}
.pickbar{position:sticky;bottom:0;display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;margin-top:24px;padding:14px 16px;background:var(--ink);color:var(--on-ink);border-radius:var(--radius)}
.hero .wrap.solo{display:block;max-width:820px}
.story{padding-top:0}
.story .cols{display:grid;gap:0;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin-top:32px;border-top:1px solid var(--line)}
.story .cols>div{padding:24px 24px 8px 0}
.story .cols h3{margin:0 0 8px}
.story .cols p{margin:0;color:var(--muted)}
.story .maker{margin-top:28px;padding:20px 22px;border-left:4px solid var(--accent);background:var(--card);border-radius:0 var(--radius) var(--radius) 0}
.story .maker p{margin:0 0 10px}
.band{padding-block:56px 8px}
.band .inner{display:flex;flex-wrap:wrap;gap:16px 32px;align-items:center;justify-content:space-between;background:var(--ink);color:var(--on-ink);border-radius:var(--radius);padding:28px}
.band h2{margin:0 0 6px;color:var(--on-ink)} .band p{margin:0;color:var(--on-ink-muted);max-width:56ch}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin:24px 0}
.chip{min-height:44px;padding:10px 16px;border:1px solid var(--line);border-radius:999px;background:var(--card);font:500 15px var(--body,inherit);color:inherit;cursor:pointer;text-align:left}
.chip[aria-pressed=true]{background:var(--ink);color:var(--on-ink);border-color:var(--ink)}
.chip:focus-visible,.btn:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.case{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:24px;margin-top:16px}
.js-cases .case[hidden]{display:none}
.case h3{margin:0 0 4px} .case .ex{color:var(--muted);margin:0 0 12px}
.ticks{margin:12px 0;padding-left:20px;display:grid;gap:6px}
.note{font-size:14px;color:var(--muted);border-top:1px solid var(--line);padding-top:12px}
.rules{display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.rules h3{margin:0 0 6px} .rules p{margin:0;color:var(--muted)}
.cmp{width:100%;border-collapse:collapse;font-size:15px;min-width:560px}
.cmp th,.cmp td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top}
.cmp thead th{font:500 13px var(--mono);color:var(--muted)}
.cc-tablewrap{overflow-x:auto}
@media (max-width:640px){
  .site-header .wrap{flex-wrap:nowrap;gap:10px;padding-top:10px;padding-bottom:10px}
  .nav{flex-wrap:nowrap;gap:10px;margin-left:auto}
  .nav a:not(.btn){display:none}
  .nav .lang a{display:inline;padding:10px 4px}
  .nav .btn{padding:8px 12px;font-size:14px;white-space:nowrap}
  .bf{font-size:13px;padding:8px 14px} .bf small{display:none}
  .brand{font-size:18px}
  .nav .lang{white-space:nowrap}
}
/* ---- Theme 2026-10 "Daylight studio": light and warm, ink type, the brand orange for action,
   one bright hue per service (blue sites, lilac logos, mint apps, sun support). Original illustrations only (assets/art). ---- */
:root{
  --ink:#11142B;--ink-2:#1C2140;--ink-3:#2A3058;--ink-line:#3A4170;
  --paper:#F6F7FB;--paper-2:#ECEEF6;--card:#FFFFFF;--line:#E3E6F0;--line-2:#CDD2E2;
  --text:#11142B;--muted:#4B5070;--on-ink:#F6F7FB;--on-ink-muted:#C9CDE3;--on-ink-faint:#A6ABC8;
  --accent:#FF5B1F;--accent-text:#C2410C;--accent-text-hover:#9A3412;--orange:#FF5B1F;
  --blue:#3D5AFE;--blue-text:#2A44D8;--lilac:#8B5CF6;--lilac-text:#6D3FE0;--mint:#10B9A0;--mint-text:#0B7F6E;--sun:#FFC53D;--sun-text:#8A5A00;
  --green:#10B9A0;--green-text:#0B7F6E;--violet:#8B5CF6;--yellow:#FFC53D;
  --b50:#EEF1FF;--l50:#F4EFFF;--m50:#E8FAF6;--s50:#FFF6DE;--o50:#FFEFE8;
  --display:'Bricolage Grotesque',system-ui,sans-serif;--radius:16px;--r-lg:22px;
  --shadow-1:0 1px 2px rgba(17,20,43,.05),0 6px 20px rgba(17,20,43,.06);--shadow-2:0 2px 6px rgba(17,20,43,.08),0 18px 44px rgba(17,20,43,.12);--t:.18s ease}
html,body{background:var(--paper)}
body{color:var(--text)}
::selection{background:var(--sun);color:var(--ink)}
h1,h2,h3{font-family:var(--display);font-variation-settings:normal;letter-spacing:-.025em}
h2{font-weight:800}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.dark :focus-visible{outline-color:var(--sun)}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font:700 15px var(--body);color:var(--accent-text)}
.eyebrow::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--accent)}
.dark .eyebrow{color:var(--sun)}.dark .eyebrow::before{background:var(--sun)}

/* Header: white, calm, one orange button */
.site-header{background:rgba(255,255,255,.92);backdrop-filter:saturate(1.4) blur(10px);color:var(--text);box-shadow:0 1px 0 var(--line)}
.site-header .wrap{padding-top:12px;padding-bottom:12px}
.brand,.brand:hover{color:var(--ink)}
.nav a{color:var(--muted);font-weight:600}.nav a:hover{color:var(--ink);box-shadow:inset 0 -2px 0 var(--accent)}
.nav a.tel{color:var(--ink)}
.lang{color:var(--muted)}.lang b{color:var(--ink)}
.nav a.acct{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 14px;border:1px solid var(--line-2);border-radius:999px;color:var(--ink);font-weight:700}
.nav a.acct:hover{border-color:var(--ink);box-shadow:none;background:var(--paper)}
.nav .btn{color:#fff;background:var(--ink)}.nav .btn:hover{background:var(--accent);color:#fff}
.menu-btn{display:none}
@media (max-width:980px){
  .site-header .wrap{flex-wrap:wrap!important;position:relative}
  .menu-btn{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:8px 14px;margin-left:auto;border:1px solid var(--line-2);border-radius:12px;background:#fff;color:var(--ink);font:700 16px var(--body);cursor:pointer}
  .menu-btn .bars,.menu-btn .bars::before,.menu-btn .bars::after{display:block;width:18px;height:2px;border-radius:2px;background:currentColor;position:relative;transition:transform var(--t)}
  .menu-btn .bars::before,.menu-btn .bars::after{content:"";position:absolute;left:0}
  .menu-btn .bars::before{top:-6px}.menu-btn .bars::after{top:6px}
  .nav-open .menu-btn .bars{background:transparent}.nav-open .menu-btn .bars::before{transform:translateY(6px) rotate(45deg)}.nav-open .menu-btn .bars::after{transform:translateY(-6px) rotate(-45deg)}
  .site-header .nav{display:none;margin:0}
  .site-header.nav-open .nav{display:flex;flex-direction:column;align-items:stretch;flex-basis:100%;flex-wrap:nowrap;gap:0;padding:8px 0 12px}
  .site-header.nav-open .nav a:not(.btn){display:flex;align-items:center;min-height:52px;padding:10px 4px;border-bottom:1px solid var(--line);font-size:18px;color:var(--ink)}
  .site-header.nav-open .nav a.acct{margin:12px 0 0;border:1px solid var(--line-2);border-radius:12px;padding:10px 14px}
  .site-header.nav-open .nav .lang{display:block;padding:14px 4px;font-size:17px}
  .site-header.nav-open .nav .lang a{display:inline;border:0;min-height:0;padding:0 4px}
  .site-header.nav-open .nav .btn{margin-top:12px;min-height:52px;font-size:17px;padding:12px 16px}
}
.hdr-acct{margin-left:auto;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 14px;border:1px solid var(--line-2);border-radius:999px;color:var(--ink);text-decoration:none;font-weight:700;font-size:16px}
.hdr-acct:hover{color:var(--ink);background:var(--paper)}
.site-header .wrap:has(.hdr-acct){flex-wrap:nowrap}

/* Promo strip: kept, made friendly */
.bf{background:var(--sun);color:var(--ink);border:0;font-weight:600}
.bf b{color:var(--ink)}.bf small{opacity:.85}

/* Buttons */
.btn{border-radius:999px;transition:background-color var(--t),color var(--t),transform var(--t),box-shadow var(--t)}
.btn-accent,form.request button,.btn-accent:visited{background:var(--accent);color:var(--ink)}.btn-accent:hover,form.request button:hover{background:#FF7A45;color:var(--ink);transform:translateY(-1px);box-shadow:0 8px 22px rgba(255,91,31,.35)}
.btn-line{border:2px solid var(--ink);color:var(--ink);background:transparent}.btn-line:hover{background:var(--ink);color:#fff}
.btn-ghost{border:2px solid var(--line-2);color:var(--ink)}.btn-ghost:hover{border-color:var(--ink);color:var(--ink)}
.dark .btn-ghost{border-color:var(--ink-line);color:var(--on-ink)}
@media (prefers-reduced-motion:reduce){.btn-accent:hover{transform:none}}

/* Home: hero */
.hero2{position:relative;overflow:hidden;background:radial-gradient(60% 80% at 85% 20%,#E6EAFF 0,transparent 60%),radial-gradient(50% 70% at 10% 90%,#FFE7DC 0,transparent 60%),var(--paper)}
.hero2 .wrap{display:grid;gap:32px;align-items:center;grid-template-columns:minmax(0,1fr);padding-top:48px;padding-bottom:56px}
.hero2 .kicker{margin:0 0 14px;font:700 15px var(--body);color:var(--blue-text)}
.hero2 h1{font-weight:800;font-size:clamp(36px,5.6vw,68px);line-height:1.02;max-width:15ch}
.hero2 h1 em{font-style:normal;color:var(--accent);display:inline}
.hero2 .sub{margin:20px 0 0;font-size:20px;color:var(--muted);max-width:44ch}
.hero2 .ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.chips2{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 18px}
.chips2 li{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:16px}
.chips2 svg{width:20px;height:20px;fill:none;stroke:var(--mint);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.h2-art img{width:100%;height:auto;max-width:600px;margin-inline:auto;display:block}
@media (min-width:900px){.hero2 .wrap{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);padding-top:64px;padding-bottom:72px}}
@media (max-width:640px){.hero2 .ctas .btn{flex:1 1 100%}.hero2 .sub{font-size:18px}.h2-art img{max-width:420px}}

/* Home: services */
.svcs,.how,.tease{padding-block:64px 8px}
.svc-grid{display:grid;gap:18px;margin-top:28px;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr))}
.svc{--c:var(--blue);--c50:var(--b50);display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;text-decoration:none;color:var(--text);box-shadow:var(--shadow-1);transition:transform var(--t),box-shadow var(--t)}
.svc:hover{transform:translateY(-4px);box-shadow:var(--shadow-2);color:var(--text)}
.svc img{width:100%;height:auto;aspect-ratio:400/260;object-fit:cover;background:var(--c50)}
.svc-b{display:grid;gap:6px;padding:18px 20px 22px}
.svc .ic{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--c50);color:var(--c);margin-top:-40px;border:3px solid #fff}
.svc .ic svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.svc b{font:800 21px/1.2 var(--display)}
.svc-t{color:var(--muted);font-size:16px}
.svc-p{font-size:15px;color:var(--muted)}.svc-p strong{color:var(--ink);font:800 19px var(--display)}.svc-p s{font-size:.8em;font-weight:400}
.svc-logos{--c:var(--lilac);--c50:var(--l50)}.svc-apps{--c:var(--mint);--c50:var(--m50)}.svc-support{--c:#D99A00;--c50:var(--s50)}
.also{margin:20px 0 0;color:var(--muted)}.also a{font-weight:700}
@media (prefers-reduced-motion:reduce){.svc,.svc:hover{transform:none}}
@media (max-width:640px){
  .svc{flex-direction:row;align-items:stretch}
  .svc img{width:112px;flex:none;aspect-ratio:auto;height:auto;object-fit:cover;object-position:30% 50%}
  .svc-b{padding:14px 16px;gap:4px}.svc .ic{display:none}.svc b{font-size:19px}.svc-t{font-size:15px}
  .h2-art img{max-width:320px}
  .svcs,.how,.tease{padding-block:44px 4px}
  .hero2 .wrap{padding-top:28px;padding-bottom:36px;gap:20px}
}

/* Home: our first shop */
.first{padding-block:64px 8px}
.first-in{display:grid;gap:28px;align-items:center;grid-template-columns:minmax(0,1fr);background:var(--card);border:1px solid var(--line);border-radius:28px;padding:clamp(18px,3vw,32px);box-shadow:var(--shadow-1)}
.first-shot{display:block;border-radius:18px;overflow:hidden;box-shadow:var(--shadow-2);transform:rotate(-1.2deg);transition:transform var(--t)}
.first-shot:hover{transform:rotate(0)}.first-shot img{width:100%;height:auto;display:block}
.first-copy p{color:var(--muted)}.first-copy .ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}
@media (min-width:900px){.first-in{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){.first-shot,.first-shot:hover{transform:none}}

/* Home: three steps */
.how-steps{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.how-steps li{display:grid;gap:4px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px}
.how-steps .n{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--ink);color:#fff;font:800 18px var(--display);margin-bottom:8px}
.how-steps li:nth-child(2) .n{background:var(--blue)}.how-steps li:nth-child(3) .n{background:var(--mint)}
.how-steps b{font:800 20px var(--display)}.how-steps span:last-child{color:var(--muted)}

/* Home: pricing teaser */
.tease-in{display:grid;gap:24px;background:var(--ink);color:var(--on-ink);border-radius:28px;padding:clamp(24px,4vw,48px);grid-template-columns:minmax(0,1fr)}
.tease-h h2{color:#fff}.tease-h p{color:var(--on-ink-muted);margin:10px 0 20px}
.tease .eyebrow{color:var(--sun)}.tease .eyebrow::before{background:var(--sun)}
.tz-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))}
.tz{position:relative;background:var(--ink-2);border:1px solid var(--ink-line);border-radius:18px;padding:20px}
.tz-hl{background:#fff;color:var(--text);border-color:#fff}
.tz-badge{position:absolute;top:-12px;left:16px;background:var(--sun);color:var(--ink);font:700 13px var(--body);padding:3px 10px;border-radius:999px}
.tz-g{margin:0;font-size:14px;color:var(--on-ink-faint)}.tz-hl .tz-g{color:var(--muted)}
.tz-n{margin:2px 0 6px;font-weight:700}
.tz-p{margin:0;font:800 30px/1.1 var(--display)}.tz-p s{font:400 15px var(--body);color:var(--on-ink-faint)}.tz-hl .tz-p s{color:var(--muted)}.tz-p small{font:400 15px var(--body)}
.tz-d{margin:8px 0 0;font-size:15px;color:var(--on-ink-muted)}.tz-hl .tz-d{color:var(--muted)}
@media (min-width:980px){.tease-in{grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr);align-items:center}}

/* Pricing page */
.page-h{padding-block:56px 8px}.page-h h1{font-weight:800;font-size:clamp(34px,5vw,56px);line-height:1.05;max-width:20ch;margin-top:8px}
.pricing{padding-block:24px 40px}
.pricing h3.group{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-top:44px;font-size:26px}
.pricing h3.group::before{content:"";flex:none;width:14px;height:14px;border-radius:50%;background:var(--gc)}
.pricing h3.group:nth-of-type(1),.pricing h3.group:nth-of-type(1)+.plans{--gc:var(--lilac)}
.pricing h3.group:nth-of-type(2),.pricing h3.group:nth-of-type(2)+.plans{--gc:var(--blue)}
.pricing h3.group:nth-of-type(3),.pricing h3.group:nth-of-type(3)+.plans{--gc:var(--mint)}
.pricing h3.group:nth-of-type(4),.pricing h3.group:nth-of-type(4)+.plans{--gc:var(--accent)}
.pricing h3.group:nth-of-type(5),.pricing h3.group:nth-of-type(5)+.plans{--gc:#D99A00}
.plans{padding-top:14px}
.plan{border-radius:var(--r-lg);box-shadow:var(--shadow-1);border:1px solid var(--line);border-top:5px solid var(--gc,var(--line-2));transition:transform var(--t),box-shadow var(--t)}
.plan:hover{transform:translateY(-2px);box-shadow:var(--shadow-2)}
.plan.hl{box-shadow:0 0 0 2px var(--gc,var(--accent)),var(--shadow-2)}
.plan.dark{background:var(--ink);border-color:var(--ink)}
.plan .price{font-family:var(--display)}
.plan s.was,.price-panel a s{font-weight:400;font-size:.55em;color:var(--muted);text-decoration-thickness:1.5px}.plan.dark s.was{color:var(--on-ink-faint)}
.plan .pick{display:inline-flex;align-items:center;min-height:44px}
.jump a{border-radius:999px}
@media (prefers-reduced-motion:reduce){.plan:hover{transform:none}}

/* Offer and other pages built earlier: lighter heroes, pictures with colour behind */
.hero.dark{background:radial-gradient(60% 80% at 85% 20%,#E6EAFF 0,transparent 60%),radial-gradient(50% 70% at 10% 90%,#FFE7DC 0,transparent 60%),var(--paper);color:var(--text)}
.hero.dark h1{color:var(--ink)}.hero.dark .kicker{color:var(--blue-text)}.hero.dark p.sub{color:var(--muted)}
.hero.dark .btn-ghost{border-color:var(--ink);color:var(--ink)}.hero.dark .btn-ghost:hover{background:var(--ink);color:#fff}
.hero-photo{background:var(--b50);border-radius:var(--r-lg);box-shadow:var(--shadow-1)}.hero-photo img{object-fit:contain;padding:12px}
.price-panel{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-1)}
.price-panel .head{color:var(--muted)}.price-panel a{color:var(--ink)}.price-panel a:hover{background:var(--paper);color:var(--ink)}
.service{border-radius:var(--r-lg);box-shadow:var(--shadow-1)}.service .ph{background:var(--b50)}.service .ph img{object-fit:cover}
.service.feature{background:var(--ink)}
.ai .media{background:var(--m50)}.ai .media img{object-fit:contain;opacity:1}
.onsite .media{background:var(--s50)}.onsite .media img{object-fit:contain}
.local{background:var(--ink)}
.band .inner{border-radius:var(--r-lg)}

/* FAQ: cards that open */
.faq{padding-top:64px}
.faq details{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:4px 20px;margin-bottom:10px}
.faq details:last-of-type{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;justify-content:space-between;gap:16px;padding:12px 0}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--o50);color:var(--accent-text);font:700 22px/1 var(--display)}
.faq details[open]{border-color:var(--accent)}.faq details[open] summary::after{content:"–"}
.faq details p{padding-bottom:16px}

/* Contact */
.contact .panel{border-radius:28px;background:var(--ink);box-shadow:var(--shadow-2)}
form.request input,form.request select,form.request textarea{border-radius:12px}
form.request input:focus,form.request select:focus,form.request textarea:focus{box-shadow:0 0 0 3px rgba(255,197,61,.45)}

/* Footer */
.site-footer{background:#fff;border-top:1px solid var(--line)}
.site-footer a{font-weight:600}

/* Client area header */
.cl-hero{display:grid;gap:24px;align-items:center;grid-template-columns:minmax(0,1fr);margin-bottom:28px}
.cl-hero h1{margin-top:4px}
.cl-kicker{margin:0;display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--blue-text)}
.cl-kicker::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--blue)}
.cl-art{width:100%;max-width:420px;height:auto;justify-self:end;border-radius:var(--r-lg)}
@media (min-width:860px){.cl-hero{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}}
@media (max-width:859px){.cl-art{max-width:300px;justify-self:start}}
@media (max-width:600px){.cl-art{display:none}}
.cl-site{border-top:5px solid var(--blue);box-shadow:var(--shadow-1)}
.cl-form{box-shadow:var(--shadow-1)}
/* ---- One component system for every form and control (contact, start, account, review, report, marché, deals, modules, chat).
   Same field, label, help, choice card, consent row, button and card everywhere; existing class names kept, no markup change. ---- */
:root{--f-h:48px;--f-r:12px;--f-bd:#B9BFD6;--f-ring:0 0 0 4px rgba(61,90,254,.22);--bad:#B42318;--bad-50:#FEF3F2}
.hp,input.hp,label.hp{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;overflow:hidden!important;opacity:0}
/* Fields */
body :is(main,.ccchat) :is(input:not([type]),input[type=text],input[type=email],input[type=search],input[type=tel],input[type=url],input[type=number],input[type=date],input[type=password],select,textarea){
  width:100%;min-height:var(--f-h);padding:11px 14px;border:1.5px solid var(--f-bd);border-radius:var(--f-r);background:#fff;color:var(--text);
  font:400 16px/1.4 var(--body);box-shadow:none;transition:border-color var(--t),box-shadow var(--t);-webkit-appearance:none;appearance:none;margin:0}
body :is(main,.ccchat) textarea:not([hidden]){min-height:120px;resize:vertical;line-height:1.5}
body :is(main,.ccchat) select:not([multiple]){padding-right:42px;cursor:pointer;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2311142B' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center}
body :is(main,.ccchat) :is(input,select,textarea)::placeholder{color:#6B7090;opacity:1}
body :is(main,.ccchat) :is(input,select,textarea):hover{border-color:#8F96B5}
body :is(main,.ccchat) :is(input:not([type=checkbox]):not([type=radio]),select,textarea):focus,
body :is(main,.ccchat) :is(input:not([type=checkbox]):not([type=radio]),select,textarea):focus-visible{outline:none;border-color:var(--blue);box-shadow:var(--f-ring)}
body :is(main,.ccchat) :is(input,select,textarea)[aria-invalid=true]{border-color:var(--bad);background:var(--bad-50)}
body :is(main,.ccchat) :is(input,select,textarea)[aria-invalid=true]:focus{box-shadow:0 0 0 4px rgba(180,35,24,.18)}
body :is(main,.ccchat) :is(input,select,textarea):disabled{background:var(--paper-2);color:var(--muted);cursor:not-allowed}
.dark form.request :is(input,select,textarea):focus{box-shadow:0 0 0 4px rgba(255,197,61,.5)!important;border-color:var(--sun)!important}
/* Labels and help: one look (bold label above, muted help below) */
.wz-f,.rv-note,.rv-name,.cl-field,.mk-form label:not(.wz-ack):not(.mk-free){display:grid;gap:6px;margin:0}
.wz-f>span,.cl-field>label,.rv-note,.rv-name,.wz-lab,.mk-form label:not(.wz-ack):not(.mk-free){font:700 16px/1.35 var(--body);color:var(--text)}
.rv-note textarea,.rv-name input{margin-top:0}.rv-note{margin-top:16px}
form.request label{font-weight:700;color:var(--on-ink)}
.wz-f small,.cl-help,.rv-hint,.mk-note,.wz-f+small{font:400 14px/1.45 var(--body);color:var(--muted)}
/* Messages: errors red with an icon, success green, info neutral */
.wz-msg,.cl-err,.rv-msg,.dl-msg{font:600 15px/1.45 var(--body);margin:10px 0 0}
.wz-msg,.cl-err{color:var(--bad)}
.wz-msg:not(:empty)::before,.cl-err:not(:empty)::before{content:"! ";display:inline-grid;place-items:center;width:20px;height:20px;margin-right:6px;border-radius:50%;background:var(--bad);color:#fff;font-size:13px;vertical-align:1px}
.wz-msg:empty{min-height:0;margin:0}
/* Errors that stop the next step: red with an icon, in place (status lines, load errors, short messages); successes stay green */
.rv-msg,.dl-msg.bad,.cl-status.bad{color:var(--bad);font-weight:600}
.rv-msg:not(:empty)::before,.dl-msg.bad:not(:empty)::before,.cl-status.bad:not(:empty)::before,.cl-alert.bad::before{content:"!";display:inline-grid;place-items:center;width:20px;height:20px;margin-right:8px;border-radius:50%;background:var(--bad);color:#fff;font:800 13px/1 var(--body);vertical-align:1px}
.cl-alert.bad{border-left-color:var(--bad);background:var(--bad-50);color:var(--bad);font-weight:600}
.wz-msg.is-ok{color:var(--green-text)}.wz-msg.is-ok::before{content:"✓";background:none;color:inherit;width:auto;margin-right:6px}
.wz-hint,.cl-todo{border-radius:0 12px 12px 0;background:var(--s50);border-left:4px solid var(--sun);color:var(--text);padding:12px 16px;font-size:15px}
/* Choice cards (radio and checkbox): one border, one selected state (blue), one focus ring */
.wz-type,.wz-opt,.cl-kind,.mod label,.wz-item{border:1.5px solid var(--line-2);border-radius:14px;background:#fff;transition:border-color var(--t),background-color var(--t),box-shadow var(--t)}
.wz-type,.cl-kind,.mod label{padding:16px}
.wz-type:hover,.wz-opt:hover,.cl-kind:hover,.mod label:hover,.rv-opt:hover{border-color:#8F96B5}
.wz-type:has(input:checked),.wz-opt:has(input:checked),.cl-kind:has(input:checked),.mod label:has(input:checked){border-color:var(--blue);background:var(--b50);box-shadow:inset 0 0 0 1px var(--blue)}
.rv-opt{border:1.5px solid var(--line-2);background:#fff;min-height:48px;padding:10px 18px;font-weight:600}
.rv-opt:has(input:checked){background:var(--b50);color:var(--ink);border-color:var(--blue);box-shadow:inset 0 0 0 1px var(--blue)}
.wz-type:focus-within,.wz-opt:focus-within,.cl-kind:focus-within,.mod label:focus-within,.rv-opt:focus-within,.cl-pal .sw:has(input:focus-visible){outline:3px solid var(--blue);outline-offset:2px}
main input[type=checkbox],main input[type=radio],.ccchat input[type=checkbox]{accent-color:var(--blue);width:20px;height:20px;flex:none;margin:2px 0 0;cursor:pointer}
.dark input[type=checkbox],.dark input[type=radio]{accent-color:var(--sun)}
/* Consent and acknowledgment rows: same layout everywhere */
.form-ai{margin:0 0 6px;font-size:14px;opacity:.8}.form-ai a{color:inherit}
.wz-ack,.rv-ack,.cl-consent,form.request .consent,.mk-free{display:flex;flex-direction:row;gap:12px;align-items:flex-start;font:400 15px/1.5 var(--body);margin:14px 0;cursor:pointer}
.wz-ack input,.rv-ack input,.cl-consent input,form.request .consent input{width:22px!important;height:22px!important;min-height:0!important;margin-top:1px!important;padding:0}
form.request .consent{color:var(--on-ink-muted);font-weight:400;margin:0}
.mk-free{align-items:center;min-height:48px;margin:0}
/* Buttons: primary (orange), secondary (white with border), line (ink), disabled (grey, readable) */
main .btn:not(.btn-accent):not(.btn-line):not(.btn-ghost),.ccchat .btn:not(.btn-accent){background:#fff;color:var(--ink);border:1.5px solid var(--line-2)}
main .btn:not(.btn-accent):not(.btn-line):not(.btn-ghost):hover{border-color:var(--ink);background:#fff;color:var(--ink)}
main .btn{min-height:48px;padding:12px 22px;font:700 16px/1.2 var(--body)}
main .btn:disabled,main .btn[disabled],main .btn[aria-disabled=true]{background:var(--paper-2)!important;color:#5A5F7D!important;border:1.5px dashed var(--line-2)!important;box-shadow:none!important;transform:none!important;opacity:1!important;cursor:not-allowed}
.ccchat-form button{border-radius:999px;font:700 15px var(--body)}
.wz-nav{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px;align-items:center}
.wz-nav .btn+.btn-accent{margin-left:auto}
/* Form cards: same surface, radius, padding and shadow */
.wz-box,.rv-item,.cl-form,.mk-form,.rv-box,.rv-ai,.mk-detail{background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow-1);padding:clamp(20px,4vw,28px)}
.wz-box{display:grid;gap:18px}.wz-box>*{margin-top:0;margin-bottom:0}
.wz-box h2,.rv-ai h2{font:700 clamp(22px,3vw,26px)/1.2 var(--display);margin:0}
.rv-ai h2{margin-bottom:12px}
.rv-ai{border-top:4px solid var(--ink)}
.rv-item legend{font:700 18px var(--display);padding:0 8px;margin-left:-8px}
.rv-item{border-left-width:1px}
.rv-item[data-state=keep]{box-shadow:inset 4px 0 0 var(--mint),var(--shadow-1);border-left:1px solid var(--line)}
.rv-item[data-state=change]{box-shadow:inset 4px 0 0 var(--accent),var(--shadow-1);border-left:1px solid var(--line)}
.rv-item[data-state=remove]{box-shadow:inset 4px 0 0 #6B6B6B,var(--shadow-1);border-left:1px solid var(--line)}
.rv-prog{background:var(--paper);padding:12px 0}
.wz-step{display:inline-flex;align-items:center;gap:8px;font:700 13px/1 var(--body);letter-spacing:.02em;color:var(--blue-text);background:var(--b50);border-radius:999px;padding:7px 12px;margin:0 0 14px}
/* Filter bars (deals, marché): same height as fields, chips aligned */
.dl-row{gap:10px}.dl-row :is(select,input){flex:1 1 220px;width:auto}
@media (max-width:640px){.wz-nav .btn{flex:1 1 0}.wz-nav .btn+.btn-accent{margin-left:0}}

/* ---- Theme 2026-10-28 "Soumission": the written quote is the brand. White paper, ballpoint-blue ink for every action,
   carbon-copy yellow and pink as the only warm notes, the orange square kept for the logo and the promo.
   One family (Schibsted Grotesk) for everything; a handwritten pen only for the signature on the sample quote. ---- */
:root{
  --pen:#1E2BB0;--pen-2:#16208A;--pen-50:#EEF0FC;--pen-100:#DCE0FA;
  --ink:#14162B;--ink-2:#1B2150;--ink-3:#252C66;--ink-line:#38407E;
  --paper:#FFFFFF;--paper-2:#F2F3F7;--card:#FFFFFF;--line:#E4E6EE;--line-2:#C9CDDB;
  --text:#14162B;--muted:#4A4E66;--on-ink:#FFFFFF;--on-ink-muted:#CDD1EE;--on-ink-faint:#A9AEDA;
  --accent:#1E2BB0;--accent-text:#1E2BB0;--accent-text-hover:#16208A;--orange:#FF5B1F;
  --blue:#1E2BB0;--blue-text:#1E2BB0;--b50:#EEF0FC;
  --carbon-y:#FFE873;--carbon-p:#F9C9D6;--s50:#FFF8D6;--sun:#FFE873;--yellow:#FFE873;
  --night:#121852;
  --display:'Schibsted Grotesk',system-ui,sans-serif;--body:'Schibsted Grotesk',system-ui,sans-serif;--mono:'Schibsted Grotesk',system-ui,sans-serif;--hand:'Reenie Beanie','Segoe Print',cursive;
  --radius:12px;--r-lg:14px;
  --shadow-1:0 1px 0 rgba(20,22,43,.04),0 2px 8px rgba(20,22,43,.05);--shadow-2:0 1px 2px rgba(20,22,43,.06),0 14px 34px rgba(20,22,43,.10);
  --f-bd:#B4B9CC;--f-ring:0 0 0 4px rgba(30,43,176,.18)}
html,body{background:#fff}
body{font:400 17px/1.6 var(--body);color:var(--text);font-feature-settings:"tnum" 0}
::selection{background:var(--carbon-y);color:var(--ink)}
h1,h2,h3{font-family:var(--display);letter-spacing:-.03em;color:var(--ink)}
h1{font-weight:800}h2{font-weight:800;font-size:clamp(28px,3.6vw,42px);line-height:1.08}h3{font-weight:700}
a{color:var(--pen)}a:hover{color:var(--pen-2)}
:focus-visible{outline:3px solid var(--pen);outline-offset:3px}
.dark :focus-visible{outline-color:var(--carbon-y)}
/* Section labels: plain sentence case in pen blue, no dot */
.eyebrow,.hero2 .kicker,.cl-kicker,.hero .kicker{font:600 15px/1.3 var(--body);color:var(--pen);letter-spacing:0;text-transform:none}
.eyebrow::before,.cl-kicker::before{content:none}
.dark .eyebrow,.tease .eyebrow{color:var(--carbon-y)}
/* Header */
.site-header{background:rgba(255,255,255,.94);box-shadow:0 1px 0 var(--line)}
.brand{font:500 20px var(--display);font-variation-settings:normal;letter-spacing:-.02em}.brand b{font-weight:800}
.nav a{color:var(--muted);font-weight:500}.nav a:hover{color:var(--ink);box-shadow:inset 0 -2px 0 var(--pen)}
.nav a.acct,.hdr-acct{border-radius:10px;font-weight:600}
.nav .btn{background:var(--pen);color:#fff;border-radius:10px}.nav .btn:hover{background:var(--pen-2);color:#fff}
.menu-btn{border-radius:10px}
.bf{background:var(--carbon-y);color:var(--ink)}
/* Buttons: ballpoint blue, squared corners like a form field */
.btn{border-radius:10px;font-weight:700;letter-spacing:-.005em}
.btn-accent,.btn-accent:visited,form.request button{background:var(--pen);color:#fff}
.btn-accent:hover,form.request button:hover{background:var(--pen-2);color:#fff;transform:none;box-shadow:0 6px 18px rgba(30,43,176,.28)}
.btn-line{border:1.5px solid var(--ink);color:var(--ink)}.btn-line:hover{background:var(--ink);color:#fff}
.btn-ghost{border:1.5px solid var(--line-2);color:var(--ink)}
.dark .btn-accent,.tease .btn-accent,.dark form.request button{background:var(--carbon-y);color:var(--ink)}
.dark .btn-accent:hover,.tease .btn-accent:hover,.dark form.request button:hover{background:#FFF09E;color:var(--ink)}
main .btn{border-radius:10px}
/* Home hero: headline left, the sample quote right */
.hero2{background:#fff;border-bottom:1px solid var(--line)}
.hero2 .wrap{padding-top:56px;padding-bottom:64px;gap:40px}
.hero2 h1{font-size:clamp(38px,5.4vw,70px);line-height:1;letter-spacing:-.04em;max-width:13ch}
.hero2 h1 em{color:inherit}
.hero2 .sub{color:var(--muted);font-size:20px;max-width:40ch}
.chips2 li{font-weight:600;font-size:16px}.chips2 svg{stroke:var(--pen)}
.quote{margin:0;justify-self:center;width:min(100%,460px);position:relative;padding:0 14px 0 0}
.q-sheet{position:relative;background:#fff;border:1px solid var(--line-2);border-radius:4px;padding:26px 26px 22px;box-shadow:var(--shadow-2);font-variant-numeric:tabular-nums}
.quote{isolation:isolate}.q-sheet{z-index:auto}
.q-sheet::before,.q-sheet::after{content:"";position:absolute;inset:-1px;border-radius:4px;z-index:-1}
.q-sheet::before{background:var(--carbon-y);transform:translate(14px,12px) rotate(2deg)}
.q-sheet::after{background:var(--carbon-p);transform:translate(7px,6px) rotate(1deg)}
.quote figcaption{position:relative;z-index:2;margin:30px 0 0;font-size:15px;color:var(--muted);max-width:40ch}
.q-h{display:flex;justify-content:space-between;align-items:baseline;margin:0 0 4px;border-bottom:2px solid var(--ink);padding-bottom:10px}
.q-h b{font:800 26px var(--display);letter-spacing:-.03em}.q-h span{font-size:14px;color:var(--muted)}
.q-for{margin:10px 0 6px;font-size:15px;color:var(--muted)}
.q-rows{list-style:none;margin:0;padding:0}
.q-rows li{display:flex;align-items:baseline;gap:8px;padding:9px 0;border-bottom:1px dashed var(--line-2);font-size:16px}
.q-rows li span{flex:1}.q-rows li b{font-weight:700;white-space:nowrap}
.q-total{display:flex;justify-content:space-between;align-items:baseline;margin:14px 0 0;font-weight:700}
.q-total b{font:800 34px var(--display);letter-spacing:-.03em;color:var(--pen)}
.q-sign{display:flex;justify-content:space-between;align-items:center;margin:14px 0 0;min-height:56px}
.q-pen{font:400 34px/1 var(--hand);color:var(--pen);transform:rotate(-4deg);display:inline-block}
.q-stamp{display:grid;place-items:center;width:84px;height:84px;border:2.5px solid var(--pen);border-radius:50%;color:var(--pen);font:800 14px/1.1 var(--display);text-align:center;transform:rotate(-12deg);opacity:.9;margin:-18px 0 -18px}
@media (min-width:900px){.hero2 .wrap{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);padding-top:72px;padding-bottom:84px}}
@media (max-width:640px){.hero2 .wrap{padding-top:32px;padding-bottom:44px}.q-sheet{padding:20px 18px 16px}.q-total b{font-size:28px}.q-stamp{width:70px;height:70px;font-size:12px}.q-pen{font-size:30px}}
/* Home services: a price list */
.svc-grid{gap:0;border-top:2px solid var(--ink);grid-template-columns:repeat(auto-fill,minmax(min(100%,440px),1fr));column-gap:40px}
.svc{flex-direction:row;align-items:center;gap:16px;background:transparent;border:0;border-bottom:1px solid var(--line-2);border-radius:0;box-shadow:none;padding:22px 0;overflow:visible}
.svc:hover{transform:none;box-shadow:none;background:transparent}
.svc:hover b{color:var(--pen)}
.svc-b{flex:1;padding:0;gap:4px;grid-template-columns:auto 1fr auto;align-items:baseline}
.svc .ic{display:grid;margin:0;width:44px;height:44px;border:0;border-radius:10px;background:var(--pen-50);color:var(--pen);grid-row:span 2;align-self:start}
.svc b{font:700 22px/1.2 var(--display);letter-spacing:-.02em;grid-column:2}
.svc-t{grid-column:2;font-size:16px}
.svc-p{grid-column:3;grid-row:1/span 2;text-align:right;font-size:14px;align-self:center;white-space:nowrap}
.svc-p strong{display:block;font:800 24px var(--display);color:var(--ink);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.svc-go{flex:none;width:12px;height:12px;border-right:2px solid var(--ink);border-top:2px solid var(--ink);transform:rotate(45deg);margin-right:6px}
.svc-logos,.svc-apps,.svc-support{--c:var(--pen);--c50:var(--pen-50)}
@media (max-width:640px){.svc{padding:18px 0;gap:12px}.svc .ic{display:none}.svc-b{grid-template-columns:1fr auto}.svc b,.svc-t{grid-column:1}.svc-p{grid-column:2}.svc b{font-size:19px}.svc-p strong{font-size:20px}.svc-go{display:none}}
.also a{font-weight:600}
/* Home: first shop, steps, pricing teaser */
.first-in{border-radius:var(--r-lg);border:1px solid var(--line);box-shadow:none;background:var(--paper-2)}
.first-shot{border-radius:8px;transform:none;box-shadow:var(--shadow-2)}
.how-steps{counter-reset:none;gap:0;border-top:2px solid var(--ink)}
.how-steps li{background:transparent;border:0;border-radius:0;padding:22px 24px 8px 0}
.how-steps .n,.how-steps li:nth-child(2) .n,.how-steps li:nth-child(3) .n{width:auto;height:auto;border-radius:0;background:none;color:var(--pen);font:800 44px/1 var(--display);place-items:start;letter-spacing:-.04em}
.how-steps b{font:700 21px var(--display)}
.how-steps{align-items:start}.how-steps li{align-content:start}
.dark h1,.dark h2,.dark h3,.tease-h h2,.band h2,.local h2,.service.feature h3{color:#fff}
.tease-in,.contact .panel,.band .inner,.pickbar,.plan.dark,.service.feature,.local{background:var(--night)}
.tease-in{border-radius:var(--r-lg)}.contact .panel{border-radius:var(--r-lg);box-shadow:none}
.tz{background:var(--ink-2);border-color:var(--ink-line);border-radius:10px}
.tz-hl{background:#fff;border-color:#fff}
.tz-badge{background:var(--carbon-y);border-radius:4px}
.tz-p{font-variant-numeric:tabular-nums;letter-spacing:-.02em}
/* Cards, FAQ, pricing, forms: calmer corners, one shadow */
.faq details{border-radius:10px}.faq summary::after{background:var(--pen-50);color:var(--pen)}.faq details[open]{border-color:var(--pen)}
.plan{border-radius:var(--r-lg);border-top-width:4px}
.pricing h3.group::before{border-radius:3px}
.pricing h3.group:nth-of-type(n),.pricing h3.group:nth-of-type(n)+.plans{--gc:var(--pen)}
.wz-box,.rv-item,.cl-form,.mk-form,.rv-box,.rv-ai,.mk-detail{border-radius:var(--r-lg)}
.wz-type,.wz-opt,.cl-kind,.mod label,.wz-item{border-radius:10px}
.rv-opt{border-radius:10px}
.wz-step{background:var(--pen-50);color:var(--pen);border-radius:6px}
.chip{border-radius:10px}.chip[aria-pressed=true]{background:var(--pen);border-color:var(--pen);color:#fff}
.jump a{border-radius:10px}
.cl-site{border-top-color:var(--pen)}
.cl-steps li::before,.cl-steps li:nth-child(2)::before,.cl-steps li:nth-child(3)::before{background:var(--pen-50);color:var(--pen)}
.hero.dark,.hero2{background:#fff}
.hero-photo,.service .ph,.ai .media,.onsite .media{background:var(--pen-50)}
.site-footer{background:var(--paper-2);border-top:0}
.plan.hl{border:2px solid var(--pen);box-shadow:var(--shadow-2)}
.hero.dark .btn-accent{background:var(--pen);color:#fff}.hero.dark .btn-accent:hover{background:var(--pen-2);color:#fff}
.plan .tier{border-radius:4px;letter-spacing:.02em}
.dl-save{background:var(--carbon-y);color:var(--ink);border-radius:6px}.ccchat-form button{background:var(--pen);color:#fff}.cl-track li.now::before{background:var(--pen);color:#fff}
.site-header .wrap:has(.hdr-acct){flex-wrap:nowrap!important}@media (max-width:420px){.hdr-acct{padding:8px 10px;font-size:15px}.site-header .brand{font-size:18px}}
.plan.dark a,.plan.dark .pick,.dark a:not(.btn){color:var(--carbon-y)}.plan.dark a:hover,.dark a:not(.btn):hover{color:#fff}

/* Pictures first (owner, 2026-10-28: "too much text, not enough pictures") */
.h2-pic{position:relative;margin:0;padding-bottom:70px}
.h2-pic>img{width:100%;height:auto;display:block;border-radius:var(--r-lg);box-shadow:var(--shadow-2)}
.h2-pic .quote{position:absolute;left:-28px;bottom:0;width:min(78%,330px);padding:0}
.h2-pic .q-sheet{padding:16px 18px 12px}
.h2-pic .q-h b{font-size:20px}.h2-pic .q-for{display:none}
.h2-pic .q-rows li{font-size:14px;padding:6px 0}.h2-pic .q-rows li:nth-child(n+3){display:none}
.h2-pic .q-total{margin-top:8px;font-size:14px}.h2-pic .q-total b{font-size:26px}
.h2-pic .q-sign{margin-top:6px;min-height:44px}.h2-pic .q-pen{font-size:26px}.h2-pic .q-stamp{width:62px;height:62px;font-size:11px;margin:-10px 0}
@media (max-width:899px){.h2-pic .quote{left:12px}}
@media (max-width:640px){.h2-pic{padding-bottom:0}.h2-pic .quote{position:relative;left:auto;bottom:auto;width:88%;margin:-48px auto 0}.how-steps li{grid-template-columns:42% 1fr;column-gap:14px;padding:0;align-items:center}.how-steps li img{grid-row:1/span 3;height:100%;object-fit:cover;margin:0}.how-steps li>*:not(img){padding-inline:0}.how-steps .n{padding-top:12px!important}}
.svc-grid{border-top:0;gap:20px;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr))}
.svc{flex-direction:column;align-items:stretch;gap:0;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;padding:0;box-shadow:var(--shadow-1);transition:transform var(--t),box-shadow var(--t)}
.svc:hover{transform:translateY(-3px);box-shadow:var(--shadow-2);background:#fff}
.svc img{display:block;width:100%;height:auto;aspect-ratio:480/312;object-fit:cover}
.svc-b{display:flex;flex-direction:column;gap:6px;padding:16px 18px 18px}
.svc .ic,.svc-go,.svc-t{display:none}
.svc b{font-size:20px}
.svc-p{text-align:left;font-size:14px}.svc-p strong{display:inline;font-size:22px;margin-left:4px}
@media (max-width:640px){.svc{flex-direction:row}.svc img{width:42%;aspect-ratio:auto;object-fit:cover}.svc-b{justify-content:center;padding:12px 14px}.svc b{font-size:18px}.svc-p strong{display:block;margin:0;font-size:20px}}
.how-steps{border-top:0;gap:20px;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}
.how-steps li{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;padding:0 0 18px;gap:2px}
.how-steps li img{width:100%;height:auto;aspect-ratio:480/312;margin-bottom:12px}
.how-steps li>*:not(img){padding-inline:18px}
.how-steps .n,.how-steps li:nth-child(2) .n,.how-steps li:nth-child(3) .n{font-size:30px}
@media (prefers-reduced-motion:reduce){.svc:hover{transform:none}}
.svc-p{align-self:flex-start}.tz-d{display:none}.tz{display:flex;flex-direction:column;justify-content:center}

/* Page heroes with a picture */
.hero.dark .wrap.with-pic,.page-h.with-pic{display:grid;gap:32px;align-items:center;grid-template-columns:minmax(0,1fr)}
.hero-pic img{width:100%;height:auto;display:block;border-radius:var(--r-lg);box-shadow:var(--shadow-2)}
@media (min-width:900px){.hero.dark .wrap.with-pic,.page-h.with-pic{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}}
@media (max-width:640px){.hero-pic{max-width:420px}}
.dl-head{display:grid;gap:28px;align-items:center;grid-template-columns:minmax(0,1fr);margin-bottom:8px}
@media (min-width:900px){.dl-head{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}}

/* Pictures that bleed (owner, 2026-10-28): the picture runs to the edge of its card, and to the edge of the screen in heroes.
   --bleed is the distance from the content column to the screen edge (.wrap is 1200px wide with 24px gutters). */
:root{--bleed:max(24px,calc(50vw - 576px))}
.hero2{overflow:hidden;border-bottom:0}
.hero2 .wrap{align-items:stretch;padding-top:0;padding-bottom:0;gap:0 48px}
.h2-copy{align-self:center;padding:40px 0 32px}
.h2-pic{padding:0;margin:0 calc(-1 * var(--bleed));min-height:300px;background:var(--pen)}
.h2-pic>img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;border-radius:0;box-shadow:none;aspect-ratio:1/1}
@media (min-width:900px){.h2-copy{padding:88px 0}.h2-pic{margin:0 calc(-1 * var(--bleed)) 0 0}.h2-pic>img{aspect-ratio:auto;min-height:100%}}
/* Service cards: picture fills the top of the card, edge to edge; title and price only */
.svc-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,270px),1fr));gap:20px}
.svc{flex-direction:column!important;border:0;box-shadow:var(--shadow-1);background:#fff}
.svc-img{display:block;overflow:hidden;background:var(--pen-50)}
.svc-img img{display:block;width:100%!important;height:auto;aspect-ratio:16/11!important;object-fit:cover;transition:transform .4s ease}
.svc:hover .svc-img img{transform:scale(1.04)}
.svc-b{padding:16px 18px 18px!important;flex-direction:row!important;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:4px 12px}
.svc b{font-size:20px!important}.svc-p strong{display:inline!important;font-size:20px!important}
/* Steps: picture on top of each step */
.how-steps li{padding:0 0 18px;border:0;box-shadow:var(--shadow-1)}
.st-img{display:block;overflow:hidden;margin-bottom:14px}.st-img img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.how-steps li>.st-img{padding:0!important}
@media (max-width:640px){.how-steps li{display:block!important;padding:0 0 16px!important}.how-steps li>*:not(.st-img){padding-inline:16px}.how-steps .n{display:inline-block;margin-right:8px}}
/* First shop: a full-width night band, the picture bleeds to the left edge */
.first.wrap{max-width:none;padding:64px 0 0}
.first-in{border:0;border-radius:0;box-shadow:none;padding:0;background:var(--night);color:#fff;gap:0;align-items:stretch}
.first-shot{border-radius:0;box-shadow:none;transform:none!important;overflow:hidden}
.first-shot img{width:100%;height:100%;object-fit:cover;aspect-ratio:16/11;display:block}
.first-copy{padding:36px 24px 44px;align-self:center}
.first-copy h2{color:#fff}.first-copy p{color:var(--on-ink-muted)}.first .eyebrow{color:var(--carbon-y)}
.first .btn-accent{background:var(--carbon-y);color:var(--ink)}.first .btn-line{border-color:#fff;color:#fff}.first .btn-line:hover{background:#fff;color:var(--ink)}
@media (min-width:900px){.first-in{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr)}.first-copy{padding:56px max(24px,calc(50vw - 576px)) 56px 48px}.first-shot img{aspect-ratio:auto;min-height:520px}}
@media (prefers-reduced-motion:reduce){.svc:hover .svc-img img{transform:none}}
/* Phones and tablets: every picture keeps its own proportions (no forced heights, no cropping), so nothing looks stretched */
@media (max-width:899px){
  .h2-pic,.hero-photo,.hero-pic,.hero.dark .hero-side .hero-photo{min-height:0!important;aspect-ratio:auto!important;height:auto!important}
  .h2-pic>img,.hero-photo img,.hero-pic img,.first-shot img,.cl-art{position:static!important;height:auto!important;aspect-ratio:auto!important;object-fit:fill!important;min-height:0!important}
  .svc-img img{height:auto!important;aspect-ratio:auto!important}
}
.how-steps li .st-img img{aspect-ratio:auto!important;height:auto!important}
/* Page heroes (offers, pricing, stores, modules, deals, marché): picture bleeds to the right edge of the screen */
.hero.dark{overflow:hidden}
.hero.dark .wrap:has(.hero-photo),.hero.dark .wrap.with-pic{align-items:stretch;padding-top:0;padding-bottom:0;column-gap:48px}
.hero.dark .hero-copy{align-self:center;padding:48px 0 32px}
.hero-photo,.hero-pic{margin:0 calc(-1 * var(--bleed));border-radius:0!important;box-shadow:none!important;background:var(--pen-50);overflow:hidden;min-height:260px}
.hero-photo img,.hero-pic img{width:100%;height:100%;object-fit:cover;border-radius:0!important;box-shadow:none!important;padding:0!important;aspect-ratio:16/11;max-width:none}
@media (min-width:900px){.hero.dark .hero-copy{padding:80px 0}.hero-photo,.hero-pic{margin:0 calc(-1 * var(--bleed)) 0 0}.hero-photo img,.hero-pic img{aspect-ratio:auto;min-height:100%}}
.page-h.with-pic .hero-pic{margin-block:0}
@media (max-width:640px){.hero-pic{max-width:none}}
@media (min-width:900px){.hero.dark .wrap:has(.hero-photo),.hero.dark .wrap.with-pic{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
  .hero.dark .hero-photo{flex:none;width:auto;max-width:none;height:auto}
  .page-h.with-pic{padding-top:0;padding-bottom:0;align-items:stretch}.page-h.with-pic>div:first-child{align-self:center;padding:72px 0}}
.hero-side:has(.hero-photo){gap:0;margin:0 calc(-1 * var(--bleed))}
.hero-side .hero-photo{margin:0;flex:1}
@media (min-width:900px){.hero-side:has(.hero-photo){margin:0 calc(-1 * var(--bleed)) 0 0;align-self:stretch}.hero.dark .hero-side .hero-photo{flex:1 1 auto;aspect-ratio:auto;position:relative;min-height:440px}.hero-side .hero-photo img{position:absolute;inset:0}}
/* Service rows on offer pages: picture fills its side of the card */
.service .ph{padding:0;overflow:hidden}.service .ph img{width:100%;height:100%;object-fit:cover;padding:0}
/* Customer area: once signed in, the welcome picture steps aside so the dashboard and the editor come first */
main:has(#cl-app .cl-new, #cl-app .cl-block, #cl-app .cl-kinds, #cl-app .cl-site, #cl-app .bz-tabs) .cl-art{display:none!important}
main:has(#cl-app .cl-new, #cl-app .cl-block, #cl-app .cl-kinds, #cl-app .cl-site, #cl-app .bz-tabs) .cl-hero{margin-bottom:8px}
main:has(#cl-app .cl-new, #cl-app .cl-block, #cl-app .cl-kinds, #cl-app .cl-site, #cl-app .bz-tabs) .cl-hero p:not(.cl-kicker){display:none}
/* Customer area: the picture is shown on phones too, edge to edge */
.cl-art{border-radius:var(--r-lg);box-shadow:var(--shadow-2);max-width:560px;aspect-ratio:16/11;object-fit:cover}
@media (max-width:600px){.cl-art{display:block;max-width:none;width:calc(100% + 48px);margin:0 -24px;border-radius:0;box-shadow:none}}
/* Customer site editor: new block editors (hours week, menu items, gallery, choices, cover) */
.cl-lab{font:700 15px/1.3 var(--body);margin:14px 0 8px}
.cl-seg{border:0;padding:0;margin:14px 0;display:flex;flex-wrap:wrap;gap:8px}.cl-seg legend{font:700 15px/1.3 var(--body);margin-bottom:8px;padding:0}
.cl-seg label{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:2px solid var(--line);border-radius:999px;background:var(--card);cursor:pointer;font-weight:600}
.cl-seg label:has(input:checked){border-color:var(--pen,#1E2BB0);background:var(--paper-2)}.cl-seg input{width:18px!important;height:18px!important;min-height:0!important;margin:0}
.cl-week{width:100%;border-collapse:collapse;margin:8px 0 14px;font-size:15px}.cl-week th{text-align:left;font-weight:700;padding:6px 8px 6px 0;white-space:nowrap}.cl-week td{padding:4px}
.cl-week input[type=time]{min-width:0;width:100%;min-height:44px}.cl-week tr:has(.cl-closed input:checked) input[type=time]{opacity:.35}
.cl-closed{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;font-size:14px}.cl-closed input{width:20px!important;height:20px!important;min-height:0!important}
@media (max-width:520px){.cl-week,.cl-week tbody,.cl-week tr{display:block}.cl-week tr{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:8px 0;border-bottom:1px solid var(--line)}.cl-week th{grid-column:1/-1;padding:0}.cl-week td{padding:0}.cl-week td:last-child{grid-column:1/-1}}
.cl-items{list-style:none;padding:0;margin:8px 0 12px;display:grid;gap:10px}.cl-items li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) 100px auto;gap:8px;align-items:end;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--card)}
.cl-items li .cl-field{margin:0}@media (max-width:640px){.cl-items li{grid-template-columns:minmax(0,1fr) 110px}.cl-items li>.cl-field:nth-child(2){grid-column:1/-1;grid-row:2}.cl-items li>.cl-rm{grid-column:1/-1}}
.cl-gal{list-style:none;padding:0;margin:8px 0 12px;display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px}.cl-gal li{position:relative}.cl-gal img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px;display:block}
.cl-gal button{position:absolute;top:6px;right:6px;min-height:36px;min-width:36px;padding:0;border-radius:999px;background:rgba(18,24,82,.85);color:#fff;border:0}
.cl-cover{display:grid;gap:10px;margin:14px 0}.cl-cover .cl-thumb{width:100%;max-width:420px;aspect-ratio:16/9;object-fit:cover;border-radius:12px;background:var(--paper-2)}.cl-cover .cl-thumb:not([src]),.cl-cover .cl-thumb[src=""]{display:none}
.cl-up{display:flex;flex-wrap:wrap;align-items:center;gap:10px}.cl-up .cl-status{margin:0}
.cl-badge-n{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;margin-left:8px;border-radius:999px;background:#E4325B;color:#fff;font:700 12px/1 var(--body);vertical-align:middle}
.cl-warn{border-left-color:#8A5A00;background:#FFF6D6;color:#3A2A00}
/* Customer area > business tools */
.bz-tabs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:8px -24px 20px;padding:4px 24px;-webkit-overflow-scrolling:touch}.bz-tabs::-webkit-scrollbar{display:none}
.bz-tabs a{flex:none;display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;background:var(--paper-2);color:var(--text);font-weight:700;text-decoration:none;white-space:nowrap}
.bz-tabs a.on{background:var(--pen,#1E2BB0);color:#fff}.bz-tabs a:focus-visible{outline:3px solid var(--pen,#1E2BB0);outline-offset:2px}
.bz-body h2,.bz-body h3{font:700 20px/1.25 var(--display,var(--body));margin:24px 0 12px;max-width:none}
.bz-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.bz-kpi{position:relative;display:grid;gap:2px;padding:16px;border-radius:16px;background:var(--card);border:1px solid var(--line);border-top:4px solid var(--h,#1E2BB0)}
.bz-kpi b{font:800 30px/1.1 var(--body);font-variant-numeric:tabular-nums}.bz-kpi span:not(.bz-i){font-weight:600}.bz-kpi small{color:var(--muted);font-size:13px}
.bz-i{position:absolute;top:14px;right:14px;width:26px;height:26px;color:var(--h,#1E2BB0)}.bz-i svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.bz-view{--h:#1E2BB0}.bz-call{--h:#0E7C66}.bz-map{--h:#B4451F}.bz-form{--h:#6B3FB8}.bz-booking{--h:#A3226B}.bz-signup{--h:#1F6FB2}
.bz-chart{display:flex;align-items:flex-end;gap:3px;height:120px;margin:16px 0 4px;padding:12px;border-radius:16px;background:var(--card);border:1px solid var(--line)}.bz-bar{flex:1;min-width:2px;background:#1E2BB0;border-radius:3px 3px 0 0}
.bz-health{list-style:none;padding:0;margin:0;display:grid;gap:8px}.bz-health li{padding:12px 14px 12px 42px;border-radius:12px;background:var(--card);border:1px solid var(--line);position:relative}
.bz-health li::before{content:"";position:absolute;left:14px;top:50%;width:16px;height:16px;margin-top:-8px;border-radius:50%;background:#0E7C66}.bz-health li.wait::before{background:#B98A00}
.bz-msgs,.bz-list{list-style:none;padding:0;margin:12px 0;display:grid;gap:12px}
.bz-msg,.bz-list>li{padding:16px;border-radius:16px;background:var(--card);border:1px solid var(--line)}.bz-msg.is-new{border-left:5px solid #E4325B}
.bz-mtop{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;font-size:14px}.bz-mtop time{color:var(--muted);margin-left:auto}
.bz-kind{font-weight:800}.bz-st{padding:3px 10px;border-radius:999px;background:var(--paper-2);font-weight:700;font-size:13px}
.bz-msg h2{font:700 18px/1.3 var(--body);margin:8px 0 2px;max-width:none}.bz-who,.bz-when{margin:2px 0}.bz-body-t,.bz-pre{white-space:pre-wrap;margin:10px 0;padding:12px;border-radius:10px;background:var(--paper-2)}
.bz-msg>input{margin:8px 0}.bz-subs{font-size:17px}.bz-subs b{font-size:24px}
.bz-lines{list-style:none;padding:0;margin:8px 0;display:grid;gap:10px}.bz-lines li{display:grid;grid-template-columns:minmax(0,1fr) 80px 120px 44px;gap:8px;align-items:end;padding:12px;border:1px solid var(--line);border-radius:12px}
.bz-lines .cl-field{margin:0}.bz-rm{min-width:44px;padding:0}@media (max-width:560px){.bz-lines li{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 44px}.bz-lines li>.cl-field:first-child{grid-column:1/-1}}
.bz-tot{font:800 22px/1.3 var(--body);font-variant-numeric:tabular-nums;margin:12px 0}
.cl-biz{display:inline-flex;align-items:center}
/* Editor, more power: pages, undo/redo, ready-made sections, look of a section, lists inside sections */
.cl-tools{display:flex;align-items:center;gap:6px;margin:4px 0 12px;flex-wrap:wrap}.cl-tools .cl-ib{width:44px;height:44px;border:1px solid var(--line-2);border-radius:12px;background:#fff}
.cl-tools .cl-ib:disabled{opacity:.35}.cl-hint{color:var(--muted);font-size:14px;margin-left:6px}@media (max-width:1079px){.cl-hint{display:none}}
.cl-pages{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:0 0 12px;padding:2px}.cl-pages::-webkit-scrollbar{display:none}
.cl-ptab{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border:1px solid var(--line-2);border-radius:999px;background:#fff;font:600 15px/1 var(--body);color:var(--text);cursor:pointer}
.cl-ptab .cl-i{width:18px;height:18px;background:none;color:inherit}.cl-ptab .cl-i svg{width:18px;height:18px}.cl-ptab.on{background:var(--pen,#1E2BB0);border-color:var(--pen,#1E2BB0);color:#fff}.cl-padd{border-style:dashed;color:var(--pen,#1E2BB0)}
.cl-pdet{border:1px solid var(--line);border-radius:14px;padding:4px 14px;margin:0 0 12px;background:var(--paper-2)}.cl-pdet summary{min-height:44px;display:flex;align-items:center;font-weight:700;cursor:pointer}
.cl-pdet[open]>*:not(summary){margin-bottom:12px}.cl-pdel{color:#B42318}
.cl-ready{margin-bottom:6px}.cl-ready .cl-pick{border-style:solid;background:linear-gradient(135deg,#fff 0%,var(--paper-2) 100%)}
.cl-look{border-top:1px dashed var(--line-2);padding-top:6px;margin-top:4px}.cl-look summary{min-height:44px;display:flex;align-items:center;font-weight:700;cursor:pointer;color:var(--pen,#1E2BB0)}
.cl-lookgrid{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr));margin:6px 0 10px}.cl-lookgrid select{width:100%;min-height:48px;border:1px solid var(--line-2);border-radius:12px;padding:0 10px;font:inherit;background:#fff}
.cl-rows li{grid-template-columns:minmax(0,1fr)!important;display:grid;gap:10px}.cl-rows .cl-rm{justify-self:start}
.cl-mini{width:84px;height:84px;object-fit:cover;border-radius:12px}.cl-rphoto{display:grid;gap:8px}
.cl-ba{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))}.cl-ba .cl-thumb{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px}
.cl-seo{margin-top:16px}.cl-style{margin-top:8px}
.cl-acts2 .cl-dup .cl-i{width:20px;height:20px}
/* Short messages after an action ("Account created", "Message sent", "Saved"): assets/notice.js */
.cc-notice{position:fixed;left:50%;bottom:max(20px,env(safe-area-inset-bottom));transform:translateX(-50%);z-index:1000;display:flex;align-items:center;gap:12px;width:min(560px,calc(100vw - 32px));padding:14px 10px 14px 16px;border-radius:16px;background:#121852;color:#fff;box-shadow:0 18px 40px -12px rgba(10,12,40,.45);font:600 16px/1.4 var(--body);animation:ccn-in .18s ease-out}
.cc-notice[hidden]{display:none}.cc-notice-t{flex:1}
.cc-notice-i{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#22C55E}.cc-notice-i svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.cc-notice.is-err{background:#B42318}.cc-notice.is-err .cc-notice-i{background:#fff}.cc-notice.is-err .cc-notice-i svg{stroke:#B42318}.cc-notice.is-info .cc-notice-i{background:#3B82F6}
.cc-notice-x{flex:none;width:44px;height:44px;border:0;border-radius:12px;background:transparent;color:#fff;font-size:26px;line-height:1;cursor:pointer}.cc-notice-x:hover{background:rgba(255,255,255,.12)}
.cc-notice-x:focus-visible{outline:3px solid #FFE873;outline-offset:1px}
@keyframes ccn-in{from{opacity:0;transform:translate(-50%,12px)}to{opacity:1;transform:translate(-50%,0)}}
@media (prefers-reduced-motion:reduce){.cc-notice{animation:none}}
main:has(.cl-send) ~ .cc-notice,body:has(.cl-send) .cc-notice{bottom:max(96px,env(safe-area-inset-bottom))}
/* Request form: after sending, a clear confirmation takes the form's place */
form.request.is-done>*:not(.form-done){display:none!important}
.form-done{display:grid;justify-items:start;gap:10px;padding:8px 0}.form-done:focus{outline:none}
.form-done-i{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:#DCFCE7}.form-done-i svg{width:30px;height:30px;fill:none;stroke:#15803D;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.form-done h3{font:800 26px/1.2 var(--display);margin:4px 0 0;color:inherit}.form-done p{margin:0;color:inherit;opacity:.88;font-size:17px}
/* Demo editor (no account) */
.cl-demo{border-left-color:#FFB800;background:#FFF8DB}
.cl-demopick{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:0 0 16px}.cl-demopick .cl-ptab{text-decoration:none}
.cl-expics{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px}.cl-expic{padding:0;border:2px solid var(--line-2);border-radius:10px;overflow:hidden;background:none;cursor:pointer;min-height:44px}
.cl-expic img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}.cl-expic:hover,.cl-expic:focus-visible{border-color:var(--pen,#1E2BB0)}
.cl-keep{border-left-color:#16A34A;background:#ECFDF3}
.cl-ref{margin:28px 0 0;padding:22px;border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;display:grid;gap:10px}.cl-ref b{font-size:18px}.cl-ref p{margin:0}.cl-refrow{display:flex;flex-wrap:wrap;gap:10px}.cl-refrow input{flex:1 1 260px;min-width:0;min-height:48px}.cl-ref .cl-meta{color:var(--muted);font-size:14px}
.cl-langbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 10px}.cl-ltab{min-height:40px;padding:0 14px;border:1.5px solid var(--line-2);border-radius:10px;background:#fff;font:700 14px/1 var(--body);color:var(--text);cursor:pointer}.cl-ltab.on{border-color:var(--pen,#1E2BB0);color:var(--pen,#1E2BB0);background:#EEF0FF}
.cl-bill{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:12px 0 0;padding:14px;border-radius:14px;background:var(--paper-2,#F6F7FB)}.cl-bill .cl-meta{width:100%;margin:0}
.cl-plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;width:100%}.cl-plan{display:grid;gap:2px;text-align:left;padding:12px;border:2px solid var(--line);border-radius:12px;background:#fff;color:inherit;font:inherit;cursor:pointer;min-height:44px}.cl-plan.on{border-color:var(--accent,#FF5B1F);box-shadow:0 0 0 3px rgba(255,91,31,.15)}.cl-plan b{font-size:16px}.cl-plan-p{font-weight:600}.cl-plan small{color:var(--muted);font-size:12.5px;line-height:1.35}.cl-plan:focus-visible{outline:2px solid var(--accent,#FF5B1F);outline-offset:2px}
.cl-pill{display:inline-flex;align-items:center;min-height:32px;padding:6px 12px;line-height:1.3;border-radius:12px;background:#FEF3C7;color:#92400E;font-weight:700;font-size:14px;margin:0}.cl-pill.ok{background:#DCFCE7;color:#166534}
/* Editor polish: same fields as the sign-in form everywhere, room to breathe on phones */
.cl-basics[open]>*:not(summary){margin-top:16px}.cl-basics[open]>summary{margin-bottom:4px}
.cl-bbody .cl-field input,.cl-bbody .cl-field textarea,.cl-bbody .cl-field select,.bz-body .cl-field input,.bz-body .cl-field textarea,.bz-body .cl-field select,.cl-week input,.cl-items input,.bz-lines input,.bz-msg>input{width:100%;min-height:48px;padding:12px 14px;border:1px solid var(--line-2);border-radius:12px;font:400 16px/1.4 var(--body);background:#fff;color:var(--text);box-shadow:none}
.cl-week input[type=time]{padding:10px 8px;font-variant-numeric:tabular-nums;font-family:var(--body)}
.cl-week input[type=time]:disabled{background:var(--paper-2);color:var(--muted)}
input[type=checkbox],input[type=radio]{accent-color:var(--pen,#1E2BB0)}
.cl-pal .sw-ocean .chip{background:linear-gradient(135deg,#0b2540 50%,#1f6fb2 50%)}.cl-pal .sw-berry .chip{background:linear-gradient(135deg,#3a0f2a 50%,#a3226b 50%)}
.cl-pal .sw-sand .chip{background:linear-gradient(135deg,#3b2f22 50%,#c8a46a 50%)}.cl-pal .sw-night .chip{background:linear-gradient(135deg,#0f1226 50%,#7c8cff 50%)}.cl-pal .sw-ink .chip{background:linear-gradient(135deg,#111214 50%,#1E2BB0 50%)}
.cl-cover .btn,.cl-up .btn{min-height:48px}
@media (max-width:600px){
  .cl-form{padding:16px}.cl-group{border:0;padding:0;border-radius:0}.cl-group+.cl-group{border-top:1px solid var(--line);padding-top:20px}
  .cl-bbody{padding:4px 12px 16px}
  .cl-items li{grid-template-columns:minmax(0,1fr) auto;padding:12px}.cl-items li>.cl-rm{white-space:nowrap;min-height:48px}.cl-items li>.cl-field:nth-child(1),.cl-items li>.cl-field:nth-child(2){grid-column:1/-1;grid-row:auto}.cl-items li>.cl-field:nth-child(3){grid-column:1}.cl-items li>.cl-rm{grid-column:2;align-self:end}
  .cl-week tr{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center}
  .cl-pal{gap:8px}.cl-pal .sw{padding:4px 12px 4px 6px}
  .bz-tabs{margin-left:-16px;margin-right:-16px;padding-left:16px;padding-right:16px}
}

/* 404 page */
.nf{padding:64px 0 80px}.nf h2{margin-top:40px}.nf .btn{margin:4px 6px 4px 0}

/* Merchant links in the client-area bar (approved by Yoni 2026-11-01): keep labels on one line on phones */
.cl-bar nav a{white-space:nowrap}@media (max-width:480px){.cl-bar nav{gap:0}.cl-bar nav a{padding:0 6px;font-size:14px}.cl-bar .cl-tag{display:none}}

/* ---- client app shell (accounts_build.py): the customer back office, separate from the public site and from the Hub ---- */
/* Design tokens (redesign Gate 1). Every client-app rule reads these; the older --app-* and shared names are mapped onto them,
   so the editor and business tools pick up the same colours. Dark values are listed for Gate 3, when the editor moves onto tokens. */
.cl-appbody{
  --cc-bg:#F6F7FB;--cc-surface:#FFFFFF;--cc-surface-2:#ECEEF6;--cc-line:#E3E6F0;--cc-field:#7A819F;--cc-text:#11142B;--cc-muted:#4B5070;
  --cc-primary:#2A44D8;--cc-primary-2:#1E33B5;--cc-primary-soft:#EEF1FF;--cc-on-primary:#FFFFFF;--cc-focus:#3D5AFE;--cc-brand:#FF5B1F;--cc-brand-text:#C2410C;
  --cc-ok:#0B7F6E;--cc-ok-bg:#E6F6F2;--cc-warn:#8A5A00;--cc-warn-bg:#FFF6DE;--cc-bad:#B42318;--cc-bad-bg:#FEF3F2;
  --cc-s1:4px;--cc-s2:8px;--cc-s3:12px;--cc-s4:16px;--cc-s5:24px;--cc-s6:32px;--cc-s7:48px;--cc-s8:72px;
  --cc-r-sm:8px;--cc-r:12px;--cc-r-lg:20px;--cc-r-full:999px;
  --cc-shadow-1:0 1px 2px rgba(17,20,43,.06);--cc-shadow-2:0 8px 32px rgba(17,20,43,.16);
  --cc-fast:120ms;--cc-base:200ms;--cc-ease:cubic-bezier(.2,.8,.2,1);
  --cc-z-bar:10;--cc-z-panel:20;--cc-z-sheet:30;--cc-z-menu:40;--cc-z-toast:50;--cc-z-modal:60;
  --cc-topbar:60px;--cc-tabbar:64px;--cc-rail:240px;
  /* dark set, not switched on yet: bg #0E1022, surface #171A33, surface-2 #20244A, line #2E3360, field #6B72A3, text #F6F7FB, muted #B4B8D6, primary #8EA0FF / on #0E1022 */
  --app-bg:var(--cc-bg);--app-card:var(--cc-surface);--app-line:var(--cc-line);--app-ink:var(--cc-text);--app-mute:var(--cc-muted);--app-pen:var(--cc-primary);--app-pen-soft:var(--cc-primary-soft);--app-r:16px;
  --pen:var(--cc-primary);--pen-2:var(--cc-primary-2);--paper:var(--cc-bg);--paper-2:var(--cc-surface-2);--card:var(--cc-surface);--line:var(--cc-line);--text:var(--cc-text);--muted:var(--cc-muted);
  background:var(--cc-bg);color:var(--cc-text);min-height:100vh;display:flex;flex-direction:column}
.cl-bar{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.94);backdrop-filter:saturate(1.4) blur(8px);border-bottom:1px solid var(--app-line)}
.cl-bar-in{max-width:960px;margin:0 auto;padding:0 16px;min-height:60px;display:flex;align-items:center;gap:12px}
.cl-brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--app-ink);font-weight:700;min-height:44px}.cl-brand svg{width:28px;height:28px}
.cl-tag{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:999px;background:var(--app-pen-soft);color:var(--app-pen);font-size:13px;font-weight:700}
.cl-bar nav{margin-left:auto;display:flex;align-items:center;gap:4px}.cl-bar nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 10px;border-radius:10px;color:var(--app-mute);font-weight:600;text-decoration:none;font-size:15px}
.cl-bar nav a:hover{background:var(--app-pen-soft);color:var(--app-pen)}
.cl-appbody .cl-main{flex:1;width:100%;max-width:960px;margin:0 auto;padding:20px 16px 40px}
.cl-appbody .cl{padding:0;max-width:none}
.cl-title:focus{outline:none}
.cl-appbody h1.cl-title{font-size:26px;line-height:1.15;margin:4px 0 4px}.cl-appbody .cl .lead{font-size:15px;color:var(--app-mute);margin:0 0 16px}
.cl-appbody .cl-who{font-size:14px;margin:0 0 16px;padding:10px 14px;background:var(--app-card);border:1px solid var(--app-line);border-radius:12px}
.cl-appbody .cl-who .btn{min-height:40px;padding:0 14px;font-size:14px}
.cl-appbody .cl-sites{gap:12px}
.cl-appbody .cl-site{border:1px solid var(--app-line);border-top:1px solid var(--app-line);border-radius:var(--app-r);padding:18px;box-shadow:0 1px 2px rgba(21,24,39,.04);background:var(--app-card)}
.cl-appbody .cl-site h2{font-size:20px;margin:0}
.cl-appbody .cl-acts{gap:8px}.cl-appbody .cl-acts .btn{min-height:44px;padding:0 16px;font-size:15px}
.cl-appbody .cl-ref,.cl-appbody .cl-alert,.cl-appbody .cl-form{border-radius:var(--app-r);border-color:var(--app-line);box-shadow:none}
.cl-appbody .cl-form{padding:18px;gap:14px}
/* editor: a light list of sections. On phones a closed section is one clean line (icon, name, summary);
   its move / duplicate / delete buttons appear when it is opened, so the list stays readable */
.cl-appbody .cl-block{border-width:1px;border-color:var(--app-line);border-radius:12px;background:var(--app-card)}
.cl-appbody .cl-block.is-open{border-color:var(--app-pen);box-shadow:0 0 0 3px var(--app-pen-soft)}
.cl-appbody .cl-btxt b,.cl-appbody .cl-bsum{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cl-appbody .cl-bt{min-height:52px}
@media (max-width:600px){
  .cl-appbody .cl-block:not(.is-open) .cl-acts2{display:none}
  .cl-appbody .cl-block.is-open .cl-bhead{flex-wrap:wrap;justify-content:flex-end}
  .cl-appbody .cl-block.is-open .cl-bhead>.cl-bt{flex-basis:calc(100% - 40px)}
}
/* business tools: flatter numbers */
.cl-appbody .bz-kpi{border:1px solid var(--app-line);border-radius:14px;padding:12px 14px;box-shadow:none}.cl-appbody .bz-kpis{gap:8px;grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
.cl-foot{border-top:1px solid var(--app-line);background:var(--app-card);font-size:14px;color:var(--app-mute)}
.cl-foot-in{max-width:960px;margin:0 auto;padding:14px 16px;display:flex;flex-wrap:wrap;gap:4px 14px;align-items:center}.cl-foot a{color:var(--app-mute);min-height:36px;display:inline-flex;align-items:center}
@media (min-width:900px){.cl-appbody .cl-main{padding-top:32px}.cl-appbody h1.cl-title{font-size:32px}}
/* App navigation: five areas. Phone and tablet: a bar at the bottom. Computer (1024 px+): a rail on the left. */
.cl-nav{position:fixed;left:0;right:0;bottom:0;z-index:var(--cc-z-bar);background:var(--cc-surface);border-top:1px solid var(--cc-line);padding:0 4px env(safe-area-inset-bottom)}
.cl-nav ul{list-style:none;margin:0 auto;padding:0;display:grid;grid-template-columns:repeat(5,1fr);max-width:720px}
.cl-nav a{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:var(--cc-tabbar);padding:6px 2px;color:var(--cc-muted);text-decoration:none;font-size:12px;line-height:16px;font-weight:600;border-radius:var(--cc-r)}
.cl-nav svg{width:24px;height:24px;flex:none}
.cl-nav a:hover{color:var(--cc-text)}
.cl-nav a[aria-current=page]{color:var(--cc-primary)}
.cl-nav a[aria-current=page]::before{content:"";position:absolute;top:0;left:30%;right:30%;height:3px;border-radius:0 0 3px 3px;background:var(--cc-primary)}
.cl-nav a:focus-visible{outline:3px solid var(--cc-focus);outline-offset:-3px}
.cl-nav .cl-nb{position:absolute;top:6px;left:calc(50% + 6px);min-width:18px;height:18px;padding:0 5px;border-radius:var(--cc-r-full);background:var(--cc-bad);color:#fff;font-size:11px;line-height:18px;text-align:center}
.cl-appbody.cl-nav-on{padding-bottom:calc(var(--cc-tabbar) + env(safe-area-inset-bottom))}
.cl-appbody:not(.cl-nav-on) .cl-nav{display:none}
/* while editing on a phone, the editor's own bottom bar (save, send) takes that place */
@media (max-width:1023px){.cl-appbody.cl-editing .cl-nav{display:none}.cl-appbody.cl-editing.cl-nav-on{padding-bottom:0}}
@media (min-width:1024px){
  .cl-nav{top:var(--cc-topbar);right:auto;width:var(--cc-rail);border-top:0;border-right:1px solid var(--cc-line);padding:16px 12px}
  .cl-nav ul{grid-template-columns:1fr;gap:4px;max-width:none}
  .cl-nav a{flex-direction:row;justify-content:flex-start;gap:12px;min-height:48px;padding:0 12px;font-size:15px}
  .cl-nav a[aria-current=page]{background:var(--cc-primary-soft)}
  .cl-nav a[aria-current=page]::before{top:12px;bottom:12px;left:0;right:auto;width:3px;height:auto;border-radius:0 3px 3px 0}
  .cl-nav .cl-nb{position:static;margin-left:auto}
  .cl-appbody.cl-nav-on{padding-bottom:0}
  .cl-appbody.cl-nav-on .cl-bar-in{max-width:none;padding:0 24px}
  .cl-appbody.cl-nav-on .cl-main,.cl-appbody.cl-nav-on .cl-foot{margin-left:var(--cc-rail);width:calc(100% - var(--cc-rail))}
  .cl-appbody.cl-nav-on .cl-main{max-width:960px;padding-left:32px;padding-right:32px}
  /* editing on a computer: the rail folds to icons so the editor and its preview get the room */
  .cl-appbody.cl-editing .cl-nav{width:72px;padding:16px 8px}
  .cl-appbody.cl-editing .cl-nav a{justify-content:center;padding:0}
  .cl-appbody.cl-editing .cl-nav a span:not(.cl-nb){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .cl-appbody.cl-editing .cl-nav .cl-nb{position:absolute;top:4px;right:4px}
  .cl-appbody.cl-editing.cl-nav-on .cl-main,.cl-appbody.cl-editing.cl-nav-on .cl-foot{margin-left:72px;width:calc(100% - 72px)}
  .cl-appbody.cl-editing.cl-nav-on .cl-main{max-width:1280px}
}
/* business tools tabs: bleed only as far as the page padding (no sideways scroll) */
.cl-appbody .bz-tabs{margin-left:-16px;margin-right:-16px;padding:4px 16px}
@media (min-width:1024px){.cl-appbody .bz-tabs{margin-left:-32px;margin-right:-32px;padding:4px 32px}}
/* Home */
.cl-home-hd{margin:4px 0 20px}.cl-home-hd h1{font-size:28px;line-height:1.15;margin:0}.cl-home-hd p{margin:4px 0 0;color:var(--cc-muted);font-size:15px}
.cl-sec{margin:0 0 28px}.cl-sec>h2,.cl-sec>h3{font-size:18px;line-height:24px;font-weight:700;max-width:none;margin:0 0 12px;display:flex;align-items:center;gap:8px}
.cl-sec>h2 a,.cl-sec>h3 a{margin-left:auto;font-size:14px;font-weight:600;color:var(--cc-primary)}
.cl-todo{list-style:none;margin:0;padding:0;background:var(--cc-surface);border:1px solid var(--cc-line);border-radius:var(--cc-r-lg);overflow:hidden}
.cl-todo li+li{border-top:1px solid var(--cc-line)}
.cl-todo a,.cl-todo .cl-todo-x{display:flex;align-items:center;gap:12px;min-height:56px;padding:10px 16px;color:var(--cc-text);text-decoration:none}
.cl-todo a:hover{background:var(--cc-surface-2)}
.cl-todo a::after{content:"\203A";margin-left:auto;color:var(--cc-muted);font-size:22px;line-height:1}
.cl-todo i{flex:none;width:10px;height:10px;border-radius:50%;background:var(--cc-primary)}.cl-todo i.w{background:var(--cc-warn)}.cl-todo i.ok{background:var(--cc-ok)}
.cl-todo span{min-width:0}.cl-todo small{display:block;color:var(--cc-muted);font-size:14px;line-height:20px}
.cl-nums{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.cl-num{background:var(--cc-surface);border:1px solid var(--cc-line);border-radius:var(--cc-r);padding:12px 14px}
.cl-num b{display:block;font-size:26px;line-height:32px;font-weight:800}.cl-num span{display:block;font-size:14px;line-height:20px;color:var(--cc-text)}
.cl-num small{display:block;font-size:12px;line-height:16px;color:var(--cc-muted)}.cl-num small.up{color:var(--cc-ok)}
.cl-appts{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.cl-appts li{display:block;background:var(--cc-surface);border:1px solid var(--cc-line);border-radius:var(--cc-r);padding:12px 14px}
.cl-appts time{display:block;font-size:14px;font-weight:700;color:var(--cc-primary)}.cl-appts small{display:block;color:var(--cc-muted);font-size:14px}
/* Home: "Set up your site" checklist */
.cl-setup-hd{display:flex;align-items:baseline;gap:8px;margin:0 0 8px}.cl-setup-hd h2{font-size:18px;line-height:24px;font-weight:700;margin:0}.cl-setup-hd span{margin-left:auto;font-size:14px;color:var(--cc-muted)}
.cl-setup-bar{height:8px;border-radius:4px;background:var(--cc-surface-2);border:1px solid var(--cc-line);overflow:hidden;margin:0 0 12px}.cl-setup-bar span{display:block;height:100%;background:var(--cc-ok);transition:width .3s}
.cl-setup-ls i{background:none;border:2px solid var(--cc-primary);width:14px;height:14px}.cl-setup-ls i.ok{border:0;background:var(--cc-ok)}
.cl-setup-ls li.is-done .cl-todo-x{min-height:44px;color:var(--cc-muted)}
.cl-appbody .cl-pick{border:0;background:none;padding:0;display:flex;align-items:center;gap:8px;margin:0 0 20px;font-size:14px;color:var(--cc-muted)}.cl-pick select{width:auto;min-height:44px;flex:1;max-width:320px}
/* Account and Bons plans: grouped rows */
.cl-rows{margin:0 0 28px;background:var(--cc-surface);border:1px solid var(--cc-line);border-radius:var(--cc-r-lg);padding:4px 16px}
.cl-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;min-height:56px;padding:10px 0}.cl-row+.cl-row{border-top:1px solid var(--cc-line)}
.cl-row>div{flex:1 1 200px;min-width:0}.cl-row b{display:block}.cl-row small{display:block;color:var(--cc-muted);font-size:14px;line-height:20px}
.cl-row .btn{min-height:44px;padding:0 16px;font-size:15px}
@media (max-width:420px){.cl-nums{grid-template-columns:repeat(2,minmax(0,1fr))}.cl-num:last-child{grid-column:1/-1}}
/* Gate 3, canvas editor. Phones (JS adds .cv below 1024px): the site fills the screen, a toolbar at the bottom, the form shown in parts in a bottom sheet */
.cl-tabs.is-off,.cl-shd,.cl-cvtop,.cl-cvbar{display:none}
.cl-ed.cv{display:block}
.cl-ed.cv .cl-pv{display:block;position:relative;top:auto;border-radius:var(--cc-r,12px)}
.cl-ed.cv .cl-pvbar,.cl-ed.cv .cl-pvnote{display:none}
.cl-ed.cv .cl-pv iframe{height:calc(100dvh - 200px);min-height:420px}
.cl-cvtop{align-items:center;gap:4px;margin:0 0 8px;scroll-margin-top:72px}
.cl-ed.cv .cl-cvtop{display:flex}
.cl-cvtip{display:none}.cl-ed.cv .cl-cvtip{display:flex;align-items:center;gap:8px;margin:0 0 8px;padding:6px 6px 6px 14px;border-radius:12px;background:var(--cc-primary-soft,#E8EBFF);color:var(--cc-text,#151827);font-size:15px;line-height:20px}.cl-cvtip span{flex:1}.cl-cvtip .cl-ib{min-width:44px;min-height:44px}
.cl-cvst{flex:1;min-width:0;padding:0 6px;font-size:14px;line-height:20px;color:var(--cc-muted,#4B5070);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cl-cvst.is-saved{color:var(--cc-ok,#157A43)}
.cl-cvgo{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 16px;font-size:15px}.cl-cvgo .cl-i svg{width:18px;height:18px}
.cl-ed.cv .cl-cvbar{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));position:sticky;bottom:0;z-index:31;margin:8px 0 0;padding:4px 4px env(safe-area-inset-bottom);background:var(--cc-surface,#fff);border:1px solid var(--cc-line,#E3E6F0);border-radius:var(--cc-r,12px) var(--cc-r,12px) 0 0}
.cl-appbody .cl-ed.cv{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
.cl-appbody .cl-ed.cv .cl-cvbar{position:fixed;left:0;right:0;margin:0;border-width:1px 0 0;border-radius:0}
.cl-cvbar button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:56px;border:0;border-radius:10px;background:none;color:var(--cc-muted,#4B5070);font:inherit;font-size:12px;font-weight:600;cursor:pointer}
.cl-cvbar button .cl-i svg{width:22px;height:22px}
.cl-cvbar button[aria-pressed=true]{color:var(--cc-primary,#2A44D8);background:var(--cc-primary-soft,#EEF1FF)}
.cl-cvbar button:focus-visible,.cl-shg:focus-visible{outline:3px solid var(--cc-focus,#3D5AFE);outline-offset:-3px}
.cl-ed.cv .cl-side{display:none}
.cl-ed.cv.sh .cl-side{display:grid;position:fixed;left:0;right:0;bottom:calc(64px + env(safe-area-inset-bottom));z-index:30;max-height:52dvh;overflow:auto;overscroll-behavior:contain;margin:0;padding:0 16px 20px;gap:14px;border:0;border-radius:var(--cc-r-lg,20px) var(--cc-r-lg,20px) 0 0;background:var(--cc-surface,#fff);box-shadow:0 -8px 32px rgba(17,20,43,.18)}
.cl-ed.cv.sh.tall .cl-side{max-height:calc(100dvh - 140px)}
.cl-ed.cv .cl-shd{display:flex;align-items:center;gap:8px;position:sticky;top:0;z-index:2;margin:0 -16px;padding:14px 8px 8px 16px;background:var(--cc-surface,#fff);border-bottom:1px solid var(--cc-line,#E3E6F0)}
.cl-shg{position:absolute;top:0;left:50%;width:64px;height:16px;margin-left:-32px;border:0;background:none;cursor:pointer;padding:0}.cl-shg::before{content:"";display:block;width:40px;height:4px;margin:6px auto 0;border-radius:2px;background:var(--cc-line,#C9CDDD)}
.cl-sht{flex:1;min-width:0;margin:0;font-size:18px;line-height:24px}.cl-sht:focus{outline:none}
.cl-ed.cv .cl-shd{flex-wrap:wrap}.cl-shhint{display:none;flex-basis:100%;margin:0;font-size:13px;line-height:18px;color:var(--cc-muted,#4B5070)}.cl-ed.cv[data-v=block] .cl-shhint{display:block}
.cl-ed.cv[data-v=design] .cl-side>:not(.cl-shd,.cl-basics),
.cl-ed.cv[data-v=info] .cl-side>:not(.cl-shd,.cl-basics,.cv-i),
.cl-ed.cv[data-v=send] .cl-side>:not(.cl-shd,.cv-s),
.cl-ed.cv:is([data-v=add],[data-v=sec],[data-v=pages],[data-v=block]) .cl-side>:not(.cl-shd,.cl-page){display:none}
.cl-ed.cv .cl-basics>summary,.cl-ed.cv .cl-page>.cl-pg-h,.cl-ed.cv .cl-page>.cl-help{display:none}
.cl-ed.cv[data-v=design] .cl-basics>:not(summary,.cv-d),
.cl-ed.cv[data-v=info] .cl-basics>:not(summary,.cv-i),
.cl-ed.cv[data-v=add] .cl-page>:not(.cl-picker),
.cl-ed.cv[data-v=sec] .cl-page>:not(.cv-sec),
.cl-ed.cv[data-v=pages] .cl-page>:not(.cv-pg),
.cl-ed.cv[data-v=block] .cl-page>:not(.cl-blocks),
.cl-ed.cv[data-v=block] .cl-blocks>:not(.is-open){display:none}
.cl-ed.cv .cl-side>.cl-basics,.cl-ed.cv .cl-side>.cl-page{border:0;padding:0;margin:0}
.cl-ed.cv .cl-picker{border:0;padding:0;background:none}
.cl-ed.cv .cl-send{position:static;margin:0;padding:12px 0 0;border-radius:0}
.cl-ed.cv ~ .cl-toast-wrap{bottom:calc(76px + env(safe-area-inset-bottom));z-index:32}
/* Computer: preview width switch */
.cl-dev{display:inline-flex;gap:2px;margin-left:auto;margin-right:10px;background:var(--cc-surface-2,#ECEEF6);border-radius:999px;padding:3px}
.cl-dev button{min-height:32px;padding:0 12px;border:0;border-radius:999px;background:none;font:inherit;font-size:13px;font-weight:600;color:var(--cc-muted,#4B5070);cursor:pointer}
.cl-dev button[aria-pressed=true]{background:var(--cc-surface,#fff);color:var(--cc-text,#11142B);box-shadow:0 1px 3px rgba(17,20,43,.16)}
.cl-dev button:focus-visible{outline:3px solid var(--cc-focus,#3D5AFE);outline-offset:1px}
@media (min-width:1024px){
  .cl-ed[data-dev=phone] .cl-pv iframe{max-width:390px;margin:0 auto;border-left:1px solid var(--cc-line,#E3E6F0);border-right:1px solid var(--cc-line,#E3E6F0)}
  .cl-ed[data-dev=tablet] .cl-pv iframe{max-width:768px;margin:0 auto}
  .cl-ed[data-dev=phone] .cl-pv{background:var(--cc-surface-2,#ECEEF6)}
  .cl-ed[data-dev=phone]{grid-template-columns:minmax(0,1fr) 424px}
  .cl-ed[data-dev=tablet],.cl-ed[data-dev=desk]{grid-template-columns:minmax(320px,400px) minmax(0,1fr)}
}
@media (max-width:1023px){.cl-dev{display:none}}
/* First-use walkthrough, section thumbnails, keep-or-undo after adding */
.cl-tour{display:none}.cl-ed.cv .cl-tour{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 0 8px;padding:12px 12px 12px 16px;border-radius:14px;background:var(--cc-primary-soft,#E8EBFF);color:var(--cc-text,#151827)}
.cl-tour-b{flex:1 1 260px;min-width:0}.cl-tour-b small{display:block;font-size:13px;font-weight:700;color:var(--cc-primary,#2A44D8)}.cl-tour-t{margin:2px 0 0;font-size:15px;line-height:21px}
.cl-tour-a{display:flex;gap:8px;margin-left:auto}.cl-tour-a .btn{min-height:44px;padding:0 16px;font-size:15px}
.cl-ed.cv .is-tour{outline:3px solid var(--cc-primary,#2A44D8);outline-offset:3px;border-radius:12px;position:relative;z-index:6}
@media (prefers-reduced-motion:no-preference){.cl-ed.cv .is-tour{animation:cl-tour 1.6s ease-in-out 2}}
@keyframes cl-tour{50%{outline-offset:7px}}
.cl-thumb{flex:0 0 auto;display:grid;place-items:center;width:64px;height:44px;border-radius:8px;background:var(--cc-surface-2,#ECEEF6);color:var(--cc-primary,#2A44D8)}.cl-thumb svg{width:64px;height:44px}
.cl-trial{flex-basis:100%;display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:6px 0 0;padding:8px 10px;border-radius:12px;background:var(--cc-ok-soft,#E7F6EE);font-size:14px;line-height:20px}
.cl-trial span{flex:1 1 180px}.cl-trial .btn{min-height:40px;padding:0 14px;font-size:14px}
/* Canvas on computers too (.cvd): tools on a rail at the left, the site in the middle, the sheet docked on the right */
@media (min-width:1024px){
  .cl-ed.cv.cvd,.cl-ed.cv.cvd[data-dev]{display:grid;grid-template-columns:76px minmax(0,1fr);gap:12px 16px;align-items:start}
  .cl-ed.cv.cvd.sh,.cl-ed.cv.cvd.sh[data-dev]{grid-template-columns:76px minmax(0,1fr) minmax(340px,400px)}
  .cl-ed.cv.cvd>.cl-cvtop,.cl-ed.cv.cvd>.cl-cvtip,.cl-ed.cv.cvd>.cl-tour{grid-column:1/-1;grid-row:auto}
  .cl-ed.cv.cvd>.cl-cvtop{margin:0;padding:6px 8px;background:var(--cc-surface,#fff);border:1px solid var(--cc-line,#E3E6F0);border-radius:14px;position:sticky;top:72px;z-index:5}
  .cl-ed.cv.cvd .cl-dev{margin:0 8px 0 auto}
  .cl-ed.cv.cvd .cl-cvst{flex:0 1 auto}
  .cl-ed.cv.cvd>.cl-cvbar,.cl-appbody .cl-ed.cv.cvd>.cl-cvbar{grid-column:1;grid-row:span 1;order:0;display:flex;flex-direction:column;gap:4px;position:sticky;top:136px;left:auto;right:auto;bottom:auto;margin:0;padding:6px;border:1px solid var(--cc-line,#E3E6F0);border-radius:14px;box-shadow:none}
  .cl-ed.cv.cvd .cl-cvbar button{min-height:60px}
  .cl-ed.cv.cvd>.cl-pv{grid-column:2;min-width:0}
  .cl-ed.cv.cvd .cl-pv iframe{height:calc(100dvh - 170px);min-height:520px}
  .cl-ed.cv.cvd.sh>.cl-side{grid-column:3;grid-row:2;position:sticky;top:136px;left:auto;right:auto;bottom:auto;z-index:4;max-height:calc(100dvh - 160px);border:1px solid var(--cc-line,#E3E6F0);border-radius:14px;box-shadow:0 8px 28px rgba(17,20,43,.10)}
  .cl-ed.cv.cvd.sh.tall>.cl-side{max-height:calc(100dvh - 160px)}
  .cl-ed.cv.cvd .cl-shg{display:none}
  .cl-ed.cv.cvd>.cl-cvbar{grid-row:2}.cl-ed.cv.cvd>.cl-pv{grid-row:2}
  .cl-ed.cv.cvd:has(>.cl-cvtip,>.cl-tour)>.cl-cvbar,.cl-ed.cv.cvd:has(>.cl-cvtip,>.cl-tour)>.cl-pv,.cl-ed.cv.cvd.sh:has(>.cl-cvtip,>.cl-tour)>.cl-side{grid-row:3}
  .cl-appbody .cl-ed.cv.cvd{padding-bottom:0}
  .cl-ed.cv.cvd ~ .cl-toast-wrap{bottom:24px}
}
/* Gate 3b: photo library, page templates */
.cl-lib{margin-top:8px}.cl-lib>summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-weight:600;color:var(--cc-primary,#2A44D8)}.cl-lib .cl-expics{margin-top:8px}
.cl-ptpl{background:var(--paper);border:2px dashed var(--line-2);border-radius:14px;padding:14px;display:grid;gap:12px}.cl-ptpl[hidden]{display:none!important}
.cl-ed.cv .cl-ptpl{border:0;padding:0;background:none}
.cl-ed.cv[data-v=sec] .cl-grip{display:grid;width:36px;touch-action:none;cursor:grab}
@media (min-width:1024px) and (max-width:1279px){.cl-ed .cl-grip,.cl-ed .cl-bedit{display:none}.cl-ed .cl-bhead{gap:2px}}
/* Gate 4: Affaires as a list of tools, inbox filters, the offer inside Bons plans */
.bz-hub{list-style:none;margin:0 0 24px;padding:0;background:var(--cc-surface);border:1px solid var(--cc-line);border-radius:var(--cc-r-lg);overflow:hidden}
.bz-hub li+li{border-top:1px solid var(--cc-line)}
.bz-hub a{display:flex;align-items:center;gap:14px;min-height:64px;padding:10px 16px;color:var(--cc-text);text-decoration:none}
.bz-hub a:hover{background:var(--cc-surface-2)}.bz-hub a:focus-visible{outline:3px solid var(--cc-focus);outline-offset:-3px}
.bz-hub a::after{content:"\203A";margin-left:4px;color:var(--cc-muted);font-size:22px;line-height:1}
.bz-hub .bz-i{position:static;flex:none;display:grid;place-items:center;width:40px;height:40px;padding:9px;border-radius:12px;background:var(--cc-primary-soft);color:var(--cc-primary)}
.bz-hub a>span:nth-child(2){flex:1;min-width:0;display:grid}.bz-hub b{font-size:16px;line-height:22px}.bz-hub small{color:var(--cc-muted);font-size:14px;line-height:20px}
.bz-hub li.is-hot .bz-i{background:var(--cc-bad-bg);color:var(--cc-bad)}.bz-hub .cl-badge-n{margin:0}
@media (max-width:1023px){.cl-appbody .bz-tabs{display:none}}
@media (min-width:1024px){.cl-appbody .bz-tabs{flex-wrap:wrap;overflow:visible}}
.bz-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.bz-chips button{min-height:40px;padding:0 14px;border:1px solid var(--cc-line);border-radius:var(--cc-r-full);background:var(--cc-surface);font:inherit;font-size:14px;font-weight:600;color:var(--cc-text);cursor:pointer}
.bz-chips button[aria-pressed=true]{background:var(--cc-primary);border-color:var(--cc-primary);color:var(--cc-on-primary)}
.bz-chips .bz-n{opacity:.8;font-variant-numeric:tabular-nums}.bz-chips button:focus-visible{outline:3px solid var(--cc-focus);outline-offset:2px}
.cl-offer{padding:16px}.cl-offer .bz-promo h2{margin:0 0 6px;font-size:18px;line-height:24px}.cl-offer .cl-form{border:0;padding:0;margin-top:12px;box-shadow:none}.cl-offer .cl-help{margin:0 0 4px}
/* ---- end client app shell ---- */