/* ALYT — alyt.com. Tokens from the brand: deep #0E4E8E, signal #1E9CD7, ice #A8E0E8, charcoal #4A4A52.
   Space Grotesk display, Inter body, JetBrains Mono for numbers. Mobile first. */

:root {
  --paper: #fbfbfd;
  --paper-2: #f3f4f7;
  --ink: #15151a;
  --charcoal: #4a4a52;
  --muted: #74747f;
  --line: rgba(21, 21, 26, 0.09);
  --deep: #0e4e8e;
  --signal: #1e9cd7;
  --ice: #a8e0e8;
  --glow: #5fd6f2;
  --walnut: #5b3a24;
  --walnut-2: #8a5a3a;
  --night: #0a0f16;
  --night-2: #101823;
  --r: 20px;
  --r-sm: 12px;
  --wrap: 1200px;
  --gutter: 20px;
  --nav-h: 64px;
  --display: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --body: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", "SF Mono", Menlo, monospace;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}
@media (min-width: 760px) { :root { --gutter: 32px; --nav-h: 72px; } }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--body); font-size: 16px; line-height: 1.6; color: var(--charcoal);
  background: var(--paper); -webkit-font-smoothing: antialiased; overflow-x: clip;
}
@media (min-width: 760px) { body { font-size: 17px; } }
img, svg, video { display: block; max-width: 100%; }
[hidden] { display: none !important; }
img { height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
h1, h2, h3, h4 { font-family: var(--display); color: var(--ink); letter-spacing: -0.025em; line-height: 1.04; text-wrap: balance; font-weight: 600; }
h1 { font-size: clamp(2.5rem, 9vw, 5.6rem); font-weight: 700; letter-spacing: -0.035em; }
h2 { font-size: clamp(1.9rem, 5.2vw, 3.4rem); }
h3 { font-size: clamp(1.25rem, 2.4vw, 1.6rem); letter-spacing: -0.015em; }
h4 { font-size: 1.05rem; line-height: 1.3; }
p { max-width: 62ch; }
strong { color: var(--ink); font-weight: 600; }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--ice); color: var(--ink); }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: #fff; padding: 8px 12px; border-radius: 8px; z-index: 100; }
.skip:focus { left: 8px; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding-inline: var(--gutter); }
.lede { font-size: clamp(1.08rem, 1.6vw, 1.3rem); line-height: 1.55; color: var(--charcoal); max-width: 56ch; }
.small { font-size: 0.92rem; color: var(--muted); }
/* the old site's headline gradient, kept: deep to signal to sky */
.accent { background: linear-gradient(100deg, var(--deep) 10%, var(--signal) 55%, #63c2e4 90%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.dark .accent, .hero .accent, .phero-full .accent { background-image: linear-gradient(100deg, var(--ice) 0%, var(--glow) 45%, var(--signal) 100%); }
.js .r-line .accent, .js .r-line { -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.mark-tri { display: inline-block; width: 0.75em; height: 0.75em; vertical-align: -0.05em; }

/* ------------------------------------------------ buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-weight: 500; font-size: 1rem; padding: 0.85em 1.6em; border-radius: 999px; text-decoration: none;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), background 0.2s, color 0.2s; white-space: nowrap;
}
.btn-ink { background: var(--ink); color: #fff; }
.btn-ink:hover { background: var(--deep); transform: translateY(-1px); box-shadow: 0 12px 30px rgba(14, 78, 142, 0.25); }
.btn-ghost { color: var(--ink); box-shadow: inset 0 0 0 1.5px rgba(21, 21, 26, 0.18); }
.btn-ghost:hover { box-shadow: inset 0 0 0 1.5px var(--signal); color: var(--deep); }
.btn-light { background: #fff; color: var(--ink); }
.btn-light:hover { background: var(--ice); }
.btn-outline-light { color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.35); }
.btn-outline-light:hover { box-shadow: inset 0 0 0 1.5px #fff; }
.btn-sm { font-size: 0.9rem; padding: 0.6em 1.15em; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
.link { color: var(--deep); font-weight: 500; text-decoration: none; border-bottom: 1.5px solid var(--ice); transition: border-color 0.2s; }
.link:hover { border-color: var(--signal); }

/* ------------------------------------------------ nav */
.progress { position: fixed; top: 0; left: 0; height: 2px; width: 100%; background: var(--signal); transform-origin: 0 50%; transform: scaleX(0); z-index: 60; pointer-events: none; }
.nav { position: fixed; inset: 0 0 auto 0; z-index: 50; background: rgba(251, 251, 253, 0.78); -webkit-backdrop-filter: saturate(160%) blur(18px); backdrop-filter: saturate(160%) blur(18px); border-bottom: 1px solid transparent; transition: border-color 0.25s, background 0.25s; }
.nav.scrolled { border-bottom-color: var(--line); }
.nav-inner { max-width: var(--wrap); margin: 0 auto; padding-inline: var(--gutter); height: var(--nav-h); display: flex; align-items: center; gap: 20px; }
.nav-logo { flex-shrink: 0; }
.nav-logo img { height: 24px; width: auto; }
.nav-links { display: none; gap: 22px; margin-left: 12px; }
.nav-links a { font-size: 0.93rem; color: var(--charcoal); text-decoration: none; padding: 6px 0; position: relative; white-space: nowrap; }
.nav-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; background: var(--signal); transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.25s var(--ease); }
.nav-links a:hover::after, .nav-links a[aria-current]::after { transform: scaleX(1); }
.nav-links a[aria-current] { color: var(--ink); }
.nav-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.nav-signin { display: none; }
.nav-register { display: none; }
.lang { position: relative; }
.lang summary { list-style: none; cursor: pointer; font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.06em; padding: 6px 10px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); display: inline-flex; align-items: center; gap: 6px; }
.lang summary::-webkit-details-marker { display: none; }
.lang summary::after { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); }
.lang ul { position: absolute; right: 0; top: calc(100% + 8px); list-style: none; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 6px; min-width: 170px; box-shadow: 0 18px 44px rgba(21, 21, 26, 0.12); z-index: 5; }
.lang li a { display: block; padding: 8px 12px; border-radius: 9px; text-decoration: none; font-size: 0.95rem; color: var(--ink); }
.lang li a:hover { background: var(--paper-2); }
.lang li a[aria-current] { color: var(--deep); font-weight: 600; }
.burger { width: 40px; height: 40px; display: grid; place-items: center; gap: 0; border-radius: 999px; position: relative; }
.burger span { position: absolute; width: 20px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform 0.3s var(--ease), opacity 0.2s; }
.burger span:first-child { transform: translateY(-3.5px); }
.burger span:last-child { transform: translateY(3.5px); }
.burger[aria-expanded="true"] span:first-child { transform: rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { transform: rotate(-45deg); }
@media (min-width: 1024px) {
  .nav-links { display: flex; }
  .nav-signin, .nav-register { display: inline-flex; }
  .burger { display: none; }
}
@media (min-width: 760px) and (max-width: 1023px) { .nav-register { display: inline-flex; } }
/* long labels (German, Dutch, Portuguese) at laptop widths: tighter links, no ghost button */
@media (min-width: 1024px) and (max-width: 1500px) { .nav-links { gap: 15px; } .nav-links a { font-size: 0.86rem; } .nav-signin { display: none; } .nav-actions { gap: 8px; } }

.menu { position: fixed; inset: 0; z-index: 45; background: var(--paper); padding: calc(var(--nav-h) + 20px) var(--gutter) 40px; overflow-y: auto; display: flex; flex-direction: column; gap: 28px; }
.menu[hidden] { display: none; }
.menu-links { display: flex; flex-direction: column; }
.menu-links a { font-family: var(--display); font-size: clamp(1.9rem, 8vw, 2.6rem); font-weight: 600; letter-spacing: -0.03em; color: var(--ink); text-decoration: none; padding: 8px 0; border-bottom: 1px solid var(--line); opacity: 0; transform: translateY(14px); }
.menu.open .menu-links a { animation: menu-in 0.5s var(--ease) forwards; animation-delay: calc(var(--i) * 40ms); }
@keyframes menu-in { to { opacity: 1; transform: none; } }
.menu-actions { display: flex; flex-direction: column; gap: 10px; }
.menu-actions .btn { width: 100%; }
.menu-langs { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.menu-langs a { font-size: 0.95rem; text-decoration: none; color: var(--muted); }
.menu-langs a[aria-current] { color: var(--deep); font-weight: 600; }
body.menu-open { overflow: hidden; }

/* ------------------------------------------------ sections */
.section { padding-block: clamp(72px, 10vw, 140px); }
.section-tight { padding-block: clamp(56px, 7vw, 96px); }
.section-head { max-width: 760px; margin-bottom: clamp(36px, 5vw, 64px); }
.section-head h2 { margin-bottom: 0.5em; }
.section-head .lede { margin-top: 0.6em; }
.dark { background: var(--night); color: rgba(255, 255, 255, 0.74); }
.dark h1, .dark h2, .dark h3, .dark h4, .dark strong { color: #fff; }
.dark .lede { color: rgba(255, 255, 255, 0.8); }
.dark .btn-ghost { color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.35); }
.dark .btn-ink { background: #fff; color: var(--ink); }
.dark .btn-ink:hover { background: var(--ice); box-shadow: none; }
.dark .link { color: var(--glow); border-color: rgba(95, 214, 242, 0.3); }
.tint { background: var(--paper-2); }
.walnut-band { background: linear-gradient(180deg, #f6f1ec, #efe6dd); }

.split { display: grid; gap: clamp(28px, 5vw, 72px); align-items: center; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; } .split.split-wide { grid-template-columns: 1.15fr 1fr; } .split-flip > :first-child { order: 2; } }
.split > *, .grid-2 > *, .grid-3 > *, .phero-grid > *, .surfaces > *, .compare > * { min-width: 0; }
.code-tabs-wrap { min-width: 0; max-width: 100%; }
.split h2 { margin-bottom: 0.5em; }
.split p + p { margin-top: 1em; }
.split .btn-row { margin-top: 1.6em; }

.media { border-radius: var(--r); overflow: hidden; background: var(--paper-2); position: relative; }
.media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.js .media.px img { top: -8%; height: 116%; will-change: transform; }

.media-4x5 { aspect-ratio: 4 / 5; }
.media-3x2 { aspect-ratio: 3 / 2; }
.media-16x9 { aspect-ratio: 16 / 9; }
.media-1x1 { aspect-ratio: 1; }
.media-cap { font-size: 0.85rem; color: var(--muted); margin-top: 10px; }

/* definition rows: a list where structure carries information */
.rows { list-style: none; border-top: 1px solid var(--line); }
.rows li { display: grid; gap: 4px 24px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.rows h4 { color: var(--ink); }
.rows p { font-size: 0.97rem; }
@media (min-width: 760px) { .rows li { grid-template-columns: 220px 1fr; } .rows.rows-wide li { grid-template-columns: 300px 1fr; } }
.dark .rows, .dark .rows li { border-color: rgba(255, 255, 255, 0.12); }

.spec { list-style: none; display: grid; gap: 0; border-top: 1px solid var(--line); }
.spec li { display: flex; justify-content: space-between; gap: 20px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 0.95rem; }
.spec .k { color: var(--muted); }
.spec .v { color: var(--ink); font-weight: 500; text-align: right; }
.dark .spec, .dark .spec li { border-color: rgba(255, 255, 255, 0.12); }
.dark .spec .v { color: #fff; }

.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px 20px; }
.stats > * { min-width: 0; }
.stats-3 { grid-template-columns: 1fr; }
@media (min-width: 560px) { .stats-3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 760px) { .stats { grid-template-columns: repeat(4, 1fr); } .stats-3 { grid-template-columns: repeat(3, 1fr); } }
.stat .n { font-family: var(--display); font-size: clamp(2.2rem, 5vw, 3.6rem); font-weight: 700; letter-spacing: -0.04em; color: var(--ink); line-height: 1; }
.stat .n small { font-size: 0.45em; font-weight: 600; letter-spacing: 0; color: var(--signal); margin-left: 2px; }
.stat .l { font-size: 0.92rem; color: var(--muted); margin-top: 8px; max-width: 24ch; }
.dark .stat .n { color: #fff; }

.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 0.78rem; font-weight: 500; padding: 4px 10px; border-radius: 999px; background: var(--paper-2); color: var(--charcoal); }
.pill-coming { background: #fff4e0; color: #8a5a00; }
.pill-local { background: #e6f5fb; color: var(--deep); }
.pill-radio { background: #fde8ee; color: #a2183c; }
.pill-cloud { background: var(--paper-2); color: var(--charcoal); }
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.grid-2 { display: grid; gap: 24px; }
.grid-3 { display: grid; gap: 24px; }
@media (min-width: 760px) { .grid-2 { grid-template-columns: 1fr 1fr; } .grid-3 { grid-template-columns: repeat(3, 1fr); } }
.tile { padding: 26px 24px; border-radius: var(--r); background: #fff; border: 1px solid var(--line); }
.tile h3, .tile h4 { margin-bottom: 0.5em; }
.tile p { font-size: 0.97rem; }
.tile .pill { margin-bottom: 14px; }
.dark .tile { background: var(--night-2); border-color: rgba(255, 255, 255, 0.1); }

.note { border-left: 3px solid var(--signal); padding: 4px 0 4px 18px; color: var(--charcoal); font-size: 0.98rem; max-width: 62ch; }
.dark .note { color: rgba(255, 255, 255, 0.8); }

/* ------------------------------------------------ home hero */
.hero { position: relative; min-height: 100svh; display: grid; align-items: end; padding-top: var(--nav-h); overflow: clip; background: var(--night); color: #fff; }
.hero-bg { position: absolute; inset: 0; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; transform: scale(1.06); }
.hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 15, 22, 0.35) 0%, rgba(10, 15, 22, 0) 30%, rgba(10, 15, 22, 0) 60%, rgba(10, 15, 22, 0.75) 100%), linear-gradient(90deg, rgba(10, 15, 22, 0.55) 0%, rgba(10, 15, 22, 0) 55%); }
.hero-content { position: relative; z-index: 2; padding-bottom: clamp(48px, 8vh, 96px); }
.hero h1 { color: #fff; max-width: 11ch; }
.hero .lede { color: rgba(255, 255, 255, 0.85); margin-top: 1.2rem; max-width: 46ch; }
.hero .btn-row { margin-top: 2rem; }
.hero-tri { position: absolute; z-index: 3; width: 120px; height: 120px; left: var(--gutter); top: 30%; pointer-events: none; color: var(--glow); filter: drop-shadow(0 0 14px rgba(95, 214, 242, 0.7)); opacity: 0; }
.hero-tri path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.hero-scroll { position: absolute; right: var(--gutter); bottom: 28px; z-index: 3; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.14em; color: rgba(255, 255, 255, 0.6); display: none; align-items: center; gap: 10px; }
.hero-scroll::after { content: ""; width: 1px; height: 40px; background: linear-gradient(rgba(255,255,255,0.7), transparent); animation: drip 1.8s var(--ease) infinite; }
@keyframes drip { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
@media (min-width: 760px) { .hero-scroll { display: flex; } .hero h1 { max-width: 12ch; } }
@media (max-width: 759px) {
  /* phone: the photo is a band at the top with the hub whole and centred; the copy sits on the night below it */
  .hero, .phero-full { min-height: 100svh; align-items: start; grid-template-rows: auto 1fr; }
  .phero-full { min-height: 0; }
  .hero-bg { position: relative; height: 48svh; min-height: 300px; margin-top: calc(-1 * var(--nav-h)); }
  .phero-full .hero-bg { height: 42svh; min-height: 260px; margin-top: 0; padding-top: 0; }
  .phero-full { padding-top: var(--nav-h); }
  .hero-bg img, .phero-full .hero-bg img { object-position: 66% 50%; transform: none; }
  .hero-bg::after, .phero-full .hero-bg::after { background: linear-gradient(180deg, rgba(10, 15, 22, 0.55) 0%, rgba(10, 15, 22, 0) 30%, rgba(10, 15, 22, 0) 62%, var(--night) 100%); }
  .hero-content, .phero-full .hero-content { padding-top: 8px; padding-bottom: 40px; align-self: end; }
  .phero-full .hero-content { padding-bottom: 36px; }
  .hero .lede { font-size: 1.02rem; margin-top: 0.9rem; }
  .hero-tri { top: 18svh; }
  .hero .btn-row .btn { flex: 1 1 100%; }
}

/* page hero (all other pages) */
.phero { padding-top: calc(var(--nav-h) + clamp(40px, 8vw, 96px)); padding-bottom: clamp(40px, 6vw, 80px); }
.phero h1 { max-width: 14ch; }
.phero .lede { margin-top: 1.3rem; }
.phero .btn-row { margin-top: 1.8rem; }
.phero-grid { display: grid; gap: 32px; align-items: end; }
@media (min-width: 900px) { .phero-grid { grid-template-columns: 1.1fr 0.9fr; } }
.phero-media { border-radius: var(--r); overflow: hidden; }
.phero-media img { width: 100%; }
.phero.dark { background: var(--night); }
.phero-full { position: relative; min-height: 78svh; display: grid; align-items: end; color: #fff; overflow: clip; }
.phero-full .hero-bg img { object-position: 60% 50%; transform: none; }
.phero-full .hero-bg::after { background: linear-gradient(180deg, rgba(10, 15, 22, 0.35) 0%, rgba(10, 15, 22, 0.05) 30%, rgba(10, 15, 22, 0.2) 60%, rgba(10, 15, 22, 0.9) 100%), linear-gradient(90deg, rgba(10, 15, 22, 0.78) 0%, rgba(10, 15, 22, 0.35) 45%, rgba(10, 15, 22, 0) 75%); }
.phero-full .hero-content { padding-bottom: clamp(40px, 7vh, 88px); }
.phero-full h1 { color: #fff; }
.phero-full .lede { color: rgba(255, 255, 255, 0.85); max-width: 44ch; }

/* statement: one big sentence, words lit on scroll */
.statement { padding-block: clamp(80px, 12vw, 160px); }
.statement p { font-family: var(--display); font-size: clamp(1.7rem, 4.6vw, 3.3rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1.15; color: var(--ink); max-width: 24ch; }
.statement .w { color: rgba(21, 21, 26, 0.18); transition: color 0.3s; }
.statement .w.lit { color: var(--ink); }
.statement .w.lit.hi { color: var(--signal); }
.dark .statement .w { color: rgba(255, 255, 255, 0.2); }
.dark .statement .w.lit { color: #fff; }

/* ------------------------------------------------ sticky gallery (hub page) */
.gallery { display: grid; gap: 32px; }
.gallery-stage { position: sticky; top: calc(var(--nav-h) + 16px); align-self: start; border-radius: var(--r); overflow: hidden; aspect-ratio: 4 / 5; background: var(--paper-2); }
.gallery-stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.6s var(--ease); }
.gallery-stage img.on { opacity: 1; }
.gallery-steps { display: grid; gap: clamp(32px, 6vw, 96px); padding-block: 8px; }
.gallery-step { display: grid; gap: 14px; }
.gallery-step h3 { font-size: clamp(1.5rem, 3vw, 2.2rem); }
.gallery-step img { display: none; border-radius: var(--r-sm); }
@media (min-width: 900px) { .gallery { grid-template-columns: 1fr 1fr; gap: 64px; } .gallery-steps { padding-block: 20vh 30vh; } }
@media (max-width: 899px) { .gallery-stage { display: none; } .gallery-step img { display: block; } }

/* ------------------------------------------------ voice pipeline */
.pipe { display: grid; gap: 16px; position: relative; }
.pipe-node { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start; padding: 18px 0; border-top: 1px solid var(--line); }
.pipe-node:last-child { border-bottom: 1px solid var(--line); }
.pipe-dot { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--paper-2); color: var(--deep); }
.pipe-dot svg { width: 20px; height: 20px; }
.pipe-node.on .pipe-dot { background: var(--ice); box-shadow: 0 0 0 6px rgba(168, 224, 232, 0.35); }
.pipe-node h4 { margin-bottom: 2px; }
.pipe-node p { font-size: 0.95rem; }
.pipe-node .num { color: var(--signal); font-size: 0.85rem; }
.tiers { display: grid; gap: 14px; }
.tier { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start; padding: 20px; border-radius: var(--r-sm); background: #fff; border: 1px solid var(--line); }
.tier .t-n { font-family: var(--mono); color: var(--signal); font-size: 0.85rem; padding-top: 3px; }
.tier h4 { margin-bottom: 4px; }
.tier p { font-size: 0.95rem; }
.tier .t-time { font-family: var(--mono); font-size: 0.85rem; color: var(--deep); margin-top: 8px; }
.tier-dim { opacity: 0.75; }
.phrases { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; }
.phrases li { font-family: var(--display); font-weight: 500; font-size: 1.02rem; padding: 10px 16px; border-radius: 999px; background: #fff; border: 1px solid var(--line); color: var(--ink); }
.phrases li.refused { color: var(--muted); text-decoration: line-through; text-decoration-color: rgba(21,21,26,0.35); }

/* ------------------------------------------------ security modes */
.modes { display: grid; gap: 18px; }
.mode-pills { display: flex; gap: 6px; padding: 6px; background: var(--paper-2); border-radius: 999px; width: max-content; max-width: 100%; }
.mode-pills button { padding: 10px 16px; border-radius: 999px; font-weight: 500; font-size: 0.95rem; color: var(--charcoal); transition: background 0.2s, color 0.2s; }
.mode-pills button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.mode-panel { padding: 24px; border-radius: var(--r); background: #fff; border: 1px solid var(--line); min-height: 150px; }
.mode-panel h4 { margin-bottom: 6px; }
.mode-panel p { font-size: 0.97rem; }
.mode-panel .m-state { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 0.8rem; color: var(--deep); margin-bottom: 12px; }
.mode-panel .m-state::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 4px rgba(30, 156, 215, 0.2); }
.mode-panel[data-mode="off"] .m-state::before { background: var(--muted); box-shadow: none; }
@media (max-width: 480px) { .mode-pills { width: 100%; } .mode-pills button { flex: 1; padding: 10px 6px; font-size: 0.88rem; } }
.dark .mode-pills { background: rgba(255, 255, 255, 0.08); }
.dark .mode-pills button { color: rgba(255, 255, 255, 0.75); }
.dark .mode-pills button[aria-pressed="true"] { background: #fff; color: var(--ink); }
.dark .mode-panel { background: var(--night-2); border-color: rgba(255, 255, 255, 0.1); }

/* ------------------------------------------------ connectors cloud */
.cloud-wrap { position: relative; padding-top: calc(var(--nav-h) + clamp(28px, 5vh, 60px)); background: var(--paper); }
.cloud-title { text-align: center; position: relative; z-index: 2; }
.cloud-title h1 { font-size: clamp(2.5rem, 5vw, 4.5rem); line-height: 1.12; max-width: 20ch; margin-inline: auto; }
.cloud-title h1 .accent { display: block; padding-bottom: 0.08em; }
.cloud-title p { margin: 18px auto 0; max-width: 48ch; font-size: clamp(1rem, 1.35vw, 1.15rem); }
.cloud { position: relative; width: 100%; height: calc(100svh - var(--nav-h) - 24px); }
.cloud-scene { position: relative; width: 100%; height: 100%; margin-inline: auto; isolation: isolate; background: var(--paper); }
.cloud-halo { position: absolute; inset: 12% 8%; border-radius: 50%; background: radial-gradient(ellipse, rgba(168,224,232,.2), rgba(168,224,232,.06) 42%, transparent 70%); }
.cloud-hub { position: absolute; left: 50%; top: 50%; width: min(34vw, 380px); translate: -50% -50%; mix-blend-mode: multiply; pointer-events: none; z-index: 3; }
.cloud-hub img { width: 100%; }
.cloud-logo { position: absolute; left: calc(50% + var(--x)); top: calc(50% + var(--y)); width: var(--s); height: var(--s); --s: clamp(44px, calc(6.2vw * var(--depth, 1)), 96px); translate: -50% -50%; transform: rotate(var(--tilt)); z-index: 2; }
.cloud-logo .float { width: 100%; height: 100%; animation: logo-float 6s ease-in-out infinite; animation-delay: var(--d, 0s); }
.cloud-logo .well { --s: inherit; width: 100%; height: 100%; box-shadow: 0 12px 26px rgba(21,21,26,.12), 0 2px 4px rgba(21,21,26,.06); }
.cloud.is-animated .cloud-logo { left: 50%; top: 50%; translate: none; will-change: transform, opacity; }
@keyframes logo-float { 0%, 100% { transform: translateY(8px); } 50% { transform: translateY(-8px); } }
.cloud-hint { position: absolute; inset: auto 0 4px; display: flex; justify-content: center; align-items: center; gap: 12px; font-family: var(--mono); font-size: .7rem; letter-spacing: .12em; color: var(--muted); }
.cloud-hint span { font-size: 1.1rem; }
@media (max-width: 759px) {
  .cloud-title { padding-inline: 24px; }
  .cloud-title h1 { font-size: clamp(2.25rem, 8.5vw, 3.5rem); }
  .cloud-title p { max-width: 34ch; margin-top: 14px; }
  .cloud-hub { width: min(66vw, 300px); }
  .cloud-logo { --s: clamp(44px, 12vw, 62px); left: calc(50% + var(--mx)); top: calc(50% + var(--my)); }
  .cloud-logo-extra { display: none; }
}
@media (max-height: 600px) {
  .cloud-hub { width: min(55vw, 45svh, 300px); }
  .cloud-logo { --s: 44px; }
  .cloud-logo-extra { display: none; }
}
@media (max-height: 600px) and (min-width: 760px) { .cloud-logo { left: calc(50% + var(--sx)); top: calc(50% + var(--sy)); } }
@media (prefers-reduced-motion: reduce) { .cloud-logo .float { animation: none; } .cloud-hint { visibility: hidden; } }
.connector-catalogue { padding-block: clamp(36px, 5vw, 72px); }
.connector-catalogue > .wrap, .connector-how > .wrap { max-width: 1440px; }
.connector-shelves { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 32px 24px; }
.connector-shelves .cat-group { grid-column: 1 / -1; min-width: 0; margin: 0; display: flex; flex-direction: column; }
.connector-shelves .catalogue { flex: 1; }
.catalogue { --gap: 16px; --columns: min(2, var(--count)); display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gap); }
.catalogue .cat-item { min-width: 0; flex: 0 0 calc((100% - (var(--columns) - 1) * var(--gap)) / var(--columns)); }
@media (min-width: 640px) {
  .catalogue { --columns: min(3, var(--count)); }
  .connector-shelves .cat-group[data-count="1"] { grid-column: span 3; }
}
@media (min-width: 1000px) {
  .catalogue { --gap: 20px; --columns: min(4, var(--count)); }
  .connector-shelves .cat-group[data-count="1"] { grid-column: span 2; }
}
.connector-steps { list-style: none; display: grid; gap: 20px; }
.connector-step .step-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.connector-step .num { color: var(--step-color); font-size: .85rem; opacity: .8; }
.step-icon { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 16px; color: var(--step-color); background: color-mix(in srgb, var(--step-color) 10%, transparent); }
.step-icon svg { width: 30px; height: 30px; }
.connector-step h4 { font-size: 1.25rem; margin-bottom: 10px; }
@media (min-width: 640px) { .connector-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .connector-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* a shelf tile: the mark large and centred, the name, one line of promise; the brand colour only appears as a glow on hover */
.cat-item { display: grid; grid-template-rows: auto auto 1fr; align-content: start; gap: 14px; justify-items: center; text-align: center; padding: 32px 22px 28px; border-radius: var(--r); background: #fff; border: 1px solid var(--line); transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s; }
.cat-item:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--brand, var(--signal)) 35%, transparent); box-shadow: 0 22px 48px rgba(21, 21, 26, 0.08), 0 0 0 6px color-mix(in srgb, var(--brand, var(--signal)) 8%, transparent); }
.cat-item .well { transition: transform 0.3s var(--ease); }
.cat-item:hover .well { transform: scale(1.06); }
/* One mark treatment for the catalogue, floating scene, home orbit and app tiles.
   Native square artwork fills its well. Transparent marks and lettering have black
   surrounds and measured clear space; no transform scales beyond the container. */
.well { --s: 60px; width: var(--s); height: var(--s); border-radius: 24%; background: var(--bg, #000); display: grid; place-items: center; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255,255,255,.09), 0 0 0 1px rgba(21,21,26,.06); flex-shrink: 0; }
.well img { width: 100%; height: 100%; object-fit: contain; }
.well-lg { --s: 88px; }
.well-sm { --s: 46px; }
.well:is(.logo-plex,.logo-sonos,.logo-spotify,.logo-matter,.logo-unifi,.logo-alexa,.logo-apple_tv,.logo-google_tv) { background: #000; }
.well:is(.logo-plex,.logo-alexa) img { width: 80%; height: 80%; }
.well.logo-sonos img { width: 100%; height: 100%; object-fit: cover; clip-path: inset(5% 0); filter: contrast(1.2); }
.well:is(.logo-spotify,.logo-cync) img { width: 82%; height: 82%; }
.well.logo-apple_carplay { background: transparent; }
.well.logo-spotify img { width: 76%; height: 76%; }
.well.logo-homekit img { width: 78%; height: 78%; border-radius: 22%; }
.well.logo-zigbee { background: #EB0443; }
.well:is(.logo-homekit,.logo-cync,.logo-android_auto) { background: #fff; }
.well.logo-homekit { box-shadow: none; }
.well.logo-zigbee img { width: 80%; height: 80%; border-radius: 50%; }
.well.logo-unifi img { width: 65%; height: 65%; filter: invert(1); }
.well.logo-matter img { width: 70%; height: 70%; filter: brightness(0) invert(1); }
.well.logo-apple_tv img { background: #fff; clip-path: inset(24% 18%); filter: contrast(2); }
.well.logo-android_auto img { width: 94%; height: 94%; }
.well.logo-google_tv img { width: 76%; height: 76%; }
.well-icon { background: var(--paper-2); color: var(--deep); }
.well-icon svg { width: 40%; height: 40%; }
.cat-item h4 { font-size: 1.12rem; margin-top: 4px; }
.cat-item p { font-size: 0.92rem; color: var(--charcoal); max-width: 26ch; }
.cat-item .pills { display: flex; flex-wrap: wrap; gap: 6px; }
.cat-group { margin-bottom: clamp(36px, 5vw, 56px); }
.cat-group h3 { text-align: center; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--line); font-size: 1.1rem; color: var(--muted); font-weight: 500; letter-spacing: 0; }
@media (max-width: 639px) { .cat-item { padding: 24px 12px; gap: 10px; } .cat-item h4 { font-size: 1rem; } .cat-item p { font-size: .85rem; } .well-lg { --s: 72px; } }
.orbit { overflow: clip; overflow-clip-margin: 8px; position: relative; width: min(100%, 480px); aspect-ratio: 1; margin-inline: auto; isolation: isolate; }
.orbit::before { content: ""; position: absolute; inset: 10%; border-radius: 50%; background: radial-gradient(circle, rgba(168,224,232,.22), transparent 70%); }
.orbit-ring { position: absolute; inset: 0; animation: spin 100s linear infinite; }
.orbit-ring::before { content: ""; position: absolute; inset: 11%; border-radius: 50%; border: 1px solid rgba(14,78,142,.09); }
.orbit-ring .orb { position: absolute; left: calc(50% + var(--ox)); top: calc(50% + var(--oy)); translate: -50% -50%; animation: counter 100s linear infinite; }
.orbit-ring .well { --s: clamp(40px, 12vw, 60px); box-shadow: 0 8px 20px rgba(21,21,26,.1); }
.orbit-ring.inner { inset: 23%; animation-direction: reverse; animation-duration: 80s; }
.orbit-ring.inner .orb { animation-direction: reverse; animation-duration: 80s; }
.orbit-ring.inner .well { --s: clamp(32px, 9vw, 44px); }
.orbit-core { position: absolute; inset: 42%; border-radius: 28%; background: #fff; box-shadow: 0 10px 35px rgba(14,78,142,.1); display: grid; place-items: center; }
.orbit-core img { width: 54%; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes counter { to { rotate: -360deg; } }
@media (prefers-reduced-motion: reduce) { .orbit-ring, .orbit-ring .orb { animation: none; } }

/* ------------------------------------------------ routines demo */
.routine { border-radius: var(--r); background: var(--ink); color: #fff; padding: clamp(22px, 4vw, 40px); font-family: var(--display); font-size: clamp(1.15rem, 2.6vw, 1.8rem); line-height: 1.5; letter-spacing: -0.01em; }
.routine .kw { font-family: var(--mono); font-size: 0.55em; letter-spacing: 0.16em; color: var(--glow); display: inline-block; margin-right: 0.6em; vertical-align: middle; }
.routine .v { display: inline-block; padding: 0.05em 0.45em; border-radius: 0.4em; background: rgba(255, 255, 255, 0.1); }
.routine .row { display: block; padding: 6px 0; }
.routine-dots { display: flex; gap: 6px; margin-top: 18px; }
.routine-dots span { width: 22px; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, 0.25); }
.routine-dots span.on { background: var(--glow); }

/* ------------------------------------------------ compare (hosted / self-hosted) */
.compare { display: grid; gap: 20px; }
@media (min-width: 900px) { .compare { grid-template-columns: 1fr 1fr; } }
.compare-col { border-radius: var(--r); padding: clamp(24px, 3.5vw, 40px); border: 1px solid var(--line); background: #fff; }
.compare-col.walnut { background: linear-gradient(160deg, #fbf6f1, #f2e8de); border-color: rgba(91, 58, 36, 0.14); }
.compare-col h3 { margin-bottom: 6px; }
.compare-col .who { color: var(--muted); font-size: 0.95rem; margin-bottom: 20px; }
.compare-col ul { list-style: none; display: grid; gap: 10px; }
.compare-col li { padding-left: 26px; position: relative; font-size: 0.97rem; }
.compare-col li::before { content: ""; position: absolute; left: 2px; top: 0.55em; width: 10px; height: 10px; border-radius: 50%; background: var(--ice); }
.compare-col.walnut li::before { background: var(--walnut-2); }

/* ------------------------------------------------ surfaces (apps) */
.surfaces { display: grid; gap: 20px; }
@media (min-width: 760px) { .surfaces { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .surfaces { grid-template-columns: repeat(3, 1fr); } }
.surface { border-radius: var(--r); padding: 30px 26px; background: #fff; border: 1px solid var(--line); display: grid; gap: 14px; align-content: start; justify-items: center; text-align: center; transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease); }
.surface:hover { transform: translateY(-4px); box-shadow: 0 22px 48px rgba(21, 21, 26, 0.08); }
.surface h3 { margin-top: 4px; }
.surface ul { text-align: left; }
.surface ul { list-style: none; display: grid; gap: 6px; font-size: 0.93rem; color: var(--charcoal); }
.surface li { padding-left: 16px; position: relative; }
.surface li::before { content: ""; position: absolute; left: 0; top: 0.65em; width: 6px; height: 6px; border-radius: 50%; background: var(--signal); }
.phone { width: min(300px, 78vw); margin-inline: auto; border-radius: 42px; background: #0d0d10; padding: 12px; box-shadow: 0 30px 80px rgba(21, 21, 26, 0.25), inset 0 0 0 2px rgba(255, 255, 255, 0.08); }
.phone-screen { border-radius: 32px; background: var(--paper); aspect-ratio: 9 / 19.2; overflow: hidden; display: grid; grid-template-rows: auto 1fr auto; }
.ps-top { padding: 18px 18px 8px; }
.ps-top .clock { font-family: var(--display); font-size: 2rem; font-weight: 700; letter-spacing: -0.04em; color: var(--ink); line-height: 1; }
.ps-top .wx { font-size: 0.78rem; color: var(--muted); margin-top: 2px; }
.ps-tiles { padding: 8px 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-content: start; }
.ps-tile { border-radius: 14px; background: #fff; border: 1px solid var(--line); padding: 10px; font-size: 0.72rem; color: var(--charcoal); min-height: 62px; display: grid; align-content: space-between; }
.ps-tile b { display: block; font-family: var(--display); color: var(--ink); font-size: 0.85rem; }
.ps-tile.on { background: var(--ice); border-color: transparent; }
.ps-tile.wide { grid-column: span 2; }
.ps-tab { display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; padding: 10px 12px 16px; border-top: 1px solid var(--line); }
.ps-tab span { height: 6px; border-radius: 3px; background: var(--line); margin: 0 10px; }
.ps-tab .mic { width: 44px; height: 44px; border-radius: 50%; background: var(--ink); margin: -18px auto 0; box-shadow: 0 8px 20px rgba(21, 21, 26, 0.3); position: relative; }
.ps-tab .mic::after { content: ""; position: absolute; inset: 14px; border-radius: 50%; border: 2px solid var(--glow); }
.ps-tab .mic.talk { animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { box-shadow: 0 8px 20px rgba(21, 21, 26, 0.3), 0 0 0 0 rgba(95, 214, 242, 0.5); } 50% { box-shadow: 0 8px 20px rgba(21, 21, 26, 0.3), 0 0 0 14px rgba(95, 214, 242, 0); } }

/* ------------------------------------------------ code */
.code { background: var(--night); color: #d7dde6; border-radius: var(--r); padding: 22px 24px; font-family: var(--mono); font-size: 0.82rem; line-height: 1.65; overflow-x: auto; }
.code .c { color: #6d7a8c; } .code .s { color: var(--glow); } .code .k { color: #ffd27f; } .code .f { color: #b5e3ff; }
.code-tabs { display: flex; gap: 6px; margin-bottom: -10px; position: relative; z-index: 1; padding-left: 12px; }
.code-tabs button { font-family: var(--mono); font-size: 0.75rem; padding: 8px 12px; border-radius: 10px 10px 0 0; background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.6); }
.code-tabs button[aria-selected="true"] { background: var(--night); color: #fff; }
.code-tabs-wrap { background: var(--night-2); border-radius: var(--r); padding-top: 4px; }
.code-tabs-wrap .code { border-radius: 0 var(--r) var(--r) var(--r); }
.code-block[hidden] { display: none; }

/* ------------------------------------------------ timeline (story) */
.timeline { list-style: none; position: relative; padding-left: 28px; border-left: 2px solid var(--line); display: grid; gap: 22px; }
.timeline li { position: relative; }
.timeline li::before { content: ""; position: absolute; left: -35px; top: 8px; width: 10px; height: 10px; border-radius: 50%; background: var(--paper); border: 2px solid var(--signal); }
.timeline li.now::before { background: var(--signal); box-shadow: 0 0 0 6px rgba(30, 156, 215, 0.18); }
.timeline .y { font-family: var(--mono); font-size: 0.8rem; color: var(--deep); letter-spacing: 0.06em; }
.timeline .w { display: block; color: var(--ink); font-weight: 500; }
.timeline .d { font-size: 0.93rem; color: var(--charcoal); }

/* ------------------------------------------------ cta + footer */
.cta { padding-block: clamp(80px, 12vw, 160px); background: radial-gradient(900px 420px at 50% 120%, rgba(168, 224, 232, 0.45), transparent 70%), linear-gradient(var(--paper), #eef5f8); text-align: center; }
.cta-inner { display: flex; flex-direction: column; align-items: center; }
/* the Penrose mark assembled from its three faces, the old site's signature */
.pmark { position: relative; width: 96px; height: 92px; margin-bottom: 24px; }
.pmark-lg { width: min(260px, 50vw); height: min(250px, 48vw); margin-bottom: 0; }
.pmark .piece { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.piece-a { clip-path: polygon(50% 50%, -5% -5%, 105% -5%); }
.piece-b { clip-path: polygon(50% 50%, 105% -5%, 105% 105%, 50% 105%); }
.piece-c { clip-path: polygon(50% 50%, 50% 105%, -5% 105%, -5% -5%); }
.js .pmark .piece { opacity: 0; }
.js .pmark.in .piece-a { animation: arrive-a 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) 0.1s forwards; }
.js .pmark.in .piece-b { animation: arrive-b 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) 0.32s forwards; }
.js .pmark.in .piece-c { animation: arrive-c 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) 0.54s forwards; }
.js .pmark.in { animation: mark-float 7s ease-in-out 1.6s infinite; }
@keyframes arrive-a { from { opacity: 0; transform: translate(0, -26px); } to { opacity: 1; transform: none; } }
@keyframes arrive-b { from { opacity: 0; transform: translate(24px, 14px); } to { opacity: 1; transform: none; } }
@keyframes arrive-c { from { opacity: 0; transform: translate(-24px, 14px); } to { opacity: 1; transform: none; } }
@keyframes mark-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.cta h2 { max-width: 16ch; }
.cta p { margin: 1rem auto 0; max-width: 46ch; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 2rem; }
@media (max-width: 480px) { .cta-row .btn { width: 100%; } }

.footer { background: var(--night); color: rgba(255, 255, 255, 0.62); padding: clamp(56px, 8vw, 96px) 0 40px; font-size: 0.92rem; }
.footer-grid { display: grid; gap: 36px 28px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.footer-grid > * { min-width: 0; overflow-wrap: anywhere; }
@media (min-width: 900px) { .footer-grid { grid-template-columns: 1.6fr repeat(4, 1fr); } }
.footer-brand { grid-column: 1 / -1; }
@media (min-width: 900px) { .footer-brand { grid-column: auto; } }
.footer-brand img { height: 30px; width: auto; margin-bottom: 16px; }
.footer-brand p { max-width: 30ch; }
.footer-fine { margin-top: 10px; font-size: 0.8rem; color: rgba(255, 255, 255, 0.4); }
.footer h3 { color: #fff; font-family: var(--body); font-size: 0.85rem; font-weight: 600; letter-spacing: 0; margin-bottom: 14px; }
.footer-grid a { display: block; color: rgba(255, 255, 255, 0.62); text-decoration: none; padding: 5px 0; }
.footer-grid a:hover { color: #fff; }
.footer-bottom { margin-top: 48px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, 0.1); display: flex; flex-wrap: wrap; gap: 14px 24px; justify-content: space-between; align-items: center; font-size: 0.82rem; color: rgba(255, 255, 255, 0.4); }
.footer-langs { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 16px; }
.footer-langs a { text-decoration: none; color: rgba(255, 255, 255, 0.5); }
.footer-langs a[aria-current] { color: #fff; }

/* ------------------------------------------------ reveals (used sparingly) */
.js .r-line { overflow: hidden; padding-bottom: 0.14em; margin-bottom: -0.14em; }
.js .r-up { opacity: 0; transform: translateY(24px); }
.js .r-up.in { opacity: 1; transform: none; transition: opacity 0.8s var(--ease), transform 0.9s var(--ease); }
/* the clip sits on the image, not the box: a fully clipped box never intersects, so it could never be observed */
.js .media.reveal-clip img { clip-path: none; }
.js .media.reveal-clip.in img { clip-path: inset(0 0 0 0); }
.js .h-split .r-l { transform: translateY(108%); transition: transform 0.9s var(--ease); transition-delay: calc(var(--i, 0) * 90ms); }
.js .h-split.in .r-l { transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001s !important; animation-iteration-count: 1 !important; transition-duration: 0.001s !important; }
  .js .r-up { opacity: 1; transform: none; }
  .js .media.reveal-clip img { clip-path: none; transition: none; }
  .js .pmark .piece { opacity: 1; animation: none; }
  .js .pmark.in { animation: none; }
  .js .h-split .r-l { transform: none; transition: none; }
  .hero-bg img { transform: none; }
}

/* ------------------------------------------------ support: the homeowner guides, front-facing */
.sup-hero { padding: calc(var(--nav-h) + clamp(40px, 8vw, 88px)) 0 clamp(28px, 5vw, 56px); text-align: center; }
.sup-hero h1 { max-width: 16ch; margin-inline: auto; }
.sup-hero .lede { margin: 1rem auto 0; }
.sup-search { position: relative; max-width: 720px; margin: 2rem auto 0; }
.sup-search input { width: 100%; font: inherit; font-size: 1.1rem; padding: 18px 56px 18px 56px; border-radius: 999px; border: 1.5px solid var(--line); background: #fff; color: var(--ink); box-shadow: 0 14px 40px rgba(21, 21, 26, 0.08); transition: border-color 0.2s, box-shadow 0.2s; -webkit-appearance: none; appearance: none; }
.sup-search input:focus { outline: none; border-color: var(--signal); box-shadow: 0 14px 40px rgba(30, 156, 215, 0.18); }
.sup-search input::-webkit-search-cancel-button { display: none; }
.sup-search-ic, .sup-clear { position: absolute; top: 50%; translate: 0 -50%; width: 40px; height: 40px; display: grid; place-items: center; color: var(--muted); }
.sup-search-ic { left: 12px; pointer-events: none; }
.sup-search-ic svg, .sup-clear svg { width: 22px; height: 22px; }
.sup-clear { right: 10px; border-radius: 50%; }
.sup-clear:hover { background: var(--paper-2); color: var(--ink); }
.sup-ic { width: 44px; height: 44px; border-radius: 13px; background: var(--paper-2); color: var(--deep); display: grid; place-items: center; flex-shrink: 0; }
.sup-ic svg { width: 22px; height: 22px; }
.sup-ic-lg { width: 60px; height: 60px; border-radius: 18px; }
.sup-ic-lg svg { width: 30px; height: 30px; }
.sup-topics { display: grid; gap: 14px; grid-template-columns: repeat(2, 1fr); margin-top: 1.6rem; }
@media (min-width: 700px) { .sup-topics { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .sup-topics { grid-template-columns: repeat(5, 1fr); } }
.sup-topic { display: grid; gap: 12px; justify-items: start; text-align: left; padding: 20px; border-radius: var(--r); background: #fff; border: 1px solid var(--line); transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.2s; }
.sup-topic:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(21, 21, 26, 0.08); border-color: rgba(30, 156, 215, 0.35); }
.sup-topic-t { font-family: var(--display); font-weight: 600; font-size: 1.02rem; color: var(--ink); letter-spacing: -0.01em; line-height: 1.2; }
.sup-topic-n { font-size: 0.82rem; color: var(--muted); }
.sup-topic-all .sup-ic { background: var(--ink); color: #fff; }
.sup-grid { display: grid; gap: 14px; }
@media (min-width: 700px) { .sup-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .sup-grid { grid-template-columns: repeat(3, 1fr); } }
.sup-card { display: flex; gap: 16px; align-items: flex-start; padding: 20px; border-radius: var(--r); background: #fff; border: 1px solid var(--line); text-decoration: none; color: inherit; transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease); }
.sup-card:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(21, 21, 26, 0.08); }
.sup-card-body { display: grid; gap: 6px; min-width: 0; }
.sup-card-t { font-family: var(--display); font-weight: 600; color: var(--ink); font-size: 1.05rem; letter-spacing: -0.01em; line-height: 1.25; }
.sup-card-s { font-size: 0.92rem; color: var(--charcoal); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sup-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.sup-pills .pill { font-size: 0.72rem; padding: 3px 9px; }
.sup-results, .sup-browse { scroll-margin-top: calc(var(--nav-h) + 16px); }
.sup-results { padding-block: clamp(24px, 4vw, 48px) 0; }
.sup-results-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-bottom: 1.4rem; }
.sup-results-head h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); }
.sup-count { font-family: var(--mono); font-size: 0.8rem; color: var(--muted); }
.sup-results-head .btn { margin-left: auto; }
.sup-empty { padding: 40px 0; }
.sup-empty p { color: var(--muted); margin-top: 0.4em; }
.sup-browse h2, .sup-popular h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); }
.sup-popular .sup-grid { margin-top: 1.6rem; }
.sup-contact-grid { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .sup-contact-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .sup-contact-grid { grid-template-columns: repeat(4, 1fr); } }
.sup-door { display: grid; gap: 10px; align-content: start; padding: 24px; border-radius: var(--r); background: #fff; border: 1px solid var(--line); text-decoration: none; color: inherit; transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease); }
.sup-door:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(21, 21, 26, 0.08); }
.sup-door h3 { font-size: 1.15rem; }
.sup-door p { font-size: 0.95rem; }
.sup-door .link { margin-top: 4px; align-self: start; width: max-content; }
/* article */
.sup-article-head { padding: calc(var(--nav-h) + clamp(28px, 5vw, 56px)) 0 clamp(20px, 3vw, 36px); }
.sup-crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 0.9rem; color: var(--muted); margin-bottom: 1.4rem; }
.sup-crumbs a { color: var(--deep); text-decoration: none; }
.sup-crumbs a:hover { text-decoration: underline; }
.sup-article-title { display: flex; gap: 18px; align-items: flex-start; }
.sup-article-title h1 { font-size: clamp(2rem, 5vw, 3.4rem); margin-bottom: 8px; }
.sup-article-head .lede { margin-top: 1.2rem; }
.sup-article { padding-bottom: clamp(48px, 7vw, 96px); }
.sup-article-grid { display: grid; gap: 40px; }
@media (min-width: 1000px) { .sup-article-grid { grid-template-columns: minmax(0, 1fr) 300px; gap: 64px; align-items: start; } .sup-side { position: sticky; top: calc(var(--nav-h) + 20px); } }
.sup-body { max-width: 68ch; }
.sup-body h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin: 2.2rem 0 0.8rem; }
.sup-body p { margin-bottom: 1em; }
.sup-before { padding: 20px 22px; border-radius: var(--r-sm); background: var(--paper-2); margin-bottom: 1rem; }
.sup-before h2 { font-size: 1rem; margin: 0 0 0.6rem; }
.sup-list { padding-left: 1.2em; display: grid; gap: 6px; margin-bottom: 1.2em; }
.sup-steps { list-style: none; counter-reset: step; display: grid; gap: 14px; margin: 0.4rem 0 1.4rem; }
.sup-steps li { position: relative; padding-left: 48px; }
.sup-steps li::before { counter-increment: step; content: counter(step); position: absolute; left: 0; top: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--ink); color: #fff; font-family: var(--mono); font-size: 0.85rem; display: grid; place-items: center; }
.sup-step-t { display: block; padding-top: 4px; }
.sup-controls { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
/* a control is an illustration of what the screen shows, never a live button (HOMEOWNER_GUIDE_CONTRACT) */
.sup-control { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 8px; border-radius: 10px; background: var(--paper-2); border: 1px solid var(--line); font-size: 0.9rem; color: var(--ink); font-weight: 500; }
.sup-control svg { width: 18px; height: 18px; color: var(--deep); }
.sup-note { border-left: 3px solid var(--signal); background: rgba(168, 224, 232, 0.16); padding: 14px 18px; border-radius: 0 var(--r-sm) var(--r-sm) 0; margin: 0.4rem 0 1.4rem; }
.sup-note strong { display: block; color: var(--ink); margin-bottom: 4px; }
.sup-note p { margin: 0; font-size: 0.97rem; }
.sup-updated { margin-top: 2.4rem; }
.sup-side { display: grid; gap: 14px; }
.sup-side-box { padding: 20px 22px; border-radius: var(--r); background: #fff; border: 1px solid var(--line); }
.sup-side-box h3 { font-size: 0.85rem; font-family: var(--body); color: var(--muted); font-weight: 600; margin-bottom: 10px; }
.sup-toc { list-style: none; display: grid; gap: 8px; font-size: 0.93rem; }
.sup-toc a { color: var(--ink); text-decoration: none; }
.sup-toc a:hover { color: var(--deep); }
.sup-open { display: grid; gap: 8px; text-decoration: none; color: inherit; }
.sup-open strong { color: var(--ink); }
.sup-open:hover { border-color: rgba(30, 156, 215, 0.4); }

/* ------------------------------------------------ contact form */
.ct-form { display: grid; gap: 18px; padding: clamp(22px, 3vw, 34px); border-radius: var(--r); background: #fff; border: 1px solid var(--line); box-shadow: 0 24px 60px rgba(21, 21, 26, 0.08); }
.ct-grid { display: grid; gap: 18px; }
@media (min-width: 640px) { .ct-grid { grid-template-columns: 1fr 1fr; } }
.ct-field { display: grid; gap: 6px; }
.ct-field > span { font-size: 0.88rem; font-weight: 600; color: var(--ink); }
.ct-field input, .ct-field select, .ct-field textarea { font: inherit; font-size: 1rem; padding: 12px 14px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--paper); color: var(--ink); width: 100%; -webkit-appearance: none; appearance: none; }
.ct-field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%234a4a52' stroke-width='1.6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; }
.ct-field textarea { resize: vertical; min-height: 150px; }
.ct-field input:focus, .ct-field select:focus, .ct-field textarea:focus { outline: none; border-color: var(--signal); box-shadow: 0 0 0 4px rgba(30, 156, 215, 0.14); }
.ct-field small { font-size: 0.82rem; color: var(--muted); }
.ct-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ct-consent { display: flex; gap: 12px; align-items: flex-start; font-size: 0.9rem; color: var(--charcoal); }
.ct-consent input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--deep); flex-shrink: 0; }
.ct-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ct-status { font-size: 0.9rem; color: var(--muted); }
.ct-done { padding: 22px; border-radius: var(--r-sm); background: rgba(168, 224, 232, 0.2); border: 1px solid rgba(30, 156, 215, 0.25); }
.ct-done h3, .ct-err h3 { margin-bottom: 6px; }
.ct-done p + p { margin-top: 8px; }
.ct-err { padding: 22px; border-radius: var(--r-sm); background: #fff4e0; border: 1px solid rgba(138, 90, 0, 0.2); display: grid; gap: 10px; justify-items: start; }
.ct-aside { margin-top: 2rem; padding: 18px 20px; border-radius: var(--r-sm); background: var(--paper-2); display: grid; gap: 8px; justify-items: start; }