/* Homepage sections that sit between the scroll scenes from launch.css: proof, the two editors,
   the tool grid, hosting, the build-to-grow workflow, reviews, audiences and the template gallery.
   Built on the site.css section kit (.d-in .d-sec .band .d-head .d-h2 .d-lead .d-btn).
   Named sections.css, not home.css: the codedesign.ai zone redirects every path starting with /home to /. */

/* Hero: the product label above the headline */

.h-ic{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:11px;background:var(--tint);color:var(--brand-ink)}
.h-ic i{width:21px;height:21px}
.d-btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-3)}
.d-btn.ghost:hover{box-shadow:inset 0 0 0 1px var(--ink)}
.d-btn i{width:17px;height:17px;transition:transform .3s var(--spring)}
.d-btn:hover i{transform:translateX(2px)}
.h-ctas{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin:clamp(28px,3.5vw,40px) 0 0}
.h-link{color:var(--ink);text-decoration:underline;text-decoration-color:var(--line-3);text-underline-offset:3px;transition:text-decoration-color .2s}
.h-link:hover{text-decoration-color:currentColor}
.h-checks{display:grid;gap:10px;margin:22px 0 0;padding:0;list-style:none}
.h-checks li{display:flex;gap:10px;font-size:15px;line-height:1.5;color:var(--ink-2)}
.h-checks i{flex:none;width:18px;height:18px;margin-top:2px;color:var(--ok)}

/* ---------- Proof: numbers, promises and a customer ---------- */
.h-proof .d-split{align-items:center}
.h-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:0;padding:0;list-style:none}
.h-stats b{display:block;font:600 calc(clamp(34px,3.6vw,50px) * min(var(--u),1.15))/1 var(--display);letter-spacing:-.045em;color:var(--ink)}
.h-stats span{display:block;margin-top:10px;font-size:14px;line-height:1.45;color:var(--muted)}
.h-stats a{color:var(--ink-2);text-decoration:underline;text-decoration-color:var(--line-3);text-underline-offset:3px}
.h-promise{display:flex;flex-wrap:wrap;gap:10px 22px;margin:30px 0 0;padding:0;list-style:none;font-size:14px;color:var(--ink-2)}
.h-promise li{display:inline-flex;align-items:center;gap:7px}
.h-promise i{width:16px;height:16px;color:var(--ok)}
.h-promise a{text-decoration:underline;text-decoration-color:var(--line-3);text-underline-offset:3px;transition:text-decoration-color .2s}
.h-promise a:hover{text-decoration-color:currentColor}
.h-quote{margin:0;padding:clamp(26px,3.2vw,40px);border-radius:22px;background:var(--bg);box-shadow:inset 0 0 0 1px var(--line)}
.h-quote picture{display:block}
.h-quote .logo{display:block;width:auto;height:26px}
.h-quote .logo-dark,[data-theme="dark"] .h-quote .logo-light{display:none}[data-theme="dark"] .h-quote .logo-dark{display:block}
.h-quote blockquote{margin:20px 0 0}
.h-quote blockquote p{margin:0;font:500 calc(clamp(19px,1.8vw,24px) * min(var(--u),1.1))/1.45 var(--sans);letter-spacing:-.015em;color:var(--ink);text-wrap:pretty}
.h-quote figcaption{display:flex;align-items:center;gap:12px;margin-top:22px}
.h-quote figcaption img{width:44px;height:44px;border-radius:50%;object-fit:cover;object-position:50% 0}
.h-quote figcaption b{display:block;font:500 15px/1.35 var(--sans);color:var(--ink)}
.h-quote figcaption a{font-size:14px;color:var(--muted);transition:color .2s}
.h-quote figcaption a:hover{color:var(--ink)}

/* ---------- Two ways to edit ---------- */
.h-eds{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:0;padding:0;list-style:none}
.h-ed{display:flex;flex-direction:column;height:100%;border-radius:22px;background:var(--paper);box-shadow:var(--lift);overflow:hidden;color:var(--ink);transition:transform .35s var(--spring),box-shadow .35s}
.h-ed:hover{transform:translateY(-4px);box-shadow:inset 0 0 0 1px var(--line-3),var(--lift)}
.h-ed-art{position:relative;display:block;height:clamp(240px,25vw,320px);overflow:hidden;container-type:inline-size}
.h-ed-body{padding:24px 26px 28px}
.h-ed-tag{display:inline-flex;align-items:center;gap:8px;font:500 13.5px/1 var(--sans);color:var(--brand-ink)}
.h-ed-tag img{width:16px;height:16px}
.h-ed h3{margin:12px 0 0;font:600 21px/1.25 var(--display);letter-spacing:-.02em;color:var(--ink)}
.h-ed p{margin:8px 0 0;font-size:15px;line-height:1.55;color:var(--muted)}

/* ---------- Tool grid ---------- */
.h-tools{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0;padding:0;list-style:none}
.h-tools a{position:relative;display:flex;flex-direction:column;gap:10px;height:100%;padding:24px;border-radius:18px;background:var(--paper);box-shadow:var(--lift);color:var(--ink);transition:transform .3s var(--spring),box-shadow .3s}
.h-tools a:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 1px var(--line-3),var(--lift)}
.h-tools h3{margin:6px 0 0;font:600 18px/1.3 var(--display);letter-spacing:-.02em;color:var(--ink)}
.h-tools p{margin:0;font-size:14.5px;line-height:1.55;color:var(--muted)}
.h-tools .go{position:absolute;top:24px;right:22px;width:18px;height:18px;color:var(--faint);transition:color .2s,transform .3s var(--spring)}
.h-tools a:hover .go{color:var(--brand-ink);transform:translate(2px,-2px)}

/* ---------- Hosting: one walk-through from domain to live site ----------
   Steps on the left (the active one opens with its description and a progress bar); on the right
   a sample site gets its domain, an extension, a certificate and goes live. walkthrough.js plays it when
   it's on screen, pauses on hover or focus, and any step can be picked. The domain search is real. */
.hx{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(16px,2.4vw,32px);padding:clamp(10px,1.2vw,14px);border-radius:28px;background:var(--paper);box-shadow:var(--lift)}
.hx-side{display:flex;flex-direction:column;justify-content:center;padding:clamp(8px,1.6vw,20px) 0 clamp(8px,1.6vw,20px) clamp(4px,1vw,10px)}
.hx-steps{display:grid;gap:4px;margin:0;padding:0;list-style:none}
.hx-step{position:relative;padding:16px 18px 18px;border-radius:16px;transition:background .35s var(--ease)}
.hx-step:hover{background:color-mix(in srgb,var(--bg) 55%,transparent)}
.hx-step.on{background:var(--bg)}
.hx-step h3{margin:0;font:600 clamp(16.5px,1.35vw,19px)/1.3 var(--display);letter-spacing:-.02em}
.hx-tab{display:flex;align-items:center;gap:14px;width:100%;padding:0;border:0;background:none;font:inherit;letter-spacing:inherit;text-align:left;color:var(--muted);cursor:pointer;transition:color .3s}
.hx-tab::after{content:"";position:absolute;inset:0;border-radius:inherit}
.hx-tab:focus-visible{outline:none}
.hx-step:has(.hx-tab:focus-visible){box-shadow:0 0 0 2px var(--brand)}
.hx-step.on .hx-tab,.hx-step:hover .hx-tab{color:var(--ink)}
.hx-ic{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:10px;background:var(--fill);color:var(--muted);transition:background .3s,color .3s}
.hx-ic i,.hx-ic .hi{width:19px;height:19px}
.hx-step.on .hx-ic{background:var(--tint);color:var(--brand-ink)}
.hx-more{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease)}
.hx-step.on .hx-more{grid-template-rows:1fr}
.hx-more p{min-height:0;margin:0;padding-left:50px;overflow:hidden;font-size:15px;line-height:1.55;color:var(--muted)}
.hx-step.on .hx-more p{padding-top:6px}
.hx-bar{position:absolute;left:68px;right:18px;bottom:8px;height:2px;border-radius:2px;background:var(--line);overflow:hidden;opacity:0;transition:opacity .3s}
.hx.auto .hx-step.on .hx-bar{opacity:1}
.hx-bar::after{content:"";display:block;height:100%;background:var(--brand);transform:scaleX(0);transform-origin:0 50%}
.hx.auto .hx-step.on .hx-bar::after{animation:hx-fill 5.6s linear forwards}
.hx.paused .hx-step.on .hx-bar::after{animation-play-state:paused}
@keyframes hx-fill{to{transform:scaleX(1)}}
.hx-cta{display:flex;align-items:center;flex-wrap:wrap;gap:10px 16px;margin-top:22px;padding-left:18px;font-size:13.5px;color:var(--muted)}

.hx-stage{position:relative;min-height:440px;border-radius:20px;overflow:hidden;container-type:inline-size}
.hx-in{position:absolute;inset:0;font-size:clamp(9px,2.05cqw,13px);line-height:1.3;color:var(--ink)}
.hx-in b,.hx-in small,.hx-in em{font-style:normal}

/* The browser window and the sample site in it */
.hx-win{position:absolute;left:7%;right:7%;top:9%;bottom:-3%;display:flex;flex-direction:column;border-radius:1em;background:var(--paper);box-shadow:0 2.4em 4.4em -1.6em rgba(25,12,40,.55),0 0 0 1px rgba(0,0,0,.06);overflow:hidden}
.hx-top{position:relative;display:flex;align-items:center;gap:1em;padding:.8em 1em;border-bottom:1px solid var(--line);background:var(--paper-2)}
.hx-dots{display:flex;gap:.45em}
.hx-dots i{width:.8em;height:.8em;border-radius:50%;background:var(--line-3)}
.hx-addr{display:flex;align-items:center;gap:.5em;flex:1;min-width:0;height:2.5em;padding:0 .9em;border-radius:.7em;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line);font-size:1.05em;color:var(--ink);white-space:nowrap}
.hx-lock{display:grid;place-items:center;width:1.1em;color:var(--faint);transition:color .4s}
.hx-proto{color:var(--muted)}
.hx-tld{color:var(--brand-ink);font-weight:600}
.hx-find-ph{display:none;color:var(--faint)}
.hx-live{display:inline-flex;align-items:center;gap:.4em;margin-left:auto;padding:.25em .6em;border-radius:999px;background:var(--ok-bg);color:var(--ok-ink);font-size:.85em;font-weight:500;opacity:0;scale:.8;transition:opacity .35s,scale .4s var(--spring)}
.hx-live i{width:.5em;height:.5em;border-radius:50%;background:var(--ok)}
.hx-pubbtn{display:inline-flex;align-items:center;gap:.4em;padding:.55em .9em;border-radius:.6em;background:var(--brand);color:#fff;font-size:1em;font-weight:500;opacity:.25;transition:opacity .35s}
.hx-site{flex:1;display:flex;flex-direction:column;padding:1.2em 1.6em;background:#fdf1e6;color:#2a1a10;transition:filter .5s var(--ease),opacity .5s}
.hs-nav{display:flex;align-items:center;gap:1.6em;font-size:1em}
.hs-nav b{margin-right:auto;font:700 1.25em/1 var(--display);letter-spacing:-.02em}
.hs-nav em{color:#e2733a}
.hs-btn{padding:.45em .9em;border-radius:999px;background:#2a1a10;color:#fdf1e6}
.hs-hero{flex:1;display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:1.4em;padding:1em 0}
.hs-copy{display:grid;gap:.8em;justify-items:start}
.hs-tag{font-size:.85em;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#b4592a}
.hs-h{font:700 2.5em/1.02 var(--display);letter-spacing:-.035em}
.hs-p{max-width:22em;font-size:1em;line-height:1.5;color:#6b4c38}
.hs-cta{padding:.7em 1.2em;border-radius:999px;background:#e2733a;color:#fff;font-weight:600}
.hs-art{position:relative;height:100%;min-height:12em;display:flex;justify-content:center;align-items:flex-end}
/* The bakery's hero art in the small site mocks: the baker in an arch with a loaf (as in the builder demo) */
:is(.hs-art,.sx-art) .pa{position:relative;height:100%;aspect-ratio:3/5;max-width:76%}
:is(.hs-art,.sx-art) .pa-photo{position:absolute;inset:0;border-radius:999px 999px 1em 1em;overflow:hidden;background:#e7b892;box-shadow:0 1.2em 2.4em -1.3em rgba(80,40,10,.45)}
:is(.hs-art,.sx-art) .pa-photo img{display:block;width:100%;height:100%;object-fit:cover}
:is(.hs-art,.sx-art) .pa-photo img{object-position:50% 18%}
:is(.hs-art,.sx-art) .pa-loaf{position:absolute;left:-32%;bottom:-1%;width:68%}
:is(.hs-art,.sx-art) .pa-loaf img{display:block;width:100%;height:auto;filter:drop-shadow(0 .6em .6em rgba(70,35,10,.3))}
.hs-art .pa-chip{position:absolute;right:-8%;top:12%;display:flex;align-items:center;gap:.5em;padding:.55em .8em;border-radius:999px;background:#fff;box-shadow:0 .8em 1.8em -.8em rgba(60,30,10,.45),0 0 0 1px rgba(0,0,0,.04);font:600 .74em/1.1 var(--sans);color:#1f1813;white-space:nowrap}
.hs-art .pa-dot{width:.55em;height:.55em;border-radius:50%;background:#22a45d;box-shadow:0 0 0 .22em rgba(34,164,93,.18)}
.hs-strip{display:flex;gap:.6em;flex-wrap:wrap;padding-top:.6em}
.hs-strip span{padding:.45em .8em;border-radius:999px;background:#fbe0cd;font-size:.9em;color:#6b4c38}

/* Overlays: one per step */
.hx-ov{position:absolute;opacity:0;visibility:hidden;translate:0 .8em;transition:opacity .4s var(--ease),translate .5s var(--ease),visibility 0s .4s}
.hx-stage[data-step="0"] [data-for="0"],.hx-stage[data-step="1"] [data-for="1"],.hx-stage[data-step="2"] [data-for="2"],.hx-stage[data-step="3"] [data-for="3"]{opacity:1;visibility:visible;translate:0 0;transition:opacity .45s var(--ease) .1s,translate .55s var(--ease) .1s,visibility 0s}
.hx-stage[data-step="0"] .hx-site,.hx-stage[data-step="1"] .hx-site{filter:blur(3px);opacity:.55}
.hx-stage[data-step="0"] .hx-url{display:none}
.hx-stage[data-step="0"] .hx-find-ph{display:inline}
.hx-stage[data-step="2"] .hx-lock,.hx-stage[data-step="3"] .hx-lock{color:var(--ok)}
.hx-stage[data-step="3"] .hx-pubbtn{opacity:1}
.hx-stage[data-phase="done"] .hx-live{opacity:1;scale:1}
.hx-stage[data-phase="done"] .hx-pubbtn{background:var(--ok)}

/* 1 · Find a domain (a real search) */
.hx-find{left:13%;right:13%;top:26%;display:grid;grid-template-columns:minmax(0,1fr);gap:.8em;padding:1.4em;border-radius:1.2em;background:var(--paper);box-shadow:0 1.8em 3.6em -1.2em rgba(25,12,40,.5),0 0 0 1px var(--line)}
.hx-find-l{font:600 1.35em/1.1 var(--display);letter-spacing:-.02em}
.hx-field{position:relative;display:flex;align-items:center;gap:.6em;padding:.35em .35em .35em .9em;border-radius:.8em;background:var(--paper-2);box-shadow:inset 0 0 0 1px var(--line-3);transition:box-shadow .2s}
.hx-field:focus-within{box-shadow:inset 0 0 0 1.5px var(--brand)}
.hx-field>.hi{font-size:1.2em;color:var(--muted)}
.hx-field input{flex:1;width:0;min-width:0;height:2.4em;padding:0;border:0;background:none;outline:none;font:500 max(16px,1.15em)/1 var(--sans);color:var(--ink)}
.hx-typed{position:absolute;left:2.75em;top:50%;translate:0 -50%;font:500 1.15em/1 var(--sans);color:var(--ink);pointer-events:none}
.hx-typed::after{content:"";display:inline-block;width:.07em;height:1.05em;margin-left:.1em;vertical-align:-.15em;background:var(--brand);animation:mk-blink 1.1s steps(1) infinite}
.hx-find:has(input:focus) .hx-typed,.hx-find:has(input:not(:placeholder-shown)) .hx-typed{display:none}
.hx-field button{flex:none;height:2.4em;padding:0 1.1em;border:0;border-radius:.6em;background:var(--ink);color:var(--bg);font:600 1.05em/1 var(--sans);cursor:pointer;pointer-events:auto;transition:box-shadow .2s}
.hx-field button:hover{box-shadow:0 0 0 .3em color-mix(in srgb,var(--ink) 12%,transparent)}
.hx-find input,.hx-find button{pointer-events:auto}
.hx-res{display:grid;gap:.4em}
.hx-res>span{display:flex;align-items:center;gap:.8em;padding:.65em .8em;border-radius:.7em;background:var(--paper-2);opacity:0;translate:0 .5em;transition:opacity .35s var(--ease),translate .45s var(--ease)}
.hx-stage.found .hx-res>span{opacity:1;translate:0 0}
.hx-stage.found .hx-res>span:nth-child(2){transition-delay:.08s}
.hx-stage.found .hx-res>span:nth-child(3){transition-delay:.16s}
.hx-res b{font-weight:600;font-size:1.05em}
.hx-res em{color:var(--brand-ink)}
.hx-res small{display:inline-flex;align-items:center;gap:.35em;margin-left:auto;font-size:.95em;color:var(--ok-ink)}
.hx-res i{padding:.35em .8em;border-radius:.5em;background:var(--ink);color:var(--bg);font-style:normal;font-size:.9em;font-weight:500}
.hx-find:has(input:focus) .hx-res,.hx-find:has(input:not(:placeholder-shown)) .hx-res{display:none}

/* 2 · Pick an extension */
.hx-tl{left:13%;right:13%;top:22%;display:grid;justify-items:center;gap:.25em;padding:1.5em 1.4em 1.6em;border-radius:1.2em;background:var(--paper);box-shadow:0 1.8em 3.6em -1.2em rgba(25,12,40,.5),0 0 0 1px var(--line);text-align:center}
.hx-big{font:600 4.2em/1 var(--display);letter-spacing:-.05em;color:var(--brand-ink)}
.hx-cap{font-size:1.1em;font-weight:500;color:var(--muted)}
.hx-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:.45em;margin-top:1em}
.hx-chips span{padding:.5em .85em;border-radius:999px;background:var(--paper-2);box-shadow:inset 0 0 0 1px var(--line);font-size:1.02em;font-weight:600;color:var(--ink-2);transition:background .25s,color .25s,box-shadow .25s,scale .35s var(--spring)}
.hx-chips span.hot{background:var(--brand);color:#fff;box-shadow:none;scale:1.08}

/* 3 · Security */
.hx-cert{left:10%;top:calc(9% + 3.6em);width:min(58%,24em);display:grid;gap:.1em;padding:1.1em 1.2em;border-radius:1em;background:var(--paper);box-shadow:0 1.6em 3.2em -1.1em rgba(25,12,40,.5),0 0 0 1px var(--line)}
.hx-cert::before{content:"";position:absolute;left:2.4em;top:-.45em;width:.9em;height:.9em;rotate:45deg;background:var(--paper);box-shadow:-1px -1px 0 var(--line)}
.hx-cert-h{display:flex;align-items:center;gap:.5em;margin-bottom:.5em;font-weight:600;font-size:1.1em}
.hx-cert-h .hi{color:var(--ok)}
.hx-kv{display:flex;justify-content:space-between;gap:1em;padding:.55em 0;border-top:1px solid var(--line);color:var(--muted)}
.hx-kv b{color:var(--ink);font-weight:500}
.hx-cert .mk-badges{justify-content:flex-start;margin-top:.7em;font-size:.9em}

.hx-cert .mk-badges{gap:.5em}
.hx-cert .mk-badge{gap:.55em;padding:.45em .85em .45em .55em}
.hx-cert .mk-badge>.hi{width:1.6em;height:1.6em}
.hx-cert .mk-badge b{font-size:.92em}
.hx-cert .mk-badge small{font-size:.66em}

/* 4 · Publish */
.hx-pp{right:10%;top:calc(9% + 3.6em);width:min(62%,25em);display:grid;gap:.45em;padding:1.1em;border-radius:1em;background:var(--paper);box-shadow:0 1.6em 3.2em -1.1em rgba(25,12,40,.5),0 0 0 1px var(--line)}
.hx-pp-h{font-size:.95em;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.hx-dest{display:flex;align-items:center;gap:.8em;padding:.7em .8em;border-radius:.7em;box-shadow:inset 0 0 0 1px var(--line)}
.hx-dest i{flex:none;width:1.2em;height:1.2em;border-radius:50%;box-shadow:inset 0 0 0 1px var(--line-3)}
.hx-dest.on{background:color-mix(in srgb,var(--tint) 70%,transparent);box-shadow:inset 0 0 0 .13em var(--brand)}
.hx-dest.on i{box-shadow:inset 0 0 0 .36em var(--brand)}
.hx-dest b{display:block;font-weight:600}
.hx-dest small{display:block;margin-top:.15em;font-size:.9em;color:var(--muted)}
.hx-dest em{margin-left:auto;padding:.2em .55em;border-radius:.4em;background:var(--ok-bg);color:var(--ok-ink);font-size:.85em;font-weight:500}
.hx-go{display:grid;place-items:center;margin-top:.3em;padding:.8em;border-radius:.7em;background:var(--brand);color:#fff;font-weight:600;transition:background .3s}
.hx-go>span{grid-area:1/1;display:none;align-items:center;gap:.5em}
.hx-stage:not([data-phase="busy"]):not([data-phase="done"]) .hx-go .hx-g1,.hx-stage[data-phase="busy"] .hx-go .hx-g2,.hx-stage[data-phase="done"] .hx-go .hx-g3{display:inline-flex}
.hx-stage[data-phase="done"] .hx-go{background:var(--ok)}
.hx-spin{width:1em;height:1em;border-radius:50%;border:.15em solid rgba(255,255,255,.35);border-top-color:#fff;animation:hx-spin .8s linear infinite}
@keyframes hx-spin{to{rotate:360deg}}
.hx-toast{position:absolute;left:50%;bottom:6%;display:inline-flex;align-items:center;gap:.5em;padding:.65em 1.1em;border-radius:999px;background:#17181b;color:#fff;font-size:1.05em;font-weight:500;box-shadow:0 1em 2em -.8em rgba(0,0,0,.5);opacity:0;translate:-50% 1em;transition:opacity .4s var(--ease),translate .5s var(--spring)}
.hx-toast i{width:.55em;height:.55em;border-radius:50%;background:#3fd08f;box-shadow:0 0 0 .25em rgba(63,208,143,.25)}
.hx-stage[data-step="3"][data-phase="done"] .hx-toast{opacity:1;translate:-50% 0}
/* Small stages (phones): the cards take more of the width */
@container (max-width:520px){
  .hx-win{left:4%;right:4%;top:7%}
  .hx-find,.hx-tl{left:5%;right:5%}
  .hx-find{top:20%}
  .hx-cert{left:6%;width:auto;right:16%;top:calc(7% + 3.6em)}
  .hx-pp{right:5%;width:auto;left:16%;top:calc(7% + 3.6em)}
}
/* ---------- Build, export, grow: alternating rows ---------- */
.h-rows{display:grid;gap:clamp(64px,9vw,120px);margin:0;padding:0;list-style:none}
.h-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:center}
.h-row:nth-child(even) .h-row-art{order:-1}
.h-row h3{margin:0;font:600 calc(clamp(24px,2.4vw,34px) * min(var(--u),1.15))/1.12 var(--display);letter-spacing:-.03em;color:var(--ink);text-wrap:balance}
.h-row p{margin:14px 0 0;max-width:52ch;font-size:clamp(15px,1.2vw,16.5px);line-height:1.6;color:var(--muted)}
.h-row p a{color:var(--ink)}
.h-row-art{position:relative;aspect-ratio:825/975;border-radius:24px;overflow:hidden;container-type:inline-size;box-shadow:var(--lift)}

/* ---------- Reviews ---------- */
.h-rev-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,96px);align-items:start}
.h-rev-side{position:sticky;top:calc(var(--hdr) + var(--rb-offset,0px) + 32px)}
.h-score{display:flex;align-items:center;gap:16px;margin:26px 0 20px}
.h-score b{font:600 clamp(48px,5vw,64px)/1 var(--display);letter-spacing:-.045em;color:var(--ink)}
.h-score>span{display:grid;gap:8px}
.h-score small{font-size:13.5px;line-height:1.45;color:var(--muted)}
.h-stars{display:flex;gap:2px;color:#f5a524}
.h-stars svg{width:17px;height:17px;fill:currentColor}
.h-reviews{margin:0;padding:0;list-style:none}
.h-rev{padding:clamp(28px,3.5vw,40px) 0;background:radial-gradient(circle,var(--line-3) 1px,transparent 1.4px) 0 0/8px 3px repeat-x}
.h-rev:first-child{padding-top:0;background:none}
.h-rev h3{margin:12px 0 0;font:600 18px/1.35 var(--sans);letter-spacing:-.01em;color:var(--ink)}
.h-rev h3 a{text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px;transition:text-decoration-color .2s}
.h-rev h3 a:hover{text-decoration-color:var(--line-3)}
.h-rev blockquote{margin:10px 0 0}
.h-rev blockquote p{margin:0 0 8px;font-size:clamp(15.5px,1.3vw,17px);line-height:1.6;color:var(--ink-2);text-wrap:pretty}
.h-rev-by{display:flex;align-items:center;gap:12px;margin:16px 0 0}
.h-ava{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--tint);font:600 13.5px/1 var(--sans);color:var(--brand-ink);transition:transform .3s var(--spring)}
.h-rev:hover .h-ava{transform:scale(1.06)}
.h-rev-by b{display:block;font:500 15px/1.35 var(--sans);color:var(--ink)}
.h-rev-by small{display:block;margin-top:2px;font-size:13.5px;color:var(--muted)}

/* ---------- Who it's for ---------- */
.h-who{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0;padding:0;list-style:none}
.h-who li{padding:24px;border-radius:18px;background:var(--paper);box-shadow:var(--lift);transition:transform .3s var(--spring)}
.h-who li:hover{transform:translateY(-3px)}
.h-who h3{margin:16px 0 0;font:600 18px/1.3 var(--display);letter-spacing:-.02em;color:var(--ink)}
.h-who h3 a{text-decoration:underline;text-decoration-color:var(--line-3);text-underline-offset:3px;transition:text-decoration-color .2s}
.h-who h3 a:hover{text-decoration-color:currentColor}
.h-who p{margin:8px 0 0;font-size:14.5px;line-height:1.55;color:var(--muted)}
.h-uses-h{margin:clamp(40px,5vw,56px) 0 16px;font:600 15px/1.3 var(--sans);color:var(--ink-2)}
.h-uses{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0;padding:0;list-style:none}
.h-uses li{padding:22px 24px;border-radius:18px;background:var(--bg);box-shadow:inset 0 0 0 1px var(--line)}
.h-uses h3{margin:0;font:600 16.5px/1.3 var(--sans);color:var(--ink)}
.h-uses h3 a{text-decoration:underline;text-decoration-color:var(--line-3);text-underline-offset:3px}
.h-uses p{margin:8px 0 0;font-size:14px;line-height:1.55;color:var(--muted)}

/* How it works: three numbered steps, then what every site comes with */
.h-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0;padding:0;list-style:none}
.h-steps li{padding:24px;border-radius:18px;background:var(--paper);box-shadow:var(--lift)}
.h-n{font:600 13px/1 var(--sans);color:var(--brand-ink);font-variant-numeric:tabular-nums}
.h-steps h3{margin:14px 0 8px;font:600 clamp(18px,1.5vw,20px)/1.25 var(--display);letter-spacing:-.02em;color:var(--ink)}
.h-steps p{margin:0;font-size:14.5px;line-height:1.55;color:var(--muted)}
.h-incl{display:flex;flex-wrap:wrap;gap:10px 28px;margin:clamp(24px,3vw,32px) 0 0;padding:0;list-style:none}
.h-incl li{display:flex;align-items:center;gap:8px;font-size:14.5px;line-height:1.45;color:var(--ink-2)}
.h-incl i{flex:none;width:18px;height:18px;color:var(--ok)}

/* Free versus paid */
.h-plans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.h-plan{padding:24px;border-radius:18px;background:var(--bg);box-shadow:inset 0 0 0 1px var(--line)}
.h-plan.pro{box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--brand) 45%,transparent)}
.h-plan h3{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0;font:600 18px/1.3 var(--display);letter-spacing:-.02em;color:var(--ink)}
.h-plan h3 b{font:600 26px/1 var(--display);letter-spacing:-.03em}
.h-plan h3 small{margin-left:4px;font:400 13px/1 var(--sans);letter-spacing:0;color:var(--muted)}
.h-plan ul{display:grid;gap:10px;margin:18px 0 0;padding:0;list-style:none;font-size:14.5px;line-height:1.45;color:var(--ink-2)}
.h-plan li{display:flex;gap:10px}
.h-plan i{flex:none;width:18px;height:18px;margin-top:1px;color:var(--ok)}

/* ---------- Built with CodeDesign: template gallery ---------- */
.h-gal{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:0;padding:0;list-style:none}
.h-gal a{display:block;border-radius:14px;overflow:hidden;background:var(--fill);box-shadow:var(--lift);transition:transform .35s var(--spring),box-shadow .35s}
.h-gal a:hover{transform:translateY(-4px);box-shadow:inset 0 0 0 1px var(--line-3),var(--lift)}
.h-gal img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:50% 0;transition:transform .8s var(--ease)}
.h-gal a:hover img{transform:scale(1.035)}
.h-gal span{display:block;padding:12px 14px;font:500 14px/1.3 var(--sans);color:var(--ink-2)}

/* ---------- Coded product illustrations ----------
   The product screenshots, rebuilt in HTML and CSS. Each one scales with its frame (container
   units) so it stays sharp from phone to desktop. App panels follow light and dark mode; the
   backdrops are fixed. */
.hi{display:inline-block;flex:none;width:1em;height:1em;vertical-align:-.125em}
.mk{position:absolute;inset:0;font-size:clamp(8px,2.45cqw,13.5px);line-height:1.3;color:var(--ink);text-align:left;pointer-events:none;user-select:none}
.mk b,.mk small,.mk em{font-style:normal}
/* Backdrops: soft colour fields, a diagonal light streak and fine grain, in the spirit of
   motion-blurred photography but pure CSS, so they scale to any size. The grain sits behind
   the UI (::before comes before the illustration), never on top of it. */
.st-violet{background:linear-gradient(105deg,transparent 18%,rgba(255,255,255,.16) 34%,transparent 48%),radial-gradient(60% 50% at 88% 6%,#ffd3ec 0%,rgba(255,211,236,0) 70%),radial-gradient(70% 60% at 8% 94%,#5a3ff2 0%,rgba(90,63,242,0) 70%),radial-gradient(55% 45% at 42% 44%,#ebe6ff 0%,rgba(235,230,255,0) 70%),radial-gradient(60% 60% at 100% 100%,#3a2bb8 0%,rgba(58,43,184,0) 70%),#a99cf0}
.st-sky{background:linear-gradient(100deg,transparent 15%,rgba(255,255,255,.2) 32%,transparent 46%),radial-gradient(55% 45% at 92% 4%,#ffd8c4 0%,rgba(255,216,196,0) 72%),radial-gradient(65% 55% at 4% 18%,#5b74dc 0%,rgba(91,116,220,0) 72%),radial-gradient(70% 60% at 70% 102%,#3348b5 0%,rgba(51,72,181,0) 70%),radial-gradient(50% 40% at 36% 60%,#d9e0ff 0%,rgba(217,224,255,0) 70%),#93a8ea}
.st-sand{background:linear-gradient(110deg,transparent 20%,rgba(255,250,240,.26) 36%,transparent 50%),radial-gradient(60% 50% at 90% 6%,#fff4e2 0%,rgba(255,244,226,0) 70%),radial-gradient(70% 60% at 0% 100%,#c8693a 0%,rgba(200,105,58,0) 70%),radial-gradient(50% 45% at 56% 72%,#eba77d 0%,rgba(235,167,125,0) 70%),radial-gradient(45% 40% at 14% 14%,#d99a62 0%,rgba(217,154,98,0) 70%),#e9cba2}
.st-rose{background:linear-gradient(105deg,transparent 18%,rgba(255,255,255,.2) 34%,transparent 48%),radial-gradient(55% 45% at 86% 5%,#ffe6d6 0%,rgba(255,230,214,0) 72%),radial-gradient(70% 60% at 4% 96%,#c9567a 0%,rgba(201,86,122,0) 70%),radial-gradient(55% 50% at 60% 55%,#f6bdb9 0%,rgba(246,189,185,0) 70%),radial-gradient(50% 50% at 100% 100%,#8f4fc4 0%,rgba(143,79,196,0) 70%),#eaa9b4}
.st-canvas{background:radial-gradient(circle,var(--line-3) 1px,transparent 1.3px) 0 0/16px 16px,var(--paper-2)}
.st-violet::before,.st-sky::before,.st-sand::before,.st-rose::before,.st-mist::before{content:"";position:absolute;inset:0;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>") 0 0/180px;opacity:.3;mix-blend-mode:soft-light;pointer-events:none}
.mk-panel{position:absolute;background:var(--paper);border-radius:1.1em;box-shadow:0 2.2em 4em -1.4em rgba(25,12,40,.5),0 0 0 1px rgba(0,0,0,.06);overflow:hidden}

/* AI companion: the chat composer */
.mk-comp{position:absolute;left:9%;top:32%;width:97%;border-radius:1.25em;background:#2e2e31;color:#e9e9ec;box-shadow:0 1.8em 3.4em -1.2em rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.07)}
.mk-comp.fit{left:8%;right:8%;width:auto;top:50%;transform:translateY(-50%)}
.mk-comp-top{display:flex;align-items:center;gap:.75em;padding:1.05em 1.4em;font-size:1.05em;color:#cfcfd5}
.mk-comp-top .hi:last-child{margin-left:auto;color:#a9a9b0}
.mk-pie{width:1.55em;height:1.55em}
.mk-pie circle{fill:none;stroke:#cfcfd5;stroke-width:2}
.mk-pie path{fill:#cfcfd5}
.mk-comp-box{display:block;padding:1.3em 1.4em 1.15em;border-radius:1.15em;background:#3a3a3e;box-shadow:0 0 0 1px rgba(255,255,255,.08)}
.mk-say{display:block;min-height:3.6em;font-size:1.18em;line-height:1.45;color:#f3f3f5}
.mk-caret{display:inline-block;width:.09em;height:1.1em;margin-left:.12em;vertical-align:-.17em;background:#c9bfff;animation:mk-blink 1.1s steps(1) infinite}
.mk-comp-row{display:flex;align-items:center;gap:.9em;margin-top:.5em}
.mk-seg{display:inline-flex;padding:.28em;border-radius:999px;background:#242427;font-size:1.06em}
.mk-seg b{padding:.48em 1.05em;border-radius:999px;background:#ececef;color:#1c1c1f;font-weight:500}
.mk-seg span{padding:.48em 1.05em;color:#c6c6cc}
.mk-comp-row>.hi{font-size:1.55em;color:#bcbcc3}
.mk-pick,.mk-send{display:grid;place-items:center;width:2.5em;height:2.5em;border-radius:.6em}
.mk-pick{background:#2f7cf6;color:#fff}
.mk-send{margin-left:auto;background:#f4f4f5;color:#111}
.mk-pick .hi,.mk-send .hi{font-size:1.3em}

/* Templates: pick one, copy its prompt, then build and host it or export the code.
   walkthrough.js walks a cursor through it while it's on screen; hovering a template picks it. */
.st-mist{background:radial-gradient(60% 45% at 92% 4%,#ffe0cf 0%,rgba(255,224,207,0) 70%),radial-gradient(70% 55% at 0% 100%,#c9b8ff 0%,rgba(201,184,255,0) 70%),radial-gradient(55% 45% at 50% 45%,#faf7ff 0%,rgba(250,247,255,0) 70%),#ebe4fb}
.tx .mk{color:#1d1b26}
.tx-chips{position:absolute;left:6%;right:0;top:4.6%;display:flex;gap:.45em;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent)}
.tx-chips span{flex:none;padding:.55em .95em;border-radius:999px;background:rgba(255,255,255,.72);box-shadow:inset 0 0 0 1px rgba(30,15,80,.08);font-size:1em;font-weight:500;color:#4a4560;transition:background .35s var(--ease),color .35s,box-shadow .35s}
.tx-chips span.on{background:#1d1b26;color:#fff;box-shadow:0 .4em 1em -.4em rgba(20,10,50,.5)}
.tx-grid{position:absolute;left:6%;right:6%;top:13.5%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.1em .9em}
.tx-tile{display:block;transition:transform .5s var(--spring),scale .5s var(--spring)}
.tx-tile:not(.back){pointer-events:auto}
.tx-thumb{position:relative;display:block;border-radius:.75em;overflow:hidden;background:#fff;box-shadow:0 .5em 1.4em -.6em rgba(30,15,80,.35),0 0 0 1px rgba(30,15,80,.06);transition:box-shadow .35s var(--ease)}
.tx-thumb img{display:block;width:100%;height:auto;aspect-ratio:5/6;object-fit:cover;object-position:50% 0;transition:transform .9s var(--ease)}
.tx-thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,10,35,0) 30%,rgba(15,10,35,.6));opacity:0;transition:opacity .35s var(--ease)}
.tx-meta{display:flex;flex-direction:column;gap:.15em;margin-top:.6em;padding:0 .15em}
.tx-meta b{font-size:1.02em;font-weight:600}
.tx-meta small{font-size:.88em;color:#6e6884}
.tx-grid:has(.tx-tile.on) .tx-tile:not(.on){scale:.97}
.tx-tile.on{transform:translateY(-.45em)}
.tx-tile.on .tx-thumb{box-shadow:0 0 0 .16em #5b3df5,0 1.3em 2.6em -1em rgba(45,20,140,.55)}
.tx-tile.on .tx-thumb img{transform:scale(1.05)}
.tx-tile.on .tx-thumb::after{opacity:1}
.tx-acts{position:absolute;left:.5em;right:.5em;bottom:.5em;z-index:1;display:grid;gap:.35em;opacity:0;translate:0 .6em;transition:opacity .3s var(--ease),translate .45s var(--ease)}
.tx-tile.on .tx-acts{opacity:1;translate:0 0}
.tx-act{display:flex;align-items:center;justify-content:center;gap:.4em;padding:.55em .4em;border-radius:999px;background:#fff;color:#141416;font-size:.84em;font-weight:600;white-space:nowrap;box-shadow:0 .35em .9em -.35em rgba(0,0,0,.45);transition:scale .16s var(--ease),background .3s,color .3s}
.tx-act svg{flex:none;width:1.1em;height:1.1em}
.tx-act.pri{background:#5b3df5;color:#fff}
.tx-act.pri svg{fill:currentColor}
.tx-act .no,.tx-act .ok{display:inline-flex;align-items:center;gap:.4em}
.tx-act .ok{display:none}
.tx-act.copied{background:#e7f8ee;color:#15803d}
.tx-act.copied .no{display:none}
.tx-act.copied .ok{display:inline-flex}
.tx-act.press{scale:.92}
.tx-prompt{position:absolute;left:5%;right:5%;bottom:4%;z-index:2;display:block;padding:1.2em 1.35em 1em;border-radius:1.15em;background:rgba(255,255,255,.95);color:#18181b;box-shadow:0 0 0 .5em rgba(255,255,255,.4),0 1.8em 3.4em -1.2em rgba(30,15,80,.5);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.tx-ph{display:flex;align-items:center;justify-content:space-between;gap:1em}
.tx-ph b{display:flex;align-items:center;gap:.5em;font-size:1.25em;font-weight:600}
.tx-ph b svg{width:1.05em;height:1.05em;color:#5b3df5}
.tx-copied{display:inline-flex;align-items:center;gap:.35em;padding:.3em .7em;border-radius:999px;background:#e7f8ee;color:#15803d;font-size:.9em;font-weight:500;opacity:0;scale:.8;transition:opacity .25s var(--ease),scale .4s var(--spring)}
.tx-copied svg{width:1em;height:1em}
.tx.is-copied .tx-copied{opacity:1;scale:1}
.tx-text{display:block;min-height:4.5em;margin-top:.7em;font-size:1.08em;line-height:1.5;color:#3a3a40;transition:opacity .28s var(--ease),translate .4s var(--ease)}
.tx.swap .tx-text{opacity:0;translate:0 .45em}
.tx-pf{display:flex;justify-content:space-between;gap:1em;margin-top:.85em;padding-top:.8em;border-top:1px solid #ececf0;font-size:.95em;color:#8b8b92}
.tx-pf em{color:#5b3df5}
.tx-cursor{position:absolute;left:0;top:0;z-index:3;width:1.7em;height:1.7em;fill:#fff;stroke:#111;stroke-width:1.3;stroke-linejoin:round;filter:drop-shadow(0 .15em .25em rgba(0,0,0,.3));opacity:0;translate:60% 70%;transition:translate .75s var(--ease),opacity .3s;pointer-events:none}
.tx.cursor-on .tx-cursor{opacity:1}
.tx-cursor.tap{scale:.85}
/* Export: download the code, or send it to WordPress */
.mk-export{left:13%;top:7%;width:74%}
.mk-tabs{display:flex;gap:1.9em;padding:1.15em 1.6em 0;border-bottom:1px solid var(--line)}
.mk-tabs span,.mk-tabs b{padding-bottom:.85em;font-size:1.15em;font-weight:500;color:var(--muted)}
.mk-tabs b{color:var(--ink);font-weight:600;box-shadow:inset 0 -.15em 0 var(--ink)}
.mk-row{display:block;padding:1em 1.6em;border-bottom:1px solid var(--line);font-size:1.08em;color:var(--ink-2)}
.mk-label{display:block;padding:1.15em 1.6em .55em;font-size:1.08em;font-weight:600}
.mk-input{display:block;margin:0 1.6em;padding:.75em 1em;border-radius:.6em;box-shadow:inset 0 0 0 1px var(--line-3);font-size:1.12em;color:var(--faint)}
.mk-check{display:flex;align-items:center;gap:.8em;padding:.75em 1.6em 0;font-size:1.08em;font-weight:500}
.mk-check i,.mk-opt i{flex:none;width:1.35em;height:1.35em;border-radius:.32em;box-shadow:inset 0 0 0 1px var(--line-3)}
.mk-sep{display:block;height:1px;margin-top:1.1em;background:var(--line)}
.mk-opt{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.25em 1em;margin:.65em 1.6em 0;padding:1em 1.2em;border-radius:.75em;box-shadow:inset 0 0 0 1px var(--line-3)}
.mk-opt i{grid-row:span 2;border-radius:50%}
.mk-opt.on{background:color-mix(in srgb,var(--tint) 75%,transparent);box-shadow:inset 0 0 0 .14em #5b3df5}
.mk-opt.on i{box-shadow:inset 0 0 0 .4em #5b3df5}
.mk-opt b{font-size:1.12em;font-weight:500}
.mk-opt small{grid-column:2;font-size:1em;color:var(--muted)}
.mk-opt em{grid-row:1/3;grid-column:3;padding:.25em .6em;border-radius:.4em;background:var(--ok-bg);color:var(--ok-ink);font-size:.95em;font-weight:500}
.mk-dl{display:flex;align-items:center;justify-content:center;gap:.6em;margin:1.4em 1.6em 1.6em;padding:.9em;border-radius:.6em;background:#5b3df5;color:#fff;font-size:1.1em;font-weight:500}
/* WordPress and HTML5 (official logos) hang off the CodeDesign mark: sync to WordPress, export HTML */
.mk-orbs{position:absolute;right:3.5%;top:2.5%;width:13em;height:13em}
.mk-links{position:absolute;inset:0;width:100%;height:100%;overflow:visible;fill:none;stroke:#8f7cf7;stroke-width:1.6;stroke-dasharray:3 4;stroke-linecap:round}
.mk-orb{position:absolute;display:grid;place-items:center;width:5.2em;height:5.2em;border-radius:50%;background:#fff;box-shadow:0 0 0 .3em rgba(255,255,255,.45),0 1.1em 2.2em -.8em rgba(20,10,50,.55)}
.mk-orb svg{display:block}
.mk-orb.cd{left:0;top:3.9em;background:#6c5bf0;color:#fff}
.mk-orb.cd svg{width:2.9em;height:2.9em;fill:currentColor}
.mk-orb.wp{right:0;top:0}
.mk-orb.wp svg{width:3.5em;height:3.5em}
.mk-orb.html{right:.4em;top:7.6em}
.mk-orb.html svg{width:2.55em;height:3.6em}
.mk-chip{position:absolute;display:grid;place-items:center;width:2.3em;height:2.3em;border-radius:.6em;background:#fff;color:#5b3df5;box-shadow:0 .5em 1em -.5em rgba(20,10,50,.5)}
.mk-chip .hi{font-size:1.2em}
.mk-chip.sync{left:5.35em;top:2.95em}
.mk-chip.web{left:5.15em;top:7.35em}
.mk-spark{position:absolute;right:37%;top:5%;font-size:2em;color:#d9d0ff}

/* SEO audit */
.mk-wide{left:7.5%;top:6.5%;right:-9%;bottom:-6%;display:flex;flex-direction:column;padding:1.8em 1.8em 0}
.mk-crumb{display:flex;align-items:center;gap:.6em;font-size:1.15em;color:var(--muted);white-space:nowrap}
.mk-crumb b{color:var(--ink);font-weight:600}
.mk-pill{display:inline-flex;align-items:center;gap:.45em;padding:.38em .7em;border-radius:.5em;background:var(--fill);font-size:.88em;color:var(--ink-2)}
.mk-pill i{width:.6em;height:.6em;border-radius:50%;background:var(--ok)}
.mk-cards{display:grid;grid-template-columns:1fr 1fr;gap:1em;margin-top:1.3em}
.mk-card{display:block;padding:1.1em 1.3em;border-radius:.9em;box-shadow:inset 0 0 0 1px var(--line-2)}
.mk-card-h{display:flex;align-items:center;justify-content:space-between;gap:.5em;font-size:1.06em;font-weight:500;color:var(--ink-2)}
.mk-up{display:inline-flex;align-items:center;gap:.15em;padding:.22em .5em;border-radius:.4em;background:var(--ok-bg);color:var(--ok-ink);font-size:.88em;font-weight:500}
.mk-gauge{display:block;width:66%;height:auto;margin:.5em auto 0;overflow:visible}
.mk-gauge path{fill:none;stroke-width:9;stroke-linecap:round}
.mk-gauge .bg{stroke:var(--line-2)}
.mk-gauge .v{stroke:url(#mk-g);stroke-dasharray:98 100}
.mk-gauge text{fill:var(--ink);text-anchor:middle;font-family:var(--sans)}
.mk-big{display:block;margin:.35em 0 .5em;font:600 2.9em/1 var(--sans);letter-spacing:-.035em}
.mk-kv{display:flex;justify-content:space-between;padding:.55em 0;border-top:1px solid var(--line);font-size:.98em;color:var(--muted)}
.mk-kv b{color:var(--ink-2);font-weight:500}
.mk-tabs2{display:flex;align-items:center;gap:1.5em;margin-top:1.1em;font-size:1.05em}
.mk-tabs2 span{display:inline-flex;align-items:center;gap:.5em;padding:.65em .1em;font-weight:500;color:var(--muted)}
.mk-tabs2 span.on{color:var(--ink);box-shadow:inset 0 -.15em 0 var(--ink)}
.mk-tabs2 small{padding:.08em .45em;border-radius:.35em;background:var(--fill);font-size:.85em}
.mk-select{display:inline-flex;align-items:center;gap:2.6em;padding:.6em .85em;border-radius:.6em;box-shadow:inset 0 0 0 1px var(--line-3);color:var(--ink)}
.mk-table{display:grid;grid-template-columns:2.3fr 1fr 1fr;margin-top:.2em;border-top:1px solid var(--line);font-size:1.02em}
.mk-table>span{padding:.72em .8em;border-bottom:1px solid var(--line);white-space:nowrap}
.mk-th{background:var(--paper-2);font-weight:600}
.mk-grp{grid-column:1/-1;background:var(--paper-2);font-size:.92em;font-weight:600}
.mk-iss{display:flex;align-items:center;gap:.55em}
.mk-iss .hi{font-size:1.2em;color:#e5484d}
.mk-dn{color:var(--faint)}
.mk-bad{color:#d33a3a}
.mk-good{color:var(--ok)}

/* Analytics */
.mk-title{display:block;padding-bottom:.95em;border-bottom:1px solid var(--line);font:600 1.55em/1 var(--sans)}
.mk-bar-row{display:flex;align-items:center;gap:.8em;margin-top:1.1em}
.mk-seg2{display:inline-flex;padding:.3em;border-radius:.7em;background:var(--fill);font-size:1.04em}
.mk-seg2 span{padding:.55em .85em;border-radius:.5em;color:var(--muted)}
.mk-seg2 span.on{background:var(--paper);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.mk-stats{display:grid;grid-template-columns:1fr 1fr;gap:1em;margin-top:1em}
.mk-stat-l{display:block;font-size:1.04em;color:var(--muted)}
.mk-chart{flex:1;display:flex;align-items:flex-end;gap:4.5%;margin-top:1em;padding:1.6em 1.5em 0;border-radius:.9em .9em 0 0;box-shadow:inset 0 0 0 1px var(--line-2)}
.mk-bar{flex:1;display:flex;flex-direction:column;justify-content:flex-end;height:var(--t);border-radius:.2em .2em 0 0;background:#c3b6ff;overflow:hidden;transform-origin:50% 100%}
.mk-bar::after{content:"";height:var(--b);background:#5b3df5}

/* Visual builder: a heading picked up and dragged into place */
.mk-dd{display:grid;place-items:center}
.mk-el,.mk-ghost{grid-area:1/1;font:600 3.1em/1 var(--sans);letter-spacing:-.02em;white-space:nowrap}
.mk-el{position:relative;padding:.12em .28em;color:var(--ink);background:var(--paper);translate:.55em -.62em}
.mk-ghost{padding:.12em .28em;color:var(--ink);background:var(--paper)}
.mk-ghost.mk-g1{opacity:.5;filter:blur(.5px);translate:-.05em .42em;box-shadow:0 0 0 .04em rgba(5,122,229,.45)}
.mk-ghost.mk-g2{opacity:.22;filter:blur(1.2px);translate:-.65em 1.46em}
/* the editor's selection (outline, tab, handles) from launch.css, always shown here */
.mk-el .s-sel{opacity:1}
.s-ai{flex:none;width:1.28em;height:1.28em;margin:0 .6em;color:#fff}

.mk-badges{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.mk-badge{display:inline-flex;align-items:center;gap:8px;padding:7px 12px 7px 9px;border-radius:999px;background:#17181b;color:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.08),0 8px 18px -10px rgba(0,0,0,.6)}
.mk-badge>.hi{width:22px;height:22px;color:#3fd08f}
.mk-badge b{display:block;font:700 12px/1.05 var(--sans);letter-spacing:.06em;text-transform:uppercase}
.mk-badge small{display:block;font:600 8.5px/1.2 var(--sans);letter-spacing:.07em;text-transform:uppercase;color:#a6a8ad}

/* Motion: the illustrations come alive as they arrive (only where the reveal runs) */
@keyframes mk-blink{50%{opacity:0}}
@keyframes mk-grow{from{transform:scaleY(.04)}}
@keyframes mk-draw{from{stroke-dashoffset:98}}
@keyframes mk-rise{from{opacity:0;translate:0 1.4em}}
@keyframes mk-pop{from{opacity:0;scale:.6}}
@keyframes mk-drag{from{translate:-.65em 1.46em;box-shadow:0 1.4em 2.4em -1em rgba(0,0,0,.35)}}
.h-rv-on .h-rv.in .mk-bar{animation:mk-grow .9s var(--ease) calc(.25s + var(--i,0) * 60ms) backwards}
.h-rv-on .h-rv.in .mk-gauge .v{animation:mk-draw 1.3s var(--ease) .3s backwards}
.h-rv-on .h-rv.in .mk-orb,.h-rv-on .h-rv.in .mk-chip{animation:mk-pop .5s var(--spring) calc(.35s + var(--i,0) * 80ms) backwards}
.h-rv-on .h-rv.in .tx-prompt{animation:mk-rise .7s var(--ease) .4s backwards}
.h-rv-on .h-rv.in .tx-tile{animation:mk-rise .6s var(--ease) calc(.08s * var(--n,0)) backwards}
.h-rv-on .h-rv.in .mk-comp{animation:mk-rise .7s var(--ease) .15s backwards}
.h-rv-on .h-rv.in .mk-el{animation:mk-drag 1.1s var(--ease) .3s backwards}
.h-rv-on .h-rv.in .mk-badge{animation:mk-rise .55s var(--ease) calc(.2s + var(--i,0) * 90ms) backwards}

/* Placeholder heights while a section skips layout (content-visibility in site.css), close to the
   real ones so the page doesn't grow under the scrollbar as sections arrive. They size the content
   box, so the section's padding comes on top. */
section[aria-labelledby="how-h"]{contain-intrinsic-size:auto 454px}
section[aria-labelledby="proof-h"]{contain-intrinsic-size:auto 304px}
section[aria-labelledby="eds-h"]{contain-intrinsic-size:auto 757px}
section[aria-labelledby="ctl-h"]{contain-intrinsic-size:auto 816px}
section[aria-labelledby="host-h"]{contain-intrinsic-size:auto 631px}
section[aria-labelledby="vibe-h"]{contain-intrinsic-size:auto 3850px}
section[aria-labelledby="rev-h"]{contain-intrinsic-size:auto 2036px}
section[aria-labelledby="who-h"]{contain-intrinsic-size:auto 786px}
section[aria-labelledby="built-h"]{contain-intrinsic-size:auto 716px}
section[aria-labelledby="plans-h"]{contain-intrinsic-size:auto 451px}
@media (max-width:1024px){section[aria-labelledby="ctl-h"]{contain-intrinsic-size:auto 1166px}section[aria-labelledby="built-h"]{contain-intrinsic-size:auto 1846px}}
@media (max-width:820px){
  section[aria-labelledby="how-h"]{contain-intrinsic-size:auto 1002px}
  section[aria-labelledby="proof-h"]{contain-intrinsic-size:auto 528px}
  section[aria-labelledby="eds-h"]{contain-intrinsic-size:auto 1264px}
  section[aria-labelledby="ctl-h"]{contain-intrinsic-size:auto 1972px}
  section[aria-labelledby="host-h"]{contain-intrinsic-size:auto 1097px}
  section[aria-labelledby="vibe-h"]{contain-intrinsic-size:auto 4672px}
  section[aria-labelledby="rev-h"]{contain-intrinsic-size:auto 2422px}
  section[aria-labelledby="who-h"]{contain-intrinsic-size:auto 1622px}
  section[aria-labelledby="built-h"]{contain-intrinsic-size:auto 1172px}
  section[aria-labelledby="plans-h"]{contain-intrinsic-size:auto 702px}
}

/* Sections rise in as they arrive (home code in launch.js adds .h-rv-on only when it can animate) */
.h-rv-on .h-rv{opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease) var(--rv-d,0s),transform .8s var(--ease) var(--rv-d,0s)}
.h-rv-on .h-rv.in{opacity:1;transform:none}

/* Buy Me a Coffee logo: never recolour it. Light mode uses their official dark wordmark (bmc-logo.svg),
   dark mode swaps to their white version through <picture>. */
@media (max-width:1024px){
  .h-tools{grid-template-columns:repeat(2,minmax(0,1fr))}
  .h-gal{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:820px){
  .h-stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
  .h-eds,.h-row{grid-template-columns:1fr}
  .hx{grid-template-columns:1fr}
  .hx-stage{order:-1;min-height:0;aspect-ratio:1/1.02}
  .hx-side{padding:4px 0 8px}
  .hx-cta{padding-left:18px}
  .h-row:nth-child(even) .h-row-art{order:0}
  .h-rev-in{grid-template-columns:1fr}
  .h-rev-side{position:static}
  .h-who,.h-uses{grid-template-columns:repeat(2,minmax(0,1fr))}
  .h-steps{grid-template-columns:1fr}
}
@media (max-width:560px){
  .h-stats{grid-template-columns:1fr 1fr}
  .h-stats li:last-child{grid-column:span 2}
  .h-tools,.h-who,.h-uses,.h-plans{grid-template-columns:1fr}
  .h-gal{gap:10px}
  .h-gal span{padding:10px 12px;font-size:13px}
}
@media (prefers-reduced-motion:reduce){
  .h-rv-on .h-rv{opacity:1;transform:none;transition:none}
  .hx-ov,.hx-more,.hx-site,.hx-res>span,.hx-chips span,.hx-toast,.hx-live{transition:none}
  .hx-typed::after,.hx-spin{animation:none}
  .h-ed,.h-tools a,.h-who li,.h-gal a,.h-gal img{transition:none}
  .mk-caret{animation:none}
  .tx-tile,.tx-thumb img,.tx-acts,.tx-text,.tx-cursor{transition:none}
}