/* sitekit shared components - themed by each site via these custom properties.
   Defaults use :where(:root) (zero specificity) so a site's own :root values always win, whatever the load order. */
:where(:root){
  --sk-bg:#fff; --sk-surface:#fff; --sk-text:#18181b; --sk-muted:#71717a; --sk-line:rgba(0,0,0,.12);
  --sk-accent:#111; --sk-accent-ink:#fff; --sk-radius:14px; --sk-font:inherit; --sk-font-display:inherit;
  --sk-danger:#b42318; --sk-success:#067647;
}
.sk-wrap{max-width:460px;margin:0 auto;padding:clamp(32px,8vw,96px) 16px}
.sk-wrap.wide{max-width:760px}
.sk-card{background:var(--sk-surface);color:var(--sk-text);border:1px solid var(--sk-line);border-radius:calc(var(--sk-radius) + 6px);padding:clamp(22px,5vw,40px);box-shadow:0 20px 60px -30px rgba(0,0,0,.35)}
.sk-card h1{font-family:var(--sk-font-display);font-size:clamp(26px,4vw,34px);line-height:1.15;margin:0 0 6px;letter-spacing:-.01em}
.sk-card h2{font-family:var(--sk-font-display);font-size:20px;margin:28px 0 10px}
.sk-card .sk-sub{color:var(--sk-muted);margin:0 0 24px;font-size:15px}
.sk-field{display:block;margin:0 0 16px}
.sk-field>span{display:block;font-size:13px;font-weight:600;margin:0 0 6px;color:var(--sk-text)}
.sk-input,.sk-field input,.sk-field select,.sk-field textarea{width:100%;box-sizing:border-box;font:inherit;font-size:16px;padding:12px 14px;border-radius:var(--sk-radius);border:1px solid var(--sk-line);background:var(--sk-bg);color:var(--sk-text);transition:border-color .15s,box-shadow .15s}
.sk-field input:focus,.sk-field select:focus,.sk-field textarea:focus{outline:none;border-color:var(--sk-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--sk-accent) 22%,transparent)}
.sk-check{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--sk-muted);margin:4px 0 18px}
.sk-check input{margin-top:3px;accent-color:var(--sk-accent)}
.sk-check a{color:inherit}
.sk-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;font:inherit;font-weight:700;font-size:16px;padding:14px 18px;border-radius:var(--sk-radius);border:0;background:var(--sk-accent);color:var(--sk-accent-ink);cursor:pointer;text-decoration:none;transition:transform .15s,filter .15s}
.sk-btn:hover{filter:brightness(1.08);transform:translateY(-1px)}
.sk-btn.sk-ghost{background:transparent;color:var(--sk-text);border:1px solid var(--sk-line)}
.sk-btn.sk-danger{background:var(--sk-danger);color:#fff}
.sk-btn.sk-inline{width:auto}
.sk-alert{padding:12px 14px;border-radius:var(--sk-radius);font-size:14px;margin:0 0 16px;border:1px solid}
.sk-alert.error{color:var(--sk-danger);border-color:color-mix(in srgb,var(--sk-danger) 35%,transparent);background:color-mix(in srgb,var(--sk-danger) 7%,transparent)}
.sk-alert.success{color:var(--sk-success);border-color:color-mix(in srgb,var(--sk-success) 35%,transparent);background:color-mix(in srgb,var(--sk-success) 7%,transparent)}
.sk-alert.info{color:var(--sk-text);border-color:var(--sk-line);background:color-mix(in srgb,var(--sk-text) 4%,transparent)}
.sk-links{display:flex;justify-content:space-between;gap:12px;margin-top:18px;font-size:14px;flex-wrap:wrap}
.sk-links a{color:var(--sk-muted)}
.sk-hp{position:absolute!important;left:-9999px!important;height:0;width:0;opacity:0}
.sk-flashes{position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:9999;display:grid;gap:8px;width:min(560px,calc(100% - 32px))}
.sk-flashes .sk-alert{margin:0;background:var(--sk-surface);box-shadow:0 12px 30px -12px rgba(0,0,0,.35);animation:skdrop .35s ease-out}
@keyframes skdrop{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
/* consent banner */
.sk-consent{position:fixed;left:16px;right:16px;bottom:16px;z-index:9998;max-width:520px;margin-left:auto;background:var(--sk-surface);color:var(--sk-text);border:1px solid var(--sk-line);border-radius:calc(var(--sk-radius) + 4px);padding:18px;box-shadow:0 20px 50px -20px rgba(0,0,0,.45);font-size:14px;line-height:1.5;display:none}
.sk-consent.show{display:block;animation:skdrop .35s ease-out}
.sk-consent p{margin:0 0 12px}
.sk-consent a{color:inherit}
.sk-consent .row{display:flex;gap:8px;flex-wrap:wrap}
.sk-consent button{flex:1;min-width:120px;font:inherit;font-weight:700;padding:10px 14px;border-radius:var(--sk-radius);cursor:pointer;border:1px solid var(--sk-line);background:transparent;color:var(--sk-text)}
.sk-consent button.accept{background:var(--sk-accent);color:var(--sk-accent-ink);border-color:transparent}
.sk-demo-banner{position:fixed;left:0;right:0;bottom:0;z-index:9997;background:#fef3c7;color:#78350f;text-align:center;font:600 12px/1.4 system-ui,sans-serif;padding:5px 12px;box-shadow:0 -1px 0 rgba(0,0,0,.08);pointer-events:none;opacity:.94}
.sk-kv{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;font-size:15px;margin:0 0 16px}
.sk-kv dt{color:var(--sk-muted)}
.sk-kv dd{margin:0;font-weight:600}
/* legal / long-form pages */
.sk-legal{max-width:780px;margin:0 auto;padding:clamp(40px,8vw,96px) 16px;color:var(--sk-text);font-size:16px;line-height:1.7}
.sk-legal h1{font-family:var(--sk-font-display);font-size:clamp(30px,5vw,44px);line-height:1.1;margin:0 0 8px;letter-spacing:-.015em}
.sk-legal .upd{color:var(--sk-muted);margin:0 0 32px;font-size:14px}
.sk-legal h2{font-family:var(--sk-font-display);font-size:21px;margin:36px 0 10px}
.sk-legal h3{font-size:17px;margin:22px 0 6px}
.sk-legal ul{padding-left:20px}
.sk-legal li{margin:4px 0}
.sk-legal table{width:100%;border-collapse:collapse;font-size:15px;margin:12px 0}
.sk-legal td,.sk-legal th{border-bottom:1px solid var(--sk-line);padding:8px 10px 8px 0;text-align:left;vertical-align:top}
.sk-legal a{color:inherit}
.sk-legal .note{background:color-mix(in srgb,var(--sk-text) 5%,transparent);border-radius:var(--sk-radius);padding:14px 16px;font-size:15px}

/* ---- Blog (sitekit/content.py) - inherits each brand's fonts/colours through the --sk-* variables ---- */
.sk-blog{max-width:760px;margin:0 auto;padding:clamp(36px,7vw,88px) 16px clamp(48px,8vw,104px);color:var(--sk-text);font-size:17px;line-height:1.7}
.sk-blog a:not(.sk-btn){color:inherit;text-decoration-color:color-mix(in srgb,var(--sk-accent) 70%,currentColor);text-underline-offset:3px;text-decoration-thickness:2px}
.sk-blog a:not(.sk-btn):hover{text-decoration-color:currentColor}
.sk-blog-head{margin:0 0 28px}
.sk-blog-head h1{font-family:var(--sk-font-display);font-size:clamp(30px,5vw,48px);line-height:1.1;letter-spacing:-.015em;margin:0 0 12px;text-wrap:balance}
.sk-blog-eyebrow{text-transform:uppercase;letter-spacing:.12em;font-size:12px;font-weight:700;color:var(--sk-muted);margin:0 0 10px}
.sk-blog-intro{font-size:19px;color:var(--sk-muted);margin:0;max-width:60ch}
.sk-blog-page{font-size:.5em;color:var(--sk-muted);font-weight:500;letter-spacing:0}
.sk-blog-meta{font-size:14px;color:var(--sk-muted);margin:0 0 6px}
.sk-blog-list{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.sk-blog-card{display:grid;grid-template-columns:1fr;gap:16px;padding:20px;border:1px solid var(--sk-line);border-radius:calc(var(--sk-radius) + 4px);background:color-mix(in srgb,var(--sk-surface) 92%,transparent)}
.sk-blog-card:has(.sk-blog-thumb){grid-template-columns:180px 1fr}
.sk-blog-card h2{font-family:var(--sk-font-display);font-size:clamp(20px,2.6vw,24px);line-height:1.25;margin:0 0 6px}
.sk-blog-card h2 a{text-decoration:none}
.sk-blog-card h2 a:hover{text-decoration:underline}
.sk-blog-card p{margin:0}
.sk-blog-thumb img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--sk-radius);display:block}
.sk-blog-pager{display:flex;justify-content:space-between;align-items:center;margin:32px 0 0;font-size:15px;color:var(--sk-muted)}
.sk-blog-crumbs{font-size:14px;color:var(--sk-muted);margin:0 0 18px}
.sk-blog-crumbs a{text-decoration:none}
.sk-blog-hero{margin:0 0 28px}
.sk-blog-hero img{width:100%;height:auto;border-radius:calc(var(--sk-radius) + 4px);display:block}
.sk-blog-body h2{font-family:var(--sk-font-display);font-size:clamp(23px,3vw,29px);line-height:1.25;margin:40px 0 12px;letter-spacing:-.01em}
.sk-blog-body h3{font-family:var(--sk-font-display);font-size:20px;line-height:1.3;margin:28px 0 8px}
.sk-blog-body p,.sk-blog-body ul,.sk-blog-body ol{margin:0 0 18px}
.sk-blog-body li{margin:6px 0}
.sk-blog-body img{max-width:100%;height:auto;border-radius:var(--sk-radius)}
.sk-blog-body blockquote{margin:24px 0;padding:6px 0 6px 20px;border-left:4px solid var(--sk-accent);color:var(--sk-muted);font-size:18px}
.sk-blog-body table{width:100%;border-collapse:collapse;font-size:15px;margin:20px 0;display:block;overflow-x:auto}
.sk-blog-body th,.sk-blog-body td{border-bottom:1px solid var(--sk-line);padding:9px 12px 9px 0;text-align:left;vertical-align:top}
.sk-blog-body code{font-size:.9em;background:color-mix(in srgb,var(--sk-text) 7%,transparent);padding:2px 6px;border-radius:6px}
.sk-blog-body pre{overflow-x:auto;padding:16px;border-radius:var(--sk-radius);background:color-mix(in srgb,var(--sk-text) 6%,transparent)}
.sk-blog-body hr{border:0;border-top:1px solid var(--sk-line);margin:36px 0}
.sk-blog-faq{margin:44px 0 0;padding:24px 0 0;border-top:1px solid var(--sk-line)}
.sk-blog-faq h2{font-family:var(--sk-font-display);font-size:clamp(22px,3vw,27px);margin:0 0 12px}
.sk-blog-faq details{border-bottom:1px solid var(--sk-line);padding:14px 0}
.sk-blog-faq summary{cursor:pointer;font-weight:700;list-style-position:outside}
.sk-blog-faq details p{margin:10px 0 0;color:var(--sk-text)}
.sk-blog-related{margin:48px 0 0;padding:24px;border-radius:calc(var(--sk-radius) + 4px);background:color-mix(in srgb,var(--sk-text) 4%,transparent)}
.sk-blog-related h2{font-family:var(--sk-font-display);font-size:20px;margin:0 0 12px}
.sk-blog-related ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.sk-blog-related li a{font-weight:700;display:block}
.sk-blog-related li span{font-size:15px;color:var(--sk-muted)}
.sk-blog-preview{background:#fef3c7;color:#92400e;border-radius:var(--sk-radius);padding:10px 14px;font-size:15px}
@media (max-width:620px){.sk-blog-card:has(.sk-blog-thumb){grid-template-columns:1fr}.sk-blog{font-size:16.5px}}
/* "Check your spam" notice + hint (sitekit/email_notice.html, email_hint.html, window.skEmailNotice) */
.sk-email-notice{margin:14px 0;padding:12px 14px;border-radius:min(var(--sk-radius,12px),16px);font-size:14.5px;line-height:1.5;text-align:left;border:1px solid color-mix(in srgb,currentColor 22%,transparent);background:color-mix(in srgb,currentColor 5%,transparent)}
.sk-email-notice strong{font-weight:700}
.sk-email-hint{display:block;margin-top:6px;font-size:13px;line-height:1.4;opacity:.8}
/* the brand box under every post and at the end of the blog index (blog/_cta.html) */
.sk-blog-cta{margin:40px 0 0;padding:clamp(20px,4vw,30px);border-radius:calc(var(--sk-radius) + 6px);border:1px solid color-mix(in srgb,var(--sk-accent) 35%,var(--sk-line));background:color-mix(in srgb,var(--sk-accent) 8%,var(--sk-surface,transparent))}
.sk-blog-cta-brand{margin:0 0 6px;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--sk-muted)}
.sk-blog-cta h2{font-family:var(--sk-font-display);font-size:clamp(22px,3vw,28px);line-height:1.2;margin:0 0 8px}
.sk-blog-cta p{margin:0 0 16px}
.sk-blog-cta-actions{display:flex;flex-wrap:wrap;gap:10px}
.sk-blog-cta-actions .sk-btn{width:auto;text-decoration:none}