/* SuprCMO CMS: the screens only the CMS has (page not found, search with no results, unsubscribe, maintenance,
   widgets) plus the page shell. Written by hand in the redesign's tokens (public/sc/site.css); loads last. */

/* ---------- Page shell ---------- */
.sc-shell{display:contents}
.sc-skip{position:fixed;left:16px;top:-80px;z-index:1000;padding:12px 18px;border-radius:100px;background:var(--ink);color:#fff;font-size:14px;font-weight:500;transition:top .25s var(--ease-out)}
.sc-skip:focus{top:12px;outline:2px solid var(--orange);outline-offset:2px}
.nav-links a.active{color:var(--ink)}

/* ---------- Page not found / unsubscribe / maintenance ---------- */
.sc-404{position:relative;overflow:clip;min-height:min(86vh,820px);display:grid;align-items:center;padding:calc(var(--nav-h) + clamp(48px,7vw,96px)) 0 clamp(56px,7vw,96px);background:linear-gradient(180deg,var(--peach) 0%,#FFF8F5 58%,#fff 100%)}
.sc-404-in{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center}
.sc-404-code{font-size:clamp(5rem,3rem + 10vw,10rem);font-weight:600;line-height:.9;letter-spacing:-.06em;background:linear-gradient(135deg,var(--orange) 0%,#FFB59A 45%,var(--ink) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;animation:up .9s var(--ease-out) both}
.sc-404 h1{max-width:18ch;margin-top:14px;font-size:clamp(2rem,1.2rem + 3vw,3.4rem);line-height:1.08;letter-spacing:-.04em;text-wrap:balance}
.sc-404 p{max-width:560px;margin-top:16px;font-size:clamp(1rem,.95rem + .3vw,1.15rem);line-height:1.65;color:#55595E}
.sc-404 .in-search{max-width:520px;margin-top:28px}
.sc-404-acts{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:26px}
.sc-unsub{min-height:min(76vh,720px)}
.sc-unsub-card{display:flex;flex-direction:column;align-items:center;width:min(100%,620px);padding:clamp(28px,5vw,48px);border:2px solid transparent;border-radius:28px;
  background:linear-gradient(#fff,#fff) padding-box,linear-gradient(135deg,var(--orange),#FFC2AC 38%,#D9DADC 66%,var(--ink)) border-box;box-shadow:var(--sh-3)}
.sc-unsub-card h1{margin-top:16px}
.sc-unsub-card .btn{margin-top:22px}
.sc-unsub-card .sc-404-acts .btn{margin-top:0}
.sc-note.err{margin-top:14px;padding:10px 14px;border-radius:12px;background:#FFF1EE;color:#B4261A;font-size:14px}
.sc-maint-logo{width:auto;height:44px;margin-bottom:22px}

/* ---------- Insights extras ---------- */
.sc-empty{display:flex;flex-direction:column;align-items:center;gap:8px;padding:48px 20px;border:1px dashed var(--line-2);border-radius:24px;background:var(--soft);text-align:center}
.sc-empty b{font-size:18px;font-weight:500;color:var(--ink)}
.sc-empty span{font-size:15px;color:var(--muted)}
.sc-empty .btn{margin-top:10px}

/* ---------- Footer social links (Appearance > Footer) ---------- */
.foot-social{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.foot-social a{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.16);color:#fff;font-size:16px;transition:background-color .25s,border-color .25s,translate .35s var(--ease-out)}
.foot-social a:hover{translate:0 -2px;border-color:var(--orange);background:var(--orange)}

/* ---------- Widgets (Appearance > Widgets: text, latest posts, categories, search) ---------- */
.sc-widget{padding:22px 24px;border-radius:20px;border:1px solid var(--line);background:#fff}
.sc-widget-t{display:block;margin-bottom:10px;font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--orange-ink)}
.sc-widget li + li{margin-top:8px}
.sc-widget a:hover{color:var(--orange-ink)}
.sc-widget input{width:100%;height:46px;padding:0 16px;border-radius:100px;border:1px solid var(--line-2);font:inherit}

/* ---------- Homepage spacing (1.0.1) ---------- */
/* Less than half the old space between the homepage sections (84–136px above and below each one): a white section
   next to another white section or to a grey/dark band sits closer still, and headings, timeline steps and the footer
   call-to-action sit closer to their content. ".sc-front" is set on the page wrapper of the front page only
   (src/components/sc/sc-page.tsx), so the other pages keep their spacing. */
.sc-front .section{padding:clamp(40px,4.5vw,64px) 0}
.sc-front .section:not(.band) + .section:not(.band){padding-top:clamp(8px,1.8vw,24px)}
.sc-front .band + .section:not(.band){padding-top:clamp(32px,3.4vw,48px)}
.sc-front .section:not(.band):has(+ .band){padding-bottom:clamp(32px,3.4vw,48px)}
.sc-front .hero{padding-bottom:clamp(24px,3vw,44px)}
.sc-front .hero + .section:not(.band){padding-top:clamp(32px,3.5vw,52px)}
.sc-front .sec-head{gap:14px;margin-bottom:clamp(28px,3.5vw,48px)}
.sc-front .center-cta{margin-top:clamp(24px,3vw,40px)}
.sc-front .timeline{gap:clamp(36px,4.5vw,64px)}
.sc-front .footer{padding-top:clamp(52px,6vw,88px)}
.sc-front .cta{padding-bottom:clamp(44px,5.5vw,72px)}

/* ---------- Endless articles (1.0.2, public/sc/articles.js) ---------- */
/* Below a blog post: the "Up next" box (a link to the next article; while it loads, a small spinner), the line that
   starts each article loaded below, and a slimmer cover hero for those (the first one sits under the fixed menu). */
.art-next{display:flex;justify-content:center;padding:0 20px clamp(48px,6vw,80px)}
.art-next-link{display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px 18px;width:min(100%,720px);padding:18px 22px 18px 26px;border-radius:22px;background:#fff;border:1px solid var(--line);box-shadow:var(--sh-1);text-align:left;transition:border-color .25s,box-shadow .3s,translate .4s var(--ease-out)}
.art-next-link:hover{border-color:rgba(255,93,41,.45);box-shadow:var(--sh-2);translate:0 -2px}
.art-next-link small{grid-column:1;display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--orange-ink)}
.art-next-link b{grid-column:1;font-size:clamp(1rem,.95rem + .3vw,1.15rem);font-weight:500;line-height:1.35;color:var(--ink)}
.art-next-link .i{grid-column:2;grid-row:1 / span 2;width:40px;height:40px;padding:11px;border-radius:50%;background:var(--ink);color:#fff}
.art-next.is-loading .art-next-link small::after{content:"";width:11px;height:11px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:art-spin .8s linear infinite}
.art-next.no-motion .art-next-link small::after{animation-duration:2.4s}
@keyframes art-spin{to{transform:rotate(360deg)}}
.art-sep{display:flex;align-items:center;gap:16px;width:min(100% - 40px,1040px);margin:0 auto}
.art-sep::before,.art-sep::after{content:"";flex:1;height:1px;background:var(--line-2)}
.art-sep span{padding:6px 14px;border-radius:100px;background:var(--peach);color:var(--orange-ink);font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.art-chain .art-hero{padding-top:clamp(26px,3vw,40px)}

/* ---------- Book a call: the details step (1.0.3, public/sc/book.js) ---------- */
/* The scheduler's own form (like the DotnDot booking widget) in the SuprCMO design: rounded fields, orange focus ring,
   a short code check when Security > CAPTCHA for contact is on. */
.bk-form{display:flex;flex-direction:column;gap:18px;padding:22px clamp(18px,3vw,30px) 26px}
.bk-form-h h3{font-size:clamp(1.25rem,1.1rem + .6vw,1.5rem);letter-spacing:-.025em}
.bk-form-h p{margin-top:6px;font-size:14.5px;color:var(--muted)}
.bk-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.bk-fld{display:flex;flex-direction:column;gap:7px;min-width:0}
.bk-fld > span{font-size:13px;font-weight:500;color:var(--ink)}
.bk-fld i{font-style:normal;color:var(--orange)}
.bk-fld input,.bk-fld textarea{width:100%;padding:12px 14px;border-radius:14px;border:1px solid var(--line-2);background:#fff;font:inherit;font-size:15px;color:var(--ink);transition:border-color .2s,box-shadow .2s}
.bk-fld textarea{min-height:92px;line-height:1.55;resize:vertical}
.bk-fld input::placeholder,.bk-fld textarea::placeholder{color:#A3A3A3}
.bk-fld input:focus,.bk-fld textarea:focus{outline:none;border-color:var(--orange);box-shadow:0 0 0 4px rgba(255,93,41,.14)}
.bk-fld.bad input,.bk-fld.bad textarea{border-color:#E5484D;box-shadow:0 0 0 4px rgba(229,72,77,.12)}
.bk-wide{grid-column:1 / -1}
.bk-hp{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0;pointer-events:none}
.bk-cap{display:flex;align-items:flex-end;gap:12px}
.bk-cap[hidden]{display:none}
.bk-cap-code{display:grid;place-items:center;min-width:112px;height:48px;padding:0 14px;border-radius:14px;background:var(--ink);color:#fff;font-size:17px;font-weight:600;letter-spacing:.32em;-webkit-user-select:none;user-select:none}
.bk-cap .bk-fld{flex:1}
.bk-cap-new{display:grid;place-items:center;flex:none;width:48px;height:48px;border-radius:50%;background:var(--soft);font-size:19px;color:var(--ink);transition:background-color .2s}
.bk-cap-new:hover{background:var(--peach)}
.bk-err{padding:10px 14px;border-radius:12px;background:#FFF1EE;color:#B4261A;font-size:14px}
.bk-err[hidden]{display:none}
.bk-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
.bk-actions small{font-size:12.5px;color:var(--muted)}
.bk-actions small a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.bk-actions .btn[disabled]{opacity:.6;pointer-events:none}
@media (max-width:640px){
  .bk-grid{grid-template-columns:1fr}
  .bk-actions .btn{width:100%}
}