/* Hexes website — built only on brand tokens (colors.css + ui.css). Dark-first. */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--hx-bg); color: var(--hx-fg); font: 400 var(--hx-text-lg)/var(--hx-lh-lg) var(--hx-font-body); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: var(--hx-accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { font-family: var(--hx-font-heading); margin: 0; letter-spacing: -0.02em; color: var(--hx-fg); }
h1 { font-size: clamp(36px, 5.2vw, 60px); line-height: 1.06; font-weight: 800; }
h2 { font-size: clamp(28px, 3.2vw, 38px); line-height: 1.12; font-weight: 800; }
h3 { font-size: 20px; line-height: 28px; font-weight: 700; }
p { margin: 0; }
.muted { color: var(--hx-fg-muted); }
.label { font-family: var(--hx-font-mono); font-size: var(--hx-text-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--hx-accent-strong); }
.mono { font-family: var(--hx-font-mono); }
.container { width: min(1120px, 100% - 2 * var(--hx-page-gutter)); margin-inline: auto; }
.skip { position: absolute; left: -999px; } .skip:focus { left: 16px; top: 16px; background: var(--hx-accent-strong); color: var(--hx-navy-950); padding: 8px 12px; border-radius: 6px; z-index: 100; }

/* buttons */
.btn { height: var(--hx-control-h-lg); padding: 0 var(--hx-5); border-radius: var(--hx-r-md); border: 1px solid transparent; font: 600 15px/1 var(--hx-font-body); display: inline-flex; align-items: center; gap: 8px; text-decoration: none !important; white-space: nowrap; transition: background var(--hx-dur-fast) var(--hx-ease), border-color var(--hx-dur-fast) var(--hx-ease), color var(--hx-dur-fast) var(--hx-ease); }
.btn:focus-visible { outline: none; box-shadow: var(--hx-focus-ring); }
.btn-primary { background: var(--hx-accent-strong); color: var(--hx-navy-950); } .btn-primary:hover { background: #5DEFBB; }
.btn-secondary { background: transparent; color: var(--hx-fg); border-color: var(--hx-border); } .btn-secondary:hover { background: var(--hx-navy-800); }
.btn-ghost { background: transparent; color: var(--hx-fg-muted); } .btn-ghost:hover { color: var(--hx-fg); }
.btn-sm { height: 32px; padding: 0 12px; font-size: 13px; }

/* header */
.site-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--hx-navy-950) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--hx-border); }
.nav { display: flex; align-items: center; gap: var(--hx-8); height: 68px; }
.nav .links { display: flex; gap: var(--hx-6); margin-left: var(--hx-4); }
.nav .links a { color: var(--hx-fg-muted); font-weight: 500; font-size: 15px; }
.nav .links a:hover, .nav .links a[aria-current] { color: var(--hx-fg); text-decoration: none; }
.nav .actions { margin-left: auto; display: flex; gap: var(--hx-3); }
.nav .menu { display: none; margin-left: auto; width: 40px; height: 40px; background: none; border: 1px solid var(--hx-border); border-radius: 6px; flex-direction: column; justify-content: center; gap: 5px; align-items: center; cursor: pointer; }
.nav .menu span { display: block; width: 18px; height: 2px; background: var(--hx-fg); }
@media (max-width: 860px) {
  .nav { gap: var(--hx-4); }
  .nav .links, .nav .actions { display: none; }
  .nav .menu { display: flex; }
  .site-header.open .links { display: flex; flex-direction: column; position: absolute; left: 0; right: 0; top: 68px; background: var(--hx-navy-950); border-bottom: 1px solid var(--hx-border); padding: var(--hx-4) var(--hx-page-gutter) var(--hx-6); gap: var(--hx-4); margin: 0; }
  .site-header.open .actions { display: flex; position: absolute; left: var(--hx-page-gutter); right: var(--hx-page-gutter); top: 268px; }
  .site-header.open .links { padding-bottom: 104px; }
}

/* sections */
section { padding: var(--hx-16) 0; }
/* One rule for every section opener: label, h2, lede, left-aligned on a 760px measure.
   Only the closing CTA band is centred — it is a full stop, not a section. */
.section-head { display: flex; flex-direction: column; gap: var(--hx-3); max-width: 760px; margin-bottom: var(--hx-10); }
.section-head p { font-size: 18px; line-height: 28px; color: var(--hx-fg-muted); }
.grid { display: grid; gap: var(--hx-5); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 960px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } section { padding: var(--hx-12) 0; } }
.card { background: var(--hx-navy-900); border: 1px solid var(--hx-border); border-radius: var(--hx-r-lg); padding: var(--hx-6); display: flex; flex-direction: column; gap: var(--hx-3); }
.card h3 { margin-top: var(--hx-2); }
.card p { color: var(--hx-fg-muted); font-size: 15px; line-height: 24px; }
.card .icon { width: 40px; height: 40px; border-radius: 8px; background: var(--hx-navy-800); display: grid; place-items: center; color: var(--hx-accent-strong); }
.card .icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.band { background: var(--hx-navy-900); border-top: 1px solid var(--hx-border); border-bottom: 1px solid var(--hx-border); }

/* hero */
.hero { padding: var(--hx-16) 0 var(--hx-12); position: relative; overflow: hidden; }
.hero .container { display: grid; grid-template-columns: 1.35fr 0.65fr; gap: var(--hx-12); align-items: center; }
@media (max-width: 900px) { .hero .container { grid-template-columns: 1fr; } .hero-art { max-width: 300px; margin-top: var(--hx-4); } .hero-art svg { max-width: 220px; } }
.hero h1 { margin: var(--hx-4) 0 var(--hx-5); }
.hero .lede { font-size: 19px; line-height: 30px; color: var(--hx-fg-muted); max-width: 560px; }
.hero .cta { display: flex; gap: var(--hx-3); margin-top: var(--hx-8); flex-wrap: wrap; }
.hero .proof { display: flex; gap: var(--hx-6); margin-top: var(--hx-8); flex-wrap: wrap; }
.hero .proof div { display: flex; flex-direction: column; gap: 2px; }
.hero .proof b { font-family: var(--hx-font-heading); font-size: 22px; letter-spacing: -0.02em; }
.hero .proof span { font-size: 13px; color: var(--hx-fg-muted); }
.hero-art { position: relative; max-width: 400px; margin-left: auto; width: 100%; }
.hero-art svg { width: 100%; max-width: 300px; height: auto; margin: 0 auto; }
.hero-glow { position: absolute; inset: -20% -10%; background: radial-gradient(closest-side, rgba(46, 230, 166, 0.10), transparent 70%); pointer-events: none; }

/* compare table */
.compare { width: 100%; border-collapse: collapse; font-size: 15px; }
.compare th, .compare td { padding: 14px 16px; border-bottom: 1px solid var(--hx-border); text-align: left; vertical-align: top; }
.compare th { font-family: var(--hx-font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--hx-fg-muted); font-weight: 500; }
.compare td:first-child { font-weight: 600; color: var(--hx-fg); width: 26%; }
.compare td { color: var(--hx-fg-muted); }
.compare td.us { color: var(--hx-fg); background: rgba(76, 223, 240, 0.06); }
.compare th.us { color: var(--hx-accent-strong); background: rgba(76, 223, 240, 0.06); }
.compare .ok { color: var(--hx-accent-strong); font-weight: 600; }
@media (max-width: 720px) { .compare { display: block; overflow-x: auto; } }

/* steps */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--hx-5); counter-reset: step; }
@media (max-width: 720px) { .steps { grid-template-columns: 1fr; } }
.step { position: relative; padding: var(--hx-6); border: 1px solid var(--hx-border); border-radius: var(--hx-r-lg); background: var(--hx-navy-900); }
.step::before { counter-increment: step; content: counter(step, decimal-leading-zero); font-family: var(--hx-font-mono); color: var(--hx-accent-strong); font-size: 13px; letter-spacing: 0.1em; }
.step h3 { margin: var(--hx-3) 0 var(--hx-2); }
.step p { color: var(--hx-fg-muted); font-size: 15px; line-height: 24px; }
.step .mode { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--hx-4); font-family: var(--hx-font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; border: 1px solid var(--hx-border); border-radius: 4px; padding: 4px 8px; }
.step .mode i { width: 6px; height: 6px; border-radius: 50%; background: var(--hx-accent-strong); }

/* logos / integrations */
.chips { display: flex; flex-wrap: wrap; gap: var(--hx-2); }
.chip { border: 1px solid var(--hx-border); border-radius: 999px; padding: 6px 12px; font-size: 13px; color: var(--hx-fg-muted); }

/* CTA */
.cta-band { padding: var(--hx-16) 0; text-align: center; }
.cta-band h2 { max-width: 760px; margin: 0 auto var(--hx-4); }
.cta-band p { max-width: 560px; margin: 0 auto var(--hx-8); color: var(--hx-fg-muted); }
.cta-band .cta { display: flex; gap: var(--hx-3); justify-content: center; flex-wrap: wrap; }

/* prose pages */
.prose { max-width: 720px; display: flex; flex-direction: column; gap: var(--hx-5); }
.prose h2 { margin-top: var(--hx-6); }
.prose ul { margin: 0; padding-left: 20px; color: var(--hx-fg-muted); display: flex; flex-direction: column; gap: 6px; }
.prose li b { color: var(--hx-fg); }
.notice { border-left: 2px solid var(--hx-accent-strong); padding: var(--hx-3) var(--hx-4); background: var(--hx-navy-900); color: var(--hx-fg-muted); font-size: 15px; border-radius: 0 6px 6px 0; }

/* forms */
form { display: flex; flex-direction: column; gap: var(--hx-4); max-width: 560px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 14px; font-weight: 500; }
.input, textarea, select { height: var(--hx-control-h-lg); padding: 0 12px; border-radius: 6px; border: 1px solid var(--hx-border); background: var(--hx-navy-900); color: var(--hx-fg); font: 400 15px var(--hx-font-body); }
textarea { height: auto; padding: 10px 12px; min-height: 120px; resize: vertical; }
.input:focus, textarea:focus, select:focus { outline: none; border-color: var(--hx-accent-strong); box-shadow: 0 0 0 3px rgba(46, 230, 166, 0.18); }
.form-note { font-size: 13px; color: var(--hx-fg-muted); }

/* footer */
.site-footer { border-top: 1px solid var(--hx-border); padding: var(--hx-12) 0 var(--hx-8); margin-top: var(--hx-8); }
.foot { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--hx-8); }
@media (max-width: 760px) { .foot { grid-template-columns: 1fr 1fr; } }
.foot-brand p { margin-top: var(--hx-4); font-size: 14px; line-height: 22px; max-width: 320px; }
.foot-col { display: flex; flex-direction: column; gap: 8px; }
.foot-col a { color: var(--hx-fg-muted); font-size: 14px; } .foot-col a:hover { color: var(--hx-fg); }
.foot-col .label { color: var(--hx-fg-muted); margin-bottom: 6px; }
.legal { display: flex; justify-content: space-between; gap: var(--hx-6); flex-wrap: wrap; margin-top: var(--hx-10); padding-top: var(--hx-5); border-top: 1px solid var(--hx-border); font-size: 12px; line-height: 18px; }

/* ---------- hero animation + readout ---------- */
.hero-art { display: flex; flex-direction: column; gap: 14px; }
.cell-anim .ring { stroke-dasharray: 270; stroke-dashoffset: 270; animation: draw 1.2s var(--hx-ease) forwards; }
.cell-anim .spokes path { stroke-dasharray: 24; stroke-dashoffset: 24; animation: draw 0.5s var(--hx-ease) forwards; }
.cell-anim .spokes path:nth-child(1) { animation-delay: 0.9s; } .cell-anim .spokes path:nth-child(2) { animation-delay: 1.0s; } .cell-anim .spokes path:nth-child(3) { animation-delay: 1.1s; } .cell-anim .spokes path:nth-child(4) { animation-delay: 1.2s; } .cell-anim .spokes path:nth-child(5) { animation-delay: 1.3s; }
.cell-anim .terms rect, .cell-anim .lit, .cell-anim .core { opacity: 0; animation: appear 0.4s var(--hx-ease) forwards; }
.cell-anim .core { animation-delay: 0.7s; } .cell-anim .terms rect { animation-delay: 1.5s; } .cell-anim .lit { animation-delay: 1.8s; }
.cell-anim .flows path { opacity: 0; }
.cell-anim .flow-in { stroke-dasharray: 2 3; animation: appear 0.3s 2.1s forwards, dashflow 1.2s 2.1s linear infinite; }
.cell-anim .flow-out { stroke-dasharray: 2 3; animation: appear 0.3s 2.4s forwards, dashflow 1.2s 2.4s linear infinite; }
.cell-anim .flow-bad { stroke-dasharray: 2 3; animation: appear 0.3s 2.9s forwards, dashflow 1.2s 2.9s linear infinite; }
.cell-anim .flow-x { animation: appear 0.2s 3.3s forwards, pulse 1.6s 3.3s ease-in-out 2; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes appear { to { opacity: 1; } }
@keyframes dashflow { to { stroke-dashoffset: -10; } }
@keyframes pulse { 0%, 100% { stroke-width: 1.2; } 50% { stroke-width: 2.6; } }
.readout { background: var(--hx-navy-900); border: 1px solid var(--hx-border); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; font-size: 12px; opacity: 0; animation: appear 0.5s 2.6s forwards; }
.readout-head { display: flex; justify-content: space-between; align-items: center; color: var(--hx-fg-muted); padding-bottom: 8px; border-bottom: 1px solid var(--hx-border); }
.readout .mode-pill { display: inline-flex; align-items: center; gap: 6px; font-family: var(--hx-font-mono); font-size: 10px; letter-spacing: 0.1em; border: 1px solid var(--hx-border); border-radius: 4px; padding: 2px 8px; color: var(--hx-fg); }
.readout .mode-pill i { width: 6px; height: 6px; border-radius: 50%; background: var(--hx-accent-strong); }
.readout-row { display: grid; grid-template-columns: 8px 1fr auto; gap: 10px; align-items: center; color: var(--hx-fg-muted); }
.readout-row .mono { font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.readout-row.blocked { color: var(--hx-fg); }
.readout .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--hx-accent-strong); } .readout .dot.bad { background: var(--hx-danger); }
.readout .tag { font-family: var(--hx-font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; padding: 2px 7px; border-radius: 4px; }
.readout .tag.ok { color: var(--hx-accent-strong); background: rgba(46, 230, 166, 0.10); } .readout .tag.bad { color: var(--hx-danger); background: rgba(248, 113, 113, 0.14); }
.readout-row.blocked { opacity: 0; animation: appear 0.3s 3.3s forwards; }
@media (prefers-reduced-motion: reduce) { .cell-anim *, .readout, .readout-row.blocked { animation: none !important; opacity: 1 !important; stroke-dashoffset: 0 !important; } }

/* ---------- compare table interactions ---------- */
.compare-tools { display: flex; align-items: center; justify-content: flex-end; gap: 6px; font-size: 13px; margin-bottom: 10px; }
.compare tbody tr { transition: background var(--hx-dur-fast) var(--hx-ease); }
.compare tbody tr:hover td { background: rgba(227, 242, 241, 0.04); }
.compare tbody tr:hover td.us { background: rgba(46, 230, 166, 0.12); }
.compare.us-only th:not(:first-child):not(.us), .compare.us-only td:not(:first-child):not(.us) { display: none; }
.compare.us-only td:first-child { width: 40%; }

/* ---------- proof strip ---------- */
.proof-strip { display: grid; grid-template-columns: 1fr 1fr; gap: var(--hx-5); }
@media (max-width: 760px) { .proof-strip { grid-template-columns: 1fr; } }
.proof-group { background: var(--hx-navy-900); border: 1px solid var(--hx-border); border-radius: var(--hx-r-lg); padding: var(--hx-5) var(--hx-6); display: flex; flex-direction: column; gap: var(--hx-4); }
.proof-group .label { color: var(--hx-fg-muted); }
.marks { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; min-height: 40px; }
.marks img { height: 26px; width: auto; max-width: 140px; filter: brightness(0) invert(1); opacity: 0.62; transition: opacity var(--hx-dur-fast) var(--hx-ease), filter var(--hx-dur-fast) var(--hx-ease); }
.marks img:hover { opacity: 1; }
.marks img[src*="red-hat"] { height: 36px; }
.marks img[src*="rancher"] { height: 30px; }

/* FAQ blocks: <dl class="faq"> — the build also emits them as FAQPage structured data */
dl.faq { margin: 0; display: flex; flex-direction: column; gap: var(--hx-4); }
dl.faq dt { font-family: var(--hx-font-heading); font-weight: 700; font-size: 18px; letter-spacing: -0.01em; color: var(--hx-fg); }
dl.faq dd { margin: 4px 0 0; color: var(--hx-fg-muted); line-height: 1.6; }

/* Research articles */
.article { max-width: 760px; display: flex; flex-direction: column; gap: var(--hx-5); }
.article h2 { margin-top: var(--hx-8); font-size: 28px; }
.article h3 { margin-top: var(--hx-4); font-size: 20px; }
.article p, .article li { color: var(--hx-fg-muted); line-height: 1.65; }
.article li b, .article p b { color: var(--hx-fg); }
.article ul, .article ol { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; }
.article .lede { font-size: 19px; line-height: 30px; }
.article-meta { display: flex; flex-wrap: wrap; gap: var(--hx-4); font-family: var(--hx-font-mono); font-size: 12px; letter-spacing: 0.06em; color: var(--hx-fg-muted); }
.article-meta b { color: var(--hx-fg); font-weight: 500; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--hx-border); border-radius: var(--hx-r-lg); }
.table-scroll table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 640px; }
.table-scroll th, .table-scroll td { padding: 10px 14px; border-bottom: 1px solid var(--hx-border); text-align: left; vertical-align: top; color: var(--hx-fg-muted); }
.table-scroll th { font-family: var(--hx-font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--hx-fg-muted); font-weight: 500; background: var(--hx-navy-900); }
.table-scroll td:first-child { color: var(--hx-fg); font-weight: 600; }
.table-scroll tr:last-child td { border-bottom: 0; }
.article .notice { margin-top: var(--hx-2); }
.article .notice .label { margin-bottom: 6px; }
.sources { font-size: 13px; }
.sources li { line-height: 1.5; word-break: break-word; }
.sources a { color: var(--hx-fg-muted); text-decoration: underline; text-decoration-color: var(--hx-border); }
.sources a:hover { color: var(--hx-accent-strong); }
.article-card { text-decoration: none; color: inherit; transition: border-color .15s ease; }
.article-card:hover { border-color: var(--hx-accent-strong); }
.article-card h3 { font-size: 20px; }
.toc { border-left: 2px solid var(--hx-border); padding-left: var(--hx-4); display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.toc a { color: var(--hx-fg-muted); text-decoration: none; }
.toc a:hover { color: var(--hx-accent-strong); }
.article h1 { font-size: clamp(30px, 4vw, 42px); line-height: 1.15; max-width: 820px; }

/* Company page: form + side notes */
.contact-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: start; }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; gap: var(--hx-8); } }

.hero .lede + .lede { margin-top: var(--hx-4); }
.hero .toc { margin-top: var(--hx-5); flex-direction: row; flex-wrap: wrap; gap: var(--hx-4); border-left: 0; padding-left: 0; }
.hero .toc a { font-family: var(--hx-font-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; border: 1px solid var(--hx-border); border-radius: 6px; padding: 6px 10px; }

/* ---------- homepage compositions (2026-09-17 redesign) ---------- */
.section-head.centered { margin-left: auto; margin-right: auto; text-align: center; align-items: center; }
.gap-head.centered { max-width: 760px; }
.gap-head.centered + .asks-grid { margin-top: var(--hx-10); }

/* Gap: heading pinned left, comparison as a raised card */
.gap { position: relative; overflow: hidden; }
.gap::before { content: ""; position: absolute; left: -220px; top: -160px; width: 620px; height: 620px; background: radial-gradient(closest-side, rgba(76, 223, 240, 0.10), transparent 70%); pointer-events: none; }
.split { display: grid; grid-template-columns: minmax(260px, 0.8fr) 1.6fr; gap: var(--hx-12); align-items: start; position: relative; }
.split-head { margin-bottom: 0; position: sticky; top: 96px; }
.split-head .compare-tools { justify-content: flex-start; margin: var(--hx-4) 0 0; }
.split-note { font-size: 13px; line-height: 20px; margin-top: var(--hx-6); padding-top: var(--hx-4); border-top: 1px solid var(--hx-border); }
.compare-card { background: var(--hx-navy-950); border: 1px solid var(--hx-border); border-radius: var(--hx-r-lg); overflow: hidden; box-shadow: 0 30px 80px -40px rgba(0, 0, 0, 0.8); }
.compare-card .compare th { background: var(--hx-navy-900); }
.compare-card .compare th.us { background: rgba(76, 223, 240, 0.10); }
.compare-card .compare td.us, .compare-card .compare th.us { border-left: 1px solid rgba(76, 223, 240, 0.35); box-shadow: inset 3px 0 0 var(--hx-accent-strong); }
.compare-card .compare tr:last-child td { border-bottom: 0; }
.compare-card .compare { font-size: 14px; }
.compare-card .compare td:first-child { width: 16%; }
.compare-card .compare th, .compare-card .compare td { padding: 16px 18px; }
.compare-card .compare th:not(:first-child):not(.us), .compare-card .compare td:not(:first-child):not(.us) { width: 19%; }
.compare-card .compare th.us, .compare-card .compare td.us { width: 27%; }
@media (max-width: 1000px) { .split { grid-template-columns: 1fr; gap: var(--hx-8); } .split-head { position: static; } .compare-card { overflow-x: auto; } }

/* How it works: one rail, three stages */
.how { background-image: linear-gradient(var(--hx-border) 1px, transparent 1px), linear-gradient(90deg, var(--hx-border) 1px, transparent 1px); background-size: 48px 48px; background-position: center top; position: relative; }
.how::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 30%, var(--hx-bg) 85%); pointer-events: none; }
.how .container { position: relative; z-index: 1; }
.rail { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--hx-8); position: relative; padding-top: var(--hx-6); }
.rail::before { content: ""; position: absolute; left: 16.6%; right: 16.6%; top: calc(var(--hx-6) + 14px); height: 2px; background: linear-gradient(90deg, rgba(76, 223, 240, 0.25), var(--hx-accent-strong), rgba(76, 223, 240, 0.25)); }
.stage { position: relative; text-align: center; padding: 0 var(--hx-4); counter-increment: stage; }
.stage .node { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; font-family: var(--hx-font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hx-fg); background: var(--hx-bg); border: 1px solid var(--hx-accent-strong); border-radius: 999px; padding: 6px 14px; }
.stage .node i { width: 8px; height: 8px; border-radius: 50%; background: var(--hx-accent-strong); box-shadow: 0 0 0 4px rgba(76, 223, 240, 0.18); }
.stage .num::before { content: "0" counter(stage); display: block; margin: var(--hx-8) auto var(--hx-2); font-family: var(--hx-font-heading); font-weight: 800; font-size: 64px; line-height: 1; letter-spacing: -0.04em; color: transparent; -webkit-text-stroke: 1px var(--hx-border); }
.stage h3 { font-size: 22px; margin-bottom: var(--hx-3); }
.stage p { color: var(--hx-fg-muted); font-size: 15px; line-height: 24px; max-width: 320px; margin: 0 auto; }
.rail { counter-reset: stage; }
@media (max-width: 760px) { .rail { grid-template-columns: 1fr; gap: var(--hx-10); padding-left: 28px; } .rail::before { left: 8px; right: auto; top: var(--hx-6); bottom: 24px; width: 2px; height: auto; background: linear-gradient(180deg, rgba(76, 223, 240, 0.25), var(--hx-accent-strong), rgba(76, 223, 240, 0.25)); } .stage { text-align: left; padding: 0; } .stage .node { margin-left: -28px; } .stage .node i { margin-left: 0; } .stage .num::before { margin: var(--hx-4) 0 var(--hx-2); font-size: 44px; } .stage p { margin: 0; } }

/* Why Hexes: bento */
.bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--hx-5); }
.bento .card.feature { grid-column: span 2; background: radial-gradient(120% 140% at 0% 0%, rgba(76, 223, 240, 0.12), var(--hx-navy-900) 55%); border-color: rgba(76, 223, 240, 0.25); }
.bento .card.feature h3 { font-size: 26px; max-width: 420px; }
.bento .card.feature p { font-size: 16px; line-height: 26px; max-width: 460px; }
.bento .card { transition: border-color 0.2s var(--hx-ease), transform 0.2s var(--hx-ease); }
.bento .card:hover { border-color: rgba(76, 223, 240, 0.45); transform: translateY(-2px); }
@media (max-width: 960px) { .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .bento { grid-template-columns: 1fr; } .bento .card.feature { grid-column: auto; } }

/* Fits: platform → Hexes → SOC */
.flow { display: grid; grid-template-columns: 1fr 140px 1fr; gap: var(--hx-6); align-items: center; }
.flow .panel { background: var(--hx-navy-900); border: 1px solid var(--hx-border); border-radius: var(--hx-r-lg); padding: var(--hx-6); display: flex; flex-direction: column; gap: var(--hx-4); }
.flow-node { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--hx-fg); }
.flow-node svg { width: 96px; height: 96px; filter: drop-shadow(0 0 24px rgba(76, 223, 240, 0.35)); }
.flow-node .mono { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hx-accent-strong); }
.flow-node::before, .flow-node::after { content: ""; position: absolute; top: 48px; width: calc(var(--hx-6) + 10px); border-top: 2px dashed rgba(76, 223, 240, 0.5); }
.flow-node::before { right: 100%; } .flow-node::after { left: 100%; }
@media (max-width: 900px) { .flow { grid-template-columns: 1fr; } .flow-node { padding: var(--hx-2) 0; } .flow-node::before, .flow-node::after { display: none; } }

/* Closing panel */
.closing .closing-panel { position: relative; overflow: hidden; border: 1px solid var(--hx-border); border-radius: 16px; padding: var(--hx-16) var(--hx-8); background: radial-gradient(80% 120% at 50% 100%, rgba(76, 223, 240, 0.14), var(--hx-navy-900) 60%); }
.closing .motif { position: absolute; right: -80px; top: -120px; width: 520px; height: 520px; color: rgba(76, 223, 240, 0.18); pointer-events: none; }
.closing .closing-panel > :not(.motif) { position: relative; }
@media (max-width: 620px) { .closing .closing-panel { padding: var(--hx-12) var(--hx-5); } .closing .motif { width: 320px; height: 320px; right: -120px; top: -100px; } }
/* phone: the Hexes column is the point — show it alone instead of a sideways scroll (the toggle is desktop-only) */
@media (max-width: 720px) {
  .compare-card .compare { display: table; min-width: 0; }
  .compare-card .compare th:not(:first-child):not(.us), .compare-card .compare td:not(:first-child):not(.us) { display: none; }
  .compare-card .compare td:first-child, .compare-card .compare th:first-child { width: 40%; }
  .compare-card .compare th.us, .compare-card .compare td.us { width: 60%; }
  .compare-card .compare th, .compare-card .compare td { padding: 14px; }
  .compare-body .compare-tools { display: none; }
  .compare-summary-title { font-size: 17px; line-height: 24px; }
}

/* Company: mission */
.mission { max-width: 800px; display: flex; flex-direction: column; gap: var(--hx-4); }
.mission h1 { margin: var(--hx-4) 0 var(--hx-3); font-size: clamp(34px, 3.7vw, 52px); }
.mission p { color: var(--hx-fg-muted); font-size: 17px; line-height: 28px; margin: 0; }
.mission p.lede { font-size: 19px; line-height: 30px; }
.mission p b { color: var(--hx-fg); font-weight: 600; }
.mission sup { font-family: var(--hx-font-mono); font-size: 10px; color: var(--hx-accent-strong); margin-left: 2px; }
.mission .footnote { font-size: 12px; line-height: 18px; margin-top: var(--hx-4); padding-top: var(--hx-4); border-top: 1px solid var(--hx-border); max-width: 720px; }
.mission-hero .lede + .lede { margin-top: 0; }
.mission p.lede { max-width: none; }

/* Company: mission hero with lattice art */
.mission-hero { overflow: hidden; }
.mission-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr); gap: var(--hx-12); align-items: start; }
.mission-art { position: sticky; top: 96px; align-self: start; }
.mission-art .lattice { width: 100%; height: auto; display: block; }
.lattice .core { animation: corePulse 6s var(--hx-ease) infinite; animation-delay: calc(var(--i) * 0.45s); transform-box: fill-box; transform-origin: center; }
@keyframes corePulse { 0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(76,223,240,0)); } 8% { transform: scale(1.35); filter: drop-shadow(0 0 10px rgba(76,223,240,0.9)); } 20% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(76,223,240,0)); } }
.lattice .link { stroke-dasharray: 3 5; animation: linkFlow 2.4s linear infinite; animation-delay: calc(var(--i) * 0.2s); }
@keyframes linkFlow { to { stroke-dashoffset: -16; } }
.lattice .blocked-x { animation: pulse 1.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: reduce) { .lattice .core, .lattice .link, .lattice .blocked-x { animation: none !important; } }
@media (max-width: 960px) { .mission-grid { grid-template-columns: 1fr; } .mission-art { position: relative; top: auto; max-width: 420px; margin: 0 auto; opacity: 0.85; } }

/* Company: contact */
.contact { position: relative; overflow: hidden; }
.contact::before { content: ""; position: absolute; right: -200px; bottom: -260px; width: 620px; height: 620px; background: radial-gradient(closest-side, rgba(76, 223, 240, 0.10), transparent 70%); pointer-events: none; }
.contact .container { position: relative; }
.contact-head { margin-bottom: var(--hx-8); }
.contact .contact-grid { grid-template-columns: minmax(0, 1.25fr) minmax(260px, 0.75fr); gap: var(--hx-8); }
.form-card { max-width: none; padding: var(--hx-8); gap: var(--hx-5); background: var(--hx-navy-950); box-shadow: 0 30px 80px -40px rgba(0, 0, 0, 0.8); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--hx-5); }
.form-foot { display: flex; align-items: center; gap: var(--hx-5); flex-wrap: wrap; }
.form-foot .form-note { margin: 0; }
.side { display: flex; flex-direction: column; gap: var(--hx-4); }
.side-card { border: 1px solid var(--hx-border); border-radius: var(--hx-r-lg); padding: var(--hx-5); background: var(--hx-navy-900); }
.side-card p { margin: 8px 0 0; color: var(--hx-fg-muted); font-size: 14px; line-height: 22px; }
.side-card .mono { font-size: 13px; color: var(--hx-fg); }
@media (max-width: 860px) { .contact .contact-grid { grid-template-columns: 1fr; } .field-row { grid-template-columns: 1fr; } .form-card { padding: var(--hx-5); } }
.mission-art .lattice { -webkit-mask-image: radial-gradient(ellipse 88% 72% at 52% 46%, #000 55%, transparent 100%); mask-image: radial-gradient(ellipse 88% 72% at 52% 46%, #000 55%, transparent 100%); }
.form-card .field .input { width: 100%; box-sizing: border-box; }
@media (max-width: 620px) { .mission h1 br { display: none; } }







/* lattice: AI elements */
.lattice .tag { font-family: var(--hx-font-mono); font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; fill: var(--hx-fg-muted); }
.lattice .tag.lit { fill: var(--hx-accent-strong); }
.lattice .req { stroke-dasharray: 5 6; animation: linkFlow 1.4s linear infinite; animation-delay: calc(var(--i, 0) * 0.7s); filter: drop-shadow(0 0 6px rgba(76,223,240,0.6)); }
.lattice .leaf { opacity: 0.25; animation: leafGrow 5s var(--hx-ease) infinite; animation-delay: calc(var(--i) * 0.35s); }
@keyframes leafGrow { 0%, 100% { opacity: 0.25; } 30%, 60% { opacity: 1; } }
.lattice .eye { animation: blink 4.2s steps(1) infinite; }
@keyframes blink { 0%, 92%, 100% { opacity: 1; } 94%, 98% { opacity: 0.15; } }
@media (prefers-reduced-motion: reduce) { .lattice .req, .lattice .leaf, .lattice .eye { animation: none !important; opacity: 1; } }
/* end lattice */

/* agent-flow figure */
.agent-flow-wrap { margin: 0 0 var(--hx-2); }
.agent-flow { width: 100%; max-width: 360px; height: auto; display: block; }
.agent-flow .tag text { font-family: var(--hx-font-mono); letter-spacing: 0.14em; text-transform: uppercase; fill: var(--hx-fg-muted); }
.agent-flow .tag .lit { fill: var(--hx-accent-strong); }
.agent-flow .req { stroke-dasharray: 5 6; animation: linkFlow 1.4s linear infinite; animation-delay: calc(var(--i, 0) * 0.7s); }
.agent-flow .eye { animation: blink 4.2s steps(1) infinite; }
.agent-flow .blocked-x { animation: pulse 1.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.ai-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 460px); column-gap: var(--hx-10); row-gap: var(--hx-3); align-items: center; max-width: none; }
.ai-head .agent-flow-wrap { grid-column: 2; grid-row: 1 / span 3; margin: 0; }
.ai-head .agent-flow { max-width: none; width: 100%; }
@media (max-width: 860px) { .ai-head { grid-template-columns: 1fr; } .ai-head .agent-flow-wrap { grid-column: 1; grid-row: auto; max-width: 360px; } }
@media (prefers-reduced-motion: reduce) { .agent-flow .req, .agent-flow .eye, .agent-flow .blocked-x { animation: none !important; } }

/* contact: side cards align to the form card height */
.contact .contact-grid { align-items: stretch; }
.form-card { height: 100%; box-sizing: border-box; }
.form-card .form-foot { margin-top: auto; }
.form-card .field:has(textarea) { flex: 1; display: flex; flex-direction: column; }
.form-card textarea { flex: 1; min-height: 140px; resize: vertical; }
.side { display: grid; grid-template-rows: repeat(4, minmax(0, 1fr)); gap: var(--hx-4); }
.side-card { display: flex; flex-direction: column; justify-content: center; padding: var(--hx-4) var(--hx-5); }
.side-card p { font-size: 13.5px; line-height: 21px; }
@media (max-width: 860px) { .side { grid-template-rows: none; } .form-card { height: auto; } }

/* AI section (homepage) */
.ai .grid { margin-top: var(--hx-2); }
.ai-head { margin-bottom: var(--hx-8); }
.fits-note { margin-top: var(--hx-6); font-size: 14px; line-height: 22px; max-width: 760px; }

/* bento balance: alternate the wide tile, give it something to hold */
.bento { grid-auto-flow: dense; }
.bento .card.feature:nth-child(4) { grid-column: 3 / span 2; }
.bento .card.feature { position: relative; overflow: hidden; padding: var(--hx-8); justify-content: space-between; min-height: 300px; }
.bento .card.feature::after { content: ""; position: absolute; right: -48px; top: -64px; width: 200px; height: 200px; opacity: 0.6; background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M50 4 L90 27 L90 73 L50 96 L10 73 L10 27 Z' fill='none' stroke='%234CDFF0' stroke-width='0.8' opacity='0.35'/><rect x='44' y='44' width='12' height='12' rx='2' fill='%234CDFF0' opacity='0.3'/></svg>") no-repeat center / contain; pointer-events: none; }
.bento .card.feature > * { position: relative; z-index: 1; }
.tile-modes { display: flex; gap: 8px; margin-top: var(--hx-5); flex-wrap: wrap; }
.tile-modes span { font-family: var(--hx-font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; border: 1px solid var(--hx-border); border-radius: 999px; padding: 6px 12px; color: var(--hx-fg-muted); }
.tile-modes span.on { color: var(--hx-fg); border-color: rgba(76, 223, 240, 0.45); }
.tile-modes span.hot { color: var(--hx-accent-strong); background: rgba(76, 223, 240, 0.10); }
@media (max-width: 960px) { .bento .card.feature:nth-child(4) { grid-column: span 2; } .bento .card.feature { min-height: 0; } }
@media (max-width: 620px) { .bento .card.feature, .bento .card.feature:nth-child(4) { grid-column: auto; padding: var(--hx-6); } }

/* gap: the four questions */
.asks { list-style: none; margin: var(--hx-6) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--hx-4); counter-reset: ask; }
.asks li { position: relative; padding-left: 34px; counter-increment: ask; }
.asks li::before { content: "0" counter(ask); position: absolute; left: 0; top: 2px; font-family: var(--hx-font-mono); font-size: 11px; letter-spacing: 0.1em; color: var(--hx-accent-strong); }
.asks li b { display: block; color: var(--hx-fg); font-weight: 600; font-size: 15px; line-height: 22px; }
.asks li span { display: block; color: var(--hx-fg-muted); font-size: 14px; line-height: 21px; margin-top: 4px; }
.split-head .compare-tools { margin-top: var(--hx-6); }
.hero h1 { font-size: clamp(34px, 3.9vw, 50px); letter-spacing: -0.025em; }
.hero h1 br + * { white-space: nowrap; }
.compare-card .compare th.us { font-size: 11px; }
/* gap: head + four questions, then the comparison table full width below */
.gap-head { max-width: 760px; }
.gap-head h2 { font-size: clamp(28px, 2.6vw, 36px); }
.asks-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--hx-6) var(--hx-12); margin-top: var(--hx-8); }
.asks-grid li b { font-size: 16px; line-height: 24px; }
/* the detailed comparison is opt-in: a quiet bar that opens the table */
.compare-block { margin-top: var(--hx-12); border: 1px solid var(--hx-border); border-radius: var(--hx-r-lg); background: rgba(16, 26, 44, 0.45); }
.compare-block > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--hx-5); padding: var(--hx-5) var(--hx-6); border-radius: var(--hx-r-lg); }
.compare-block > summary::-webkit-details-marker { display: none; }
.compare-block > summary:hover { background: rgba(76, 223, 240, 0.04); }
.compare-block > summary:focus-visible { outline: none; box-shadow: var(--hx-focus-ring); }
.compare-summary { display: flex; flex-direction: column; gap: 4px; }
.compare-summary-title { font-family: var(--hx-font-heading); font-weight: 700; font-size: 19px; line-height: 26px; letter-spacing: -0.01em; color: var(--hx-fg); }
.compare-summary-hint { display: inline-flex; align-items: center; gap: 8px; font-family: var(--hx-font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--hx-accent-strong); white-space: nowrap; }
.compare-summary-hint svg { transition: transform var(--hx-dur) var(--hx-ease); }
.compare-block[open] > summary { border-bottom: 1px solid var(--hx-border); border-radius: var(--hx-r-lg) var(--hx-r-lg) 0 0; }
.compare-block[open] .compare-summary-hint svg { transform: rotate(180deg); }
.compare-body { padding: var(--hx-5) var(--hx-6) var(--hx-6); }
.compare-body .compare-tools { margin: 0 0 var(--hx-4); }
.compare-block .split-note { max-width: 760px; margin-top: var(--hx-5); }
@media (max-width: 860px) { .asks-grid { grid-template-columns: 1fr; gap: var(--hx-5); } .compare-block { margin-top: var(--hx-10); } .compare-block > summary { padding: var(--hx-4) var(--hx-5); } .compare-body { padding: var(--hx-4) var(--hx-5) var(--hx-5); } }

/* phones: everything stacks left, so a centred head over left-aligned stages reads as a mistake.
   The closing CTA band keeps its own centring. */
@media (max-width: 720px) {
  .section-head.centered { text-align: left; align-items: flex-start; margin-left: 0; margin-right: 0; }
  .stage { text-align: left; padding: 0; }
}

/* contact form: honeypot (never shown, never announced) and the small note under the button */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-note.hint { margin-top: var(--hx-3); font-size: 12px; line-height: 18px; color: var(--hx-fg-muted); }
.form-note a { color: var(--hx-accent); }

/* legal pages are drafts with counsel: the footer shows them as pending, not as links */
.site-footer .soon { color: var(--hx-fg-muted); opacity: 0.55; cursor: default; }
.site-footer .soon::after { content: " · soon"; font-family: var(--hx-font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.8; }
.foot-col .soon { display: block; }
.site-footer .legal .soon::after { content: none; }   /* the bottom line stays a single quiet row */

/* ---------- showcase band (reserved for customer quotes and stories) ---------- */
.showcase { position: relative; overflow: hidden; background: var(--hx-navy-950); }
.showcase-art { position: absolute; inset: 0; }
.showcase-svg { width: 100%; height: 100%; display: block; }
.showcase-body { position: relative; z-index: 1; min-height: 420px; display: flex; flex-direction: column; justify-content: flex-end; padding-top: var(--hx-16); padding-bottom: var(--hx-10); }
.showcase-caption { max-width: 560px; margin: 0; font-family: var(--hx-font-heading); font-weight: 700; font-size: 20px; line-height: 30px; letter-spacing: -0.01em; color: var(--hx-ice); text-shadow: 0 1px 24px rgba(10, 18, 32, 0.9); }
.showcase-quote { max-width: 720px; margin: 0; }
.showcase-quote p { font-family: var(--hx-font-heading); font-weight: 700; font-size: clamp(20px, 2.1vw, 28px); line-height: 1.35; letter-spacing: -0.015em; color: var(--hx-ice); margin: 0 0 var(--hx-3); }
.showcase-quote cite { font-style: normal; font-family: var(--hx-font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hx-fg-muted); }
/* breathing room before the dense section underneath */
.showcase + .band.gap { padding-top: var(--hx-16); }
@media (max-width: 860px) { .showcase-body { min-height: 300px; padding-top: var(--hx-12); padding-bottom: var(--hx-8); } .showcase-caption { font-size: 17px; line-height: 26px; } .showcase + .band.gap { padding-top: var(--hx-12); } }


/* intro film: a facade (original artwork + play) until the visitor presses play, then the privacy-enhanced embed */
.film { padding: var(--hx-16) 0; }
.film-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--hx-12); align-items: center; }
.film-copy h2 { margin: var(--hx-3) 0 var(--hx-4); }
.film-copy p { color: var(--hx-fg-muted); max-width: 440px; }
.film-copy .film-meta { margin-top: var(--hx-5); font-family: var(--hx-font-mono); font-size: var(--hx-text-xs); letter-spacing: 0.08em; text-transform: uppercase; }
.film-player { position: relative; aspect-ratio: 16 / 9; border: 1px solid var(--hx-border); border-radius: var(--hx-r-lg); overflow: hidden; background: var(--hx-navy-950); box-shadow: 0 24px 60px -28px rgba(76, 223, 240, 0.35); }
.film-poster { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; color: inherit; font: inherit; }
.film-art { position: absolute; inset: 0; width: 100%; height: 100%; transition: transform 0.5s ease; }
.film-poster:hover .film-art { transform: scale(1.03); }
.film-play { position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%; background: var(--hx-accent-strong); color: var(--hx-navy-950); display: grid; place-items: center; box-shadow: 0 0 0 10px rgba(76, 223, 240, 0.18), 0 10px 30px rgba(0, 0, 0, 0.45); transition: transform 0.2s ease, box-shadow 0.2s ease; }
.film-play svg { width: 34px; height: 34px; fill: currentColor; margin-left: 4px; }
.film-poster:hover .film-play { transform: scale(1.07); box-shadow: 0 0 0 14px rgba(76, 223, 240, 0.22), 0 10px 30px rgba(0, 0, 0, 0.45); }
.film-poster:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--hx-accent-strong); }
.film-badge { position: absolute; left: var(--hx-4); bottom: var(--hx-4); display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: rgba(10, 18, 32, 0.78); border: 1px solid var(--hx-border); font-family: var(--hx-font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--hx-fg); }
.film-badge i { width: 6px; height: 6px; border-radius: 50%; background: var(--hx-accent-strong); }
.film-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (max-width: 860px) { .film { padding: var(--hx-12) 0; } .film-grid { grid-template-columns: 1fr; gap: var(--hx-6); } .film-copy p { max-width: none; } .film-play { width: 64px; height: 64px; margin: -32px 0 0 -32px; } }
@media (prefers-reduced-motion: reduce) { .film-art, .film-play { transition: none; } .film-poster:hover .film-art { transform: none; } }