/* ====================================================================
   SearchDaddy — Public site styles (scoped per page)
   ==================================================================== */


/* ====================================================================
   PAGE: index   (scope: .page-index)
   ==================================================================== */
:root.page-index {
  --bg: #F4EFE6;
  --bg-2: #EBE4D6;
  --paper: #FBF8F2;
  --ink: #1A1814;
  --ink-2: #2C2823;
  --muted: #6B6258;
  --rule: #1A1814;
  --hair: rgba(26, 24, 20, 0.12);
  --hair-2: rgba(26, 24, 20, 0.22);
  --tomato: oklch(0.54 0.19 30);
  --tomato-2: oklch(0.52 0.20 28);
  --ring: oklch(0.54 0.19 30);
  --ring-w: 2px;
  --ring-off: 2px;
  --forest: oklch(0.42 0.08 150);
  --gold: oklch(0.74 0.13 75);
  --slate: oklch(0.42 0.04 250);
  --shadow-card: 0 1px 0 rgba(26, 24, 20, .06), 0 12px 28px -18px rgba(26, 24, 20, .18);
  --serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

.page-index *, .page-index *::before, .page-index *::after {
  box-sizing: border-box
}

html.page-index, .page-index body {
  margin: 0;
  padding: 0
}

html.page-index {
  scroll-behavior: smooth
}

.page-index body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11";
}

.page-index img {
  max-width: 100%;
  display: block
}

.page-index a {
  color: inherit;
  text-decoration: none
}

.page-index button {
  font: inherit;
  color: inherit;
  cursor: pointer;
  border: 0;
  background: none;
  padding: 0
}

.page-index input, .page-index textarea, .page-index select {
  font: inherit;
  color: inherit
}

.page-index ::selection {
  background: var(--ink);
  color: var(--bg)
}

.page-index .display {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 0.96
}

.page-index .display em {
  font-style: italic;
  color: var(--tomato)
}

.page-index h1.display {
  font-size: clamp(44px, 7.2vw, 96px)
}

.page-index h2.display {
  font-size: clamp(36px, 5.4vw, 64px)
}

.page-index h3.display {
  font-size: clamp(28px, 3.4vw, 48px)
}

.page-index .eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.page-index .eyebrow::before {
  content: "";
  width: 18px;
  height: 1px;
  background: currentColor
}

.page-index .lede {
  font-size: clamp(17px, 1.4vw, 21px);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 62ch;
  text-wrap: pretty
}

.page-index .mono {
  font-family: var(--mono)
}

.page-index .muted {
  color: var(--muted)
}

.page-index .wrap {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 32px
}

.page-index section {
  padding: 80px 0;
  position: relative
}

@media (max-width:768px) {
  .page-index section {
    padding: 50px 0
  }

  .page-index .wrap {
    padding: 0 20px
  }
}

.page-index .hairline {
  height: 1px;
  background: var(--hair);
  width: 100%
}

.page-index .hairline-thick {
  height: 1px;
  background: var(--ink);
  width: 100%
}

.page-index .btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: 999px;
  font-weight: 500;
  font-size: 15px;
  letter-spacing: -0.005em;
  transition: transform .25s cubic-bezier(.2, .8, .2, 1), background .2s, color .2s, box-shadow .25s;
  white-space: nowrap;
}

.page-index .btn-primary {
  background: var(--ink);
  color: var(--bg);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 8px 18px -10px rgba(26, 24, 20, .6)
}

.page-index .btn-primary:hover {
  transform: translateY(-1px);
  background: var(--tomato);
  box-shadow: 0 14px 28px -14px rgba(168, 57, 30, .5)
}

.page-index .btn-secondary {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink)
}

.page-index .btn-secondary:hover {
  background: var(--ink);
  color: var(--bg);
  transform: translateY(-1px)
}

.page-index .btn-ghost {
  padding: 10px 14px;
  border-radius: 8px
}

.page-index .btn-ghost:hover {
  background: rgba(26, 24, 20, .06)
}

.page-index .btn .arr {
  transition: transform .25s
}

.page-index .btn:hover .arr {
  transform: translateX(3px)
}

.page-index .nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(244, 239, 230, 0.78);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--hair);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 14px !important;
  gap: 12px !important;
}

.page-index .brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--serif);
  font-size: 24px;
  letter-spacing: -0.01em
}

.page-index .nav .brand img {
  width: auto;
  height: 30px;
  object-fit: contain;
  flex: none
}

.page-index .drawer-top .brand img {
  width: auto;
  height: 26px;
  object-fit: contain;
  flex: none
}

.page-index .footer-brand .brand img {
  width: auto;
  height: 36px;
  object-fit: contain;
  flex: none
}

.page-index .nav-links {
  display: flex;
  gap: 6px;
  align-items: center
}

.page-index .nav-links a {
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 14.5px;
  color: var(--ink-2);
  transition: background .15s, color .15s;
  display: inline-flex;
  align-items: center;
  gap: 6px
}

.page-index .nav-links a:hover {
  background: rgba(26, 24, 20, .06);
  color: var(--ink)
}

.page-index .nav-cta {
  display: flex;
  align-items: center;
  gap: 8px
}

.page-index .fix-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--bg);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.005em;
  transition: background .2s, transform .25s;
}

.page-index .fix-pill:hover {
  background: var(--tomato);
  transform: translateY(-1px)
}

.page-index .fix-pill .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 0 rgba(218, 170, 72, .7);
  animation: page-index__pulse 2.4s infinite
}

@keyframes page-index__pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(218, 170, 72, .7)
  }

  70% {
    box-shadow: 0 0 0 8px rgba(218, 170, 72, 0)
  }

  100% {
    box-shadow: 0 0 0 0 rgba(218, 170, 72, 0)
  }
}

.page-index .menu-btn {
  display: none;
  width: 42px;
  height: 42px;
  border: 1px solid var(--hair-2);
  border-radius: 10px;
  align-items: center;
  justify-content: center
}

.page-index .menu-btn span {
  display: block;
  width: 18px;
  height: 1.5px;
  background: var(--ink);
  position: relative
}

.page-index .menu-btn span::before, .page-index .menu-btn span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px;
  height: 1.5px;
  background: var(--ink)
}

.page-index .menu-btn span::before {
  top: -6px
}

.page-index .menu-btn span::after {
  top: 6px
}

@media (max-width:1200px) {
  .page-index .nav-links {
    display: none
  }

  .page-index .menu-btn {
    display: flex
  }
}

.page-index .drawer {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--bg);
  transform: translateX(100%);
  transition: transform .35s cubic-bezier(.2, .8, .2, 1);
  padding: 24px
}

.page-index .drawer.open {
  transform: translateX(0)
}

.page-index .drawer-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--hair)
}

.page-index .drawer-links {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 24px
}

.page-index .drawer-links a {
  font-family: var(--serif);
  font-size: 32px;
  padding: 12px 0;
  border-bottom: 1px solid var(--hair)
}

.page-index .hero {
  padding-top: 48px;
  padding-bottom: 60px
}

.page-index .hero-grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 60px;
  align-items: start
}

@media (max-width:1024px) {
  .page-index .hero-grid {
    grid-template-columns: 1fr;
    gap: 48px
  }
}

.page-index .hero-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 28px
}

.page-index .live-dot {
  width: 8px;
  height: 8px;
  background: var(--forest);
  border-radius: 50%;
  box-shadow: 0 0 0 0 oklch(0.42 0.08 150 / .5);
  animation: page-index__pulse-green 2s infinite
}

@keyframes page-index__pulse-green {
  0% {
    box-shadow: 0 0 0 0 oklch(0.42 0.08 150 / .5)
  }

  70% {
    box-shadow: 0 0 0 10px oklch(0.42 0.08 150 / 0)
  }

  100% {
    box-shadow: 0 0 0 0 oklch(0.42 0.08 150 / 0)
  }
}

.page-index .hero h1 {
  margin: 0 0 28px;
  text-wrap: balance
}

.page-index .hero .accent-strike {
  position: relative;
  display: inline;
  background-image: linear-gradient(color-mix(in oklch, var(--tomato) 28%, transparent), color-mix(in oklch, var(--tomato) 28%, transparent));
  background-repeat: no-repeat;
  background-size: 100% .18em;
  background-position: 0 calc(100% - .18em);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.page-index .hero .accent-strike::after {
  content: none;
}

.page-index .hero-sub {
  margin: 0 0 32px;
  font-size: clamp(16.5px, 1.25vw, 19px);
  max-width: 56ch;
  color: var(--ink-2);
  line-height: 1.55
}

.page-index .hero-trust {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 13px;
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid var(--hair)
}

.page-index .hero-trust-stat {
  display: flex;
  flex-direction: column;
  line-height: 1.1
}

.page-index .hero-trust-stat b {
  font-family: var(--serif);
  font-size: 32px;
  color: var(--ink);
  font-weight: 400;
  letter-spacing: -0.02em
}

.page-index .hero-trust-stat span {
  font-size: 11px;
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-top: 6px
}

.page-index .hero-trust-divider {
  width: 1px;
  height: 36px;
  background: var(--hair)
}

.page-index .audit {
  background: var(--paper);
  border: 1px solid var(--hair-2);
  border-radius: 24px;
  padding: 28px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.page-index .audit-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px
}

.page-index .audit-title {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted)
}

.page-index .audit-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--forest)
}

.page-index .audit-status .live-dot {
  width: 6px;
  height: 6px
}

.page-index .stage-rail {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 24px
}

.page-index .rail-step {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  padding-bottom: 10px;
  border-bottom: 2px solid var(--hair)
}

.page-index .rail-step.active {
  color: var(--ink);
  border-bottom-color: var(--ink)
}

.page-index .rail-step.done {
  color: var(--forest);
  border-bottom-color: var(--forest)
}

.page-index .rail-step .num {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--bg-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9px
}

.page-index .rail-step.active .num {
  background: var(--ink);
  color: var(--bg)
}

.page-index .rail-step.done .num {
  background: var(--forest);
  color: var(--bg)
}

.page-index .stage {
  display: none
}

.page-index .stage.active {
  display: block;
  animation: page-index__slidein .4s cubic-bezier(.2, .8, .2, 1)
}

@keyframes page-index__slidein {
  from {
    opacity: 0;
    transform: translateY(8px)
  }

  to {
    opacity: 1;
    transform: translateY(0)
  }
}

.page-index .audit-input-row {
  display: flex;
  align-items: stretch;
  background: var(--bg);
  border: 1px solid var(--hair-2);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s
}

.page-index .audit-input-row:focus-within {
  border-color: var(--ink);
  box-shadow: 0 0 0 4px rgba(26, 24, 20, .06)
}

.page-index .audit-input-row .prefix {
  display: flex;
  align-items: center;
  padding: 0 14px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 13px;
  border-right: 1px solid var(--hair)
}

.page-index .audit-input-row input {
  flex: 1;
  border: 0;
  background: transparent;
  padding: 18px 14px;
  font-size: 16px;
  outline: none;
  font-family: var(--mono)
}

.page-index .audit-input-row button {
  padding: 0 22px;
  background: var(--ink);
  color: var(--bg);
  font-weight: 500;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background .2s
}

.page-index .audit-input-row button:hover {
  background: var(--tomato)
}

.page-index .audit-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
  font-size: 12.5px;
  color: var(--muted);
  flex-wrap: wrap
}

.page-index .audit-meta .check {
  color: var(--forest);
  font-weight: 600
}

.page-index .scan-vis {
  position: relative;
  height: 200px;
  border-radius: 14px;
  background: var(--bg);
  border: 1px solid var(--hair);
  overflow: hidden;
  margin-bottom: 18px
}

.page-index .scan-vis svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%
}

.page-index .scan-engines {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 1px;
  padding: 14px
}

.page-index .engine-cell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: var(--paper);
  border-radius: 8px;
  font-family: var(--mono);
  font-size: 12px;
  border: 1px solid var(--hair)
}

.page-index .engine-cell .status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold);
  animation: page-index__scan-pulse 1.4s infinite
}

.page-index .engine-cell.done .status-dot {
  background: var(--forest);
  animation: none
}

@keyframes page-index__scan-pulse {

  0%,
  100% {
    opacity: .3
  }

  50% {
    opacity: 1
  }
}

.page-index .scan-log {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--muted);
  height: 84px;
  overflow: hidden;
  border-top: 1px solid var(--hair);
  padding-top: 10px
}

.page-index .scan-log div {
  padding: 2px 0;
  animation: page-index__logslide .3s ease-out
}

.page-index .scan-log .log-ok {
  color: var(--forest)
}

.page-index .scan-log .log-warn {
  color: var(--tomato)
}

@keyframes page-index__logslide {
  from {
    opacity: 0;
    transform: translateX(-6px)
  }

  to {
    opacity: 1;
    transform: translateX(0)
  }
}

.page-index .scan-progress {
  height: 4px;
  background: var(--hair);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 12px
}

.page-index .scan-progress>div {
  height: 100%;
  background: var(--ink);
  width: 0;
  transition: width .25s linear
}

.page-index .score-headline {
  font-family: var(--serif);
  font-size: clamp(36px, 3.6vw, 52px);
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 0 0 12px
}

.page-index .score-headline em {
  color: var(--tomato);
  font-style: italic
}

.page-index .score-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 18px;
  margin: 18px 0
}

@media (max-width:560px) {
  .fix-pill {
    display: none !important;
  }

  .page-index .score-grid {
    grid-template-columns: 1fr
  }
}

.page-index .score-card {
  background: var(--bg);
  border: 1px solid var(--hair);
  border-radius: 14px;
  padding: 18px
}

.page-index .score-num {
  display: flex;
  align-items: baseline;
  gap: 6px
}

.page-index .score-num b {
  font-family: var(--serif);
  font-size: 80px;
  line-height: 1;
  font-weight: 400;
  letter-spacing: -0.04em;
  color: var(--ink)
}

.page-index .score-num span {
  font-family: var(--mono);
  font-size: 14px;
  color: var(--muted)
}

.page-index .score-bar {
  height: 6px;
  background: var(--bg-2);
  border-radius: 3px;
  margin-top: 14px;
  overflow: hidden
}

.page-index .score-bar>div {
  height: 100%;
  background: linear-gradient(90deg, var(--tomato), var(--gold));
  border-radius: 3px;
  width: 0;
  transition: width 1.2s cubic-bezier(.2, .8, .2, 1)
}

.page-index .findings {
  display: flex;
  flex-direction: column;
  gap: 8px
}

.page-index .finding {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 13.5px;
  line-height: 1.4
}

.page-index .finding-icon {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: var(--bg);
  margin-top: 2px
}

.page-index .finding.bad .finding-icon {
  background: var(--tomato)
}

.page-index .finding.warn .finding-icon {
  background: var(--gold);
  color: var(--ink-2)
}

.page-index .finding.ok .finding-icon {
  background: var(--forest)
}

.page-index .email-gate {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--hair)
}

.page-index .email-gate label {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px
}

.page-index .email-row {
  display: flex;
  gap: 8px
}

.page-index .email-row input {
  flex: 1;
  padding: 14px 16px;
  border: 1px solid var(--hair-2);
  border-radius: 10px;
  background: var(--bg);
  font-size: 15px;
  outline: none;
  transition: border-color .2s
}

.page-index .email-row input:focus {
  border-color: var(--ink)
}

.page-index .email-row button {
  padding: 0 20px;
  background: var(--ink);
  color: var(--bg);
  border-radius: 10px;
  font-weight: 500;
  font-size: 14px;
  transition: background .2s
}

.page-index .email-row button:hover {
  background: var(--tomato)
}

.page-index .pivot-card {
  margin-top: 16px;
  background: var(--ink);
  color: var(--bg);
  border-radius: 14px;
  padding: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  transition: background .25s, transform .25s;
}

.page-index .pivot-card:hover {
  background: var(--tomato);
  transform: translateY(-1px)
}

.page-index .pivot-card .pivot-text {
  font-size: 14px;
  line-height: 1.4
}

.page-index .pivot-card b {
  display: block;
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 400;
  margin-bottom: 2px
}

.page-index .pivot-card .arr-circle {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--bg);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform .25s
}

.page-index .pivot-card:hover .arr-circle {
  transform: translateX(4px)
}

.page-index .booking-card {
  background: var(--bg);
  border: 1px solid var(--hair);
  border-radius: 14px;
  padding: 20px;
  margin-bottom: 14px
}

.page-index .case-mini {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: center;
  padding: 14px;
  background: var(--paper);
  border: 1px solid var(--hair);
  border-radius: 12px;
  margin-bottom: 14px
}

.page-index .case-avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--tomato), var(--gold));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bg);
  font-family: var(--serif);
  font-size: 22px
}

.page-index .case-mini .label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted)
}

.page-index .case-mini .stats {
  display: flex;
  gap: 14px;
  margin-top: 4px;
  font-size: 13px
}

.page-index .case-mini .stats b {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 400;
  color: var(--forest)
}

.page-index .field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px
}

@media (max-width:560px) {
  .page-index .field-grid {
    grid-template-columns: 1fr
  }
}

.page-index .field {
  display: flex;
  flex-direction: column;
  gap: 6px
}

.page-index .field label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted)
}

.page-index .field input, .page-index .field select {
  padding: 12px 14px;
  border: 1px solid var(--hair-2);
  border-radius: 10px;
  background: var(--bg);
  font-size: 14px;
  outline: none;
  transition: border-color .2s
}

.page-index .field input:focus, .page-index .field select:focus {
  border-color: var(--ink)
}

.page-index .confirm-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--forest);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px
}

.page-index .confirm-icon svg {
  width: 32px;
  height: 32px;
  color: var(--bg)
}

.page-index .confirm-text {
  text-align: center
}

.page-index .confirm-text h3 {
  font-family: var(--serif);
  font-size: 34px;
  font-weight: 400;
  letter-spacing: -0.02em;
  margin: 0 0 8px
}

.page-index .confirm-text p {
  margin: 0;
  color: var(--ink-2)
}

.page-index .section-head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 32px;
  align-items: center;
  margin-bottom: 60px
}

@media (max-width:768px) {
  .page-index .section-head {
    grid-template-columns: 1fr;
    gap: 18px
  }
}

.page-index .section-num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--muted);
  text-transform: uppercase
}

.page-index .section-head h2 {
  margin: 8px 0 0;
  text-wrap: balance;
  max-width: 18ch
}

.page-index .section-head .right {
  max-width: 46ch;
  color: var(--ink-2);
  font-size: 16.5px;
  line-height: 1.55;
  justify-self: end
}

@media (max-width:768px) {
  .page-index .section-head .right {
    justify-self: start
  }
}

.page-index .platforms {
  padding: 48px 0;
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair)
}

.page-index .platforms-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap
}

.page-index .platforms-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  max-width: 160px;
  line-height: 1.4
}

.page-index .platform-chips {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center
}

.page-index .chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: 1px solid var(--hair-2);
  border-radius: 999px;
  font-size: 14px;
  background: var(--paper);
  transition: transform .2s, border-color .2s
}

.page-index .chip:hover {
  transform: translateY(-2px);
  border-color: var(--ink)
}

.page-index .chip-icon {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 12px;
  color: var(--bg);
  font-weight: 600
}

.page-index .shock-stat {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 48px;
  align-items: center;
  padding: 48px 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  margin: 0 0 80px
}

@media (max-width:768px) {
  .page-index .shock-stat {
    grid-template-columns: 1fr;
    gap: 18px
  }
}

.page-index .shock-stat .num {
  font-family: var(--serif);
  font-size: clamp(120px, 18vw, 220px);
  line-height: .85;
  letter-spacing: -0.05em;
  color: var(--tomato)
}

.page-index .shock-stat .copy {
  max-width: 48ch;
  font-size: 18px;
  line-height: 1.5
}

.page-index .shock-stat .copy small {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 14px
}

.page-index .problem-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--hair);
  border: 1px solid var(--hair)
}

@media (max-width:1024px) {
  .page-index .problem-grid {
    grid-template-columns: repeat(2, 1fr)
  }
}

@media (max-width:560px) {
  .page-index .problem-grid {
    grid-template-columns: 1fr
  }
}

.page-index .problem-cell {
  background: var(--bg);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: background .2s
}

.page-index .problem-cell:hover {
  background: var(--paper)
}

.page-index .problem-cell .num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--muted)
}

.page-index .problem-cell h4 {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 400;
  letter-spacing: -0.01em;
  margin: 0;
  line-height: 1.15
}

.page-index .problem-cell p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-2)
}

.page-index .features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px
}

@media (max-width:1024px) {
  .page-index .features-grid {
    grid-template-columns: repeat(2, 1fr)
  }
}

@media (max-width:560px) {
  .page-index .features-grid {
    grid-template-columns: 1fr
  }
}

.page-index .feature-card {
  background: var(--paper);
  border: 1px solid var(--hair);
  border-radius: 20px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s, border-color .3s;
}

.page-index .feature-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card);
  border-color: var(--hair-2)
}

.page-index .feature-card .glyph {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--bg-2);
  display: flex;
  align-items: center;
  justify-content: center
}

.page-index .feature-card h4 {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 400;
  margin: 0;
  line-height: 1.1;
  letter-spacing: -0.01em
}

.page-index .feature-card p {
  margin: 0;
  color: var(--ink-2);
  font-size: 14.5px;
  line-height: 1.55
}

.page-index .feature-card .meta {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--hair)
}

.page-index .sim-stack {
  display: flex;
  flex-direction: column;
  gap: 14px
}

.page-index .sim-card {
  background: var(--paper);
  border: 1px solid var(--hair-2);
  border-radius: 18px;
  overflow: hidden;
  transition: border-color .2s
}

.page-index .sim-card[open] {
  border-color: var(--ink)
}

.page-index .sim-summary {
  padding: 22px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  cursor: pointer;
  list-style: none
}

.page-index .sim-summary::-webkit-details-marker {
  display: none
}

.page-index .sim-q {
  display: flex;
  align-items: center;
  gap: 14px
}

.page-index .sim-engine {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 6px 10px;
  background: var(--bg-2);
  border-radius: 6px
}

.page-index .sim-q-text {
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.005em
}

.page-index .sim-toggle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--hair-2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .2s, transform .3s
}

.page-index .sim-card[open] .sim-toggle {
  background: var(--ink);
  color: var(--bg);
  transform: rotate(45deg)
}

.page-index .sim-body {
  padding: 0 24px 24px;
  border-top: 1px solid var(--hair);
  padding-top: 18px
}

.page-index .chat-bubble {
  background: var(--bg);
  border-radius: 14px;
  padding: 18px 20px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-2);
  position: relative
}

.page-index .chat-bubble .mention {
  background: oklch(0.94 0.04 30);
  color: var(--tomato);
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 500;
  animation: page-index__reveal .8s ease both
}

.page-index .chat-bubble .you-missing {
  background: rgba(26, 24, 20, .06);
  color: var(--muted);
  padding: 1px 6px;
  border-radius: 4px;
  text-decoration: line-through;
  text-decoration-color: var(--tomato)
}

@keyframes page-index__reveal {
  from {
    background: transparent;
    color: inherit
  }

  to {
    background: oklch(0.94 0.04 30);
    color: var(--tomato)
  }
}

.page-index .sim-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 14px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.08em;
  text-transform: uppercase
}

.page-index .sov-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center
}

@media (max-width:1024px) {
  .page-index .sov-section {
    grid-template-columns: 1fr
  }
}

.page-index .gauge-frame {
  aspect-ratio: 1/1;
  max-width: 520px;
  margin: 0 auto;
  position: relative
}

.page-index .gauge-svg {
  width: 100%;
  height: 100%
}

.page-index .gauge-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center
}

.page-index .gauge-num {
  font-family: var(--serif);
  font-size: 120px;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--ink)
}

.page-index .gauge-num em {
  color: var(--tomato);
  font-style: normal
}

.page-index .gauge-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 6px
}

.page-index .gauge-band {
  font-family: var(--serif);
  font-size: 24px;
  color: var(--tomato);
  margin-top: 6px;
  font-style: italic
}

.page-index .sov-definition {
  padding: 24px;
  background: var(--paper);
  border: 1px solid var(--hair);
  border-radius: 16px;
  margin-bottom: 24px
}

.page-index .sov-definition .term {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px
}

.page-index .sov-definition .name {
  font-family: var(--serif);
  font-size: 32px;
  font-weight: 400;
  letter-spacing: -0.01em;
  margin: 0 0 10px
}

.page-index .sov-definition p {
  margin: 0 0 10px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-2)
}

.page-index .sov-competitors {
  margin-top: 16px
}

.page-index .sov-row {
  display: grid;
  grid-template-columns: 120px 1fr 60px;
  gap: 14px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--hair);
  font-size: 14px
}

.page-index .sov-row .name {
  font-weight: 500
}

.page-index .sov-row.you .name {
  color: var(--tomato)
}

.page-index .sov-bar {
  height: 6px;
  background: var(--bg-2);
  border-radius: 3px;
  overflow: hidden
}

.page-index .sov-bar>div {
  height: 100%;
  background: var(--ink);
  border-radius: 3px
}

.page-index .sov-row.you .sov-bar>div {
  background: var(--tomato)
}

.page-index .sov-row .pct {
  font-family: var(--mono);
  font-size: 13px;
  text-align: right
}

.page-index .freshness {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 14px
}

.page-index .compare-wrap {
  border: 1px solid var(--ink);
  border-radius: 20px;
  overflow: hidden;
  background: var(--paper)
}

.page-index .compare-row {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  border-bottom: 1px solid var(--hair)
}

.page-index .compare-row:last-child {
  border-bottom: 0
}

.page-index .compare-row>div {
  padding: 22px 26px;
  display: flex;
  align-items: center;
  font-size: 15px;
  line-height: 1.4
}

.page-index .compare-row.head>div {
  background: var(--bg-2);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted)
}

.page-index .compare-row.head>div.us {
  background: var(--ink);
  color: var(--bg)
}

.page-index .compare-row .feat {
  font-family: var(--serif);
  font-size: 18px;
  background: var(--bg)
}

.page-index .compare-row .col-us {
  background: rgba(168, 57, 30, .04);
  color: var(--ink)
}

.page-index .compare-row .check {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--forest);
  color: var(--bg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
  font-size: 11px;
  flex-shrink: 0
}

.page-index .compare-row .x {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--hair-2);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
  font-size: 11px;
  flex-shrink: 0
}

@media (max-width:768px) {
  .page-index .compare-row {
    grid-template-columns: 1fr
  }

  .page-index .compare-row>div {
    padding: 14px 18px
  }
}

.page-index .testi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px
}

@media (max-width:1024px) {
  .page-index .testi-grid {
    grid-template-columns: 1fr
  }
}

.page-index .testi-card {
  background: var(--paper);
  border: 1px solid var(--hair);
  border-radius: 20px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  transition: transform .25s, box-shadow .25s
}

.page-index .testi-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card)
}

.page-index .stars {
  color: var(--gold);
  font-size: 16px;
  letter-spacing: 2px
}

.page-index .testi-quote {
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1.3;
  letter-spacing: -0.005em;
  flex: 1
}

.page-index .testi-quote::before {
  content: "“";
  font-size: 36px;
  color: var(--tomato);
  line-height: 0;
  display: inline-block;
  transform: translateY(8px);
  margin-right: 2px
}

.page-index .testi-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 18px;
  border-top: 1px solid var(--hair)
}

.page-index .testi-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--tomato), var(--gold));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bg);
  font-family: var(--serif);
  font-size: 18px
}

.page-index .testi-foot .who {
  font-size: 14px;
  font-weight: 500
}

.page-index .testi-foot .who small {
  display: block;
  color: var(--muted);
  font-weight: 400;
  font-size: 12.5px;
  margin-top: 2px
}

.page-index .trust {
  padding: 60px 0;
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
  background: var(--bg-2)
}

.page-index .trust-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
  align-items: center
}

@media (max-width:1024px) {
  .page-index .trust-inner {
    grid-template-columns: 1fr
  }
}

.page-index .trust-pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap
}

.page-index .trust-pill {
  padding: 8px 14px;
  border: 1px solid var(--hair-2);
  border-radius: 999px;
  font-size: 13px;
  background: var(--paper)
}

.page-index .cert-row {
  display: flex;
  gap: 16px;
  align-items: center
}

.page-index .cert {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted)
}

.page-index .cert .badge {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1.5px solid var(--ink-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 12px;
  color: var(--ink-2)
}

.page-index .pricing-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 0 40px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted)
}

.page-index .toggle-switch {
  width: 46px;
  height: 24px;
  background: var(--ink);
  border-radius: 999px;
  position: relative;
  cursor: pointer;
  transition: background .2s
}

.page-index .toggle-switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background: var(--bg);
  border-radius: 50%;
  transition: transform .25s
}

.page-index .toggle-switch.yearly::after {
  transform: translateX(22px)
}

.page-index .toggle-switch.yearly {
  background: var(--tomato)
}

.page-index .toggle-savings {
  color: var(--tomato);
  font-weight: 500;
  font-size: 11px;
  padding: 4px 8px;
  background: oklch(0.94 0.04 30);
  border-radius: 6px;
  letter-spacing: 0.08em
}

.page-index .pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px
}

@media (max-width:1024px) {
  .page-index .pricing-grid {
    grid-template-columns: 1fr
  }
}

.page-index .price-card {
  background: var(--paper);
  border: 1px solid var(--hair-2);
  border-radius: 20px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: relative;
  transition: transform .25s, box-shadow .25s, border-color .25s
}

.page-index .price-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card)
}

.page-index .price-card.featured {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
  transform: scale(1.02)
}

.page-index .price-card.featured:hover {
  transform: scale(1.02) translateY(-3px)
}

.page-index .price-card .tier {
  display: flex;
  align-items: center;
  justify-content: space-between
}

.page-index .price-card .tier h3 {
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 400;
  margin: 0;
  letter-spacing: -0.01em
}

.page-index .price-card .badge {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 10px;
  border: 1px solid currentColor;
  border-radius: 999px;
  opacity: .8
}

.page-index .price-card.featured .badge {
  background: var(--tomato);
  border-color: var(--tomato);
  color: var(--bg);
  opacity: 1
}

.page-index .price-amt {
  display: flex;
  align-items: baseline;
  gap: 6px
}

.page-index .price-amt b {
  font-family: var(--serif);
  font-size: 64px;
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1
}

.page-index .price-amt span {
  font-family: var(--mono);
  font-size: 13px;
  opacity: .7
}

.page-index .price-card .desc {
  font-size: 14px;
  line-height: 1.55;
  opacity: .85;
  min-height: 42px
}

.page-index .price-feats {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 14px;
  flex: 1
}

.page-index .price-feats li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  line-height: 1.4
}

.page-index .price-feats li::before {
  content: "";
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--forest);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 8l3.5 3.5L13 5' stroke='%23F4EFE6' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-size: 14px;
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
  margin-top: 2px
}

.page-index .price-card.featured .price-feats li::before {
  background-color: var(--tomato)
}

.page-index .faq-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--hair)
}

.page-index .faq-item {
  border-bottom: 1px solid var(--hair)
}

.page-index .faq-item summary {
  padding: 26px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  cursor: pointer;
  list-style: none;
  font-family: var(--serif);
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -0.005em;
  transition: color .2s
}

.page-index .faq-item summary::-webkit-details-marker {
  display: none
}

.page-index .faq-item summary:hover {
  color: var(--tomato)
}

.page-index .faq-toggle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--hair-2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .2s, transform .3s, color .2s
}

.page-index .faq-item[open] .faq-toggle {
  background: var(--ink);
  color: var(--bg);
  transform: rotate(45deg)
}

.page-index .faq-body {
  padding: 0 0 26px;
  max-width: 64ch;
  color: var(--ink-2);
  font-size: 15.5px;
  line-height: 1.6
}

.page-index .briefing {
  background: var(--ink);
  color: var(--bg);
  border-radius: 24px;
  padding: 64px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center
}

@media (max-width:1024px) {
  .page-index .briefing {
    grid-template-columns: 1fr;
    padding: 40px
  }
}

.page-index .briefing h2 {
  margin: 0;
  color: var(--bg)
}

.page-index .briefing h2 em {
  color: var(--gold)
}

.page-index .briefing p {
  color: rgba(244, 239, 230, .78);
  font-size: 16px;
  line-height: 1.55;
  max-width: 42ch;
  margin: 18px 0 0
}

.page-index .brief-form {
  display: flex;
  flex-direction: column;
  gap: 12px
}

.page-index .brief-form .row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px
}

@media (max-width:560px) {
  .page-index .brief-form .row {
    grid-template-columns: 1fr
  }
}

.page-index .brief-form input, .page-index .brief-form select, .page-index .brief-form textarea {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 10px;
  padding: 14px 16px;
  color: var(--bg);
  font-size: 14.5px;
  outline: none;
  transition: border-color .2s, background .2s;
}

.page-index .brief-form select option {
  background: #fff;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 10px;
  padding: 14px 16px;
  color: #000;
}

.page-index .brief-form input::placeholder, .page-index .brief-form textarea::placeholder {
  color: rgba(244, 239, 230, .42)
}

.page-index .brief-form input:focus, .page-index .brief-form select:focus, .page-index .brief-form textarea:focus {
  border-color: var(--gold);
  background: rgba(255, 255, 255, .1)
}

.page-index .brief-form textarea {
  resize: vertical;
  min-height: 90px
}

.page-index .brief-form button {
  padding: 16px;
  background: var(--gold);
  color: var(--ink);
  border-radius: 10px;
  font-weight: 500;
  font-size: 15px;
  transition: background .2s, transform .25s;
  margin-top: 6px
}

.page-index .brief-form button:hover {
  background: var(--bg);
  transform: translateY(-1px)
}

.page-index footer {
  background: var(--ink);
  color: var(--bg);
  padding: 80px 0 32px
}

.page-index .footer-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(4, 1fr);
  gap: 40px;
  margin-bottom: 60px
}

@media (max-width:1024px) {
  .page-index .footer-grid {
    grid-template-columns: 1fr 1fr
  }
}

@media (max-width:560px) {
  .page-index .footer-grid {
    grid-template-columns: 1fr
  }
}

.page-index .footer-brand p {
  color: rgba(244, 239, 230, .6);
  font-size: 14px;
  line-height: 1.55;
  max-width: 30ch;
  margin: 14px 0 0
}

.page-index .footer-col h5 {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(244, 239, 230, .5);
  margin: 0 0 16px;
  font-weight: 500
}

.page-index .footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 14px
}

.page-index .footer-col a {
  color: rgba(244, 239, 230, .85);
  transition: color .2s
}

.page-index .footer-col a:hover {
  color: var(--gold)
}

.page-index .footer-bottom {
  padding-top: 32px;
  border-top: 1px solid rgba(255, 255, 255, .08);
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: rgba(244, 239, 230, .5);
  flex-wrap: wrap;
  gap: 18px
}

.page-index .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s cubic-bezier(.2, .8, .2, 1), transform .7s cubic-bezier(.2, .8, .2, 1)
}

.page-index .reveal.in {
  opacity: 1;
  transform: translateY(0)
}

.page-index .hero h1 .line {
  display: block;
  opacity: 0;
  transform: translateY(0.35em);
  filter: blur(5px);
  transition: opacity .85s cubic-bezier(.2, .8, .2, 1), transform .95s cubic-bezier(.2, .8, .2, 1), filter .85s cubic-bezier(.2, .8, .2, 1)
}

.page-index .hero h1.in .line {
  opacity: 1;
  transform: none;
  filter: none
}

.page-index .score-card.celebrate {
  animation: page-index__cardLift .9s cubic-bezier(.2, .8, .2, 1) both
}

.page-index .score-card.celebrate .score-num b {
  position: relative;
  animation: page-index__numPop 1.1s cubic-bezier(.2, .8, .2, 1) both
}

.page-index .score-card.celebrate .score-num b::after {
  content: "";
  position: absolute;
  inset: -18px -22px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(168, 57, 30, .25), transparent 70%);
  opacity: 0;
  animation: page-index__numGlow 1.4s ease-out .15s both;
  z-index: -1;
  pointer-events: none
}

@keyframes page-index__cardLift {
  0% {
    transform: translateY(8px) scale(.985)
  }

  55% {
    transform: translateY(-2px) scale(1.005)
  }

  100% {
    transform: none
  }
}

@keyframes page-index__numPop {
  0% {
    transform: scale(.6);
    opacity: 0
  }

  55% {
    transform: scale(1.06);
    opacity: 1
  }

  100% {
    transform: none
  }
}

@keyframes page-index__numGlow {
  0% {
    opacity: 0;
    transform: scale(.7)
  }

  40% {
    opacity: 1
  }

  100% {
    opacity: 0;
    transform: scale(1.6)
  }
}

.page-index .gauge-frame {
  will-change: transform
}

.page-index .gauge-frame.live::before {
  content: "";
  position: absolute;
  inset: 6%;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0%, rgba(168, 57, 30, .18) 12%, transparent 24%, transparent 100%);
  animation: page-index__gaugeSpin 6s linear infinite;
  mask: radial-gradient(circle, transparent 60%, #000 62%, #000 70%, transparent 72%);
  -webkit-mask: radial-gradient(circle, transparent 60%, #000 62%, #000 70%, transparent 72%);
  pointer-events: none;
  opacity: 0;
  transition: opacity .8s ease .8s
}

.page-index .gauge-frame.live.lit::before {
  opacity: 1
}

@keyframes page-index__gaugeSpin {
  to {
    transform: rotate(360deg)
  }
}

.page-index .gauge-num {
  transition: transform .9s cubic-bezier(.2, .8, .2, 1)
}

.page-index .gauge-frame.lit .gauge-num {
  transform: scale(1.02)
}

.page-index .sim-card {
  transform-style: preserve-3d;
  transition: border-color .25s, transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s ease
}

.page-index .sim-card:hover {
  box-shadow: 0 18px 40px -24px rgba(26, 24, 20, .25), 0 2px 0 rgba(26, 24, 20, .04)
}

.page-index .sim-card .chat-bubble {
  position: relative
}

.page-index .sim-card[open] .chat-bubble {
  animation: page-index__bubbleIn .5s cubic-bezier(.2, .8, .2, 1) both
}

@keyframes page-index__bubbleIn {
  from {
    opacity: 0;
    transform: translateY(6px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

.page-index .compare-wrap.in .compare-row {
  opacity: 0;
  transform: translateY(10px);
  animation: page-index__rowIn .55s cubic-bezier(.2, .8, .2, 1) both
}

.page-index .compare-wrap.in .compare-row:nth-child(1) {
  animation-delay: .05s
}

.page-index .compare-wrap.in .compare-row:nth-child(2) {
  animation-delay: .13s
}

.page-index .compare-wrap.in .compare-row:nth-child(3) {
  animation-delay: .21s
}

.page-index .compare-wrap.in .compare-row:nth-child(4) {
  animation-delay: .29s
}

.page-index .compare-wrap.in .compare-row:nth-child(5) {
  animation-delay: .37s
}

.page-index .compare-wrap.in .compare-row:nth-child(6) {
  animation-delay: .45s
}

.page-index .compare-wrap.in .compare-row:nth-child(7) {
  animation-delay: .53s
}

@keyframes page-index__rowIn {
  to {
    opacity: 1;
    transform: none
  }
}

@media (prefers-reduced-motion:reduce) {
  .page-index *, .page-index *::before, .page-index *::after {
    animation: none !important;
    transition: none !important
  }

  .page-index .reveal {
    opacity: 1;
    transform: none
  }
}

@media print {
  .page-index .nav, .page-index .briefing, .page-index footer, .page-index .menu-btn, .page-index .drawer {
    display: none !important
  }

  .page-index body {
    background: #fff;
    color: #000
  }

  .page-index section {
    padding: 24px 0;
    page-break-inside: avoid
  }

  .page-index .audit {
    display: none
  }
}

.page-index :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--ring-w) solid var(--ring);
  outline-offset: var(--ring-off);
}

.page-index .on-ink, .page-index footer {
  --ring: var(--gold)
}

/* ====================================================================
   PAGE: platform   (scope: .page-platform)
   ==================================================================== */
:root.page-platform {
  --ring: oklch(0.54 0.19 30);
  --ring-w: 2px;
  --ring-off: 2px;
  --bg: #F4EFE6;
  --bg-2: #EBE4D6;
  --paper: #FBF8F2;
  --ink: #1A1814;
  --ink-2: #2C2823;
  --muted: #6B6258;
  --rule: #1A1814;
  --hair: rgba(26, 24, 20, 0.12);
  --hair-2: rgba(26, 24, 20, 0.22);
  --tomato: oklch(0.54 0.19 30);
  --tomato-2: oklch(0.52 0.20 28);
  --forest: oklch(0.42 0.08 150);
  --gold: oklch(0.74 0.13 75);
  --slate: oklch(0.42 0.04 250);
  --shadow-card: 0 1px 0 rgba(26, 24, 20, .06), 0 12px 28px -18px rgba(26, 24, 20, .18);
  --serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

.page-platform *, .page-platform *::before, .page-platform *::after {
  box-sizing: border-box
}

html.page-platform, .page-platform body {
  margin: 0;
  padding: 0
}

html.page-platform {
  scroll-behavior: smooth
}

.page-platform body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11"
}

.page-platform img {
  max-width: 100%;
  display: block
}

.page-platform a {
  color: inherit;
  text-decoration: none
}

.page-platform button {
  font: inherit;
  color: inherit;
  cursor: pointer;
  border: 0;
  background: none;
  padding: 0
}

.page-platform input, .page-platform textarea, .page-platform select {
  font: inherit;
  color: inherit
}

.page-platform ::selection {
  background: var(--ink);
  color: var(--bg)
}

.page-platform .display {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 0.96
}

.page-platform .display em {
  font-style: italic;
  color: var(--tomato)
}

.page-platform h1.display {
  font-size: clamp(44px, 7.2vw, 96px)
}

.page-platform h2.display {
  font-size: clamp(36px, 5.4vw, 64px)
}

.page-platform h3.display {
  font-size: clamp(28px, 3.4vw, 48px)
}

.page-platform .eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 8px
}

.page-platform .eyebrow::before {
  content: "";
  width: 18px;
  height: 1px;
  background: currentColor
}

.page-platform .lede {
  font-size: clamp(17px, 1.4vw, 21px);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 62ch;
  text-wrap: pretty
}

.page-platform .mono {
  font-family: var(--mono)
}

.page-platform .muted {
  color: var(--muted)
}

.page-platform .wrap {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 32px
}

.page-platform section {
  padding: 80px 0;
  position: relative
}

@media (max-width:768px) {
  .page-platform section {
    padding: 50px 0
  }

  .page-platform .wrap {
    padding: 0 20px
  }
}

.page-platform .hairline {
  height: 1px;
  background: var(--hair);
  width: 100%
}

.page-platform .btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: 999px;
  font-weight: 500;
  font-size: 15px;
  letter-spacing: -0.005em;
  transition: transform .25s cubic-bezier(.2, .8, .2, 1), background .2s, color .2s, box-shadow .25s;
  white-space: nowrap
}

.page-platform .btn-primary {
  background: var(--ink);
  color: var(--bg);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 8px 18px -10px rgba(26, 24, 20, .6)
}

.page-platform .btn-primary:hover {
  transform: translateY(-1px);
  background: var(--tomato);
  box-shadow: 0 14px 28px -14px rgba(168, 57, 30, .5)
}

.page-platform .btn-secondary {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink)
}

.page-platform .btn-secondary:hover {
  background: var(--ink);
  color: var(--bg);
  transform: translateY(-1px)
}

.page-platform .btn .arr {
  transition: transform .25s
}

.page-platform .btn:hover .arr {
  transform: translateX(3px)
}

.page-platform .nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(244, 239, 230, 0.78);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--hair)
}

.page-platform .nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  gap: 28px
}

.page-platform .brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--serif);
  font-size: 24px;
  letter-spacing: -0.01em
}

.page-platform .brand img, .page-platform .brand svg {
  width: 34px;
  height: 34px
}

.page-platform .brand .word {
  position: relative;
  top: 1px
}

.page-platform .nav-links {
  display: flex;
  gap: 6px;
  align-items: center
}

.page-platform .nav-links a {
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 14.5px;
  color: var(--ink-2);
  transition: background .15s, color .15s
}

.page-platform .nav-links a:hover, .page-platform .nav-links a.cur {
  background: rgba(26, 24, 20, .06);
  color: var(--ink)
}

.page-platform .nav-cta {
  display: flex;
  align-items: center;
  gap: 8px
}

.page-platform .fix-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--bg);
  font-size: 13px;
  font-weight: 500;
  transition: background .2s, transform .25s
}

.page-platform .fix-pill:hover {
  background: var(--tomato);
  transform: translateY(-1px)
}

.page-platform .fix-pill .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  animation: page-platform__pulse 2.4s infinite
}

@keyframes page-platform__pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(218, 170, 72, .7)
  }

  70% {
    box-shadow: 0 0 0 8px rgba(218, 170, 72, 0)
  }

  100% {
    box-shadow: 0 0 0 0 rgba(218, 170, 72, 0)
  }
}

.page-platform .menu-btn {
  display: none;
  width: 42px;
  height: 42px;
  border: 1px solid var(--hair-2);
  border-radius: 10px;
  align-items: center;
  justify-content: center
}

.page-platform .menu-btn span {
  display: block;
  width: 18px;
  height: 1.5px;
  background: var(--ink);
  position: relative
}

.page-platform .menu-btn span::before, .page-platform .menu-btn span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px;
  height: 1.5px;
  background: var(--ink)
}

.page-platform .menu-btn span::before {
  top: -6px
}

.page-platform .menu-btn span::after {
  top: 6px
}

@media (max-width:1200px) {
  .page-platform .nav-links {
    display: none
  }

  .page-platform .menu-btn {
    display: flex
  }
}

.page-platform .drawer {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--bg);
  transform: translateX(100%);
  transition: transform .35s cubic-bezier(.2, .8, .2, 1);
  padding: 24px
}

.page-platform .drawer.open {
  transform: translateX(0)
}

.page-platform .drawer-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--hair)
}

.page-platform .drawer-links {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 24px
}

.page-platform .drawer-links a {
  font-family: var(--serif);
  font-size: 32px;
  padding: 12px 0;
  border-bottom: 1px solid var(--hair)
}

.page-platform .hero {
  padding-top: 48px;
  padding-bottom: 60px
}

.page-platform .hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center
}

@media (max-width:1024px) {
  .page-platform .hero-grid {
    grid-template-columns: 1fr;
    gap: 48px
  }
}

.page-platform .hero-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px
}

.page-platform .live-dot {
  width: 8px;
  height: 8px;
  background: var(--forest);
  border-radius: 50%;
  animation: page-platform__pulse-green 2s infinite
}

@keyframes page-platform__pulse-green {
  0% {
    box-shadow: 0 0 0 0 oklch(0.42 0.08 150 / .5)
  }

  70% {
    box-shadow: 0 0 0 10px oklch(0.42 0.08 150 / 0)
  }

  100% {
    box-shadow: 0 0 0 0 oklch(0.42 0.08 150 / 0)
  }
}

.page-platform .hero h1 {
  margin: 0 0 24px;
  text-wrap: balance
}

.page-platform .hero-sub {
  margin: 0 0 32px;
  font-size: clamp(16.5px, 1.25vw, 19px);
  max-width: 56ch;
  color: var(--ink-2);
  line-height: 1.55
}

.page-platform .hero-cta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap
}

.page-platform .dash-mock {
  background: var(--paper);
  border: 1px solid var(--hair-2);
  border-radius: 20px;
  box-shadow: 0 1px 0 rgba(26, 24, 20, .06), 0 30px 60px -34px rgba(26, 24, 20, .28);
  overflow: hidden;
  transform: rotate(-.4deg);
}

.page-platform .dash-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--hair);
  background: var(--bg-2);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted)
}

.page-platform .dash-bar .dots {
  display: flex;
  gap: 6px
}

.page-platform .dash-bar .dots span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--hair-2)
}

.page-platform .dash-body {
  padding: 18px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 14px
}

.page-platform .dash-card {
  background: var(--bg);
  border: 1px solid var(--hair);
  border-radius: 12px;
  padding: 14px
}

.page-platform .dash-card.span {
  grid-column: 1/-1
}

.page-platform .dash-card .ttl {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center
}

.page-platform .dash-gauge {
  display: flex;
  align-items: center;
  gap: 14px
}

.page-platform .gring {
  position: relative;
  width: 74px;
  height: 74px;
  flex-shrink: 0
}

.page-platform .gring svg {
  width: 100%;
  height: 100%
}

.page-platform .gring-num {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 24px;
  letter-spacing: -.02em
}

.page-platform .dash-gauge .meta {
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink-2)
}

.page-platform .dash-gauge .meta b {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 400
}

.page-platform .dash-list {
  display: flex;
  flex-direction: column;
  gap: 6px
}

.page-platform .dash-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12.5px;
  padding: 6px 0;
  border-bottom: 1px solid var(--hair)
}

.page-platform .dash-row:last-child {
  border-bottom: 0
}

.page-platform .dash-row .nm {
  display: flex;
  align-items: center;
  gap: 8px
}

.page-platform .dash-row .av {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  background: var(--bg-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 11px
}

.page-platform .dash-row .pct {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted)
}

.page-platform .dash-row.you .pct {
  color: var(--tomato);
  font-weight: 500
}

.page-platform .dash-spark {
  height: 64px;
  display: flex;
  align-items: end;
  gap: 3px;
  padding-top: 8px
}

.page-platform .dash-spark span {
  flex: 1;
  background: linear-gradient(180deg, var(--tomato), var(--gold));
  border-radius: 2px;
  opacity: .85
}

.page-platform .dash-alert {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
  font-size: 12.5px;
  padding: 8px 0;
  border-top: 1px dashed var(--hair)
}

.page-platform .dash-alert:first-of-type {
  border-top: 0
}

.page-platform .dash-alert .pill {
  padding: 2px 8px;
  border-radius: 6px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .1em;
  text-transform: uppercase
}

.page-platform .dash-alert .pill.up {
  background: oklch(0.94 0.05 150);
  color: var(--forest)
}

.page-platform .dash-alert .pill.down {
  background: oklch(0.94 0.05 30);
  color: var(--tomato)
}

.page-platform .dash-alert .pill.new {
  background: oklch(0.94 0.05 75);
  color: #7a5a14
}

.page-platform .dash-alert .ts {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--muted);
  text-align: right
}

.page-platform .section-head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 32px;
  align-items: center;
  margin-bottom: 60px
}

@media (max-width:768px) {
  .page-platform .section-head {
    grid-template-columns: 1fr;
    gap: 18px
  }
}

.page-platform .section-num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--muted);
  text-transform: uppercase
}

.page-platform .section-head h2 {
  margin: 8px 0 0;
  text-wrap: balance;
  max-width: 18ch
}

.page-platform .section-head .right {
  max-width: 46ch;
  color: var(--ink-2);
  font-size: 16.5px;
  line-height: 1.55;
  justify-self: end
}

@media (max-width:768px) {
  .page-platform .section-head .right {
    justify-self: start
  }
}

.page-platform .pillar-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px
}

@media (max-width:1024px) {
  .page-platform .pillar-grid {
    grid-template-columns: 1fr
  }
}

.page-platform .pillar-card {
  background: var(--paper);
  border: 1px solid var(--hair);
  border-radius: 20px;
  padding: 36px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 28px;
  transition: transform .3s, box-shadow .3s, border-color .3s
}

.page-platform .pillar-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card);
  border-color: var(--hair-2)
}

.page-platform .pillar-num {
  font-family: var(--serif);
  font-size: 64px;
  line-height: .9;
  color: var(--tomato);
  font-style: italic;
  letter-spacing: -0.04em
}

.page-platform .pillar-card h3 {
  font-family: var(--serif);
  font-size: 32px;
  font-weight: 400;
  letter-spacing: -0.01em;
  margin: 0 0 10px;
  line-height: 1.1
}

.page-platform .pillar-card p {
  margin: 0 0 16px;
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.55
}

.page-platform .pillar-card ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13.5px;
  color: var(--ink-2);
  font-family: var(--mono)
}

.page-platform .pillar-card ul li::before {
  content: "↳ ";
  color: var(--muted)
}

.page-platform .how-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  position: relative
}

@media (max-width:1024px) {
  .page-platform .how-row {
    grid-template-columns: 1fr
  }
}

.page-platform .how-card {
  background: var(--paper);
  border: 1px solid var(--hair);
  border-radius: 20px;
  padding: 32px;
  position: relative
}

.page-platform .how-step {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 14px
}

.page-platform .how-card h4 {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 400;
  letter-spacing: -0.01em;
  margin: 0 0 12px;
  line-height: 1.1
}

.page-platform .how-card p {
  margin: 0;
  color: var(--ink-2);
  font-size: 14.5px;
  line-height: 1.55
}

.page-platform .how-illus {
  height: 140px;
  border: 1px solid var(--hair);
  border-radius: 14px;
  background: var(--bg);
  margin-bottom: 18px;
  position: relative;
  overflow: hidden
}

.page-platform .platforms {
  padding: 48px 0;
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair)
}

.page-platform .platforms-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap
}

.page-platform .platforms-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  max-width: 160px;
  line-height: 1.4
}

.page-platform .platform-chips {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center
}

.page-platform .chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: 1px solid var(--hair-2);
  border-radius: 999px;
  font-size: 14px;
  background: var(--paper);
  transition: transform .2s, border-color .2s
}

.page-platform .chip:hover {
  transform: translateY(-2px);
  border-color: var(--ink)
}

.page-platform .chip-icon {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 12px;
  color: var(--bg);
  font-weight: 600
}

.page-platform .preview-wrap {
  position: relative
}

.page-platform .preview-frame {
  background: var(--paper);
  border: 1px solid var(--hair-2);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(26, 24, 20, .06), 0 50px 90px -50px rgba(26, 24, 20, .35);
}

.page-platform .preview-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--hair);
  background: var(--bg-2)
}

.page-platform .preview-bar .dots {
  display: flex;
  gap: 6px
}

.page-platform .preview-bar .dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--hair-2)
}

.page-platform .preview-bar .url {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--paper);
  padding: 6px 14px;
  border-radius: 8px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  border: 1px solid var(--hair)
}

.page-platform .preview-grid {
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: 560px
}

@media (max-width:1024px) {
  .page-platform .preview-grid {
    grid-template-columns: 1fr
  }
}

.page-platform .preview-side {
  background: var(--bg-2);
  border-right: 1px solid var(--hair);
  padding: 22px 18px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-2)
}

.page-platform .preview-side .nv-section {
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 14px 0 8px
}

.page-platform .preview-side .nv-section:first-child {
  margin-top: 0
}

.page-platform .preview-side .nv-item {
  padding: 8px 10px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 2px;
  cursor: default
}

.page-platform .preview-side .nv-item.cur {
  background: var(--ink);
  color: var(--bg)
}

.page-platform .preview-side .nv-item .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--hair-2)
}

.page-platform .preview-side .nv-item.cur .dot {
  background: var(--gold)
}

.page-platform .preview-main {
  padding: 28px;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  grid-template-rows: auto auto auto;
  gap: 18px;
  background: var(--paper)
}

@media (max-width:768px) {
  .page-platform .preview-main {
    grid-template-columns: 1fr;
    padding: 20px
  }
}

.page-platform .pm-card {
  background: var(--bg);
  border: 1px solid var(--hair);
  border-radius: 14px;
  padding: 18px;
  position: relative
}

.page-platform .pm-card.span {
  grid-column: 1/-1
}

.page-platform .pm-card h5 {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 400;
  margin: 0;
  letter-spacing: -0.005em
}

.page-platform .pm-card .sub {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 4px
}

.page-platform .pm-gauge-row {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 16px
}

.page-platform .pm-gauge-big {
  position: relative;
  width: 130px;
  height: 130px;
  flex-shrink: 0
}

.page-platform .pm-gauge-big svg {
  width: 100%;
  height: 100%
}

.page-platform .pm-gauge-big .vv {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 38px;
  line-height: 1;
  letter-spacing: -.02em
}

.page-platform .pm-gauge-big .vv small {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 4px;
  font-weight: 400;
  letter-spacing: .14em
}

.page-platform .pm-gauge-meta {
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink-2)
}

.page-platform .pm-gauge-meta b {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 400;
  color: var(--forest)
}

.page-platform .timeline {
  display: flex;
  align-items: end;
  gap: 6px;
  height: 120px;
  margin-top: 14px
}

.page-platform .timeline span {
  flex: 1;
  background: var(--ink);
  opacity: .85;
  border-radius: 3px;
  position: relative
}

.page-platform .timeline span.peak {
  background: var(--tomato)
}

.page-platform .timeline-axis {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--muted);
  margin-top: 6px;
  letter-spacing: .08em
}

.page-platform .alert-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px
}

.page-platform .alert-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
  font-size: 13px;
  padding: 10px;
  background: var(--paper);
  border: 1px solid var(--hair);
  border-radius: 10px
}

.page-platform .alert-item .pill {
  padding: 3px 8px;
  border-radius: 6px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .1em;
  text-transform: uppercase
}

.page-platform .alert-item .pill.up {
  background: oklch(0.94 0.05 150);
  color: var(--forest)
}

.page-platform .alert-item .pill.down {
  background: oklch(0.94 0.05 30);
  color: var(--tomato)
}

.page-platform .alert-item .pill.new {
  background: oklch(0.94 0.05 75);
  color: #7a5a14
}

.page-platform .alert-item .ts {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--muted)
}

.page-platform .watch-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 14px
}

.page-platform .watch {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
  font-size: 13px;
  padding: 10px;
  background: var(--paper);
  border: 1px solid var(--hair);
  border-radius: 10px
}

.page-platform .watch .av {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: linear-gradient(135deg, var(--tomato), var(--gold));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bg);
  font-family: var(--serif);
  font-size: 14px
}

.page-platform .watch .delta {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--forest)
}

.page-platform .watch .delta.dn {
  color: var(--tomato)
}

.page-platform .pin {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--ink);
  background: var(--gold);
  padding: 6px 12px;
  border-radius: 999px;
  box-shadow: 0 8px 20px -10px rgba(26, 24, 20, .4);
  white-space: nowrap;
  z-index: 2
}

.page-platform .pin::before {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 0 var(--gold)
}

.page-platform .pin.tl {
  top: -12px;
  left: 200px
}

.page-platform .pin.tr {
  top: 130px;
  right: -180px
}

.page-platform .pin.bl {
  bottom: -12px;
  left: 80px
}

.page-platform .pin.br {
  bottom: 140px;
  right: -200px
}


@media (max-width:1280px) {
  .page-platform .pin {
    display: none
  }
}

.pillar-num {
  font-size: 30px !important;
}

.page-platform .compare-wrap {
  border: 1px solid var(--ink);
  border-radius: 20px;
  overflow: hidden;
  background: var(--paper)
}

.page-platform .compare-row {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  border-bottom: 1px solid var(--hair)
}

.page-platform .compare-row:last-child {
  border-bottom: 0
}

.page-platform .compare-row>div {
  padding: 22px 26px;
  display: flex;
  align-items: center;
  font-size: 15px;
  line-height: 1.4
}

.page-platform .compare-row.head>div {
  background: var(--bg-2);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted)
}

.page-platform .compare-row.head>div.us {
  background: var(--ink);
  color: var(--bg)
}

.page-platform .compare-row .feat {
  font-family: var(--serif);
  font-size: 18px;
  background: var(--bg)
}

.page-platform .compare-row .col-us {
  background: rgba(168, 57, 30, .04);
  color: var(--ink)
}

.page-platform .compare-row .check {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--forest);
  color: var(--bg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
  font-size: 11px;
  flex-shrink: 0
}

.page-platform .compare-row .x {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--hair-2);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
  font-size: 11px;
  flex-shrink: 0
}

@media (max-width:768px) {
  .page-platform .compare-row {
    grid-template-columns: 1fr
  }

  .page-platform .compare-row>div {
    padding: 14px 18px
  }
}

.page-platform .cta-strip {
  background: var(--ink);
  color: var(--bg);
  border-radius: 24px;
  padding: 80px 64px;
  display: grid;
  grid-template-columns: 1.4fr auto;
  gap: 48px;
  align-items: center
}

@media (max-width:1024px) {
  .page-platform .cta-strip {
    grid-template-columns: 1fr;
    padding: 48px 36px
  }
}

.page-platform .cta-strip h2 {
  margin: 0;
  color: var(--bg)
}

.page-platform .cta-strip h2 em {
  color: var(--gold)
}

.page-platform .cta-strip p {
  color: rgba(244, 239, 230, .78);
  font-size: 16px;
  line-height: 1.55;
  max-width: 50ch;
  margin: 18px 0 0
}

.page-platform .cta-strip .btn-primary {
  background: var(--gold);
  color: var(--ink)
}

.page-platform .cta-strip .btn-primary:hover {
  background: var(--bg);
  color: var(--ink)
}

.page-platform footer {
  background: var(--ink);
  color: var(--bg);
  padding: 80px 0 32px
}

.page-platform .footer-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(4, 1fr);
  gap: 40px;
  margin-bottom: 60px
}

@media (max-width:1024px) {
  .page-platform .footer-grid {
    grid-template-columns: 1fr 1fr
  }
}

@media (max-width:560px) {
  .page-platform .footer-grid {
    grid-template-columns: 1fr
  }
}

.page-platform .footer-brand p {
  color: rgba(244, 239, 230, .6);
  font-size: 14px;
  line-height: 1.55;
  max-width: 30ch;
  margin: 14px 0 0
}

.page-platform .footer-col h5 {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(244, 239, 230, .5);
  margin: 0 0 16px;
  font-weight: 500
}

.page-platform .footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 14px
}

.page-platform .footer-col a {
  color: rgba(244, 239, 230, .85);
  transition: color .2s
}

.page-platform .footer-col a:hover {
  color: var(--gold)
}

.page-platform .footer-bottom {
  padding-top: 32px;
  border-top: 1px solid rgba(255, 255, 255, .08);
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: rgba(244, 239, 230, .5);
  flex-wrap: wrap;
  gap: 18px
}

.page-platform .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s cubic-bezier(.2, .8, .2, 1), transform .7s cubic-bezier(.2, .8, .2, 1)
}

.page-platform .reveal.in {
  opacity: 1;
  transform: translateY(0)
}

@media (prefers-reduced-motion:reduce) {
  .page-platform *, .page-platform *::before, .page-platform *::after {
    animation: none !important;
    transition: none !important
  }

  .page-platform .reveal {
    opacity: 1;
    transform: none
  }
}

@media print {
  .page-platform .nav, .page-platform .cta-strip, .page-platform footer, .page-platform .menu-btn, .page-platform .drawer {
    display: none !important
  }

  .page-platform body {
    background: #fff;
    color: #000
  }

  .page-platform section {
    padding: 24px 0;
    page-break-inside: avoid
  }
}

.page-platform :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--ring-w) solid var(--ring);
  outline-offset: var(--ring-off)
}

.page-platform .on-ink, .page-platform footer {
  --ring: var(--gold)
}

/* ====================================================================
   PAGE: insights   (scope: .page-insights)
   ==================================================================== */
:root.page-insights {
  --ring: oklch(0.54 0.19 30);
  --ring-w: 2px;
  --ring-off: 2px;
  --bg: #F4EFE6;
  --bg-2: #EBE4D6;
  --paper: #FBF8F2;
  --ink: #1A1814;
  --ink-2: #2C2823;
  --muted: #6B6258;
  --hair: rgba(26, 24, 20, .12);
  --hair-2: rgba(26, 24, 20, .22);
  --tomato: oklch(0.54 0.19 30);
  --forest: oklch(0.42 0.08 150);
  --gold: oklch(0.74 0.13 75);
  --shadow-card: 0 1px 0 rgba(26, 24, 20, .06), 0 12px 28px -18px rgba(26, 24, 20, .18);
  --serif: "Instrument Serif", Georgia, serif;
  --sans: "Geist", -apple-system, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace
}

.page-insights *, .page-insights *::before, .page-insights *::after {
  box-sizing: border-box
}

html.page-insights, .page-insights body {
  margin: 0;
  padding: 0
}

html.page-insights {
  scroll-behavior: smooth
}

.page-insights body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased
}

.page-insights img {
  max-width: 100%;
  display: block
}

.page-insights a {
  color: inherit;
  text-decoration: none
}

.page-insights button {
  font: inherit;
  color: inherit;
  cursor: pointer;
  border: 0;
  background: none;
  padding: 0
}

.page-insights ::selection {
  background: var(--ink);
  color: var(--bg)
}

.page-insights .display {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 0.96
}

.page-insights .display em {
  font-style: italic;
  color: var(--tomato)
}

.page-insights h1.display {
  font-size: clamp(44px, 7vw, 96px)
}

.page-insights h2.display {
  font-size: clamp(36px, 5.4vw, 64px)
}

.page-insights h3.display {
  font-size: clamp(22px, 2.4vw, 30px)
}

.page-insights .eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 8px
}

.page-insights .eyebrow::before {
  content: "";
  width: 18px;
  height: 1px;
  background: currentColor
}

.page-insights .wrap {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 32px
}

.page-insights section {
  padding: 80px 0;
  position: relative
}

@media (max-width:768px) {
  .page-insights section {
    padding: 50px 0
  }

  .page-insights .wrap {
    padding: 0 20px
  }
}

.page-insights .btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: 999px;
  font-weight: 500;
  font-size: 15px;
  transition: transform .25s, background .2s, color .2s;
  white-space: nowrap
}

.page-insights .btn-primary {
  background: var(--ink);
  color: var(--bg);
  box-shadow: 0 8px 18px -10px rgba(26, 24, 20, .6)
}

.page-insights .btn-primary:hover {
  transform: translateY(-1px);
  background: var(--tomato)
}

.page-insights .btn-secondary {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink)
}

.page-insights .btn-secondary:hover {
  background: var(--ink);
  color: var(--bg);
  transform: translateY(-1px)
}

.page-insights .btn .arr {
  transition: transform .25s
}

.page-insights .btn:hover .arr {
  transform: translateX(3px)
}

.page-insights .nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(244, 239, 230, .78);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--hair)
}

.page-insights .nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  gap: 28px
}

.page-insights .brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--serif);
  font-size: 24px;
  letter-spacing: -0.01em
}

.page-insights .brand svg {
  width: 34px;
  height: 34px
}

.page-insights .nav-links {
  display: flex;
  gap: 6px;
  align-items: center
}

.page-insights .nav-links a {
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 14.5px;
  color: var(--ink-2);
  transition: background .15s, color .15s
}

.page-insights .nav-links a:hover, .page-insights .nav-links a.cur {
  background: rgba(26, 24, 20, .06);
  color: var(--ink)
}

.page-insights .nav-cta {
  display: flex;
  align-items: center;
  gap: 8px
}

.page-insights .fix-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--bg);
  font-size: 13px;
  font-weight: 500;
  transition: background .2s, transform .25s
}

.page-insights .fix-pill:hover {
  background: var(--tomato);
  transform: translateY(-1px)
}

.page-insights .fix-pill .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  animation: page-insights__pulse 2.4s infinite
}

@keyframes page-insights__pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(218, 170, 72, .7)
  }

  70% {
    box-shadow: 0 0 0 8px rgba(218, 170, 72, 0)
  }

  100% {
    box-shadow: 0 0 0 0 rgba(218, 170, 72, 0)
  }
}

.page-insights .menu-btn {
  display: none;
  width: 42px;
  height: 42px;
  border: 1px solid var(--hair-2);
  border-radius: 10px;
  align-items: center;
  justify-content: center
}

.page-insights .menu-btn span {
  display: block;
  width: 18px;
  height: 1.5px;
  background: var(--ink);
  position: relative
}

.page-insights .menu-btn span::before, .page-insights .menu-btn span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px;
  height: 1.5px;
  background: var(--ink)
}

.page-insights .menu-btn span::before {
  top: -6px
}

.page-insights .menu-btn span::after {
  top: 6px
}

@media (max-width:1200px) {
  .page-insights .nav-links {
    display: none
  }

  .page-insights .menu-btn {
    display: flex
  }
}

.page-insights .drawer {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--bg);
  transform: translateX(100%);
  transition: transform .35s cubic-bezier(.2, .8, .2, 1);
  padding: 24px
}

.page-insights .drawer.open {
  transform: translateX(0)
}

.page-insights .drawer-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--hair)
}

.page-insights .drawer-links {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 24px
}

.page-insights .drawer-links a {
  font-family: var(--serif);
  font-size: 32px;
  padding: 12px 0;
  border-bottom: 1px solid var(--hair)
}

.page-insights .section-head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 32px;
  align-items: center;
  margin-bottom: 60px
}

@media (max-width:768px) {
  .page-insights .section-head {
    grid-template-columns: 1fr;
    gap: 18px
  }
}

.page-insights .section-num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .16em;
  color: var(--muted);
  text-transform: uppercase
}

.page-insights .section-head h2 {
  margin: 8px 0 0;
  text-wrap: balance;
  max-width: 18ch
}

.page-insights .section-head .right {
  max-width: 46ch;
  color: var(--ink-2);
  font-size: 16.5px;
  line-height: 1.55;
  justify-self: end
}

@media (max-width:768px) {
  .page-insights .section-head .right {
    justify-self: start
  }
}

.page-insights .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s cubic-bezier(.2, .8, .2, 1), transform .7s cubic-bezier(.2, .8, .2, 1)
}

.page-insights .reveal.in {
  opacity: 1;
  transform: none
}

@media (prefers-reduced-motion:reduce) {
  .page-insights *, .page-insights *::before, .page-insights *::after {
    animation: none !important;
    transition: none !important
  }

  .page-insights .reveal {
    opacity: 1;
    transform: none
  }
}

@media print {
  .page-insights .nav, .page-insights footer, .page-insights .menu-btn, .page-insights .drawer {
    display: none !important
  }

  .page-insights body {
    background: #fff;
    color: #000
  }

  .page-insights section {
    padding: 24px 0;
    page-break-inside: avoid
  }
}

.page-insights .hero {
  padding: 80px 0 60px;
  text-align: center
}

.page-insights .hero h1 {
  margin: 18px auto 24px;
  text-wrap: balance;
  max-width: 18ch
}

.page-insights .hero p.sub {
  margin: 0 auto 36px;
  font-size: clamp(17px, 1.3vw, 21px);
  color: var(--ink-2);
  max-width: 60ch;
  line-height: 1.55
}

.page-insights .subscribe {
  max-width: 520px;
  margin: 0 auto;
  display: flex;
  background: var(--paper);
  border: 1px solid var(--ink);
  border-radius: 999px;
  padding: 6px;
  transition: box-shadow .25s;
}

.page-insights .subscribe:focus-within {
  box-shadow: 0 0 0 4px rgba(26, 24, 20, .08)
}

.page-insights .subscribe input {
  flex: 1;
  border: 0;
  background: transparent;
  outline: 0;
  padding: 0 20px;
  font-size: 15.5px;
  font-family: var(--sans);
  color: var(--ink);
}

.page-insights .subscribe input::placeholder {
  color: var(--muted)
}

.page-insights .subscribe button {
  background: var(--ink);
  color: var(--bg);
  padding: 12px 22px;
  border-radius: 999px;
  font-weight: 500;
  font-size: 14.5px;
  transition: background .2s
}

.page-insights .subscribe button:hover {
  background: var(--tomato)
}

.page-insights .sub-meta {
  margin-top: 14px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted)
}

.page-insights .feat {
  background: var(--ink);
  color: var(--bg);
  border-radius: 24px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 0;
  box-shadow: 0 1px 0 rgba(26, 24, 20, .06), 0 50px 90px -50px rgba(26, 24, 20, .45);
  transition: transform .35s
}

.page-insights .feat:hover {
  transform: translateY(-4px)
}

@media (max-width:1024px) {
  .page-insights .feat {
    grid-template-columns: 1fr
  }
}

.page-insights .feat .text {
  padding: 56px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  justify-content: center
}

@media (max-width:768px) {
  .page-insights .feat .text {
    padding: 36px
  }
}

.page-insights .feat .lab {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold)
}

.page-insights .feat h2 {
  margin: 0;
  color: var(--bg);
  text-wrap: balance
}

.page-insights .feat p {
  margin: 0;
  color: rgba(244, 239, 230, .78);
  font-size: 16px;
  line-height: 1.55;
  max-width: 50ch
}

.page-insights .feat .meta {
  display: flex;
  gap: 14px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(244, 239, 230, .5)
}

.page-insights .feat .read {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: .04em;
  color: var(--gold);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px
}

.page-insights .feat .read .a {
  transition: transform .25s
}

.page-insights .feat:hover .read .a {
  transform: translateX(4px)
}

.page-insights .feat .visual {
  position: relative;
  background: linear-gradient(135deg, #1A1814, #2C2823);
  min-height: 340px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  overflow: hidden
}

.page-insights .feat-orb {
  width: 340px;
  max-width: 80%;
  aspect-ratio: 1;
  position: relative
}

.page-insights .feat-orb svg {
  width: 100%;
  height: 100%
}

.page-insights .feat-orb .ring1 {
  animation: page-insights__spin 50s linear infinite
}

.page-insights .feat-orb .ring2 {
  animation: page-insights__spin 70s linear infinite reverse
}

@keyframes page-insights__spin {
  to {
    transform: rotate(360deg)
  }
}

.page-insights .feat-orb-num {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  font-family: var(--serif);
  color: var(--gold)
}

.page-insights .feat-orb-num .big {
  font-size: 84px;
  letter-spacing: -0.04em;
  line-height: 1
}

.page-insights .feat-orb-num .lbl {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  color: rgba(244, 239, 230, .6);
  margin-top: 4px;
  text-transform: uppercase
}

.page-insights .pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center
}

.page-insights .pills a {
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid var(--hair-2);
  font-size: 13.5px;
  font-family: var(--mono);
  letter-spacing: .04em;
  background: var(--paper);
  color: var(--ink);
  transition: background .2s, color .2s, border-color .2s, transform .2s
}

.page-insights .pills a:hover {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
  transform: translateY(-2px)
}

.page-insights .pills a.cur {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink)
}

.page-insights .art-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px
}

@media (max-width:1024px) {
  .page-insights .art-grid {
    grid-template-columns: 1fr 1fr
  }
}

@media (max-width:560px) {
  .page-insights .art-grid {
    grid-template-columns: 1fr
  }
}

.page-insights .subscribe input {
  flex: 1;
  min-width: 0;
  border: 1px solid transparent;
  background: transparent;
  outline: 0;
  padding: 6px 15px;
  font-size: 15.5px;
  font-family: var(--sans);
  color: var(--ink);
  border-radius: 30px;
}

.page-insights .art {
  background: var(--paper);
  border: 1px solid var(--hair);
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .25s, box-shadow .25s, border-color .25s;
  cursor: pointer
}

.page-insights .art:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card);
  border-color: var(--hair-2)
}

.page-insights .art .cover {
  aspect-ratio: 16/10;
  background: var(--bg-2);
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--hair)
}

.page-insights .art .cover svg {
  width: 100%;
  height: 100%;
  display: block
}

.page-insights .art .body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1
}

.page-insights .art .topic {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tomato)
}

.page-insights .art h3 {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 400;
  line-height: 1.15;
  margin: 0;
  letter-spacing: -0.005em;
  text-wrap: balance
}

.page-insights .art p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-2)
}

.page-insights .art .meta {
  margin-top: auto;
  padding-top: 14px;
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--muted);
  text-transform: uppercase;
  border-top: 1px dashed var(--hair)
}

.page-insights .cv-bars {
  background: linear-gradient(180deg, #FBF8F2, #EBE4D6)
}

.page-insights .cv-bars rect {
  transition: transform .35s
}

.page-insights .art:hover .cv-bars rect:nth-child(odd) {
  transform: translateY(-3px)
}

.page-insights .cv-orb {
  background: #1A1814
}

.page-insights .cv-grid {
  background: repeating-linear-gradient(0deg, transparent 0 23px, rgba(26, 24, 20, .08) 23px 24px), repeating-linear-gradient(90deg, transparent 0 23px, rgba(26, 24, 20, .08) 23px 24px), #FBF8F2
}

.page-insights .cv-curve {
  background: #FBF8F2
}

.page-insights .cv-bench {
  background: #EBE4D6
}

.page-insights .cv-crawl {
  background: #1A1814
}

.page-insights .subscribe-strip {
  background: var(--paper);
  border: 1px solid var(--hair-2);
  border-radius: 24px;
  padding: 64px;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 48px;
  align-items: center
}

@media (max-width:1024px) {
  .page-insights .subscribe-strip {
    grid-template-columns: minmax(0, 1fr);
    padding: 40px
  }

  .page-insights .subscribe-strip .form {
    min-width: 0
  }

  .page-insights .subscribe-strip .subscribe {
    margin: 0;
    min-width: 0;
    max-width: none
  }
}

@media (max-width:560px) {
  .page-insights .subscribe-strip {
    padding: 32px 22px
  }
}

.page-insights .subscribe-strip h2 {
  margin: 0;
  text-wrap: balance
}

.page-insights .subscribe-strip h2 em {
  color: var(--tomato);
  font-style: italic
}

.page-insights .subscribe-strip p {
  margin: 14px 0 0;
  font-size: 15.5px;
  color: var(--ink-2);
  line-height: 1.55;
  max-width: 48ch
}

.page-insights .subscribe-strip .form {
  display: flex;
  flex-direction: column;
  gap: 14px
}

.page-insights footer {
  background: var(--ink);
  color: var(--bg);
  padding: 80px 0 32px
}

.page-insights .footer-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(4, 1fr);
  gap: 40px;
  margin-bottom: 60px
}

@media (max-width:1024px) {
  .page-insights .footer-grid {
    grid-template-columns: 1fr 1fr
  }
}

@media (max-width:560px) {
  .page-insights .footer-grid {
    grid-template-columns: 1fr
  }
}

.page-insights .footer-brand p {
  color: rgba(244, 239, 230, .6);
  font-size: 14px;
  line-height: 1.55;
  max-width: 30ch;
  margin: 14px 0 0
}

.page-insights .footer-col h5 {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(244, 239, 230, .5);
  margin: 0 0 16px;
  font-weight: 500
}

.page-insights .footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 14px
}

.page-insights .footer-col a {
  color: rgba(244, 239, 230, .85);
  transition: color .2s
}

.page-insights .footer-col a:hover {
  color: var(--gold)
}

.page-insights .footer-bottom {
  padding-top: 32px;
  border-top: 1px solid rgba(255, 255, 255, .08);
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: rgba(244, 239, 230, .5);
  flex-wrap: wrap;
  gap: 18px
}

.page-insights :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--ring-w) solid var(--ring);
  outline-offset: var(--ring-off)
}

.page-insights .on-ink, .page-insights footer {
  --ring: var(--gold)
}

/* ====================================================================
   PAGE: ai-replaced-you-with   (scope: .page-ai-replaced-you-with)
   ==================================================================== */
:root.page-ai-replaced-you-with {
  --ring: oklch(0.54 0.19 30);
  --ring-w: 2px;
  --ring-off: 2px;
  --bg: #F4EFE6;
  --bg-2: #EBE4D6;
  --paper: #FBF8F2;
  --ink: #1A1814;
  --ink-2: #2C2823;
  --muted: #6B6258;
  --hair: rgba(26, 24, 20, .12);
  --hair-2: rgba(26, 24, 20, .22);
  --tomato: oklch(0.54 0.19 30);
  --forest: oklch(0.42 0.08 150);
  --gold: oklch(0.74 0.13 75);
  --shadow-card: 0 1px 0 rgba(26, 24, 20, .06), 0 12px 28px -18px rgba(26, 24, 20, .18);
  --serif: "Instrument Serif", Georgia, serif;
  --sans: "Geist", -apple-system, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace
}

.page-ai-replaced-you-with *, .page-ai-replaced-you-with *::before, .page-ai-replaced-you-with *::after {
  box-sizing: border-box
}

html.page-ai-replaced-you-with, .page-ai-replaced-you-with body {
  margin: 0;
  padding: 0
}

html.page-ai-replaced-you-with {
  scroll-behavior: smooth
}

.page-ai-replaced-you-with body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased
}

.page-ai-replaced-you-with img {
  max-width: 100%;
  display: block
}

.page-ai-replaced-you-with a {
  color: inherit;
  text-decoration: none
}

.page-ai-replaced-you-with button {
  font: inherit;
  color: inherit;
  cursor: pointer;
  border: 0;
  background: none;
  padding: 0
}

.page-ai-replaced-you-with ::selection {
  background: var(--ink);
  color: var(--bg)
}

.page-ai-replaced-you-with .display {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 0.96
}

.page-ai-replaced-you-with .display em {
  font-style: italic;
  color: var(--tomato)
}

.page-ai-replaced-you-with h1.display {
  font-size: clamp(44px, 7vw, 96px)
}

.page-ai-replaced-you-with h2.display {
  font-size: clamp(36px, 5.4vw, 64px)
}

.page-ai-replaced-you-with h3.display {
  font-size: clamp(28px, 3.4vw, 48px)
}

.page-ai-replaced-you-with .eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 8px
}

.page-ai-replaced-you-with .eyebrow::before {
  content: "";
  width: 18px;
  height: 1px;
  background: currentColor
}

.page-ai-replaced-you-with .wrap {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 32px
}

.page-ai-replaced-you-with section {
  padding: 80px 0;
  position: relative
}

@media (max-width:768px) {
  .page-ai-replaced-you-with section {
    padding: 50px 0
  }

  .page-ai-replaced-you-with .wrap {
    padding: 0 20px
  }
}

.page-ai-replaced-you-with .btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: 999px;
  font-weight: 500;
  font-size: 15px;
  transition: transform .25s, background .2s, color .2s;
  white-space: nowrap
}

.page-ai-replaced-you-with .btn-primary {
  background: var(--ink);
  color: var(--bg);
  box-shadow: 0 8px 18px -10px rgba(26, 24, 20, .6)
}

.page-ai-replaced-you-with .btn-primary:hover {
  transform: translateY(-1px);
  background: var(--tomato)
}

.page-ai-replaced-you-with .btn-secondary {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink)
}

.page-ai-replaced-you-with .btn-secondary:hover {
  background: var(--ink);
  color: var(--bg);
  transform: translateY(-1px)
}

.page-ai-replaced-you-with .btn .arr {
  transition: transform .25s
}

.page-ai-replaced-you-with .btn:hover .arr {
  transform: translateX(3px)
}

.page-ai-replaced-you-with .nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(244, 239, 230, .78);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--hair)
}

.page-ai-replaced-you-with .nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  gap: 28px
}

.page-ai-replaced-you-with .brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--serif);
  font-size: 24px;
  letter-spacing: -0.01em
}

.page-ai-replaced-you-with .brand svg {
  width: 34px;
  height: 34px
}

.page-ai-replaced-you-with .nav-links {
  display: flex;
  gap: 6px;
  align-items: center
}

.page-ai-replaced-you-with .nav-links a {
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 14.5px;
  color: var(--ink-2);
  transition: background .15s, color .15s
}

.page-ai-replaced-you-with .nav-links a:hover, .page-ai-replaced-you-with .nav-links a.cur {
  background: rgba(26, 24, 20, .06);
  color: var(--ink)
}

.page-ai-replaced-you-with .nav-cta {
  display: flex;
  align-items: center;
  gap: 8px
}

.page-ai-replaced-you-with .fix-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--bg);
  font-size: 13px;
  font-weight: 500;
  transition: background .2s, transform .25s
}

.page-ai-replaced-you-with .fix-pill:hover {
  background: var(--tomato);
  transform: translateY(-1px)
}

.page-ai-replaced-you-with .fix-pill .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  animation: page-ai-replaced-you-with__pulse 2.4s infinite
}

@keyframes page-ai-replaced-you-with__pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(218, 170, 72, .7)
  }

  70% {
    box-shadow: 0 0 0 8px rgba(218, 170, 72, 0)
  }

  100% {
    box-shadow: 0 0 0 0 rgba(218, 170, 72, 0)
  }
}

.page-ai-replaced-you-with .menu-btn {
  display: none;
  width: 42px;
  height: 42px;
  border: 1px solid var(--hair-2);
  border-radius: 10px;
  align-items: center;
  justify-content: center
}

.page-ai-replaced-you-with .menu-btn span {
  display: block;
  width: 18px;
  height: 1.5px;
  background: var(--ink);
  position: relative
}

.page-ai-replaced-you-with .menu-btn span::before, .page-ai-replaced-you-with .menu-btn span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px;
  height: 1.5px;
  background: var(--ink)
}

.page-ai-replaced-you-with .menu-btn span::before {
  top: -6px
}

.page-ai-replaced-you-with .menu-btn span::after {
  top: 6px
}

@media (max-width:1200px) {
  .page-ai-replaced-you-with .nav-links {
    display: none
  }

  .page-ai-replaced-you-with .menu-btn {
    display: flex
  }
}

.page-ai-replaced-you-with .drawer {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--bg);
  transform: translateX(100%);
  transition: transform .35s cubic-bezier(.2, .8, .2, 1);
  padding: 24px
}

.page-ai-replaced-you-with .drawer.open {
  transform: translateX(0)
}

.page-ai-replaced-you-with .drawer-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--hair)
}

.page-ai-replaced-you-with .drawer-links {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 24px
}

.page-ai-replaced-you-with .drawer-links a {
  font-family: var(--serif);
  font-size: 32px;
  padding: 12px 0;
  border-bottom: 1px solid var(--hair)
}

.page-ai-replaced-you-with .section-head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 32px;
  align-items: center;
  margin-bottom: 60px
}

@media (max-width:768px) {
  .page-ai-replaced-you-with .section-head {
    grid-template-columns: 1fr;
    gap: 18px
  }
}

.page-ai-replaced-you-with .section-num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .16em;
  color: var(--muted);
  text-transform: uppercase
}

.page-ai-replaced-you-with .section-head h2 {
  margin: 8px 0 0;
  text-wrap: balance;
  max-width: 18ch
}

.page-ai-replaced-you-with .section-head .right {
  max-width: 46ch;
  color: var(--ink-2);
  font-size: 16.5px;
  line-height: 1.55;
  justify-self: end
}

@media (max-width:768px) {
  .page-ai-replaced-you-with .section-head .right {
    justify-self: start
  }
}

.page-ai-replaced-you-with .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s cubic-bezier(.2, .8, .2, 1), transform .7s cubic-bezier(.2, .8, .2, 1)
}

.page-ai-replaced-you-with .reveal.in {
  opacity: 1;
  transform: none
}

@media (prefers-reduced-motion:reduce) {
  .page-ai-replaced-you-with *, .page-ai-replaced-you-with *::before, .page-ai-replaced-you-with *::after {
    animation: none !important;
    transition: none !important
  }

  .page-ai-replaced-you-with .reveal {
    opacity: 1;
    transform: none
  }
}

@media print {
  .page-ai-replaced-you-with .nav, .page-ai-replaced-you-with footer, .page-ai-replaced-you-with .menu-btn, .page-ai-replaced-you-with .drawer, .page-ai-replaced-you-with .cta-strip {
    display: none !important
  }

  .page-ai-replaced-you-with body {
    background: #fff;
    color: #000
  }

  .page-ai-replaced-you-with section {
    padding: 24px 0;
    page-break-inside: avoid
  }
}

.page-ai-replaced-you-with .hero {
  padding-top: 48px;
  padding-bottom: 60px
}

.page-ai-replaced-you-with .hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center
}

@media (max-width:1024px) {
  .page-ai-replaced-you-with .hero-grid {
    grid-template-columns: 1fr
  }
}

.page-ai-replaced-you-with .hero h1 {
  margin: 0 0 20px;
  text-wrap: balance
}

.page-ai-replaced-you-with .hero-sub {
  margin: 0 0 28px;
  font-size: clamp(16.5px, 1.25vw, 19px);
  color: var(--ink-2);
  max-width: 54ch
}

.page-ai-replaced-you-with .hero-cta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap
}

.page-ai-replaced-you-with .chat-mock {
  background: var(--paper);
  border: 1px solid var(--hair-2);
  border-radius: 24px;
  padding: 24px;
  box-shadow: 0 1px 0 rgba(26, 24, 20, .06), 0 50px 90px -50px rgba(26, 24, 20, .35);
  position: relative
}

.page-ai-replaced-you-with .chat-mock .head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 18px
}

.page-ai-replaced-you-with .chat-mock .head .live {
  display: inline-flex;
  align-items: center;
  gap: 6px
}

.page-ai-replaced-you-with .chat-mock .head .live .d {
  width: 6px;
  height: 6px;
  background: var(--tomato);
  border-radius: 50%;
  animation: page-ai-replaced-you-with__pulse-r 1.6s infinite
}

@keyframes page-ai-replaced-you-with__pulse-r {
  0% {
    opacity: 1
  }

  50% {
    opacity: .3
  }

  100% {
    opacity: 1
  }
}

.page-ai-replaced-you-with .chat-q {
  background: var(--bg);
  border-radius: 14px;
  padding: 14px 18px;
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.4;
  color: var(--ink-2);
  margin-bottom: 14px;
  border-left: 3px solid var(--ink)
}

.page-ai-replaced-you-with .chat-a {
  background: transparent
}

.page-ai-replaced-you-with .chat-a .who {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 12px
}

.page-ai-replaced-you-with .chat-a .who .ic {
  width: 20px;
  height: 20px;
  border-radius: 5px;
  background: #10A37F;
  color: #fff;
  font-family: var(--serif);
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center
}

.page-ai-replaced-you-with .chat-a .body {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--ink)
}

.page-ai-replaced-you-with .chat-a .body p {
  margin: 0 0 10px
}

.page-ai-replaced-you-with .chat-a .body strong.win {
  background: linear-gradient(transparent 60%, oklch(0.74 0.13 75 / .5) 0);
  padding: 0 3px;
  font-weight: 600
}

.page-ai-replaced-you-with .chat-a .body strong.lose {
  color: var(--muted);
  text-decoration: line-through;
  text-decoration-color: var(--tomato);
  font-weight: 500
}

.page-ai-replaced-you-with .chat-a .pillrow {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--hair-2)
}

.page-ai-replaced-you-with .chat-a .pillrow span {
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--bg);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .06em;
  color: var(--ink-2);
  border: 1px solid var(--hair)
}

.page-ai-replaced-you-with .you-tag {
  position: absolute;
  top: -14px;
  right: 24px;
  background: var(--tomato);
  color: var(--bg);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 999px
}

.page-ai-replaced-you-with .shock {
  background: var(--ink);
  color: var(--bg);
  padding: 120px 0
}

.page-ai-replaced-you-with .shock-stat {
  font-family: var(--serif);
  font-size: clamp(96px, 18vw, 260px);
  line-height: .85;
  letter-spacing: -0.05em;
  color: var(--gold)
}

.page-ai-replaced-you-with .shock-stat sub {
  font-family: var(--sans);
  font-size: .18em;
  color: var(--bg);
  opacity: .7;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-left: 8px
}

.page-ai-replaced-you-with .shock-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 48px;
  align-items: end
}

@media (max-width:1024px) {
  .page-ai-replaced-you-with .shock-grid {
    grid-template-columns: 1fr
  }
}

.page-ai-replaced-you-with .shock p {
  font-family: var(--serif);
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.25;
  color: var(--bg);
  max-width: 24ch;
  margin: 0
}

.page-ai-replaced-you-with .shock .src {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(244, 239, 230, .5);
  margin-top: 24px
}

.page-ai-replaced-you-with .why4 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px
}

@media (max-width:768px) {
  .page-ai-replaced-you-with .why4 {
    grid-template-columns: 1fr
  }
}

.page-ai-replaced-you-with .wcard {
  background: var(--paper);
  border: 1px solid var(--hair);
  border-radius: 20px;
  padding: 32px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 24px;
  align-items: start;
  transition: transform .25s, box-shadow .25s
}

.page-ai-replaced-you-with .wcard:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card)
}

.page-ai-replaced-you-with .wcard .num {
  font-family: var(--serif);
  font-size: 48px;
  font-style: italic;
  color: var(--tomato);
  line-height: .9;
  letter-spacing: -0.02em
}

.page-ai-replaced-you-with .wcard h4 {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 400;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
  line-height: 1.15
}

.page-ai-replaced-you-with .wcard p {
  margin: 0;
  color: var(--ink-2);
  font-size: 14.5px;
  line-height: 1.55
}

.page-ai-replaced-you-with .dash {
  background: var(--paper);
  border: 1px solid var(--hair-2);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(26, 24, 20, .06), 0 50px 90px -50px rgba(26, 24, 20, .35)
}

.page-ai-replaced-you-with .dash-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--hair);
  background: var(--bg-2)
}

.page-ai-replaced-you-with .dash-bar .dots {
  display: flex;
  gap: 6px
}

.page-ai-replaced-you-with .dash-bar .dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--hair-2)
}

.page-ai-replaced-you-with .dash-bar .url {
  flex: 1;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  letter-spacing: .05em
}

.page-ai-replaced-you-with .dash-body {
  padding: 32px;
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 24px
}

@media (max-width:1024px) {
  .page-ai-replaced-you-with .dash-body {
    grid-template-columns: 1fr;
    padding: 20px
  }
}

.page-ai-replaced-you-with .dash-card {
  background: var(--bg);
  border: 1px solid var(--hair);
  border-radius: 14px;
  padding: 18px;
  margin-bottom: 14px
}

.page-ai-replaced-you-with .dash-card:last-child {
  margin-bottom: 0
}

.page-ai-replaced-you-with .dash-card h5 {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 12px;
  font-weight: 500;
  display: flex;
  justify-content: space-between
}

.page-ai-replaced-you-with .dash-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 14px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px dashed var(--hair)
}

.page-ai-replaced-you-with .dash-row:last-child {
  border-bottom: 0
}

.page-ai-replaced-you-with .dash-row .av {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 14px;
  color: var(--bg)
}

.page-ai-replaced-you-with .dash-row .nm {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.1
}

.page-ai-replaced-you-with .dash-row .nm small {
  display: block;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--muted);
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-top: 2px
}

.page-ai-replaced-you-with .dash-row .freq {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink);
  text-align: right;
  min-width: 48px
}

.page-ai-replaced-you-with .dash-row .delta {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .04em;
  padding: 3px 8px;
  border-radius: 6px
}

.page-ai-replaced-you-with .dash-row .delta.up {
  background: oklch(0.54 0.19 30 / .14);
  color: var(--tomato)
}

.page-ai-replaced-you-with .dash-row .delta.down {
  background: oklch(0.42 0.08 150 / .14);
  color: var(--forest)
}

.page-ai-replaced-you-with .you-row {
  background: var(--ink);
  color: var(--bg);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px
}

.page-ai-replaced-you-with .you-row .l {
  display: flex;
  align-items: center;
  gap: 10px
}

.page-ai-replaced-you-with .you-row .av {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--tomato);
  color: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 14px
}

.page-ai-replaced-you-with .you-row .nm {
  font-family: var(--serif);
  font-size: 17px
}

.page-ai-replaced-you-with .you-row .freq {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--gold)
}

.page-ai-replaced-you-with .costs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px
}

@media (max-width:1024px) {
  .page-ai-replaced-you-with .costs {
    grid-template-columns: 1fr
  }
}

.page-ai-replaced-you-with .cost {
  background: var(--paper);
  border: 1px solid var(--hair);
  border-radius: 20px;
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  gap: 14px
}

.page-ai-replaced-you-with .cost .stat {
  font-family: var(--serif);
  font-size: clamp(56px, 7vw, 88px);
  line-height: .9;
  letter-spacing: -0.03em;
  color: var(--ink)
}

.page-ai-replaced-you-with .cost .stat em {
  color: var(--tomato);
  font-style: normal
}

.page-ai-replaced-you-with .cost h4 {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 400;
  margin: 0;
  letter-spacing: -0.01em;
  line-height: 1.15
}

.page-ai-replaced-you-with .cost p {
  margin: 0;
  color: var(--ink-2);
  font-size: 14.5px;
  line-height: 1.55
}

.page-ai-replaced-you-with .fix3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  counter-reset: f
}

@media (max-width:1024px) {
  .page-ai-replaced-you-with .fix3 {
    grid-template-columns: 1fr
  }
}

.page-ai-replaced-you-with .fcard {
  background: var(--paper);
  border: 1px solid var(--hair);
  border-radius: 20px;
  padding: 32px;
  counter-increment: f;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative
}

.page-ai-replaced-you-with .fcard::before {
  content: "0"counter(f);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--muted);
  text-transform: uppercase
}

.page-ai-replaced-you-with .fcard h4 {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 400;
  margin: 0;
  letter-spacing: -0.01em;
  line-height: 1.1
}

.page-ai-replaced-you-with .fcard p {
  margin: 0;
  color: var(--ink-2);
  font-size: 14.5px;
  line-height: 1.55
}

.page-ai-replaced-you-with .case {
  background: var(--ink);
  color: var(--bg);
  border-radius: 24px;
  padding: 64px;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 48px;
  align-items: center
}

@media (max-width:1024px) {
  .page-ai-replaced-you-with .case {
    grid-template-columns: 1fr;
    padding: 40px
  }
}

.page-ai-replaced-you-with .case .quote {
  font-family: var(--serif);
  font-size: clamp(28px, 2.6vw, 38px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--bg);
  text-wrap: balance
}

.page-ai-replaced-you-with .case .who {
  margin-top: 24px;
  display: flex;
  align-items: center;
  gap: 14px
}

.page-ai-replaced-you-with .case .who .av {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center
}

.page-ai-replaced-you-with .case .who .meta {
  font-size: 14px
}

.page-ai-replaced-you-with .case .who .meta strong {
  display: block;
  font-weight: 500
}

.page-ai-replaced-you-with .case .who .meta span {
  color: rgba(244, 239, 230, .6);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase
}

.page-ai-replaced-you-with .case-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px
}

.page-ai-replaced-you-with .cstat {
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 16px;
  padding: 20px
}

.page-ai-replaced-you-with .cstat .lbl {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(244, 239, 230, .55);
  margin-bottom: 10px
}

.page-ai-replaced-you-with .cstat .val {
  font-family: var(--serif);
  font-size: 36px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--gold)
}

.page-ai-replaced-you-with .cstat .val em {
  color: var(--bg);
  font-style: normal;
  font-size: .55em;
  margin-left: 4px
}

.page-ai-replaced-you-with .cstat .sub {
  font-family: var(--mono);
  font-size: 11px;
  color: rgba(244, 239, 230, .6);
  margin-top: 8px
}

.page-ai-replaced-you-with .cta-strip {
  background: var(--ink);
  color: var(--bg);
  border-radius: 24px;
  padding: 80px 64px;
  display: grid;
  grid-template-columns: 1.4fr auto;
  gap: 48px;
  align-items: center
}

@media (max-width:1024px) {
  .page-ai-replaced-you-with .cta-strip {
    grid-template-columns: 1fr;
    padding: 48px 36px
  }
}

.page-ai-replaced-you-with .cta-strip h2 {
  margin: 0;
  color: var(--bg)
}

.page-ai-replaced-you-with .cta-strip h2 em {
  color: var(--gold)
}

.page-ai-replaced-you-with .cta-strip p {
  color: rgba(244, 239, 230, .78);
  font-size: 16px;
  line-height: 1.55;
  max-width: 50ch;
  margin: 18px 0 0
}

.page-ai-replaced-you-with .cta-strip .btn-primary {
  background: var(--gold);
  color: var(--ink)
}

.page-ai-replaced-you-with .cta-strip .btn-primary:hover {
  background: var(--bg);
  color: var(--ink)
}

.page-ai-replaced-you-with footer {
  background: var(--ink);
  color: var(--bg);
  padding: 80px 0 32px
}

.page-ai-replaced-you-with .footer-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(4, 1fr);
  gap: 40px;
  margin-bottom: 60px
}

@media (max-width:1024px) {
  .page-ai-replaced-you-with .footer-grid {
    grid-template-columns: 1fr 1fr
  }
}

@media (max-width:560px) {
  .page-ai-replaced-you-with .case-stats {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 14px
  }

  .page-ai-replaced-you-with .wcard .num {
    font-size: 30px;
  }

  .page-ai-replaced-you-with .footer-grid {
    grid-template-columns: 1fr
  }
}

.page-ai-replaced-you-with .footer-brand p {
  color: rgba(244, 239, 230, .6);
  font-size: 14px;
  line-height: 1.55;
  max-width: 30ch;
  margin: 14px 0 0
}

.page-ai-replaced-you-with .footer-col h5 {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(244, 239, 230, .5);
  margin: 0 0 16px;
  font-weight: 500
}

.page-ai-replaced-you-with .footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 14px
}

.page-ai-replaced-you-with .footer-col a {
  color: rgba(244, 239, 230, .85);
  transition: color .2s
}

.page-ai-replaced-you-with .footer-col a:hover {
  color: var(--gold)
}

.page-ai-replaced-you-with .footer-bottom {
  padding-top: 32px;
  border-top: 1px solid rgba(255, 255, 255, .08);
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: rgba(244, 239, 230, .5);
  flex-wrap: wrap;
  gap: 18px
}

.page-ai-replaced-you-with :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--ring-w) solid var(--ring);
  outline-offset: var(--ring-off)
}

.page-ai-replaced-you-with .on-ink, .page-ai-replaced-you-with footer {
  --ring: var(--gold)
}

/* ====================================================================
   PAGE: ai-share-of-voice   (scope: .page-ai-share-of-voice)
   ==================================================================== */
:root.page-ai-share-of-voice {
  --ring: oklch(0.54 0.19 30);
  --ring-w: 2px;
  --ring-off: 2px;
  --bg: #F4EFE6;
  --bg-2: #EBE4D6;
  --paper: #FBF8F2;
  --ink: #1A1814;
  --ink-2: #2C2823;
  --muted: #6B6258;
  --hair: rgba(26, 24, 20, 0.12);
  --hair-2: rgba(26, 24, 20, 0.22);
  --tomato: oklch(0.54 0.19 30);
  --forest: oklch(0.42 0.08 150);
  --gold: oklch(0.74 0.13 75);
  --invis: oklch(0.54 0.19 30);
  --risk: oklch(0.74 0.13 75);
  --strong: oklch(0.58 0.10 150);
  --domin: oklch(0.42 0.08 150);
  --shadow-card: 0 1px 0 rgba(26, 24, 20, .06), 0 12px 28px -18px rgba(26, 24, 20, .18);
  --serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

.page-ai-share-of-voice *, .page-ai-share-of-voice *::before, .page-ai-share-of-voice *::after {
  box-sizing: border-box
}

html.page-ai-share-of-voice, .page-ai-share-of-voice body {
  margin: 0;
  padding: 0
}

html.page-ai-share-of-voice {
  scroll-behavior: smooth
}

.page-ai-share-of-voice body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01", "cv11"
}

.page-ai-share-of-voice img {
  max-width: 100%;
  display: block
}

.page-ai-share-of-voice a {
  color: inherit;
  text-decoration: none
}

.page-ai-share-of-voice button {
  font: inherit;
  color: inherit;
  cursor: pointer;
  border: 0;
  background: none;
  padding: 0
}

.page-ai-share-of-voice input, .page-ai-share-of-voice select, .page-ai-share-of-voice textarea {
  font: inherit;
  color: inherit
}

.page-ai-share-of-voice ::selection {
  background: var(--ink);
  color: var(--bg)
}

.page-ai-share-of-voice .display {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 0.96
}

.page-ai-share-of-voice .display em {
  font-style: italic;
  color: var(--tomato)
}

.page-ai-share-of-voice h1.display {
  font-size: clamp(44px, 7vw, 96px)
}

.page-ai-share-of-voice h2.display {
  font-size: clamp(36px, 5.4vw, 64px)
}

.page-ai-share-of-voice h3.display {
  font-size: clamp(28px, 3.4vw, 48px)
}

.page-ai-share-of-voice .eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 8px
}

.page-ai-share-of-voice .eyebrow::before {
  content: "";
  width: 18px;
  height: 1px;
  background: currentColor
}

.page-ai-share-of-voice .wrap {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 32px
}

.page-ai-share-of-voice section {
  padding: 80px 0;
  position: relative
}

@media (max-width:768px) {
  .page-ai-share-of-voice section {
    padding: 50px 0
  }

  .page-ai-share-of-voice .wrap {
    padding: 0 20px
  }
}

.page-ai-share-of-voice .btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: 999px;
  font-weight: 500;
  font-size: 15px;
  transition: transform .25s, background .2s, color .2s;
  white-space: nowrap
}

.page-ai-share-of-voice .btn-primary {
  background: var(--ink);
  color: var(--bg);
  box-shadow: 0 8px 18px -10px rgba(26, 24, 20, .6)
}

.page-ai-share-of-voice .btn-primary:hover {
  transform: translateY(-1px);
  background: var(--tomato)
}

.page-ai-share-of-voice .btn-secondary {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink)
}

.page-ai-share-of-voice .btn-secondary:hover {
  background: var(--ink);
  color: var(--bg);
  transform: translateY(-1px)
}

.page-ai-share-of-voice .btn .arr {
  transition: transform .25s
}

.page-ai-share-of-voice .btn:hover .arr {
  transform: translateX(3px)
}

.page-ai-share-of-voice .nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(244, 239, 230, 0.78);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--hair)
}

.page-ai-share-of-voice .nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  gap: 28px
}

.page-ai-share-of-voice .brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--serif);
  font-size: 24px;
  letter-spacing: -0.01em
}

.page-ai-share-of-voice .brand svg {
  width: 34px;
  height: 34px
}

.page-ai-share-of-voice .nav-links {
  display: flex;
  gap: 6px;
  align-items: center
}

.page-ai-share-of-voice .nav-links a {
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 14.5px;
  color: var(--ink-2);
  transition: background .15s, color .15s
}

.page-ai-share-of-voice .nav-links a:hover, .page-ai-share-of-voice .nav-links a.cur {
  background: rgba(26, 24, 20, .06);
  color: var(--ink)
}

.page-ai-share-of-voice .nav-cta {
  display: flex;
  align-items: center;
  gap: 8px
}

.page-ai-share-of-voice .fix-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--bg);
  font-size: 13px;
  font-weight: 500;
  transition: background .2s, transform .25s
}

.page-ai-share-of-voice .fix-pill:hover {
  background: var(--tomato);
  transform: translateY(-1px)
}

.page-ai-share-of-voice .fix-pill .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  animation: page-ai-share-of-voice__pulse 2.4s infinite
}

@keyframes page-ai-share-of-voice__pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(218, 170, 72, .7)
  }

  70% {
    box-shadow: 0 0 0 8px rgba(218, 170, 72, 0)
  }

  100% {
    box-shadow: 0 0 0 0 rgba(218, 170, 72, 0)
  }
}

.page-ai-share-of-voice .menu-btn {
  display: none;
  width: 42px;
  height: 42px;
  border: 1px solid var(--hair-2);
  border-radius: 10px;
  align-items: center;
  justify-content: center
}

.page-ai-share-of-voice .menu-btn span {
  display: block;
  width: 18px;
  height: 1.5px;
  background: var(--ink);
  position: relative
}

.page-ai-share-of-voice .menu-btn span::before, .page-ai-share-of-voice .menu-btn span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px;
  height: 1.5px;
  background: var(--ink)
}

.page-ai-share-of-voice .menu-btn span::before {
  top: -6px
}

.page-ai-share-of-voice .menu-btn span::after {
  top: 6px
}

@media (max-width:1200px) {
  .page-ai-share-of-voice .nav-links {
    display: none
  }

  .page-ai-share-of-voice .menu-btn {
    display: flex
  }
}

.page-ai-share-of-voice .drawer {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--bg);
  transform: translateX(100%);
  transition: transform .35s cubic-bezier(.2, .8, .2, 1);
  padding: 24px
}

.page-ai-share-of-voice .drawer.open {
  transform: translateX(0)
}

.page-ai-share-of-voice .drawer-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--hair)
}

.page-ai-share-of-voice .drawer-links {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 24px
}

.page-ai-share-of-voice .drawer-links a {
  font-family: var(--serif);
  font-size: 32px;
  padding: 12px 0;
  border-bottom: 1px solid var(--hair)
}

.page-ai-share-of-voice .hero {
  padding-top: 48px;
  padding-bottom: 60px
}

.page-ai-share-of-voice .hero-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 48px;
  align-items: center
}

@media (max-width:1024px) {
  .page-ai-share-of-voice .hero-grid {
    grid-template-columns: 1fr
  }
}

.page-ai-share-of-voice .hero h1 {
  margin: 0 0 20px;
  text-wrap: balance
}

.page-ai-share-of-voice .hero-sub {
  margin: 0 0 28px;
  font-size: clamp(16.5px, 1.25vw, 19px);
  color: var(--ink-2);
  max-width: 54ch;
  line-height: 1.55
}

.page-ai-share-of-voice .hero-cta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap
}

.page-ai-share-of-voice .gauge-hero {
  aspect-ratio: 1/1;
  max-width: 560px;
  margin: 0 auto;
  position: relative
}

.page-ai-share-of-voice .gauge-hero svg {
  width: 100%;
  height: 100%
}

.page-ai-share-of-voice .gauge-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center
}

.page-ai-share-of-voice .gauge-num {
  font-family: var(--serif);
  font-size: clamp(80px, 12vw, 160px);
  line-height: .9;
  letter-spacing: -0.04em;
  color: var(--ink)
}

.page-ai-share-of-voice .gauge-num em {
  color: var(--tomato);
  font-style: normal
}

.page-ai-share-of-voice .gauge-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 6px
}

.page-ai-share-of-voice .gauge-band {
  font-family: var(--serif);
  font-size: 32px;
  color: var(--tomato);
  margin-top: 6px;
  font-style: italic;
  transition: color .4s
}

.page-ai-share-of-voice .gauge-progress {
  position: absolute;
  bottom: -30px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  gap: 6px;
  align-items: center;
  white-space: nowrap;
}

.page-ai-share-of-voice .gauge-progress .live-dot {
  width: 6px;
  height: 6px;
  background: var(--forest);
  border-radius: 50%;
  animation: page-ai-share-of-voice__pulse-green 2s infinite
}

@keyframes page-ai-share-of-voice__pulse-green {
  0% {
    box-shadow: 0 0 0 0 oklch(0.42 0.08 150 / .5)
  }

  70% {
    box-shadow: 0 0 0 10px oklch(0.42 0.08 150 / 0)
  }

  100% {
    box-shadow: 0 0 0 0 oklch(0.42 0.08 150 / 0)
  }
}

.page-ai-share-of-voice .section-head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 32px;
  align-items: center;
  margin-bottom: 60px
}

@media (max-width:768px) {
  .page-ai-share-of-voice .section-head {
    grid-template-columns: 1fr;
    gap: 18px
  }
}

.page-ai-share-of-voice .section-num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--muted);
  text-transform: uppercase
}

.page-ai-share-of-voice .section-head h2 {
  margin: 8px 0 0;
  text-wrap: balance;
  max-width: 18ch
}

.page-ai-share-of-voice .section-head .right {
  max-width: 46ch;
  color: var(--ink-2);
  font-size: 16.5px;
  line-height: 1.55;
  justify-self: end
}

@media (max-width:768px) {
  .page-ai-share-of-voice .section-head .right {
    justify-self: start
  }
}

.page-ai-share-of-voice .defn {
  background: var(--paper);
  border: 1px solid var(--ink);
  border-radius: 24px;
  padding: 48px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 48px;
  align-items: start;
}

@media (max-width:1024px) {
  .page-ai-share-of-voice .defn {
    grid-template-columns: 1fr;
    padding: 32px;
    gap: 24px
  }
}

.page-ai-share-of-voice .defn-mark {
  font-family: var(--serif);
  font-size: 96px;
  line-height: 1;
  color: var(--tomato);
  font-style: italic;
  letter-spacing: -0.03em
}

.page-ai-share-of-voice .defn .term {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px
}

.page-ai-share-of-voice .defn .name {
  font-family: var(--serif);
  font-size: 48px;
  font-weight: 400;
  letter-spacing: -0.01em;
  margin: 0 0 18px;
  line-height: 1.05
}

.page-ai-share-of-voice .defn p {
  margin: 0 0 14px;
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 62ch
}

.page-ai-share-of-voice .defn-formula {
  margin-top: 18px;
  padding: 16px 18px;
  background: var(--bg);
  border: 1px dashed var(--hair-2);
  border-radius: 12px;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.6
}

.page-ai-share-of-voice .defn-formula b {
  color: var(--tomato)
}

.page-ai-share-of-voice .bands {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px
}

@media (max-width:1024px) {
  .page-ai-share-of-voice .bands {
    grid-template-columns: 1fr 1fr
  }
}

@media (max-width:560px) {
  .page-ai-share-of-voice .bands {
    grid-template-columns: 1fr
  }
}

.page-ai-share-of-voice .band {
  padding: 32px 28px;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  color: var(--bg);
  position: relative;
  overflow: hidden;
  min-height: 280px;
  transition: transform .3s
}

.page-ai-share-of-voice .band:hover {
  transform: translateY(-3px)
}

.page-ai-share-of-voice .band.invisible {
  background: var(--invis)
}

.page-ai-share-of-voice .band.atrisk {
  background: var(--risk);
  color: var(--ink)
}

.page-ai-share-of-voice .band.strong {
  background: var(--strong)
}

.page-ai-share-of-voice .band.dominant {
  background: var(--domin)
}

.page-ai-share-of-voice .band .range {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .85
}

.page-ai-share-of-voice .band h4 {
  font-family: var(--serif);
  font-size: 36px;
  font-weight: 400;
  letter-spacing: -0.01em;
  margin: 0;
  line-height: 1
}

.page-ai-share-of-voice .band p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.5;
  opacity: .92
}

.page-ai-share-of-voice .band .visual {
  margin-top: auto;
  display: flex;
  align-items: end;
  height: 46px;
  gap: 3px
}

.page-ai-share-of-voice .band .visual span {
  flex: 1;
  background: currentColor;
  opacity: .35;
  border-radius: 2px
}

.page-ai-share-of-voice .band.invisible .visual span:nth-child(1) {
  opacity: .7;
  height: 30%
}

.page-ai-share-of-voice .band.invisible .visual span:nth-child(2) {
  height: 18%
}

.page-ai-share-of-voice .band.invisible .visual span:nth-child(3) {
  height: 12%
}

.page-ai-share-of-voice .band.invisible .visual span:nth-child(4) {
  height: 8%
}

.page-ai-share-of-voice .band.atrisk .visual span:nth-child(1) {
  opacity: .7;
  height: 55%
}

.page-ai-share-of-voice .band.atrisk .visual span:nth-child(2) {
  height: 42%
}

.page-ai-share-of-voice .band.atrisk .visual span:nth-child(3) {
  height: 30%
}

.page-ai-share-of-voice .band.atrisk .visual span:nth-child(4) {
  height: 18%
}

.page-ai-share-of-voice .band.strong .visual span:nth-child(1) {
  opacity: .7;
  height: 80%
}

.page-ai-share-of-voice .band.strong .visual span:nth-child(2) {
  height: 64%
}

.page-ai-share-of-voice .band.strong .visual span:nth-child(3) {
  height: 42%
}

.page-ai-share-of-voice .band.strong .visual span:nth-child(4) {
  height: 24%
}

.page-ai-share-of-voice .band.dominant .visual span:nth-child(1) {
  opacity: .7;
  height: 96%
}

.page-ai-share-of-voice .band.dominant .visual span:nth-child(2) {
  height: 78%
}

.page-ai-share-of-voice .band.dominant .visual span:nth-child(3) {
  height: 50%
}

.page-ai-share-of-voice .band.dominant .visual span:nth-child(4) {
  height: 28%
}

.page-ai-share-of-voice .calc-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px
}

@media (max-width:1024px) {
  .page-ai-share-of-voice .calc-row {
    grid-template-columns: 1fr
  }
}

.page-ai-share-of-voice .calc-card {
  background: var(--paper);
  border: 1px solid var(--hair);
  border-radius: 20px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px
}

.page-ai-share-of-voice .calc-card h4 {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 400;
  margin: 0;
  letter-spacing: -0.01em;
  line-height: 1.1
}

.page-ai-share-of-voice .calc-card p {
  margin: 0;
  color: var(--ink-2);
  font-size: 14.5px;
  line-height: 1.55
}

.page-ai-share-of-voice .calc-illus {
  height: 160px;
  border: 1px solid var(--hair);
  border-radius: 14px;
  background: var(--bg);
  overflow: hidden;
  position: relative
}

.page-ai-share-of-voice .calc-step {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted)
}

.page-ai-share-of-voice .why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px
}

@media (max-width:1024px) {
  .page-ai-share-of-voice .why-grid {
    grid-template-columns: 1fr
  }
}

.page-ai-share-of-voice .why-card {
  background: var(--paper);
  border: 1px solid var(--hair);
  border-radius: 20px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  transition: transform .25s, box-shadow .25s
}

.page-ai-share-of-voice .why-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card)
}

.page-ai-share-of-voice .vs-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 14px;
  align-items: center;
  padding: 18px 0;
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair)
}

.page-ai-share-of-voice .vs-row .left, .page-ai-share-of-voice .vs-row .right {
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.1
}

.page-ai-share-of-voice .vs-row .left {
  color: var(--muted);
  text-decoration: line-through;
  text-decoration-color: rgba(168, 57, 30, .4)
}

.page-ai-share-of-voice .vs-row .right {
  color: var(--tomato)
}

.page-ai-share-of-voice .vs-row .vs {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted)
}

.page-ai-share-of-voice .why-card h4 {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 400;
  margin: 0;
  letter-spacing: -0.01em;
  line-height: 1.1
}

.page-ai-share-of-voice .why-card p {
  margin: 0;
  color: var(--ink-2);
  font-size: 14.5px;
  line-height: 1.55
}

.page-ai-share-of-voice .report-frame {
  background: var(--paper);
  border: 1px solid var(--hair-2);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(26, 24, 20, .06), 0 50px 90px -50px rgba(26, 24, 20, .35)
}

.page-ai-share-of-voice .report-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--hair);
  background: var(--bg-2)
}

.page-ai-share-of-voice .report-bar .dots {
  display: flex;
  gap: 6px
}

.page-ai-share-of-voice .report-bar .dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--hair-2)
}

.page-ai-share-of-voice .report-bar .url {
  flex: 1;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  letter-spacing: .05em
}

.page-ai-share-of-voice .report-body {
  padding: 32px;
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 24px
}

@media (max-width:1024px) {
  .page-ai-share-of-voice .report-body {
    grid-template-columns: 1fr;
    padding: 20px
  }
}

.page-ai-share-of-voice .rep-h {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
  display: flex;
  justify-content: space-between;
  align-items: center
}

.page-ai-share-of-voice .rep-card {
  background: var(--bg);
  border: 1px solid var(--hair);
  border-radius: 14px;
  padding: 18px;
  margin-bottom: 14px
}

.page-ai-share-of-voice .rep-card:last-child {
  margin-bottom: 0
}

.page-ai-share-of-voice .rep-engines {
  display: flex;
  flex-direction: column;
  gap: 10px
}

.page-ai-share-of-voice .rep-engine {
  display: grid;
  grid-template-columns: auto 1fr 60px;
  gap: 12px;
  align-items: center;
  font-size: 13.5px
}

.page-ai-share-of-voice .rep-engine .nm {
  display: flex;
  align-items: center;
  gap: 8px
}

.page-ai-share-of-voice .rep-engine .nm .ic {
  width: 20px;
  height: 20px;
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 12px;
  color: var(--bg);
  font-weight: 600
}

.page-ai-share-of-voice .rep-engine .bar {
  height: 8px;
  background: var(--bg-2);
  border-radius: 4px;
  overflow: hidden
}

.page-ai-share-of-voice .rep-engine .bar>div {
  height: 100%;
  background: var(--ink);
  border-radius: 4px
}

.page-ai-share-of-voice .rep-engine .pct {
  font-family: var(--mono);
  font-size: 12px;
  text-align: right;
  color: var(--ink)
}

.page-ai-share-of-voice .cta-strip {
  background: var(--ink);
  color: var(--bg);
  border-radius: 24px;
  padding: 80px 64px;
  display: grid;
  grid-template-columns: 1.4fr auto;
  gap: 48px;
  align-items: center
}

@media (max-width:1024px) {
  .page-ai-share-of-voice .cta-strip {
    grid-template-columns: 1fr;
    padding: 48px 36px
  }
}

.page-ai-share-of-voice .cta-strip h2 {
  margin: 0;
  color: var(--bg)
}

.page-ai-share-of-voice .cta-strip h2 em {
  color: var(--gold)
}

.page-ai-share-of-voice .cta-strip p {
  color: rgba(244, 239, 230, .78);
  font-size: 16px;
  line-height: 1.55;
  max-width: 50ch;
  margin: 18px 0 0
}

.page-ai-share-of-voice .cta-strip .btn-primary {
  background: var(--gold);
  color: var(--ink)
}

.page-ai-share-of-voice .cta-strip .btn-primary:hover {
  background: var(--bg);
  color: var(--ink)
}

.page-ai-share-of-voice .faq-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--hair)
}

.page-ai-share-of-voice .faq-item {
  border-bottom: 1px solid var(--hair)
}

.page-ai-share-of-voice .faq-item summary {
  padding: 26px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  cursor: pointer;
  list-style: none;
  font-family: var(--serif);
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -0.005em;
  transition: color .2s
}

.page-ai-share-of-voice .faq-item summary::-webkit-details-marker {
  display: none
}

.page-ai-share-of-voice .faq-item summary:hover {
  color: var(--tomato)
}

.page-ai-share-of-voice .faq-toggle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--hair-2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .2s, transform .3s, color .2s
}

.page-ai-share-of-voice .faq-item[open] .faq-toggle {
  background: var(--ink);
  color: var(--bg);
  transform: rotate(45deg)
}

.page-ai-share-of-voice .faq-body {
  padding: 0 0 26px;
  max-width: 64ch;
  color: var(--ink-2);
  font-size: 15.5px;
  line-height: 1.6
}

.page-ai-share-of-voice footer {
  background: var(--ink);
  color: var(--bg);
  padding: 80px 0 32px
}

.page-ai-share-of-voice .footer-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(4, 1fr);
  gap: 40px;
  margin-bottom: 60px
}

@media (max-width:1024px) {
  .page-ai-share-of-voice .footer-grid {
    grid-template-columns: 1fr 1fr
  }
}

@media (max-width:560px) {
  .page-ai-share-of-voice .footer-grid {
    grid-template-columns: 1fr
  }
}

.page-ai-share-of-voice .footer-brand p {
  color: rgba(244, 239, 230, .6);
  font-size: 14px;
  line-height: 1.55;
  max-width: 30ch;
  margin: 14px 0 0
}

.page-ai-share-of-voice .footer-col h5 {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(244, 239, 230, .5);
  margin: 0 0 16px;
  font-weight: 500
}

.page-ai-share-of-voice .footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 14px
}

.page-ai-share-of-voice .footer-col a {
  color: rgba(244, 239, 230, .85);
  transition: color .2s
}

.page-ai-share-of-voice .footer-col a:hover {
  color: var(--gold)
}

.page-ai-share-of-voice .footer-bottom {
  padding-top: 32px;
  border-top: 1px solid rgba(255, 255, 255, .08);
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: rgba(244, 239, 230, .5);
  flex-wrap: wrap;
  gap: 18px
}

.page-ai-share-of-voice .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s cubic-bezier(.2, .8, .2, 1), transform .7s cubic-bezier(.2, .8, .2, 1)
}

.page-ai-share-of-voice .reveal.in {
  opacity: 1;
  transform: translateY(0)
}

@media (prefers-reduced-motion:reduce) {
  .page-ai-share-of-voice *, .page-ai-share-of-voice *::before, .page-ai-share-of-voice *::after {
    animation: none !important;
    transition: none !important
  }

  .page-ai-share-of-voice .reveal {
    opacity: 1;
    transform: none
  }
}

@media print {
  .page-ai-share-of-voice .nav, .page-ai-share-of-voice .cta-strip, .page-ai-share-of-voice footer, .page-ai-share-of-voice .menu-btn, .page-ai-share-of-voice .drawer {
    display: none !important
  }

  .page-ai-share-of-voice body {
    background: #fff;
    color: #000
  }

  .page-ai-share-of-voice section {
    padding: 24px 0;
    page-break-inside: avoid
  }
}

.page-ai-share-of-voice :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--ring-w) solid var(--ring);
  outline-offset: var(--ring-off)
}

.page-ai-share-of-voice .on-ink, .page-ai-share-of-voice footer {
  --ring: var(--gold)
}

/* ====================================================================
   PAGE: boost-ai-recommendations   (scope: .page-boost-ai-recommendations)
   ==================================================================== */
:root.page-boost-ai-recommendations {
  --ring: oklch(0.54 0.19 30);
  --ring-w: 2px;
  --ring-off: 2px;
  --bg: #F4EFE6;
  --bg-2: #EBE4D6;
  --paper: #FBF8F2;
  --ink: #1A1814;
  --ink-2: #2C2823;
  --muted: #6B6258;
  --hair: rgba(26, 24, 20, .12);
  --hair-2: rgba(26, 24, 20, .22);
  --tomato: oklch(0.54 0.19 30);
  --forest: oklch(0.42 0.08 150);
  --gold: oklch(0.74 0.13 75);
  --shadow-card: 0 1px 0 rgba(26, 24, 20, .06), 0 12px 28px -18px rgba(26, 24, 20, .18);
  --serif: "Instrument Serif", Georgia, serif;
  --sans: "Geist", -apple-system, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace
}

.page-boost-ai-recommendations *, .page-boost-ai-recommendations *::before, .page-boost-ai-recommendations *::after {
  box-sizing: border-box
}

html.page-boost-ai-recommendations, .page-boost-ai-recommendations body {
  margin: 0;
  padding: 0
}

html.page-boost-ai-recommendations {
  scroll-behavior: smooth
}

.page-boost-ai-recommendations body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased
}

.page-boost-ai-recommendations img {
  max-width: 100%;
  display: block
}

.page-boost-ai-recommendations a {
  color: inherit;
  text-decoration: none
}

.page-boost-ai-recommendations button {
  font: inherit;
  color: inherit;
  cursor: pointer;
  border: 0;
  background: none;
  padding: 0
}

.page-boost-ai-recommendations ::selection {
  background: var(--ink);
  color: var(--bg)
}

.page-boost-ai-recommendations .display {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 0.96
}

.page-boost-ai-recommendations .display em {
  font-style: italic;
  color: var(--tomato)
}

.page-boost-ai-recommendations h1.display {
  font-size: clamp(44px, 7vw, 96px)
}

.page-boost-ai-recommendations h2.display {
  font-size: clamp(36px, 5.4vw, 64px)
}

.page-boost-ai-recommendations h3.display {
  font-size: clamp(24px, 2.4vw, 32px)
}

.page-boost-ai-recommendations .eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 8px
}

.page-boost-ai-recommendations .eyebrow::before {
  content: "";
  width: 18px;
  height: 1px;
  background: currentColor
}

.page-boost-ai-recommendations .wrap {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 32px
}

.page-boost-ai-recommendations section {
  padding: 80px 0;
  position: relative
}

@media (max-width:768px) {
  .page-boost-ai-recommendations section {
    padding: 50px 0
  }

  .page-boost-ai-recommendations .wrap {
    padding: 0 20px
  }
}

.page-boost-ai-recommendations .btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: 999px;
  font-weight: 500;
  font-size: 15px;
  transition: transform .25s, background .2s, color .2s;
  white-space: nowrap
}

.page-boost-ai-recommendations .btn-primary {
  background: var(--ink);
  color: var(--bg);
  box-shadow: 0 8px 18px -10px rgba(26, 24, 20, .6)
}

.page-boost-ai-recommendations .btn-primary:hover {
  transform: translateY(-1px);
  background: var(--tomato)
}

.page-boost-ai-recommendations .btn-secondary {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink)
}

.page-boost-ai-recommendations .btn-secondary:hover {
  background: var(--ink);
  color: var(--bg);
  transform: translateY(-1px)
}

.page-boost-ai-recommendations .btn .arr {
  transition: transform .25s
}

.page-boost-ai-recommendations .btn:hover .arr {
  transform: translateX(3px)
}

.page-boost-ai-recommendations .nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(244, 239, 230, .78);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--hair)
}

.page-boost-ai-recommendations .nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  gap: 28px
}

.page-boost-ai-recommendations .brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--serif);
  font-size: 24px;
  letter-spacing: -0.01em
}

.page-boost-ai-recommendations .brand svg {
  width: 34px;
  height: 34px
}

.page-boost-ai-recommendations .nav-links {
  display: flex;
  gap: 6px;
  align-items: center
}

.page-boost-ai-recommendations .nav-links a {
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 14.5px;
  color: var(--ink-2);
  transition: background .15s, color .15s
}

.page-boost-ai-recommendations .nav-links a:hover, .page-boost-ai-recommendations .nav-links a.cur {
  background: rgba(26, 24, 20, .06);
  color: var(--ink)
}

.page-boost-ai-recommendations .nav-cta {
  display: flex;
  align-items: center;
  gap: 8px
}

.page-boost-ai-recommendations .fix-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--bg);
  font-size: 13px;
  font-weight: 500;
  transition: background .2s, transform .25s
}

.page-boost-ai-recommendations .fix-pill:hover {
  background: var(--tomato);
  transform: translateY(-1px)
}

.page-boost-ai-recommendations .fix-pill .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  animation: page-boost-ai-recommendations__pulse 2.4s infinite
}

@keyframes page-boost-ai-recommendations__pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(218, 170, 72, .7)
  }

  70% {
    box-shadow: 0 0 0 8px rgba(218, 170, 72, 0)
  }

  100% {
    box-shadow: 0 0 0 0 rgba(218, 170, 72, 0)
  }
}

.page-boost-ai-recommendations .menu-btn {
  display: none;
  width: 42px;
  height: 42px;
  border: 1px solid var(--hair-2);
  border-radius: 10px;
  align-items: center;
  justify-content: center
}

.page-boost-ai-recommendations .menu-btn span {
  display: block;
  width: 18px;
  height: 1.5px;
  background: var(--ink);
  position: relative
}

.page-boost-ai-recommendations .menu-btn span::before, .page-boost-ai-recommendations .menu-btn span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px;
  height: 1.5px;
  background: var(--ink)
}

.page-boost-ai-recommendations .menu-btn span::before {
  top: -6px
}

.page-boost-ai-recommendations .menu-btn span::after {
  top: 6px
}

@media (max-width:1200px) {
  .page-boost-ai-recommendations .nav-links {
    display: none
  }

  .page-boost-ai-recommendations .menu-btn {
    display: flex
  }
}

.page-boost-ai-recommendations .drawer {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--bg);
  transform: translateX(100%);
  transition: transform .35s cubic-bezier(.2, .8, .2, 1);
  padding: 24px
}

.page-boost-ai-recommendations .drawer.open {
  transform: translateX(0)
}

.page-boost-ai-recommendations .drawer-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--hair)
}

.page-boost-ai-recommendations .drawer-links {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 24px
}

.page-boost-ai-recommendations .drawer-links a {
  font-family: var(--serif);
  font-size: 32px;
  padding: 12px 0;
  border-bottom: 1px solid var(--hair)
}

.page-boost-ai-recommendations .section-head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 32px;
  align-items: center;
  margin-bottom: 60px
}

@media (max-width:768px) {
  .page-boost-ai-recommendations .section-head {
    grid-template-columns: 1fr;
    gap: 18px
  }
}

.page-boost-ai-recommendations .section-num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .16em;
  color: var(--muted);
  text-transform: uppercase
}

.page-boost-ai-recommendations .section-head h2 {
  margin: 8px 0 0;
  text-wrap: balance;
  max-width: 18ch
}

.page-boost-ai-recommendations .section-head .right {
  max-width: 46ch;
  color: var(--ink-2);
  font-size: 16.5px;
  line-height: 1.55;
  justify-self: end
}

@media (max-width:768px) {
  .page-boost-ai-recommendations .section-head .right {
    justify-self: start
  }
}

.page-boost-ai-recommendations .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s cubic-bezier(.2, .8, .2, 1), transform .7s cubic-bezier(.2, .8, .2, 1)
}

.page-boost-ai-recommendations .reveal.in {
  opacity: 1;
  transform: none
}

@media (prefers-reduced-motion:reduce) {
  .page-boost-ai-recommendations *, .page-boost-ai-recommendations *::before, .page-boost-ai-recommendations *::after {
    animation: none !important;
    transition: none !important
  }

  .page-boost-ai-recommendations .reveal {
    opacity: 1;
    transform: none
  }
}

@media print {
  .page-boost-ai-recommendations .nav, .page-boost-ai-recommendations footer, .page-boost-ai-recommendations .menu-btn, .page-boost-ai-recommendations .drawer, .page-boost-ai-recommendations .cta-strip {
    display: none !important
  }

  .page-boost-ai-recommendations body {
    background: #fff;
    color: #000
  }

  .page-boost-ai-recommendations section {
    padding: 24px 0;
    page-break-inside: avoid
  }
}

.page-boost-ai-recommendations .hero {
  padding-top: 48px;
  padding-bottom: 80px;
  background: radial-gradient(1100px 600px at 80% -10%, oklch(0.74 0.13 75 / .25), transparent 60%), var(--bg)
}

.page-boost-ai-recommendations .hero-grid {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 48px;
  align-items: center
}

@media (max-width:1024px) {
  .page-boost-ai-recommendations .hero-grid {
    grid-template-columns: 1fr
  }
}

.page-boost-ai-recommendations .hero h1 {
  margin: 0 0 20px;
  text-wrap: balance
}

.page-boost-ai-recommendations .hero-sub {
  margin: 0 0 28px;
  font-size: clamp(16.5px, 1.25vw, 19px);
  color: var(--ink-2);
  max-width: 54ch
}

.page-boost-ai-recommendations .hero-cta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap
}

.page-boost-ai-recommendations .hero-key {
  background: var(--paper);
  border: 1px solid var(--hair-2);
  border-radius: 20px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px
}

.page-boost-ai-recommendations .hero-key h5 {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
  font-weight: 500
}

.page-boost-ai-recommendations .hero-key .levers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px
}

.page-boost-ai-recommendations .hero-key .lev {
  padding: 14px;
  border-radius: 12px;
  background: var(--bg);
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.15;
  display: flex;
  flex-direction: column;
  gap: 6px
}

.page-boost-ai-recommendations .hero-key .lev .n {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  color: var(--tomato)
}

.page-boost-ai-recommendations .levers-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px
}

@media (max-width:1024px) {
  .page-boost-ai-recommendations .levers-grid {
    grid-template-columns: 1fr 1fr
  }
}

@media (max-width:560px) {
  .page-boost-ai-recommendations .levers-grid {
    grid-template-columns: 1fr
  }
}

.page-boost-ai-recommendations .lever {
  background: var(--paper);
  border: 1px solid var(--hair);
  border-radius: 20px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  transition: transform .25s, box-shadow .25s, border-color .25s;
  min-height: 380px
}

.page-boost-ai-recommendations .lever:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card);
  border-color: var(--hair-2)
}

.page-boost-ai-recommendations .lever-head {
  display: flex;
  align-items: center;
  justify-content: space-between
}

.page-boost-ai-recommendations .lever-num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--muted);
  text-transform: uppercase
}

.page-boost-ai-recommendations .lever-impact {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--bg)
}

.page-boost-ai-recommendations .lever-impact.high {
  color: var(--tomato);
  background: oklch(0.54 0.19 30 / .12)
}

.page-boost-ai-recommendations .lever-impact.med {
  color: var(--gold);
  background: oklch(0.74 0.13 75 / .2)
}

.page-boost-ai-recommendations .lever .glyph {
  height: 80px;
  display: flex;
  align-items: center
}

.page-boost-ai-recommendations .lever h3 {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.01em;
  margin: 0;
  line-height: 1.1
}

.page-boost-ai-recommendations .lever p {
  margin: 0;
  color: var(--ink-2);
  font-size: 14.5px;
  line-height: 1.55
}

.page-boost-ai-recommendations .lever .meta {
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px dashed var(--hair-2);
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--muted);
  text-transform: uppercase
}

.page-boost-ai-recommendations .lever .meta b {
  color: var(--ink);
  font-weight: 500
}

.page-boost-ai-recommendations .split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid var(--hair-2)
}

@media (max-width:1024px) {
  .page-boost-ai-recommendations .split {
    grid-template-columns: 1fr
  }
}

.page-boost-ai-recommendations .split-pane {
  padding: 48px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-height: 480px
}

.page-boost-ai-recommendations .split-pane.diy {
  background: var(--paper);
  color: var(--ink)
}

.page-boost-ai-recommendations .split-pane.dfu {
  background: var(--ink);
  color: var(--bg)
}

.page-boost-ai-recommendations .split-pane .lab {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase
}

.page-boost-ai-recommendations .split-pane.diy .lab {
  color: var(--muted)
}

.page-boost-ai-recommendations .split-pane.dfu .lab {
  color: rgba(244, 239, 230, .55)
}

.page-boost-ai-recommendations .split-pane h3 {
  font-family: var(--serif);
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0;
  text-wrap: balance
}

.page-boost-ai-recommendations .split-pane.dfu h3 em {
  color: var(--gold);
  font-style: italic
}

.page-boost-ai-recommendations .split-pane.diy h3 em {
  color: var(--tomato);
  font-style: italic
}

.page-boost-ai-recommendations .split-pane p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.55;
  max-width: 46ch
}

.page-boost-ai-recommendations .split-pane.dfu p {
  color: rgba(244, 239, 230, .78)
}

.page-boost-ai-recommendations .split-pane.diy p {
  color: var(--ink-2)
}

.page-boost-ai-recommendations .split-pane ul {
  list-style: none;
  padding: 0;
  margin: 6px 0 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 14.5px
}

.page-boost-ai-recommendations .split-pane ul li {
  padding-left: 22px;
  position: relative;
  line-height: 1.5
}

.page-boost-ai-recommendations .split-pane ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 10px;
  height: 10px;
  border-radius: 50%
}

.page-boost-ai-recommendations .split-pane.diy ul li::before {
  background: var(--ink)
}

.page-boost-ai-recommendations .split-pane.dfu ul li::before {
  background: var(--gold)
}

.page-boost-ai-recommendations .split-pane.dfu ul li {
  color: rgba(244, 239, 230, .85)
}

.page-boost-ai-recommendations .split-pane .foot {
  margin-top: auto;
  padding-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px
}

.page-boost-ai-recommendations .split-pane .price {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase
}

.page-boost-ai-recommendations .split-pane.diy .price {
  color: var(--muted)
}

.page-boost-ai-recommendations .split-pane.dfu .price {
  color: rgba(244, 239, 230, .6)
}

.page-boost-ai-recommendations .split-pane .btn-primary {
  align-self: flex-start
}

.page-boost-ai-recommendations .split-pane.dfu .btn-primary {
  background: var(--gold);
  color: var(--ink)
}

.page-boost-ai-recommendations .split-pane.dfu .btn-primary:hover {
  background: var(--bg);
  color: var(--ink)
}

.page-boost-ai-recommendations .tactics {
  border-top: 1px solid var(--hair)
}

.page-boost-ai-recommendations .tactic {
  border-bottom: 1px solid var(--hair)
}

.page-boost-ai-recommendations .tactic summary {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 18px;
  align-items: center;
  padding: 28px 0;
  cursor: pointer;
  list-style: none
}

.page-boost-ai-recommendations .tactic summary::-webkit-details-marker {
  display: none
}

.page-boost-ai-recommendations .tactic .num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--muted);
  text-transform: uppercase
}

.page-boost-ai-recommendations .tactic .ttl {
  font-family: var(--serif);
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-wrap: balance;
  transition: color .2s
}

.page-boost-ai-recommendations .tactic summary:hover .ttl {
  color: var(--tomato)
}

.page-boost-ai-recommendations .tactic .imp {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--bg-2);
  color: var(--ink-2)
}

.page-boost-ai-recommendations .tactic .toggle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--hair-2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .2s, transform .3s, color .2s
}

.page-boost-ai-recommendations .tactic[open] .toggle {
  background: var(--ink);
  color: var(--bg);
  transform: rotate(45deg)
}

.page-boost-ai-recommendations .tactic-body {
  display: grid;
  grid-template-columns: auto 1fr 1fr;
  gap: 32px;
  padding: 0 0 32px;
  align-items: start
}

@media (max-width:1024px) {
  .page-boost-ai-recommendations .tactic-body {
    grid-template-columns: 1fr
  }

  .page-boost-ai-recommendations .tactic summary {
    grid-template-columns: auto 1fr auto
  }

  .page-boost-ai-recommendations .tactic .imp {
    display: none
  }
}

.page-boost-ai-recommendations .tactic-body .col-a {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 54ch;
  margin-left: 60px
}

@media (max-width:1024px) {
  .page-boost-ai-recommendations .tactic-body .col-a {
    margin-left: 0
  }
}

.page-boost-ai-recommendations .tactic-body .col-b {
  background: var(--paper);
  border: 1px solid var(--hair);
  border-radius: 14px;
  padding: 20px;
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ink);
  overflow-x: auto
}

.page-boost-ai-recommendations .tactic-body .col-b .tag {
  color: var(--tomato)
}

.page-boost-ai-recommendations .tactic-body .col-b .at {
  color: var(--forest)
}

.page-boost-ai-recommendations .tactic-body .col-c {
  display: flex;
  flex-direction: column;
  gap: 12px
}

.page-boost-ai-recommendations .tactic-body .col-c h6 {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
  font-weight: 500
}

.page-boost-ai-recommendations .tactic-body .col-c ul {
  margin: 0;
  padding-left: 18px;
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  gap: 6px
}

.page-boost-ai-recommendations .cta-strip {
  background: var(--ink);
  color: var(--bg);
  border-radius: 24px;
  padding: 80px 64px;
  display: grid;
  grid-template-columns: 1.4fr auto auto;
  gap: 32px;
  align-items: center
}

@media (max-width:1024px) {
  .page-boost-ai-recommendations .cta-strip {
    grid-template-columns: 1fr;
    padding: 48px 36px
  }
}

.page-boost-ai-recommendations .cta-strip h2 {
  margin: 0;
  color: var(--bg)
}

.page-boost-ai-recommendations .cta-strip h2 em {
  color: var(--gold)
}

.page-boost-ai-recommendations .cta-strip p {
  color: rgba(244, 239, 230, .78);
  font-size: 16px;
  line-height: 1.55;
  max-width: 50ch;
  margin: 18px 0 0
}

.page-boost-ai-recommendations .cta-strip .btn-primary {
  background: var(--gold);
  color: var(--ink)
}

.page-boost-ai-recommendations .cta-strip .btn-primary:hover {
  background: var(--bg);
  color: var(--ink)
}

.page-boost-ai-recommendations .cta-strip .btn-secondary {
  border-color: var(--bg);
  color: var(--bg)
}

.page-boost-ai-recommendations .cta-strip .btn-secondary:hover {
  background: var(--bg);
  color: var(--ink)
}

.page-boost-ai-recommendations footer {
  background: var(--ink);
  color: var(--bg);
  padding: 80px 0 32px
}

.page-boost-ai-recommendations .footer-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(4, 1fr);
  gap: 40px;
  margin-bottom: 60px
}

@media (max-width:1024px) {
  .page-boost-ai-recommendations .footer-grid {
    grid-template-columns: 1fr 1fr
  }
}

@media (max-width:560px) {
  .page-boost-ai-recommendations .footer-grid {
    grid-template-columns: 1fr
  }
}

.page-boost-ai-recommendations .footer-brand p {
  color: rgba(244, 239, 230, .6);
  font-size: 14px;
  line-height: 1.55;
  max-width: 30ch;
  margin: 14px 0 0
}

.page-boost-ai-recommendations .footer-col h5 {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(244, 239, 230, .5);
  margin: 0 0 16px;
  font-weight: 500
}

.page-boost-ai-recommendations .footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 14px
}

.page-boost-ai-recommendations .footer-col a {
  color: rgba(244, 239, 230, .85);
  transition: color .2s
}

.page-boost-ai-recommendations .footer-col a:hover {
  color: var(--gold)
}

.page-boost-ai-recommendations .footer-bottom {
  padding-top: 32px;
  border-top: 1px solid rgba(255, 255, 255, .08);
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: rgba(244, 239, 230, .5);
  flex-wrap: wrap;
  gap: 18px
}

.page-boost-ai-recommendations :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--ring-w) solid var(--ring);
  outline-offset: var(--ring-off)
}

.page-boost-ai-recommendations .on-ink, .page-boost-ai-recommendations footer {
  --ring: var(--gold)
}

/* ====================================================================
   PAGE: fix-my-visibility   (scope: .page-fix-my-visibility)
   ==================================================================== */
:root.page-fix-my-visibility {
  --ring: oklch(0.54 0.19 30);
  --ring-w: 2px;
  --ring-off: 2px;
  --bg: #F4EFE6;
  --bg-2: #EBE4D6;
  --paper: #FBF8F2;
  --ink: #1A1814;
  --ink-2: #2C2823;
  --muted: #6B6258;
  --hair: rgba(26, 24, 20, .12);
  --hair-2: rgba(26, 24, 20, .22);
  --tomato: oklch(0.54 0.19 30);
  --forest: oklch(0.42 0.08 150);
  --gold: oklch(0.74 0.13 75);
  --shadow-card: 0 1px 0 rgba(26, 24, 20, .06), 0 12px 28px -18px rgba(26, 24, 20, .18);
  --serif: "Instrument Serif", Georgia, serif;
  --sans: "Geist", -apple-system, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace
}

.page-fix-my-visibility *, .page-fix-my-visibility *::before, .page-fix-my-visibility *::after {
  box-sizing: border-box
}

html.page-fix-my-visibility, .page-fix-my-visibility body {
  margin: 0;
  padding: 0
}

html.page-fix-my-visibility {
  scroll-behavior: smooth
}

.page-fix-my-visibility body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased
}

.page-fix-my-visibility img {
  max-width: 100%;
  display: block
}

.page-fix-my-visibility a {
  color: inherit;
  text-decoration: none
}

.page-fix-my-visibility button {
  font: inherit;
  color: inherit;
  cursor: pointer;
  border: 0;
  background: none;
  padding: 0
}

.page-fix-my-visibility ::selection {
  background: var(--ink);
  color: var(--bg)
}

.page-fix-my-visibility .display {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 0.96
}

.page-fix-my-visibility .display em {
  font-style: italic;
  color: var(--tomato)
}

.page-fix-my-visibility h1.display {
  font-size: clamp(44px, 7vw, 96px)
}

.page-fix-my-visibility h2.display {
  font-size: clamp(36px, 5.4vw, 64px)
}

.page-fix-my-visibility .eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 8px
}

.page-fix-my-visibility .eyebrow::before {
  content: "";
  width: 18px;
  height: 1px;
  background: currentColor
}

.page-fix-my-visibility .wrap {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 32px
}

.page-fix-my-visibility section {
  padding: 80px 0;
  position: relative
}

@media (max-width:768px) {
  .page-fix-my-visibility section {
    padding: 50px 0
  }

  .page-fix-my-visibility .wrap {
    padding: 0 20px
  }
}

.page-fix-my-visibility .btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: 999px;
  font-weight: 500;
  font-size: 15px;
  transition: transform .25s, background .2s, color .2s;
  white-space: nowrap
}

.page-fix-my-visibility .btn-primary {
  background: var(--ink);
  color: var(--bg);
  box-shadow: 0 8px 18px -10px rgba(26, 24, 20, .6)
}

.page-fix-my-visibility .btn-primary:hover {
  transform: translateY(-1px);
  background: var(--tomato)
}

.page-fix-my-visibility .btn-secondary {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink)
}

.page-fix-my-visibility .btn-secondary:hover {
  background: var(--ink);
  color: var(--bg);
  transform: translateY(-1px)
}

.page-fix-my-visibility .btn .arr {
  transition: transform .25s
}

.page-fix-my-visibility .btn:hover .arr {
  transform: translateX(3px)
}

.page-fix-my-visibility .nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(244, 239, 230, .78);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--hair)
}

.page-fix-my-visibility .nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  gap: 28px
}

.page-fix-my-visibility .brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--serif);
  font-size: 24px;
  letter-spacing: -0.01em
}

.page-fix-my-visibility .brand svg {
  width: 34px;
  height: 34px
}

.page-fix-my-visibility .nav-links {
  display: flex;
  gap: 6px;
  align-items: center
}

.page-fix-my-visibility .nav-links a {
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 14.5px;
  color: var(--ink-2);
  transition: background .15s, color .15s
}

.page-fix-my-visibility .nav-links a:hover, .page-fix-my-visibility .nav-links a.cur {
  background: rgba(26, 24, 20, .06);
  color: var(--ink)
}

.page-fix-my-visibility .nav-cta {
  display: flex;
  align-items: center;
  gap: 8px
}

.page-fix-my-visibility .fix-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--tomato);
  color: var(--bg);
  font-size: 13px;
  font-weight: 500
}

.page-fix-my-visibility .fix-pill .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  animation: page-fix-my-visibility__pulse 2.4s infinite
}

@keyframes page-fix-my-visibility__pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(218, 170, 72, .7)
  }

  70% {
    box-shadow: 0 0 0 8px rgba(218, 170, 72, 0)
  }

  100% {
    box-shadow: 0 0 0 0 rgba(218, 170, 72, 0)
  }
}

.page-fix-my-visibility .menu-btn {
  display: none;
  width: 42px;
  height: 42px;
  border: 1px solid var(--hair-2);
  border-radius: 10px;
  align-items: center;
  justify-content: center
}

.page-fix-my-visibility .menu-btn span {
  display: block;
  width: 18px;
  height: 1.5px;
  background: var(--ink);
  position: relative
}

.page-fix-my-visibility .menu-btn span::before, .page-fix-my-visibility .menu-btn span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px;
  height: 1.5px;
  background: var(--ink)
}

.page-fix-my-visibility .menu-btn span::before {
  top: -6px
}

.page-fix-my-visibility .menu-btn span::after {
  top: 6px
}

@media (max-width:1200px) {
  .page-fix-my-visibility .nav-links {
    display: none
  }

  .page-fix-my-visibility .menu-btn {
    display: flex
  }
}

.page-fix-my-visibility .drawer {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--bg);
  transform: translateX(100%);
  transition: transform .35s cubic-bezier(.2, .8, .2, 1);
  padding: 24px
}

.page-fix-my-visibility .drawer.open {
  transform: translateX(0)
}

.page-fix-my-visibility .drawer-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--hair)
}

.page-fix-my-visibility .drawer-links {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 24px
}

.page-fix-my-visibility .drawer-links a {
  font-family: var(--serif);
  font-size: 32px;
  padding: 12px 0;
  border-bottom: 1px solid var(--hair)
}

.page-fix-my-visibility .section-head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 32px;
  align-items: center;
  margin-bottom: 60px
}

@media (max-width:768px) {
  .page-fix-my-visibility .section-head {
    grid-template-columns: 1fr;
    gap: 18px
  }
}

.page-fix-my-visibility .section-num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .16em;
  color: var(--muted);
  text-transform: uppercase
}

.page-fix-my-visibility .section-head h2 {
  margin: 8px 0 0;
  text-wrap: balance;
  max-width: 18ch
}

.page-fix-my-visibility .section-head .right {
  max-width: 46ch;
  color: var(--ink-2);
  font-size: 16.5px;
  line-height: 1.55;
  justify-self: end
}

@media (max-width:768px) {
  .page-fix-my-visibility .section-head .right {
    justify-self: start
  }
}

.page-fix-my-visibility .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s cubic-bezier(.2, .8, .2, 1), transform .7s cubic-bezier(.2, .8, .2, 1)
}

.page-fix-my-visibility .reveal.in {
  opacity: 1;
  transform: none
}

@media (prefers-reduced-motion:reduce) {
  .page-fix-my-visibility *, .page-fix-my-visibility *::before, .page-fix-my-visibility *::after {
    animation: none !important;
    transition: none !important
  }

  .page-fix-my-visibility .reveal {
    opacity: 1;
    transform: none
  }
}

@media print {
  .page-fix-my-visibility .nav, .page-fix-my-visibility footer, .page-fix-my-visibility .menu-btn, .page-fix-my-visibility .drawer {
    display: none !important
  }

  .page-fix-my-visibility body {
    background: #fff;
    color: #000
  }

  .page-fix-my-visibility section {
    padding: 24px 0;
    page-break-inside: avoid
  }
}

.page-fix-my-visibility .hero {
  padding: 60px 0 100px
}

.page-fix-my-visibility .hero h1 {
  margin: 18px 0 24px;
  text-wrap: balance
}

.page-fix-my-visibility .hero p.sub {
  margin: 0 0 32px;
  font-size: clamp(17px, 1.3vw, 21px);
  color: var(--ink-2);
  max-width: 54ch;
  line-height: 1.55
}

.page-fix-my-visibility .hero-grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 48px;
  align-items: center;
}

@media (max-width:1024px) {
  .page-fix-my-visibility .hero-grid {
    grid-template-columns: 1fr
  }
}

.page-fix-my-visibility .hero .meta-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 32px;
  padding-top: 24px;
  border-top: 1px solid var(--hair);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted)
}

.page-fix-my-visibility .hero .meta-strip b {
  color: var(--tomato);
  font-weight: 500;
  margin-right: 6px
}

.page-fix-my-visibility .hero-cta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap
}

.page-fix-my-visibility .result-card {
  background: var(--paper);
  border: 1px solid var(--hair-2);
  border-radius: 20px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 18px
}

.page-fix-my-visibility .result-card .lab {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted)
}

.page-fix-my-visibility .result-card .row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px dashed var(--hair)
}

.page-fix-my-visibility .result-card .row:last-child {
  border-bottom: 0
}

.page-fix-my-visibility .result-card .nm {
  font-family: var(--serif);
  font-size: 18px
}

.page-fix-my-visibility .result-card .sm {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-top: 2px
}

.page-fix-my-visibility .result-card .pp {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--tomato)
}

.page-fix-my-visibility .result-card .av {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center
}

.page-fix-my-visibility .fit {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px
}

@media (max-width:1024px) {
  .page-fix-my-visibility .fit {
    grid-template-columns: 1fr
  }
}

.page-fix-my-visibility .fcard {
  background: var(--paper);
  border: 1px solid var(--hair);
  border-radius: 20px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 14px
}

.page-fix-my-visibility .fcard h3 {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 400;
  margin: 0;
  letter-spacing: -0.01em;
  line-height: 1.15
}

.page-fix-my-visibility .fcard p {
  margin: 0;
  color: var(--ink-2);
  font-size: 14.5px;
  line-height: 1.55
}

.page-fix-my-visibility .fcard .sig {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tomato)
}

.page-fix-my-visibility .delivs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px
}

@media (max-width:1024px) {
  .page-fix-my-visibility .delivs {
    grid-template-columns: 1fr
  }
}

.page-fix-my-visibility .dcard {
  background: var(--paper);
  border: 1px solid var(--hair);
  border-radius: 20px;
  padding: 32px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 24px;
  align-items: start
}

.page-fix-my-visibility .dcard .num {
  font-family: var(--serif);
  font-size: 48px;
  font-style: italic;
  color: var(--tomato);
  line-height: .9;
  letter-spacing: -0.02em
}

.page-fix-my-visibility .dcard h3 {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 400;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
  line-height: 1.15
}

.page-fix-my-visibility .dcard p {
  margin: 0 0 14px;
  color: var(--ink-2);
  font-size: 14.5px;
  line-height: 1.55
}

.page-fix-my-visibility .dcard ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13.5px;
  color: var(--ink-2)
}

.page-fix-my-visibility .dcard ul li {
  padding-left: 18px;
  position: relative;
  line-height: 1.45
}

.page-fix-my-visibility .dcard ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 8px;
  height: 1px;
  background: var(--ink)
}

.page-fix-my-visibility .timeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  background: var(--paper);
  border: 1px solid var(--hair-2);
  border-radius: 24px;
  overflow: hidden
}

@media (max-width:1024px) {
  .page-fix-my-visibility .timeline {
    grid-template-columns: 1fr
  }
}

.page-fix-my-visibility .tcell {
  padding: 32px;
  border-right: 1px solid var(--hair);
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  min-height: 240px
}

.page-fix-my-visibility .tcell:last-child {
  border-right: 0
}

@media (max-width:1024px) {
  .page-fix-my-visibility .tcell {
    border-right: 0;
    border-bottom: 1px solid var(--hair)
  }

  .page-fix-my-visibility .tcell:last-child {
    border-bottom: 0
  }
}

.page-fix-my-visibility .tcell .week {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tomato)
}

.page-fix-my-visibility .tcell h4 {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 400;
  margin: 0;
  letter-spacing: -0.01em;
  line-height: 1.15
}

.page-fix-my-visibility .tcell p {
  margin: 0;
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.55
}

.page-fix-my-visibility .tcell .dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--ink);
  position: absolute;
  top: 32px;
  right: 32px
}

.page-fix-my-visibility .tcell:nth-child(1) .dot {
  background: var(--tomato)
}

.page-fix-my-visibility .tcell:nth-child(2) .dot {
  background: var(--gold)
}

.page-fix-my-visibility .tcell:nth-child(3) .dot {
  background: var(--forest)
}

.page-fix-my-visibility .tcell:nth-child(4) .dot {
  background: var(--ink)
}

.page-fix-my-visibility .qform {
  background: var(--paper);
  border: 1px solid var(--hair-2);
  border-radius: 24px;
  padding: 48px;
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 48px
}

@media (max-width:1024px) {
  .page-fix-my-visibility .qform {
    grid-template-columns: 1fr;
    padding: 32px
  }
}

.page-fix-my-visibility .qform .lhs h2 {
  margin: 0;
  text-wrap: balance
}

.page-fix-my-visibility .qform .lhs h2 em {
  color: var(--tomato);
  font-style: italic
}

.page-fix-my-visibility .qform .lhs p {
  margin: 18px 0 0;
  color: var(--ink-2);
  font-size: 15.5px;
  line-height: 1.55;
  max-width: 36ch
}

.page-fix-my-visibility .qform .lhs ul {
  list-style: none;
  padding: 0;
  margin: 24px 0 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 14px;
  color: var(--ink-2)
}

.page-fix-my-visibility .qform .lhs ul li {
  padding-left: 24px;
  position: relative;
  line-height: 1.5
}

.page-fix-my-visibility .qform .lhs ul li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--serif);
  color: var(--forest);
  font-size: 18px;
  line-height: 1
}

.page-fix-my-visibility .qform form {
  display: flex;
  flex-direction: column;
  gap: 18px
}

.page-fix-my-visibility .field {
  display: flex;
  flex-direction: column;
  gap: 6px
}

.page-fix-my-visibility .field label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted)
}

.page-fix-my-visibility .field input, .page-fix-my-visibility .field select, .page-fix-my-visibility .field textarea {
  background: var(--bg);
  border: 1px solid var(--hair-2);
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 15px;
  font-family: var(--sans);
  color: var(--ink);
  transition: border-color .2s, box-shadow .2s
}

.page-fix-my-visibility .field textarea {
  min-height: 120px;
  resize: vertical
}

.page-fix-my-visibility .field input:focus, .page-fix-my-visibility .field select:focus, .page-fix-my-visibility .field textarea:focus {
  outline: 0;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(26, 24, 20, .08)
}

.page-fix-my-visibility .field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px
}

@media (max-width:560px) {
  .page-fix-my-visibility .field-row {
    grid-template-columns: 1fr
  }
}

.page-fix-my-visibility .dcard .num {
  font-size: 30px;
}

.page-fix-my-visibility .consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5
}

.page-fix-my-visibility .consent input {
  margin-top: 3px
}

.page-fix-my-visibility .qform .submit {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap
}

.page-fix-my-visibility .qform .submit .note {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--muted)
}

.page-fix-my-visibility footer {
  background: var(--ink);
  color: var(--bg);
  padding: 80px 0 32px
}

.page-fix-my-visibility .footer-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(4, 1fr);
  gap: 40px;
  margin-bottom: 60px
}

@media (max-width:1024px) {
  .page-fix-my-visibility .footer-grid {
    grid-template-columns: 1fr 1fr
  }
}

@media (max-width:560px) {
  .page-fix-my-visibility .footer-grid {
    grid-template-columns: 1fr
  }
}

.sim-q-text {
  font-size: 14px !important;
}

.page-fix-my-visibility .footer-brand p {
  color: rgba(244, 239, 230, .6);
  font-size: 14px;
  line-height: 1.55;
  max-width: 30ch;
  margin: 14px 0 0
}

.page-fix-my-visibility .footer-col h5 {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(244, 239, 230, .5);
  margin: 0 0 16px;
  font-weight: 500
}

.page-fix-my-visibility .footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 14px
}

.page-fix-my-visibility .footer-col a {
  color: rgba(244, 239, 230, .85);
  transition: color .2s
}

.page-fix-my-visibility .footer-col a:hover {
  color: var(--gold)
}

.page-fix-my-visibility .footer-bottom {
  padding-top: 32px;
  border-top: 1px solid rgba(255, 255, 255, .08);
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: rgba(244, 239, 230, .5);
  flex-wrap: wrap;
  gap: 18px
}

.page-fix-my-visibility :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--ring-w) solid var(--ring);
  outline-offset: var(--ring-off)
}

.page-fix-my-visibility .on-ink, .page-fix-my-visibility footer {
  --ring: var(--gold)
}

/* ─────────────────────────────────────────────────────────────
   BRAND LOGO — unified across every public marketing page.
   The nav/drawer/footer chrome and the logo source are already
   shared (site.partials.* + $siteLogoUrl / $footerLogoUrl from
   AppServiceProvider). These rules make the logo also RENDER
   identically everywhere, overriding the per-page scoped variants
   that had drifted: page-index sized the nav logo to 30px tall,
   page-platform forced it into a distorted 34×34 square, and the
   five concept pages (insights / replacement / share-of-voice /
   boost / fix) defined no `.brand img` rule at all, so the logo
   fell back to its intrinsic size. Scoped to `html.page-*` so the
   specificity beats every earlier per-page rule.
   ───────────────────────────────────────────────────────────── */
html[class*="page-"] .nav .brand img {
  width: auto;
  height: 30px;
  object-fit: contain;
  flex: none;
}

html[class*="page-"] .drawer-top .brand img {
  width: auto;
  height: 26px;
  object-fit: contain;
  flex: none;
}

html[class*="page-"] .footer-brand .brand img {
  width: auto;
  height: 36px;
  object-fit: contain;
  flex: none;
}

/* Unified site logo — shared across all layouts */
.site-logo {
  max-height: 45px;
  width: auto;
  object-fit: contain;
}

@media (max-width: 575px) {
  .nav-cta .btn-secondary {
    display: none;
  }

}