/*
Theme Name: Studio 404
Theme URI: https://studio-404.de/
Author: Studio 404
Author URI: https://studio-404.de/
Description: Flexibles, block-editor-freundliches WordPress-Theme für Studio 404 mit Floating Header, Mega-Menü, Sitecheck-/Chatbot-Mounts und interaktivem Terminal-Footer.
Version: 0.5.6
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 8.0
Text Domain: studio404
*/

:root {
  --s404-accent: #d6fb00;
  --s404-accent-text: #101010;
  --s404-bg: #f6f6f3;
  --s404-surface: #ffffff;
  --s404-text: #111111;
  --s404-muted: #656565;
  --s404-border: rgba(17,17,17,.13);
  --s404-footer-bg: #0a0a0a;
  --s404-footer-text: #f5f5f2;
  --s404-header-scroll-bg: rgba(255,255,255,.94);
  --s404-button-radius: 8px;
  --s404-card-radius: 12px;
  --s404-content-width: 1280px;
  --s404-header-height: 72px;
  --s404-logo-height: 38px;
  --s404-section-gap: 120px;
  --s404-chat-offset-x: 24px;
  --s404-chat-offset-y: 24px;
  --s404-font: "Space Grotesk", Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --s404-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--s404-text);
  background: var(--s404-bg);
  font-family: var(--s404-font);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: 4px; }
button, input, textarea, select { font: inherit; }
::selection { background: var(--s404-accent); color: #111; }

.s404-container {
  width: min(calc(100% - 40px), var(--s404-content-width));
  margin-inline: auto;
}
body.s404-header-full .s404-header .s404-container { width: calc(100% - 48px); max-width: none; }
.screen-reader-text { position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }

/* Header */
.s404-header {
  position: relative;
  z-index: 100;
  width: 100%;
  pointer-events: none;
}
.s404-header.is-sticky { position: sticky; top: 16px; }
body.admin-bar .s404-header.is-sticky { top: 48px; }
.s404-header__inner {
  min-height: var(--s404-header-height);
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: clamp(18px, 2.5vw, 38px);
  align-items: center;
  padding-inline: 22px;
  border-radius: 18px;
  pointer-events: auto;
  transition: background-color .28s ease, box-shadow .28s ease, backdrop-filter .28s ease, border-color .28s ease, transform .28s ease;
}
.s404-header.is-floating .s404-header__inner { width: min(calc(100% - 40px), var(--s404-content-width)); }
.s404-header.is-transparent:not(.is-scrolled) .s404-header__inner { background: rgba(255,255,255,.04); border: 1px solid transparent; box-shadow: none; }
.s404-header.is-scrolled .s404-header__inner,
.s404-header:not(.is-transparent) .s404-header__inner {
  background: var(--s404-header-scroll-bg);
  border: 1px solid rgba(17,17,17,.08);
  box-shadow: 0 16px 50px rgba(0,0,0,.08);
}
.s404-header.has-blur.is-scrolled .s404-header__inner,
.s404-header.has-blur:not(.is-transparent) .s404-header__inner {
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
}
.s404-header:has(.s404-menu-item--mega:hover) .s404-header__inner,
.s404-header:has(.s404-menu-item--mega:focus-within) .s404-header__inner {
  background: rgba(255,255,255,.98);
  border-color: rgba(17,17,17,.09);
  box-shadow: 0 20px 64px rgba(0,0,0,.11);
}
.s404-header__brand-wrap { min-width: 110px; }
.s404-brand,.custom-logo-link { display:inline-flex;align-items:center;text-decoration:none; }
.s404-brand { position:relative;font-weight:700;font-size:28px;letter-spacing:-.07em;line-height:1;color:#111; }
.s404-brand img,.custom-logo { max-height:var(--s404-logo-height);width:auto;display:block; }
.s404-brand__text { position:relative;display:inline-block; }
.s404-brand__cursor { color:var(--s404-accent);margin-left:1px;animation:s404Blink 1.15s steps(1) infinite; }

.s404-nav { justify-self:center; }
.s404-nav > ul { list-style:none;display:flex;gap:clamp(18px,2.25vw,34px);margin:0;padding:0;align-items:center; }
.s404-nav li { position:relative; }
.s404-nav a { text-decoration:none;font-size:14px;font-weight:600;letter-spacing:-.01em; }
.s404-nav > ul > li > a { display:flex;align-items:center;min-height:var(--s404-header-height); }
.s404-nav > ul > li > a:hover,
.s404-nav .current-menu-item > a,
.s404-nav .current_page_item > a { color:#000; }
.s404-nav > ul > li > a::after { content:"";position:absolute;left:0;right:0;bottom:16px;height:2px;background:var(--s404-accent);transform:scaleX(0);transform-origin:left;transition:transform .2s ease; }
.s404-nav > ul > li > a:hover::after,
.s404-nav .current-menu-item > a::after { transform:scaleX(1); }
.s404-header.layout-nav-right .s404-nav { justify-self:end; }
.s404-header.layout-split .s404-nav { justify-self:start; }
.s404-header__actions { display:flex;gap:10px;align-items:center;justify-self:end; }

.s404-btn,.wp-block-button__link {
  display:inline-flex;justify-content:center;align-items:center;gap:.55em;min-height:44px;padding:11px 18px;
  border-radius:var(--s404-button-radius);border:1px solid transparent;background:var(--s404-accent);color:var(--s404-accent-text);
  text-decoration:none;font-weight:700;font-size:13px;letter-spacing:.01em;transition:transform .18s ease,filter .18s ease,background-color .18s ease,border-color .18s ease;
}
.s404-btn:hover,.wp-block-button__link:hover { transform:translateY(-2px);filter:brightness(.97); }
.s404-btn--outline,.wp-block-button.is-style-outline .wp-block-button__link { background:transparent;border-color:var(--s404-border);color:var(--s404-text); }
.s404-btn--text { background:transparent;color:var(--s404-text);padding-inline:6px; }
.s404-menu-toggle { display:none;border:1px solid var(--s404-border);background:rgba(255,255,255,.8);border-radius:10px;width:44px;height:44px;font-size:22px;line-height:1; }

/* Mega menu */
.s404-menu-item--mega > a::before { content:"+";order:2;margin-left:6px;font-family:var(--s404-mono);font-size:11px;transition:transform .2s ease; }
.s404-menu-item--mega:hover > a::before,.s404-menu-item--mega:focus-within > a::before { transform:rotate(45deg); }
.s404-mega-menu {
  position:absolute;left:50%;top:calc(100% - 7px);width:min(940px,calc(100vw - 72px));padding:0;
  background:rgba(255,255,255,.985);border:1px solid rgba(17,17,17,.09);border-radius:16px;box-shadow:0 28px 82px rgba(0,0,0,.13);
  opacity:0;visibility:hidden;transform:translate(-50%,-9px);transform-origin:top center;transition:opacity .18s ease,transform .22s ease,visibility .18s ease;pointer-events:none;overflow:hidden;
}
.s404-menu-item--mega:hover > .s404-mega-menu,.s404-menu-item--mega:focus-within > .s404-mega-menu { opacity:1;visibility:visible;transform:translate(-50%,0);pointer-events:auto; }
.s404-mega-menu__head { display:flex;align-items:end;justify-content:space-between;gap:30px;padding:20px 22px 17px;border-bottom:1px solid var(--s404-border); }
.s404-mega-menu__head .s404-kicker { margin:0 0 6px; }
.s404-mega-menu__head strong { display:block;font-size:23px;line-height:1;letter-spacing:-.045em; }
.s404-mega-menu__head > a { font:700 10px/1 var(--s404-mono);letter-spacing:.03em;text-decoration:none;white-space:nowrap; }
.s404-mega-menu__body { display:grid;grid-template-columns:minmax(0,1.7fr) minmax(245px,.82fr); }
.s404-mega-menu__services { display:grid;grid-template-columns:1fr 1fr;border-right:1px solid var(--s404-border); }
.s404-mega-card { min-height:118px;padding:18px 18px 16px;display:grid!important;grid-template-columns:38px 1fr auto;gap:13px;align-items:start;text-decoration:none!important;border-bottom:1px solid var(--s404-border);transition:background .18s ease; }
.s404-mega-card:nth-child(odd) { border-right:1px solid var(--s404-border); }
.s404-mega-card:last-child,.s404-mega-card:nth-last-child(2):nth-child(odd) { border-bottom:0; }
.s404-mega-card:last-child:nth-child(odd) { border-right:0; }
.s404-mega-card:hover { background:#f7f7f3; }
.s404-mega-card__icon,.s404-mega-tool__icon { width:38px;height:38px;border:1px solid var(--s404-border);border-radius:9px;background:#fff;display:grid;place-items:center;transition:background .18s ease,border-color .18s ease,transform .18s ease; }
.s404-mega-card:hover .s404-mega-card__icon { background:var(--s404-accent);border-color:var(--s404-accent);transform:translateY(-2px); }
.s404-mega-card svg,.s404-mega-tool svg { width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round; }
.s404-mega-card small,.s404-mega-tool small { display:block;font:700 9px/1.2 var(--s404-mono);letter-spacing:.055em;color:#8a8a84;margin:1px 0 7px; }
.s404-mega-card b,.s404-mega-tool b { display:block;font-size:14px;line-height:1.15; }
.s404-mega-card em,.s404-mega-tool em { display:block;margin-top:5px;color:var(--s404-muted);font-style:normal;font-size:11px;line-height:1.35; }
.s404-mega-card > i,.s404-mega-tool > i { font-style:normal;font-size:12px;transition:transform .18s ease; }
.s404-mega-card:hover > i,.s404-mega-tool:hover > i { transform:translate(2px,-2px); }
.s404-mega-menu__tools { padding:17px;display:flex;flex-direction:column;gap:8px;background:#fbfbf8; }
.s404-mega-menu__tools > .s404-kicker { margin:1px 0 4px 2px; }
.s404-mega-tool { display:grid!important;grid-template-columns:38px 1fr auto;gap:12px;align-items:start;padding:13px;border:1px solid var(--s404-border);border-radius:10px;background:#fff;text-decoration:none!important;transition:transform .18s ease,border-color .18s ease,background .18s ease; }
.s404-mega-tool:hover { transform:translateY(-2px);border-color:rgba(17,17,17,.2); }
.s404-mega-tool--accent { background:color-mix(in srgb,var(--s404-accent) 64%,white);border-color:color-mix(in srgb,var(--s404-accent) 75%,#111); }
.s404-mega-tool--accent .s404-mega-tool__icon { background:rgba(255,255,255,.55);border-color:rgba(0,0,0,.08); }
.s404-mega-tool--lab { margin-top:auto;background:#111;color:#fff!important;border-color:#111; }
.s404-mega-tool--lab em { color:rgba(255,255,255,.56); }
.s404-mega-tool--lab small { color:rgba(255,255,255,.45);display:flex;align-items:center;gap:6px; }
.s404-mega-tool--lab .s404-mega-tool__icon { color:var(--s404-accent);background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.1); }
.s404-mega-card--accent { background:color-mix(in srgb,var(--s404-accent) 62%,white); }
.s404-mega-card--accent .s404-mega-card__icon { background:rgba(255,255,255,.58);border-color:rgba(0,0,0,.08); }
.s404-mega-card--dark { background:#111;color:#fff!important; }
.s404-mega-card--dark small { color:rgba(255,255,255,.46); }
.s404-mega-card--dark em { color:rgba(255,255,255,.62); }
.s404-mega-card--dark .s404-mega-card__icon { color:var(--s404-accent);background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.1); }
.s404-mega-tool--dark { background:#111;color:#fff!important;border-color:#111; }
.s404-mega-tool--dark em { color:rgba(255,255,255,.56); }
.s404-mega-tool--dark small { color:rgba(255,255,255,.45); }
.s404-mega-tool--dark .s404-mega-tool__icon { color:var(--s404-accent);background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.1); }

.s404-status-dot { width:6px;height:6px;border-radius:50%;background:var(--s404-accent);display:inline-block;box-shadow:0 0 0 4px rgba(214,251,0,.08); }

/* Main / content */
.site-main { min-height:55vh; }
.s404-content { padding-block:64px var(--s404-section-gap); }
.s404-content > .entry-content { width:100%; }
.entry-content > * { margin-block-start:0; }
.entry-content > * + * { margin-block-start:1.4em; }
.entry-content > .alignwide { width:min(calc(100% - 40px),var(--s404-content-width));max-width:none;margin-inline:auto; }
.entry-content > .alignfull { width:100%;max-width:none; }
.s404-wide-content > :where(:not(.alignfull):not(.alignwide)) { width:min(calc(100% - 40px),920px);margin-inline:auto; }
.s404-page-hero { padding-top:clamp(82px,8vw,130px);padding-bottom:clamp(38px,5vw,70px); }
.s404-page-hero h1 { margin-bottom:0;font-size:clamp(64px,8vw,124px); }
.s404-page-hero--large { padding-top:clamp(100px,10vw,160px);padding-bottom:clamp(48px,6vw,86px); }
.s404-page-hero--large h1 { font-size:clamp(74px,9.6vw,148px); }
.s404-page-hero--compact { padding-top:clamp(54px,5.5vw,82px);padding-bottom:clamp(24px,3vw,38px); }
.s404-page-hero--compact h1 { font-size:clamp(42px,5.5vw,76px);letter-spacing:-.045em; }
.s404-page-hero--minimal { padding-top:clamp(38px,4vw,60px);padding-bottom:clamp(18px,2.4vw,30px); }
.s404-page-hero--minimal .s404-page-hero__kicker { display:none; }
.s404-page-hero--minimal h1 { font-size:clamp(30px,4vw,52px);letter-spacing:-.035em; }
.s404-page-hero + .s404-content { padding-top:0; }
.s404-content--no-page-header { padding-top:clamp(48px,6vw,82px); }

h1,h2,h3,h4 { line-height:.98;letter-spacing:-.05em;margin-top:0; }
h1 { font-size:clamp(56px,8.5vw,130px); }
h2 { font-size:clamp(42px,5.5vw,82px); }
h3 { font-size:clamp(25px,2.6vw,39px); }
h4 { font-size:clamp(18px,1.6vw,25px); }
p { color:inherit; }
.s404-kicker,.s404-check-eyebrow,.is-style-s404-kicker,.is-style-s404-kicker-accent,.is-style-s404-kicker-dark,.is-style-s404-kicker-outline { font-family:var(--s404-mono);font-size:11px;line-height:1.15;letter-spacing:.075em;text-transform:uppercase; }
.is-style-s404-kicker-accent,.s404-kicker--accent,.s404-check-eyebrow--accent { display:inline-flex;width:fit-content;padding:7px 10px;border-radius:4px;background:var(--s404-accent);color:var(--s404-accent-text);font-weight:700; }
.is-style-s404-kicker-dark,.s404-kicker--dark,.s404-check-eyebrow--dark { display:inline-flex;width:fit-content;padding:7px 10px;border-radius:4px;background:#111;color:var(--s404-accent);font-weight:700; }
.is-style-s404-kicker-outline,.s404-kicker--outline,.s404-check-eyebrow--outline { display:inline-flex;width:fit-content;padding:6px 9px;border:1px solid currentColor;border-radius:4px;background:transparent;color:var(--s404-text);font-weight:700; }
.s404-section-lead { max-width:760px;font-size:clamp(18px,2vw,26px);line-height:1.35;color:var(--s404-muted); }

/* Gutenberg helpers */
.wp-block-group.s404-section { padding-block:var(--s404-section-gap); }
.wp-block-group.s404-section--surface { background:var(--s404-surface); }
.wp-block-group.s404-section--dark { background:#0d0d0d;color:#fff; }
.wp-block-columns.s404-grid { gap:18px; }
.s404-card { height:100%;padding:clamp(24px,3vw,38px);border:1px solid var(--s404-border);border-radius:var(--s404-card-radius);background:rgba(255,255,255,.48); }
.s404-card--dark { background:#0c0c0c;color:#fff;border-color:rgba(255,255,255,.12); }
.s404-card--dark a { color:#fff; }
.s404-tag { display:inline-flex;padding:5px 9px;border-radius:999px;background:var(--s404-accent);color:var(--s404-accent-text);font:700 10px/1.1 var(--s404-mono);text-transform:uppercase; }

/* Hero */
.s404-hero { padding-top:clamp(108px,10vw,168px)!important;padding-bottom:0!important;position:relative;overflow:hidden;background:#0b0b0b;color:#fff;isolation:isolate; }
.s404-hero::before { content:"";position:absolute;inset:0;z-index:0;background:url("assets/images/studio404-demo-hero.jpg") 52% center/cover no-repeat;filter:saturate(.9) contrast(1.04);transform:scale(1.01);pointer-events:none; }
.s404-hero::after { content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(90deg,rgba(7,7,7,.90) 0%,rgba(7,7,7,.72) 35%,rgba(7,7,7,.38) 67%,rgba(7,7,7,.48) 100%),linear-gradient(180deg,rgba(7,7,7,.15),rgba(7,7,7,.34));pointer-events:none; }
.s404-hero > * { position:relative;z-index:2; }
.s404-hero .s404-kicker { color:var(--s404-accent); }
.s404-display { margin:0;font-size:clamp(74px,10vw,154px);line-height:.78;letter-spacing:-.08em;font-weight:700;position:relative;display:inline-block;color:#fff; }
.s404-hero__claim { margin-top:26px!important;font-size:clamp(34px,4vw,62px);color:#fff; }
.s404-hero__lead { max-width:620px;font-size:clamp(17px,1.7vw,22px);color:rgba(255,255,255,.78); }
.s404-hero__columns { gap:clamp(34px,5vw,84px); }
.s404-hero .wp-block-button.is-style-outline .wp-block-button__link { color:#fff;border-color:rgba(255,255,255,.42);background:rgba(10,10,10,.16);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); }
.s404-hero .wp-block-button.is-style-outline .wp-block-button__link:hover { border-color:rgba(255,255,255,.72);background:rgba(10,10,10,.30); }
.s404-signal-stage { min-height:520px;position:relative;isolation:isolate;border-radius:24px;overflow:hidden;background:rgba(8,8,8,.30);border:1px solid rgba(255,255,255,.15);box-shadow:0 28px 80px rgba(0,0,0,.22);backdrop-filter:blur(5px) saturate(112%);-webkit-backdrop-filter:blur(5px) saturate(112%); }
.s404-signal-stage::before { content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,0) 48%);pointer-events:none; }
.s404-signal-stage::after { content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(145deg,rgba(8,8,8,.06),rgba(8,8,8,.22) 58%,rgba(8,8,8,.38));pointer-events:none; }
.s404-signal-stage__grid { position:absolute;inset:0;z-index:1;background-image:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);background-size:42px 42px;mask-image:linear-gradient(to bottom,black,transparent 92%); }
.s404-signal-stage__badge { position:absolute;top:18px;left:18px;z-index:4;color:#fff;font:700 10px/1 var(--s404-mono);letter-spacing:.07em;display:flex;align-items:center;gap:7px; }
.s404-signal-stage__badge span { width:7px;height:7px;border-radius:50%;background:var(--s404-accent);box-shadow:0 0 0 6px rgba(214,251,0,.08); }
.s404-signal-window { position:absolute;border:1px solid rgba(255,255,255,.13);background:rgba(16,16,16,.94);color:#fff;border-radius:14px;box-shadow:0 28px 60px rgba(0,0,0,.28); }
.s404-signal-window--main { width:76%;left:12%;top:16%;z-index:3;animation:s404Float 7s ease-in-out infinite; }
.s404-signal-window__bar { height:38px;border-bottom:1px solid rgba(255,255,255,.09);display:flex;align-items:center;gap:6px;padding:0 12px;font:500 9px/1 var(--s404-mono);color:rgba(255,255,255,.48); }
.s404-signal-window__bar i { width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.16); }
.s404-signal-window__bar b { margin-left:6px;font-weight:500; }
.s404-signal-window__body { padding:22px; }
.s404-signal-window__body > small { font:700 9px/1 var(--s404-mono);color:var(--s404-accent);letter-spacing:.08em; }
.s404-signal-window__body > strong { display:block;font-size:clamp(27px,3vw,44px);line-height:.96;letter-spacing:-.055em;margin:18px 0 28px; }
.s404-signal-code { display:grid;grid-template-columns:28px 1fr auto;gap:10px;align-items:center;padding:9px 0;border-top:1px solid rgba(255,255,255,.08);font:600 9px/1 var(--s404-mono); }
.s404-signal-code span { color:rgba(255,255,255,.3); }
.s404-signal-code em { font-style:normal;color:rgba(255,255,255,.4); }
.s404-float-card { position:absolute;z-index:4;border-radius:12px;padding:13px;box-shadow:0 18px 40px rgba(0,0,0,.24);font-family:var(--s404-mono); }
.s404-float-card--scan { right:4%;bottom:7%;width:140px;background:var(--s404-accent);color:#111;animation:s404FloatReverse 6.5s ease-in-out infinite; }
.s404-float-card--scan small,.s404-float-card--scan span { display:block;font-size:8px;letter-spacing:.04em; }
.s404-float-card--scan b { display:block;font-family:var(--s404-font);font-size:46px;line-height:1;margin:6px 0;letter-spacing:-.07em; }
.s404-float-card--chat { left:5%;bottom:12%;background:#fff;color:#111;display:grid;grid-template-columns:10px 1fr;gap:7px;align-items:center;animation:s404Float 8s ease-in-out infinite reverse; }
.s404-float-card--chat i { width:8px;height:8px;border-radius:50%;background:var(--s404-accent);box-shadow:0 0 0 4px rgba(214,251,0,.2); }
.s404-float-card--chat small,.s404-float-card--chat b { grid-column:2;line-height:1; }
.s404-float-card--chat small { font-size:8px;color:#777; }
.s404-float-card--chat b { font-size:11px; }
.s404-orbit { position:absolute;z-index:2;border:1px solid rgba(214,251,0,.2);border-radius:50%; }
.s404-orbit--one { width:250px;height:250px;right:-100px;top:20%;animation:s404Spin 18s linear infinite; }
.s404-orbit--two { width:170px;height:170px;right:-60px;top:28%;border-style:dashed;animation:s404Spin 12s linear infinite reverse; }
.s404-hero-ticker { margin-top:90px;border-top:1px solid rgba(255,255,255,.16);border-bottom:1px solid rgba(255,255,255,.16);overflow:hidden;white-space:nowrap;font:700 10px/1 var(--s404-mono);letter-spacing:.08em;color:rgba(255,255,255,.58);background:rgba(5,5,5,.18);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); }
.s404-hero-ticker div { padding:13px 0;display:inline-block;min-width:max-content;animation:s404Ticker 24s linear infinite; }

/* Service sections */
.s404-services { background:#fff; }
.s404-service-grid { margin-top:18px!important; }
.s404-service-card { min-height:380px;display:flex;flex-direction:column;position:relative;overflow:hidden;transition:transform .25s ease,box-shadow .25s ease; }
.s404-service-card:hover { transform:translateY(-5px);box-shadow:0 20px 52px rgba(0,0,0,.07); }
.s404-service-card h3 { margin-top:14px; }
.s404-service-card ul { padding-left:18px;color:var(--s404-muted);margin-top:auto; }
.s404-service-card--accent { background:var(--s404-accent);color:#111;border-color:transparent; }
.s404-service-card--accent ul { color:rgba(0,0,0,.64); }
.s404-service-card--dark { background:#111;color:#fff;border-color:#111; }
.s404-service-card--dark ul { color:rgba(255,255,255,.58); }
.s404-service-detail { padding-block:72px;border-top:1px solid var(--s404-border); }
.s404-service-detail > * { max-width:850px; }

/* Projects */
.s404-work-section { background:#f1f1ed; }
.s404-project-grid { display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:54px; }
.s404-project-card { min-height:320px;border:1px solid var(--s404-border);border-radius:16px;padding:26px;background:#fff;text-decoration:none!important;display:flex;flex-direction:column;transition:transform .23s ease,box-shadow .23s ease;overflow:hidden;position:relative; }
.s404-project-card::after { content:"404";position:absolute;right:-12px;bottom:-52px;font-size:150px;line-height:1;font-weight:700;letter-spacing:-.1em;opacity:.035; }
.s404-project-card:hover { transform:translateY(-5px);box-shadow:0 22px 60px rgba(0,0,0,.08); }
.s404-project-card small { font:700 10px/1 var(--s404-mono);letter-spacing:.07em;color:var(--s404-muted); }
.s404-project-card b { font-size:clamp(36px,4vw,60px);line-height:.92;letter-spacing:-.06em;margin-top:auto; }
.s404-project-card p { max-width:520px;color:var(--s404-muted); }
.s404-project-card span { font:700 10px/1 var(--s404-mono); }
.s404-project-card--lime { background:var(--s404-accent);border-color:transparent; }
.s404-project-card--lime small,.s404-project-card--lime p { color:rgba(0,0,0,.6); }
.s404-project-card--dark { background:#0c0c0c;color:#fff;border-color:#0c0c0c; }
.s404-project-card--dark small,.s404-project-card--dark p { color:rgba(255,255,255,.5); }

/* Sitecheck */
.s404-sitecheck-section { background:#0d0d0d;color:#fff;position:relative;overflow:hidden; }
.s404-sitecheck-section::after { content:"SCAN";position:absolute;right:-.02em;bottom:-.26em;font-size:min(26vw,340px);font-weight:700;letter-spacing:-.09em;line-height:1;color:rgba(255,255,255,.026);pointer-events:none; }
.s404-sitecheck-section .wp-block-columns { position:relative;z-index:1; }
.s404-sitecheck-section ul { color:rgba(255,255,255,.58);padding-left:18px; }
.s404-sitecheck-section a { color:var(--s404-accent); }
.s404-sitecheck-mount { color:var(--s404-text); }
.s404-sitecheck-fallback { padding:clamp(28px,4vw,48px);border:1px solid rgba(255,255,255,.15);border-radius:var(--s404-card-radius);background:rgba(255,255,255,.055);color:#fff; }
.s404-sitecheck-fallback__signal { color:var(--s404-accent);font:700 11px/1.2 var(--s404-mono);letter-spacing:.08em;margin-bottom:24px; }
.s404-integration-note { font-size:13px;color:rgba(255,255,255,.65); }

/* Process */
.s404-process-section { background:#fff; }
.s404-process { display:grid;grid-template-columns:repeat(4,1fr);margin-top:56px;border-top:1px solid var(--s404-border);border-bottom:1px solid var(--s404-border); }
.s404-process > div { padding:28px 24px 32px 0;border-right:1px solid var(--s404-border); }
.s404-process > div + div { padding-left:24px; }
.s404-process > div:last-child { border-right:0; }
.s404-process span { display:block;font:700 10px/1 var(--s404-mono);color:var(--s404-muted); }
.s404-process b { display:block;font-size:18px;margin-top:44px;letter-spacing:-.03em; }
.s404-process p { color:var(--s404-muted);font-size:14px; }

/* Lab */
.s404-lab-section { background:#ecece7; }
.s404-lab-list { margin-top:56px;border-top:1px solid var(--s404-border); }
.s404-lab-list a { display:grid;grid-template-columns:52px minmax(180px,1.3fr) 90px 1fr auto;gap:18px;align-items:center;padding:20px 6px;border-bottom:1px solid var(--s404-border);text-decoration:none!important;transition:padding .18s ease,background .18s ease; }
.s404-lab-list a:hover { background:#fff;padding-inline:16px; }
.s404-lab-list span { font:700 10px/1 var(--s404-mono);color:var(--s404-muted); }
.s404-lab-list b { font-size:22px;letter-spacing:-.035em; }
.s404-lab-list em { justify-self:start;padding:5px 8px;border-radius:999px;background:#111;color:#fff;font:700 9px/1 var(--s404-mono);font-style:normal; }
.s404-lab-list a:first-child em { background:var(--s404-accent);color:#111; }
.s404-lab-list i { font-style:normal;color:var(--s404-muted);font-size:13px; }
.s404-lab-list strong { font-size:18px; }

/* About/contact */
.s404-about-teaser { background:#fff; }
.s404-contact-section { background:var(--s404-accent);color:#111; }
.s404-contact-section h2 { font-size:clamp(58px,8vw,120px);line-height:.82; }
.s404-contact-section .wp-block-button__link { background:#111;color:#fff; }

/* Chatbot integration */
.s404-chatbot-mount { position:fixed;right:var(--s404-chat-offset-x);bottom:var(--s404-chat-offset-y);z-index:9998; }
body.s404-chat-left .s404-chatbot-mount { right:auto;left:var(--s404-chat-offset-x); }
.s404-chatbot-admin-hint { display:inline-flex;align-items:center;min-height:42px;padding:10px 14px;border-radius:999px;background:#111;color:var(--s404-accent);text-decoration:none;font:700 12px/1 var(--s404-mono);box-shadow:0 12px 34px rgba(0,0,0,.18); }

/* Footer */
.s404-footer { background:var(--s404-footer-bg);color:var(--s404-footer-text);padding:54px 0 30px; }
.s404-footer a { color:inherit; }
.s404-footer__top { display:grid;grid-template-columns:1.4fr auto;gap:40px;align-items:end;margin-bottom:28px; }
.s404-footer__brand { display:flex;gap:20px;align-items:flex-start; }
.s404-footer__logo img { max-height:38px;width:auto; }
.s404-footer__title { font-size:28px;font-weight:700;letter-spacing:-.07em;line-height:1; }
.s404-footer__cursor { color:var(--s404-accent);animation:s404Blink 1.15s steps(1) infinite; }
.s404-footer__tagline { color:rgba(255,255,255,.55);max-width:520px;margin-top:5px; }
.s404-footer__contact-link { text-decoration:none;font-size:13px;font-weight:700; }
.s404-footer__contact-link span { color:var(--s404-accent);margin-left:8px; }
.s404-footer__terminal-grid { display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:14px;align-items:stretch; }
.s404-terminal,.s404-footer-panel { border:1px solid rgba(255,255,255,.13);border-radius:14px;background:rgba(255,255,255,.025);font-family:var(--s404-mono);font-size:12px;height:var(--s404-terminal-height,248px);overflow:hidden; }
.s404-terminal { padding:0;display:grid;grid-template-rows:38px 1fr 47px; }
.s404-terminal__bar { padding:0 14px;display:flex;align-items:center;border-bottom:1px solid rgba(255,255,255,.08);color:rgba(255,255,255,.38);font-size:10px; }
.s404-terminal__bar > span { display:flex;gap:5px;margin-right:10px; }
.s404-terminal__bar i { width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.16); }
.s404-terminal__bar b { font-weight:500; }
.s404-terminal__bar em { margin-left:auto;font-style:normal; }
.s404-terminal__history { min-height:0;height:100%;overflow:hidden;padding:6px 18px 4px;display:flex;flex-direction:column;justify-content:flex-start; }
.s404-terminal__line { color:rgba(255,255,255,.7);margin-top:3px;white-space:pre-wrap;line-height:1.18; }
.s404-terminal__line:first-child { margin-top:0; }
.s404-terminal__line.is-accent,.s404-terminal__line .is-accent { color:var(--s404-accent); }
.s404-terminal__line.is-command { color:#fff; }
.s404-terminal__line.is-stream { color:rgba(255,255,255,.52); }
.s404-terminal__line.is-menu { color:rgba(255,255,255,.62); }
.s404-terminal__menu-prefix { color:rgba(255,255,255,.38); }
.s404-terminal__menu-link { color:var(--s404-accent);text-decoration:none;border-bottom:1px solid rgba(214,251,0,.28);padding-bottom:1px;transition:color .15s ease,border-color .15s ease,background .15s ease; }
.s404-terminal__menu-link:hover,.s404-terminal__menu-link:focus-visible { color:#0a0a0a;background:var(--s404-accent);border-color:var(--s404-accent);outline:none; }
.s404-terminal__muted { color:rgba(255,255,255,.3); }
.s404-terminal__prompt { color:var(--s404-accent);white-space:pre; }
.s404-terminal__form { display:flex;align-items:center;gap:7px;margin:0;padding:0 18px;border-top:1px solid rgba(255,255,255,.08); }
.s404-terminal__input { min-width:0;width:100%;border:0;outline:0;background:transparent;color:#fff;caret-color:var(--s404-accent);padding:2px 0;font:inherit; }
.s404-terminal__input::placeholder { color:rgba(255,255,255,.28); }
.s404-terminal__submit { flex:0 0 auto;appearance:none;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);color:var(--s404-accent);border-radius:5px;width:30px;height:26px;cursor:pointer;font:700 13px/1 var(--s404-mono); }
.s404-footer-panel { padding:17px 18px;display:flex;flex-direction:column; }
.s404-footer-panel__status { color:var(--s404-accent);font:700 10px/1.2 var(--s404-mono);letter-spacing:.055em;display:flex;gap:8px;align-items:center; }
.s404-footer-panel__status span { width:7px;height:7px;border-radius:50%;background:var(--s404-accent);box-shadow:0 0 0 6px rgba(214,251,0,.07); }
.s404-footer-panel__section { margin-top:17px; }
.s404-footer-panel__section small { display:block;color:rgba(255,255,255,.33);font-size:9px;letter-spacing:.08em;margin-bottom:7px; }
.s404-footer-panel__section a,.s404-footer-panel__section strong,.s404-footer-panel__section b { display:block;text-decoration:none;font-weight:500; }
.s404-footer-panel__section b { color:var(--s404-accent);margin-top:3px; }
.s404-footer-panel__section:has([data-s404-clock]) { margin-bottom:4px; }
.s404-footer-panel__contact a + a { margin-top:4px; color:rgba(255,255,255,.7); }
.s404-footer-panel__socials { margin-top:auto;padding-top:22px;display:flex;gap:9px;align-items:center;justify-content:center;flex-wrap:wrap; }
.s404-social-terminal { display:inline-flex!important;align-items:center;gap:4px;min-height:31px;padding:0 8px;border:1px solid rgba(255,255,255,.12);border-radius:6px;background:rgba(255,255,255,.025);color:rgba(255,255,255,.62)!important;font:700 9px/1 var(--s404-mono);transition:background .18s ease,border-color .18s ease,color .18s ease,transform .18s ease; }
.s404-social-terminal:hover { background:rgba(214,251,0,.08);border-color:rgba(214,251,0,.42);color:var(--s404-accent)!important;transform:translateY(-1px); }
.s404-social-terminal svg { width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round; }
.s404-social-terminal b { display:none!important; }
.s404-social-terminal > span { color:rgba(255,255,255,.25); }
.s404-footer__bottom { margin-top:22px;padding-top:18px;border-top:1px solid rgba(255,255,255,.08);color:rgba(255,255,255,.38);font:500 10px/1.2 var(--s404-mono);display:flex;justify-content:space-between;align-items:center;gap:20px; }
.s404-footer-nav { margin-left:auto; }
.s404-footer-menu { list-style:none;margin:0;padding:0;display:flex;align-items:center;justify-content:flex-end;gap:8px 14px;flex-wrap:wrap; }
.s404-footer-menu li { margin:0;padding:0; }
.s404-footer-menu a { display:inline-flex;align-items:center;gap:5px;color:rgba(255,255,255,.48);text-decoration:none;text-transform:uppercase;letter-spacing:.04em;transition:color .18s ease; }
.s404-footer-menu a::before { content:"[";color:rgba(255,255,255,.2); }
.s404-footer-menu a::after { content:"]";color:rgba(255,255,255,.2); }
.s404-footer-menu a:hover,.s404-footer-menu a:focus-visible { color:var(--s404-accent); }
.s404-footer__fallback-tag { text-transform:uppercase;letter-spacing:.04em; }
.s404-footer.layout-minimal .s404-footer__terminal-grid { display:none; }


/* Rich demo content */
.s404-signal-strip { display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--s404-border);border-radius:12px;overflow:hidden;background:#fff;margin-top:34px; }
.s404-signal-strip > div { padding:18px;border-right:1px solid var(--s404-border); }
.s404-signal-strip > div:last-child { border-right:0; }
.s404-signal-strip small { display:block;font:700 9px/1 var(--s404-mono);color:var(--s404-muted);letter-spacing:.06em;margin-bottom:8px; }
.s404-signal-strip b { font-size:17px;letter-spacing:-.03em; }
.s404-feature-band { margin-block:48px;padding:28px;border-radius:14px;background:#111;color:#fff;position:relative;overflow:hidden; }
.s404-feature-band::after { content:"404";position:absolute;right:-20px;bottom:-70px;font-size:190px;font-weight:700;letter-spacing:-.1em;opacity:.035; }
.s404-feature-band .s404-kicker { color:var(--s404-accent); }
.s404-feature-band h3 { font-size:clamp(34px,4vw,64px);max-width:780px;margin:8px 0 14px; }
.s404-feature-band p { max-width:760px;color:rgba(255,255,255,.6); }
.s404-feature-band a { color:var(--s404-accent);font-weight:700;text-decoration:none; }
.s404-capability-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-block:34px 56px; }
.s404-capability { min-height:190px;padding:22px;border:1px solid var(--s404-border);border-radius:12px;background:#fff; }
.s404-capability small { font:700 9px/1 var(--s404-mono);color:var(--s404-muted);letter-spacing:.06em; }
.s404-capability h3 { margin:38px 0 10px;font-size:27px; }
.s404-capability p { color:var(--s404-muted);font-size:14px; }
.s404-case-row { display:grid;grid-template-columns:150px 1fr 220px;gap:28px;padding:34px 0;border-top:1px solid var(--s404-border);align-items:start; }
.s404-case-row:last-child { border-bottom:1px solid var(--s404-border); }
.s404-case-row small { font:700 9px/1.3 var(--s404-mono);letter-spacing:.06em;color:var(--s404-muted); }
.s404-case-row h3 { font-size:clamp(32px,4vw,56px);margin:0 0 10px; }
.s404-case-row p { color:var(--s404-muted);margin:0; }
.s404-case-row__meta { font:500 11px/1.6 var(--s404-mono);color:var(--s404-muted); }
.s404-contact-channels { display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px; }
.s404-contact-channel { padding:16px;border:1px solid var(--s404-border);border-radius:10px;background:#fff; }
.s404-contact-channel small { display:block;font:700 9px/1 var(--s404-mono);letter-spacing:.06em;color:var(--s404-muted);margin-bottom:8px; }
.s404-contact-channel a,.s404-contact-dynamic { font-weight:700;text-decoration:none; }
.s404-contact-placeholder { color:var(--s404-muted);font:500 12px/1.4 var(--s404-mono); }

/* Glitch */
.s404-glitch-enabled [data-s404-glitch] { position:relative; }
.s404-glitch-enabled .is-glitching { animation:s404Glitch .26s steps(2,end); }
.s404-glitch-enabled .s404-glitch-text.is-glitching::before,
.s404-glitch-enabled .s404-glitch-text.is-glitching::after {
  content:attr(data-text);position:absolute;inset:0;pointer-events:none;overflow:hidden;
}
.s404-glitch-enabled .s404-glitch-text.is-glitching::before { transform:translate(5px,-1px);color:var(--s404-accent);clip-path:inset(0 0 58% 0); }
.s404-glitch-enabled .s404-glitch-text.is-glitching::after { transform:translate(-4px,2px);color:#111;clip-path:inset(58% 0 8% 0); }

/* Core */
.wp-block-separator { border-color:var(--s404-border);margin-block:52px; }
.wp-block-image img { border-radius:var(--s404-card-radius); }
.wp-block-cover { border-radius:var(--s404-card-radius);overflow:hidden; }

@keyframes s404Blink { 0%,48%{opacity:1}49%,100%{opacity:0} }
@keyframes s404Float { 0%,100%{transform:translateY(0) rotate(.2deg)}50%{transform:translateY(-11px) rotate(-.3deg)} }
@keyframes s404FloatReverse { 0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(9px) rotate(1deg)} }
@keyframes s404Spin { to{transform:rotate(360deg)} }
@keyframes s404Ticker { to{transform:translateX(-50%)} }
@keyframes s404Glitch { 0%{transform:translate(0)}20%{transform:translate(-2px,1px)}40%{transform:translate(3px,-1px)}60%{transform:translate(-1px,0)}80%{transform:translate(2px,1px)}100%{transform:translate(0)} }

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important; }
}

@media (max-width: 1100px) {
  .s404-mega-menu { width:min(860px,calc(100vw - 44px)); }
  .s404-mega-card em { display:none; }
}

@media (max-width: 850px) {
  body.admin-bar .s404-header.is-sticky { top:58px; }
  .s404-header.is-sticky { top:10px; }
  .s404-header__inner { grid-template-columns:auto 1fr auto;gap:14px;background:rgba(255,255,255,.95)!important;border:1px solid rgba(17,17,17,.08)!important;box-shadow:0 12px 38px rgba(0,0,0,.07)!important;backdrop-filter:blur(16px); }
  .s404-menu-toggle { display:inline-grid;place-items:center;justify-self:end; }
  .s404-header__actions .s404-btn { display:none; }
  .s404-nav { display:none;position:absolute;top:calc(100% + 8px);left:20px;right:20px;background:rgba(255,255,255,.99);border:1px solid var(--s404-border);border-radius:14px;padding:12px;box-shadow:0 18px 50px rgba(0,0,0,.12); }
  .s404-nav.is-open { display:block; }
  .s404-nav > ul { display:grid;gap:3px; }
  .s404-nav > ul > li > a { min-height:0;display:block;padding:12px;color:#111; }
  .s404-nav > ul > li > a::after,.s404-menu-item--mega > a::before { display:none; }
  .s404-mega-menu { display:none!important; }
  .s404-hero__columns { flex-direction:column; }
  .s404-signal-stage { min-height:470px;margin-top:20px; }
  .s404-process { grid-template-columns:1fr 1fr; }
  .s404-process > div:nth-child(2) { border-right:0; }
  .s404-project-grid { grid-template-columns:1fr; }
  .s404-footer__top,.s404-footer__terminal-grid { grid-template-columns:1fr; }
  .s404-footer__contact-link { justify-self:start; }
  .s404-footer-panel { height:auto;min-height:232px; }
  .s404-footer-panel__socials { justify-content:center; }
}

@media (max-width: 640px) {
  :root { --s404-section-gap:78px; }
  .s404-container { width:min(calc(100% - 28px),var(--s404-content-width)); }
  body.s404-header-full .s404-header .s404-container { width:calc(100% - 28px); }
  .s404-header.is-floating .s404-header__inner { width:calc(100% - 24px); }
  .s404-header__inner { min-height:66px;padding-inline:15px;border-radius:14px; }
  .s404-brand { font-size:24px; }
  .s404-display { font-size:clamp(64px,22vw,104px); }
  .s404-hero { padding-top:72px!important; }
  .s404-signal-stage { min-height:400px;border-radius:18px; }
  .s404-signal-window--main { width:84%;left:8%; }
  .s404-signal-window__body > strong { font-size:28px; }
  .s404-float-card--scan { width:118px;right:2%; }
  .s404-float-card--chat { left:3%; }
  .s404-hero-ticker { margin-top:58px; }
  .s404-service-card { min-height:auto; }
  .s404-signal-strip,.s404-capability-grid,.s404-contact-channels { grid-template-columns:1fr; }
  .s404-signal-strip > div { border-right:0;border-bottom:1px solid var(--s404-border); }
  .s404-signal-strip > div:last-child { border-bottom:0; }
  .s404-case-row { grid-template-columns:1fr;gap:12px; }
  .s404-process { grid-template-columns:1fr; }
  .s404-process > div { border-right:0;border-bottom:1px solid var(--s404-border);padding:24px 0; }
  .s404-process > div + div { padding-left:0; }
  .s404-process > div:last-child { border-bottom:0; }
  .s404-process b { margin-top:18px; }
  .s404-lab-list a { grid-template-columns:38px 1fr auto;gap:10px; }
  .s404-lab-list i { display:none; }
  .s404-lab-list em { grid-column:3; }
  .s404-lab-list strong { display:none; }
  .s404-terminal,.s404-footer-panel { height:var(--s404-terminal-height,248px); }
  .s404-footer-panel { text-align:center;align-items:center; }
  .s404-footer-panel__status { justify-content:center; }
  .s404-footer-panel__section { width:100%; }
  .s404-footer-panel__socials { width:100%;justify-content:center;margin-top:auto;padding-top:24px; }
  .s404-footer__bottom { flex-direction:column;align-items:center;text-align:center; }
  .s404-footer-nav { margin-left:0;width:100%; }
  .s404-footer-menu { justify-content:center; }
  .s404-chatbot-mount { right:14px;bottom:14px; }
  body.s404-chat-left .s404-chatbot-mount { left:14px; }
}


/* v0.3.7 — Contact page */
.s404-contact-page .entry-content { margin:0; }
.s404-contact-hero { background:#f4f4f0;padding:clamp(96px,11vw,170px) 0 clamp(70px,8vw,120px);border-bottom:1px solid var(--s404-border);overflow:hidden;position:relative; }
.s404-contact-hero::after { content:"404";position:absolute;right:-.04em;bottom:-.34em;font-size:min(30vw,430px);font-weight:700;letter-spacing:-.11em;line-height:1;opacity:.025;pointer-events:none; }
.s404-contact-hero__grid { display:grid;grid-template-columns:minmax(0,1.25fr) minmax(320px,.75fr);gap:clamp(48px,8vw,120px);align-items:end; }
.s404-contact-hero__copy h1 { margin:10px 0 24px;font-size:clamp(70px,9.4vw,148px);line-height:.82;letter-spacing:-.075em;max-width:980px; }
.s404-contact-hero__copy > p:last-child { max-width:760px;font-size:clamp(18px,2vw,25px);line-height:1.42;color:var(--s404-muted); }
.s404-contact-hero__signal { border:1px solid var(--s404-border);border-radius:14px;background:#fff;padding:22px;display:grid;gap:18px;box-shadow:0 24px 70px rgba(0,0,0,.055); }
.s404-contact-live { color:#111;font:700 10px/1.2 var(--s404-mono);letter-spacing:.06em;display:flex;align-items:center;gap:9px;padding-bottom:16px;border-bottom:1px solid var(--s404-border); }
.s404-contact-live i { width:8px;height:8px;border-radius:50%;background:var(--s404-accent);box-shadow:0 0 0 6px rgba(214,251,0,.13); }
.s404-contact-hero__signal div { display:grid;gap:6px; }
.s404-contact-hero__signal small { color:var(--s404-muted);font:700 9px/1.2 var(--s404-mono);letter-spacing:.07em; }
.s404-contact-hero__signal b { font-size:14px; }
.s404-contact-section-wrap { padding-block:clamp(74px,9vw,128px); }
.s404-contact-section-wrap > .s404-kicker + h2 { margin-top:10px;font-size:clamp(48px,6vw,86px);line-height:.93;letter-spacing:-.06em; }
.s404-contact-section-wrap > .s404-section-lead { max-width:820px; }
.s404-contact-direct-grid { gap:12px;margin-top:38px;align-items:stretch!important; }
.s404-contact-direct-card { border:1px solid var(--s404-border);border-radius:14px;background:#fff;padding:24px;min-height:250px;display:flex;flex-direction:column; }
.s404-contact-direct-card > small { font:700 9px/1.2 var(--s404-mono);letter-spacing:.075em;color:var(--s404-muted); }
.s404-contact-direct-card h3 { margin:50px 0 14px;font-size:clamp(25px,2.5vw,34px);line-height:1;letter-spacing:-.045em; }
.s404-contact-direct-card .wp-block-shortcode,.s404-contact-direct-card > p:last-child { margin-top:auto; }
.s404-contact-direct-card .s404-contact-dynamic { font-size:15px; }
.s404-contact-direct-card p { color:var(--s404-muted);font-size:14px; }
.s404-contact-direct-card.is-dark { background:#0b0b0b;color:#fff;border-color:#0b0b0b; }
.s404-contact-direct-card.is-dark > small,.s404-contact-direct-card.is-dark p { color:rgba(255,255,255,.5); }
.s404-contact-direct-card.is-dark a { color:var(--s404-accent);text-decoration:none;font-weight:700; }
.s404-contact-brief { margin:clamp(72px,9vw,125px) 0;display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:clamp(44px,8vw,110px);align-items:start;background:#111;color:#fff;border-radius:18px;padding:clamp(28px,5vw,62px);position:relative;overflow:hidden; }
.s404-contact-brief::after { content:">";position:absolute;right:-.04em;bottom:-.28em;font:700 min(32vw,420px)/1 var(--s404-mono);color:rgba(214,251,0,.025);pointer-events:none; }
.s404-contact-brief__copy { position:sticky;top:120px;z-index:1; }
.s404-contact-brief__copy .s404-kicker { color:var(--s404-accent); }
.s404-contact-brief__copy h2 { margin:10px 0 20px;font-size:clamp(42px,5vw,72px);line-height:.92;letter-spacing:-.06em; }
.s404-contact-brief__copy > p:last-child { color:rgba(255,255,255,.55);max-width:570px; }
.s404-contact-brief__grid { position:relative;z-index:1;border-top:1px solid rgba(255,255,255,.12); }
.s404-contact-brief__grid > div { display:grid;grid-template-columns:42px 130px 1fr;gap:16px 20px;padding:22px 0;border-bottom:1px solid rgba(255,255,255,.12);align-items:start; }
.s404-contact-brief__grid span,.s404-contact-next__steps span { color:var(--s404-accent);font:700 10px/1.2 var(--s404-mono); }
.s404-contact-brief__grid small { color:rgba(255,255,255,.38);font:700 9px/1.2 var(--s404-mono);letter-spacing:.07em; }
.s404-contact-brief__grid b { font-size:15px; }
.s404-contact-brief__grid p { grid-column:3;margin:0;color:rgba(255,255,255,.5);font-size:13px; }
.s404-contact-route-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:28px 0 clamp(72px,9vw,120px); }
.s404-contact-route-grid a { min-height:220px;padding:24px;border:1px solid var(--s404-border);border-radius:14px;background:#fff;text-decoration:none;color:var(--s404-text);display:flex;flex-direction:column;transition:transform .18s ease,border-color .18s ease,background .18s ease; }
.s404-contact-route-grid a:hover { transform:translateY(-2px);border-color:#111;background:#fafafa; }
.s404-contact-route-grid small { font:700 9px/1.2 var(--s404-mono);letter-spacing:.075em;color:var(--s404-muted); }
.s404-contact-route-grid b { margin-top:46px;max-width:520px;font-size:clamp(22px,2.3vw,31px);line-height:1.04;letter-spacing:-.04em; }
.s404-contact-route-grid span { margin-top:auto;padding-top:24px;font:700 10px/1 var(--s404-mono);color:var(--s404-muted); }
.s404-contact-next { display:grid;grid-template-columns:.65fr 1.35fr;gap:clamp(40px,7vw,100px);padding:38px 0;border-top:1px solid var(--s404-border);border-bottom:1px solid var(--s404-border);align-items:start; }
.s404-contact-next h2 { margin:8px 0 0;font-size:clamp(40px,4.8vw,68px);line-height:.95;letter-spacing:-.06em; }
.s404-contact-next__steps { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px; }
.s404-contact-next__steps div { min-width:0; }
.s404-contact-next__steps b { display:block;margin:22px 0 8px;font-size:20px; }
.s404-contact-next__steps p { margin:0;color:var(--s404-muted);font-size:13px; }
.s404-contact-final { margin-top:clamp(72px,9vw,120px);background:var(--s404-accent);color:#111;border-radius:18px;padding:clamp(30px,5vw,64px);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:36px;align-items:end; }
.s404-contact-final h2 { margin:10px 0 14px;font-size:clamp(42px,5vw,72px);line-height:.94;letter-spacing:-.06em;max-width:920px; }
.s404-contact-final p { margin-bottom:0;max-width:720px; }
.s404-contact-final .s404-contact-final__link { display:inline-flex;min-height:46px;align-items:center;justify-content:center;padding:12px 16px;border-radius:8px;background:#111;color:#fff;text-decoration:none;font:700 11px/1 var(--s404-mono);white-space:nowrap; }

@media (max-width: 850px) {
  .s404-contact-hero__grid,.s404-contact-brief,.s404-contact-next { grid-template-columns:1fr; }
  .s404-contact-hero__signal { max-width:620px; }
  .s404-contact-brief__copy { position:static; }
  .s404-contact-next__steps { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .s404-contact-final { grid-template-columns:1fr;align-items:start; }
  .s404-contact-final .s404-contact-final__link { justify-self:start; }
}
@media (max-width: 680px) {
  .s404-contact-hero { padding-top:86px; }
  .s404-contact-hero__copy h1 { font-size:clamp(62px,19vw,96px); }
  .s404-contact-route-grid,.s404-contact-next__steps { grid-template-columns:1fr; }
  .s404-contact-direct-grid { display:grid!important;grid-template-columns:1fr; }
  .s404-contact-direct-card { min-height:210px; }
  .s404-contact-brief { border-radius:14px;padding:24px 18px; }
  .s404-contact-brief__grid > div { grid-template-columns:38px 1fr;gap:8px 12px; }
  .s404-contact-brief__grid small { grid-column:2; }
  .s404-contact-brief__grid b,.s404-contact-brief__grid p { grid-column:2; }
  .s404-contact-final { border-radius:14px;margin-inline:-2px; }
}


/* v0.3.4 — Product pages / Studio 404 chat skin */
.s404-product-hero {
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(360px,.9fr);gap:clamp(40px,7vw,110px);align-items:center;
  margin:clamp(24px,4vw,54px) 0 clamp(72px,9vw,120px);
}
.s404-product-hero__copy h2 { max-width:900px; }
.s404-product-hero__copy .s404-section-lead { max-width:760px; }
.s404-product-hero__aside { border-left:1px solid var(--s404-border);padding-left:clamp(24px,4vw,48px); }
.s404-product-hero__aside p { color:var(--s404-muted); }
.s404-product-hero__meta { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--s404-border);border:1px solid var(--s404-border);border-radius:var(--s404-card-radius);overflow:hidden;margin-top:24px; }
.s404-product-hero__meta div { background:var(--s404-surface);padding:18px; }
.s404-product-hero__meta small { display:block;font:700 9px/1.2 var(--s404-mono);letter-spacing:.08em;color:var(--s404-muted);margin-bottom:8px; }
.s404-product-hero__meta b { font-size:14px; }

.s404-sitecheck-intro { display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(34px,7vw,110px);align-items:start;margin:70px 0; }
.s404-sitecheck-intro__copy { font-size:clamp(18px,2.1vw,26px);line-height:1.38;letter-spacing:-.025em; }
.s404-sitecheck-intro__copy p { margin-top:0; }
.s404-sitecheck-intro__details { color:var(--s404-muted);max-width:760px; }
.s404-sitecheck-intro__details p:first-child { margin-top:0; }
.s404-checklist { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:28px; }
.s404-checklist div { border-top:1px solid var(--s404-border);padding-top:13px; }
.s404-checklist small { display:block;font:700 9px/1.2 var(--s404-mono);letter-spacing:.075em;color:var(--s404-muted);margin-bottom:5px; }
.s404-checklist b { font-size:14px; }

.s404-tool-shell { margin:clamp(56px,8vw,108px) 0;background:#0b0b0b;color:#fff;border-radius:18px;border:1px solid rgba(255,255,255,.12);overflow:hidden;box-shadow:0 34px 90px rgba(0,0,0,.12); }
.s404-tool-shell__bar { min-height:48px;padding:0 18px;display:flex;align-items:center;gap:12px;border-bottom:1px solid rgba(255,255,255,.09);font:700 10px/1 var(--s404-mono);letter-spacing:.06em;color:rgba(255,255,255,.48); }
.s404-tool-shell__dots { display:flex;gap:5px; }
.s404-tool-shell__dots i { width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.18); }
.s404-tool-shell__bar strong { color:#fff;font-weight:600; }
.s404-tool-shell__status { margin-left:auto;display:flex;align-items:center;gap:8px;color:var(--s404-accent); }
.s404-tool-shell__status::before { content:"";width:7px;height:7px;border-radius:50%;background:var(--s404-accent);box-shadow:0 0 0 5px rgba(214,251,0,.07); }
.s404-tool-shell__intro { display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px;align-items:end;padding:clamp(24px,4vw,44px);border-bottom:1px solid rgba(255,255,255,.09); }
.s404-tool-shell__intro h3 { margin:0 0 8px;font-size:clamp(27px,3.5vw,46px);line-height:.98;letter-spacing:-.055em; }
.s404-tool-shell__intro p { margin:0;color:rgba(255,255,255,.55);max-width:680px; }
.s404-tool-shell__steps { display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end; }
.s404-tool-shell__steps span { border:1px solid rgba(255,255,255,.12);border-radius:999px;padding:8px 10px;font:700 9px/1 var(--s404-mono);color:rgba(255,255,255,.48);white-space:nowrap; }
.s404-tool-shell__body { padding:clamp(18px,3vw,32px);background:#f7f7f3;color:var(--s404-text); }
.s404-tool-shell__body .s404-sitecheck-mount { color:var(--s404-text); }
.s404-sitecheck-mount > :first-child { margin-top:0; }
.s404-sitecheck-mount > :last-child { margin-bottom:0; }
.s404-sitecheck-fallback { margin:0; }

.s404-reading-guide { display:grid;grid-template-columns:.78fr 1.22fr;gap:clamp(36px,7vw,100px);margin:clamp(72px,10vw,130px) 0;align-items:start; }
.s404-reading-guide__sticky { position:sticky;top:120px; }
.s404-reading-guide__sticky h3 { font-size:clamp(36px,5vw,66px);letter-spacing:-.06em;line-height:.96;margin:10px 0 18px; }
.s404-reading-guide__items { border-top:1px solid var(--s404-border); }
.s404-reading-guide__item { display:grid;grid-template-columns:64px 1fr;gap:22px;padding:24px 0;border-bottom:1px solid var(--s404-border); }
.s404-reading-guide__item > span { font:700 10px/1.2 var(--s404-mono);color:var(--s404-muted);padding-top:5px; }
.s404-reading-guide__item h4 { margin:0 0 7px;font-size:22px;letter-spacing:-.035em; }
.s404-reading-guide__item p { margin:0;color:var(--s404-muted); }

.s404-chat-showcase { margin:clamp(50px,8vw,100px) 0 clamp(72px,10vw,130px);display:grid;grid-template-columns:minmax(0,.78fr) minmax(400px,1.22fr);gap:clamp(36px,7vw,100px);align-items:center; }
.s404-chat-showcase__copy h3 { font-size:clamp(36px,5.3vw,72px);letter-spacing:-.065em;line-height:.94;margin:8px 0 22px; }
.s404-chat-showcase__copy p { color:var(--s404-muted);max-width:620px; }
.s404-chat-showcase__points { margin-top:28px;border-top:1px solid var(--s404-border); }
.s404-chat-showcase__points div { padding:13px 0;border-bottom:1px solid var(--s404-border);display:flex;justify-content:space-between;gap:18px;font:700 10px/1.2 var(--s404-mono); }
.s404-chat-showcase__points span:last-child { color:var(--s404-muted);text-align:right; }

.s404-chat-preview { background:#0a0a0a;border:1px solid rgba(255,255,255,.13);border-radius:18px;overflow:hidden;color:#fff;box-shadow:0 30px 80px rgba(0,0,0,.16);font-family:var(--s404-font); }
.s404-chat-preview__bar { min-height:52px;display:flex;align-items:center;gap:11px;padding:0 16px;border-bottom:1px solid rgba(255,255,255,.09);font-family:var(--s404-mono); }
.s404-chat-preview__mark { width:32px;height:32px;border:1px solid rgba(255,255,255,.13);border-radius:8px;display:grid;place-items:center;font-weight:800;letter-spacing:-.08em;position:relative;overflow:hidden; }
.s404-chat-preview__mark::after { content:"_";position:absolute;right:3px;bottom:1px;color:var(--s404-accent);font-size:9px; }
.s404-chat-preview__title { min-width:0; }
.s404-chat-preview__title b { display:block;font:700 11px/1.2 var(--s404-mono);letter-spacing:.04em; }
.s404-chat-preview__title small { display:block;color:rgba(255,255,255,.36);font:500 8px/1.3 var(--s404-mono);letter-spacing:.06em;margin-top:2px; }
.s404-chat-preview__status { margin-left:auto;color:var(--s404-accent);font:700 9px/1 var(--s404-mono);display:flex;align-items:center;gap:7px; }
.s404-chat-preview__status::before { content:"";width:6px;height:6px;border-radius:50%;background:var(--s404-accent); }
.s404-chat-preview__body { min-height:420px;max-height:470px;overflow:auto;padding:22px 18px 12px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.2) transparent; }
.s404-chat-message { display:grid;grid-template-columns:44px minmax(0,1fr);gap:11px;margin:0 0 18px; }
.s404-chat-message.is-user { grid-template-columns:minmax(0,1fr) 44px; }
.s404-chat-message__label { font:700 8px/1.2 var(--s404-mono);letter-spacing:.07em;color:rgba(255,255,255,.35);padding-top:11px;text-align:right; }
.s404-chat-message.is-user .s404-chat-message__label { order:2;text-align:left; }
.s404-chat-message__bubble { justify-self:start;max-width:88%;padding:13px 15px;border:1px solid rgba(255,255,255,.1);border-radius:10px;background:rgba(255,255,255,.045);color:rgba(255,255,255,.87);font-size:14px;line-height:1.48; }
.s404-chat-message.is-user .s404-chat-message__bubble { justify-self:end;background:var(--s404-accent);color:#111;border-color:var(--s404-accent); }
.s404-chat-message__bubble p { margin:0; }
.s404-chat-message__bubble p + p { margin-top:9px; }
.s404-chat-action { margin:4px 0 18px 55px;border-left:2px solid var(--s404-accent);padding:10px 13px;background:rgba(214,251,0,.055);font:600 10px/1.45 var(--s404-mono);color:rgba(255,255,255,.6); }
.s404-chat-action strong { display:block;color:var(--s404-accent);margin-bottom:3px; }
.s404-chat-preview__suggestions { padding:6px 18px 15px;display:flex;gap:7px;flex-wrap:wrap; }
.s404-chat-preview__suggestions button { appearance:none;border:1px solid rgba(255,255,255,.13);background:transparent;color:rgba(255,255,255,.72);border-radius:7px;padding:8px 10px;cursor:pointer;font:650 9px/1 var(--s404-mono);transition:.18s ease; }
.s404-chat-preview__suggestions button:hover { color:#111;background:var(--s404-accent);border-color:var(--s404-accent);transform:translateY(-1px); }
.s404-chat-preview__composer { margin:0 12px 12px;border:1px solid rgba(255,255,255,.13);border-radius:10px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:9px;padding:9px 10px;background:rgba(255,255,255,.025); }
.s404-chat-preview__prompt { color:var(--s404-accent);font:700 13px/1 var(--s404-mono); }
.s404-chat-preview__composer input { width:100%;min-width:0;border:0;outline:0;background:transparent;color:#fff;font-size:13px; }
.s404-chat-preview__composer input::placeholder { color:rgba(255,255,255,.28); }
.s404-chat-preview__composer button { border:1px solid rgba(255,255,255,.13);border-radius:6px;background:rgba(255,255,255,.04);color:var(--s404-accent);width:31px;height:29px;cursor:pointer;font:700 13px/1 var(--s404-mono); }
.s404-chat-preview__foot { padding:0 18px 13px;color:rgba(255,255,255,.25);font:500 8px/1.2 var(--s404-mono);letter-spacing:.04em;display:flex;justify-content:space-between;gap:20px; }
.s404-chat-preview__foot span:last-child { text-align:right; }
.s404-chat-preview__typing { color:rgba(255,255,255,.45);font:600 10px/1.4 var(--s404-mono);padding:2px 0 12px 55px; }

.s404-chatbot-mount.s404-chatbot-skin--shell { --s404-chat-shell-accent:var(--s404-accent); }
.s404-chatbot-mount.s404-chatbot-skin--shell button,
.s404-chatbot-mount.s404-chatbot-skin--shell input,
.s404-chatbot-mount.s404-chatbot-skin--shell textarea { font-family:var(--s404-font); }
.s404-chatbot-mount.s404-chatbot-skin--shell [class*="suggest"],
.s404-chatbot-mount.s404-chatbot-skin--shell [class*="quick"] { border-radius:7px; }

.s404-product-faq { margin:clamp(70px,9vw,120px) 0; }
.s404-product-faq > h3 { font-size:clamp(38px,5vw,64px);letter-spacing:-.06em;line-height:1;margin-bottom:30px; }
.s404-product-faq details { border-top:1px solid var(--s404-border);padding:18px 0; }
.s404-product-faq details:last-child { border-bottom:1px solid var(--s404-border); }
.s404-product-faq summary { cursor:pointer;font-weight:650;font-size:17px;list-style:none;display:flex;justify-content:space-between;gap:20px; }
.s404-product-faq summary::-webkit-details-marker { display:none; }
.s404-product-faq summary::after { content:"+";font-family:var(--s404-mono);color:var(--s404-muted); }
.s404-product-faq details[open] summary::after { content:"−"; }
.s404-product-faq details p { max-width:800px;color:var(--s404-muted);margin-bottom:0; }

@media (max-width: 850px) {
  .s404-product-hero,.s404-chat-showcase,.s404-sitecheck-intro,.s404-reading-guide { grid-template-columns:1fr; }
  .s404-product-hero__aside { border-left:0;border-top:1px solid var(--s404-border);padding:28px 0 0; }
  .s404-reading-guide__sticky { position:static; }
  .s404-chat-showcase { align-items:start; }
}
@media (max-width: 620px) {
  .s404-product-hero__meta,.s404-checklist { grid-template-columns:1fr; }
  .s404-tool-shell { border-radius:12px;margin-inline:-8px; }
  .s404-tool-shell__intro { grid-template-columns:1fr; }
  .s404-tool-shell__steps { justify-content:flex-start; }
  .s404-chat-showcase { grid-template-columns:minmax(0,1fr); }
  .s404-chat-preview__body { min-height:390px;max-height:430px;padding-inline:12px; }
  .s404-chat-message { grid-template-columns:36px minmax(0,1fr);gap:8px; }
  .s404-chat-message.is-user { grid-template-columns:minmax(0,1fr) 36px; }
  .s404-chat-message__bubble { max-width:94%;font-size:13px; }
  .s404-chat-action,.s404-chat-preview__typing { margin-left:44px;padding-left:10px; }
  .s404-chat-preview__foot { flex-direction:column;gap:4px; }
  .s404-chat-preview__foot span:last-child { text-align:left; }
}
.s404-tool-shell__body .s404-sitecheck-fallback { color:var(--s404-text);background:#fff;border-color:var(--s404-border); }
.s404-tool-shell__body .s404-sitecheck-fallback__signal { color:#111; }
.s404-tool-shell__body .s404-integration-note a { color:#111;text-decoration:underline; }

/* v0.4.0 — Responsive overhaul */
:root { --s404-page-gutter:20px; }

.s404-header__inner { position:relative; }
.s404-mobile-mega-toggle,
.s404-mobile-nav__footer { display:none; }

/* Keep full-width sections full bleed, but constrain their actual content. */
.s404-container,
.entry-content > .alignwide,
.s404-wide-content > :where(:not(.alignfull):not(.alignwide)),
.entry-content > .alignfull > .alignwide,
.entry-content > .alignfull > .wp-block-group__inner-container > .alignwide {
  width:min(calc(100% - var(--s404-page-gutter) - var(--s404-page-gutter)),var(--s404-content-width));
  max-width:none;
  margin-inline:auto;
}

/* Touch devices can open the desktop mega menu on the first tap. */
.s404-menu-item--mega.is-touch-mega-open > .s404-mega-menu {
  opacity:1;
  visibility:visible;
  transform:translate(-50%,0);
  pointer-events:auto;
}

@media (max-width:850px) {
  :root { --s404-page-gutter:20px; }

  body.s404-header-full .s404-header .s404-container,
  .s404-header.is-floating .s404-header__inner {
    width:calc(100% - var(--s404-page-gutter) - var(--s404-page-gutter));
  }

  .s404-header__inner { gap:10px; }
  .s404-header__brand-wrap { min-width:0; }

  .s404-nav {
    left:0;
    right:0;
    top:calc(100% + 8px);
    padding:10px;
    border-radius:14px;
    max-height:calc(100vh - 104px);
    max-height:calc(100svh - 104px);
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }
  .s404-nav > ul { gap:2px; }
  .s404-nav > ul > li > a { min-height:46px;padding:12px 10px;border-radius:8px; }
  .s404-nav > ul > li > a:active { background:#f4f4ef; }

  .s404-menu-item--mega {
    display:grid;
    grid-template-columns:minmax(0,1fr) 44px;
    align-items:center;
  }
  .s404-menu-item--mega > a { grid-column:1;grid-row:1; }
  .s404-mobile-mega-toggle {
    display:grid;
    grid-column:2;
    grid-row:1;
    place-items:center;
    width:40px;
    height:40px;
    justify-self:end;
    appearance:none;
    border:1px solid var(--s404-border);
    border-radius:8px;
    background:#fafaf7;
    color:#111;
    cursor:pointer;
    font:700 18px/1 var(--s404-mono);
  }
  .s404-mobile-mega-toggle span { transition:transform .2s ease; }
  .s404-menu-item--mega.is-mobile-mega-open > .s404-mobile-mega-toggle span { transform:rotate(45deg); }

  /* The desktop mega menu becomes a compact accordion inside the mobile menu. */
  .s404-mega-menu,
  .s404-menu-item--mega.is-touch-mega-open > .s404-mega-menu {
    position:static;
    grid-column:1 / -1;
    width:100%;
    margin:6px 0 4px;
    display:none!important;
    opacity:1;
    visibility:visible;
    transform:none;
    pointer-events:auto;
    border-radius:12px;
    box-shadow:none;
    border-color:rgba(17,17,17,.1);
    overflow:hidden;
  }
  .s404-menu-item--mega.is-mobile-mega-open > .s404-mega-menu { display:block!important; }
  .s404-mega-menu__head { padding:15px 16px 13px;gap:16px;align-items:center; }
  .s404-mega-menu__head strong { font-size:19px; }
  .s404-mega-menu__body { grid-template-columns:1fr; }
  .s404-mega-menu__services { grid-template-columns:1fr 1fr;border-right:0;border-bottom:1px solid var(--s404-border); }
  .s404-mega-card { min-height:92px;padding:14px;grid-template-columns:34px minmax(0,1fr) auto;gap:10px; }
  .s404-mega-card__icon,.s404-mega-tool__icon { width:34px;height:34px; }
  .s404-mega-card:last-child,.s404-mega-card:nth-last-child(2):nth-child(odd) { border-bottom:0; }
  .s404-mega-card:last-child:nth-child(odd) { border-right:0; }
  .s404-mega-menu__tools { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding:12px;gap:8px; }
  .s404-mega-menu__tools > .s404-kicker { grid-column:1 / -1; }
  .s404-mega-tool { min-width:0;grid-template-columns:32px minmax(0,1fr);padding:11px;gap:9px; }
  .s404-mega-tool > i { display:none; }
  .s404-mega-tool b { overflow-wrap:break-word; }
  .s404-mega-tool--lab { margin-top:0; }

  .s404-mobile-nav__footer { display:block;margin-top:8px;padding-top:10px;border-top:1px solid var(--s404-border); }
  .s404-mobile-nav__cta {
    display:flex;
    min-height:46px;
    align-items:center;
    justify-content:center;
    padding:11px 14px;
    border-radius:9px;
    background:var(--s404-accent);
    color:var(--s404-accent-text);
    text-decoration:none;
    font-weight:700;
    font-size:13px;
  }

  /* iOS Safari zooms focused form fields below 16px. */
  .s404-terminal__input,
  .s404-chat-preview__composer input { font-size:16px; }

  .s404-footer__brand,
  .s404-footer__contact-link,
  .s404-footer-panel__section { min-width:0; }
  .s404-footer-panel__section a,
  .s404-footer__tagline { overflow-wrap:anywhere; }
}

@media (max-width:640px) {
  :root {
    --s404-page-gutter:20px;
    --s404-section-gap:74px;
  }

  .s404-container,
  .entry-content > .alignwide,
  .s404-wide-content > :where(:not(.alignfull):not(.alignwide)),
  .entry-content > .alignfull > .alignwide,
  .entry-content > .alignfull > .wp-block-group__inner-container > .alignwide {
    width:calc(100% - var(--s404-page-gutter) - var(--s404-page-gutter));
  }

  body.s404-header-full .s404-header .s404-container,
  .s404-header.is-floating .s404-header__inner {
    width:calc(100% - var(--s404-page-gutter) - var(--s404-page-gutter));
  }

  .wp-block-group.s404-section { padding-block:var(--s404-section-gap); }
  h1,h2,h3,h4 { overflow-wrap:break-word; }

  .s404-header__inner { min-height:64px;padding-inline:13px; }
  .s404-brand { font-size:23px; }
  .s404-menu-toggle { width:42px;height:42px; }
  .s404-nav { padding:9px; }

  .s404-mega-menu__head { align-items:flex-start;flex-direction:column;gap:9px; }
  .s404-mega-menu__services { grid-template-columns:1fr; }
  .s404-mega-card:nth-child(odd) { border-right:0; }
  .s404-mega-card,.s404-mega-card:nth-last-child(2):nth-child(odd) { border-bottom:1px solid var(--s404-border); }
  .s404-mega-card:last-child { border-bottom:0; }
  .s404-mega-menu__tools { grid-template-columns:1fr; }
  .s404-mega-menu__tools > .s404-kicker { grid-column:auto; }
  .s404-mega-tool { grid-template-columns:34px minmax(0,1fr) auto; }
  .s404-mega-tool > i { display:block; }

  .s404-hero { padding-top:68px!important; }
  .s404-hero__claim { margin-top:20px!important; }
  .s404-hero-ticker { margin-top:48px; }
  .s404-signal-stage { min-height:380px; }

  .s404-project-grid { gap:12px; }
  .s404-project-card { min-height:285px;padding:22px; }
  .s404-project-card b { font-size:clamp(32px,11vw,48px); }
  .s404-process > div { padding-block:22px; }

  .s404-tool-shell { margin-inline:0; }
  .s404-feature-band { padding:24px 20px; }

  .s404-footer { padding-top:46px; }
  .s404-footer__top { gap:24px; }
  .s404-footer__brand { gap:14px; }
  .s404-terminal__form { padding-inline:12px;gap:6px; }
  .s404-terminal__input { min-height:34px;line-height:1.25; }
  .s404-chatbot-mount { right:var(--s404-page-gutter);bottom:16px; }
  body.s404-chat-left .s404-chatbot-mount { left:var(--s404-page-gutter); }
}

@media (max-width:420px) {
  .s404-terminal__prompt { font-size:0; }
  .s404-terminal__prompt::after { content:"$";font:700 11px/1 var(--s404-mono); }
  .s404-footer__brand { flex-direction:column; }
  .s404-footer__top { margin-bottom:24px; }
}

/* Wide but short touch screens, e.g. an iPhone in landscape. */
@media (min-width:851px) and (max-height:520px) {
  .s404-mega-menu { max-height:calc(100vh - 96px);overflow-y:auto; }
}

/* Elements library / Gutenberg style variants */
.wp-block-button.is-style-s404-dark .wp-block-button__link { background:#111;color:#fff;border-color:#111; }
.wp-block-button.is-style-s404-ghost .wp-block-button__link { background:rgba(255,255,255,.56);color:var(--s404-text);border-color:var(--s404-border);backdrop-filter:blur(8px); }
.wp-block-button.is-style-s404-text .wp-block-button__link { min-height:auto;padding:6px 2px;background:transparent;color:var(--s404-text);border:0;border-radius:0;border-bottom:1px solid currentColor; }
.wp-block-button.is-style-s404-pill .wp-block-button__link { border-radius:999px;padding-inline:22px; }
.wp-block-image.is-style-s404-frame { padding:10px;border:1px solid var(--s404-border);border-radius:calc(var(--s404-card-radius) + 6px);background:var(--s404-surface); }
.wp-block-image.is-style-s404-offset { position:relative;margin:22px 22px 22px 0; }
.wp-block-image.is-style-s404-offset::after { content:"";position:absolute;inset:14px -14px -14px 14px;background:var(--s404-accent);border-radius:var(--s404-card-radius);z-index:-1; }
.wp-block-image.is-style-s404-mono img { filter:grayscale(1) contrast(1.05); }

.s404-elements-nav { display:flex;flex-wrap:wrap;gap:8px;margin:34px 0 72px;padding:12px;border:1px solid var(--s404-border);border-radius:14px;background:rgba(255,255,255,.7); }
.s404-elements-nav a { padding:9px 12px;border-radius:8px;text-decoration:none;font:700 10px/1 var(--s404-mono);letter-spacing:.04em; }
.s404-elements-nav a:hover { background:var(--s404-accent);color:#111; }
.s404-elements-section { padding:clamp(52px,7vw,92px) 0;border-top:1px solid var(--s404-border);scroll-margin-top:110px; }
.s404-elements-head { display:grid;grid-template-columns:minmax(0,.9fr) minmax(260px,.55fr);gap:16px 52px;align-items:end;margin-bottom:34px; }
.s404-elements-head .s404-kicker { grid-column:1/-1;margin:0; }
.s404-elements-head h2 { margin:0;font-size:clamp(38px,5vw,70px);line-height:.95;letter-spacing:-.055em; }
.s404-elements-head > p:last-child { margin:0;color:var(--s404-muted);max-width:46ch; }
.s404-elements-note { margin:20px 0 0;color:var(--s404-muted);font-size:13px; }

.s404-type-specimen { display:grid;grid-template-columns:1.2fr .9fr .9fr;border:1px solid var(--s404-border);border-radius:var(--s404-card-radius);overflow:hidden;background:#fff; }
.s404-type-specimen > div { padding:clamp(24px,3vw,40px);border-right:1px solid var(--s404-border); }
.s404-type-specimen > div:last-child { border-right:0; }
.s404-type-specimen small,.s404-list-panel>small { display:block;margin-bottom:14px;font:700 9px/1 var(--s404-mono);letter-spacing:.08em;color:var(--s404-muted); }
.s404-type-specimen strong { display:block;font-size:clamp(42px,5vw,72px);line-height:.92;letter-spacing:-.06em; }
.s404-type-specimen h3 { margin:0;font-size:clamp(25px,3vw,40px);line-height:1;letter-spacing:-.045em; }
.s404-type-specimen p { margin:0;color:var(--s404-muted); }
.s404-kicker-showcase { display:flex;flex-wrap:wrap;gap:10px;margin-top:18px; }
.s404-kicker-chip { display:inline-flex;padding:9px 11px;border-radius:7px;background:#fff;font:700 9px/1 var(--s404-mono);letter-spacing:.06em; }
.s404-kicker-chip.is-accent { background:var(--s404-accent);color:#111; }
.s404-kicker-chip.is-dark { background:#111;color:var(--s404-accent); }
.s404-kicker-chip.is-outline { background:transparent;border:1px solid var(--s404-border); }

.s404-button-showcase { display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:24px;border:1px solid var(--s404-border);border-radius:var(--s404-card-radius);background:#fff; }
.s404-demo-btn { display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:12px 19px;border:1px solid transparent;border-radius:var(--s404-button-radius);font-weight:700;font-size:13px;text-decoration:none;cursor:pointer;transition:transform .18s ease,background .18s ease,border .18s ease; }
.s404-demo-btn:hover { transform:translateY(-2px); }
.s404-demo-btn.is-primary { background:var(--s404-accent);color:#111; }
.s404-demo-btn.is-dark { background:#111;color:#fff; }
.s404-demo-btn.is-outline { background:transparent;color:#111;border-color:var(--s404-border); }
.s404-demo-btn.is-ghost { background:#f3f3ef;color:#111;border-color:transparent; }
.s404-demo-btn.is-pill { background:#fff;color:#111;border-color:var(--s404-border);border-radius:999px; }
.s404-demo-link { font-weight:700;text-decoration:none;border-bottom:1px solid currentColor;padding:5px 1px; }
.s404-icon-button { width:46px;height:46px;border:1px solid var(--s404-border);border-radius:50%;background:#fff;font-size:19px;cursor:pointer; }

.s404-surface-grid { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px; }
.s404-surface { min-height:230px;padding:24px;border:1px solid var(--s404-border);border-radius:var(--s404-card-radius);display:flex;flex-direction:column;justify-content:flex-end; }
.s404-surface small,.s404-element-card small,.s404-tabs__panel small,.s404-timeline small,.s404-elements-final small { font:700 9px/1 var(--s404-mono);letter-spacing:.07em; }
.s404-surface h3 { margin:9px 0 5px;font-size:24px;letter-spacing:-.035em; }
.s404-surface p { margin:0;color:var(--s404-muted); }
.s404-surface.is-white { background:#fff; }
.s404-surface.is-soft { background:#ecece7; }
.s404-surface.is-accent { background:var(--s404-accent);color:#111;border-color:color-mix(in srgb,var(--s404-accent) 70%,#111); }
.s404-surface.is-accent p { color:rgba(0,0,0,.62); }
.s404-surface.is-dark { background:#111;color:#fff;border-color:#111; }
.s404-surface.is-dark p { color:rgba(255,255,255,.62); }

.s404-element-card-grid { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px; }
.s404-element-card { min-height:320px;padding:24px;border:1px solid var(--s404-border);border-radius:var(--s404-card-radius);background:#fff;display:flex;flex-direction:column;align-items:flex-start; }
.s404-element-icon { display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--s404-border);border-radius:10px;margin-bottom:auto;font:700 13px/1 var(--s404-mono); }
.s404-element-card h3 { margin:10px 0 8px;font-size:25px;letter-spacing:-.04em; }
.s404-element-card p { margin:0 0 18px;color:var(--s404-muted); }
.s404-element-card a { margin-top:auto;font-weight:700;text-decoration:none; }
.s404-element-card.is-accent { background:var(--s404-accent);color:#111;border-color:var(--s404-accent); }
.s404-element-card.is-accent p { color:rgba(0,0,0,.65); }
.s404-element-card.is-dark { background:#111;color:#fff;border-color:#111; }
.s404-element-card.is-dark p { color:rgba(255,255,255,.62); }
.s404-element-card.is-dark .s404-element-icon { color:var(--s404-accent);border-color:rgba(255,255,255,.15); }
.s404-element-card.is-minimal { background:transparent; }

.s404-image-showcase { display:grid;gap:18px; }
.s404-image-showcase figure { margin:0; }
.s404-image-showcase img { width:100%;height:100%;object-fit:cover;display:block;border-radius:var(--s404-card-radius); }
.s404-image-wide { height:clamp(330px,48vw,620px);position:relative; }
.s404-image-wide figcaption { position:absolute;left:14px;bottom:14px;padding:8px 10px;border-radius:6px;background:rgba(0,0,0,.72);color:#fff;font:700 9px/1 var(--s404-mono);letter-spacing:.06em; }
.s404-image-split { display:grid;grid-template-columns:1.15fr .85fr;gap:0;border:1px solid var(--s404-border);border-radius:var(--s404-card-radius);overflow:hidden;background:#fff; }
.s404-image-split figure { min-height:390px; }
.s404-image-split img { border-radius:0; }
.s404-image-split > div { padding:clamp(28px,5vw,62px);display:flex;flex-direction:column;justify-content:center; }
.s404-image-split small { font:700 9px/1 var(--s404-mono);letter-spacing:.07em;color:var(--s404-muted); }
.s404-image-split h3 { font-size:clamp(30px,4vw,52px);line-height:1;letter-spacing:-.05em;margin:12px 0; }
.s404-image-split p { color:var(--s404-muted); }
.s404-image-split a { font-weight:700;text-decoration:none; }
.s404-image-mosaic { display:grid;grid-template-columns:1.5fr .75fr .75fr;gap:12px;min-height:340px; }
.s404-image-mosaic figure { overflow:hidden;border-radius:var(--s404-card-radius); }
.s404-image-mosaic .is-mono img { filter:grayscale(1) contrast(1.1); }

.s404-list-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px; }
.s404-list-panel { padding:24px;border:1px solid var(--s404-border);border-radius:var(--s404-card-radius);background:#fff; }
.s404-check-list,.s404-number-list { list-style:none;margin:0;padding:0; }
.s404-check-list li { position:relative;padding:11px 0 11px 28px;border-bottom:1px solid var(--s404-border); }
.s404-check-list li:last-child { border-bottom:0; }
.s404-check-list li::before { content:"✓";position:absolute;left:0;color:#111;background:var(--s404-accent);width:18px;height:18px;display:grid;place-items:center;border-radius:50%;font-size:11px;top:13px; }
.s404-number-list li { display:grid;grid-template-columns:34px 1fr;gap:10px;padding:11px 0;border-bottom:1px solid var(--s404-border);font-weight:600; }
.s404-number-list li:last-child { border-bottom:0; }
.s404-number-list span { font:700 10px/1.5 var(--s404-mono);color:var(--s404-muted); }
.s404-badge-row { display:flex;flex-wrap:wrap;gap:8px; }
.s404-badge { display:inline-flex;padding:7px 9px;border-radius:6px;background:#efefe9;font:700 9px/1 var(--s404-mono);letter-spacing:.06em;white-space:nowrap; }
.s404-badge.is-accent { background:var(--s404-accent);color:#111; }
.s404-badge.is-dark { background:#111;color:#fff; }
.s404-badge.is-outline { border:1px solid var(--s404-border);background:transparent; }

.s404-interactive-grid { display:grid;grid-template-columns:1.08fr .92fr;gap:18px; }
.s404-tabs,.s404-accordion { border:1px solid var(--s404-border);border-radius:var(--s404-card-radius);background:#fff;overflow:hidden; }
.s404-tabs__list { display:flex;gap:0;padding:8px;border-bottom:1px solid var(--s404-border);background:#f3f3ef; }
.s404-tabs__list button { min-height:44px;padding:10px 16px;border:0;border-radius:8px;background:transparent;font-weight:700;cursor:pointer; }
.s404-tabs__list button[aria-selected="true"] { background:var(--s404-accent);color:#111; }
.s404-tabs__panel { padding:clamp(28px,4vw,50px);min-height:270px; }
.s404-tabs__panel h3 { margin:12px 0 8px;font-size:clamp(28px,3vw,42px);line-height:1;letter-spacing:-.045em; }
.s404-tabs__panel p { color:var(--s404-muted);max-width:48ch; }
.s404-accordion details { border-bottom:1px solid var(--s404-border); }
.s404-accordion details:last-child { border-bottom:0; }
.s404-accordion summary { min-height:68px;padding:20px 22px;display:flex;align-items:center;justify-content:space-between;gap:18px;font-weight:700;cursor:pointer;list-style:none; }
.s404-accordion summary::-webkit-details-marker { display:none; }
.s404-accordion summary span { font-family:var(--s404-mono);transition:transform .18s ease; }
.s404-accordion details[open] summary span { transform:rotate(45deg); }
.s404-accordion details p { margin:0;padding:0 22px 22px;color:var(--s404-muted); }

.s404-number-grid { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--s404-border);border-radius:var(--s404-card-radius);overflow:hidden;background:#fff; }
.s404-number-grid > div { padding:clamp(24px,4vw,44px);border-right:1px solid var(--s404-border); }
.s404-number-grid > div:last-child { border-right:0; }
.s404-number-grid strong { display:block;font-size:clamp(44px,6vw,82px);line-height:.9;letter-spacing:-.06em; }
.s404-number-grid strong span { font-size:.38em;color:var(--s404-muted);letter-spacing:0; }
.s404-number-grid small { display:block;margin-top:18px;font:700 9px/1.25 var(--s404-mono);letter-spacing:.06em;color:var(--s404-muted); }
.s404-progress-list { display:grid;gap:12px;margin-top:18px;padding:22px;border:1px solid var(--s404-border);border-radius:var(--s404-card-radius);background:#fff; }
.s404-progress-list > div { display:grid;grid-template-columns:150px 1fr 45px;gap:16px;align-items:center; }
.s404-progress-list span,.s404-progress-list em { font-size:12px;font-style:normal; }
.s404-progress-list i { display:block;height:7px;border-radius:99px;background:#ecece7;overflow:hidden; }
.s404-progress-list i b { display:block;height:100%;background:var(--s404-accent); }
.s404-progress-list em { text-align:right;font-family:var(--s404-mono); }

.s404-timeline { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--s404-border); }
.s404-timeline article { position:relative;padding:28px 24px 0 0; }
.s404-timeline article::before { content:"";position:absolute;top:-5px;left:0;width:9px;height:9px;border-radius:50%;background:var(--s404-accent);box-shadow:0 0 0 4px var(--s404-bg); }
.s404-timeline article>span { display:block;font:700 11px/1 var(--s404-mono);color:var(--s404-muted);margin-bottom:28px; }
.s404-timeline h3 { margin:7px 0 7px;font-size:27px;letter-spacing:-.04em; }
.s404-timeline p { color:var(--s404-muted);margin:0; }

.s404-quote-grid { display:grid;grid-template-columns:1fr 1fr;gap:12px; }
.s404-quote { margin:0;min-height:320px;padding:clamp(28px,4vw,48px);border:1px solid var(--s404-border);border-radius:var(--s404-card-radius);background:#fff;display:flex;flex-direction:column;justify-content:space-between; }
.s404-quote>p { margin:0;font-size:clamp(28px,4vw,48px);line-height:1.08;letter-spacing:-.045em; }
.s404-quote footer { display:flex;flex-direction:column;margin-top:38px; }
.s404-quote footer span { color:var(--s404-muted);font-size:12px; }
.s404-quote.is-dark { background:#111;color:#fff;border-color:#111; }
.s404-quote.is-dark footer span { color:rgba(255,255,255,.58); }

.s404-form-demo { display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:clamp(24px,4vw,42px);border:1px solid var(--s404-border);border-radius:var(--s404-card-radius);background:#fff; }
.s404-field { display:grid;gap:8px; }
.s404-field.is-wide,.s404-check,.s404-form-actions { grid-column:1/-1; }
.s404-field label { font-weight:700;font-size:12px; }
.s404-field input,.s404-field select,.s404-field textarea { width:100%;min-height:48px;padding:12px 14px;border:1px solid var(--s404-border);border-radius:9px;background:#fafaf7;color:var(--s404-text);font-size:16px;outline:none; }
.s404-field textarea { resize:vertical; }
.s404-field input:focus,.s404-field select:focus,.s404-field textarea:focus { border-color:#111;box-shadow:0 0 0 3px color-mix(in srgb,var(--s404-accent) 38%,transparent); }
.s404-check { display:flex;align-items:center;gap:10px;font-size:13px; }
.s404-check input { width:18px;height:18px;accent-color:var(--s404-accent); }
.s404-form-actions { display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:6px; }
.s404-form-actions span { font:700 9px/1 var(--s404-mono);letter-spacing:.06em;color:var(--s404-muted); }

.s404-data-grid { display:grid;grid-template-columns:1.15fr .85fr;gap:18px; }
.s404-table-wrap { overflow:auto;border:1px solid var(--s404-border);border-radius:var(--s404-card-radius);background:#fff; }
.s404-table { width:100%;border-collapse:collapse;min-width:560px; }
.s404-table th,.s404-table td { padding:16px 18px;text-align:left;border-bottom:1px solid var(--s404-border); }
.s404-table th { font:700 9px/1 var(--s404-mono);letter-spacing:.06em;color:var(--s404-muted);background:#f4f4ef; }
.s404-table tbody tr:last-child td { border-bottom:0; }
.s404-notices { display:grid;gap:10px; }
.s404-notice { padding:18px 20px;border:1px solid var(--s404-border);border-radius:10px;background:#fff; }
.s404-notice b { font:700 10px/1 var(--s404-mono);letter-spacing:.06em; }
.s404-notice p { margin:6px 0 0;color:var(--s404-muted); }
.s404-notice.is-success { background:color-mix(in srgb,var(--s404-accent) 22%,white); }
.s404-notice.is-dark { background:#111;color:#fff;border-color:#111; }
.s404-notice.is-dark p { color:rgba(255,255,255,.58); }

.s404-elements-ticker { margin:40px calc(50% - 50vw) 0;overflow:hidden;background:var(--s404-accent);color:#111; }
.s404-elements-ticker>div { display:flex;width:max-content;animation:s404ElementsTicker 28s linear infinite; }
.s404-elements-ticker span { display:block;padding:15px 28px;font:700 11px/1 var(--s404-mono);letter-spacing:.08em; }
@keyframes s404ElementsTicker { to { transform:translateX(-50%); } }
.s404-elements-final { margin:0 calc(50% - 50vw);padding:clamp(70px,9vw,130px) max(20px,calc((100vw - var(--s404-content-width))/2));background:#111;color:#fff; }
.s404-elements-final h2 { margin:14px 0 18px;font-size:clamp(48px,8vw,110px);line-height:.87;letter-spacing:-.065em; }
.s404-elements-final p { max-width:60ch;color:rgba(255,255,255,.62);margin-bottom:26px; }

@media (max-width: 980px) {
  .s404-surface-grid,.s404-element-card-grid,.s404-number-grid,.s404-timeline { grid-template-columns:1fr 1fr; }
  .s404-type-specimen { grid-template-columns:1fr 1fr; }
  .s404-type-specimen>div:nth-child(2) { border-right:0; }
  .s404-type-specimen>div:last-child { grid-column:1/-1;border-top:1px solid var(--s404-border); }
  .s404-element-card-grid .s404-element-card { min-height:270px; }
  .s404-number-grid>div:nth-child(2) { border-right:0; }
  .s404-number-grid>div:nth-child(-n+2) { border-bottom:1px solid var(--s404-border); }
  .s404-timeline article:nth-child(-n+2) { margin-bottom:30px; }
}
@media (max-width: 850px) {
  .s404-elements-head { grid-template-columns:1fr; }
  .s404-interactive-grid,.s404-data-grid,.s404-image-split { grid-template-columns:1fr; }
  .s404-image-split figure { min-height:320px; }
  .s404-list-grid { grid-template-columns:1fr; }
  .s404-quote-grid { grid-template-columns:1fr; }
  .s404-image-mosaic { grid-template-columns:1fr 1fr; }
  .s404-image-mosaic .is-large { grid-column:1/-1;height:340px; }
}
@media (max-width: 640px) {
  .s404-elements-nav { margin-bottom:48px;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none; }
  .s404-elements-nav::-webkit-scrollbar { display:none; }
  .s404-elements-nav a { flex:0 0 auto; }
  .s404-elements-section { padding:56px 0; }
  .s404-type-specimen,.s404-surface-grid,.s404-element-card-grid,.s404-number-grid,.s404-timeline,.s404-form-demo { grid-template-columns:1fr; }
  .s404-type-specimen>div { border-right:0;border-bottom:1px solid var(--s404-border); }
  .s404-type-specimen>div:last-child { grid-column:auto;border-top:0;border-bottom:0; }
  .s404-surface { min-height:190px; }
  .s404-element-card { min-height:250px; }
  .s404-image-wide { height:330px; }
  .s404-image-mosaic { grid-template-columns:1fr; }
  .s404-image-mosaic .is-large { grid-column:auto;height:300px; }
  .s404-image-mosaic figure { height:250px; }
  .s404-tabs__list { overflow-x:auto; }
  .s404-tabs__list button { flex:0 0 auto; }
  .s404-number-grid>div { border-right:0!important;border-bottom:1px solid var(--s404-border); }
  .s404-number-grid>div:last-child { border-bottom:0; }
  .s404-progress-list>div { grid-template-columns:1fr 42px;gap:7px 12px; }
  .s404-progress-list i { grid-column:1/-1;grid-row:2; }
  .s404-progress-list em { grid-column:2;grid-row:1; }
  .s404-timeline { border-top:0;border-left:1px solid var(--s404-border);padding-left:20px; }
  .s404-timeline article { padding:0 0 32px 20px;margin:0!important; }
  .s404-timeline article::before { top:4px;left:-25px; }
  .s404-timeline article>span { margin-bottom:12px; }
  .s404-form-demo { padding:20px; }
  .s404-field.is-wide,.s404-check,.s404-form-actions { grid-column:auto; }
  .s404-form-actions { align-items:flex-start;flex-direction:column; }
  .s404-elements-final { padding-inline:20px; }
}

/* =========================================================
   Elements Library additions — v0.4.5
   ========================================================= */
.s404-pricing-toolbar { display:flex;align-items:center;justify-content:space-between;gap:20px;margin:0 0 22px;padding:12px 14px;border:1px solid var(--s404-border);border-radius:12px;background:#fff; }
.s404-pricing-toolbar>span { font:700 10px/1 var(--s404-mono);letter-spacing:.07em;color:var(--s404-muted);text-transform:uppercase; }
.s404-pricing-toolbar>div { display:flex;gap:6px;padding:4px;border-radius:9px;background:#f0f0ec; }
.s404-pricing-toolbar button { min-height:38px;padding:8px 12px;border:0;border-radius:7px;background:transparent;font-weight:700;cursor:pointer; }
.s404-pricing-toolbar button[aria-pressed="true"] { background:var(--s404-accent);color:#111; }
.s404-pricing-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:stretch; }
.s404-price-card { position:relative;display:flex;flex-direction:column;min-width:0;padding:28px;border:1px solid var(--s404-border);border-radius:var(--s404-card-radius);background:#fff; }
.s404-price-card>small,.s404-pricing-toolbar+* small { font:700 9px/1 var(--s404-mono);letter-spacing:.08em; }
.s404-price-card h3 { margin:12px 0 8px;font-size:clamp(30px,3vw,44px);line-height:1;letter-spacing:-.045em; }
.s404-price-card>p { min-height:54px;color:var(--s404-muted); }
.s404-price { display:flex;align-items:flex-end;gap:5px;margin:24px 0 22px;padding-bottom:20px;border-bottom:1px solid var(--s404-border); }
.s404-price>span { margin:0 4px 7px 0;color:var(--s404-muted);font-size:12px; }
.s404-price strong { font-size:clamp(44px,5vw,68px);line-height:.8;letter-spacing:-.06em; }
.s404-price>em { margin-bottom:5px;font-style:normal;font-weight:800;font-size:20px; }
.s404-price>small { margin:0 0 6px auto;color:var(--s404-muted);white-space:nowrap; }
.s404-price-card ul { display:grid;gap:10px;margin:0 0 26px;padding:0;list-style:none;color:var(--s404-muted); }
.s404-price-card li::before { content:"✓";margin-right:8px;color:#111;font-weight:900; }
.s404-price-card .s404-demo-btn { margin-top:auto;justify-content:center; }
.s404-price-card.is-featured { border-color:var(--s404-accent);box-shadow:0 0 0 2px var(--s404-accent); }
.s404-price-card.is-featured::before { content:"";position:absolute;inset:0 0 auto;height:5px;background:var(--s404-accent);border-radius:var(--s404-card-radius) var(--s404-card-radius) 0 0; }
.s404-price-badge { position:absolute;top:16px;right:16px;padding:7px 9px;border-radius:999px;background:var(--s404-accent);color:#111;font:800 9px/1 var(--s404-mono);letter-spacing:.05em; }
.s404-price-card.is-dark { background:#111;color:#fff;border-color:#111; }
.s404-price-card.is-dark>p,.s404-price-card.is-dark ul,.s404-price-card.is-dark .s404-price>span,.s404-price-card.is-dark .s404-price>small { color:rgba(255,255,255,.62); }
.s404-price-card.is-dark .s404-price { border-color:rgba(255,255,255,.16); }
.s404-price-card.is-dark li::before { color:var(--s404-accent); }
.s404-compare-wrap { margin-top:20px;overflow-x:auto;border:1px solid var(--s404-border);border-radius:var(--s404-card-radius);background:#fff; }
.s404-compare-table { width:100%;min-width:680px;border-collapse:collapse; }
.s404-compare-table th,.s404-compare-table td { padding:15px 18px;border-bottom:1px solid var(--s404-border);text-align:center; }
.s404-compare-table th:first-child,.s404-compare-table td:first-child { text-align:left; }
.s404-compare-table th { font:800 10px/1 var(--s404-mono);letter-spacing:.05em; }
.s404-compare-table tr:last-child td { border-bottom:0; }

.s404-before-after { display:grid;gap:12px;margin-bottom:34px; }
.s404-before-after__media { position:relative;aspect-ratio:16/7;overflow:hidden;border-radius:var(--s404-card-radius);background:#111; }
.s404-before-after__media>img,.s404-before-after__top img { width:100%;height:100%;object-fit:cover;display:block; }
.s404-before-after__top { position:absolute;inset:0;overflow:hidden;clip-path:inset(0 calc(100% - var(--s404-before)) 0 0); }
.s404-before-after__top img { width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.06); }
.s404-before-after__media::after { content:"";position:absolute;top:0;bottom:0;left:var(--s404-before);width:2px;background:var(--s404-accent);transform:translateX(-1px);pointer-events:none; }
.s404-before-after__label { position:absolute;top:14px;padding:7px 9px;border-radius:7px;background:rgba(17,17,17,.82);color:#fff;font:800 9px/1 var(--s404-mono);letter-spacing:.07em; }
.s404-before-after__label.is-before { left:14px; }
.s404-before-after__label.is-after { right:14px;background:var(--s404-accent);color:#111; }
.s404-before-after label { display:flex;align-items:center;gap:16px;font:700 10px/1 var(--s404-mono);letter-spacing:.05em;color:var(--s404-muted); }
.s404-before-after input[type="range"] { flex:1;accent-color:var(--s404-accent); }
.s404-carousel { padding:18px;border:1px solid var(--s404-border);border-radius:var(--s404-card-radius);background:#fff; }
.s404-carousel__head { display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:16px; }
.s404-carousel__head small { font:700 9px/1 var(--s404-mono);letter-spacing:.07em; }
.s404-carousel__head h3 { margin:7px 0 0;font-size:30px;letter-spacing:-.04em; }
.s404-carousel__head>div:last-child { display:flex;gap:7px; }
.s404-carousel__head button { width:42px;height:42px;border:1px solid var(--s404-border);border-radius:9px;background:#fff;cursor:pointer;font-size:18px; }
.s404-carousel__head button:hover { background:var(--s404-accent); }
.s404-carousel__track { display:grid;grid-auto-flow:column;grid-auto-columns:minmax(260px,38%);gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none; }
.s404-carousel__track::-webkit-scrollbar { display:none; }
.s404-carousel figure { margin:0;scroll-snap-align:start; }
.s404-carousel figure img { width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:10px;display:block; }
.s404-carousel figure.is-mono img { filter:grayscale(1); }
.s404-carousel figure.is-offset img { object-position:72% center; }
.s404-carousel figcaption { padding-top:8px;font:700 9px/1 var(--s404-mono);letter-spacing:.06em;color:var(--s404-muted); }

.s404-flip-grid { display:grid;grid-template-columns:1fr 1fr;gap:18px; }
.s404-flip-card { min-height:300px;padding:0;border:0;background:none;cursor:pointer;perspective:1000px;text-align:left; }
.s404-flip-card__inner { position:relative;display:block;width:100%;height:100%;min-height:300px;transform-style:preserve-3d;transition:transform .45s ease; }
.s404-flip-card.is-flipped .s404-flip-card__inner { transform:rotateY(180deg); }
.s404-flip-card__face { position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:30px;border:1px solid var(--s404-border);border-radius:var(--s404-card-radius);background:#fff;backface-visibility:hidden; }
.s404-flip-card__face small,.s404-modal-demo small,.s404-modal__body small,.s404-person-card small,.s404-rating-card small,.s404-post-card small,.s404-countdown>small,.s404-status-panel>small { font:700 9px/1 var(--s404-mono);letter-spacing:.07em; }
.s404-flip-card__face strong { display:block;margin:14px 0 20px;font-size:clamp(30px,4vw,52px);line-height:.95;letter-spacing:-.05em; }
.s404-flip-card__face em { color:var(--s404-muted);font-style:normal; }
.s404-flip-card__face.is-back { background:var(--s404-accent);color:#111;transform:rotateY(180deg);border-color:var(--s404-accent); }
.s404-modal-demo { padding:30px;border-radius:var(--s404-card-radius);background:#111;color:#fff; }
.s404-modal-demo h3 { margin:12px 0 12px;font-size:clamp(32px,4vw,52px);line-height:.96;letter-spacing:-.05em; }
.s404-modal-demo p { color:rgba(255,255,255,.64);max-width:44ch; }
.s404-modal { width:min(620px,calc(100% - 32px));padding:0;border:0;border-radius:16px;background:#fff;color:#111;box-shadow:0 30px 90px rgba(0,0,0,.32); }
.s404-modal::backdrop { background:rgba(0,0,0,.72);backdrop-filter:blur(4px); }
.s404-modal__bar { display:flex;align-items:center;justify-content:space-between;padding:13px 15px;background:#111;color:#fff;font:700 9px/1 var(--s404-mono);letter-spacing:.07em; }
.s404-modal__bar button { width:34px;height:34px;border:1px solid rgba(255,255,255,.2);border-radius:8px;background:transparent;color:#fff;font-size:20px;cursor:pointer; }
.s404-modal__body { padding:clamp(28px,5vw,52px); }
.s404-modal__body h3 { margin:12px 0;font-size:clamp(36px,5vw,62px);line-height:.92;letter-spacing:-.055em; }
.s404-modal__body p { color:var(--s404-muted);max-width:52ch; }

.s404-people-grid { display:grid;grid-template-columns:1.4fr .6fr;gap:18px;margin-bottom:18px; }
.s404-person-card { display:grid;grid-template-columns:120px 1fr;gap:24px;align-items:center;padding:26px;border:1px solid var(--s404-border);border-radius:var(--s404-card-radius);background:#fff; }
.s404-person-avatar { display:grid;place-items:center;aspect-ratio:1;border-radius:50%;background:#111;color:var(--s404-accent);font:800 28px/1 var(--s404-mono); }
.s404-person-card h3 { margin:9px 0;font-size:32px;letter-spacing:-.04em; }
.s404-person-card p { color:var(--s404-muted); }
.s404-person-card a { font-weight:800;text-decoration:none; }
.s404-rating-card { padding:28px;border-radius:var(--s404-card-radius);background:var(--s404-accent);color:#111; }
.s404-stars { margin:18px 0 8px;font-size:22px;letter-spacing:.08em; }
.s404-rating-card strong { display:block;font-size:58px;line-height:1;letter-spacing:-.06em; }
.s404-rating-card p { margin-bottom:0; }
.s404-logo-strip { display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border:1px solid var(--s404-border);border-radius:var(--s404-card-radius);overflow:hidden;background:#fff; }
.s404-logo-strip span { display:grid;place-items:center;min-height:100px;padding:18px;border-right:1px solid var(--s404-border);font:800 10px/1 var(--s404-mono);letter-spacing:.08em;color:var(--s404-muted); }
.s404-logo-strip span:last-child { border-right:0; }
.s404-testimonial-wall { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:18px; }
.s404-testimonial-wall blockquote { margin:0;padding:24px;border:1px solid var(--s404-border);border-radius:var(--s404-card-radius);background:#fff; }
.s404-testimonial-wall blockquote:nth-child(2) { background:#111;color:#fff;border-color:#111; }
.s404-testimonial-wall blockquote:nth-child(3) { background:#f0f0ec; }
.s404-testimonial-wall p { margin:0 0 26px;font-size:20px;line-height:1.28;letter-spacing:-.02em; }
.s404-testimonial-wall footer { font:700 9px/1.4 var(--s404-mono);letter-spacing:.06em;color:var(--s404-muted); }
.s404-testimonial-wall blockquote:nth-child(2) footer { color:rgba(255,255,255,.55); }

.s404-post-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px; }
.s404-post-card { overflow:hidden;border:1px solid var(--s404-border);border-radius:var(--s404-card-radius);background:#fff; }
.s404-post-card>img { width:100%;aspect-ratio:16/10;object-fit:cover;display:block; }
.s404-post-card>div { padding:24px; }
.s404-post-card h3 { margin:9px 0 8px;font-size:30px;line-height:1;letter-spacing:-.04em; }
.s404-post-card p { color:var(--s404-muted); }
.s404-post-card a { font-weight:800;text-decoration:none; }
.s404-post-card.is-text { display:flex;align-items:flex-end;background:#111;color:#fff; }
.s404-post-card.is-text p { color:rgba(255,255,255,.62); }
.s404-post-card.is-text a { color:var(--s404-accent); }
.s404-post-card.is-accent { display:flex;align-items:flex-end;background:var(--s404-accent);border-color:var(--s404-accent); }
.s404-post-card.is-accent p { color:#303030; }

.s404-utility-stack { display:grid;gap:18px; }
.s404-breadcrumbs { display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:15px 18px;border:1px solid var(--s404-border);border-radius:11px;background:#fff;font:700 10px/1 var(--s404-mono); }
.s404-breadcrumbs a { color:var(--s404-muted);text-decoration:none; }
.s404-breadcrumbs strong { color:#111; }
.s404-search-demo { padding:22px;border:1px solid var(--s404-border);border-radius:var(--s404-card-radius);background:#fff; }
.s404-search-demo label { display:block;margin-bottom:9px;font:700 10px/1 var(--s404-mono);letter-spacing:.05em; }
.s404-search-demo>div { display:flex;gap:8px; }
.s404-search-demo input { flex:1;min-width:0;min-height:48px;padding:12px 14px;border:1px solid var(--s404-border);border-radius:9px;background:#fafafa;font:inherit; }
.s404-search-demo button { min-height:48px;padding:12px 18px;border:0;border-radius:9px;background:var(--s404-accent);font-weight:800;cursor:pointer; }
.s404-code-block { overflow:hidden;border-radius:var(--s404-card-radius);background:#111;color:#f3f3ef; }
.s404-code-block>div { display:flex;align-items:center;justify-content:space-between;padding:11px 14px;border-bottom:1px solid rgba(255,255,255,.12);font:700 9px/1 var(--s404-mono);letter-spacing:.07em; }
.s404-code-block button { border:0;background:transparent;color:rgba(255,255,255,.45);font:inherit; }
.s404-code-block pre { margin:0;padding:24px;overflow:auto; }
.s404-code-block code { font-family:var(--s404-mono);font-size:13px;color:var(--s404-accent); }
.s404-pagination { display:flex;align-items:center;gap:7px;flex-wrap:wrap; }
.s404-pagination a,.s404-pagination span { display:grid;place-items:center;min-width:42px;height:42px;padding:0 10px;border:1px solid var(--s404-border);border-radius:8px;background:#fff;text-decoration:none;font-weight:800; }
.s404-pagination a[aria-current="page"] { background:var(--s404-accent);border-color:var(--s404-accent);color:#111; }
.s404-social-row { display:flex;flex-wrap:wrap;gap:8px; }
.s404-social-row a { padding:11px 13px;border:1px solid var(--s404-border);border-radius:9px;background:#fff;text-decoration:none;font:700 10px/1 var(--s404-mono);letter-spacing:.04em; }
.s404-social-row a:hover { background:#111;color:#fff;border-color:#111; }

.s404-status-grid { display:grid;grid-template-columns:1.35fr .65fr;gap:18px; }
.s404-countdown,.s404-status-panel { padding:28px;border-radius:var(--s404-card-radius); }
.s404-countdown { background:#111;color:#fff; }
.s404-countdown>div { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:20px; }
.s404-countdown span { display:block;padding:18px 10px;border:1px solid rgba(255,255,255,.14);border-radius:10px;text-align:center; }
.s404-countdown strong { display:block;font-size:clamp(34px,4vw,58px);line-height:1;letter-spacing:-.05em;color:var(--s404-accent); }
.s404-countdown em { display:block;margin-top:7px;font:700 9px/1 var(--s404-mono);letter-spacing:.06em;color:rgba(255,255,255,.5);font-style:normal; }
.s404-status-panel { background:#fff;border:1px solid var(--s404-border); }
.s404-status-panel p { display:flex;align-items:center;gap:9px;margin:17px 0 0;padding-bottom:14px;border-bottom:1px solid var(--s404-border); }
.s404-status-panel p:last-child { border-bottom:0;padding-bottom:0; }
.s404-status-dot { width:9px;height:9px;border-radius:50%;background:var(--s404-accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--s404-accent) 20%, transparent); }
.s404-status-dot.is-muted { background:#aaa;box-shadow:none; }
.s404-status-dot.is-dark { background:#111;box-shadow:none; }

@media (max-width: 850px) {
  .s404-pricing-grid,.s404-post-grid,.s404-testimonial-wall { grid-template-columns:1fr; }
  .s404-flip-grid,.s404-people-grid,.s404-status-grid { grid-template-columns:1fr; }
  .s404-logo-strip { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .s404-logo-strip span { border-bottom:1px solid var(--s404-border); }
  .s404-logo-strip span:nth-child(2n) { border-right:0; }
  .s404-carousel__track { grid-auto-columns:minmax(260px,75%); }
}

@media (max-width: 620px) {
  .s404-pricing-toolbar { align-items:flex-start;flex-direction:column; }
  .s404-pricing-toolbar>div { width:100%; }
  .s404-pricing-toolbar button { flex:1; }
  .s404-price-card { padding:22px; }
  .s404-before-after__media { aspect-ratio:4/3; }
  .s404-before-after label { align-items:flex-start;flex-direction:column; }
  .s404-before-after input[type="range"] { width:100%; }
  .s404-carousel { padding:12px; }
  .s404-carousel__track { grid-auto-columns:88%; }
  .s404-carousel__head { align-items:center; }
  .s404-person-card { grid-template-columns:72px 1fr;padding:20px; }
  .s404-logo-strip { grid-template-columns:1fr; }
  .s404-logo-strip span { border-right:0; }
  .s404-search-demo>div { flex-direction:column; }
  .s404-countdown>div { grid-template-columns:1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .s404-flip-card__inner { transition:none; }
}

/* =========================================================
   Elements Library expansion — v0.4.6
   ========================================================= */
.s404-elements-index{margin:34px 0 72px;padding:clamp(22px,3vw,34px);border:1px solid var(--s404-border);border-radius:var(--s404-card-radius);background:#111;color:#fff;scroll-margin-top:110px}.s404-elements-index__head{display:grid;grid-template-columns:1fr minmax(260px,.7fr);gap:12px 42px;align-items:end;padding-bottom:24px;border-bottom:1px solid rgba(255,255,255,.14)}.s404-elements-index__head .s404-kicker{grid-column:1/-1;margin:0;color:var(--s404-accent)}.s404-elements-index__head h2{margin:0;font-size:clamp(38px,5vw,70px);line-height:.94;letter-spacing:-.055em}.s404-elements-index__head>p:last-child{margin:0;color:rgba(255,255,255,.58);max-width:50ch}.s404-elements-index__groups{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 34px;padding-top:28px}.s404-elements-index__groups>div{display:grid;align-content:start;gap:4px}.s404-elements-index__groups strong{margin-bottom:7px;color:var(--s404-accent);font:800 10px/1 var(--s404-mono);letter-spacing:.08em;text-transform:uppercase}.s404-elements-index__groups a{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.09);color:#fff;text-decoration:none;font-size:13px}.s404-elements-index__groups a::after{content:"↓";color:rgba(255,255,255,.34)}.s404-elements-index__groups a:hover{color:var(--s404-accent)}
.s404-layout-demo{display:grid;gap:22px}.s404-column-demo{display:grid;grid-template-columns:1fr 2fr;gap:12px}.s404-column-demo>div{min-height:150px;padding:24px;border:1px dashed #aaa;border-radius:12px;background:#fff}.s404-column-demo small,.s404-divider-demo,.s404-spacer-demo{font:700 9px/1 var(--s404-mono);letter-spacing:.08em;color:var(--s404-muted)}.s404-column-demo strong{display:block;margin-top:10px;font-size:24px}.s404-divider-demo{display:flex;align-items:center;gap:14px}.s404-divider-demo::before,.s404-divider-demo::after{content:"";height:1px;background:var(--s404-border);flex:1}.s404-spacer-demo{display:grid;place-items:center;height:72px;border:1px dashed var(--s404-border);border-radius:10px;background:repeating-linear-gradient(135deg,#fafaf7,#fafaf7 8px,#f3f3ef 8px,#f3f3ef 16px)}.s404-sticky-demo{display:grid;grid-template-columns:minmax(220px,.55fr) 1.45fr;gap:28px;align-items:start;padding:28px;border:1px solid var(--s404-border);border-radius:var(--s404-card-radius);background:#fff}.s404-sticky-demo aside{position:sticky;top:110px;padding:22px;border-radius:12px;background:#111;color:#fff}.s404-sticky-demo aside small{font:700 9px/1 var(--s404-mono);letter-spacing:.08em;color:var(--s404-accent)}.s404-sticky-demo aside strong{display:block;margin:10px 0;font-size:26px}.s404-sticky-demo aside p{color:rgba(255,255,255,.58)}.s404-sticky-demo>div p{min-height:90px;color:var(--s404-muted)}
.s404-advanced-interaction{display:grid;grid-template-columns:1.25fr .75fr;gap:18px}.s404-tabs.is-vertical{display:grid;grid-template-columns:160px 1fr;min-height:330px}.s404-tabs.is-vertical .s404-tabs__list{display:flex;flex-direction:column;border-right:1px solid var(--s404-border);border-bottom:0}.s404-tabs.is-vertical .s404-tabs__list button{justify-content:flex-start;text-align:left;border-bottom:1px solid var(--s404-border)}.s404-tabs.is-vertical .s404-tabs__panel{min-height:100%;border:0}.s404-toggle-stack{display:grid;align-content:start;gap:14px}.s404-toggle{border:1px solid var(--s404-border);border-radius:12px;background:#fff}.s404-toggle summary{display:flex;justify-content:space-between;gap:15px;padding:18px;cursor:pointer;font-weight:800}.s404-toggle p{padding:0 18px 18px;margin:0;color:var(--s404-muted)}.s404-tooltip-demo{position:relative;display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:22px;border-radius:12px;background:#f0f0ec}.s404-tooltip{position:relative;min-height:42px;padding:9px 12px;border:1px solid var(--s404-border);border-radius:8px;background:#fff;font-weight:800}.s404-tooltip+ [role="tooltip"]{position:absolute;left:22px;top:72px;z-index:3;max-width:220px;padding:10px 12px;border-radius:8px;background:#111;color:#fff;font-size:12px;opacity:0;pointer-events:none;transform:translateY(-4px);transition:.18s ease}.s404-tooltip:focus+ [role="tooltip"],.s404-tooltip:hover+ [role="tooltip"]{opacity:1;transform:none}.s404-popover{margin-left:auto}.s404-popover summary{cursor:pointer;font-weight:800}.s404-popover>div{margin-top:12px;padding:16px;border-radius:10px;background:#fff}.s404-popover p{margin:6px 0 0;color:var(--s404-muted)}
.s404-gallery-grid{display:grid;grid-template-columns:1.4fr .6fr;grid-template-rows:1fr 1fr;gap:12px}.s404-gallery-item{position:relative;overflow:hidden;min-height:220px;padding:0;border:0;border-radius:var(--s404-card-radius);background:#111;cursor:pointer}.s404-gallery-item.is-large{grid-row:1/3}.s404-gallery-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .25s ease}.s404-gallery-item.is-mono img{filter:grayscale(1)}.s404-gallery-item span{position:absolute;left:12px;bottom:12px;padding:8px 10px;border-radius:7px;background:#111;color:#fff;font:700 9px/1 var(--s404-mono);letter-spacing:.06em}.s404-gallery-item:hover img{transform:scale(1.02)}.s404-hotspot-demo{position:relative;overflow:hidden;margin-top:18px;border-radius:var(--s404-card-radius);min-height:420px}.s404-hotspot-demo>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.s404-hotspot-demo button{position:absolute;left:var(--x);top:var(--y);display:flex;align-items:center;gap:7px;transform:translate(-50%,-50%);padding:5px 9px 5px 5px;border:0;border-radius:999px;background:#111;color:#fff;cursor:pointer}.s404-hotspot-demo button span{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--s404-accent);color:#111;font:800 10px/1 var(--s404-mono)}.s404-hotspot-demo button b{font-size:11px;white-space:nowrap}.s404-lightbox{width:min(1100px,calc(100% - 32px));padding:44px 14px 14px;border:0;border-radius:14px;background:#111}.s404-lightbox::backdrop{background:rgba(0,0,0,.86)}.s404-lightbox>button{position:absolute;right:9px;top:7px;width:32px;height:32px;border:1px solid rgba(255,255,255,.2);border-radius:7px;background:transparent;color:#fff;font-size:20px}.s404-lightbox img{width:100%;max-height:75vh;object-fit:contain;display:block;border-radius:9px}
.s404-media-grid{display:grid;grid-template-columns:1.3fr .85fr .85fr;gap:14px}.s404-media-grid article{min-width:0;padding:24px;border:1px solid var(--s404-border);border-radius:var(--s404-card-radius);background:#fff}.s404-media-grid small{font:700 9px/1 var(--s404-mono);letter-spacing:.07em}.s404-media-grid h3{font-size:26px;line-height:1;letter-spacing:-.04em}.s404-video-placeholder>div{display:grid;place-items:center;aspect-ratio:16/9;margin:-24px -24px 20px;border-radius:var(--s404-card-radius) var(--s404-card-radius) 0 0;background:linear-gradient(135deg,#111,#333)}.s404-video-placeholder>div span{display:grid;place-items:center;width:62px;height:62px;border-radius:50%;background:var(--s404-accent);color:#111;font-size:22px}.s404-audio-wave{display:flex;align-items:center;gap:4px;height:92px}.s404-audio-wave i{flex:1;max-width:8px;border-radius:3px;background:#111;height:var(--h,40%)}.s404-audio-wave i:nth-child(2n){--h:70%}.s404-audio-wave i:nth-child(3n){--h:92%}.s404-audio-card>div:nth-of-type(2){display:flex;align-items:center;gap:10px}.s404-audio-card button{width:38px;height:38px;border:0;border-radius:50%;background:var(--s404-accent)}.s404-audio-card span{font:700 10px/1 var(--s404-mono);color:var(--s404-muted)}.s404-motion-card{background:#111!important;color:#fff}.s404-motion-card p{color:rgba(255,255,255,.58)}.s404-motion-orbit{position:relative;display:grid;place-items:center;aspect-ratio:1;max-width:170px;margin:18px auto;border:1px solid rgba(255,255,255,.16);border-radius:50%}.s404-motion-orbit::before,.s404-motion-orbit::after{content:"";position:absolute;border:1px solid rgba(214,251,0,.35);border-radius:50%}.s404-motion-orbit::before{inset:18px}.s404-motion-orbit::after{inset:40px}.s404-motion-orbit i{position:absolute;top:8px;width:12px;height:12px;border-radius:50%;background:var(--s404-accent);box-shadow:0 0 18px var(--s404-accent);animation:s404Orbit 5s linear infinite;transform-origin:0 77px}.s404-motion-orbit b{font:800 28px/1 var(--s404-mono);color:var(--s404-accent)}@keyframes s404Orbit{to{transform:rotate(360deg)}}
.s404-secondary-nav{display:flex;align-items:center;gap:6px;padding:9px;border:1px solid var(--s404-border);border-radius:12px;background:#fff;overflow-x:auto}.s404-secondary-nav strong{padding:0 12px;font:800 10px/1 var(--s404-mono);white-space:nowrap}.s404-secondary-nav a,.s404-secondary-nav button{min-height:40px;padding:10px 12px;border:0;border-radius:8px;background:transparent;color:#111;text-decoration:none;font-weight:700;white-space:nowrap}.s404-secondary-nav a[aria-current="page"]{background:var(--s404-accent)}.s404-secondary-nav button{margin-left:auto;background:#111;color:#fff}.s404-anchor-demo{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin-top:16px}.s404-anchor-demo span{font:800 9px/1 var(--s404-mono);color:var(--s404-muted)}.s404-anchor-demo a{padding:9px 11px;border:1px solid var(--s404-border);border-radius:999px;background:#fff;text-decoration:none;font-size:12px}.s404-offcanvas{width:min(420px,calc(100% - 20px));height:100%;max-height:none;margin:0 0 0 auto;padding:0;border:0;background:#111;color:#fff}.s404-offcanvas::backdrop{background:rgba(0,0,0,.6)}.s404-offcanvas__bar{display:flex;align-items:center;justify-content:space-between;padding:16px;border-bottom:1px solid rgba(255,255,255,.14);font:800 10px/1 var(--s404-mono)}.s404-offcanvas__bar button{width:38px;height:38px;border:1px solid rgba(255,255,255,.2);border-radius:8px;background:transparent;color:#fff;font-size:22px}.s404-offcanvas nav{display:grid;padding:22px}.s404-offcanvas nav a{padding:18px 4px;border-bottom:1px solid rgba(255,255,255,.12);color:#fff;text-decoration:none;font-size:24px;font-weight:800}.s404-offcanvas nav a:hover{color:var(--s404-accent)}
.s404-counter-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.s404-counter-box,.s404-counter-circle{min-height:230px;padding:24px;border:1px solid var(--s404-border);border-radius:var(--s404-card-radius);background:#fff}.s404-counter-box small,.s404-counter-circle small{font:800 9px/1 var(--s404-mono);letter-spacing:.07em}.s404-counter-box strong{display:block;margin:24px 0 8px;font-size:72px;line-height:.8;letter-spacing:-.07em}.s404-counter-box strong span{font-size:.45em}.s404-counter-box p{color:var(--s404-muted)}.s404-counter-box.is-accent{background:var(--s404-accent);border-color:var(--s404-accent)}.s404-counter-circle{display:grid;place-items:center;background:conic-gradient(var(--s404-accent) calc(var(--value)*1%),#e6e6e0 0);border:0;border-radius:50%;aspect-ratio:1;min-height:0;padding:18px}.s404-counter-circle>div{display:grid;place-items:center;width:72%;height:72%;border-radius:50%;background:#fff;text-align:center}.s404-counter-circle strong{font-size:30px}.s404-counter-circle.is-dark{background:conic-gradient(var(--s404-accent) calc(var(--value)*1%),#333 0)}.s404-counter-circle.is-dark>div{background:#111;color:#fff}
.s404-promo-stack{display:grid;gap:16px}.s404-promo-banner{display:flex;align-items:center;justify-content:space-between;gap:22px;padding:24px 26px;border-radius:var(--s404-card-radius);background:var(--s404-accent);color:#111}.s404-promo-banner small,.s404-promo-grid small{font:800 9px/1 var(--s404-mono);letter-spacing:.08em}.s404-promo-banner strong{display:block;margin-top:8px;font-size:clamp(22px,3vw,34px);line-height:1}.s404-promo-banner a{flex:0 0 auto;padding:12px 15px;border-radius:9px;background:#111;color:#fff;text-decoration:none;font-weight:800}.s404-promo-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.s404-promo-grid>article,.s404-newsletter-demo{padding:30px;border:1px solid var(--s404-border);border-radius:var(--s404-card-radius);background:#fff}.s404-promo-grid h3{font-size:clamp(30px,4vw,50px);line-height:.95;letter-spacing:-.05em}.s404-promo-grid p{color:var(--s404-muted)}.s404-newsletter-demo{background:#111;color:#fff}.s404-newsletter-demo>div{display:flex;gap:8px;margin-top:22px}.s404-newsletter-demo input{flex:1;min-width:0;min-height:48px;padding:12px 14px;border:1px solid rgba(255,255,255,.18);border-radius:9px;background:#1c1c1c;color:#fff;font-size:16px}.s404-newsletter-demo button{padding:12px 15px;border:0;border-radius:9px;background:var(--s404-accent);font-weight:800}.s404-newsletter-demo p{font-size:12px;color:rgba(255,255,255,.48)}
.s404-content-slider{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}.s404-content-slider::-webkit-scrollbar{display:none}.s404-content-slider__track{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(300px,38%);gap:12px}.s404-content-slider article{scroll-snap-align:start;min-height:240px;padding:26px;border:1px solid var(--s404-border);border-radius:var(--s404-card-radius);background:#fff}.s404-content-slider article:nth-child(2){background:#111;color:#fff}.s404-content-slider article:nth-child(3){background:var(--s404-accent)}.s404-content-slider small,.s404-related-demo small{font:800 9px/1 var(--s404-mono);letter-spacing:.07em}.s404-content-slider h3{font-size:32px;line-height:1;letter-spacing:-.045em}.s404-content-slider p{color:var(--s404-muted)}.s404-content-slider article:nth-child(2) p{color:rgba(255,255,255,.58)}.s404-content-slider a{font-weight:800;text-decoration:none}.s404-related-demo{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:16px;padding:18px;border:1px solid var(--s404-border);border-radius:12px;background:#fff}.s404-related-demo>div{margin-right:auto}.s404-related-demo strong{display:block;margin-top:5px}.s404-related-demo a{padding:9px 11px;border-radius:8px;background:#f0f0ec;text-decoration:none;font-size:12px;font-weight:800}.s404-taxonomy-row{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:16px}.s404-taxonomy-row>span{font:800 9px/1 var(--s404-mono);color:var(--s404-muted)}.s404-taxonomy-row button{min-height:38px;padding:8px 12px;border:1px solid var(--s404-border);border-radius:999px;background:#fff;font-weight:700}.s404-taxonomy-row button.is-active{background:#111;color:#fff;border-color:#111}
.s404-scroll-demo{padding:26px;border:1px solid var(--s404-border);border-radius:var(--s404-card-radius);background:#fff}.s404-reading-progress{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center}.s404-reading-progress span,.s404-reading-progress em{font:800 9px/1 var(--s404-mono);letter-spacing:.06em;font-style:normal}.s404-reading-progress i{height:6px;overflow:hidden;border-radius:999px;background:#e6e6e0}.s404-reading-progress b{display:block;height:100%;background:var(--s404-accent)}.s404-scroll-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:26px;padding-top:20px;border-top:1px solid var(--s404-border)}.s404-scroll-actions button,.s404-scroll-actions a{padding:10px 12px;border:1px solid var(--s404-border);border-radius:8px;background:#fff;color:#111;text-decoration:none;font-weight:800}.s404-scroll-actions button{background:#111;color:#fff}.s404-scroll-actions span{margin-left:auto;font:800 9px/1 var(--s404-mono);color:var(--s404-muted)}
.s404-social-demo{display:grid;grid-template-columns:.7fr 1.3fr;gap:16px}.s404-social-demo>div{padding:26px;border:1px solid var(--s404-border);border-radius:var(--s404-card-radius);background:#fff}.s404-social-demo small{font:800 9px/1 var(--s404-mono);letter-spacing:.07em}.s404-share-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}.s404-share-row a{padding:11px 13px;border:1px solid var(--s404-border);border-radius:8px;text-decoration:none;font-weight:800}.s404-profile-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:18px}.s404-profile-row a{display:flex;align-items:center;gap:10px;min-width:0;padding:13px;border-radius:9px;background:#111;color:#fff;text-decoration:none}.s404-profile-row b{display:grid;place-items:center;width:34px;height:34px;border-radius:8px;background:var(--s404-accent);color:#111;font:800 10px/1 var(--s404-mono)}.s404-profile-row span{min-width:0;font-weight:800}.s404-profile-row em{display:block;overflow:hidden;text-overflow:ellipsis;color:rgba(255,255,255,.48);font:700 9px/1.4 var(--s404-mono);font-style:normal}
.s404-location-demo{display:grid;grid-template-columns:1.35fr .65fr;gap:16px}.s404-map-placeholder{position:relative;overflow:hidden;min-height:430px;border-radius:var(--s404-card-radius);background:#e8e8e2}.s404-map-placeholder>span{position:absolute;left:16px;top:16px;z-index:2;padding:8px 10px;border-radius:7px;background:#111;color:#fff;font:800 9px/1 var(--s404-mono)}.s404-map-placeholder>i{position:absolute;left:var(--x);top:var(--y);z-index:2;display:grid;place-items:center;width:48px;height:48px;border-radius:50% 50% 50% 8px;background:var(--s404-accent);color:#111;font:800 11px/1 var(--s404-mono);font-style:normal;transform:translate(-50%,-50%) rotate(-45deg)}.s404-map-placeholder>i::first-letter{transform:rotate(45deg)}.s404-map-grid{position:absolute;inset:-10%;background-image:linear-gradient(#c8c8c1 1px,transparent 1px),linear-gradient(90deg,#c8c8c1 1px,transparent 1px);background-size:42px 42px;transform:rotate(-8deg) scale(1.2)}.s404-location-demo aside{padding:28px;border-radius:var(--s404-card-radius);background:#111;color:#fff}.s404-location-demo aside small{font:800 9px/1 var(--s404-mono);letter-spacing:.07em;color:var(--s404-accent)}.s404-location-demo aside h3{font-size:42px;letter-spacing:-.05em}.s404-location-demo aside>p{color:rgba(255,255,255,.58)}.s404-location-demo dl{margin:28px 0}.s404-location-demo dl div{display:flex;justify-content:space-between;gap:20px;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.13)}.s404-location-demo dt{color:rgba(255,255,255,.5)}.s404-location-demo dd{margin:0;font-weight:800;text-align:right}
.s404-advanced-form{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:28px;border:1px solid var(--s404-border);border-radius:var(--s404-card-radius);background:#fff}.s404-field small{font-size:11px;color:var(--s404-muted)}.s404-field.is-valid input{border-color:#497d45;background:#f7fff5}.s404-field.is-valid small{color:#397039}.s404-field.is-error input{border-color:#c85050;background:#fff8f8}.s404-field.is-error small{color:#a83d3d}.s404-upload-demo,.s404-consent-demo,.s404-turnstile-demo{grid-column:1/-1}.s404-upload-demo{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:20px;border:1px dashed #aaa;border-radius:12px;background:#fafaf7;cursor:pointer}.s404-upload-demo input{position:absolute;opacity:0;pointer-events:none}.s404-upload-demo span{display:grid}.s404-upload-demo b{font:800 10px/1 var(--s404-mono);letter-spacing:.06em}.s404-upload-demo em{margin-top:6px;color:var(--s404-muted);font-size:12px;font-style:normal}.s404-upload-demo strong{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:#111;color:#fff;font-size:22px}.s404-consent-demo{display:flex;align-items:flex-start;gap:10px;font-size:13px}.s404-consent-demo input{width:18px;height:18px;accent-color:var(--s404-accent)}.s404-turnstile-demo{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;padding:16px;border:1px solid var(--s404-border);border-radius:10px;background:#f0f0ec}.s404-turnstile-demo span,.s404-turnstile-demo b{font:800 9px/1 var(--s404-mono);letter-spacing:.06em}.s404-turnstile-demo em{color:var(--s404-muted);font-size:11px;font-style:normal;text-align:right}
.s404-state-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.s404-state-card{min-height:260px;padding:24px;border:1px solid var(--s404-border);border-radius:var(--s404-card-radius);background:#fff}.s404-state-card small{font:800 9px/1 var(--s404-mono);letter-spacing:.07em}.s404-state-card>strong{display:block;margin:26px 0 12px;font-size:54px;line-height:1}.s404-state-card h3{font-size:26px;letter-spacing:-.04em}.s404-state-card p{color:var(--s404-muted)}.s404-state-card.is-success{background:color-mix(in srgb,var(--s404-accent) 22%,white)}.s404-state-card.is-error{background:#111;color:#fff}.s404-state-card.is-error p{color:rgba(255,255,255,.58)}.s404-skeleton{display:grid;gap:10px;margin:30px 0}.s404-skeleton i{display:block;height:13px;border-radius:999px;background:linear-gradient(90deg,#e9e9e4,#f8f8f5,#e9e9e4);background-size:220% 100%;animation:s404Skeleton 1.8s linear infinite}.s404-skeleton i:nth-child(2){width:82%}.s404-skeleton i:nth-child(3){width:56%}@keyframes s404Skeleton{to{background-position:-220% 0}}
@media(max-width:980px){.s404-elements-index__groups{grid-template-columns:repeat(2,minmax(0,1fr))}.s404-media-grid,.s404-counter-grid,.s404-state-grid{grid-template-columns:1fr 1fr}.s404-profile-row{grid-template-columns:1fr}.s404-social-demo{grid-template-columns:1fr}}
@media(max-width:850px){.s404-elements-index__head,.s404-sticky-demo,.s404-advanced-interaction,.s404-location-demo{grid-template-columns:1fr}.s404-sticky-demo aside{position:static}.s404-promo-grid{grid-template-columns:1fr}.s404-gallery-grid{grid-template-columns:1fr 1fr;grid-template-rows:auto}.s404-gallery-item.is-large{grid-row:auto;grid-column:1/-1;min-height:340px}.s404-advanced-form{grid-template-columns:1fr}.s404-advanced-form>*{grid-column:auto}.s404-turnstile-demo{grid-template-columns:1fr}.s404-turnstile-demo em{text-align:left}.s404-content-slider__track{grid-auto-columns:70%}}
@media(max-width:640px){.s404-elements-index{margin-bottom:46px;padding:20px}.s404-elements-index__groups,.s404-media-grid,.s404-counter-grid,.s404-state-grid{grid-template-columns:1fr}.s404-column-demo,.s404-tabs.is-vertical{grid-template-columns:1fr}.s404-tabs.is-vertical .s404-tabs__list{flex-direction:row;overflow-x:auto;border-right:0;border-bottom:1px solid var(--s404-border)}.s404-tabs.is-vertical .s404-tabs__list button{flex:0 0 auto}.s404-gallery-grid{grid-template-columns:1fr}.s404-gallery-item.is-large{grid-column:auto;min-height:280px}.s404-hotspot-demo{min-height:320px}.s404-hotspot-demo button b{display:none}.s404-media-grid article{padding:20px}.s404-video-placeholder>div{margin:-20px -20px 18px}.s404-secondary-nav strong{display:none}.s404-promo-banner{align-items:flex-start;flex-direction:column}.s404-newsletter-demo>div{flex-direction:column}.s404-content-slider__track{grid-auto-columns:88%}.s404-reading-progress{grid-template-columns:1fr auto}.s404-reading-progress span{grid-column:1/-1}.s404-scroll-actions span{width:100%;margin-left:0}.s404-social-demo>div{padding:20px}.s404-location-demo aside{padding:22px}.s404-map-placeholder{min-height:320px}.s404-advanced-form{padding:20px}.s404-turnstile-demo{gap:7px}}
@media(prefers-reduced-motion:reduce){.s404-motion-orbit i,.s404-skeleton i{animation:none!important}.s404-gallery-item img{transition:none}}

/* Elements Library — v0.5.0 complete catalogue additions */
.s404-native-media video,.s404-native-media audio{display:block;width:100%;max-width:100%}.s404-native-media video{aspect-ratio:16/9;object-fit:cover;margin:14px 0 18px;border-radius:10px;background:#111}.s404-native-media audio{margin:16px 0}.s404-audio-cover{display:grid;place-items:center;min-height:180px;margin:14px 0;border-radius:10px;background:linear-gradient(135deg,#111 0%,#252525 100%);color:#fff}.s404-audio-cover span{font:800 clamp(34px,5vw,64px)/1 var(--s404-mono);color:var(--s404-accent)}.s404-audio-cover b{margin-top:8px;font:800 9px/1 var(--s404-mono);letter-spacing:.08em;color:rgba(255,255,255,.55)}

.s404-hero-pattern-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.s404-mini-hero{position:relative;overflow:hidden;min-height:410px;padding:28px;border:1px solid var(--s404-border);border-radius:var(--s404-card-radius);display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;background:#fff}.s404-mini-hero small{position:absolute;top:22px;left:24px;font:800 9px/1 var(--s404-mono);letter-spacing:.07em}.s404-mini-hero h3{margin:0 0 12px;font-size:clamp(32px,4vw,52px);line-height:.92;letter-spacing:-.055em}.s404-mini-hero p{margin:0 0 20px;max-width:36ch;color:var(--s404-muted)}.s404-mini-hero a{font-weight:800;text-decoration:none}.s404-mini-hero.is-media{color:#fff;border-color:#111;background:linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.76)),var(--hero-image) center/cover}.s404-mini-hero.is-media p{color:rgba(255,255,255,.72)}.s404-mini-hero.is-media a{color:var(--s404-accent)}.s404-mini-hero.is-product{background:#111;color:#fff}.s404-mini-hero.is-product p{color:rgba(255,255,255,.62)}.s404-mini-hero.is-product a{color:var(--s404-accent)}.s404-mini-status{position:absolute;top:20px;right:20px;display:flex;align-items:center;gap:7px;font:800 9px/1 var(--s404-mono);letter-spacing:.06em;color:rgba(255,255,255,.7)}.s404-mini-status i{width:7px;height:7px;border-radius:50%;background:var(--s404-accent);box-shadow:0 0 10px color-mix(in srgb,var(--s404-accent) 70%,transparent)}

.s404-slider{border:1px solid var(--s404-border);border-radius:var(--s404-card-radius);background:#fff;overflow:hidden}.s404-slider__bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 18px;border-bottom:1px solid var(--s404-border)}.s404-slider__bar>div:first-child{display:flex;align-items:center;gap:14px}.s404-slider__bar small,.s404-slider__bar strong{font:800 9px/1 var(--s404-mono);letter-spacing:.07em}.s404-slider__bar button{width:40px;height:40px;border:1px solid var(--s404-border);border-radius:8px;background:#fff;font-size:18px}.s404-slider__viewport{overflow:hidden}.s404-slider__track{display:flex;transition:transform .45s cubic-bezier(.2,.8,.2,1);will-change:transform}.s404-slider-card{flex:0 0 100%;min-height:430px;padding:clamp(28px,5vw,58px);display:grid;grid-template-columns:1.1fr .9fr;gap:32px;align-items:end}.s404-slider-card img{width:100%;height:100%;min-height:310px;object-fit:cover;border-radius:12px}.s404-slider-card small{font:800 9px/1 var(--s404-mono);letter-spacing:.07em}.s404-slider-card h3,.s404-slider-card blockquote{margin:14px 0;font-size:clamp(38px,5vw,72px);line-height:.92;letter-spacing:-.06em;font-weight:800}.s404-slider-card p{max-width:45ch;color:var(--s404-muted)}.s404-slider-card.is-dark{display:flex;align-items:flex-end;background:#111;color:#fff}.s404-slider-card.is-dark p{color:rgba(255,255,255,.58)}.s404-slider-card.is-accent{display:flex;align-items:flex-end;background:var(--s404-accent);color:#111}.s404-slider__dots{display:flex;justify-content:center;gap:8px;padding:14px;border-top:1px solid var(--s404-border)}.s404-slider__dots button{width:26px;height:5px;padding:0;border:0;border-radius:999px;background:#cfcfca}.s404-slider__dots button[aria-pressed="true"]{background:#111}

.s404-filter-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:18px}.s404-filter-bar span{margin-right:6px;font:800 9px/1 var(--s404-mono);letter-spacing:.07em;color:var(--s404-muted)}.s404-filter-bar button{min-height:38px;padding:8px 13px;border:1px solid var(--s404-border);border-radius:999px;background:#fff;font-weight:800}.s404-filter-bar button[aria-pressed="true"]{background:#111;color:#fff;border-color:#111}.s404-masonry{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-flow:dense;gap:14px}.s404-masonry article{min-height:220px;padding:24px;border:1px solid var(--s404-border);border-radius:var(--s404-card-radius);background:#fff;transition:opacity .2s ease,transform .2s ease}.s404-masonry article[hidden]{display:none}.s404-masonry article.is-tall{grid-row:span 2;min-height:470px}.s404-masonry article.is-wide{grid-column:span 2;display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:end}.s404-masonry article.is-accent{background:var(--s404-accent);border-color:var(--s404-accent)}.s404-masonry img{width:100%;height:270px;object-fit:cover;border-radius:10px;margin-bottom:22px}.s404-masonry .is-tall img{height:320px}.s404-masonry .is-wide img{height:230px;margin:0}.s404-masonry small{font:800 9px/1 var(--s404-mono);letter-spacing:.07em}.s404-masonry h3{margin:10px 0;font-size:30px;line-height:1;letter-spacing:-.045em}.s404-masonry p{color:var(--s404-muted)}

.s404-chart-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.s404-chart-card{min-width:0;padding:24px;border:1px solid var(--s404-border);border-radius:var(--s404-card-radius);background:#fff}.s404-chart-card small{font:800 9px/1 var(--s404-mono);letter-spacing:.07em}.s404-chart-card h3{font-size:30px;letter-spacing:-.04em}.s404-bar-chart{height:260px;display:flex;align-items:flex-end;gap:10px;padding-top:20px;border-bottom:1px solid var(--s404-border)}.s404-bar-chart span{position:relative;flex:1;height:var(--v);min-height:12px;border-radius:7px 7px 0 0;background:#111}.s404-bar-chart span:nth-child(5),.s404-bar-chart span:nth-child(6){background:var(--s404-accent)}.s404-bar-chart i{position:absolute;left:50%;bottom:-26px;transform:translateX(-50%);font:700 9px/1 var(--s404-mono);font-style:normal;color:var(--s404-muted)}.s404-line-chart{display:block;width:100%;height:auto;margin-top:24px}.s404-line-chart .grid{fill:none;stroke:#e3e3de;stroke-width:1}.s404-line-chart polyline{fill:none;stroke:#111;stroke-width:7;stroke-linecap:round;stroke-linejoin:round}.s404-line-chart circle{fill:var(--s404-accent);stroke:#111;stroke-width:3}.s404-chart-card.is-dark{background:#111;color:#fff;border-color:#111}.s404-chart-card.is-dark ul{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:7px}.s404-chart-card.is-dark li{display:flex;align-items:center;gap:8px;color:rgba(255,255,255,.66);font-size:12px}.s404-chart-card.is-dark li i{width:9px;height:9px;border-radius:50%;background:var(--s404-accent)}.s404-chart-card.is-dark li i.b{background:#fff}.s404-chart-card.is-dark li i.c{background:#555}.s404-donut{display:grid;place-items:center;width:min(220px,72%);aspect-ratio:1;margin:22px auto;border-radius:50%;background:conic-gradient(var(--s404-accent) 0 var(--a),#fff var(--a) calc(var(--a) + var(--b)),#555 calc(var(--a) + var(--b)) 100%)}.s404-donut::before{content:"";grid-area:1/1;width:68%;aspect-ratio:1;border-radius:50%;background:#111}.s404-donut>div{position:relative;z-index:1;grid-area:1/1;text-align:center}.s404-donut strong{display:block;font-size:36px}.s404-donut span{font:700 9px/1 var(--s404-mono);color:rgba(255,255,255,.55)}

.s404-table-toolbar{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:12px}.s404-table-toolbar label{display:grid;gap:7px;font:800 9px/1 var(--s404-mono);letter-spacing:.06em}.s404-table-toolbar input{min-width:260px;padding:11px 12px;border:1px solid var(--s404-border);border-radius:8px;background:#fff;font:500 15px/1.2 var(--s404-font)}.s404-table-toolbar span{font:700 10px/1 var(--s404-mono);color:var(--s404-muted)}.s404-sortable-table th button{appearance:none;border:0;background:none;padding:0;font:inherit;color:inherit;cursor:pointer}.s404-sortable-table tbody tr[hidden]{display:none}

.s404-wizard{padding:clamp(22px,4vw,38px);border:1px solid var(--s404-border);border-radius:var(--s404-card-radius);background:#fff}.s404-wizard__progress{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:18px;margin-bottom:34px}.s404-wizard__progress span{font:800 9px/1 var(--s404-mono);letter-spacing:.07em}.s404-wizard__progress i{height:5px;border-radius:99px;background:#e6e6e0;overflow:hidden}.s404-wizard__progress b{display:block;height:100%;background:var(--s404-accent);transition:width .25s ease}.s404-wizard__step small{font:800 9px/1 var(--s404-mono);letter-spacing:.07em;color:var(--s404-muted)}.s404-wizard__step h3{margin:10px 0 24px;font-size:clamp(34px,4vw,54px);line-height:.96;letter-spacing:-.05em}.s404-choice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.s404-choice-grid label{position:relative}.s404-choice-grid label.is-wide{grid-column:1/-1}.s404-choice-grid input{position:absolute;opacity:0;pointer-events:none}.s404-choice-grid span{display:block;padding:18px;border:1px solid var(--s404-border);border-radius:10px;font-weight:800;cursor:pointer;transition:.2s}.s404-choice-grid input:checked+span{background:var(--s404-accent);border-color:var(--s404-accent);color:#111}.s404-choice-grid input:focus-visible+span{outline:2px solid #111;outline-offset:2px}.s404-form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}.s404-wizard textarea,.s404-wizard select,.s404-wizard input[type="text"],.s404-wizard input[type="email"]{width:100%;box-sizing:border-box;padding:12px;border:1px solid var(--s404-border);border-radius:8px;background:#fff;font:500 16px/1.3 var(--s404-font)}.s404-wizard__actions{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:30px;padding-top:22px;border-top:1px solid var(--s404-border)}.s404-wizard__summary{padding:14px;border-radius:8px;background:#f0f0ec;color:var(--s404-muted)}

.s404-icon-system{display:grid;grid-template-columns:1fr 1fr;gap:16px}.s404-icon-grid{grid-column:1/-1;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}.s404-icon-grid span{min-height:110px;padding:16px;border:1px solid var(--s404-border);border-radius:10px;background:#fff;display:grid;place-items:center;font-size:30px}.s404-icon-grid small{display:block;margin-top:8px;font:800 8px/1 var(--s404-mono);letter-spacing:.06em;color:var(--s404-muted)}.s404-icon-list,.s404-progress-stack{padding:22px;border:1px solid var(--s404-border);border-radius:var(--s404-card-radius);background:#fff}.s404-icon-list p{display:grid;grid-template-columns:44px 1fr;gap:12px;align-items:start;margin:0;padding:14px 0;border-bottom:1px solid var(--s404-border)}.s404-icon-list p:last-child{border-bottom:0}.s404-icon-list i{display:grid;place-items:center;width:36px;height:36px;border-radius:8px;background:#111;color:var(--s404-accent);font:800 10px/1 var(--s404-mono);font-style:normal}.s404-icon-list strong{display:block}.s404-progress-stack{display:grid;gap:20px}.s404-progress-stack>div{display:grid;grid-template-columns:90px 1fr 42px;gap:10px;align-items:center}.s404-progress-stack span,.s404-progress-stack em{font:800 9px/1 var(--s404-mono);font-style:normal}.s404-progress-stack em{text-align:right;color:var(--s404-muted)}.s404-progress-stack i{height:8px;border-radius:99px;background:#e4e4df;overflow:hidden}.s404-progress-stack b{display:block;height:100%;border-radius:inherit;background:#111}.s404-progress-stack>div:nth-child(2) b{background:var(--s404-accent)}

.s404-resource-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:14px}.s404-qr-card,.s404-download-card{padding:22px;border:1px solid var(--s404-border);border-radius:var(--s404-card-radius);background:#fff}.s404-qr-card{display:grid;grid-template-columns:150px 1fr;gap:22px;align-items:center}.s404-qr-card img{width:150px;height:150px;image-rendering:pixelated}.s404-qr-card small,.s404-download-card small{font:800 9px/1 var(--s404-mono);letter-spacing:.07em}.s404-qr-card h3,.s404-download-card h3{margin:9px 0 7px;font-size:25px;letter-spacing:-.04em}.s404-download-card{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center}.s404-download-card>span{display:grid;place-items:center;width:48px;height:48px;border-radius:8px;background:#111;color:var(--s404-accent);font:800 9px/1 var(--s404-mono)}.s404-download-card p{margin:0;color:var(--s404-muted);font-size:12px}.s404-download-card>a{display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--s404-border);border-radius:50%;text-decoration:none;font-weight:900}

.s404-motion-demo{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.s404-reveal-card{min-height:220px;padding:24px;border:1px solid var(--s404-border);border-radius:var(--s404-card-radius);background:#fff;display:flex;flex-direction:column;justify-content:space-between}.s404-reveal-card:nth-child(2){background:#111;color:#fff}.s404-reveal-card:nth-child(3){background:var(--s404-accent)}.s404-reveal-card small{font:800 9px/1 var(--s404-mono);letter-spacing:.07em}.s404-reveal-card strong{font-size:30px;line-height:1;letter-spacing:-.04em}.s404-motion-demo.is-animating .s404-reveal-card{animation:s404Reveal .55s both}.s404-motion-demo.is-animating .s404-reveal-card:nth-child(2){animation-delay:.12s}.s404-motion-demo.is-animating .s404-reveal-card:nth-child(3){animation-delay:.24s}.s404-motion-demo>button{grid-column:1/-1;justify-self:start}@keyframes s404Reveal{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

.s404-commerce-grid{display:grid;grid-template-columns:1.3fr .7fr;gap:14px}.s404-product-card{padding:24px;border:1px solid var(--s404-border);border-radius:var(--s404-card-radius);background:#fff}.s404-product-card:first-child{display:grid;grid-template-columns:.9fr 1.1fr;gap:24px}.s404-product-visual{min-height:330px;padding:20px;border-radius:12px;background:#111;color:#fff;display:flex;flex-direction:column;justify-content:space-between}.s404-product-visual span{font:900 clamp(44px,7vw,90px)/1 var(--s404-mono);color:var(--s404-accent)}.s404-product-visual small,.s404-product-card>small{font:800 9px/1 var(--s404-mono);letter-spacing:.07em}.s404-product-card h3{margin:10px 0;font-size:34px;line-height:1;letter-spacing:-.045em}.s404-product-card p{color:var(--s404-muted)}.s404-product-card>div>strong,.s404-product-card>strong{display:block;margin:20px 0;font-size:28px}.s404-product-card ul{padding-left:18px;color:var(--s404-muted)}.s404-product-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.s404-qty{display:flex;align-items:center;border:1px solid var(--s404-border);border-radius:8px;overflow:hidden}.s404-qty button{width:38px;height:42px;border:0;background:#f4f4f0;font-size:20px}.s404-qty output{min-width:38px;text-align:center;font-weight:800}.s404-product-card.is-service{background:var(--s404-accent);border-color:var(--s404-accent)}.s404-product-card.is-service p,.s404-product-card.is-service ul{color:rgba(0,0,0,.64)}.s404-cart-state{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:14px;padding:16px 18px;border-radius:10px;background:#111;color:#fff}.s404-cart-state>span{font:800 9px/1 var(--s404-mono);letter-spacing:.07em;color:var(--s404-accent)}.s404-cart-state strong{margin-left:auto}.s404-cart-state em{width:100%;color:rgba(255,255,255,.55);font-size:12px;font-style:normal}

.s404-embed-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:14px}.s404-embed-consent,.s404-link-preview{min-height:340px;padding:24px;border:1px solid var(--s404-border);border-radius:var(--s404-card-radius);background:#fff}.s404-embed-consent>small,.s404-link-preview>small{font:800 9px/1 var(--s404-mono);letter-spacing:.07em}.s404-embed-consent>div{margin-top:50px}.s404-embed-consent p,.s404-link-preview p{color:var(--s404-muted)}.s404-embed-loaded{height:230px;border-radius:10px;background:#111;color:#fff;display:grid;place-items:center;text-align:center;padding:20px}.s404-embed-loaded[hidden]{display:none}.s404-embed-loaded span{font-size:44px;color:var(--s404-accent)}.s404-embed-loaded button{padding:8px 10px;border:1px solid rgba(255,255,255,.22);border-radius:7px;background:transparent;color:#fff}.s404-browser-mini{display:grid;grid-template-columns:auto auto auto 1fr;gap:6px;align-items:center;margin:24px 0;padding:10px;border-radius:9px;background:#111;color:#fff}.s404-browser-mini i{width:8px;height:8px;border-radius:50%;background:#555}.s404-browser-mini i:first-child{background:var(--s404-accent)}.s404-browser-mini span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-left:6px;font:700 9px/1 var(--s404-mono);color:rgba(255,255,255,.48)}

.s404-announcement{display:flex;align-items:center;gap:12px;padding:13px 16px;border-radius:10px;background:#111;color:#fff}.s404-announcement>span{padding:5px 7px;border-radius:5px;background:var(--s404-accent);color:#111;font:800 8px/1 var(--s404-mono)}.s404-announcement p{margin:0}.s404-announcement a{margin-left:auto;color:var(--s404-accent);font-weight:800;text-decoration:none}.s404-announcement>button{border:0;background:none;color:#fff;font-size:22px}.s404-notification-demo{position:relative;display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;margin-top:14px}.s404-toast{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;max-width:390px;padding:15px;border:1px solid var(--s404-border);border-radius:10px;background:#fff;box-shadow:0 16px 45px rgba(0,0,0,.12)}.s404-toast[hidden]{display:none}.s404-toast>span{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--s404-accent);font-weight:900}.s404-toast p{margin:3px 0 0;color:var(--s404-muted);font-size:12px}.s404-toast>button{border:0;background:none;font-size:20px}.s404-consent-card{grid-column:1/-1;padding:24px;border:1px solid var(--s404-border);border-radius:var(--s404-card-radius);background:#f5f5f1}.s404-consent-card small{font:800 9px/1 var(--s404-mono);letter-spacing:.07em}.s404-consent-card h3{font-size:30px;letter-spacing:-.04em}.s404-consent-card>div{display:flex;gap:8px;flex-wrap:wrap}.s404-consent-card em{display:block;margin-top:13px;color:var(--s404-muted);font-size:12px;font-style:normal}

.s404-language-demo{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:start}.s404-language-switch{display:flex;padding:5px;border:1px solid var(--s404-border);border-radius:999px;background:#fff}.s404-language-switch button{min-width:48px;height:40px;border:0;border-radius:999px;background:transparent;font:800 10px/1 var(--s404-mono)}.s404-language-switch button[aria-pressed="true"]{background:#111;color:#fff}.s404-language-demo article{padding:28px;border:1px solid var(--s404-border);border-radius:var(--s404-card-radius);background:#fff}.s404-language-demo article small{font:800 9px/1 var(--s404-mono);letter-spacing:.07em;color:var(--s404-muted)}.s404-language-demo h3{margin:12px 0;font-size:clamp(34px,4vw,56px);line-height:.95;letter-spacing:-.05em}.s404-language-demo p{max-width:62ch;color:var(--s404-muted)}.s404-language-demo a{font-weight:800;text-decoration:none}

.s404-event-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.s404-event-card{display:grid;grid-template-columns:auto 1fr;gap:20px;padding:22px;border:1px solid var(--s404-border);border-radius:var(--s404-card-radius);background:#fff}.s404-event-card time{display:grid;place-items:center;align-content:center;width:76px;height:90px;border-radius:10px;background:#111;color:#fff}.s404-event-card time strong{font-size:32px;line-height:1}.s404-event-card time span{margin-top:5px;font:800 9px/1 var(--s404-mono);color:var(--s404-accent)}.s404-event-card small{font:800 9px/1 var(--s404-mono);letter-spacing:.07em}.s404-event-card h3{margin:9px 0;font-size:25px;line-height:1;letter-spacing:-.04em}.s404-event-card p{color:var(--s404-muted)}.s404-event-card a{font-weight:800;text-decoration:none}.s404-event-card.is-accent{background:var(--s404-accent);border-color:var(--s404-accent)}.s404-event-card.is-accent time{background:#fff;color:#111}.s404-event-card.is-accent time span{color:#111}.s404-event-card.is-dark{background:#111;color:#fff;border-color:#111}.s404-event-card.is-dark p{color:rgba(255,255,255,.55)}.s404-event-card.is-dark a{color:var(--s404-accent)}

.s404-document-list{display:grid;gap:10px}.s404-document-list>a{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;padding:18px;border:1px solid var(--s404-border);border-radius:10px;background:#fff;text-decoration:none;color:inherit}.s404-document-list>a:hover{border-color:#111}.s404-document-list>a>span{display:grid;place-items:center;width:52px;height:52px;border-radius:9px;background:#111;color:var(--s404-accent);font:800 9px/1 var(--s404-mono)}.s404-document-list small{font:800 8px/1 var(--s404-mono);letter-spacing:.07em;color:var(--s404-muted)}.s404-document-list strong{display:block;margin:5px 0}.s404-document-list em{font-size:11px;color:var(--s404-muted);font-style:normal}.s404-document-list b{font-size:22px}

@media(max-width:980px){.s404-hero-pattern-grid,.s404-chart-grid,.s404-event-grid{grid-template-columns:1fr 1fr}.s404-hero-pattern-grid>:last-child,.s404-chart-grid>:last-child,.s404-event-grid>:last-child{grid-column:1/-1}.s404-resource-grid{grid-template-columns:1fr 1fr}.s404-qr-card{grid-column:1/-1}.s404-commerce-grid,.s404-embed-grid{grid-template-columns:1fr}.s404-icon-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.s404-masonry{grid-template-columns:1fr 1fr}}
@media(max-width:850px){.s404-slider-card{grid-template-columns:1fr}.s404-masonry article.is-wide{grid-column:1/-1}.s404-product-card:first-child{grid-template-columns:1fr}.s404-language-demo{grid-template-columns:1fr}.s404-notification-demo{grid-template-columns:1fr}.s404-toast{max-width:none}.s404-form-row{grid-template-columns:1fr}}
@media(max-width:640px){.s404-hero-pattern-grid,.s404-chart-grid,.s404-event-grid,.s404-resource-grid,.s404-motion-demo,.s404-masonry,.s404-icon-system{grid-template-columns:1fr}.s404-hero-pattern-grid>:last-child,.s404-chart-grid>:last-child,.s404-event-grid>:last-child,.s404-qr-card,.s404-motion-demo>button{grid-column:auto}.s404-mini-hero{min-height:340px}.s404-slider-card{min-height:390px;padding:22px}.s404-slider-card h3,.s404-slider-card blockquote{font-size:40px}.s404-slider__bar{padding:12px}.s404-masonry article.is-tall,.s404-masonry article.is-wide{grid-column:auto;grid-row:auto;min-height:260px;display:block}.s404-masonry .is-tall img,.s404-masonry .is-wide img{height:220px;margin-bottom:18px}.s404-table-toolbar{align-items:stretch;flex-direction:column}.s404-table-toolbar input{min-width:0;width:100%}.s404-choice-grid{grid-template-columns:1fr}.s404-choice-grid label.is-wide{grid-column:auto}.s404-wizard{padding:20px}.s404-wizard__progress{grid-template-columns:1fr}.s404-icon-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.s404-resource-grid{display:grid}.s404-qr-card{grid-template-columns:100px 1fr}.s404-qr-card img{width:100px;height:100px}.s404-commerce-grid{display:grid}.s404-product-visual{min-height:260px}.s404-announcement{align-items:flex-start;flex-wrap:wrap}.s404-announcement a{margin-left:0}.s404-announcement>button{margin-left:auto}.s404-language-switch{justify-self:start}.s404-event-card{grid-template-columns:64px 1fr}.s404-event-card time{width:64px;height:78px}.s404-document-list>a{grid-template-columns:44px 1fr auto}.s404-document-list>a>span{width:44px;height:44px}}
@media(prefers-reduced-motion:reduce){.s404-slider__track{transition:none}.s404-masonry article{transition:none}.s404-motion-demo.is-animating .s404-reveal-card{animation:none!important}}

/* =========================================================
   Elements refinements — v0.5.1
   ========================================================= */
.s404-elements-index{margin:34px auto 72px!important;width:min(calc(100% - 40px),var(--s404-content-width))!important;max-width:var(--s404-content-width)}
.s404-button-variant{margin-top:18px}.s404-button-variant>small,.s404-interaction-variants>article>small,.s404-accordion-variants>article>small,.s404-pricing-variant__head small{display:block;margin:0 0 8px;font:800 9px/1 var(--s404-mono);letter-spacing:.08em;color:var(--s404-muted)}
.s404-demo-btn.is-soft{background:#e9e9e4;color:#111}.s404-demo-btn.is-small{min-height:36px;padding:8px 12px;font-size:11px}.s404-demo-btn.is-large{min-height:58px;padding:16px 26px;font-size:15px}.s404-demo-btn.is-square{width:48px;height:48px;min-height:48px;padding:0}.s404-demo-btn.has-icon{gap:9px}.s404-demo-btn.has-icon span{font-family:var(--s404-mono)}.s404-demo-btn.is-text{background:transparent;color:#111;padding-inline:4px;border:0}.s404-demo-btn.is-full{width:100%;background:#111;color:#fff}.s404-demo-link.is-arrow{display:inline-flex;gap:18px;align-items:center}.s404-demo-link.is-arrow span{transition:transform .18s ease}.s404-demo-link.is-arrow:hover span{transform:translateX(4px)}
.s404-interaction-variants,.s404-accordion-variants{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.s404-accordion-variants{margin-top:18px}.s404-interaction-variants>article,.s404-accordion-variants>article{min-width:0}.s404-tabs.is-pills{padding:10px}.s404-tabs.is-pills .s404-tabs__list{gap:6px;border:0;border-radius:10px;background:#f0f0ec}.s404-tabs.is-pills .s404-tabs__list button{flex:1;border-radius:999px}.s404-tabs.is-pills .s404-tabs__panel{border:0;padding:24px 12px 14px}.s404-accordion.is-minimal{border:0;border-radius:0;background:transparent}.s404-accordion.is-minimal details{border-color:var(--s404-border)}.s404-accordion.is-minimal summary{padding:18px 0;font-size:17px}.s404-accordion.is-minimal details p{padding:0 0 20px}.s404-accordion.is-minimal summary span{display:grid;place-items:center;min-width:34px;height:34px;border-radius:50%;background:#111;color:var(--s404-accent);font-size:9px}.s404-accordion.is-minimal details[open] summary span{transform:none;background:var(--s404-accent);color:#111}
.s404-pricing-variant{margin-top:28px}.s404-pricing-variant__head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.s404-pricing-variant__head small{margin:0}.s404-pricing-variant__head span{font:700 9px/1 var(--s404-mono);color:var(--s404-muted)}.s404-pricing-compact{display:grid;gap:8px}.s404-pricing-compact article{display:grid;grid-template-columns:1fr auto auto;gap:18px;align-items:center;padding:20px 22px;border:1px solid var(--s404-border);border-radius:12px;background:#fff}.s404-pricing-compact article.is-accent{background:var(--s404-accent);border-color:var(--s404-accent)}.s404-pricing-compact small{font:800 9px/1 var(--s404-mono);letter-spacing:.07em}.s404-pricing-compact h3{margin:7px 0 4px;font-size:26px;letter-spacing:-.04em}.s404-pricing-compact p{margin:0;color:var(--s404-muted)}.s404-pricing-compact .is-accent p{color:rgba(0,0,0,.62)}.s404-pricing-compact>article>strong{font-size:24px;white-space:nowrap}.s404-price-feature{display:grid;grid-template-columns:1.4fr .6fr;gap:28px;padding:clamp(24px,4vw,40px);border-radius:var(--s404-card-radius);background:#111;color:#fff}.s404-price-feature small,.s404-price-feature>div:last-child>span{font:800 9px/1 var(--s404-mono);letter-spacing:.08em;color:var(--s404-accent)}.s404-price-feature h3{margin:10px 0;font-size:clamp(34px,4vw,56px);letter-spacing:-.05em}.s404-price-feature p,.s404-price-feature li{color:rgba(255,255,255,.64)}.s404-price-feature>div:last-child{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding-left:28px;border-left:1px solid rgba(255,255,255,.14)}.s404-price-feature>div:last-child strong{display:block;margin:10px 0 2px;font-size:clamp(42px,5vw,68px);letter-spacing:-.06em}.s404-price-feature>div:last-child em{margin-bottom:22px;color:rgba(255,255,255,.48);font-style:normal;font-size:12px}
.s404-toast-controls{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0}.s404-toast-gallery{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.s404-toast.is-static{max-width:none;box-shadow:none}.s404-toast.is-success>span{background:var(--s404-accent);color:#111}.s404-toast.is-info>span{background:#dbeafe;color:#1e3a8a}.s404-toast.is-warning>span{background:#fef3c7;color:#92400e}.s404-toast.is-error>span{background:#fee2e2;color:#991b1b}.s404-toast.is-info{border-color:#bfdbfe}.s404-toast.is-warning{border-color:#fde68a}.s404-toast.is-error{border-color:#fecaca}.s404-toast.is-success{border-color:color-mix(in srgb,var(--s404-accent) 55%,var(--s404-border))}
.s404-contact-form-area{margin:80px 0;padding:clamp(26px,4vw,46px);border:1px solid var(--s404-border);border-radius:16px;background:#f2f2ed}.s404-contact-form-area>.wp-block-heading{max-width:800px}.s404-contact-form-area>p:not(.s404-kicker){max-width:760px;color:var(--s404-muted)}
@media(max-width:850px){.s404-interaction-variants,.s404-accordion-variants{grid-template-columns:1fr}.s404-pricing-compact article{grid-template-columns:1fr auto}.s404-pricing-compact article .s404-demo-btn{grid-column:1/-1}.s404-price-feature{grid-template-columns:1fr}.s404-price-feature>div:last-child{padding:22px 0 0;border-left:0;border-top:1px solid rgba(255,255,255,.14)}}
@media(max-width:640px){.s404-elements-index{width:min(calc(100% - 32px),var(--s404-content-width))!important}.s404-toast-gallery{grid-template-columns:1fr}.s404-pricing-compact article{grid-template-columns:1fr}.s404-pricing-compact>article>strong{white-space:normal}.s404-pricing-variant__head{align-items:flex-start;flex-direction:column}.s404-demo-btn.is-large{min-height:52px;padding:14px 20px}.s404-contact-form-area{margin:54px 0;padding:20px}}
.s404-contact-form-fallback{padding:24px;border:1px dashed var(--s404-border);border-radius:12px;background:#fff}.s404-contact-form-fallback small{font:800 9px/1 var(--s404-mono);letter-spacing:.08em;color:var(--s404-muted)}.s404-contact-form-fallback h3{margin:10px 0;font-size:28px}.s404-contact-form-fallback p{margin:0;color:var(--s404-muted)}

/* =========================================================
   Integration + Elements refinements — v0.5.2
   ========================================================= */
/* On the front page the transparent floating header belongs on top of the hero,
   not in a separate strip above it. Sticky headers stay fixed without reserving
   layout space. */
body.s404-front-page .s404-header.is-transparent { left:0;right:0;top:16px; }
body.s404-front-page .s404-header.is-transparent:not(.is-sticky) { position:absolute; }
body.s404-front-page .s404-header.is-transparent.is-sticky { position:fixed; }
body.admin-bar.s404-front-page .s404-header.is-transparent { top:48px; }
body.s404-front-page .s404-header.is-transparent:not(.is-scrolled) .s404-brand,
body.s404-front-page .s404-header.is-transparent:not(.is-scrolled) .s404-nav > ul > li > a { color:#fff; }
body.s404-front-page .s404-header.is-transparent:not(.is-scrolled) .s404-menu-toggle { color:#fff; }
body.s404-front-page .s404-header.is-transparent:not(.is-scrolled):has(.s404-menu-item--mega:hover) .s404-brand,
body.s404-front-page .s404-header.is-transparent:not(.is-scrolled):has(.s404-menu-item--mega:focus-within) .s404-brand,
body.s404-front-page .s404-header.is-transparent:not(.is-scrolled):has(.s404-menu-item--mega:hover) .s404-nav > ul > li > a,
body.s404-front-page .s404-header.is-transparent:not(.is-scrolled):has(.s404-menu-item--mega:focus-within) .s404-nav > ul > li > a { color:#111; }

/* Homepage Sitecheck announcement: the actual scanner remains on /sitecheck/. */
.s404-sitecheck-teaser .s404-section-lead{color:rgba(255,255,255,.68);max-width:580px}
.s404-sitecheck-teaser .wp-block-button.is-style-outline .wp-block-button__link{color:#fff;border-color:rgba(255,255,255,.25);background:transparent}
.s404-check-teaser-card{overflow:hidden;border:1px solid rgba(255,255,255,.16);border-radius:18px;background:rgba(255,255,255,.055);box-shadow:0 24px 70px rgba(0,0,0,.26);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.s404-check-teaser-card__bar{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;padding:13px 16px;border-bottom:1px solid rgba(255,255,255,.12);font:800 9px/1 var(--s404-mono);letter-spacing:.07em}.s404-check-teaser-card__bar>span{display:flex;gap:5px}.s404-check-teaser-card__bar i{display:block;width:7px;height:7px;border-radius:50%;background:#555}.s404-check-teaser-card__bar i:first-child{background:var(--s404-accent)}.s404-check-teaser-card__bar b{font-size:9px}.s404-check-teaser-card__bar em{color:var(--s404-accent);font-style:normal}
.s404-check-teaser-card__body{padding:clamp(22px,4vw,38px)}.s404-check-teaser-card__body>small{font:800 9px/1 var(--s404-mono);letter-spacing:.08em;color:rgba(255,255,255,.48)}
.s404-check-teaser-card__input{display:flex;justify-content:space-between;gap:18px;align-items:center;margin:14px 0 22px;padding:15px 16px;border:1px solid rgba(255,255,255,.17);border-radius:9px;background:#fff;color:#111}.s404-check-teaser-card__input span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#666}.s404-check-teaser-card__input b{white-space:nowrap;font:800 10px/1 var(--s404-mono)}
.s404-check-teaser-card__metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;border:1px solid rgba(255,255,255,.12);border-radius:10px;overflow:hidden;background:rgba(255,255,255,.12)}.s404-check-teaser-card__metrics>div{padding:18px;background:#141414}.s404-check-teaser-card__metrics small,.s404-check-teaser-card__metrics span{display:block;font:700 8px/1.25 var(--s404-mono);letter-spacing:.06em;color:rgba(255,255,255,.42)}.s404-check-teaser-card__metrics strong{display:block;margin:12px 0 5px;font-size:34px;line-height:1;color:#fff}.s404-check-teaser-card__metrics>div:first-child strong{color:var(--s404-accent)}.s404-check-teaser-card__body>p{margin:18px 0 0;color:rgba(255,255,255,.4);font-size:12px}

/* Contact plugin integration. */
.s404-contact-form-mount{margin-top:30px}.s404-contact-form-area .s404f-form{max-width:980px;margin-inline:auto}.s404-contact-form-area .s404f-preset-studio404{background:#fff;border-color:var(--s404-border);box-shadow:0 18px 55px rgba(0,0,0,.045)}

/* Additional button variants. */
.s404-demo-btn.is-xs{min-height:30px;padding:6px 9px;font-size:9px;font-family:var(--s404-mono);letter-spacing:.04em}.s404-demo-btn.is-circle{width:46px;height:46px;min-height:46px;padding:0;border-radius:50%;background:var(--s404-accent);color:#111}.s404-demo-btn.is-glass{background:rgba(17,17,17,.05);color:#111;border-color:rgba(17,17,17,.08);backdrop-filter:blur(10px)}.s404-demo-btn.is-underline{min-height:auto;padding:8px 0;border:0;border-radius:0;background:transparent;color:#111;border-bottom:2px solid var(--s404-accent)}.s404-demo-btn.is-success{background:#dff7df;color:#14532d;border-color:#b7e8b8}.s404-demo-btn.is-info{background:#dbeafe;color:#1e3a8a;border-color:#bfdbfe}.s404-demo-btn.is-warning{background:#fef3c7;color:#92400e;border-color:#fde68a}.s404-demo-btn.is-danger{background:#fee2e2;color:#991b1b;border-color:#fecaca}.s404-demo-btn:disabled{opacity:.42;cursor:not-allowed;transform:none}.s404-demo-btn.is-loading{pointer-events:none}.s404-btn-spinner{width:13px;height:13px;border:2px solid rgba(17,17,17,.25);border-top-color:#111;border-radius:50%;animation:s404Spin .8s linear infinite}.s404-demo-btn.is-icon-right span{order:2}.s404-split-button{display:inline-flex;border:1px solid #111;border-radius:var(--s404-button-radius);overflow:hidden;background:#111}.s404-split-button a,.s404-split-button button{min-height:46px;border:0;background:#111;color:#fff;font:700 13px/1 inherit}.s404-split-button a{display:flex;align-items:center;padding:0 16px;text-decoration:none}.s404-split-button button{width:42px;border-left:1px solid rgba(255,255,255,.18);cursor:pointer}.s404-split-button button:hover{background:#252525}@keyframes s404Spin{to{transform:rotate(360deg)}}

/* More tab / accordion treatments. */
.s404-interaction-variants{grid-template-columns:repeat(3,minmax(0,1fr))}.s404-accordion-variants{grid-template-columns:repeat(3,minmax(0,1fr))}
.s404-tabs.is-card-tabs{padding:10px;border:0;background:#f2f2ed}.s404-tabs.is-card-tabs .s404-tabs__list{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;border:0}.s404-tabs.is-card-tabs .s404-tabs__list button{display:grid;gap:7px;justify-items:start;padding:14px;border:1px solid var(--s404-border);border-radius:9px;background:#fff}.s404-tabs.is-card-tabs .s404-tabs__list button span{font:800 8px/1 var(--s404-mono);color:var(--s404-muted)}.s404-tabs.is-card-tabs .s404-tabs__list button[aria-selected="true"]{background:var(--s404-accent);border-color:var(--s404-accent);color:#111}.s404-tabs.is-card-tabs .s404-tabs__panel{padding:26px 14px 14px;border:0;background:transparent}
.s404-accordion.is-dark-card{padding:4px 18px;border:0;border-radius:12px;background:#111;color:#fff}.s404-accordion.is-dark-card details{border-color:rgba(255,255,255,.13)}.s404-accordion.is-dark-card details:last-child{border-bottom:0}.s404-accordion.is-dark-card summary{color:#fff}.s404-accordion.is-dark-card details p{color:rgba(255,255,255,.58)}.s404-accordion.is-dark-card summary span{color:var(--s404-accent)}

/* Charts: hover/focus values instead of static decoration only. */
.s404-chart-live{display:flex;align-items:baseline;justify-content:space-between;gap:10px;min-height:34px;margin:14px 0 2px;padding:9px 11px;border-radius:8px;background:#f2f2ed}.s404-chart-live span{font:800 8px/1 var(--s404-mono);letter-spacing:.07em;color:var(--s404-muted)}.s404-chart-live strong{font-size:12px;text-align:right}.s404-chart-card.is-dark .s404-chart-live{background:rgba(255,255,255,.07)}.s404-chart-card.is-dark .s404-chart-live span{color:rgba(255,255,255,.4)}
.s404-bar-chart button{appearance:none;position:relative;flex:1;height:var(--v);min-height:12px;padding:0;border:0;border-radius:7px 7px 0 0;background:#111;cursor:pointer;transition:filter .15s ease,transform .15s ease}.s404-bar-chart button:nth-child(5),.s404-bar-chart button:nth-child(6){background:var(--s404-accent)}.s404-bar-chart button:hover,.s404-bar-chart button:focus-visible{filter:brightness(1.18);transform:translateY(-4px);outline:2px solid var(--s404-accent);outline-offset:3px}.s404-bar-chart button i{position:absolute;left:50%;bottom:-26px;transform:translateX(-50%);font:700 9px/1 var(--s404-mono);font-style:normal;color:var(--s404-muted)}
.s404-line-chart circle{cursor:pointer;transition:r .15s ease,filter .15s ease}.s404-line-chart circle:hover,.s404-line-chart circle:focus{r:10;filter:drop-shadow(0 0 6px rgba(214,251,0,.8));outline:none}
.s404-donut-legend{display:grid;gap:6px;margin-top:18px}.s404-donut-legend button{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;width:100%;padding:8px 9px;border:1px solid transparent;border-radius:7px;background:transparent;color:rgba(255,255,255,.66);text-align:left;font-size:12px;cursor:pointer}.s404-donut-legend button:hover,.s404-donut-legend button:focus-visible{border-color:rgba(255,255,255,.16);background:rgba(255,255,255,.06);outline:none}.s404-donut-legend i{width:9px;height:9px;border-radius:50%;background:var(--s404-accent)}.s404-donut-legend i.b{background:#fff}.s404-donut-legend i.c{background:#555}.s404-donut-legend b{color:#fff}

@media(max-width:850px){body.s404-front-page .s404-header.is-transparent{top:10px}.s404-interaction-variants,.s404-accordion-variants{grid-template-columns:1fr 1fr}.s404-check-teaser-card__metrics{grid-template-columns:1fr}.s404-check-teaser-card__metrics>div{display:grid;grid-template-columns:1fr auto;gap:4px 16px;align-items:center}.s404-check-teaser-card__metrics strong{grid-row:1/3;grid-column:2;margin:0}.s404-check-teaser-card__metrics span{grid-column:1}}
@media(max-width:782px){body.admin-bar.s404-front-page .s404-header.is-transparent{top:56px}}
@media(max-width:640px){.s404-interaction-variants,.s404-accordion-variants{grid-template-columns:1fr}.s404-tabs.is-card-tabs .s404-tabs__list{grid-template-columns:1fr}.s404-split-button{width:100%}.s404-split-button a{flex:1}.s404-chart-live{align-items:flex-start;flex-direction:column}.s404-check-teaser-card__input{align-items:flex-start;flex-direction:column}.s404-check-teaser-card__input b{align-self:stretch;padding-top:10px;border-top:1px solid #eee}}


/* v0.5.3 — front-page hero/header integration.
   The theme emits body.s404-front-page; keep the header out of document flow so
   the hero artwork starts at the very top of the viewport. */
body.s404-front-page .s404-header.is-transparent { position:fixed;left:0;right:0;top:16px;z-index:100; }
body.admin-bar.s404-front-page .s404-header.is-transparent { top:48px; }
body.s404-front-page .site-main,body.s404-front-page .entry-content { margin-top:0; }
body.s404-front-page .entry-content > .s404-hero:first-child { margin-top:0!important; }
@media(max-width:850px){
  body.s404-front-page .s404-header.is-transparent{top:10px}
  body.s404-front-page .s404-header.is-transparent:not(.is-scrolled) .s404-header__inner{background:rgba(8,8,8,.22)!important;border-color:rgba(255,255,255,.15)!important;box-shadow:none!important;backdrop-filter:blur(12px) saturate(120%);-webkit-backdrop-filter:blur(12px) saturate(120%)}
  body.s404-front-page .s404-header.is-transparent:not(.is-scrolled) .s404-brand,
  body.s404-front-page .s404-header.is-transparent:not(.is-scrolled) .s404-nav>ul>li>a,
  body.s404-front-page .s404-header.is-transparent:not(.is-scrolled) .s404-menu-toggle{color:#fff}
}
@media(max-width:782px){body.admin-bar.s404-front-page .s404-header.is-transparent{top:56px}}

/* v0.5.4 — alternative Website Check prototype page */
.s404-check-alt-hero,
.s404-check-alt-scan,
.s404-check-alt-results,
.s404-check-alt-priorities,
.s404-check-plugin-data,
.s404-check-home-alt,
.s404-check-alt-final {
  width:min(calc(100% - 40px),var(--s404-content-width));
  margin-inline:auto;
}
.s404-check-alt-hero {
  display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(420px,.98fr);
  gap:clamp(34px,6vw,88px);
  align-items:center;
  padding:clamp(68px,8vw,118px) 0 clamp(80px,9vw,128px);
}
.s404-check-alt-hero__copy h1 {
  margin:14px 0 24px;
  max-width:760px;
  font-size:clamp(58px,7.5vw,118px);
  line-height:.86;
  letter-spacing:-.075em;
}
.s404-check-alt-hero__copy h1 span { color:#858585; }
.s404-check-alt-hero__copy .s404-section-lead { max-width:650px; }
.s404-check-alt-hero__actions { display:flex;flex-wrap:wrap;gap:10px;margin-top:30px; }
.s404-check-alt-trust { display:flex;flex-wrap:wrap;gap:18px 28px;margin-top:30px;color:var(--s404-muted);font:700 10px/1.4 var(--s404-mono);letter-spacing:.05em;text-transform:uppercase; }
.s404-check-alt-trust span::before { content:"✓";margin-right:7px;color:#111; }
.s404-check-alt-hero__visual { min-width:0; }
.s404-check-alt-browser { overflow:hidden;border:1px solid rgba(17,17,17,.12);border-radius:18px;background:#111;color:#fff;box-shadow:0 34px 80px rgba(0,0,0,.17);transform:rotate(1.2deg); }
.s404-check-alt-browser__bar { display:grid;grid-template-columns:8px 8px 8px 1fr auto;gap:7px;align-items:center;padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.1);font:700 8px/1 var(--s404-mono);letter-spacing:.04em; }
.s404-check-alt-browser__bar i { width:8px;height:8px;border-radius:50%;background:#444; }
.s404-check-alt-browser__bar span { min-width:0;margin-left:7px;padding:9px 12px;overflow:hidden;border:1px solid rgba(255,255,255,.08);border-radius:7px;background:#1b1b1b;color:#8f8f8f;text-overflow:ellipsis;white-space:nowrap; }
.s404-check-alt-browser__bar b { color:var(--s404-accent); }
.s404-check-alt-browser__body { padding:clamp(24px,4vw,46px);background:radial-gradient(circle at 85% 10%,rgba(214,251,0,.13),transparent 34%),#111; }
.s404-check-score { position:relative;display:grid;align-content:center;justify-items:center;width:190px;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at center,#fff 59%,transparent 60%),conic-gradient(var(--s404-accent) 0 82%,#deded8 82% 100%);color:#111;text-align:center; }
.s404-check-score::after { content:"";position:absolute;inset:11px;border:1px solid rgba(17,17,17,.08);border-radius:inherit; }
.s404-check-score small { position:relative;z-index:1;font:800 8px/1 var(--s404-mono);letter-spacing:.08em;color:#777; }
.s404-check-score strong { position:relative;z-index:1;margin-top:5px;font-size:62px;line-height:.9;letter-spacing:-.08em; }
.s404-check-score>span { position:relative;z-index:1;font:700 10px/1 var(--s404-mono);color:#777; }
.s404-check-score em { position:relative;z-index:1;margin-top:9px;font-style:normal;font-size:11px;font-weight:700; }
.s404-check-score.is-hero { width:162px;background:radial-gradient(circle at center,#151515 59%,transparent 60%),conic-gradient(var(--s404-accent) 0 82%,#303030 82% 100%);color:#fff; }
.s404-check-score.is-hero::after { border-color:rgba(255,255,255,.08); }
.s404-check-score.is-hero small,.s404-check-score.is-hero>span { color:#969696; }
.s404-check-alt-mini { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:28px; }
.s404-check-alt-mini article { min-width:0;padding:17px;border:1px solid rgba(255,255,255,.1);border-radius:10px;background:#191919; }
.s404-check-alt-mini small,.s404-check-alt-mini em { display:block;font:700 7px/1.3 var(--s404-mono);letter-spacing:.06em;color:#777;text-transform:uppercase; }
.s404-check-alt-mini b { display:block;margin:7px 0 4px;font-size:31px;line-height:1;letter-spacing:-.05em; }
.s404-check-alt-mini em { font-style:normal;color:#aaa; }
.s404-check-alt-signal { display:flex;align-items:end;gap:5px;height:52px;margin-top:28px;border-bottom:1px solid rgba(255,255,255,.12); }
.s404-check-alt-signal span { flex:1;height:var(--h,30%);min-height:10px;border-radius:4px 4px 0 0;background:#333; }
.s404-check-alt-signal span:nth-child(1){--h:30%}.s404-check-alt-signal span:nth-child(2){--h:48%}.s404-check-alt-signal span:nth-child(3){--h:36%}.s404-check-alt-signal span:nth-child(4){--h:72%;background:var(--s404-accent)}.s404-check-alt-signal span:nth-child(5){--h:56%}.s404-check-alt-signal span:nth-child(6){--h:82%;background:var(--s404-accent)}.s404-check-alt-signal span:nth-child(7){--h:66%}
.s404-check-demo-label { margin:12px 0 0;text-align:right;font:700 8px/1 var(--s404-mono);letter-spacing:.08em;color:#888; }
.s404-check-alt-scan,
.s404-check-alt-results,
.s404-check-alt-priorities,
.s404-check-plugin-data { padding:clamp(74px,9vw,132px) 0; }
.s404-check-alt-scan { border-top:1px solid var(--s404-border); }
.s404-check-alt-sectionhead { display:grid;grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr);gap:40px;align-items:end;margin-bottom:40px; }
.s404-check-alt-sectionhead h2 { margin:10px 0 0;font-size:clamp(42px,6vw,82px);line-height:.92;letter-spacing:-.065em; }
.s404-check-alt-sectionhead>p { max-width:540px;margin:0;color:var(--s404-muted);font-size:17px; }
.s404-check-alt-scan .s404-tool-shell { margin-top:0; }
.s404-check-alt-flow { display:grid;grid-template-columns:repeat(7,auto);gap:14px;align-items:center;margin-top:24px;padding:18px;border:1px solid var(--s404-border);border-radius:12px;background:#fff; }
.s404-check-alt-flow>div { display:grid;gap:4px; }
.s404-check-alt-flow span { font:800 8px/1 var(--s404-mono);color:#999; }
.s404-check-alt-flow b { font-size:13px; }
.s404-check-alt-flow small { color:var(--s404-muted);font-size:11px; }
.s404-check-alt-flow>i { color:#aaa;font-style:normal; }
.s404-check-alt-results { width:100%;max-width:none;padding-inline:max(20px,calc((100vw - var(--s404-content-width))/2));background:#111;color:#fff; }
.s404-check-alt-results .s404-kicker { color:var(--s404-accent); }
.s404-check-alt-results .s404-check-alt-sectionhead>p { color:#9a9a9a; }
.s404-check-result-shell { overflow:hidden;border:1px solid rgba(255,255,255,.13);border-radius:18px;background:#171717;box-shadow:0 34px 90px rgba(0,0,0,.22); }
.s404-check-result-shell>header { display:flex;justify-content:space-between;gap:20px;align-items:center;padding:20px 24px;border-bottom:1px solid rgba(255,255,255,.1); }
.s404-check-result-shell>header>div:first-child { display:grid;grid-template-columns:auto auto 1fr;gap:12px 18px;align-items:baseline; }
.s404-check-result-shell>header small { font:800 8px/1 var(--s404-mono);letter-spacing:.08em;color:#777; }
.s404-check-result-shell>header strong { font-size:18px; }
.s404-check-result-shell>header span { color:#777;font-size:12px; }
.s404-check-result-status { font:800 9px/1 var(--s404-mono);letter-spacing:.07em;color:var(--s404-accent); }
.s404-check-result-status i { display:inline-block;width:7px;height:7px;margin-right:7px;border-radius:50%;background:var(--s404-accent);box-shadow:0 0 0 5px rgba(214,251,0,.09); }
.s404-check-result-tabs { border:0;border-radius:0;background:transparent; }
.s404-check-result-tabs .s404-tabs__list { padding:0 18px;border-bottom:1px solid rgba(255,255,255,.1);background:#141414; }
.s404-check-result-tabs .s404-tabs__list button { position:relative;min-height:58px;border-radius:0;color:#8e8e8e;font-size:12px; }
.s404-check-result-tabs .s404-tabs__list button span { display:inline-grid;place-items:center;min-width:19px;height:19px;margin-left:5px;border-radius:99px;background:#2a2a2a;font-size:9px; }
.s404-check-result-tabs .s404-tabs__list button[aria-selected="true"] { background:transparent;color:#fff; }
.s404-check-result-tabs .s404-tabs__list button[aria-selected="true"]::after { content:"";position:absolute;left:12px;right:12px;bottom:0;height:3px;background:var(--s404-accent); }
.s404-check-result-panel { padding:clamp(24px,4vw,48px); }
.s404-check-overview { display:grid;grid-template-columns:220px 1fr;gap:34px;align-items:center; }
.s404-check-overview .s404-check-score { justify-self:center; }
.s404-check-kpis { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px; }
.s404-check-kpis article { display:grid;gap:8px;padding:18px;border:1px solid rgba(255,255,255,.1);border-radius:10px;background:#1e1e1e; }
.s404-check-kpis small { font:700 8px/1 var(--s404-mono);letter-spacing:.05em;color:#777;text-transform:uppercase; }
.s404-check-kpis b { font-size:34px;line-height:1; }
.s404-check-kpis span { justify-self:start;padding:5px 7px;border-radius:5px;font:800 7px/1 var(--s404-mono);letter-spacing:.04em;background:#2b2b2b;color:#aaa;text-transform:uppercase; }
.s404-check-kpis span.is-good { background:rgba(214,251,0,.1);color:var(--s404-accent); }
.s404-check-kpis span.is-warning { background:rgba(255,193,7,.1);color:#f3ca45; }
.s404-check-priority { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:30px; }
.s404-check-priority>div { position:relative;padding:22px 54px 22px 22px;border-top:1px solid rgba(255,255,255,.14); }
.s404-check-priority span,.s404-check-finding-list summary span { display:inline-flex;padding:6px 7px;border-radius:5px;font:800 7px/1 var(--s404-mono);letter-spacing:.05em;text-transform:uppercase; }
.s404-check-priority span.is-high,.s404-check-finding-list span.is-high { background:rgba(255,88,88,.12);color:#ff7b7b; }
.s404-check-priority span.is-medium,.s404-check-finding-list span.is-medium { background:rgba(255,193,7,.11);color:#f1ca4f; }
.s404-check-priority span.is-low,.s404-check-finding-list span.is-low { background:rgba(214,251,0,.1);color:var(--s404-accent); }
.s404-check-priority strong { display:block;margin:12px 0 6px;font-size:16px; }
.s404-check-priority p { margin:0;color:#929292;font-size:13px; }
.s404-check-priority>div>b { position:absolute;right:0;top:24px;font:800 9px/1 var(--s404-mono);color:#858585; }
.s404-check-vitals { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px; }
.s404-check-vitals article { padding:24px;border:1px solid rgba(255,255,255,.1);border-radius:12px;background:#1c1c1c; }
.s404-check-vitals small { font:800 8px/1 var(--s404-mono);letter-spacing:.06em;color:#888; }
.s404-check-vitals strong { display:block;margin:10px 0;font-size:42px;line-height:1;letter-spacing:-.06em; }
.s404-check-vitals strong span { margin-left:3px;font-size:13px;letter-spacing:0;color:#888; }
.s404-check-vitals article>div { height:5px;overflow:hidden;border-radius:99px;background:#303030; }
.s404-check-vitals article>div i { display:block;width:var(--value);height:100%;border-radius:inherit;background:var(--s404-accent); }
.s404-check-vitals p { margin:9px 0 0;color:#888;font-size:11px; }
.s404-check-waterfall { display:grid;gap:12px;margin-top:28px;padding-top:24px;border-top:1px solid rgba(255,255,255,.1); }
.s404-check-waterfall>div { display:grid;grid-template-columns:82px 1fr 72px;gap:14px;align-items:center; }
.s404-check-waterfall small { font:800 8px/1 var(--s404-mono);color:#777; }
.s404-check-waterfall span { height:8px;border-radius:99px;background:#292929; }
.s404-check-waterfall i { display:block;width:var(--w);height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--s404-accent),#8eaa00); }
.s404-check-waterfall b { text-align:right;font:800 9px/1 var(--s404-mono);color:#aaa; }
.s404-check-tech-summary { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px; }
.s404-check-tech-summary>div { display:grid;gap:6px;padding:20px;border:1px solid rgba(255,255,255,.1);border-radius:10px;background:#1c1c1c; }
.s404-check-tech-summary small { font:800 8px/1 var(--s404-mono);color:#777; }
.s404-check-tech-summary strong { font-size:20px; }
.s404-check-tech-summary span { color:var(--s404-accent);font:700 8px/1 var(--s404-mono); }
.s404-check-tech-grid { display:flex;flex-wrap:wrap;gap:8px;margin-top:28px; }
.s404-check-tech-grid span { padding:9px 12px;border:1px solid rgba(255,255,255,.13);border-radius:8px;background:#1d1d1d;font-size:12px;font-weight:700; }
.s404-check-context-note { margin:25px 0 0;padding:16px;border-left:3px solid var(--s404-accent);background:#1c1c1c;color:#999;font-size:12px; }
.s404-check-context-note b { color:#fff; }
.s404-check-finding-list { display:grid;gap:9px; }
.s404-check-finding-list details { border:1px solid rgba(255,255,255,.1);border-radius:10px;background:#1b1b1b; }
.s404-check-finding-list summary { display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;padding:18px 20px;cursor:pointer;list-style:none; }
.s404-check-finding-list summary::-webkit-details-marker { display:none; }
.s404-check-finding-list summary strong { font-size:14px; }
.s404-check-finding-list summary>b { font:800 8px/1 var(--s404-mono);color:#858585; }
.s404-check-finding-list details>div { padding:0 20px 20px 86px;color:#999;font-size:13px; }
.s404-check-finding-list details>div p { margin-top:0; }
.s404-check-finding-list details>div a { color:var(--s404-accent);font-weight:700;text-decoration:none; }
.s404-check-action-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px; }
.s404-check-action-grid article { padding:28px;border:1px solid var(--s404-border);border-radius:14px;background:#fff; }
.s404-check-action-grid article.is-first { background:var(--s404-accent);border-color:var(--s404-accent); }
.s404-check-action-grid article>span { font:800 8px/1 var(--s404-mono);letter-spacing:.06em; }
.s404-check-action-grid h3 { margin:24px 0 10px;font-size:clamp(25px,3vw,38px);line-height:.98;letter-spacing:-.05em; }
.s404-check-action-grid p { color:var(--s404-muted); }
.s404-check-action-grid article.is-first p { color:#3e4700; }
.s404-check-action-grid article>div { display:grid;grid-template-columns:auto 1fr auto 1fr;gap:8px 10px;align-items:baseline;margin-top:30px;padding-top:18px;border-top:1px solid rgba(17,17,17,.12); }
.s404-check-action-grid small { font:800 7px/1 var(--s404-mono);color:#777; }
.s404-check-action-grid b { font-size:12px; }
.s404-check-plugin-data { display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(38px,7vw,96px);border-top:1px solid var(--s404-border); }
.s404-check-plugin-data h2 { margin:12px 0 18px;font-size:clamp(38px,5vw,68px);line-height:.94;letter-spacing:-.055em; }
.s404-check-plugin-data>div:first-child>p:last-child { max-width:520px;color:var(--s404-muted); }
.s404-check-data-list { border-top:1px solid var(--s404-border); }
.s404-check-data-list>div { display:grid;grid-template-columns:110px 1fr;gap:20px;padding:18px 0;border-bottom:1px solid var(--s404-border); }
.s404-check-data-list span { font:800 8px/1 var(--s404-mono);letter-spacing:.06em; }
.s404-check-data-list p { margin:0;color:var(--s404-muted); }
.s404-check-home-alt { display:grid;grid-template-columns:1.25fr .75fr;gap:40px;margin-bottom:clamp(70px,9vw,128px);padding:clamp(34px,5vw,64px);border-radius:18px;background:#111;color:#fff; }
.s404-check-home-alt>div:first-child small { color:var(--s404-accent);font:800 8px/1 var(--s404-mono);letter-spacing:.07em; }
.s404-check-home-alt h2 { margin:14px 0;font-size:clamp(40px,5vw,68px);line-height:.93;letter-spacing:-.06em; }
.s404-check-home-alt>div:first-child p { max-width:550px;color:#9b9b9b; }
.s404-check-home-alt>div:first-child>a { display:inline-flex;gap:24px;align-items:center;margin-top:20px;padding:14px 17px;border-radius:8px;background:var(--s404-accent);color:#111;font-weight:800;text-decoration:none; }
.s404-check-home-alt__stats { display:grid;align-content:center; }
.s404-check-home-alt__stats>div { display:grid;grid-template-columns:42px 1fr auto;gap:12px;align-items:center;padding:18px 0;border-bottom:1px solid rgba(255,255,255,.12); }
.s404-check-home-alt__stats span { display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#242424;color:var(--s404-accent);font:800 8px/1 var(--s404-mono); }
.s404-check-home-alt__stats b { font-size:14px; }
.s404-check-home-alt__stats small { color:#777;font:700 8px/1 var(--s404-mono);text-transform:uppercase; }
.s404-check-alt-final { margin-bottom:clamp(80px,10vw,150px);padding:clamp(50px,7vw,90px);border:1px solid var(--s404-border);border-radius:18px;background:#fff;text-align:center; }
.s404-check-alt-final h2 { margin:14px auto 18px;max-width:920px;font-size:clamp(44px,6vw,82px);line-height:.92;letter-spacing:-.065em; }
.s404-check-alt-final>p:not(.s404-kicker) { max-width:660px;margin:0 auto;color:var(--s404-muted);font-size:17px; }
.s404-check-alt-final>div { display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin-top:30px; }

@media(max-width:980px){
  .s404-check-alt-hero{grid-template-columns:1fr}.s404-check-alt-hero__visual{max-width:720px}.s404-check-alt-sectionhead,.s404-check-plugin-data{grid-template-columns:1fr}.s404-check-overview{grid-template-columns:1fr}.s404-check-kpis{grid-template-columns:repeat(2,1fr)}.s404-check-action-grid{grid-template-columns:1fr}.s404-check-home-alt{grid-template-columns:1fr}.s404-check-tech-summary{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:700px){
  .s404-check-alt-hero,.s404-check-alt-scan,.s404-check-alt-priorities,.s404-check-plugin-data,.s404-check-home-alt,.s404-check-alt-final{width:min(calc(100% - 40px),var(--s404-content-width))}.s404-check-alt-hero{padding-top:48px}.s404-check-alt-hero__copy h1{font-size:clamp(52px,17vw,78px)}.s404-check-alt-browser{transform:none}.s404-check-alt-browser__bar{grid-template-columns:7px 7px 7px 1fr}.s404-check-alt-browser__bar b{display:none}.s404-check-alt-mini{grid-template-columns:1fr}.s404-check-alt-flow{grid-template-columns:1fr}.s404-check-alt-flow>i{transform:rotate(90deg);justify-self:start}.s404-check-result-shell>header{align-items:flex-start;flex-direction:column}.s404-check-result-shell>header>div:first-child{grid-template-columns:1fr}.s404-check-result-tabs .s404-tabs__list{overflow-x:auto;white-space:nowrap}.s404-check-kpis,.s404-check-priority,.s404-check-vitals,.s404-check-tech-summary{grid-template-columns:1fr}.s404-check-priority>div{padding-right:22px}.s404-check-priority>div>b{position:static;display:block;margin-top:12px}.s404-check-waterfall>div{grid-template-columns:65px 1fr}.s404-check-waterfall b{grid-column:2}.s404-check-finding-list summary{grid-template-columns:auto 1fr}.s404-check-finding-list summary>b{grid-column:2}.s404-check-finding-list details>div{padding-left:20px}.s404-check-data-list>div{grid-template-columns:1fr;gap:7px}.s404-check-home-alt{padding:28px}.s404-check-home-alt__stats>div{grid-template-columns:42px 1fr}.s404-check-home-alt__stats small{grid-column:2}.s404-check-alt-final{padding:42px 22px}
}


/* v0.5.6 — Work / Projects layout lab */
.s404-work-demo-hero{width:min(calc(100% - 48px),var(--s404-content-width));margin:0 auto;padding:clamp(70px,9vw,130px) 0 clamp(54px,7vw,92px);display:grid;grid-template-columns:minmax(0,1.4fr) minmax(300px,.6fr);gap:clamp(38px,7vw,100px);align-items:end}
.s404-work-demo-hero h1{margin:12px 0 24px;font-size:clamp(62px,9vw,126px);line-height:.86;letter-spacing:-.075em}
.s404-work-demo-hero>div>p:last-child{max-width:690px;color:var(--s404-muted);font-size:18px;line-height:1.6}
.s404-work-demo-hero aside{padding:26px;border-top:3px solid var(--s404-accent);background:#111;color:#fff}
.s404-work-demo-hero aside small,.s404-work-demo-hero aside span{font:800 8px/1 var(--s404-mono);letter-spacing:.08em;color:var(--s404-accent)}
.s404-work-demo-hero aside strong{display:block;margin:18px 0;font-size:32px;line-height:.98;letter-spacing:-.045em}
.s404-work-demo-hero aside p{margin:0;color:#999;font-size:13px;line-height:1.55}
.s404-work-demo-nav{position:sticky;top:calc(var(--s404-header-height) + 10px);z-index:20;width:min(calc(100% - 48px),var(--s404-content-width));margin:0 auto 36px;padding:11px 12px;display:flex;align-items:center;gap:6px;overflow-x:auto;border:1px solid var(--s404-border);border-radius:12px;background:rgba(246,246,243,.94);backdrop-filter:blur(16px);box-shadow:0 10px 34px rgba(0,0,0,.05)}
.s404-work-demo-nav span{padding:0 10px;font:800 8px/1 var(--s404-mono);letter-spacing:.08em;color:#888;white-space:nowrap}
.s404-work-demo-nav a{padding:10px 12px;border-radius:7px;color:#111;font:700 11px/1 var(--s404-font);text-decoration:none;white-space:nowrap}
.s404-work-demo-nav a:hover{background:#111;color:#fff}
.s404-work-demo-section{width:min(calc(100% - 48px),var(--s404-content-width));margin:0 auto;padding:clamp(78px,9vw,132px) 0;border-top:1px solid var(--s404-border);scroll-margin-top:120px}
.s404-work-demo-section>header{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr);gap:38px;align-items:end;margin-bottom:42px}
.s404-work-demo-section>header h2{margin:10px 0 0;font-size:clamp(48px,7vw,92px);line-height:.9;letter-spacing:-.065em}
.s404-work-demo-section>header>p{max-width:560px;margin:0;color:var(--s404-muted);font-size:16px;line-height:1.6}
.s404-work-demo-section.is-dark{width:100%;max-width:none;padding-inline:max(24px,calc((100vw - var(--s404-content-width))/2));background:#111;color:#fff;border-top:0}
.s404-work-demo-section.is-dark>header>p{color:#999}.s404-work-demo-section.is-dark .s404-kicker{color:var(--s404-accent)}
.s404-work-featured{display:grid;grid-template-columns:minmax(280px,.42fr) minmax(0,1fr);min-height:650px;border-radius:18px;overflow:hidden;background:#111;color:#fff}
.s404-work-featured__meta{display:flex;flex-direction:column;padding:clamp(32px,5vw,64px)}
.s404-work-featured__meta>small{font:800 8px/1 var(--s404-mono);letter-spacing:.08em;color:var(--s404-accent)}
.s404-work-featured__meta h3{margin:34px 0 18px;font-size:clamp(38px,5vw,68px);line-height:.92;letter-spacing:-.06em}
.s404-work-featured__meta p{color:#999;line-height:1.55}
.s404-work-featured__meta dl{display:grid;gap:0;margin:auto 0 30px;border-top:1px solid rgba(255,255,255,.12)}
.s404-work-featured__meta dl>div{display:grid;grid-template-columns:70px 1fr;gap:14px;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.12)}
.s404-work-featured__meta dt{font:800 8px/1 var(--s404-mono);color:#666}.s404-work-featured__meta dd{margin:0;font-size:12px;color:#d0d0d0}
.s404-work-featured__meta>a{align-self:flex-start;color:#111;background:var(--s404-accent);padding:13px 16px;border-radius:7px;text-decoration:none;font-weight:800}
.s404-project-screen{position:relative;min-height:520px;overflow:hidden;background:#ddd;color:#111}.s404-project-screen--lime{background:var(--s404-accent)}.s404-project-screen--paper{background:#deded7}.s404-project-screen--dark{background:#1b1b1b;color:#fff}
.s404-project-screen__bar{height:42px;display:flex;align-items:center;gap:6px;padding:0 14px;border-bottom:1px solid rgba(0,0,0,.14);background:rgba(255,255,255,.18)}
.s404-project-screen__bar i{width:7px;height:7px;border-radius:50%;background:rgba(0,0,0,.28)}.s404-project-screen__bar span{margin-left:8px;font:700 8px/1 var(--s404-mono);color:rgba(0,0,0,.48)}
.s404-project-screen--dark .s404-project-screen__bar{border-color:rgba(255,255,255,.1);background:#111}.s404-project-screen--dark .s404-project-screen__bar i{background:#555}.s404-project-screen--dark .s404-project-screen__bar span{color:#777}
.s404-project-screen__site{min-height:calc(100% - 42px);padding:28px 30px 24px;display:grid;grid-template-rows:auto 1fr auto;background:linear-gradient(140deg,rgba(255,255,255,.08),transparent 45%)}
.s404-project-screen__site nav,.s404-project-screen__site footer{display:flex;justify-content:space-between;gap:18px;align-items:center;font:800 8px/1 var(--s404-mono);letter-spacing:.04em}.s404-project-screen__site nav span{opacity:.55}
.s404-project-screen__site main{align-self:center;padding:50px 3vw}.s404-project-screen__site main small{display:block;font:800 8px/1 var(--s404-mono);letter-spacing:.08em;opacity:.55}.s404-project-screen__site main strong{display:block;margin:18px 0 30px;font-size:clamp(48px,6vw,88px);line-height:.84;letter-spacing:-.08em}.s404-project-screen__site main em{display:inline-flex;padding:11px 14px;background:#111;color:#fff;border-radius:6px;font-style:normal;font-size:11px;font-weight:800}.s404-project-screen__site footer{border-top:1px solid currentColor;padding-top:18px;opacity:.55}
.s404-project-screen__site.is-paper{background:#f7f7f2}.s404-project-screen__site.is-dark{background:radial-gradient(circle at 80% 10%,rgba(214,251,0,.12),transparent 25%),#171717}.s404-project-screen__site.is-dark main em{background:var(--s404-accent);color:#111}.s404-project-screen__site.is-dark nav,.s404-project-screen__site.is-dark footer{color:#eee}
.s404-work-split{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);gap:clamp(30px,6vw,76px);align-items:center}.s404-work-split .s404-project-screen{min-height:610px;border-radius:16px;box-shadow:0 28px 70px rgba(0,0,0,.12)}
.s404-work-split__copy h3{margin:22px 0;font-size:clamp(42px,5vw,70px);line-height:.92;letter-spacing:-.06em}.s404-work-split__copy>p{color:var(--s404-muted);font-size:16px;line-height:1.65}.s404-work-facts{display:grid;gap:0;margin:34px 0;border-top:1px solid var(--s404-border)}.s404-work-facts>div{display:grid;grid-template-columns:100px 1fr;gap:18px;padding:15px 0;border-bottom:1px solid var(--s404-border)}.s404-work-facts small{font:800 8px/1 var(--s404-mono);color:#888}.s404-work-facts b{font-size:13px}
.s404-browser-stack{display:grid;grid-template-columns:minmax(280px,.35fr) minmax(0,.65fr);gap:50px;align-items:center;min-height:620px}.s404-browser-stack__copy>span{font:800 8px/1 var(--s404-mono);color:var(--s404-accent)}.s404-browser-stack__copy h3{margin:20px 0;font-size:clamp(44px,5vw,72px);line-height:.9;letter-spacing:-.06em}.s404-browser-stack__copy p{color:#999}.s404-browser-stack__copy ul{padding-left:18px;color:#c5c5c5;line-height:1.9}
.s404-browser-stack__stage{position:relative;min-height:560px}.s404-stack-window{position:absolute;width:72%;height:390px;border:1px solid #333;border-radius:14px;overflow:hidden;background:#f6f6f3;color:#111;box-shadow:0 35px 80px rgba(0,0,0,.4)}.s404-stack-window>div{height:36px;display:flex;gap:6px;align-items:center;padding:0 12px;background:#e9e9e5;border-bottom:1px solid #d2d2cc}.s404-stack-window>div i{width:6px;height:6px;border-radius:50%;background:#aaa}.s404-stack-window>div span{margin-left:6px;font:700 7px/1 var(--s404-mono);color:#888}.s404-stack-window section{padding:38px}.s404-stack-window section small{font:800 8px/1 var(--s404-mono);color:#777}.s404-stack-window section strong{display:block;margin:22px 0;font-size:52px;line-height:.88;letter-spacing:-.07em}.s404-stack-window section p{color:#777}.s404-stack-window.is-back{right:0;top:15px;transform:rotate(3deg)}.s404-stack-window.is-front{left:4%;top:100px;z-index:2;transform:rotate(-2deg)}
.s404-stack-phone{position:absolute;right:4%;bottom:0;z-index:4;width:170px;height:330px;padding:10px;border-radius:26px;background:#0c0c0c;box-shadow:0 30px 70px rgba(0,0,0,.55)}.s404-stack-phone header{width:62px;height:14px;margin:1px auto 8px;border-radius:99px;background:#202020}.s404-stack-phone section{height:calc(100% - 23px);padding:24px 18px;border-radius:18px;background:var(--s404-accent);color:#111}.s404-stack-phone small{font:800 7px/1 var(--s404-mono)}.s404-stack-phone strong{display:block;margin:18px 0 55px;font-size:32px}.s404-stack-phone p{font-size:24px;line-height:1;letter-spacing:-.04em}.s404-stack-phone button{border:0;border-radius:50%;width:38px;height:38px;background:#111;color:#fff}
.s404-work-filter-demo{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:22px}.s404-work-filter-demo button{padding:9px 13px;border:1px solid var(--s404-border);border-radius:99px;background:#fff;font:700 10px/1 var(--s404-font)}.s404-work-filter-demo button.is-active{background:#111;color:#fff;border-color:#111}
.s404-work-grid-demo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.s404-work-grid-demo article{padding:16px 16px 24px;border:1px solid var(--s404-border);border-radius:14px;background:#fff}.s404-work-grid-demo article.is-large{grid-row:span 2}.s404-work-grid-demo__visual{min-height:280px;margin-bottom:22px;padding:24px;display:flex;justify-content:space-between;align-items:flex-end;border-radius:9px;background:var(--s404-accent);overflow:hidden}.s404-work-grid-demo article.is-large .s404-work-grid-demo__visual{min-height:560px}.s404-work-grid-demo__visual span{align-self:flex-start;font:800 8px/1 var(--s404-mono)}.s404-work-grid-demo__visual b{font-size:clamp(66px,9vw,128px);line-height:.7;letter-spacing:-.09em}.s404-work-grid-demo__visual.is-dark{background:#111;color:#fff}.s404-work-grid-demo__visual.is-paper{background:#e8e8e3}.s404-work-grid-demo article>small{font:800 8px/1 var(--s404-mono);color:#888}.s404-work-grid-demo h3{margin:10px 0 5px;font-size:28px;letter-spacing:-.04em}.s404-work-grid-demo p{margin:0 0 22px;color:var(--s404-muted)}.s404-work-grid-demo a{font-weight:800;color:#111;text-decoration:none}
.s404-work-index{border-top:1px solid var(--s404-border)}.s404-work-index a{display:grid;grid-template-columns:48px minmax(220px,1.4fr) minmax(180px,.8fr) 70px 24px;gap:20px;align-items:center;padding:22px 4px;border-bottom:1px solid var(--s404-border);color:#111;text-decoration:none;transition:padding .2s ease,background .2s ease}.s404-work-index a:hover{padding-inline:16px;background:var(--s404-accent)}.s404-work-index>a>span,.s404-work-index small,.s404-work-index>a>b{font:800 8px/1 var(--s404-mono);letter-spacing:.05em}.s404-work-index strong{display:block;margin-top:5px;font-size:22px;letter-spacing:-.04em}.s404-work-index em{font-style:normal;color:var(--s404-muted);font-size:12px}.s404-work-index i{font-style:normal;font-size:20px}
.s404-case-detail-demo{border-radius:18px;overflow:hidden;background:#fff;border:1px solid var(--s404-border)}.s404-case-detail-demo__intro{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr);gap:50px;padding:clamp(34px,6vw,76px)}.s404-case-detail-demo__intro h3{margin:22px 0;font-size:clamp(48px,6vw,80px);line-height:.9;letter-spacing:-.065em}.s404-case-detail-demo__intro p{max-width:600px;color:var(--s404-muted);font-size:16px;line-height:1.6}.s404-case-detail-demo__intro dl{margin:0;border-top:1px solid var(--s404-border)}.s404-case-detail-demo__intro dl>div{display:grid;grid-template-columns:70px 1fr;gap:16px;padding:14px 0;border-bottom:1px solid var(--s404-border)}.s404-case-detail-demo__intro dt{font:800 8px/1 var(--s404-mono);color:#999}.s404-case-detail-demo__intro dd{margin:0;font-size:12px}.s404-case-detail-demo__hero{padding:0 clamp(20px,4vw,54px)}.s404-case-detail-demo__hero .s404-project-screen{min-height:660px;border-radius:14px}.s404-case-detail-demo__story{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;padding:clamp(46px,7vw,84px)}.s404-case-detail-demo__story small{font:800 8px/1 var(--s404-mono);color:#888}.s404-case-detail-demo__story h4{margin:16px 0 10px;font-size:26px;line-height:1.02;letter-spacing:-.04em}.s404-case-detail-demo__story p{color:var(--s404-muted);font-size:13px;line-height:1.6}.s404-case-detail-demo__screens{display:grid;grid-template-columns:1.4fr .6fr;gap:14px;padding:0 clamp(20px,4vw,54px) clamp(40px,6vw,70px)}.s404-case-mini-screen{min-height:360px;padding:24px;border-radius:12px;background:#e6e6e0;display:grid;grid-template-columns:1fr auto;align-content:start;gap:26px}.s404-case-mini-screen.is-mobile{background:#111;color:#fff}.s404-case-mini-screen small{font:800 8px/1 var(--s404-mono)}.s404-case-mini-screen b{font-size:44px;line-height:.8}.s404-case-mini-screen span{grid-column:1/-1;height:18px;border-radius:4px;background:rgba(0,0,0,.08)}.s404-case-mini-screen span:nth-of-type(2){width:72%}.s404-case-mini-screen span:nth-of-type(3){width:48%}.s404-case-mini-screen.is-mobile span{background:rgba(255,255,255,.1)}
.s404-work-demo-decision{width:min(calc(100% - 48px),var(--s404-content-width));margin:0 auto;padding:clamp(78px,9vw,132px) 0}.s404-work-demo-decision>div{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:28px}.s404-work-demo-decision article{padding:28px;border:1px solid var(--s404-border);border-radius:12px;background:#fff}.s404-work-demo-decision article span{font:800 8px/1 var(--s404-mono);color:#888}.s404-work-demo-decision h3{margin:22px 0 10px;font-size:30px;letter-spacing:-.04em}.s404-work-demo-decision article p{margin:0;color:var(--s404-muted);font-size:13px}.s404-work-demo-note{margin:24px 0 0;padding:18px;border-left:4px solid var(--s404-accent);background:#efefe9;color:#555;font-size:13px}
@media(max-width:980px){.s404-work-demo-hero,.s404-work-demo-section>header,.s404-work-featured,.s404-work-split,.s404-browser-stack,.s404-case-detail-demo__intro{grid-template-columns:1fr}.s404-work-featured{min-height:0}.s404-work-featured__meta dl{margin:30px 0}.s404-work-split .s404-project-screen{min-height:520px}.s404-browser-stack__stage{min-height:590px}.s404-work-grid-demo{grid-template-columns:1fr 1fr}.s404-case-detail-demo__story{grid-template-columns:1fr}.s404-work-demo-decision>div{grid-template-columns:1fr}}
@media(max-width:700px){.s404-work-demo-hero,.s404-work-demo-section,.s404-work-demo-decision,.s404-work-demo-nav{width:min(calc(100% - 40px),var(--s404-content-width))}.s404-work-demo-hero{padding-top:54px}.s404-work-demo-hero h1{font-size:clamp(58px,18vw,84px)}.s404-work-demo-nav{top:calc(var(--s404-header-height) + 6px)}.s404-work-demo-section>header{margin-bottom:28px}.s404-work-demo-section>header h2{font-size:clamp(44px,14vw,68px)}.s404-project-screen{min-height:430px}.s404-project-screen__site{padding:20px}.s404-project-screen__site main{padding:34px 0}.s404-project-screen__site main strong{font-size:clamp(44px,14vw,64px)}.s404-work-split .s404-project-screen{min-height:430px}.s404-browser-stack__stage{min-height:470px}.s404-stack-window{width:88%;height:300px}.s404-stack-window section{padding:26px}.s404-stack-window section strong{font-size:36px}.s404-stack-phone{width:135px;height:270px}.s404-stack-phone section{padding:18px 14px}.s404-stack-phone strong{margin-bottom:34px;font-size:26px}.s404-stack-phone p{font-size:19px}.s404-work-grid-demo{grid-template-columns:1fr}.s404-work-grid-demo article.is-large{grid-row:auto}.s404-work-grid-demo article.is-large .s404-work-grid-demo__visual,.s404-work-grid-demo__visual{min-height:300px}.s404-work-index a{grid-template-columns:34px 1fr 22px;gap:12px}.s404-work-index em,.s404-work-index>a>b{display:none}.s404-case-detail-demo__intro{padding:30px 22px}.s404-case-detail-demo__hero{padding:0 14px}.s404-case-detail-demo__hero .s404-project-screen{min-height:480px}.s404-case-detail-demo__story{padding:42px 22px}.s404-case-detail-demo__screens{grid-template-columns:1fr;padding:0 14px 28px}.s404-case-mini-screen{min-height:280px}}