/* ==========================================================================
   SCROLLSTOP MEDIA  |  sx.css
   One stylesheet for the whole site. Every class uses the sx- prefix.
   Sections:
     01 Tokens          06 Hero + brain         11 How it works
     02 Base            07 Why panel            12 Contact + form
     03 Logo            08 Proof / annotations  13 Footer
     04 Buttons         09 Service cards        14 Sub-page pieces + openers
     05 Header          10 CTA / rewind         15 Intro + dive, cursor, motion prefs
   ========================================================================== */

/* 01 TOKENS ---------------------------------------------------------------- */
:root {
  /* Brand colors. Only these three, their tints and shades, and pure white. */
  --sx-ink: #17181C;
  --sx-ink-2: #212329;        /* ink tint, raised surfaces on dark */
  --sx-ink-3: #2E3038;        /* ink tint, borders on dark */
  --sx-red: #E8402A;
  --sx-red-dark: #C4311D;     /* red shade, small red text on light (AA 5.1:1) */
  --sx-red-light: #EE6A58;    /* red tint, small red text on ink (AA 5.8:1) */
  --sx-paper: #F7F6F3;
  --sx-paper-2: #ECEAE4;      /* paper shade, borders on light */
  --sx-white: #FFFFFF;
  --sx-mute: #5B5D66;         /* ink tint, secondary text on light */
  --sx-mute-dark: #A9ABB3;    /* ink tint, secondary text on dark */

  --sx-font-head: "Unbounded", "Arial Black", system-ui, sans-serif;
  --sx-font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --sx-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --sx-radius: 14px;
  --sx-radius-sm: 8px;
  --sx-gutter: clamp(16px, 4vw, 40px);
  --sx-max: 1180px;
  --sx-header-h: 64px;
  --sx-ease-out: cubic-bezier(.16, 1, .3, 1);   /* snappy in, soft out */
}

/* 02 BASE ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--sx-header-h) + 12px); }
body {
  margin: 0; background: var(--sx-paper); color: var(--sx-ink);
  font-family: var(--sx-font-body); font-size: 17px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 3px solid var(--sx-red); outline-offset: 3px; border-radius: 4px; }
.sx-on-dark :focus-visible, .sx-footer :focus-visible { outline-color: var(--sx-white); }

.sx-skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 2000; background: var(--sx-ink); color: var(--sx-white);
  padding: 10px 16px; border-radius: 8px; font-weight: 600;
}
.sx-skip-link:focus { top: 12px; }
.sx-visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0; padding: 0; margin: -1px;
}

.sx-container { width: 100%; max-width: var(--sx-max); margin-inline: auto; padding-inline: var(--sx-gutter); }
.sx-section { padding-block: clamp(64px, 10vw, 128px); position: relative; }
.sx-section--paper { background: var(--sx-paper); }
.sx-section--white { background: var(--sx-white); }
.sx-section--ink, .sx-on-dark { background: var(--sx-ink); color: var(--sx-paper); }

.sx-h1, .sx-h2, .sx-h3 { font-family: var(--sx-font-head); font-weight: 800; line-height: 1.08; letter-spacing: -.02em; text-wrap: balance; }
.sx-h1 { font-size: clamp(34px, 5.4vw, 64px); font-weight: 900; }
.sx-h2 { font-size: clamp(28px, 4vw, 46px); }
.sx-h3 { font-size: clamp(19px, 2vw, 22px); font-weight: 700; line-height: 1.2; letter-spacing: -.01em; }
.sx-lede { font-size: clamp(18px, 1.6vw, 20px); color: var(--sx-mute); max-width: 56ch; }
.sx-on-dark .sx-lede, .sx-section--ink .sx-lede { color: var(--sx-mute-dark); }
.sx-mono, .sx-eyebrow { font-family: var(--sx-font-mono); font-size: 13px; letter-spacing: .04em; }
.sx-eyebrow { text-transform: uppercase; color: var(--sx-red-dark); font-weight: 700; display: block; margin-bottom: 16px; }
.sx-on-dark .sx-eyebrow, .sx-section--ink .sx-eyebrow { color: var(--sx-red-light); }
.sx-section__head { display: grid; gap: 16px; margin-bottom: clamp(36px, 5vw, 64px); max-width: 780px; }
.sx-prose p + p { margin-top: 1em; }
.sx-prose a { color: var(--sx-red-dark); font-weight: 600; }

/* Clearly labeled placeholder blocks (proof, blog posts, etc.) */
.sx-placeholder {
  border: 2px dashed var(--sx-paper-2); border-radius: var(--sx-radius); padding: 22px;
  font-family: var(--sx-font-mono); font-size: 13px; color: var(--sx-mute); background: transparent;
}
.sx-placeholder strong { color: var(--sx-red-dark); display: block; margin-bottom: 6px; text-transform: uppercase; letter-spacing: .06em; }
.sx-section--ink .sx-placeholder, .sx-on-dark .sx-placeholder { border-color: var(--sx-ink-3); color: var(--sx-mute-dark); }
.sx-section--ink .sx-placeholder strong, .sx-on-dark .sx-placeholder strong { color: var(--sx-red-light); }

/* 03 LOGO ------------------------------------------------------------------ */
/* Official construction: red rounded square, white down-triangle over a white bar,
   wordmark SCROLL (ink) STOP (red). Never recolor. On dark, wrap in .sx-logo-badge. */
.sx-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--sx-ink); }
.sx-logo__mark { width: 36px; height: 36px; flex: none; }
.sx-logo__word { font-family: var(--sx-font-head); font-weight: 900; font-size: 19px; /* 19px bold = large text, keeps red STOP at AA */ letter-spacing: -.01em; line-height: 1; white-space: nowrap; }
.sx-logo__word-scroll { color: var(--sx-ink); }
.sx-logo__word-stop { color: var(--sx-red); }
.sx-logo-badge { display: inline-flex; background: var(--sx-paper); padding: 10px 14px; border-radius: 12px; }

/* 04 BUTTONS --------------------------------------------------------------- */
/* White on brand red is 4.04:1, so red buttons always use 19px+ bold text
   (WCAG "large text", needs 3:1). Do not shrink the label below 19px bold. */
.sx-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px;
  padding: 14px 26px; border-radius: 999px; font-family: var(--sx-font-body); font-weight: 700; font-size: 19px;
  line-height: 1.1; text-decoration: none; text-align: center; border: 2px solid transparent;
  transition: transform .3s var(--sx-ease-out), background-color .2s, box-shadow .3s;
}
.sx-btn--red { background: var(--sx-red); color: var(--sx-white); }
.sx-btn--red:hover { background: var(--sx-red-dark); }
.sx-btn--ghost { border-color: currentColor; font-size: 16px; min-height: 46px; padding: 10px 20px; }
.sx-btn--ghost:hover { background: var(--sx-ink); color: var(--sx-paper); border-color: var(--sx-ink); }
.sx-on-dark .sx-btn--ghost:hover, .sx-section--ink .sx-btn--ghost:hover { background: var(--sx-paper); color: var(--sx-ink); border-color: var(--sx-paper); }
.sx-btn--big { font-size: clamp(20px, 2.2vw, 26px); padding: 22px 44px; min-height: 72px; box-shadow: 0 14px 40px rgba(232, 64, 42, .35); }
.sx-btn--sm { font-size: 19px; min-height: 44px; padding: 8px 18px; }
.sx-link-arrow { font-weight: 600; text-decoration: none; border-bottom: 2px solid var(--sx-red); padding-bottom: 2px; }
.sx-link-arrow::after { content: " \2192"; }

/* 05 HEADER ---------------------------------------------------------------- */
.sx-header {
  position: sticky; top: 0; z-index: 100; height: var(--sx-header-h); background: var(--sx-paper);
  border-bottom: 1px solid var(--sx-paper-2);
}
.sx-header__inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.sx-nav { display: flex; align-items: center; gap: 4px; }
.sx-nav__link {
  font-size: 15px; font-weight: 600; text-decoration: none; padding: 10px 11px; border-radius: 8px; position: relative;
}
.sx-nav__link::after {
  content: ""; position: absolute; left: 11px; right: 11px; bottom: 5px; height: 2px; background: var(--sx-red);
  transform: scaleX(0); transform-origin: left; transition: transform .3s var(--sx-ease-out);
}
.sx-nav__link:hover::after, .sx-nav__link[aria-current="page"]::after { transform: scaleX(1); }
.sx-header__cta { margin-left: 10px; }
.sx-nav-toggle { display: none; width: 46px; height: 46px; border-radius: 10px; align-items: center; justify-content: center; }
.sx-nav-toggle span, .sx-nav-toggle span::before, .sx-nav-toggle span::after {
  display: block; width: 22px; height: 2.5px; background: var(--sx-ink); border-radius: 2px; position: relative; transition: transform .3s var(--sx-ease-out);
}
.sx-nav-toggle span::before, .sx-nav-toggle span::after { content: ""; position: absolute; left: 0; }
.sx-nav-toggle span::before { top: -7px; } .sx-nav-toggle span::after { top: 7px; }
.sx-nav-toggle[aria-expanded="true"] span { background: transparent; }
.sx-nav-toggle[aria-expanded="true"] span::before { transform: translateY(7px) rotate(45deg); }
.sx-nav-toggle[aria-expanded="true"] span::after { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 1180px) {
  .sx-nav-toggle { display: inline-flex; }
  .sx-nav {
    position: fixed; inset: var(--sx-header-h) 0 auto 0; background: var(--sx-paper); flex-direction: column; align-items: stretch;
    padding: 12px var(--sx-gutter) 24px; gap: 0; border-bottom: 1px solid var(--sx-paper-2);
    max-height: calc(100dvh - var(--sx-header-h)); overflow: auto;
    visibility: hidden; opacity: 0; transform: translateY(-8px); transition: opacity .25s, transform .3s var(--sx-ease-out), visibility 0s .3s;
  }
  .sx-nav.is-open { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
  .sx-nav__link { font-size: 18px; padding: 14px 4px; border-bottom: 1px solid var(--sx-paper-2); border-radius: 0; }
  .sx-nav__link::after { display: none; }
  .sx-header__cta { margin: 18px 0 0; }
}

/* 06 HERO + BRAIN ---------------------------------------------------------- */
.sx-hero { background: var(--sx-ink); color: var(--sx-paper); position: relative; overflow: hidden; padding-block: clamp(28px, 4vw, 48px) clamp(40px, 5vw, 64px); min-height: calc(100svh - var(--sx-header-h)); display: flex; align-items: center; }
.sx-hero__particles { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: .5; }
.sx-hero__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(24px, 4vw, 48px); align-items: center; width: 100%; }
.sx-hero__copy { display: grid; gap: 18px; justify-items: start; }
.sx-hero .sx-h1 { font-size: clamp(32px, 4.4vw, 54px); }
.sx-hero .sx-lede { font-size: clamp(17px, 1.4vw, 19px); }
.sx-hero__caption { font-family: var(--sx-font-mono); font-size: 13px; color: var(--sx-mute-dark); border-left: 2px solid var(--sx-red); padding-left: 12px; max-width: 34ch; }
.sx-hero__hint { font-family: var(--sx-font-mono); font-size: 13px; color: var(--sx-red-light); display: none; }
@media (min-width: 1024px) {
  .sx-hero__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .sx-hero__hint { display: block; }
}

.sx-brain { position: relative; width: 100%; max-width: 720px; margin-inline: auto; }
.sx-brain__stage { position: relative; aspect-ratio: 600 / 440; transform-origin: 50% 50%; }
.sx-brain__svg { width: 100%; height: 100%; overflow: visible; }
.sx-brain__outline { fill: none; stroke: var(--sx-paper); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.sx-brain__fold { fill: none; stroke: var(--sx-paper); stroke-width: 1.5; stroke-linecap: round; opacity: .42; }
.sx-brain__glow { opacity: .55; transition: opacity .4s; }
.sx-brain__glow.is-active { opacity: 1; }
/* Neural links: thin lines between the six regions. Sparks travel along them (sx-motion.js, section 03). */
.sx-net { pointer-events: none; }
.sx-net__link { fill: none; stroke: var(--sx-paper); stroke-width: 1; stroke-linecap: round; opacity: .2; vector-effect: non-scaling-stroke; transition: opacity .3s, stroke .3s; }
.sx-net__link.is-hot { stroke: var(--sx-red-light); opacity: .95; stroke-width: 1.5; }
.sx-net.has-hot .sx-net__link:not(.is-hot) { opacity: .1; }
.sx-net__node { fill: var(--sx-red-light); opacity: .8; }
.sx-net__fire { opacity: 0; }
.sx-net__spark { fill: var(--sx-red-light); stroke: rgba(232, 64, 42, .35); stroke-width: 4; opacity: 0; }
/* Region click: a red circle floods out from the region before the page changes (added by JS). */
.sx-flood { position: fixed; width: 80px; height: 80px; margin: -40px; border-radius: 50%; background: var(--sx-red); z-index: 890; pointer-events: none; transform: scale(0); }
.sx-brain.is-diving .sx-regions { pointer-events: none; }

/* Region list: hotspots on desktop, swipe carousel on mobile (same markup). */
.sx-regions { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px var(--sx-gutter) 14px; margin-inline: calc(var(--sx-gutter) * -1); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.sx-regions::-webkit-scrollbar { display: none; }
.sx-region {
  flex: 0 0 78%; max-width: 320px; scroll-snap-align: center; position: relative;
  background: var(--sx-ink-2); border: 1px solid var(--sx-ink-3); border-radius: var(--sx-radius);
  display: flex; align-items: stretch; transition: border-color .3s;
}
.sx-region.is-active { border-color: var(--sx-red); }
.sx-region__link { flex: 1; display: grid; gap: 4px; padding: 16px 8px 16px 18px; text-decoration: none; min-height: 96px; align-content: center; }
.sx-region__name { font-family: var(--sx-font-mono); font-weight: 700; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; color: var(--sx-white); }
.sx-region__name::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--sx-red); margin-right: 9px; }
.sx-region__desc { font-size: 14.5px; line-height: 1.4; color: var(--sx-mute-dark); }
.sx-region__eye {
  flex: none; width: 52px; display: grid; place-items: center; border-left: 1px solid var(--sx-ink-3); color: var(--sx-red-light);
  border-radius: 0 var(--sx-radius) var(--sx-radius) 0; transition: background-color .2s, color .2s;
}
.sx-region__eye:hover { background: var(--sx-red); color: var(--sx-white); }
.sx-region__eye svg { width: 24px; height: 24px; }
.sx-regions__hint { font-family: var(--sx-font-mono); font-size: 12px; color: var(--sx-mute-dark); text-align: center; margin-top: 2px; }

@media (max-width: 767px) {
  /* Phones: headline, then a small brain, then the swipe carousel, then the rest of the copy. */
  .sx-hero { align-items: flex-start; }
  .sx-hero__grid { gap: 16px; }
  .sx-hero__copy { display: contents; }
  .sx-hero__copy .sx-eyebrow { order: 1; margin-bottom: 0; }
  .sx-hero__copy .sx-h1 { order: 2; }
  .sx-brain { order: 3; max-width: none; }
  .sx-brain__stage { aspect-ratio: auto; }
  .sx-brain__svg { width: min(64vw, 250px); height: auto; margin-inline: auto; }
  .sx-hero__copy .sx-lede { order: 4; }
  .sx-hero__copy .sx-hero__caption { order: 5; }
}
@media (min-width: 768px) {
  .sx-regions { position: absolute; inset: 0; display: block; overflow: visible; padding: 0; margin: 0; pointer-events: none; }
  .sx-regions__hint { display: none; }
  .sx-region {
    position: absolute; left: var(--x); top: var(--y); max-width: none; pointer-events: auto;
    transform: translate(-13px, -50%); border-radius: 999px; background: rgba(23, 24, 28, .92);
    align-items: center; white-space: nowrap;
  }
  .sx-region--left { transform: translate(calc(-100% + 13px), -50%); flex-direction: row-reverse; }
  .sx-region__link { padding: 7px 4px 7px 10px; min-height: 0; display: block; }
  .sx-region--left .sx-region__link { padding: 7px 10px 7px 4px; }
  .sx-region__name { font-size: 11.5px; display: inline-flex; align-items: center; position: relative; }
  .sx-region--left .sx-region__name { flex-direction: row-reverse; }
  .sx-region--left .sx-region__name::before { margin: 0 0 0 9px; }
  /* The ping is a ring that scales and fades (transform + opacity only, so it never repaints). */
  .sx-region__name::after { content: ""; position: absolute; left: 0; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%; border: 1.5px solid var(--sx-red); animation: sx-ping 2.4s infinite; }
  .sx-region--left .sx-region__name::after { left: auto; right: 0; }
  .sx-region__desc {
    position: absolute; left: 0; top: calc(100% + 8px); width: 230px; white-space: normal; background: var(--sx-paper); color: var(--sx-ink);
    padding: 10px 12px; border-radius: 10px; font-size: 13.5px; opacity: 0; visibility: hidden; transform: translateY(-4px);
    transition: opacity .2s, transform .3s var(--sx-ease-out), visibility 0s .2s; z-index: 5; pointer-events: none;
  }
  .sx-region--left .sx-region__desc { left: auto; right: 0; }
  .sx-region:hover, .sx-region:focus-within { border-color: var(--sx-red); z-index: 6; }
  .sx-region:hover .sx-region__desc, .sx-region:focus-within .sx-region__desc { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .sx-region__eye { width: 34px; height: 34px; border-left: 0; border-radius: 50%; margin: 0 3px; }
  .sx-region__eye svg { width: 19px; height: 19px; }
}
@keyframes sx-ping { 0% { transform: scale(1); opacity: .8; } 70%, 100% { transform: scale(3.2); opacity: 0; } }

/* 07 WHY PANEL ("Why does the brain respond this way?") -------------------- */
.sx-why-backdrop { position: fixed; inset: 0; background: rgba(23, 24, 28, .6); z-index: 300; opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s .3s; }
.sx-why-backdrop.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }
.sx-why {
  position: fixed; z-index: 310; background: var(--sx-paper); color: var(--sx-ink); padding: 28px 24px 32px; overflow: auto;
  left: 0; right: 0; bottom: 0; max-height: 82dvh; border-radius: 22px 22px 0 0;
  transform: translateY(105%); visibility: hidden; transition: transform .5s var(--sx-ease-out), visibility 0s .5s;
}
.sx-why.is-open { transform: none; visibility: visible; transition-delay: 0s; }
@media (min-width: 768px) {
  .sx-why { left: auto; top: 0; width: min(440px, 92vw); max-height: none; border-radius: 22px 0 0 22px; padding: 40px 36px; transform: translateX(105%); }
}
.sx-why__close { position: absolute; top: 14px; right: 14px; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-size: 26px; line-height: 1; }
.sx-why__close:hover { background: var(--sx-paper-2); }
.sx-why__title { font-family: var(--sx-font-head); font-weight: 800; font-size: 22px; line-height: 1.15; padding-right: 44px; margin-bottom: 20px; }
.sx-why__item { display: grid; gap: 14px; }
.sx-why__item[hidden] { display: none; }
.sx-why__tag { font-family: var(--sx-font-mono); font-size: 13px; font-weight: 700; color: var(--sx-red-dark); text-transform: uppercase; letter-spacing: .06em; }
.sx-why__principle { font-family: var(--sx-font-head); font-weight: 700; font-size: 19px; }

/* 08 PROOF / ANNOTATIONS --------------------------------------------------- */
/* .sx-annot is the red "we just did this to you" label. Reused in every section. */
.sx-annot {
  display: inline-flex; align-items: flex-start; gap: 10px; font-family: var(--sx-font-mono); font-size: 13px; line-height: 1.45;
  color: var(--sx-red-dark); max-width: 36ch;
}
.sx-annot::before { content: ""; flex: none; width: 26px; height: 2px; background: currentColor; margin-top: 9px; }
.sx-annot b { font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.sx-section--ink .sx-annot, .sx-on-dark .sx-annot { color: var(--sx-red-light); }
.sx-proof__grid { display: grid; gap: clamp(28px, 5vw, 64px); align-items: start; }
@media (min-width: 900px) { .sx-proof__grid { grid-template-columns: 5fr 6fr; } .sx-proof__replay { position: sticky; top: calc(var(--sx-header-h) + 32px); } }
.sx-proof__replay { display: grid; gap: 18px; justify-items: start; }
.sx-proof__list { display: grid; gap: 14px; counter-reset: sx-proof; }
.sx-proof__item { background: var(--sx-white); border: 1px solid var(--sx-paper-2); border-radius: var(--sx-radius); padding: 20px 22px; display: grid; gap: 6px; position: relative; }
.sx-proof__item::before { counter-increment: sx-proof; content: "0" counter(sx-proof); font-family: var(--sx-font-mono); font-size: 13px; color: var(--sx-mute); position: absolute; right: 18px; top: 16px; }
.sx-proof__name { font-family: var(--sx-font-mono); font-weight: 700; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--sx-red-dark); }
.sx-proof__what { font-weight: 600; font-size: 18px; line-height: 1.35; padding-right: 30px; }
.sx-proof__where { font-size: 15px; color: var(--sx-mute); }

/* Mini screen: a small looping replay of the search intro */
.sx-mini { width: min(100%, 420px); aspect-ratio: 16 / 10.5; background: var(--sx-white); border-radius: 14px; border: 1px solid var(--sx-paper-2); box-shadow: 0 18px 50px rgba(23, 24, 28, .12); overflow: hidden; position: relative; }
.sx-mini__bar { height: 13%; display: flex; align-items: center; padding-inline: 5%; border-bottom: 1px solid var(--sx-paper-2); }
.sx-mini__search { width: 62%; height: 52%; border-radius: 99px; border: 1.5px solid var(--sx-paper-2); }
.sx-mini__rows { padding: 5% 6%; display: grid; gap: 9%; position: absolute; left: 0; right: 0; top: 13%; }
.sx-mini__row { display: grid; gap: 5px; }
.sx-mini__row i { display: block; height: 7px; border-radius: 4px; background: var(--sx-paper-2); }
.sx-mini__row i:nth-child(1) { width: 24%; } .sx-mini__row i:nth-child(2) { width: 58%; height: 10px; } .sx-mini__row i:nth-child(3) { width: 82%; }
.sx-mini__row--us { outline: 2px solid transparent; outline-offset: 7px; border-radius: 4px; }
.sx-mini__row--us i:nth-child(2) { background: var(--sx-red); }
.sx-mini__wipe { position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px; border-radius: 8px; background: var(--sx-red); transform: scale(0); }
.sx-mini__label { position: absolute; left: 8px; bottom: 7px; background: var(--sx-white); padding: 2px 6px; border-radius: 4px; font-family: var(--sx-font-mono); font-size: 11px; color: var(--sx-mute); letter-spacing: .08em; }

/* 09 SERVICE CARDS --------------------------------------------------------- */
.sx-cards { display: grid; gap: 18px; perspective: 1200px; align-items: start; }
@media (min-width: 700px) { .sx-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .sx-cards { grid-template-columns: repeat(3, 1fr); } }
.sx-card {
  background: var(--sx-white); border: 1px solid var(--sx-paper-2); border-radius: var(--sx-radius); position: relative;
  transform-style: preserve-3d; transition: box-shadow .4s, border-color .3s;
}
.sx-card::before { content: ""; position: absolute; left: 22px; top: 0; width: 44px; height: 4px; background: var(--sx-red); border-radius: 0 0 4px 4px; }
.sx-card:hover, .sx-card.is-open { box-shadow: 0 24px 60px rgba(23, 24, 28, .13); border-color: var(--sx-ink); }
.sx-card__toggle { display: grid; gap: 12px; width: 100%; text-align: left; padding: 30px 24px 22px; border-radius: var(--sx-radius); }
.sx-card__icon { width: 40px; height: 40px; color: var(--sx-ink); }
.sx-card__icon .sx-accent { color: var(--sx-red); }
.sx-card__line { color: var(--sx-mute); font-size: 16px; min-height: 3.1em; }
.sx-card__foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-family: var(--sx-font-mono); font-size: 13.5px; font-weight: 700; padding-top: 14px; border-top: 1px solid var(--sx-paper-2); }
.sx-card__more { color: var(--sx-red-dark); display: inline-flex; align-items: center; gap: 6px; }
.sx-card__more::after { content: "+"; font-size: 20px; line-height: 1; transition: transform .3s var(--sx-ease-out); }
.sx-card.is-open .sx-card__more::after { transform: rotate(45deg); }
.sx-card__details { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--sx-ease-out); }
.sx-card.is-open .sx-card__details { grid-template-rows: 1fr; }
.sx-card__details-inner { overflow: hidden; min-height: 0; visibility: hidden; transition: visibility 0s .5s; }
.sx-card.is-open .sx-card__details-inner { visibility: visible; transition-delay: 0s; }
.sx-card__body { padding: 0 24px 24px; display: grid; gap: 14px; }
.sx-card__note { font-size: 14px; color: var(--sx-mute); }

/* Price tiers: used inside cards and on service + pricing pages */
.sx-tier { border: 1px solid var(--sx-paper-2); border-radius: 12px; padding: 16px; display: grid; gap: 8px; background: var(--sx-paper); position: relative; }
.sx-tier--popular { border: 2px solid var(--sx-red); background: var(--sx-white); }
.sx-tier__badge { position: absolute; top: -11px; right: 12px; background: var(--sx-ink); color: var(--sx-white); font-family: var(--sx-font-mono); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 4px 9px; border-radius: 99px; }
.sx-tier__head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.sx-tier__name { font-weight: 700; }
.sx-tier__price { font-family: var(--sx-font-mono); font-weight: 700; font-size: 18px; white-space: nowrap; }
.sx-tier__price small { font-size: 12.5px; font-weight: 500; color: var(--sx-mute); }
.sx-tier__sub { font-family: var(--sx-font-mono); font-size: 12.5px; color: var(--sx-mute); }
.sx-tier__items { display: grid; gap: 4px; font-size: 14.5px; color: var(--sx-mute); }
.sx-tier__items li { padding-left: 18px; position: relative; }
.sx-tier__items li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 7px; height: 7px; background: var(--sx-red); clip-path: polygon(0 0, 100% 0, 50% 100%); }
.sx-tiers { display: grid; gap: 18px; align-items: start; }
@media (min-width: 760px) { .sx-tiers { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } }
.sx-tiers .sx-tier { padding: 24px; background: var(--sx-white); gap: 12px; }
.sx-tiers .sx-tier__head { display: grid; gap: 4px; }
.sx-tiers .sx-tier__name { font-family: var(--sx-font-head); font-size: 18px; }
.sx-tiers .sx-tier__price { font-size: 30px; }
.sx-tiers .sx-tier__items { font-size: 16px; gap: 7px; }
.sx-tiers__note { font-size: 15px; color: var(--sx-mute); margin-top: 18px; }

/* 10 CTA / REWIND ---------------------------------------------------------- */
.sx-cta { min-height: 100svh; display: grid; place-items: center; text-align: center; overflow: hidden; }
.sx-cta__inner { display: grid; gap: 26px; justify-items: center; }
.sx-cta__question { font-family: var(--sx-font-mono); font-size: 14px; color: var(--sx-red-light); letter-spacing: .06em; text-transform: uppercase; font-weight: 700; }
.sx-cta .sx-mini { width: min(78vw, 300px); box-shadow: 0 0 0 1px var(--sx-ink-3), 0 30px 80px rgba(0, 0, 0, .5); }
.sx-cta .sx-annot { text-align: left; }
.sx-cta__offer { font-size: clamp(19px, 2vw, 23px); color: var(--sx-paper); font-weight: 600; }
.sx-magnet { display: inline-block; padding: 26px; margin: -26px; }   /* the pull zone around the button */

/* 11 HOW IT WORKS ---------------------------------------------------------- */
.sx-how__grid { display: grid; gap: clamp(28px, 5vw, 72px); }
@media (min-width: 900px) { .sx-how__grid { grid-template-columns: 4fr 6fr; } .sx-how__head { position: sticky; top: calc(var(--sx-header-h) + 40px); align-self: start; } }
.sx-how__head { display: grid; gap: 16px; }
.sx-steps { position: relative; padding-left: 68px; }
.sx-steps__list { display: grid; gap: clamp(36px, 6vw, 72px); }
.sx-steps__track, .sx-steps__line { position: absolute; left: 22px; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; }
.sx-steps__track { background: var(--sx-paper-2); }
.sx-steps__line { background: var(--sx-red); transform-origin: top; }
.sx-step { position: relative; display: grid; gap: 8px; }
.sx-step__num {
  position: absolute; left: -68px; top: -6px; width: 47px; height: 47px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--sx-font-mono); font-weight: 700; font-size: 16px; background: var(--sx-paper); border: 3px solid var(--sx-paper-2);
  color: var(--sx-mute); transition: background-color .4s, border-color .4s, color .4s, transform .5s var(--sx-ease-out);
}
.sx-step.is-reached .sx-step__num { background: var(--sx-red); border-color: var(--sx-red); color: var(--sx-white); font-size: 19px; transform: scale(1.08); }
.sx-step__text { color: var(--sx-mute); max-width: 52ch; }
.sx-step__free { font-family: var(--sx-font-mono); font-size: 12.5px; font-weight: 700; color: var(--sx-red-dark); letter-spacing: .06em; text-transform: uppercase; }

/* 12 CONTACT + FORM -------------------------------------------------------- */
.sx-contact__grid { display: grid; gap: clamp(28px, 5vw, 64px); }
@media (min-width: 900px) { .sx-contact__grid { grid-template-columns: 5fr 7fr; } }
.sx-contact__info { display: grid; gap: 22px; align-content: start; }
.sx-contact__list { display: grid; gap: 14px; }
.sx-contact__list dt { font-family: var(--sx-font-mono); font-size: 12.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--sx-mute); }
.sx-contact__list dd { margin: 2px 0 0; font-weight: 600; font-size: 19px; }
.sx-contact__list a { text-decoration-color: var(--sx-red); text-underline-offset: 4px; }
.sx-form { position: relative; background: var(--sx-paper); border: 1px solid var(--sx-paper-2); border-radius: 20px; padding: clamp(20px, 3vw, 34px); display: grid; gap: 18px; overflow: hidden; }
.sx-section--paper .sx-form { background: var(--sx-white); }
.sx-form__row { display: grid; gap: 18px; }
@media (min-width: 620px) { .sx-form__row { grid-template-columns: 1fr 1fr; } }
.sx-field { display: grid; gap: 6px; }
.sx-field__label, .sx-form legend { font-weight: 600; font-size: 15px; }
.sx-field__opt { font-weight: 400; color: var(--sx-mute); }
.sx-field__input {
  font: inherit; font-size: 16px; color: var(--sx-ink); background: var(--sx-white); border: 1.5px solid #8b8d96; border-radius: 10px;
  padding: 12px 14px; width: 100%; min-height: 48px; transition: border-color .2s, box-shadow .2s;
}
.sx-field__input:focus { outline: none; border-color: var(--sx-red); box-shadow: 0 0 0 3px rgba(232, 64, 42, .25); }
.sx-field__input[aria-invalid="true"] { border-color: var(--sx-red-dark); border-width: 2px; }
.sx-field__error { font-size: 14px; color: var(--sx-red-dark); font-weight: 600; min-height: 0; }
textarea.sx-field__input { min-height: 110px; resize: vertical; }
.sx-form fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 10px; }
.sx-checks { display: flex; flex-wrap: wrap; gap: 8px; }
.sx-check { position: relative; }
.sx-check input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.sx-check span { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 15px; border: 1.5px solid #8b8d96; border-radius: 99px; font-size: 15px; font-weight: 500; background: var(--sx-white); transition: background-color .2s, color .2s, border-color .2s, transform .3s var(--sx-ease-out); }
.sx-check input:checked + span { background: var(--sx-ink); color: var(--sx-white); border-color: var(--sx-ink); }
.sx-check input:checked + span::before { content: ""; width: 9px; height: 9px; margin-right: 8px; background: var(--sx-red); clip-path: polygon(0 0, 100% 0, 50% 100%); }
.sx-check input:focus-visible + span { outline: 3px solid var(--sx-red); outline-offset: 2px; }
.sx-form__fine { font-size: 14px; color: var(--sx-mute); }
.sx-form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sx-form__signal { position: absolute; width: 1px; height: 1px; overflow: hidden; pointer-events: none; }
.sx-form-wrap { position: relative; min-width: 0; }
.sx-form__turnstile:empty { display: none; }
select.sx-field__input { appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer;
  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='%2317181C' stroke-width='1.6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; }
.sx-form__done {
  position: absolute; inset: 0; background: var(--sx-paper); display: grid; place-content: center; justify-items: center; gap: 14px;
  text-align: center; padding: 24px; visibility: hidden; opacity: 0;
}
.sx-form.is-sent .sx-form__done { visibility: visible; opacity: 1; }
.sx-form__done-title { font-family: var(--sx-font-head); font-weight: 800; font-size: 24px; }
.sx-map { width: min(100%, 360px); }
.sx-map__land { fill: var(--sx-paper-2); }
.sx-map__sea { fill: var(--sx-white); }
.sx-map__road { fill: none; stroke: var(--sx-white); stroke-width: 3; stroke-linecap: round; }
.sx-map__route { fill: none; stroke: var(--sx-ink); stroke-width: 1.5; stroke-dasharray: 4 5; opacity: .5; }
.sx-map__dot { fill: var(--sx-ink); }
.sx-map__label { font-family: var(--sx-font-mono); font-size: 10px; font-weight: 700; fill: var(--sx-ink); }
.sx-map__pin { fill: var(--sx-red); }
.sx-map__ring { fill: none; stroke: var(--sx-red); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }

/* 13 FOOTER ---------------------------------------------------------------- */
.sx-footer { background: var(--sx-ink); color: var(--sx-paper); padding-block: 56px 28px; }
.sx-footer__grid { display: grid; gap: 36px; }
@media (min-width: 820px) { .sx-footer__grid { grid-template-columns: 5fr 3fr 4fr; } }
.sx-footer__brand { display: grid; gap: 18px; justify-items: start; align-content: start; }
.sx-footer__tag { color: var(--sx-mute-dark); max-width: 34ch; font-size: 15.5px; }
.sx-footer__title { font-family: var(--sx-font-mono); font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--sx-mute-dark); margin-bottom: 12px; font-weight: 500; }
.sx-footer__links { display: grid; gap: 2px; }
.sx-footer__links--2col { grid-template-columns: 1fr 1fr; column-gap: 16px; }
.sx-footer__links a { text-decoration: none; display: inline-block; padding: 7px 0; font-size: 16px; }
.sx-footer__links a:hover { text-decoration: underline; text-decoration-color: var(--sx-red); text-underline-offset: 5px; text-decoration-thickness: 2px; }
.sx-footer__base { margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--sx-ink-3); display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; font-family: var(--sx-font-mono); font-size: 12.5px; color: var(--sx-mute-dark); }
/* Footer logo only: faint feed lines scroll behind the triangle, inside the red square. */
.sx-logo__feed { animation: sx-feed 2.6s linear infinite; }
@keyframes sx-feed { from { transform: translateY(0); } to { transform: translateY(-16px); } }

/* 14 SUB-PAGE PIECES + OPENERS --------------------------------------------- */
.sx-page-hero { background: var(--sx-ink); color: var(--sx-paper); padding-block: clamp(48px, 8vw, 100px); overflow: hidden; }
.sx-page-hero__grid { display: grid; gap: clamp(28px, 5vw, 56px); align-items: center; }
@media (min-width: 900px) { .sx-page-hero__grid { grid-template-columns: 6fr 5fr; } }
.sx-page-hero__copy { display: grid; gap: 20px; justify-items: start; }
.sx-page-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.sx-split { display: grid; gap: clamp(24px, 4vw, 56px); }
@media (min-width: 860px) { .sx-split { grid-template-columns: 1fr 1fr; } }
.sx-list { display: grid; gap: 14px; }
.sx-list li { padding-left: 28px; position: relative; }
.sx-list li::before { content: ""; position: absolute; left: 2px; top: .55em; width: 12px; height: 10px; background: var(--sx-red); clip-path: polygon(0 0, 100% 0, 50% 100%); }
.sx-list b { display: block; }
.sx-list span { color: var(--sx-mute); }
.sx-section--ink .sx-list span { color: var(--sx-mute-dark); }
.sx-brainnote { border-left: 4px solid var(--sx-red); background: var(--sx-white); border-radius: 0 var(--sx-radius) var(--sx-radius) 0; padding: 24px 26px; display: grid; gap: 10px; }
.sx-brainnote__tag { display: flex; gap: 8px; align-items: center; font-family: var(--sx-font-mono); font-size: 13px; font-weight: 700; color: var(--sx-red-dark); text-transform: uppercase; letter-spacing: .06em; }
.sx-brainnote__tag svg { width: 20px; height: 20px; }
.sx-band { background: var(--sx-ink); color: var(--sx-paper); text-align: center; padding-block: clamp(56px, 8vw, 96px); }
.sx-band__inner { display: grid; gap: 22px; justify-items: center; }
.sx-faq { display: grid; gap: 10px; max-width: 800px; }
.sx-faq details { background: var(--sx-white); border: 1px solid var(--sx-paper-2); border-radius: 12px; padding: 0 20px; }
.sx-faq summary { cursor: pointer; font-weight: 700; padding: 18px 0; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.sx-faq summary::-webkit-details-marker { display: none; }
.sx-faq summary::after { content: "+"; font-family: var(--sx-font-mono); font-size: 22px; line-height: 1; color: var(--sx-red-dark); transition: transform .3s var(--sx-ease-out); }
.sx-faq details[open] summary::after { transform: rotate(45deg); }
.sx-faq details p { padding-bottom: 18px; color: var(--sx-mute); }
.sx-posts { display: grid; gap: 18px; }
@media (min-width: 720px) { .sx-posts { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .sx-posts { grid-template-columns: repeat(3, 1fr); } }
.sx-post { background: var(--sx-white); border: 1px solid var(--sx-paper-2); border-radius: var(--sx-radius); padding: 24px; display: grid; gap: 10px; align-content: start; text-decoration: none; transition: transform .4s var(--sx-ease-out), box-shadow .4s, border-color .3s; }
a.sx-post:hover { transform: translateY(-4px); box-shadow: 0 18px 44px rgba(23, 24, 28, .1); border-color: var(--sx-ink); }
.sx-post__meta { font-family: var(--sx-font-mono); font-size: 12.5px; color: var(--sx-red-dark); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.sx-post__excerpt { color: var(--sx-mute); font-size: 15.5px; }
.sx-post--placeholder { border-style: dashed; border-width: 2px; background: transparent; }
.sx-article { max-width: 720px; margin-inline: auto; }
.sx-article h2 { font-family: var(--sx-font-head); font-weight: 800; font-size: clamp(22px, 2.6vw, 28px); line-height: 1.15; margin: 1.6em 0 .5em; }
.sx-article p + p { margin-top: 1em; }
.sx-article ul, .sx-article ol { margin: 1em 0; padding-left: 1.3em; display: grid; gap: .6em; }
.sx-article ul { list-style: disc; } .sx-article ol { list-style: decimal; }
.sx-article ul + p, .sx-article ol + p, .sx-article p + ul, .sx-article p + ol { margin-top: 1em; }
.sx-article__sources { font-size: 15px; color: var(--sx-mute); overflow-wrap: anywhere; }
.sx-article__byline { font-size: 15px; opacity: .8; }
.sx-article__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.sx-prose a.sx-btn--red { color: var(--sx-white); }
.sx-prose a.sx-btn--ghost { color: var(--sx-ink); }
.sx-brainnote h2 { font-family: var(--sx-font-head); font-weight: 800; font-size: clamp(20px, 2.4vw, 26px); line-height: 1.15; }
[id="contact"], [id="audit"] { scroll-margin-top: 90px; }

/* Openers: the short themed animation at the top of each sub-page */
.sx-opener { width: 100%; max-width: 440px; margin-inline: auto; aspect-ratio: 4 / 3.2; position: relative; font-family: var(--sx-font-mono); color: var(--sx-ink); }
.sx-op-window { position: absolute; inset: 0; background: var(--sx-white); border-radius: 16px; overflow: hidden; box-shadow: 0 30px 80px rgba(0, 0, 0, .45); display: flex; flex-direction: column; }
.sx-op-chrome { height: 34px; flex: none; display: flex; gap: 6px; align-items: center; padding-inline: 14px; border-bottom: 1px solid var(--sx-paper-2); }
.sx-op-chrome i { width: 9px; height: 9px; border-radius: 50%; background: var(--sx-paper-2); }
.sx-op-body { flex: 1; padding: 16px; display: grid; gap: 12px; align-content: start; position: relative; overflow: hidden; }
.sx-op-search { height: 40px; border: 1.5px solid var(--sx-paper-2); border-radius: 99px; display: flex; align-items: center; gap: 9px; padding-inline: 14px; font-size: 14px; font-weight: 500; }
.sx-op-search svg { width: 16px; height: 16px; flex: none; color: var(--sx-mute); }
.sx-op-caret { width: 2px; height: 18px; background: var(--sx-red); animation: sx-blink 1s steps(1) infinite; }
@keyframes sx-blink { 50% { opacity: 0; } }
.sx-op-result { display: grid; gap: 5px; padding: 10px 12px; border-radius: 10px; border: 1.5px solid transparent; }
.sx-op-result i { display: block; height: 7px; border-radius: 4px; background: var(--sx-paper-2); }
.sx-op-result i:nth-child(2) { width: 70%; } .sx-op-result i:nth-child(3) { width: 45%; }
.sx-op-result--us { border-color: var(--sx-red); }
.sx-op-result b { font-size: 12px; font-weight: 700; display: flex; gap: 8px; align-items: center; }
.sx-op-tag { font-size: 10px; background: var(--sx-ink); color: var(--sx-white); padding: 2px 6px; border-radius: 4px; letter-spacing: .05em; }
.sx-op-map { flex: 1; min-height: 96px; border-radius: 10px; background: var(--sx-paper); position: relative; overflow: hidden;
  background-image: linear-gradient(var(--sx-paper-2) 1.5px, transparent 1.5px), linear-gradient(90deg, var(--sx-paper-2) 1.5px, transparent 1.5px); background-size: 38px 38px; }
.sx-op-pin { position: absolute; width: 18px; height: 16px; background: var(--sx-mute-dark); clip-path: polygon(0 0, 100% 0, 50% 100%); }
.sx-op-pin--us { background: var(--sx-red); width: 26px; height: 23px; }
.sx-op-phone { position: absolute; left: 50%; top: 0; bottom: 0; aspect-ratio: 9 / 17; transform: translateX(-50%); background: var(--sx-ink-2); border: 3px solid var(--sx-ink-3); border-radius: 26px; overflow: hidden; box-shadow: 0 30px 80px rgba(0, 0, 0, .45); }
.sx-op-reel { position: absolute; inset: 0; display: grid; grid-auto-rows: 100%; }
.sx-op-clip { position: relative; display: grid; align-content: end; gap: 6px; padding: 14px; background: var(--sx-ink-3); border-bottom: 2px solid var(--sx-ink); }
.sx-op-clip:nth-child(2) { background: #3a3d47; } .sx-op-clip--us { background: var(--sx-paper); }
.sx-op-clip i { display: block; height: 7px; border-radius: 4px; background: rgba(255, 255, 255, .28); width: 70%; }
.sx-op-clip i + i { width: 44%; }
.sx-op-clip--us i { background: var(--sx-paper-2); }
.sx-op-clip--us b { font-family: var(--sx-font-head); font-weight: 900; font-size: 17px; line-height: 1.1; color: var(--sx-ink); }
.sx-op-clip--us b span { color: var(--sx-red); }
.sx-op-heart { position: absolute; right: 12px; bottom: 60px; width: 30px; height: 30px; color: var(--sx-red); }
.sx-op-postcard { background: var(--sx-white); border-radius: 10px; margin: 8px; padding: 10px; display: grid; gap: 6px; border: 2px solid transparent; }
.sx-op-postcard i { display: block; height: 7px; border-radius: 4px; background: var(--sx-paper-2); }
.sx-op-postcard i.sx-op-img { height: 64px; border-radius: 6px; }
.sx-op-postcard--us { border-color: var(--sx-red); }
.sx-op-postcard--us i.sx-op-img { background: var(--sx-red); opacity: .16; }
.sx-op-postcard b { font-size: 10px; letter-spacing: .05em; color: var(--sx-mute); font-weight: 700; }
.sx-op-block { background: var(--sx-paper-2); border-radius: 6px; }
.sx-op-block--btn { background: var(--sx-red); width: 34%; height: 22px; border-radius: 99px; }
.sx-op-receipt { position: absolute; inset: 0 12%; background: var(--sx-white); border-radius: 10px 10px 0 0; padding: 22px 20px; display: grid; gap: 12px; align-content: start; box-shadow: 0 30px 80px rgba(0, 0, 0, .45); font-size: 13px; }
.sx-op-receipt li { display: flex; justify-content: space-between; gap: 10px; border-bottom: 1.5px dashed var(--sx-paper-2); padding-bottom: 9px; font-weight: 500; }
.sx-op-stamp { justify-self: center; margin-top: 8px; border: 3px solid var(--sx-red-dark); color: var(--sx-red-dark); font-weight: 700; padding: 6px 12px; border-radius: 6px; text-transform: uppercase; letter-spacing: .08em; transform: rotate(-6deg); font-size: 13px; }
.sx-op-bubble { background: var(--sx-white); border-radius: 18px 18px 18px 4px; padding: 16px 18px; font-family: var(--sx-font-body); font-size: 17px; font-weight: 500; max-width: 88%; box-shadow: 0 20px 60px rgba(0, 0, 0, .4); min-height: 58px; }
.sx-op-bubble + .sx-op-bubble { margin-top: 12px; }
.sx-op-chat { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; }
.sx-op-page { position: absolute; inset: 0 14%; background: var(--sx-white); border-radius: 10px; padding: 24px 22px; display: grid; gap: 11px; align-content: start; box-shadow: 0 30px 80px rgba(0, 0, 0, .45); }
.sx-op-page i { display: block; height: 8px; border-radius: 4px; background: var(--sx-paper-2); transform-origin: left; }
.sx-op-page i.sx-op-title { height: 16px; width: 70%; background: var(--sx-ink); }
.sx-op-page i.sx-op-hl { background: var(--sx-red); width: 55%; }

/* 15 INTRO + DIVE, CURSOR, MOTION PREFS ------------------------------------ */
/* The intro is a fixed overlay. Real page content sits underneath as normal HTML.
   It is only shown when <html> has .sx-js and does NOT have .sx-no-intro
   (both set by the tiny inline script in <head>, before first paint). */
.sx-intro { display: none; }
html.sx-js:not(.sx-no-intro) .sx-intro { display: block; }
html.sx-js:not(.sx-no-intro):not(.sx-intro-out) body { overflow: hidden; }
html.sx-intro-out .sx-intro { pointer-events: none; }   /* fading out: the page under it is already usable */
.sx-intro { position: fixed; inset: 0; z-index: 1000; background: var(--sx-white); color: #1f2328; overflow: hidden; font-family: var(--sx-font-body); }
/* Search-page colors. Generic "link blue" and "URL green", used only inside the intro. */
.sx-serp { --sx-serp-blue: #1A49C9; --sx-serp-green: #0B6B3A; position: absolute; inset: 0; transform-origin: 30% 40%; }
.sx-serp__top { padding: clamp(14px, 3vw, 26px) var(--sx-gutter) 0; max-width: 760px; }
@media (min-width: 1000px) { .sx-serp__top, .sx-serp__results, .sx-serp__skeleton { margin-left: 9vw; } }
.sx-serp__bar { display: flex; align-items: center; gap: 12px; height: 50px; border-radius: 99px; border: 1px solid #d8dadf; padding-inline: 18px; box-shadow: 0 2px 8px rgba(23, 24, 28, .08); font-size: 17px; }
.sx-serp__bar svg { width: 19px; height: 19px; color: #7b7e87; flex: none; }
.sx-serp__query { white-space: pre; }
.sx-serp__caret { width: 1.5px; height: 22px; background: #1f2328; margin-left: -10px; animation: sx-blink 1s steps(1) infinite; }
.sx-serp__tabs { display: flex; gap: 22px; margin-top: 16px; font-size: 14px; color: #5f636b; border-bottom: 1px solid #e6e7ea; }
.sx-serp__tabs span { padding-bottom: 10px; }
.sx-serp__tabs span:first-child { color: var(--sx-serp-blue); border-bottom: 3px solid var(--sx-serp-blue); font-weight: 600; }
.sx-serp__viewport { position: absolute; left: 0; right: 0; top: clamp(118px, 17vw, 136px); bottom: 0; overflow: hidden; }
.sx-serp__results, .sx-serp__skeleton { padding: 18px var(--sx-gutter) 0; max-width: 760px; display: grid; gap: 30px; }
.sx-serp__skeleton { position: absolute; inset: 0 auto auto 0; width: 100%; opacity: 0; }
/* Hidden from the very first paint. The results (and the skeleton above) only appear at the results step
   of the intro timeline, which fades them in. Nothing here waits for JavaScript to hide it, so the first
   thing on screen is the empty search bar and its caret. */
.sx-intro .sx-serp__results > * { opacity: 0; }   /* .sx-intro in front so this beats every result style, such as the dimmed lookalikes */
.sx-serp__count { font-size: 13px; color: #6b6f77; margin-bottom: -12px; }
.sx-result { display: grid; gap: 4px; padding: 10px 12px; margin: -10px -12px; border-radius: 12px; position: relative; }
.sx-result__site { display: flex; align-items: center; gap: 10px; font-size: 14px; line-height: 1.25; }
.sx-result__fav { width: 28px; height: 28px; border-radius: 50%; background: var(--sx-paper); display: grid; place-items: center; flex: none; }
.sx-result__fav svg { width: 17px; height: 17px; }
.sx-result__url { color: var(--sx-serp-green); font-size: 13px; display: block; }
.sx-result__title { color: var(--sx-serp-blue); font-size: clamp(19px, 2.4vw, 22px); line-height: 1.3; font-weight: 500; text-decoration: underline transparent; text-underline-offset: 3px; }
.sx-result.is-hover .sx-result__title { text-decoration-color: currentColor; }
.sx-result__desc { font-size: 14.5px; color: #474a52; line-height: 1.5; max-width: 62ch; }
.sx-result--us::after { content: ""; position: absolute; inset: 0; border-radius: 12px; box-shadow: 0 0 0 2px var(--sx-red); opacity: 0; }
.sx-result--us.is-pulse::after { animation: sx-pulse .75s var(--sx-ease-out) 1; }
@keyframes sx-pulse { 0% { opacity: 0; transform: scale(.98); } 30% { opacity: 1; } 100% { opacity: 0; transform: scale(1.03); } }
/* The other results are "blurred" with transparent text + text-shadow. Much cheaper to paint than filter: blur(). */
.sx-result--blur { opacity: .6; user-select: none; }
.sx-result--blur span, .sx-result--blur div { color: transparent !important; }
.sx-result--blur .sx-result__site { text-shadow: 0 0 7px #1f2328; }
.sx-result--blur .sx-result__url { text-shadow: 0 0 7px var(--sx-serp-green); }
.sx-result--blur .sx-result__title { text-shadow: 0 0 9px var(--sx-serp-blue); }
.sx-result--blur .sx-result__desc { text-shadow: 0 0 7px #474a52; }
.sx-result--blur .sx-result__fav { background: #e3e4e8; filter: none; }
.sx-skel { display: grid; gap: 9px; }
.sx-skel i { display: block; height: 12px; border-radius: 6px; background: #e9ebef; animation: sx-shimmer .5s ease-in-out infinite alternate; }
.sx-skel i:nth-child(1) { width: 30%; } .sx-skel i:nth-child(2) { width: 62%; height: 18px; } .sx-skel i:nth-child(3) { width: 88%; } .sx-skel i:nth-child(4) { width: 72%; }
@keyframes sx-shimmer { from { opacity: 1; } to { opacity: .45; } }
.sx-intro__pointer { position: absolute; left: 0; top: 0; width: 26px; height: 26px; z-index: 5; overflow: visible; opacity: 0; pointer-events: none; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .35)); }
.sx-intro__pointer .sx-ptr-touch { display: none; }
@media (pointer: coarse) {   /* phones get a fingertip dot instead of a mouse arrow */
  .sx-intro__pointer .sx-ptr-arrow { display: none; }
  .sx-intro__pointer .sx-ptr-touch { display: block; }
}
.sx-intro__ripple { position: absolute; left: 0; top: 0; width: 56px; height: 56px; margin: -28px; border-radius: 50%; border: 3px solid var(--sx-red); opacity: 0; pointer-events: none; z-index: 4; }
.sx-intro__skip {
  position: absolute; right: 16px; bottom: max(16px, env(safe-area-inset-bottom)); z-index: 20; background: var(--sx-ink); color: var(--sx-white);
  font-family: var(--sx-font-mono); font-size: 14px; font-weight: 700; padding: 12px 18px; border-radius: 99px; min-height: 44px;
}
/* The dive fills the screen from the start and only ever animates transform and opacity:
   the white card scales up from the result's box, the logo rides inside it the whole way. */
.sx-dive { position: absolute; inset: 0; z-index: 10; overflow: hidden; display: grid; place-items: center; opacity: 0; pointer-events: none; }
.sx-dive__card { position: absolute; inset: 0; background: var(--sx-white); transform-origin: 0 0; box-shadow: 0 0 70px rgba(23, 24, 28, .3); }
.sx-dive__logo { position: relative; display: grid; justify-items: center; gap: 18px; }
.sx-dive__mark { width: clamp(84px, 16vw, 124px); height: auto; overflow: visible; }
.sx-dive__word { font-family: var(--sx-font-head); font-weight: 900; font-size: clamp(22px, 4.4vw, 34px); letter-spacing: -.01em; }
.sx-dive__red { position: absolute; left: 50%; top: 46%; width: 120px; height: 120px; margin: -60px; border-radius: 50%; background: var(--sx-red); transform: scale(0); }
.sx-dive__ink { position: absolute; inset: 0; background: var(--sx-ink); transform: translateY(101%); }

/* Page curtain used for light page-to-page transitions */
.sx-curtain { position: fixed; inset: 0; background: var(--sx-ink); z-index: 900; pointer-events: none; transform: translateY(-101%); }
/* Arriving from another page: the curtain starts closed and lifts away (pure CSS, so it can never get stuck). */
html.sx-curtain-in .sx-curtain { transform: none; animation: sx-curtain-out .55s .08s var(--sx-ease-out) forwards; }
@keyframes sx-curtain-out { to { transform: translateY(-101%); } }

/* Custom cursor (desktop, fine pointers only; added by JS) */
/* The outer element only moves. The dot inside only scales. No size or margin changes, so no layout work. */
.sx-cursor { position: fixed; left: 0; top: 0; width: 0; height: 0; z-index: 3000; pointer-events: none; opacity: 0; transition: opacity .2s; }
.sx-cursor::after { content: ""; position: absolute; left: -23px; top: -23px; width: 46px; height: 46px; border-radius: 50%; background: var(--sx-red); border: 2px solid var(--sx-red); transform: scale(.26); transition: transform .3s var(--sx-ease-out), background-color .2s; }
.sx-cursor.is-on { opacity: 1; }
.sx-cursor.is-hover::after { transform: scale(1); background: rgba(232, 64, 42, .18); }
.sx-cursor.is-down::after { transform: scale(.65); }
html.sx-has-cursor, html.sx-has-cursor a, html.sx-has-cursor button, html.sx-has-cursor summary, html.sx-has-cursor label, html.sx-has-cursor .sx-check input { cursor: none; }
html.sx-has-cursor input[type="text"], html.sx-has-cursor input[type="email"], html.sx-has-cursor input[type="tel"], html.sx-has-cursor input[type="url"], html.sx-has-cursor textarea { cursor: text; }

/* Lenis smooth scroll (recommended base rules) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* Reduced motion: no zooms, no parallax, no loops. Fades only. Intro auto-skips in JS. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  .sx-logo__feed { animation: none; }
  .sx-btn, .sx-card, .sx-post { transition: none; }
  .sx-why { transition: visibility 0s; }
}