/* CriticalTrade Web — site styles. Tokens live here; theme.json mirrors the palette for the editor. */
@property --gap { syntax: "<length>"; inherits: true; initial-value: 40px; }
:root {
  --bg: #f8f9fd; --bg2: #ffffff; --bg3: #eef1f8;
  --line: rgba(22,44,84,.09); --line2: rgba(22,44,84,.16);
  --txt: #0b1220; --mut: #566277; --dim: #8a94a7;
  --cy: #1683d8; --cy2: #5cc0ff; --deep: #0a5fae; --amb: #e8961a; --hot: #ef6a45; --ok: #17b26a; --navy: #0d1a2c;
  --r: 12px;
  --sh: 0 1px 2px rgba(22,44,84,.05), 0 14px 34px rgba(22,44,84,.07);
  --f: Geist, "Helvetica Neue", Arial, sans-serif; --m: "Geist Mono", ui-monospace, Menlo, monospace;
  --pad: max(24px, env(safe-area-inset-left, 0px));
}
html { scroll-behavior: smooth; }
body { background: var(--bg); color: var(--txt); font-family: var(--f); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
.wp-site-blocks > * { margin-block-start: 0; }
.entry > * , .site-main > * { margin-block-start: 0 !important; }
h1, h2, h3, h4, h5, p, ul, ol { margin: 0; }
h1, h2, h3 { text-wrap: balance; }
a { text-decoration: none; }
.in { max-width: 1240px; margin-inline: auto; padding-left: var(--pad); padding-right: max(24px, env(safe-area-inset-right, 0px)); }
.in.narrow { max-width: 808px; }
.eyebrow { font: 500 12px/1 var(--m); letter-spacing: .14em; text-transform: uppercase; color: var(--cy); display: inline-flex; align-items: center; gap: 10px; }
.eyebrow::before { content: ""; width: 18px; height: 1px; background: var(--cy); }
:focus-visible { outline: 2px solid var(--cy); outline-offset: 3px; }

/* ---------- buttons ---------- */
.wp-element-button, .wp-block-button__link { border-radius: var(--r) !important; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; box-shadow: 0 1px 0 rgba(255,255,255,.15) inset, 0 10px 24px rgba(13,26,44,.16); display: inline-flex; align-items: center; gap: 10px; cursor: pointer; border: 0; font-family: var(--f); }
.wp-block-button__link:hover, .wp-element-button:hover { transform: translateY(-1px); color: #fff; box-shadow: 0 1px 0 rgba(255,255,255,.15) inset, 0 14px 32px rgba(13,26,44,.24); }
.is-style-outline > .wp-block-button__link, .wp-element-button.is-ghost { background: #fff !important; color: var(--txt) !important; border: 0 !important; box-shadow: inset 0 0 0 1px var(--line2), 0 1px 2px rgba(22,44,84,.05); padding: 13px 22px; }
.is-style-outline > .wp-block-button__link:hover, .wp-element-button.is-ghost:hover { color: var(--txt) !important; box-shadow: inset 0 0 0 1px rgba(22,44,84,.3), 0 6px 16px rgba(22,44,84,.08); }
.wp-block-buttons { gap: 12px; }
.hero-copy > .ctas, .phero-copy > .ctas, .phero .in > .ctas, .ctas { margin-top: 36px !important; }

/* ---------- header ---------- */
.site-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; }
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 0; } }
.nav { backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%); background: rgba(248,249,253,.8); border-bottom: 1px solid var(--line); }
.nav-in { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 68px; }
.nav-in > * { margin: 0 !important; }
.brand { display: flex; align-items: center; gap: 12px; font-weight: 600; font-size: 17px; letter-spacing: -.01em; color: var(--txt); white-space: nowrap; }
.brand:hover { color: var(--txt); }
.brand-t span { color: var(--mut); font-weight: 400; }
.mainnav { font-size: 14px; }
.mainnav .wp-block-navigation__container { gap: 30px; }
.mainnav .wp-block-navigation-item__content { color: var(--mut); }
.mainnav .wp-block-navigation-item__content:hover { color: var(--txt); }
.mainnav .wp-block-navigation__submenu-container { border: 0 !important; border-radius: var(--r); padding: 8px !important; background: #fff !important; box-shadow: inset 0 0 0 1px var(--line), 0 20px 40px rgba(22,44,84,.12); min-width: 230px !important; }
.mainnav .wp-block-navigation__submenu-container .wp-block-navigation-item__content { padding: 9px 12px !important; border-radius: 8px; color: var(--txt); }
.mainnav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover { background: var(--bg); }
.nav-cta .wp-block-button__link { padding: 10px 18px; font-size: 14px; }
.wp-block-navigation__responsive-container-open { width: 40px; height: 40px; border-radius: var(--r); box-shadow: inset 0 0 0 1px var(--line2); background: #fff; display: none; align-items: center; justify-content: center; }
.wp-block-navigation__responsive-container.is-menu-open { background: var(--bg) !important; padding: 24px var(--pad) !important; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { gap: 18px; font-size: 22px; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { color: var(--txt); }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container { box-shadow: none; padding: 8px 0 0 12px !important; background: transparent !important; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content { font-size: 17px; color: var(--mut); padding: 4px 0 !important; }

/* ---------- home hero ---------- */
.hero { position: relative; overflow: hidden; padding-block: 72px 0; isolation: isolate; }
.hero::before, .phero::before { content: ""; position: absolute; inset: 0; z-index: -2; background: radial-gradient(55% 55% at 78% 40%, rgba(92,192,255,.20), transparent 70%), radial-gradient(35% 40% at 72% 88%, rgba(232,150,26,.08), transparent 70%), radial-gradient(50% 60% at 5% 0%, rgba(92,192,255,.08), transparent 70%); }
.hero::after, .phero::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 64px 64px; -webkit-mask-image: radial-gradient(70% 70% at 60% 40%, #000 20%, transparent 75%); mask-image: radial-gradient(70% 70% at 60% 40%, #000 20%, transparent 75%); }
.hgrid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.05fr); gap: 24px; align-items: center; min-height: 600px; }
.hgrid > *, .hero-copy > * { margin-block-start: 0 !important; }
.badge { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; color: var(--mut); padding: 7px 14px 7px 10px; border-radius: var(--r); background: #fff; box-shadow: inset 0 0 0 1px var(--line2), 0 1px 2px rgba(22,44,84,.04); }
.badge b { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px rgba(23,178,106,.14); }
.hero-h { font-size: clamp(44px, 6.2vw, 86px); line-height: .98; letter-spacing: -.045em; margin-top: 28px !important; }
.hero-h em, .ptitle em { font-style: normal; background: linear-gradient(100deg, var(--deep), var(--cy) 50%, var(--cy2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lead { font-size: 19px; line-height: 1.55; color: var(--mut); max-width: 46ch; }
.hero-copy > .lead { margin-top: 26px !important; }
.hero-copy > .hero-h { margin-top: 28px !important; }

.scene { position: relative; height: 600px; perspective: 1900px; perspective-origin: 50% 30%; }
.floor { --s: 1; position: absolute; left: 50%; top: 50%; width: 600px; height: 400px; margin: -200px 0 0 -300px; transform-style: preserve-3d; transform: scale(var(--s)) rotateX(58deg) rotateZ(-36deg);
  background: linear-gradient(rgba(22,131,216,.08) 1px, transparent 1px) 0 0/20px 20px, linear-gradient(90deg, rgba(22,131,216,.08) 1px, transparent 1px) 0 0/20px 20px, linear-gradient(160deg, #ffffff, #e9eef6);
  box-shadow: 0 0 0 1px rgba(22,44,84,.12), 0 60px 90px rgba(22,44,84,.18), 0 20px 30px rgba(22,44,84,.08); border-radius: 8px; }
.racks { position: absolute; inset: 0; transform-style: preserve-3d; }
.box { position: absolute; transform-style: preserve-3d; transform: translateZ(var(--h)); }
.box::before, .box::after { content: ""; position: absolute; }
.box::before { left: 0; top: 100%; width: 100%; height: var(--h); transform-origin: top; transform: rotateX(-90deg); }
.box::after { right: 100%; top: 0; width: var(--h); height: 100%; transform-origin: right; transform: rotateY(-90deg); }
.rack { --h: 30px; left: 110px; width: 380px; height: 28px; background: repeating-linear-gradient(90deg, #ffffff 0 18px, #cfd8e4 18px 19px), #fff; box-shadow: 0 0 0 1px #c3cddb; }
.rack::before { background: radial-gradient(circle, var(--ok) 0 1.3px, transparent 1.9px) 4px 6px/19px 9px, radial-gradient(circle, var(--cy) 0 1.1px, transparent 1.7px) 11px 10px/19px 9px, repeating-linear-gradient(90deg, #1b2638 0 18px, #3a4a62 18px 19px); animation: ctw-blink 2.8s steps(2) infinite; }
.rack::after { background: #c9d2de; }
.racks .rack:nth-child(2)::before { animation-delay: -.7s; } .racks .rack:nth-child(3)::before { animation-delay: -1.4s; } .racks .rack:nth-child(4)::before { animation-delay: -2.1s; }
@keyframes ctw-blink { 50% { filter: brightness(1.5); } }
.crah { --h: 38px; width: 36px; height: 92px; background: linear-gradient(#e9f5fe, #d4ebfb); box-shadow: 0 0 0 1px rgba(22,131,216,.55); }
.crah::before { background: repeating-linear-gradient(90deg, #cfe6f8 0 3px, #7fb9e6 3px 4px); }
.crah::after { background: #b9d6ee; }
.elec { --h: 26px; height: 40px; background: linear-gradient(#fff6e6, #fde9c6); box-shadow: 0 0 0 1px rgba(232,150,26,.6); }
.elec::before { background: repeating-linear-gradient(90deg, #f6dcaa 0 10px, #d9a554 10px 11px); }
.elec::after { background: #efd29c; }
.flow { position: absolute; height: 2px; left: 60px; width: 480px; transform: translateZ(2px); border-radius: 2px; background: repeating-linear-gradient(90deg, currentColor 0 10px, transparent 10px 20px); color: var(--cy); box-shadow: 0 0 10px rgba(22,131,216,.5); animation: ctw-flow 1.2s linear infinite; }
.flow.hot { color: var(--hot); box-shadow: 0 0 10px rgba(239,106,69,.5); animation-direction: reverse; }
@keyframes ctw-flow { to { background-position: 20px 0; } }
.aisle { position: absolute; left: 110px; width: 380px; transform: translateZ(1px); background: linear-gradient(90deg, transparent, rgba(22,131,216,.10), transparent); }
.aisle.hot { background: linear-gradient(90deg, transparent, rgba(239,106,69,.10), transparent); }
.fl { position: absolute; font: 500 9px var(--m); letter-spacing: .16em; color: var(--cy); transform: translateZ(2px); white-space: nowrap; }
.fl.hot { color: var(--hot); } .fl.pw { color: #b8720a; }
.bus { position: absolute; transform: translateZ(78px); background: repeating-linear-gradient(90deg, var(--amb) 0 6px, transparent 6px 10px); box-shadow: 0 0 10px rgba(232,150,26,.55); animation: ctw-flow 1.6s linear infinite; }
.bus.v { background: repeating-linear-gradient(0deg, var(--amb) 0 6px, transparent 6px 10px); animation: ctw-flowv 1.6s linear infinite; }
@keyframes ctw-flowv { to { background-position: 0 -20px; } }
.scan { position: absolute; top: 0; bottom: 0; width: 90px; left: -90px; transform: translateZ(3px); background: linear-gradient(90deg, transparent, rgba(22,131,216,.12), transparent); animation: ctw-scan 6s cubic-bezier(.5,0,.5,1) infinite; }
@keyframes ctw-scan { to { left: 600px; } }
.callout { position: absolute; z-index: 3; padding: 12px 16px; border-radius: var(--r); background: rgba(255,255,255,.82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px var(--line2), 0 18px 40px rgba(22,44,84,.12); font-size: 13px; }
.callout strong { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; }
.callout strong i { width: 8px; height: 8px; border-radius: 50%; }
.callout small { display: block; color: var(--mut); font: 12px var(--m); margin-top: 3px; }
.c1 { left: 2%; top: 13%; } .c1 i { background: var(--amb); }
.c2 { right: 0; bottom: 16%; } .c2 i { background: var(--cy); }
.c3 { right: 6%; top: 6%; } .c3 i { background: var(--ok); }

.proof { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); border-top: 1px solid var(--line2); margin-top: 24px !important; }
.proof > .pi { padding: 28px 28px 32px; display: grid; gap: 8px; border-right: 1px solid var(--line); margin: 0 !important; }
.proof > .pi > * { margin: 0 !important; }
.proof > .pi:first-child { padding-left: 0; }
.proof > .pi:last-child { border-right: 0; }
.proof .k { font: 500 11px var(--m); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.proof p:not(.k) { font-size: 15px; line-height: 1.45; }

/* ---------- inner page hero ---------- */
.phero { position: relative; overflow: hidden; isolation: isolate; padding-block: 96px 88px; border-bottom: 1px solid var(--line); }
.phero.tall { padding-block: 140px 160px; }
.phero .in > *, .phero-copy > * { margin-block-start: 0 !important; }
.ptitle { font-size: clamp(40px, 5.2vw, 72px); line-height: 1; letter-spacing: -.045em; margin-top: 22px !important; max-width: 18ch; }
.phero-copy > .lead, .phero .in > .lead { margin-top: 22px !important; }
.phero-copy > .ptitle, .phero .in > .ptitle { margin-top: 22px !important; }
.phero-copy > .checks { margin-top: 26px !important; }
.phero-copy > .mail { margin-top: 26px !important; }
.phgrid { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr); gap: 56px; align-items: center; }
.phero.quote { padding-block: 80px; }
.phero.quote .checks { margin-top: 26px !important; }
.phero.quote .mail { margin-top: 26px !important; }

/* ---------- sections ---------- */
.sec { padding-block: 128px; position: relative; }
.sec.white { background: #fff; border-block: 1px solid var(--line); }
.sec.nopad-top { padding-top: 0; }
.sec.tight { padding-block: 56px 0; }
.sec .in > * + * { margin-block-start: 40px !important; }
.head { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 40px; align-items: end; margin-bottom: 24px; }
.head > * { margin: 0 !important; }
.head h2, .h2 { font-size: clamp(34px, 4.4vw, 58px); line-height: 1.02; letter-spacing: -.035em; margin-top: 20px !important; }
.head .head-p { color: var(--mut); font-size: 18px; max-width: 46ch; justify-self: end; }
.split { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 72px; align-items: center; }
.split > * { margin: 0 !important; min-width: 0; }
.split .lead { margin-top: 22px !important; }
.split .checks { margin-top: 28px !important; }
.stack2 { display: grid; gap: 16px; }
.stack2 > * { margin: 0 !important; }

/* cards */
.bento, .grid3, .grid2 { display: grid; gap: 16px; }
.bento, .grid3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.bento > *, .grid3 > *, .grid2 > * { margin: 0 !important; }
.card { --mx: 50%; --my: 50%; position: relative; border-radius: 20px; padding: 30px; background: radial-gradient(420px circle at var(--mx) var(--my), rgba(92,192,255,.10), transparent 45%), #fff; box-shadow: inset 0 0 0 1px var(--line), var(--sh); overflow: hidden; min-width: 0; display: flex; flex-direction: column; gap: 12px; transition: box-shadow .3s ease; }
.card > * { margin: 0 !important; }
.card:hover { box-shadow: inset 0 0 0 1px var(--line2), 0 1px 2px rgba(22,44,84,.05), 0 20px 44px rgba(22,44,84,.10); }
.card h3 { font-size: 21px; letter-spacing: -.02em; line-height: 1.2; }
.card p { color: var(--mut); font-size: 15px; }
.card .ic { width: 44px; height: 44px; border-radius: var(--r); display: grid; place-items: center; background: #eef6fd; box-shadow: inset 0 0 0 1px rgba(22,131,216,.2); margin-bottom: 28px !important; }
.card .ic svg { width: 22px; height: 22px; stroke: var(--cy); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.card .pg { font: 500 11px var(--m); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); margin-top: auto !important; padding-top: 4px; }
.card .more { margin-top: auto !important; padding-top: 8px; }
.card .more a { color: var(--cy); font-weight: 500; font-size: 15px; }
.card .more a::after { content: ""; position: absolute; inset: 0; }
.grid2 .card { min-height: 280px; }
.card.wide { grid-column: span 2; grid-row: span 2; padding: 0; justify-content: flex-end; background: radial-gradient(420px circle at var(--mx) var(--my), rgba(92,192,255,.16), transparent 45%), linear-gradient(180deg, #0f1d31, #0a1422); color: #fff; }
.card.wide .art { position: relative; flex: 1; min-height: 340px; }
.card.wide .art svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.card.wide .txt { padding: 0 34px 34px; display: grid; gap: 10px; }
.card.wide .txt > * { margin: 0 !important; }
.card.wide .eyebrow { color: var(--cy2); } .card.wide .eyebrow::before { background: var(--cy2); }
.card.wide h3 { font-size: 30px; max-width: 22ch; color: #fff; }
.pcb .t { fill: none; stroke: rgba(92,192,255,.28); stroke-width: 2; stroke-linejoin: round; }
.pcb .p { fill: none; stroke: var(--cy2); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 22 520; animation: ctw-pulse 3.6s linear infinite; filter: drop-shadow(0 0 6px var(--cy2)); }
.pcb .p:nth-of-type(2) { animation-delay: -.7s; } .pcb .p:nth-of-type(3) { animation-delay: -1.5s; } .pcb .p:nth-of-type(4) { animation-delay: -2.2s; } .pcb .p:nth-of-type(5) { animation-delay: -2.9s; } .pcb .p:nth-of-type(6) { animation-delay: -.35s; }
@keyframes ctw-pulse { from { stroke-dashoffset: 542; } to { stroke-dashoffset: 0; } }
.pcb .pad { fill: #0a1422; stroke: var(--cy2); stroke-width: 2; }
.pcb .lb { font: 500 11px var(--m); letter-spacing: .12em; fill: #8fa3ba; }
.pcb .chip { fill: url(#chipg); stroke: rgba(159,224,255,.5); stroke-width: 1; }
.pcb .pins { stroke: #6f8aa6; stroke-width: 3; }
.pcb .ct { font: 600 34px var(--f); letter-spacing: -.02em; fill: #fff; }
.pcb .cs { font: 500 9px var(--m); letter-spacing: .2em; fill: #9fe0ff; }

/* checks list */
.checks { list-style: none; padding: 0; display: grid; gap: 12px; }
.checks li { display: flex; gap: 12px; font-size: 16px; line-height: 1.45; margin: 0; }
.checks li::before { content: ""; flex: none; width: 20px; height: 20px; border-radius: 6px; margin-top: 1px; background: #eef6fd url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%231683d8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 10.5l2.6 2.6L14 7.5'/%3E%3C/svg%3E") center/16px no-repeat; box-shadow: inset 0 0 0 1px rgba(22,131,216,.25); }

/* included: page list + exploded stack */
.inc { background: #fff; border-block: 1px solid var(--line); overflow: hidden; }
.igrid { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap: 56px; align-items: center; }
.igrid > * { margin: 0 !important; min-width: 0; }
.igrid > div > * + * { margin-block-start: 0 !important; }
.igrid > div > .plist, .plist { list-style: none; padding: 0; margin-top: 40px !important; border-top: 1px solid var(--line2); }
.plist li { display: flex; justify-content: space-between; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); font-size: 17px; cursor: pointer; transition: color .2s; margin: 0; }
.plist li span { color: var(--mut); font-size: 14px; text-align: right; }
.plist li b { font: 500 11px var(--m); color: var(--dim); margin-right: 14px; letter-spacing: .06em; }
.plist li.on { color: var(--cy); }
.sec:not(.inc) .plist li { cursor: default; }
.igrid > div > .terms, .terms { margin-top: 28px !important; display: flex; flex-wrap: wrap; gap: 10px; }
.terms span { font-size: 13px; color: var(--mut); padding: 8px 14px; border-radius: var(--r); background: var(--bg); box-shadow: inset 0 0 0 1px var(--line2); }
.igrid > div > .wp-block-buttons { margin-top: 28px !important; }
.stack { position: relative; height: 620px; perspective: 2000px; perspective-origin: 50% 20%; }
.stack::before { content: ""; position: absolute; left: 12%; right: 12%; bottom: 8%; height: 30%; background: radial-gradient(50% 50% at 50% 50%, rgba(22,44,84,.16), transparent 70%); filter: blur(10px); }
.layers { --s: 1.12; position: absolute; left: 50%; top: 56%; width: 400px; height: 260px; margin: -130px 0 0 -200px; transform-style: preserve-3d; transform: scale(var(--s)) rotateX(56deg) rotateZ(-34deg); animation: ctw-breathe 7s ease-in-out infinite; transition: left .6s cubic-bezier(.2,.7,.2,1); }
.stack:hover .layers { --gap: 60px; animation-play-state: paused; }
@keyframes ctw-breathe { 0%, 100% { --gap: 38px; } 50% { --gap: 52px; } }
.layer { position: absolute; inset: 0; border-radius: 10px; background: #fff; box-shadow: 0 0 0 1px rgba(22,44,84,.14), 0 10px 24px rgba(22,44,84,.10); transform: translateZ(calc(var(--i) * var(--gap))); transition: transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .3s, opacity .3s; overflow: hidden; cursor: pointer; }
.layer.on { box-shadow: 0 0 0 2px var(--cy), 0 16px 30px rgba(22,131,216,.25); }
.layer .lab { position: absolute; left: 12px; bottom: 10px; display: flex; align-items: center; gap: 8px; font: 500 10px var(--m); letter-spacing: .08em; text-transform: uppercase; color: var(--mut); background: #fff; padding: 4px 8px; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--line2); }
.layer .lab i { font-style: normal; color: var(--dim); }
.layer.on .lab { color: var(--cy); box-shadow: inset 0 0 0 1px rgba(22,131,216,.4); }
.layer.pdf .lab { color: #b8720a; box-shadow: inset 0 0 0 1px rgba(232,150,26,.5); }
.wf { position: absolute; inset: 0; }
.wf .hb { height: 30px; background: var(--navy); display: flex; align-items: center; gap: 8px; padding: 0 12px; }
.wf .hb i { display: block; height: 5px; border-radius: 3px; background: rgba(255,255,255,.35); }
.wf .hb i:first-child { width: 10px; height: 10px; border-radius: 2px; background: var(--cy2); }
.wf .hb i:nth-child(2) { width: 60px; background: rgba(255,255,255,.8); }
.wf .hb i.r { margin-left: auto; width: 36px; height: 12px; border-radius: 4px; background: var(--cy); }
.wf .bd { padding: 18px 14px; display: grid; gap: 8px; }
.wf .t1 { height: 13px; width: 62%; border-radius: 4px; background: #1b2638; }
.wf .t2 { height: 13px; width: 44%; border-radius: 4px; background: linear-gradient(90deg, var(--deep), var(--cy2)); }
.wf .ln { height: 5px; width: 70%; border-radius: 3px; background: #e3e8f0; }
.wf .ln.s { width: 48%; }
.wf .bt { display: flex; gap: 6px; margin-top: 4px; }
.wf .bt i { display: block; width: 54px; height: 16px; border-radius: 4px; background: var(--navy); }
.wf .bt i + i { background: #fff; box-shadow: inset 0 0 0 1px var(--line2); }
.wf .cols { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; margin-top: 8px; }
.wf .cols i { display: block; height: 42px; border-radius: 5px; background: #f1f4f9; box-shadow: inset 0 0 0 1px var(--line); }
.wf .rows { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 6px; }
.wf .rows i { display: block; height: 30px; border-radius: 5px; background: #f1f4f9; box-shadow: inset 0 0 0 1px var(--line); }
.layer.pdf .wf .hb { background: #fff; border-bottom: 2px solid var(--amb); }
.layer.pdf .wf .hb i:nth-child(2) { background: #1b2638; }
.stack.open .layers { left: 34%; animation-play-state: paused; --gap: 46px; }
.stack.open .layer { opacity: .5; }
.stack.open .layer.out { opacity: 1; transform: translateZ(calc(var(--i) * var(--gap) + 90px)) translateY(170px) translateX(-60px); box-shadow: 0 0 0 2px var(--cy), 0 40px 60px rgba(22,44,84,.25); }
.hint { position: absolute; left: 0; right: 0; bottom: 2%; text-align: center; font: 500 11px var(--m); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); transition: opacity .3s; }
.stack.open .hint { opacity: 0; }
.peek { position: absolute; right: 0; top: 50%; width: min(320px, 48%); transform: translate(24px,-50%); opacity: 0; pointer-events: none; transition: opacity .4s ease, transform .5s cubic-bezier(.2,.7,.2,1); background: #fff; border-radius: 20px; padding: 24px; box-shadow: inset 0 0 0 1px var(--line), 0 30px 70px rgba(22,44,84,.16); z-index: 5; }
.stack.open .peek { opacity: 1; transform: translate(0,-50%); pointer-events: auto; transition-delay: .15s; }
.peek .pc { font: 500 11px var(--m); letter-spacing: .12em; color: var(--cy); text-transform: uppercase; }
.peek h3 { font-size: 24px; margin-top: 8px; }
.peek p { color: var(--mut); font-size: 15px; margin-top: 8px; }
.peek ul { list-style: none; padding: 0; margin-top: 16px; display: grid; gap: 9px; }
.peek li { display: flex; gap: 10px; font-size: 14px; line-height: 1.4; }
.peek li::before { content: ""; flex: none; width: 6px; height: 6px; margin-top: 6px; border-radius: 2px; background: var(--cy); }
.peek .x { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border-radius: var(--r); border: 0; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line2); cursor: pointer; font: 16px var(--f); color: var(--mut); }
.peek .nx { margin-top: 20px; display: flex; gap: 8px; }
.peek .nx button { font: 500 13px var(--f); padding: 9px 14px; border-radius: var(--r); border: 0; cursor: pointer; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line2); color: var(--txt); }
.peek.pdf .pc { color: #b8720a; } .peek.pdf li::before { background: var(--amb); }

/* process rail */
.rail { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 24px; padding-top: 56px; }
.rail::before { content: ""; position: absolute; left: 0; right: 0; top: 15px; height: 1px; background: linear-gradient(90deg, var(--line2), rgba(22,131,216,.45), var(--line2)); }
.rail::after { content: ""; position: absolute; top: 14px; left: 0; width: 120px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, transparent, var(--cy), transparent); animation: ctw-run 5s cubic-bezier(.6,0,.4,1) infinite; }
@keyframes ctw-run { from { left: 0; } to { left: calc(100% - 120px); } }
.rail > .step { position: relative; display: grid; gap: 10px; align-content: start; margin: 0 !important; }
.rail > .step > * { margin: 0 !important; }
.rail > .step::before { content: ""; position: absolute; top: -47px; left: 0; width: 11px; height: 11px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1.5px var(--cy), 0 0 0 6px rgba(22,131,216,.1); }
.rail .n { font: 500 12px var(--m); color: var(--cy); letter-spacing: .1em; }
.rail h3 { font-size: 22px; letter-spacing: -.02em; }
.rail p:not(.n) { color: var(--mut); font-size: 15px; }

/* concepts */
.cgrid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px; }
.show { display: block; border-radius: 24px; padding: 28px 28px 0; overflow: hidden; position: relative; background: #fff; box-shadow: inset 0 0 0 1px var(--line), var(--sh); color: var(--txt); transition: box-shadow .3s; }
.show:hover { color: var(--txt); box-shadow: inset 0 0 0 1px var(--line2), 0 24px 50px rgba(22,44,84,.12); }
.show .meta { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.show h3 { font-size: 24px; }
.show p { color: var(--mut); font-size: 15px; margin-top: 4px; }
.tagc { flex: none; font: 500 11px var(--m); letter-spacing: .12em; text-transform: uppercase; padding: 6px 10px; border-radius: 8px; color: #b8720a; box-shadow: inset 0 0 0 1px rgba(232,150,26,.45); background: #fff8ec; }
.lap { border-radius: 12px 12px 0 0; overflow: hidden; box-shadow: 0 0 0 1px var(--line2), 0 -10px 40px rgba(22,44,84,.10); }
.show .lap { margin-top: 30px; transform: translateY(8px); transition: transform .4s ease; }
.show:hover .lap { transform: translateY(0); }
.phgrid > .lap { border-radius: 14px; box-shadow: 0 0 0 1px var(--line2), 0 40px 80px rgba(22,44,84,.16); }
.lap .tb { height: 26px; background: #eef1f6; display: flex; align-items: center; gap: 6px; padding: 0 12px; border-bottom: 1px solid var(--line); }
.lap .tb i { width: 8px; height: 8px; border-radius: 50%; background: #cdd4de; }
.lap .scr { aspect-ratio: 16/9.5; position: relative; padding: 7%; display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.lap .scr small { font: 500 10px var(--m); letter-spacing: .16em; text-transform: uppercase; }
.lap .scr strong { font-size: clamp(20px, 2.6vw, 34px); line-height: 1; letter-spacing: -.04em; max-width: 12ch; font-weight: 600; }
.lap .scr .bt { display: flex; gap: 8px; }
.lap .scr .bt span { font-size: 11px; padding: 7px 12px; border-radius: 6px; font-weight: 600; }
.rl .scr { background: radial-gradient(60% 80% at 85% 40%, rgba(232,150,26,.28), transparent 70%), #141a22; color: #fff; }
.rl .scr small { color: #f2b34a; }
.rl .scr .bt span:first-child { background: #f2b34a; color: #141a22; }
.rl .scr .bt span:last-child { box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); }
.rl .scr::after { content: ""; position: absolute; right: 6%; bottom: 12%; width: 34%; height: 44%; background: repeating-linear-gradient(90deg, rgba(255,255,255,.09) 0 10%, transparent 10% 13%); border-radius: 4px; }
.ca .scr { background: radial-gradient(60% 80% at 85% 40%, rgba(120,200,255,.55), transparent 70%), linear-gradient(160deg, #eef6fc, #d3e6f3); color: #0b2338; }
.ca .scr small { color: #1c76b8; }
.ca .scr .bt span:first-child { background: #0b2338; color: #fff; }
.ca .scr .bt span:last-child { box-shadow: inset 0 0 0 1px rgba(11,35,56,.3); }
.ca .scr::after { content: ""; position: absolute; right: 6%; bottom: 12%; width: 34%; height: 44%; border-radius: 50%; border: 2px dashed rgba(11,35,56,.25); box-shadow: inset 0 0 0 14px rgba(255,255,255,.4); }

/* mock illustrations for page heroes */
.mock { position: relative; }
.mock.browser { border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px var(--line2), 0 40px 80px rgba(22,44,84,.16); aspect-ratio: 16/11; transform: perspective(1600px) rotateY(-8deg) rotateX(3deg); }
.mock.browser > .tb { display: flex; align-items: center; gap: 7px; padding: 11px 14px; background: #eef1f6; border-bottom: 1px solid var(--line); }
.mock.browser > .tb i { width: 10px; height: 10px; border-radius: 50%; background: #cdd4de; }
.mock.browser > .tb span { margin-left: 10px; font: 11px var(--m); color: var(--mut); background: #fff; padding: 4px 10px; border-radius: 6px; }
.mock.browser .wf { position: relative; }
.mock.browser .wf .hb { height: 44px; } .mock.browser .wf .bd { padding: 28px 24px; gap: 12px; } .mock.browser .wf .t1, .mock.browser .wf .t2 { height: 20px; } .mock.browser .wf .ln { height: 7px; } .mock.browser .wf .bt i { width: 90px; height: 26px; } .mock.browser .wf .cols i { height: 70px; }
.mock.phone { width: 260px; max-width: 70%; margin-inline: auto; aspect-ratio: 9/19; border-radius: 38px; background: #0f0f10; padding: 10px; box-shadow: 0 0 0 1px rgba(22,44,84,.2), 0 40px 80px rgba(22,44,84,.22); transform: rotate(-4deg); }
.mock.phone .sc { height: 100%; border-radius: 29px; background: var(--bg); overflow: hidden; display: flex; flex-direction: column; font-size: 13px; }
.mock.phone .t { background: var(--navy); color: #fff; padding: 34px 18px 18px; font-weight: 600; font-size: 18px; }
.mock.phone .t small { display: block; font: 500 10px var(--m); letter-spacing: .14em; color: var(--cy2); margin-bottom: 4px; }
.mock.phone .job { margin: 10px 12px 0; background: #fff; box-shadow: inset 0 0 0 1px var(--line); border-radius: 10px; padding: 12px; }
.mock.phone .job b { display: block; font-size: 14px; }
.mock.phone .job span { color: var(--mut); font-size: 12px; }
.mock.phone .ap { margin: auto 12px 16px; background: var(--cy); color: #fff; text-align: center; border-radius: 10px; padding: 11px; font-weight: 600; }
.mock.pdfdoc { width: 340px; max-width: 86%; margin-inline: auto; aspect-ratio: 8.5/11; background: #fff; border-radius: 8px; padding: 28px 26px; box-shadow: 0 0 0 1px var(--line), 0 40px 80px rgba(22,44,84,.18); transform: rotate(3deg); display: flex; flex-direction: column; gap: 9px; font-size: 11px; }
.mock.pdfdoc .ph { display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid var(--cy); padding-bottom: 10px; margin-bottom: 4px; }
.mock.pdfdoc .ph b { font-size: 16px; letter-spacing: -.01em; }
.mock.pdfdoc .ph span { font: 10px var(--m); color: var(--dim); }
.mock.pdfdoc h5 { margin-top: 6px; font: 500 10px var(--m); letter-spacing: .12em; text-transform: uppercase; color: var(--cy); }
.mock.pdfdoc p { color: var(--mut); line-height: 1.4; }
.mock.pdfdoc .ln { height: 6px; border-radius: 3px; background: #e7ebf0; }
.mock.pdfdoc .ln.s { width: 64%; }
.mock.rackart { width: 380px; max-width: 100%; margin-inline: auto; padding: 18px; border-radius: 16px; background: linear-gradient(180deg, #16243a, #0d1a2c); box-shadow: 0 40px 80px rgba(22,44,84,.22); display: grid; gap: 8px; }
.mock.rackart .u { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 14px; border-radius: 8px; background: repeating-linear-gradient(90deg, #1d2d45 0 4px, #18263b 4px 8px); box-shadow: inset 0 0 0 1px rgba(92,192,255,.18); }
.mock.rackart .u i { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 8px var(--ok); animation: ctw-blink 2.4s steps(2) infinite; }
.mock.rackart .u i + i { background: var(--cy2); box-shadow: 0 0 8px var(--cy2); animation-delay: -1.2s; }
.mock.rackart .u b { flex: 1; height: 4px; border-radius: 2px; background: rgba(255,255,255,.12); }
.mock.rackart .u em { font: 500 11px var(--m); letter-spacing: .1em; text-transform: uppercase; color: #b7c6da; font-style: normal; }
.mock.chipart { border-radius: 24px; background: linear-gradient(180deg, #0f1d31, #0a1422); box-shadow: 0 40px 80px rgba(22,44,84,.2); aspect-ratio: 700/400; overflow: hidden; }
.mock.chipart .art, .mock.chipart svg { position: absolute; inset: 0; width: 100%; height: 100%; }

/* misc blocks */
.note { border-radius: 16px; padding: 18px 22px; background: #fff8ec; box-shadow: inset 0 0 0 1px rgba(232,150,26,.35); color: #6b4a12; font-size: 15px; }
.note strong { color: #4a3208; }
.note.warn { margin-bottom: 8px; }
.sec .cgrid + .note { margin-top: 24px !important; }
.facts { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1px var(--line), var(--sh); overflow: hidden; }
.facts > div { padding: 20px 22px; border-right: 1px solid var(--line); font-weight: 500; }
.facts > div:last-child { border-right: 0; }
.facts span { display: block; font: 500 11px var(--m); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); margin-bottom: 6px; }
.facts em { font-style: normal; color: #b8720a; }
.swatches { display: flex; flex-wrap: wrap; gap: 16px; }
.sw { display: grid; gap: 10px; font: 500 12px var(--m); color: var(--mut); letter-spacing: .06em; }
.sw b { width: 140px; height: 96px; border-radius: 14px; background: var(--c); box-shadow: inset 0 0 0 1px var(--line2); }
.faq { display: grid; gap: 10px; max-width: 880px; }
.faq > * { margin: 0 !important; }
.wp-block-details { border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); padding: 0; overflow: hidden; }
.wp-block-details summary { cursor: pointer; list-style: none; padding: 20px 56px 20px 22px; font-weight: 500; font-size: 17px; position: relative; }
.wp-block-details summary::-webkit-details-marker { display: none; }
.wp-block-details summary::after { content: "+"; position: absolute; right: 22px; top: 50%; transform: translateY(-50%); font: 400 22px var(--f); color: var(--cy); transition: transform .3s; }
.wp-block-details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.wp-block-details > p { padding: 0 22px 20px; color: var(--mut); margin: 0 !important; max-width: 70ch; }
.plans { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px; }
.plans > * { margin: 0 !important; }
.plan { border-radius: 24px; padding: 36px; background: #fff; box-shadow: inset 0 0 0 1px var(--line), var(--sh); display: flex; flex-direction: column; gap: 14px; }
.plan.alt { background: linear-gradient(180deg, #0f1d31, #0a1422); color: #fff; }
.plan .pk { font: 500 11px var(--m); letter-spacing: .14em; text-transform: uppercase; color: var(--cy); }
.plan.alt .pk { color: var(--cy2); }
.plan h3 { font-size: 30px; }
.plan .pp { font: 500 15px var(--m); color: var(--mut); padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.plan.alt .pp { color: #a9b7c9; border-color: rgba(255,255,255,.1); }
.plan ul { list-style: none; padding: 0; display: grid; gap: 10px; margin-bottom: 14px; }
.plan li { display: flex; gap: 10px; }
.plan li::before { content: ""; flex: none; width: 6px; height: 6px; margin-top: 9px; border-radius: 2px; background: var(--cy); }
.plan.alt li::before { background: var(--cy2); }
.plan .wp-element-button { margin-top: auto; align-self: flex-start; padding: 13px 22px; background: var(--navy); color: #fff; }
.portrait { aspect-ratio: 4/5; max-width: 420px; border-radius: 24px; background: linear-gradient(160deg, #eef1f8, #dde4ef); box-shadow: inset 0 0 0 1px var(--line); display: grid; place-items: center; font: 500 12px var(--m); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.legal .prose > * + * { margin-block-start: 12px !important; }
.legal .prose > h2 { font-size: 24px; letter-spacing: -.02em; margin-block-start: 44px !important; }
.prose a { text-decoration: underline; }
.prose p { color: var(--mut); font-size: 17px; line-height: 1.7; }
.legal.sec { padding-top: 64px; }
.posts { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }

/* cta + form */
.cta { padding-block: 128px; position: relative; overflow: hidden; isolation: isolate; background: linear-gradient(180deg, var(--bg), #eef2fa); border-top: 1px solid var(--line); }
.cta::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(45% 60% at 22% 50%, rgba(92,192,255,.18), transparent 70%); }
.cgrid2 { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.9fr); gap: 64px; align-items: center; }
.cgrid2 > * { margin: 0 !important; min-width: 0; }
.cta-copy > * { margin: 0 !important; }
.cta-h { font-size: clamp(40px, 5.4vw, 76px); line-height: .98; letter-spacing: -.045em; margin-top: 20px !important; }
.cta .lead { margin-top: 22px !important; }
.mail { margin-top: 30px !important; font: 15px var(--m); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mail span { color: var(--dim); }
.qform, .qform * { box-sizing: border-box; }
.qform { border-radius: 24px; padding: 32px; background: #fff; box-shadow: inset 0 0 0 1px var(--line), 0 30px 80px rgba(22,44,84,.12); display: grid; gap: 16px; min-width: 0; }
.qform .f2 { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 16px; }
.qform label { display: grid; gap: 7px; font-size: 13px; color: var(--mut); min-width: 0; }
.qform input, .qform select, .qform textarea { font: 15px var(--f); color: var(--txt); background: var(--bg); border: 0; box-shadow: inset 0 0 0 1px var(--line2); border-radius: var(--r); padding: 13px 14px; width: 100%; min-width: 0; }
.qform textarea { resize: vertical; min-height: 110px; }
.qform input::placeholder, .qform textarea::placeholder { color: var(--dim); }
.qform input:focus, .qform select:focus, .qform textarea:focus { outline: 0; box-shadow: inset 0 0 0 1.5px var(--cy), 0 0 0 4px rgba(22,131,216,.12); background: #fff; }
.qform button { justify-content: center; width: 100%; padding: 15px; font-size: 15px; font-weight: 500; background: var(--navy); color: #fff; }
.qform .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.fnote { font-size: 12px; color: var(--dim); text-align: center; }
.fnote.ok { color: var(--ok); font-size: 14px; }
.fnote.err { color: #c2412a; font-size: 14px; }

/* footer */
.foot { border-top: 1px solid var(--line); padding-block: 56px 40px; background: #fff; }
.fgrid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px; }
.fgrid h4 { margin: 0 0 14px; font: 500 11px var(--m); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.fgrid ul { list-style: none; padding: 0; }
.fgrid li { color: var(--mut); font-size: 14px; margin-bottom: 8px; }
.fgrid li a:hover { color: var(--cy); }
.fgrid p { color: var(--mut); font-size: 14px; max-width: 34ch; margin-top: 16px; }
.legal-bar { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font: 12px var(--m); color: var(--dim); }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .hgrid { grid-template-columns: minmax(0,1fr); min-height: 0; }
  .scene { height: 520px; margin-top: -10px; }
  .igrid, .cgrid2, .phgrid { grid-template-columns: minmax(0,1fr); gap: 48px; }
  .mainnav .wp-block-navigation__container { gap: 20px; }
}
@media (max-width: 900px) {
  .wp-block-navigation__responsive-container-open { display: flex; }
  .nav-cta { display: none !important; }
  .proof { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .proof > .pi { padding: 22px 18px 24px 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .proof > .pi:nth-child(even) { padding-left: 18px; border-left: 1px solid var(--line); }
  .head { grid-template-columns: minmax(0,1fr); gap: 20px; }
  .head .head-p { justify-self: start; }
  .bento, .grid3 { grid-template-columns: 1fr 1fr; }
  .card.wide { grid-column: span 2; grid-row: auto; }
  .split, .plans { grid-template-columns: minmax(0,1fr); gap: 40px; }
  .rail { grid-template-columns: 1fr; gap: 32px; padding-top: 0; padding-left: 36px; }
  .rail::before { left: 5px; right: auto; top: 6px; bottom: 6px; width: 1px; height: auto; background: linear-gradient(180deg, var(--line2), rgba(22,131,216,.45), var(--line2)); }
  .rail::after { display: none; }
  .rail > .step::before { top: 6px; left: -36px; }
  .cgrid, .posts { grid-template-columns: 1fr; }
  .facts { grid-template-columns: 1fr 1fr; }
  .facts > div:nth-child(2) { border-right: 0; }
  .facts > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .fgrid { grid-template-columns: 1fr 1fr; }
  .sec, .cta { padding-block: 96px; }
  .phero { padding-block: 72px 64px; }
}
@media (max-width: 640px) {
  :root { --pad: max(18px, env(safe-area-inset-left, 0px)); }
  .in { padding-right: max(18px, env(safe-area-inset-right, 0px)); }
  .hero { padding-block: 44px 0; }
  .lead { font-size: 17px; }
  .scene { height: 340px; }
  .floor { --s: .5; }
  .callout { padding: 9px 12px; }
  .callout small { display: none; }
  .c1 { left: 0; top: 4%; } .c2 { right: 0; bottom: 6%; } .c3 { display: none; }
  .proof { grid-template-columns: 1fr; }
  .proof > .pi, .proof > .pi:nth-child(even) { padding-left: 0; border-left: 0; }
  .bento, .grid3, .grid2 { grid-template-columns: 1fr; }
  .card.wide { grid-column: auto; }
  .card.wide .art { min-height: 260px; }
  .card.wide h3 { font-size: 24px; }
  .plist li span { display: none; }
  #stack, .stack { height: auto; padding-bottom: 20px; }
  .stack .layers, .stack.open .layers { --s: .58; position: relative; left: 50%; top: auto; margin: 140px 0 70px -200px; }
  .peek { position: relative; right: auto; top: auto; width: 100%; transform: translateY(16px); display: none; }
  .stack.open .peek { display: block; transform: none; }
  .hint { position: static; }
  .qform .f2 { grid-template-columns: 1fr; }
  .qform { padding: 22px; }
  .fgrid { grid-template-columns: 1fr; }
  .sec, .cta { padding-block: 80px; }
  .phero { padding-block: 56px 56px; }
  .show { padding: 22px 22px 0; }
  .show .meta { flex-direction: column; }
  .facts { grid-template-columns: 1fr; }
  .facts > div { border-right: 0; border-bottom: 1px solid var(--line); }
  .mock.browser { transform: none; }
  .sw b { width: 100px; height: 72px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}