/* Carir AI concept site, v2. Palette and type follow apps/marketing (landing.css):
   indigo -> violet -> cyan on a cool light ground. Sora for display, Inter for text;
   an accent phrase is the gradient in the display face, never a script. Light only,
   like the live site. */

:root {
  --bg: #f6f8fc;
  --bg-2: #eef2f9;
  --surface: #ffffff;
  --ink: #0d1426;
  --ink-rgb: 13, 20, 38;
  --muted: #55607a;
  --line: rgba(var(--ink-rgb), 0.1);
  --line-2: rgba(var(--ink-rgb), 0.16);
  --ind: #4f46e5;
  --vio: #7c3aed;
  --cyan: #0e7490;
  --cyan-2: #22d3ee;
  --green: #047857;
  --green-bg: #e7f6ef;
  --amber: #b45309;
  --amber-bg: #fdf1e2;
  --red: #dc2626;
  --grad: linear-gradient(120deg, #6366f1 0%, #8b5cf6 45%, #22d3ee 100%);
  --grad-text: linear-gradient(100deg, #4f46e5 0%, #7c3aed 42%, #0e7490 100%);
  --grad-btn: linear-gradient(115deg, #4f46e5 0%, #0e7490 100%);
  --font-d: "Sora", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-b: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --maxw: 1200px;
  --r: 22px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --shadow-1: 0 1px 2px rgba(var(--ink-rgb), 0.06), 0 8px 24px rgba(var(--ink-rgb), 0.06);
  --shadow-2: 0 2px 6px rgba(var(--ink-rgb), 0.06), 0 28px 70px rgba(79, 70, 229, 0.16);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-b);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: var(--ind);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

sup a {
  font-size: 12px;
  font-weight: 600;
  margin-left: 1px;
  padding: 2px 4px;
}

:focus-visible {
  outline: 3px solid rgba(79, 70, 229, 0.45);
  outline-offset: 3px;
  border-radius: 8px;
}

::selection {
  background: rgba(99, 102, 241, 0.22);
}

.skip {
  position: absolute;
  left: -999px;
  top: 8px;
  background: var(--ink);
  color: #fff;
  padding: 8px 14px;
  border-radius: 10px;
  z-index: 100;
}

.skip:focus {
  left: 12px;
}

.wrap {
  width: min(var(--maxw), 100% - 48px);
  margin-inline: auto;
}

.muted {
  color: var(--muted);
}

.small {
  font-size: 13.5px;
}

/* The accent phrase: the heading's own face and weight, in the gradient. */
.serif-accent {
  font-family: inherit;
  font-style: normal;
  font-weight: inherit;
  letter-spacing: inherit;
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-right: 0.06em;
}

/* ---------- Progress bar ---------- */

.progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 3px;
  z-index: 60;
  pointer-events: none;
}

.progress span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--grad);
  transition: width 0.1s linear;
}

/* ---------- Buttons ---------- */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 42px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid transparent;
  font: 600 15px/1 var(--font-b);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  transition:
    transform 0.25s var(--ease),
    box-shadow 0.25s var(--ease),
    background 0.2s ease;
  will-change: transform;
}

.btn:hover {
  text-decoration: none;
  transform: translateY(-2px);
}

.btn:active {
  transform: translateY(0) scale(0.98);
}

.btn-primary {
  background: var(--grad-btn);
  color: #fff;
  box-shadow: 0 8px 22px rgba(79, 70, 229, 0.28);
}

.btn-primary:hover {
  box-shadow: 0 14px 30px rgba(79, 70, 229, 0.36);
}

.btn-shine::after {
  content: "";
  position: absolute;
  top: -40%;
  left: -60%;
  width: 40%;
  height: 180%;
  background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, 0.45) 50%, transparent 100%);
  transform: skewX(-20deg);
  animation: shine 4.5s ease-in-out infinite;
  pointer-events: none;
}

@keyframes shine {
  0%,
  70% {
    left: -60%;
  }
  100% {
    left: 140%;
  }
}

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-2);
}

.btn-soft {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line);
  box-shadow: var(--shadow-1);
}

.btn-light {
  background: #fff;
  color: var(--ind);
}

.btn-lg {
  height: 54px;
  padding: 0 28px;
  font-size: 16px;
}

.btn-sm {
  height: 40px;
  padding: 0 14px;
  font-size: 13.5px;
}

.arrow {
  display: inline-block;
  transition: transform 0.25s var(--ease);
}

.btn:hover .arrow {
  transform: translateX(4px);
}

.play {
  position: relative;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(79, 70, 229, 0.1);
  display: grid;
  place-items: center;
}

.play span {
  width: 0;
  height: 0;
  margin-left: 2px;
  border-left: 8px solid var(--ind);
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}

.play::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid rgba(79, 70, 229, 0.35);
  animation: ripple 2.2s ease-out infinite;
}

@keyframes ripple {
  from {
    transform: scale(0.8);
    opacity: 1;
  }
  to {
    transform: scale(1.6);
    opacity: 0;
  }
}

/* ---------- Nav ---------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(246, 248, 252, 0.72);
  backdrop-filter: saturate(1.5) blur(16px);
  -webkit-backdrop-filter: saturate(1.5) blur(16px);
  border-bottom: 1px solid transparent;
  transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

.nav.is-scrolled {
  border-bottom-color: var(--line);
  box-shadow: 0 8px 30px rgba(var(--ink-rgb), 0.05);
}

.nav-inner {
  width: min(var(--maxw), 100% - 48px);
  margin-inline: auto;
  height: 72px;
  display: flex;
  align-items: center;
  gap: 28px;
}

.brand {
  display: inline-flex;
  align-items: center;
  /* A finger, not a cursor: the logo's own 33px is not a tap target. */
  min-height: 40px;
}

.brand img {
  width: 120px;
}

.nav-links {
  display: flex;
  gap: 4px;
  margin-left: 8px;
}

.nav-links a {
  position: relative;
  color: var(--muted);
  font-weight: 500;
  font-size: 15px;
  padding: 8px 12px;
  border-radius: 999px;
  transition:
    color 0.2s ease,
    background 0.2s ease;
}

.nav-links a:hover,
.nav-links a.is-active {
  color: var(--ink);
  background: rgba(var(--ink-rgb), 0.05);
  text-decoration: none;
}

.nav-cta {
  margin-left: auto;
  display: flex;
  gap: 10px;
}

.nav-toggle {
  display: none;
  margin-left: auto;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  border: 1px solid var(--line-2);
  background: var(--surface);
  cursor: pointer;
  position: relative;
}

.nav-toggle span {
  position: absolute;
  left: 11px;
  right: 11px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.2s ease;
}

.nav-toggle span:first-child {
  top: 16px;
}

.nav-toggle span:last-child {
  top: 24px;
}

.nav-toggle[aria-expanded="true"] span:first-child {
  transform: translateY(4px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span:last-child {
  transform: translateY(-4px) rotate(-45deg);
}

.mobile-menu {
  display: none;
  gap: 6px;
  padding: 8px 16px 20px;
  border-bottom: 1px solid var(--line);
}

@media (max-width: 720px) {
  .mobile-menu:not([hidden]) {
    display: grid;
    animation: fade-up 0.3s var(--ease);
  }
}

.mobile-menu a:not(.btn) {
  color: var(--ink);
  font-weight: 500;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}

.mobile-menu .btn {
  margin-top: 10px;
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  padding: 64px 0 0;
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.6;
  animation: drift 18s ease-in-out infinite alternate;
}

.orb-a {
  width: 560px;
  height: 560px;
  left: -160px;
  top: -180px;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.5), transparent 65%);
}

.orb-b {
  width: 500px;
  height: 500px;
  right: -140px;
  top: 20px;
  background: radial-gradient(circle, rgba(34, 211, 238, 0.4), transparent 65%);
  animation-delay: -6s;
}

.orb-c {
  width: 420px;
  height: 420px;
  left: 40%;
  bottom: -180px;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.32), transparent 65%);
  animation-delay: -11s;
}

@keyframes drift {
  from {
    transform: translate3d(0, 0, 0) scale(1);
  }
  to {
    transform: translate3d(40px, 30px, 0) scale(1.08);
  }
}

.halo {
  position: absolute;
  right: 6%;
  top: 14%;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(99, 102, 241, 0.18), rgba(34, 211, 238, 0.18), rgba(139, 92, 246, 0.18), rgba(99, 102, 241, 0.18));
  filter: blur(40px);
  animation: spin 22s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.grid-lines {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(var(--ink-rgb), 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--ink-rgb), 0.05) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 30%, transparent 75%);
}

.hero-inner {
  position: relative;
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: 48px;
  align-items: center;
  padding-bottom: 72px;
}

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 22px;
  padding: 8px 16px 8px 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-1);
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
  animation: fade-up 0.7s var(--ease) both;
}

.kicker-dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--grad);
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.14);
}

.rotator {
  color: var(--ind);
  font-weight: 600;
}

.caret {
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 2px;
  vertical-align: -0.15em;
  background: var(--ind);
  animation: blink 1s steps(2) infinite;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

.hero-title {
  font-family: var(--font-d);
  font-weight: 700;
  font-size: clamp(46px, 6.6vw, 92px);
  line-height: 1;
  letter-spacing: -0.04em;
  margin: 0 0 26px;
}

.ht-line {
  display: block;
}

.ht-word {
  display: inline-block;
  margin-right: 0;
  opacity: 0;
  transform: translateY(0.45em) rotate(1.5deg);
  animation: word-in 0.9s var(--ease) forwards;
  animation-delay: calc(0.15s + var(--i) * 0.11s);
  transform-origin: left bottom;
}

.ht-dot {
  margin-left: -0.28em;
  margin-right: 0;
}

@keyframes word-in {
  to {
    opacity: 1;
    transform: none;
  }
}

.ht-you {
  position: relative;
  margin-right: 0;
}

.ht-you em {
  font-family: inherit;
  font-style: normal;
  font-weight: inherit;
  letter-spacing: inherit;
  background: var(--grad-text);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer 8s ease-in-out infinite alternate;
  padding-right: 0.05em;
}

@keyframes shimmer {
  from {
    background-position: 0% 50%;
  }
  to {
    background-position: 100% 50%;
  }
}

.scribble {
  position: absolute;
  left: -2%;
  right: -4%;
  bottom: -0.12em;
  width: 106%;
  height: 0.3em;
  overflow: visible;
}

.scribble path {
  fill: none;
  stroke: url(#scribble-grad);
  stroke-width: 7;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: draw 0.9s var(--ease) forwards;
  animation-delay: 1.05s;
}

@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}

.hero-lead {
  font-size: 19px;
  color: var(--muted);
  max-width: 560px;
  margin: 0 0 32px;
}

.hero-lead strong {
  color: var(--ink);
  font-weight: 600;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 26px;
}

.hero-promises {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 14.5px;
  color: var(--muted);
}

.hero-promises li {
  position: relative;
  padding-left: 22px;
}

.hero-promises li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3.5 7.2l2.3 2.3 4.7-4.9' fill='none' stroke='%23047857' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
      center / 14px no-repeat,
    var(--green-bg);
}

/* ---------- Desk stage ---------- */

.desk-stage {
  position: relative;
  perspective: 1600px;
  padding: 44px 0;
  animation: fade-up 1s var(--ease) 0.5s both;
}

.desk {
  position: relative;
  z-index: 1;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 28px;
  padding: 18px;
  box-shadow: var(--shadow-2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transform: rotateY(var(--ry, -6deg)) rotateX(var(--rx, 3deg));
  transition: transform 0.18s ease-out;
  transform-style: preserve-3d;
}

.desk-glare {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(600px circle at var(--gx, 30%) var(--gy, 20%), rgba(255, 255, 255, 0.55), transparent 55%);
  pointer-events: none;
  mix-blend-mode: soft-light;
}

.desk-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 6px 14px;
  font-size: 14px;
}

.desk-when {
  display: flex;
  align-items: center;
  gap: 8px;
}

.live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
  animation: pulse 2.2s infinite;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.45);
  }
  70% {
    box-shadow: 0 0 0 9px rgba(16, 185, 129, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
  }
}

.desk-summary {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ind);
  background: rgba(79, 70, 229, 0.08);
  padding: 5px 10px;
  border-radius: 999px;
  transition: background 0.3s ease;
}

.desk-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.role {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 14px;
  transition: box-shadow 0.3s ease;
}

.role-ready {
  border-color: rgba(79, 70, 229, 0.35);
  box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.06);
}

.role-top {
  display: flex;
  align-items: center;
  gap: 12px;
}

.logo-sq {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  font: 700 13px/1 var(--font-d);
  color: #fff;
}

.logo-a {
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
}

.logo-b {
  background: linear-gradient(135deg, #0e7490, #22d3ee);
}

.logo-c {
  background: linear-gradient(135deg, #b45309, #f59e0b);
}

.role-main {
  min-width: 0;
  flex: 1;
}

.role-title {
  margin: 0;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.3;
}

.role-meta {
  margin: 2px 0 0;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.35;
}

.ring {
  --v: 50;
  --p: 0;
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background:
    radial-gradient(closest-side, #fff 78%, transparent 80% 100%),
    conic-gradient(#10b981 calc(var(--p) * 1%), rgba(var(--ink-rgb), 0.08) 0);
  font: 700 14px/1 var(--font-d);
}

.ring.is-in {
  --p: var(--v);
  transition: --p 1.2s var(--ease);
}

.ring-soft {
  background:
    radial-gradient(closest-side, #fff 78%, transparent 80% 100%),
    conic-gradient(#6366f1 calc(var(--p) * 1%), rgba(var(--ink-rgb), 0.08) 0);
}

.ring-xl {
  width: 96px;
  height: 96px;
  font-size: 30px;
}

@property --p {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 12px 0 10px;
}

.chip {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  background: rgba(var(--ink-rgb), 0.05);
  color: var(--muted);
  white-space: nowrap;
}

.chip-green {
  background: var(--green-bg);
  color: var(--green);
}

.chip-amber {
  background: var(--amber-bg);
  color: var(--amber);
}

.pulse-chip {
  animation: chip-pulse 2.4s ease-in-out infinite;
}

@keyframes chip-pulse {
  50% {
    box-shadow: 0 0 0 6px rgba(245, 158, 11, 0.12);
  }
}

.steps {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  display: grid;
  gap: 5px;
  font-size: 13px;
}

.steps li {
  position: relative;
  padding-left: 22px;
  color: var(--ink);
}

.steps li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3.5 7.2l2.3 2.3 4.7-4.9' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
      center / 14px no-repeat,
    #10b981;
  transform: scale(0);
  animation: pop-in 0.4s var(--ease) forwards;
  animation-delay: calc(1.3s + var(--n, 0) * 0.16s);
}

.steps li:nth-child(1) {
  --n: 0;
}
.steps li:nth-child(2) {
  --n: 1;
}
.steps li:nth-child(3) {
  --n: 2;
}
.steps li:nth-child(4) {
  --n: 3;
}

@keyframes pop-in {
  60% {
    transform: scale(1.2);
  }
  to {
    transform: scale(1);
  }
}

.role-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.prep {
  margin-top: 12px;
}

.prep-bar {
  height: 6px;
  border-radius: 999px;
  background: rgba(var(--ink-rgb), 0.07);
  overflow: hidden;
}

.prep-bar span {
  display: block;
  height: 100%;
  width: 8%;
  background: var(--grad);
  background-size: 200% 100%;
  border-radius: inherit;
  transition: width 0.9s var(--ease);
  animation: shimmer 2s linear infinite;
}

.prep-label {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--muted);
}

.desk-foot {
  margin: 12px 4px 0;
  font-size: 12px;
  color: #8a93a8;
}

/* floating chips */

.float-chip {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px 10px 10px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--line);
  box-shadow: 0 14px 34px rgba(79, 70, 229, 0.14);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: bob 6s ease-in-out infinite;
  transform: translate3d(var(--px, 0), var(--py, 0), 0);
}

.float-chip small {
  display: block;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-bottom: 2px;
}

.fc-ico {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  font: 700 12px/1 var(--font-d);
  color: #fff;
}

.fc-ico-ind {
  background: var(--grad-btn);
  font-size: 20px;
  line-height: 1;
  padding-top: 7px;
}

.fc-ico-green {
  background: #10b981;
  font-size: 12px;
}

.fc-ico-amber {
  background: linear-gradient(135deg, #b45309, #f59e0b);
}

.fc-big {
  font: 700 26px/1 var(--font-d);
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding: 0 4px;
}

/* Chips sit on the desk's edges, over its padding, never over its text:
   one above, two hanging off the right edge beside short rows, one below. */
.fc-1 {
  top: 0;
  left: 8%;
  animation-delay: -1s;
}

.fc-2 {
  right: -30px;
  top: 33%;
  animation-delay: -3s;
}

.fc-3 {
  right: -30px;
  top: 67%;
  animation-delay: -2s;
}

.fc-4 {
  bottom: 0;
  right: 7%;
  animation-delay: -4.5s;
}

@keyframes bob {
  0%,
  100% {
    margin-top: 0;
  }
  50% {
    margin-top: -10px;
  }
}

/* ---------- Sections ---------- */

section {
  position: relative;
}

.eyebrow {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ind);
}

.section-title {
  font-family: var(--font-d);
  font-weight: 700;
  font-size: clamp(32px, 4.4vw, 56px);
  line-height: 1.06;
  letter-spacing: -0.035em;
  margin: 0 0 18px;
  max-width: 860px;
}

.section-lead {
  font-size: 18.5px;
  color: var(--muted);
  max-width: 700px;
  margin: 0 0 36px;
}

/* ---------- Proof ---------- */

.proof {
  padding: 96px 0 100px;
}

.proof-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 34px;
}

.stat {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 28px 28px 24px;
  box-shadow: var(--shadow-1);
  display: flex;
  flex-direction: column;
  transition:
    transform 0.35s var(--ease),
    box-shadow 0.35s var(--ease);
}

.stat:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-2);
}

.stat-num {
  margin: 0 0 8px;
  font-family: var(--font-d);
  font-weight: 700;
  font-size: clamp(44px, 5vw, 66px);
  line-height: 1;
  letter-spacing: -0.04em;
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-variant-numeric: tabular-nums;
}

.stat-text {
  margin: 0 0 22px;
  color: var(--muted);
  font-size: 16px;
}

.bars {
  margin-top: auto;
  display: flex;
  align-items: flex-end;
  gap: 10px;
  height: 120px;
  padding-top: 22px;
}

.bar {
  position: relative;
  flex: 1;
  height: var(--h);
  border-radius: 8px 8px 4px 4px;
  background: rgba(79, 70, 229, 0.18);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.9s var(--ease);
  transition-delay: calc(0.25s + var(--i) * 0.12s);
}

.is-in .bar {
  transform: scaleY(1);
}

.bar-hot {
  background: var(--grad-btn);
}

.bar b {
  position: absolute;
  left: 0;
  right: 0;
  top: -22px;
  text-align: center;
  font: 700 12.5px/1 var(--font-d);
  color: var(--ink);
}

.bar i {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -20px;
  text-align: center;
  font: 500 12px/1 var(--font-b);
  font-style: normal;
  color: var(--muted);
}

.odds {
  margin-top: auto;
  display: grid;
  gap: 14px;
  padding-top: 6px;
}

.odds-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}

.odds-track {
  height: 14px;
  border-radius: 999px;
  background: rgba(var(--ink-rgb), 0.06);
  overflow: hidden;
}

.odds-track i {
  display: block;
  height: 100%;
  width: var(--w);
  border-radius: inherit;
  background: rgba(79, 70, 229, 0.35);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1s var(--ease) 0.3s;
}

.odds-track .odds-now {
  background: var(--grad-btn);
  transition-delay: 0.6s;
}

.is-in .odds-track i {
  transform: scaleX(1);
}

.ghosts {
  margin-top: auto;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}

.ghosts i {
  aspect-ratio: 1;
  border-radius: 8px;
  background: rgba(79, 70, 229, 0.14);
  opacity: 0;
  transform: scale(0.6);
  transition:
    opacity 0.4s var(--ease),
    transform 0.4s var(--ease),
    background 0.4s ease;
}

.ghosts i:nth-child(1) {
  transition-delay: 0.1s;
}
.ghosts i:nth-child(2) {
  transition-delay: 0.17s;
}
.ghosts i:nth-child(3) {
  transition-delay: 0.24s;
}
.ghosts i:nth-child(4) {
  transition-delay: 0.31s;
}
.ghosts i:nth-child(5) {
  transition-delay: 0.38s;
}
.ghosts i:nth-child(6) {
  transition-delay: 0.45s;
}
.ghosts i:nth-child(7) {
  transition-delay: 0.52s;
}
.ghosts i:nth-child(8) {
  transition-delay: 0.59s;
}
.ghosts i:nth-child(9) {
  transition-delay: 0.66s;
}
.ghosts i:nth-child(10) {
  transition-delay: 0.73s;
}

.is-in .ghosts i {
  opacity: 1;
  transform: scale(1);
}

.is-in .ghosts i.g {
  background: repeating-linear-gradient(135deg, rgba(220, 38, 38, 0.18) 0 4px, rgba(220, 38, 38, 0.06) 4px 8px);
  animation: ghost-fade 3s ease-in-out infinite;
}

@keyframes ghost-fade {
  50% {
    opacity: 0.35;
  }
}

/* ---------- How ---------- */

.how {
  padding: 110px 0;
}

.rail {
  position: relative;
  height: 44px;
  margin: 34px 0 26px;
}

.rail-line {
  position: absolute;
  left: 22px;
  right: 22px;
  top: 50%;
  height: 2px;
  background: rgba(var(--ink-rgb), 0.1);
  transform: translateY(-50%);
}

.rail-line span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--grad);
  transition: width 0.4s linear;
}

.node {
  position: absolute;
  top: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid rgba(var(--ink-rgb), 0.12);
  display: grid;
  place-items: center;
  font: 700 13px/1 var(--font-d);
  color: var(--muted);
  transition:
    border-color 0.3s ease,
    color 0.3s ease,
    background 0.3s ease,
    transform 0.3s var(--ease);
}

.node[data-node="0"] {
  left: 0;
}

.node[data-node="1"] {
  left: 50%;
  transform: translateX(-50%);
}

.node[data-node="2"] {
  right: 0;
}

.node.lit {
  border-color: var(--ind);
  color: var(--ind);
  background: #fff;
  box-shadow: 0 0 0 6px rgba(79, 70, 229, 0.1);
}

.node-you.lit {
  background: var(--grad-btn);
  border-color: transparent;
  color: #fff;
}

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

.how-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 28px;
  box-shadow: var(--shadow-1);
  display: flex;
  flex-direction: column;
  transition:
    transform 0.35s var(--ease),
    box-shadow 0.35s var(--ease);
}

.how-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-2);
}

.how-step {
  margin: 0 0 14px;
  font: 700 12px/1 var(--font-d);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ind);
}

.how-card h3 {
  font-family: var(--font-d);
  font-size: 22px;
  line-height: 1.22;
  letter-spacing: -0.02em;
  margin: 0 0 10px;
}

.how-card p:not(.how-step) {
  color: var(--muted);
  margin: 0 0 22px;
  font-size: 15.5px;
}

.mini {
  margin-top: auto;
  border-radius: 16px;
  background: var(--bg);
  border: 1px solid var(--line);
  padding: 16px;
  min-height: 150px;
  position: relative;
  overflow: hidden;
}

.mini-resume .line {
  display: block;
  height: 8px;
  border-radius: 6px;
  background: rgba(var(--ink-rgb), 0.1);
  margin-bottom: 10px;
}

.mini-resume .hl-line {
  background: linear-gradient(90deg, rgba(99, 102, 241, 0.6), rgba(34, 211, 238, 0.6));
}

.beam {
  position: absolute;
  left: 0;
  right: 0;
  height: 26px;
  top: -30px;
  background: linear-gradient(180deg, transparent, rgba(99, 102, 241, 0.18), transparent);
  animation: beam 3.2s ease-in-out infinite;
}

@keyframes beam {
  to {
    top: 110%;
  }
}

.w40 {
  width: 40%;
}
.w50 {
  width: 50%;
}
.w60 {
  width: 60%;
}
.w70 {
  width: 70%;
}
.w80 {
  width: 80%;
}
.w90 {
  width: 90%;
}

.mini-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.mini-tags span {
  font-size: 12px;
  font-weight: 600;
  color: var(--ind);
  background: #fff;
  border: 1px solid rgba(79, 70, 229, 0.25);
  padding: 3px 8px;
  border-radius: 999px;
  opacity: 0;
  transform: translateY(6px);
  animation: fade-up 0.5s var(--ease) forwards;
}

.mini-tags span:nth-child(1) {
  animation-delay: 0.9s;
}
.mini-tags span:nth-child(2) {
  animation-delay: 1.4s;
}
.mini-tags span:nth-child(3) {
  animation-delay: 1.9s;
}

.mini-funnel {
  display: grid;
  gap: 7px;
  align-content: start;
}

.mini-funnel span {
  display: block;
  width: var(--w);
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  background: rgba(var(--ink-rgb), 0.06);
  border-radius: 8px;
  padding: 5px 9px;
  white-space: nowrap;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.7s var(--ease);
  transition-delay: calc(0.2s + var(--i) * 0.14s);
}

.is-in .mini-funnel span {
  transform: scaleX(1);
}

.mini-funnel .is-you {
  color: #fff;
  background: var(--grad-btn);
  min-width: 90px;
}

.mini-send {
  display: grid;
  gap: 9px;
  align-content: start;
}

.mini-send .field {
  display: block;
  height: 14px;
  border-radius: 6px;
  background: rgba(var(--ink-rgb), 0.08);
  overflow: hidden;
}

.mini-send .field i {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, rgba(16, 185, 129, 0.45), rgba(16, 185, 129, 0.2));
  animation: fill 5s var(--ease) infinite;
}

.mini-send .field:nth-child(2) i {
  animation-delay: 0.5s;
}

.mini-send .field.short {
  width: 60%;
}

.mini-send .field.short i {
  animation-delay: 1s;
}

@keyframes fill {
  0% {
    width: 0;
  }
  25%,
  85% {
    width: 100%;
  }
  100% {
    width: 100%;
  }
}

.mini-send .submit {
  justify-self: start;
  margin-top: 4px;
  font: 700 13px/1 var(--font-b);
  color: #fff;
  background: var(--ink);
  border-radius: 9px;
  padding: 8px 14px;
  animation: ring 2.4s infinite;
}

.mini-cursor {
  position: absolute;
  left: 30%;
  top: 30%;
  display: flex;
  align-items: flex-start;
  gap: 2px;
  animation: cursor-path 5s var(--ease) infinite;
}

.mini-cursor svg {
  width: 16px;
  height: 16px;
  fill: var(--ind);
  stroke: #fff;
  stroke-width: 1;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25));
}

.mini-cursor b {
  font: 700 12px/1 var(--font-b);
  color: #fff;
  background: var(--ind);
  padding: 3px 7px;
  border-radius: 6px 6px 6px 2px;
  margin-top: 8px;
}

@keyframes cursor-path {
  0%,
  35% {
    left: 60%;
    top: 20%;
  }
  60%,
  100% {
    left: 26px;
    top: calc(100% - 46px);
  }
}

@keyframes ring {
  0% {
    box-shadow: 0 0 0 0 rgba(79, 70, 229, 0.45);
  }
  70% {
    box-shadow: 0 0 0 12px rgba(79, 70, 229, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(79, 70, 229, 0);
  }
}

/* ---------- Receipts ---------- */

.receipts {
  padding: 110px 0;
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
}

.tabs {
  position: relative;
  display: inline-flex;
  gap: 4px;
  padding: 5px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: var(--shadow-1);
  margin-bottom: 22px;
  flex-wrap: wrap;
}

.tab-ink,
.switch-ink,
.market-ink {
  position: absolute;
  top: 5px;
  bottom: 5px;
  left: 0;
  width: 0;
  border-radius: 999px;
  background: var(--ink);
  transition:
    left 0.35s var(--ease),
    width 0.35s var(--ease),
    background 0.3s ease;
}

.tabs button,
.switch-btn,
.market-btn {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  border: 0;
  background: transparent;
  font: 600 14.5px/1 var(--font-b);
  color: var(--muted);
  padding: 11px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.25s ease;
}

.tabs button[aria-selected="true"],
.switch-btn.is-on,
.market-btn.is-on {
  color: #fff;
}

.panel {
  animation: fade-up 0.45s var(--ease);
}

@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.score-card,
.trail,
.real-grid {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 30px;
  box-shadow: var(--shadow-1);
}

.score-big {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 22px;
}

.score-role {
  margin: 0;
  font-family: var(--font-d);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.02em;
}

.parts {
  list-style: none;
  padding: 0;
  margin: 0 0 26px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.parts li {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px 14px;
  font-weight: 600;
  font-size: 15px;
  animation: fade-up 0.5s var(--ease) both;
  animation-delay: calc(0.1s + var(--i) * 0.08s);
}

.parts em {
  display: block;
  font-style: normal;
  font-weight: 500;
  font-size: 13px;
  color: var(--muted);
  margin-top: 2px;
}

.ok {
  color: var(--green);
  margin-right: 4px;
}

.quote-pair {
  display: grid;
  grid-template-columns: 1fr 70px 1fr;
  align-items: center;
  margin-bottom: 18px;
}

.quote {
  border-radius: 16px;
  padding: 16px 18px;
  background: var(--bg);
  border: 1px solid var(--line);
}

.quote p {
  margin: 0;
  font-size: 15.5px;
}

.quote-you {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.08), rgba(34, 211, 238, 0.08));
  border-color: rgba(79, 70, 229, 0.25);
}

.quote-label {
  font-size: 12px !important;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px !important;
}

.connector {
  position: relative;
  height: 2px;
  margin: 0 8px;
  background: repeating-linear-gradient(90deg, var(--ind) 0 6px, transparent 6px 11px);
  background-size: 22px 2px;
  animation: dash 1.2s linear infinite;
}

@keyframes dash {
  to {
    background-position: 22px 0;
  }
}

.connector span {
  position: absolute;
  right: -2px;
  top: -4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ind);
}

.gap {
  margin: 0;
  font-size: 14.5px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 8px;
}

.dot-amber,
.dot-green {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #f59e0b;
}

.dot-green {
  background: #10b981;
}

.trail {
  list-style: none;
  margin: 0;
  display: grid;
  gap: 16px;
}

.trail li {
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px 18px;
  background: var(--bg);
  animation: fade-up 0.5s var(--ease) both;
  animation-delay: calc(var(--i) * 0.12s);
}

.trail-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-weight: 600;
  font-size: 15px;
  margin-bottom: 10px;
}

.badge {
  font-size: 12px;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 999px;
  letter-spacing: 0.02em;
}

.badge-word {
  background: var(--green-bg);
  color: var(--green);
}

.badge-sub {
  background: var(--amber-bg);
  color: var(--amber);
}

.badge-no {
  background: rgba(220, 38, 38, 0.08);
  color: var(--red);
}

.trail-from,
.trail-to {
  margin: 0 0 6px;
  font-size: 15px;
}

.trail-from span,
.trail-to span {
  display: inline-block;
  min-width: 86px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.trail-to q {
  quotes: "\201C" "\201D";
  color: var(--ind);
  font-weight: 500;
}

.trail-src {
  margin: 4px 0 0;
  font-size: 13.5px;
  color: var(--muted);
}

.trail-refused {
  background: repeating-linear-gradient(135deg, rgba(220, 38, 38, 0.035) 0 10px, transparent 10px 20px), var(--bg) !important;
}

.real-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 12px;
}

.real-card {
  border-radius: 16px;
  padding: 20px;
  border: 1px solid var(--line);
}

.real-live {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.08), rgba(16, 185, 129, 0.02));
}

.real-stale {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(245, 158, 11, 0.02));
}

.verdict {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  font-family: var(--font-d);
  font-weight: 700;
  font-size: 20px;
}

.checks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-size: 15px;
}

.checks li {
  position: relative;
  padding-left: 26px;
  animation: fade-up 0.45s var(--ease) both;
  animation-delay: calc(0.1s + var(--i) * 0.12s);
}

.checks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3.5 7.2l2.3 2.3 4.7-4.9' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
      center / 14px no-repeat,
    #10b981;
}

.checks-warn li::before {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M7 3.5v4M7 10v.5' fill='none' stroke='%23fff' stroke-width='1.9' stroke-linecap='round'/%3E%3C/svg%3E")
      center / 14px no-repeat,
    #f59e0b;
}

/* ---------- Never ---------- */

.never {
  padding: 110px 0;
}

.never-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 34px;
}

.never-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 20px;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.4;
  box-shadow: var(--shadow-1);
  transition-delay: calc(var(--i) * 70ms) !important;
}

.never-item .t {
  position: relative;
}

.never-item .t::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  height: 2px;
  width: 0;
  background: var(--red);
  transition: width 0.6s var(--ease);
  transition-delay: calc(0.35s + var(--i) * 0.12s);
}

.never-item.is-in .t::after {
  width: 100%;
}

.never-item.is-in .t {
  color: var(--muted);
  transition: color 0.4s ease calc(0.6s + var(--i) * 0.12s);
}

.x {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Cpath d='M9 9l8 8M17 9l-8 8' stroke='%23dc2626' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E")
      center / 26px no-repeat,
    rgba(220, 38, 38, 0.08);
}

/* ---------- Pricing ---------- */

.pricing {
  padding: 110px 0;
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
}

.market {
  position: relative;
  display: inline-flex;
  padding: 5px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-1);
  margin-bottom: 26px;
}

.market-btn {
  padding: 10px 16px;
}

.plans {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  align-items: stretch;
}

.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 30px 28px;
  box-shadow: var(--shadow-1);
  transition:
    transform 0.35s var(--ease),
    box-shadow 0.35s var(--ease);
}

.plan:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-2);
}

.plan h3 {
  margin: 0 0 8px;
  font-family: var(--font-d);
  font-size: 20px;
  letter-spacing: -0.02em;
}

.price {
  margin: 0 0 6px;
  font-family: var(--font-d);
  font-weight: 700;
  font-size: 48px;
  letter-spacing: -0.04em;
  line-height: 1.05;
}

.price small {
  display: block;
  font-family: var(--font-b);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--muted);
}

.flip {
  display: inline-block;
  transition:
    transform 0.3s var(--ease),
    opacity 0.3s ease;
}

.flip.is-flipping {
  transform: translateY(-8px);
  opacity: 0;
}

.plan-sub {
  color: var(--muted);
  margin: 0 0 18px;
  font-size: 15px;
}

.plan ul {
  list-style: none;
  padding: 0;
  margin: 0 0 26px;
  display: grid;
  gap: 9px;
  font-size: 15px;
}

.plan li {
  position: relative;
  padding-left: 24px;
}

.plan li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3.5 7.2l2.3 2.3 4.7-4.9' fill='none' stroke='%234f46e5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
      center / 15px no-repeat,
    rgba(79, 70, 229, 0.1);
}

.plan .btn {
  margin-top: auto;
}

.plan-lead {
  border: 2px solid transparent;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    conic-gradient(from var(--a, 0deg), #6366f1, #22d3ee, #8b5cf6, #6366f1) border-box;
  box-shadow: var(--shadow-2);
  transform: translateY(-8px);
  animation: rotate-border 6s linear infinite;
}

.plan-lead:hover {
  transform: translateY(-12px);
}

@property --a {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@keyframes rotate-border {
  to {
    --a: 360deg;
  }
}

.plan-flag {
  position: absolute;
  top: -14px;
  left: 28px;
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background: var(--grad-btn);
  padding: 5px 11px;
  border-radius: 999px;
}

/* The free plan's flag: quieter than the paid ones. */
.plan-flag-soft {
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
}

/* The saving a plan really carries: the yearly price against paying
   monthly, and the free week. Never a price nobody was charged. */
.save-badge {
  position: relative;
  overflow: hidden;
  align-self: flex-start;
  margin: 2px 0 14px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: #fff;
  background: linear-gradient(100deg, #f43f5e, #f97316 55%, #f59e0b);
  box-shadow: 0 6px 18px rgba(244, 63, 94, 0.28);
}

.save-badge-glint {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    110deg,
    transparent 30%,
    rgba(255, 255, 255, 0.55) 48%,
    transparent 66%
  );
  transform: translateX(-120%);
  animation: save-glint 3.2s ease-in-out infinite;
  pointer-events: none;
}

@keyframes save-glint {
  0%,
  55% {
    transform: translateX(-120%);
  }
  85%,
  100% {
    transform: translateX(120%);
  }
}

.price-was {
  display: inline-block;
  margin-right: 10px;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--muted);
  text-decoration-thickness: 2px;
  text-decoration-color: #f43f5e;
  vertical-align: 0.35em;
}

.plan li.li-lead {
  padding-left: 0;
  font-weight: 700;
}

.plan li.li-lead::before {
  content: none;
}

.plan-value {
  border-color: rgba(244, 63, 94, 0.35);
}

@media (prefers-reduced-motion: reduce) {
  .save-badge-glint {
    animation: none;
    display: none;
  }
}

.trial-note {
  margin: 26px 0 0;
  color: var(--muted);
  font-size: 15px;
  max-width: 720px;
}

/* ---------- FAQ ---------- */

.faq {
  padding: 110px 0;
}

.faq-inner {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 56px;
  align-items: start;
}

.faq-side {
  position: sticky;
  top: 100px;
}

.faq-list {
  display: grid;
  gap: 10px;
}

details {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 4px 20px;
  box-shadow: var(--shadow-1);
  transition: border-color 0.2s ease;
}

details[open] {
  border-color: rgba(79, 70, 229, 0.3);
}

summary {
  list-style: none;
  cursor: pointer;
  font-weight: 600;
  font-size: 16.5px;
  padding: 16px 30px 16px 0;
  position: relative;
}

summary::-webkit-details-marker {
  display: none;
}

summary::after {
  content: "";
  position: absolute;
  right: 2px;
  top: 50%;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.25s var(--ease);
}

details[open] summary::after {
  transform: translateY(-30%) rotate(225deg);
}

details p {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 15.5px;
  animation: fade-up 0.35s var(--ease);
}

/* ---------- Final CTA ---------- */

.final {
  padding: 30px 0 110px;
}

.final-inner {
  position: relative;
  overflow: hidden;
  border-radius: 32px;
  padding: 84px 40px;
  text-align: center;
  color: #fff;
  background: #0b1020;
  box-shadow: var(--shadow-2);
}

.aurora {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.aurora span {
  position: absolute;
  width: 60%;
  height: 120%;
  top: -10%;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.75;
  animation: aurora 14s ease-in-out infinite alternate;
}

.aurora span:nth-child(1) {
  left: -10%;
  background: radial-gradient(circle, #4f46e5, transparent 60%);
}

.aurora span:nth-child(2) {
  left: 25%;
  background: radial-gradient(circle, #22d3ee, transparent 60%);
  animation-delay: -5s;
}

.aurora span:nth-child(3) {
  left: 55%;
  background: radial-gradient(circle, #8b5cf6, transparent 60%);
  animation-delay: -9s;
}

@keyframes aurora {
  from {
    transform: translateX(-6%) scale(1);
  }
  to {
    transform: translateX(8%) scale(1.15);
  }
}

.final-kicker {
  position: relative;
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #a5b4fc;
}

.final-inner h2 {
  position: relative;
  font-family: var(--font-d);
  font-size: clamp(32px, 4.4vw, 56px);
  letter-spacing: -0.035em;
  line-height: 1.06;
  margin: 0 auto 14px;
  max-width: 820px;
}

.final-inner h2 .serif-accent {
  background: linear-gradient(100deg, #a5b4fc, #67e8f9);
  -webkit-background-clip: text;
  background-clip: text;
}

.final-sub {
  position: relative;
  margin: 0 0 28px;
  opacity: 0.8;
}

.final-inner .btn {
  position: relative;
}

/* ---------- Footer ---------- */

.footer {
  border-top: 1px solid var(--line);
  padding: 48px 0 60px;
}

.footer-inner {
  display: grid;
  grid-template-columns: 0.7fr 1.3fr;
  gap: 48px;
}

.footer-brand img {
  width: 110px;
  margin-bottom: 12px;
}

.footer-brand p {
  margin: 0 0 6px;
}

.sources-title {
  margin: 0 0 10px;
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.sources ol {
  margin: 0;
  padding-left: 20px;
  font-size: 13.5px;
  color: var(--muted);
  display: grid;
  gap: 5px;
}

.sources li:target {
  background: rgba(79, 70, 229, 0.08);
  border-radius: 6px;
}

/* Every blog article, linked by title. Written from BLOG_POSTS by
   src/lib/landing-blog-links.ts; blog.test.ts keeps the list whole. */
.footer-blog {
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}

.footer-blog-title {
  margin: 0 0 18px;
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.footer-blog-title a {
  color: inherit;
}

.footer-blog-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px 40px;
}

.footer-blog-cat {
  margin: 0 0 10px;
  font: 700 12px/1.3 var(--font-d);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink);
}

.footer-blog-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 7px;
}

.footer-blog-col a {
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--muted);
}

.footer-blog-col a:hover {
  color: var(--ink);
}

@media (max-width: 900px) {
  .footer-blog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .footer-blog-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- Reveal ---------- */

.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 0.8s var(--ease),
    transform 0.8s var(--ease);
}

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

/* ---------- Responsive ---------- */

@media (max-width: 1020px) {
  .nav-links {
    display: none;
  }

  .hero-inner,
  .volume-inner,
  .today-inner,
  .faq-inner {
    grid-template-columns: 1fr;
  }

  .faq-side {
    position: static;
  }

  .desk {
    transform: none !important;
  }

  .desk-stage {
    padding: 0;
  }

  .float-chip {
    display: none;
  }

  .parts {
    grid-template-columns: repeat(2, 1fr);
  }

  .how-grid,
  .never-grid {
    grid-template-columns: 1fr 1fr;
  }

  .rail {
    display: none;
  }

  .tile-resume,
  .tile-answers {
    grid-column: span 12;
  }

  .tile-letter,
  .tile-contact,
  .tile-follow {
    grid-column: span 6;
  }

  .tile-follow {
    grid-column: span 12;
  }

  .plans {
    grid-template-columns: 1fr;
    max-width: 520px;
  }

  .plan-lead {
    transform: none;
    margin-top: 10px;
  }

  .footer-inner {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  body {
    font-size: 16px;
  }

  .wrap,
  .nav-inner {
    width: calc(100% - 32px);
  }

  /* Log in stays beside the menu button on a phone: a returning member
     should not have to open a menu to find the way in (owner,
     2026-10-03). The trial button moves into the menu. */
  .nav-inner {
    gap: 10px;
  }

  .nav-cta .btn-primary {
    display: none;
  }

  .nav-cta .btn-ghost {
    height: 42px;
    padding: 0 16px;
    background: var(--surface);
  }

  .nav-toggle {
    display: block;
    margin-left: 0;
  }

  .hero {
    padding: 36px 0 0;
  }

  .hero-inner {
    gap: 36px;
    padding-bottom: 48px;
  }

  .kicker {
    font-size: 13px;
    border-radius: 16px;
    align-items: flex-start;
  }

  .kicker-dot {
    margin-top: 5px;
  }

  .hero-title {
    font-size: clamp(42px, 13vw, 60px);
  }

  .hero-lead {
    font-size: 17px;
  }

  .hero-actions .btn {
    width: 100%;
  }

  .proof-grid,
  .how-grid,
  .never-grid,
  .real-grid {
    grid-template-columns: 1fr;
  }

  .tile-resume {
    grid-template-columns: 1fr;
  }

  .tile-letter,
  .tile-contact {
    grid-column: span 12;
  }

  .proof,
  .how,
  .receipts,
  .volume,
  .today,
  .never,
  .pricing,
  .faq {
    padding: 72px 0;
  }

  .inside {
    padding: 20px 0 72px;
  }

  .manifesto {
    padding: 80px 0;
  }

  .quote-pair {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .connector {
    height: 26px;
    width: 2px;
    margin: 0 auto;
    background: repeating-linear-gradient(180deg, var(--ind) 0 6px, transparent 6px 11px);
    background-size: 2px 22px;
    animation: dash-v 1.2s linear infinite;
  }

  @keyframes dash-v {
    to {
      background-position: 0 22px;
    }
  }

  .connector span {
    right: -4px;
    top: auto;
    bottom: -2px;
  }

  .score-card,
  .trail,
  .real-grid {
    padding: 18px;
  }

  .tabs {
    border-radius: 18px;
  }

  .tab-ink {
    border-radius: 14px;
  }

  .compare div {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .apps-grid {
    grid-template-columns: repeat(14, 1fr);
  }

  .field-of-apps {
    min-height: 440px;
    padding: 18px 18px 84px;
  }

  .apps-picks {
    inset: 18px 18px 84px;
  }

  .toast {
    right: 8px;
  }

  .send {
    padding: 0;
    place-items: stretch;
  }

  .send-window {
    border-radius: 0;
    max-height: 100vh;
  }

  .send-body {
    grid-template-columns: 1fr;
  }

  .ext-panel {
    border-left: 0;
    border-top: 1px solid var(--line);
    order: -1;
  }

  .employer-form {
    padding: 22px 18px 28px;
  }

  .demo-cursor {
    display: none;
  }

  .final-inner {
    padding: 56px 22px;
    border-radius: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }

  .reveal,
  .ht-word,
  .kicker,
  .desk-stage,
  .mini-tags span,
  .toast,
  .mail-pick,
  .pick {
    opacity: 1 !important;
    transform: none !important;
  }

  .scribble path {
    stroke-dashoffset: 0;
  }

  /* The checks pop in from scale(0); with the animation off they stay hidden. */
  .steps li::before {
    transform: none !important;
  }

  .ring {
    --p: var(--v);
  }

  .bar,
  .odds-track i,
  .mini-funnel span {
    transform: none !important;
  }

  .ghosts i {
    opacity: 1;
    transform: none;
  }

  .manifesto-text .w {
    color: rgba(255, 255, 255, 0.62);
  }

  .manifesto-text .accent .w {
    color: #fff;
  }

  .never-item .t::after {
    width: 100%;
  }

  .mini-cursor,
  .beam {
    display: none;
  }
}


/* ---------- Try it: search, pick, score ---------- */

.try {
  padding: 24px 0 72px;
  scroll-margin-top: 84px;
}

/* The section toggles panels with the hidden attribute; nothing here may
   out-rank it. */
.try [hidden] {
  display: none !important;
}

.try .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.try-results,
.try-score {
  scroll-margin-top: 84px;
}

.section-sub {
  max-width: 640px;
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.6;
}

.try-form {
  margin-top: 26px;
}

.try-field {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 6px 6px 16px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: var(--surface);
  box-shadow: var(--shadow-1);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.try-field:focus-within {
  border-color: rgba(79, 70, 229, 0.5);
  box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.12), var(--shadow-1);
}

.try-field svg {
  flex: none;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: var(--muted);
  stroke-width: 2;
  stroke-linecap: round;
}

.try-field input {
  flex: 1;
  min-width: 0;
  min-height: 40px;
  border: 0;
  outline: 0;
  background: transparent;
  font: 500 16px/1.4 var(--font-b);
  color: var(--ink);
}

.try-field input::placeholder {
  color: rgba(var(--ink-rgb), 0.45);
}

.try-field .btn {
  flex: none;
}

.try-hint {
  margin: 10px 0 0 18px;
  font-size: 13px;
  color: var(--muted);
}

.try-hint.is-error {
  color: var(--red);
}

.try-results {
  margin-top: 22px;
}

.try-results-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
  margin-bottom: 12px;
  font-size: 14px;
  color: var(--muted);
}

.try-results-head b {
  color: var(--ink);
  font: 700 15px/1.3 var(--font-d);
}

.try-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.try-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px 14px;
  align-items: center;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--surface);
  transition: border-color 0.15s ease, transform 0.2s var(--ease), box-shadow 0.2s ease;
}

.try-card:hover {
  border-color: var(--line-2);
  transform: translateY(-1px);
  box-shadow: var(--shadow-1);
}

.try-card-title {
  margin: 0;
  font: 700 15px/1.3 var(--font-d);
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.try-card-meta {
  margin: 3px 0 0;
  font-size: 13px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.try-card-chips {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.try-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  background: var(--bg);
}

.try-chip.is-direct {
  color: var(--green);
  background: var(--green-bg);
  border-color: transparent;
}

.try-chip.is-found {
  color: var(--green);
  background: var(--green-bg);
  border-color: transparent;
}

.try-chip.is-gap {
  color: var(--amber);
  background: var(--amber-bg);
  border-color: transparent;
}

.try-chip.is-required {
  color: var(--red);
  background: rgba(220, 38, 38, 0.08);
  border-color: transparent;
}

.try-card .btn {
  padding: 9px 14px;
  font-size: 13px;
}

.try-empty {
  padding: 18px;
  border-radius: 16px;
  border: 1px dashed var(--line-2);
  color: var(--muted);
  font-size: 14px;
}

.try-empty b {
  color: var(--ink);
}

/* A tier under the web's results: Carir's board, then the roles that
   mention the words. A full row of the two-column list, never a card. */
.try-tier {
  grid-column: 1 / -1;
  margin-top: 14px;
  padding: 0 2px;
}

.try-tier h3 {
  margin: 0;
  color: var(--ink);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
}

.try-tier p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.try-score {
  margin-top: 22px;
  padding: 22px;
  border-radius: var(--r);
  border: 1px solid var(--line-2);
  background: var(--surface);
  box-shadow: var(--shadow-2);
}

.try-score-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px 16px;
}

.try-score-head h3 {
  margin: 0;
  font: 700 20px/1.25 var(--font-d);
  letter-spacing: -0.01em;
}

.try-score-head p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 14px;
}

.try-link {
  background: none;
  border: 0;
  padding: 0;
  color: var(--ind);
  font: 600 13px/1.4 var(--font-b);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.try-upload {
  margin-top: 18px;
  display: grid;
  gap: 12px;
}

.try-drop {
  display: grid;
  place-items: center;
  gap: 6px;
  padding: 26px 18px;
  border-radius: 16px;
  border: 1.5px dashed rgba(79, 70, 229, 0.45);
  background: rgba(79, 70, 229, 0.04);
  text-align: center;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.try-drop:hover,
.try-drop.is-over {
  background: rgba(79, 70, 229, 0.08);
  border-color: var(--ind);
}

.try-drop input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.try-drop b {
  font: 700 15px/1.3 var(--font-d);
}

.try-drop span {
  color: var(--muted);
  font-size: 13px;
}

.try-drop .try-file-name {
  color: var(--ind);
  font-weight: 600;
}

.try-textarea {
  width: 100%;
  min-height: 150px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--line-2);
  background: var(--bg);
  font: 400 14px/1.5 var(--font-b);
  color: var(--ink);
  resize: vertical;
}

.try-upload-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
}

.try-privacy {
  margin: 0;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.5;
}

.try-result {
  margin-top: 18px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 18px 26px;
  align-items: start;
}

.try-gauge {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 14px 18px 12px;
  border-radius: 18px;
  background: var(--bg);
  min-width: 150px;
}

.try-gauge .ring {
  width: 108px;
  height: 108px;
  font-size: 34px;
}

.try-gauge small {
  color: var(--muted);
  font-size: 12px;
  text-align: center;
  line-height: 1.4;
  max-width: 150px;
}

.try-lines {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.try-line h4 {
  margin: 0 0 6px;
  font: 700 13px/1.3 var(--font-d);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted);
}

.try-line p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
}

.try-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.try-gaps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.try-gaps li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--bg);
  font-size: 14px;
}

.try-gaps li b {
  font-weight: 600;
}

.try-gaps li.is-locked {
  position: relative;
  color: transparent;
  user-select: none;
}

.try-gaps li.is-locked > span {
  filter: blur(5px);
  color: var(--muted);
}

.try-gaps li.is-locked::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55));
}

.try-lock {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-top: 4px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(79, 70, 229, 0.06);
  border: 1px solid rgba(79, 70, 229, 0.18);
  font-size: 14px;
}

.try-lock svg {
  flex: none;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: var(--ind);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.try-lock b {
  color: var(--ind);
}

.try-cta {
  grid-column: 1 / -1;
  margin-top: 6px;
  padding: 20px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(79, 70, 229, 0.1), rgba(34, 211, 238, 0.08));
  display: grid;
  gap: 12px;
}

.try-cta h4 {
  margin: 0;
  font: 700 19px/1.3 var(--font-d);
  letter-spacing: -0.01em;
}

.try-cta p {
  margin: 0;
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.55;
  max-width: 620px;
}

.try-cta-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
}

.try-cta-terms {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  font-size: 12.5px;
  color: var(--muted);
}

.try-cta-terms li::before {
  content: "✓ ";
  color: var(--green);
}

.try-busy {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
}

.try-busy::before {
  content: "";
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid rgba(79, 70, 229, 0.25);
  border-top-color: var(--ind);
  animation: try-spin 0.8s linear infinite;
}

@keyframes try-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 720px) {
  .try-list {
    grid-template-columns: 1fr;
  }

  .try-field {
    flex-wrap: wrap;
    border-radius: 22px;
    padding: 10px;
  }

  .try-field input {
    flex-basis: 100%;
    padding: 4px 6px;
  }

  .try-field .btn {
    width: 100%;
    justify-content: center;
  }

  .try-hint {
    margin-left: 4px;
  }

  .try-result {
    grid-template-columns: 1fr;
  }

  .try-gauge {
    justify-items: start;
    grid-template-columns: auto 1fr;
    align-items: center;
    text-align: left;
  }

  .try-gauge small {
    text-align: left;
  }

  .try-score {
    padding: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .try-busy::before {
    animation: none;
  }
}

.try-filters {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 0.9fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
  margin-top: 10px;
}

.try-filter {
  display: grid;
  gap: 4px;
}

.try-filter > span {
  font: 700 12px/1 var(--font-d);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.try-filter input,
.try-filter select {
  height: 42px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid var(--line-2);
  background: var(--surface);
  font: 500 14px/1.4 var(--font-b);
  color: var(--ink);
}

.try-filter input:focus,
.try-filter select:focus {
  outline: 0;
  border-color: rgba(79, 70, 229, 0.5);
  box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.12);
}

.try-hint code {
  font: 500 12px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  padding: 2px 5px;
  border-radius: 6px;
  background: rgba(var(--ink-rgb), 0.06);
}

.try-more {
  display: flex;
  justify-content: center;
  margin-top: 12px;
}

@media (max-width: 720px) {
  .try-filters {
    grid-template-columns: 1fr;
  }
}

/* The widget's hand-off into the product's own search. */
.try-results-head .try-open {
  margin-left: auto;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
}

.try-results-head .try-open:hover {
  text-decoration: underline;
}

.try-results-head .try-open[hidden] {
  display: none;
}

/* A widened answer narrowed back to the window asked for, and out again. */
.try-results-head .try-narrow {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font: 600 13px/1 var(--font-b);
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.try-results-head .try-narrow:hover {
  border-color: var(--ind);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12);
}

.try-results-head .try-narrow:focus-visible {
  outline: 2px solid var(--ind);
  outline-offset: 2px;
}

/* The posting itself, one click from its card. */
.try-card-link {
  display: inline-block;
  margin-top: 6px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  color: var(--ind, #4f46e5);
}

.try-card-link:hover {
  text-decoration: underline;
}

.try-filter-radius select {
  min-width: 118px;
}

/* ------------------------------------------------------------------ *
 * The widget's live web search: choosing a place, the stages of a run,
 * and the one moment the board is offered instead (it is labelled).
 * ------------------------------------------------------------------ */

/* Where: a combobox with the gazetteer's own names, so a chosen place is
   always one the radius can be measured from. */
.try-filter-where {
  min-width: 0;
}

.try-combo {
  position: relative;
  display: flex;
  align-items: center;
}

.try-combo input {
  width: 100%;
  min-width: 0;
  /* the same 42px the selects beside it stand at */
  min-height: 42px;
  padding-right: 44px;
}

.try-locate {
  position: absolute;
  right: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.try-locate svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.try-locate:hover {
  background: rgba(79, 70, 229, 0.1);
  color: var(--ind);
}

.try-locate:disabled {
  cursor: default;
  opacity: 0.55;
}

.try-locate.is-busy svg {
  animation: try-pulse 1s ease-in-out infinite;
}

@keyframes try-pulse {
  0%,
  100% {
    opacity: 0.35;
  }
  50% {
    opacity: 1;
  }
}

.try-suggest {
  position: absolute;
  z-index: 30;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: 268px;
  overflow: auto;
  list-style: none;
  margin: 0;
  padding: 6px;
  border-radius: 14px;
  border: 1px solid var(--line-2);
  background: var(--surface);
  box-shadow: var(--shadow-1);
}

.try-suggest[hidden] {
  display: none;
}

.try-suggest li {
  padding: 8px 10px;
  border-radius: 10px;
  font: 500 14px/1.3 var(--font-b);
  color: var(--ink);
  cursor: pointer;
}

.try-suggest li:hover,
.try-suggest li.is-on {
  background: rgba(79, 70, 229, 0.09);
  color: var(--ind);
}

/* The radius means nothing until a place is chosen, and says so quietly. */
.try-filter.is-off > span,
.try-filter.is-off select {
  opacity: 0.6;
}

.try-place-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

.try-anywhere {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: var(--surface);
  font: 600 13px/1 var(--font-b);
  color: var(--muted);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.try-anywhere:hover {
  border-color: rgba(79, 70, 229, 0.4);
  color: var(--ind);
}

.try-anywhere.is-on {
  border-color: transparent;
  background: rgba(79, 70, 229, 0.1);
  color: var(--ind);
}

.try-place-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  max-width: 100%;
  padding: 2px 2px 2px 14px;
  border-radius: 999px;
  background: var(--bg-2);
  font: 600 13px/1.2 var(--font-b);
  color: var(--ink);
}

.try-place-chip[hidden] {
  display: none;
}

.try-place-chip > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The × is small to look at and 40px to hit. */
.try-place-chip button {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}

.try-place-chip button:hover {
  background: rgba(var(--ink-rgb), 0.14);
  color: var(--ink);
}

/* The stages of a real run: the row in the database moves, and these
   follow it. Nothing here is on a timer. */
.try-stages {
  list-style: none;
  display: grid;
  gap: 8px;
  margin: 18px 0 0;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-1);
}

.try-stages[hidden] {
  display: none;
}

.try-stages li {
  display: flex;
  align-items: center;
  gap: 9px;
  font: 500 14px/1.35 var(--font-b);
  color: var(--muted);
}

.try-stages li::before {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  border: 2px solid var(--line-2);
}

.try-stages li[data-state="now"] {
  color: var(--ink);
  font-weight: 600;
}

.try-stages li[data-state="now"]::before {
  border-color: var(--ind);
  border-right-color: transparent;
  animation: try-spin 0.9s linear infinite;
}

.try-stages li[data-state="done"]::before {
  border-color: transparent;
  background: var(--green-bg)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23047857' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4 4 10-10'/%3E%3C/svg%3E")
    center / 12px 12px no-repeat;
}

.try-stages li em {
  font-style: normal;
  font-weight: 500;
  font-size: 12.5px;
  color: var(--muted);
}

@keyframes try-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .try-stages li[data-state="now"]::before {
    animation: none;
    border-color: var(--ind);
  }
  .try-locate.is-busy svg {
    animation: none;
  }
}

/* The only moment the board is offered, and it is named as the board. */
.try-rest {
  margin-bottom: 12px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--bg-2);
}

.try-rest[hidden] {
  display: none;
}

.try-rest p {
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
}

.try-rest p b {
  color: var(--ink);
}

@media (max-width: 720px) {
  .try-filter-where {
    order: -1;
  }

  .try-stages {
    padding: 12px 14px;
  }

  .try-stages li {
    font-size: 13.5px;
  }

  .try-place-chip {
    font-size: 12.5px;
  }
}

/* A close match: the words match, and the card says what doesn't. */
.try-card.is-close {
  border-style: dashed;
}

.try-differs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 2px;
  padding: 0;
  list-style: none;
}

.try-differs li {
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--amber-bg);
  color: var(--amber);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
}

/* =====================================================================
   The connected-agent sections (2026-10-04): the Features menu, the
   stack-versus-agent comparison, the lifecycle, the product tour, the
   "between them" flow, and life after the offer. Same tokens as above.
   ===================================================================== */

/* ---------- Header: the Features menu ---------- */

.nav-drop {
  position: relative;
  display: inline-flex;
}

.nav-drop-link::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 7px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: translateY(-3px) rotate(45deg);
  opacity: 0.7;
}

.nav-drop-panel {
  position: absolute;
  top: calc(100% + 10px);
  left: -18px;
  z-index: 60;
  display: none;
  grid-template-columns: repeat(4, minmax(150px, auto));
  gap: 6px 22px;
  padding: 18px 20px 14px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-2);
}

/* A gap the pointer can cross without the menu closing. */
.nav-drop-panel::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -12px;
  height: 12px;
}

.nav-drop:hover .nav-drop-panel,
.nav-drop:focus-within .nav-drop-panel {
  display: grid;
  animation: fade-up 0.25s var(--ease);
}

.nd-col {
  display: grid;
  align-content: start;
  gap: 2px;
}

.nd-h {
  margin: 0 0 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.nav-drop-panel a {
  padding: 5px 0;
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}

.nav-drop-panel a:hover {
  color: var(--ind);
}

.nav-drop-panel .nd-all {
  grid-column: 1 / -1;
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  color: var(--ind);
  font-weight: 600;
}

/* The section links were hidden from 1020px down, but the menu button only
   appeared at 720px: between the two there was no navigation at all. */
@media (max-width: 1020px) {
  .nav-toggle {
    display: block;
  }

  .mobile-menu:not([hidden]) {
    display: grid;
    animation: fade-up 0.3s var(--ease);
  }
}

/* ---------- Hero: the one line against a chat window ---------- */

.hero-vs {
  margin: -14px 0 26px;
  color: var(--ink);
  font-size: 16px;
  font-weight: 600;
}

.hero-vs span {
  color: var(--muted);
  font-weight: 500;
}

.ht-you-wide .scribble {
  left: 0;
  width: 100%;
}

/* ---------- The lifecycle ---------- */

.life {
  margin-top: 36px;
}

.life-rail {
  position: relative;
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 22px;
  padding: 0;
}

.life-rail::before {
  content: "";
  position: absolute;
  left: 4%;
  right: 4%;
  top: 22px;
  height: 2px;
  background: linear-gradient(90deg, rgba(79, 70, 229, 0.25), rgba(14, 116, 144, 0.25));
}

.life-tab {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 0 4px 6px;
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.life-tab i {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  background: var(--surface);
  color: var(--ink);
  font-style: normal;
  font-family: var(--font-d);
  font-size: 13px;
  font-weight: 700;
  transition:
    background 0.25s var(--ease),
    color 0.25s var(--ease),
    transform 0.25s var(--ease);
}

.life-tab[aria-selected="true"] {
  color: var(--ink);
}

.life-tab[aria-selected="true"] i {
  border-color: transparent;
  background: var(--grad-btn);
  color: #fff;
  transform: scale(1.08);
  box-shadow: 0 10px 26px rgba(79, 70, 229, 0.28);
}

.life-tab:hover i {
  border-color: rgba(79, 70, 229, 0.45);
}

.life-tab:focus-visible {
  outline: none;
}

.life-tab:focus-visible i {
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.4);
}

.life-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 26px;
  align-items: start;
  padding: 28px;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-1);
}

.life-panel[hidden] {
  display: none;
}

.life-k {
  margin: 0 0 6px;
  color: var(--vio);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.life-panel h3 {
  margin: 0 0 10px;
  font-family: var(--font-d);
  font-size: 26px;
  letter-spacing: -0.02em;
}

.life-panel p {
  margin: 0;
  color: var(--muted);
}

.life-panel ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 15px;
}

.life-panel li {
  position: relative;
  padding-left: 22px;
}

.life-panel li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--grad);
}

.life-go {
  display: inline-block;
  margin-top: 16px;
  color: var(--ind);
  font-weight: 600;
}

/* ---------- Footer: every feature page ---------- */

.footer-features {
  margin-top: 6px;
}

/* ---------- The new sections, narrower ---------- */

@media (max-width: 1020px) {
  .stack-grid,
  .between-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .context-card {
    position: static;
  }

  .after-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .life-rail {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    row-gap: 16px;
  }

  .life-rail::before {
    display: none;
  }

  .tour-row,
  .tour-row:nth-child(even) {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "head"
      "shot"
      "body";
    gap: 22px;
  }

  .tour-head {
    align-self: auto;
  }
}

@media (max-width: 720px) {
  .stack,
  .tour,
  .between,
  .after {
    padding: 72px 0;
  }

  .tour-list {
    gap: 64px;
    margin-top: 36px;
  }

  .stack-col,
  .life-panel,
  .context-card {
    padding: 20px;
  }

  .stack-tools li,
  .stack-tools li:nth-child(odd),
  .stack-tools li:nth-child(3n) {
    transform: none;
  }

  /* The lifecycle collapses into a list: every stage and its words, in
     order, with no tabs to work through. */
  .life-rail {
    display: none;
  }

  .life-panels {
    display: grid;
    gap: 12px;
  }

  .life-panel,
  .life-panel[hidden] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  .life-panel h3 {
    font-size: 22px;
  }

  .after-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero-vs {
    margin-top: -10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-drop:hover .nav-drop-panel,
  .nav-drop:focus-within .nav-drop-panel,
  .life-tab i {
    animation: none;
    transition: none;
  }
}

/* The headline is two lines of about sixteen characters since 2026-10-04
   ("Your job search, / run end to end."): at the old 92px it broke into
   four. 72px keeps it to two in the hero's column. */
.hero-title {
  font-size: clamp(44px, 5vw, 72px);
}

.stack-p {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 16.5px;
  line-height: 1.6;
}

.stack-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.stack-chips li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 14.5px;
}

.stack-chips li::before {
  content: "";
  display: inline-block;
  padding: 0;
}

.stack-chips li {
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid rgba(79, 70, 229, 0.25);
  background: rgba(99, 102, 241, 0.06);
  color: var(--ink);
}

.stack-chips li + li {
  position: relative;
  margin-left: 14px;
}

.stack-chips li + li::after {
  content: "→";
  position: absolute;
  left: -17px;
  color: var(--muted);
  font-weight: 400;
}

.tour-list {
  gap: 80px;
}

/* On a phone each stage is its sentence and its link; the bullets are on
   the feature page it links to. */
@media (max-width: 720px) {
  .life-panel ul {
    display: none;
  }

  .life-panels .life-panel {
    padding: 18px 20px;
  }

  .life-panel h3 {
    font-size: 20px;
    margin-bottom: 6px;
  }

  .life-go {
    margin-top: 10px;
  }

  .stack-tools li {
    font-size: 14px;
  }
}

/* The hero's lines under the headline fade in with CSS from the first
   paint, like the kicker, the headline and the desk. Through .reveal they
   waited for app.js, which runs only once the whole page is parsed, and the
   paragraph is the page's largest paint. Same order and spacing as before. */
.hero .reveal {
  opacity: 1;
  transform: none;
  transition: none;
  animation: fade-up 0.8s var(--ease) both;
}

.hero .hero-lead {
  animation-delay: 0.1s;
}

.hero .hero-vs {
  animation-delay: 0.17s;
}

.hero .hero-actions {
  animation-delay: 0.24s;
}

.hero .hero-promises {
  animation-delay: 0.31s;
}

/* The halo is pinned in pixels. At top: 14% it followed the hero's height,
   so any change to that height while the page loaded (the rest of the hero
   arriving, a font swap) moved this large glow; Lighthouse scored one such
   load a 0.23 layout shift. These are the places 14% put it at 1440 and
   at phone widths. */
.halo {
  top: 125px;
}

@media (max-width: 1020px) {
  .halo {
    top: 210px;
  }
}

/* =====================================================================
   2026-10-17: the same page, said once. The product tour's screenshots
   sit in the stage they show, the "between" walkthrough's closing line
   sits under the stack, and the yearly card no longer repeats the
   monthly list. Paid cards subscribe directly; the trial is offered
   inside Carir, on the locks.
   ===================================================================== */

.life-panel {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 32px;
  align-items: center;
}

.life-copy ul {
  margin: 18px 0 0;
}

.life-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin: 16px 0 0 !important;
}

.life-links a,
.life-go {
  display: inline-block;
  padding: 6px 0;
  color: var(--ind);
  font-weight: 600;
}

.life-shot {
  margin: 0;
}

.life-shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 18px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-2);
  background: var(--surface);
}

.life-shot figcaption {
  margin-top: 10px;
  color: var(--muted);
  font-size: 12.5px;
}

.life-panel:not([hidden]) .life-shot {
  animation: fade-up 0.5s var(--ease) both;
}

/* Things arrive with a little more lift. */
.reveal {
  transform: translateY(30px) scale(0.98);
  transition:
    opacity 0.7s var(--ease),
    transform 0.85s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@media (max-width: 1020px) {
  .life-panel {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
  }
}

@media (max-width: 720px) {
  /* Every stage shows on a phone; its screenshot is the proof, its
     bullets are on the feature page it links to. */
  .life-copy ul {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* =====================================================================
   2026-10-17, shorter: five sections that retold the same points left
   the page, with the hero's ticker. On a phone the stages are tabs that
   scroll sideways, long plan lists open on a tap, and the blog's links
   fold into the footer's one link to the blog.
   ===================================================================== */

.plan-more {
  display: none;
}

@media (max-width: 720px) {
  .life-panels {
    display: block;
  }

  .life-panel[hidden] {
    display: none !important;
  }

  .plan.can-fold:not(.is-open) .plan-extra {
    display: none;
  }

  .plan.can-fold .plan-more {
    display: inline-flex;
    align-self: flex-start;
    margin: -14px 0 22px;
    padding: 6px 0;
    border: 0;
    background: none;
    color: var(--ind);
    font: 600 14.5px/1.2 var(--font-b);
    cursor: pointer;
  }

}

/* =====================================================================
   Phone formatting pass (2026-10-17): nothing runs off the edge, nothing
   hides, nothing breaks mid-name.
   ===================================================================== */

/* The "never" items are struck through line by line, however they wrap. */
.never-item .t::after {
  content: none;
}

.never-item .t {
  text-decoration-line: line-through;
  text-decoration-thickness: 1.5px;
  text-decoration-color: transparent;
  transition: text-decoration-color 0.6s var(--ease);
  transition-delay: calc(0.35s + var(--i) * 0.12s);
}

.never-item.is-in .t {
  color: var(--ink);
  text-decoration-color: rgba(220, 38, 38, 0.5);
}

.proof-close {
  margin-top: 30px;
}

/* Footer links break between names, never inside one. */
.footer-brand .small a {
  white-space: nowrap;
}

/* On a phone the link rows are spaced lists: no dot left at a line's start. */
@media (max-width: 720px) {
  .footer-brand p.small:not(.muted) {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin-bottom: 14px;
    font-size: 0;
  }

  .footer-brand p.small:not(.muted) a {
    font-size: 14px;
    line-height: 1.5;
  }
}

/* The blog's categories: one tap opens each on a phone (app.js turns the
   heading into the button); everywhere else every link shows. */
.footer-blog-cat button {
  all: unset;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  cursor: pointer;
}

.footer-blog-cat button::after {
  content: "";
  width: 8px;
  height: 8px;
  margin: 0 4px 4px 12px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.25s var(--ease);
}

.footer-blog-col.is-open .footer-blog-cat button::after {
  transform: translateY(4px) rotate(225deg);
}

.footer-blog-cat button:focus-visible {
  outline: 3px solid rgba(79, 70, 229, 0.45);
  outline-offset: 3px;
  border-radius: 6px;
}

@media (min-width: 721px) {
  .footer-blog-cat button {
    cursor: default;
  }

  .footer-blog-cat button::after {
    content: none;
  }
}

@media (max-width: 720px) {
  /* Eight stages in two rows of four: all on screen, none behind a swipe. */
  .life-rail {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px 4px;
    margin: 0 0 18px;
    padding: 0;
    overflow: visible;
  }

  .life-rail::before {
    display: none;
  }

  .life-tab {
    min-width: 0;
    padding: 0 2px 4px;
    font-size: 12.5px;
    line-height: 1.2;
    text-align: center;
  }

  .life-tab i {
    width: 40px;
    height: 40px;
  }

  /* The receipts' three tabs: three equal segments, each label whole. */
  .receipts .tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    gap: 2px;
  }

  .receipts .tabs button {
    min-height: 52px;
    padding: 8px 6px;
    font-size: 12.5px;
    line-height: 1.25;
    text-align: center;
    white-space: normal;
  }

  /* The search: the glass and the box on one line, the button below. */
  .try-field {
    padding: 8px 8px 8px 14px;
  }

  .try-field input {
    flex: 1 1 calc(100% - 36px);
    padding: 4px 2px;
    font-size: 16px;
  }

  .try-field .btn {
    margin-top: 4px;
  }

  .footer-blog {
    margin-top: 24px;
    padding-top: 20px;
  }

  .footer-blog-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .footer-blog-col {
    border-bottom: 1px solid var(--line);
  }

  .footer-blog-cat {
    margin: 0;
    font-size: 12.5px;
  }

  .footer-blog-cat button {
    min-height: 46px;
  }

  .footer-blog-col.can-fold:not(.is-open) ul {
    display: none;
  }

  .footer-blog-col.is-open ul {
    padding: 2px 0 16px;
  }
}

@media (max-width: 560px) {
  /* The match card's four facts, one under another. */
  .parts {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .score-big {
    gap: 14px;
  }

  .score-role {
    font-size: 19px;
  }

  .score-big .ring-xl {
    width: 78px;
    height: 78px;
    font-size: 24px;
  }

  /* A badge on a long hero row sits under the title, not beside it. */
  .role-top {
    flex-wrap: wrap;
  }

  .role-top > .chip {
    margin-left: 50px;
  }

  .role-main {
    flex: 1 1 calc(100% - 110px);
  }
}

@media (max-width: 420px) {
  /* The smallest phones: the headline sets in two or three lines, not four. */
  .hero-title {
    font-size: clamp(34px, 10.8vw, 44px);
  }
}

/* The example's header keeps each phrase whole; the count drops below the
   day when the card is narrow. */
.desk-when,
.desk-summary {
  white-space: nowrap;
}

@media (max-width: 420px) {
  .desk-head {
    flex-wrap: wrap;
    row-gap: 8px;
  }
}


/* ============ EMPLOYERS: who has open roles on Carir ============
   Two rows of logo pills drifting in opposite directions, each track
   written twice so the loop is seamless (the copy is aria-hidden). It
   pauses under a pointer or keyboard focus, and stands still - wrapped,
   the copies gone - for anyone who asked for less motion. The edges fade
   into the page instead of cutting off a pill. Every employer here had
   open roles on Carir when the strip was made (CLAIMS.md). */
.brands {
  padding: 30px 0 44px;
}
.brands-kicker {
  margin: 0 auto 14px;
  max-width: 640px;
  text-align: center;
  font-family: var(--font-d);
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.brands-marquee {
  display: grid;
  gap: 14px;
  /* Room for a hovered pill's lift and shadow inside the clip. */
  padding: 6px 0 10px;
  overflow: hidden;
  overflow: clip;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
}
.brands-row {
  display: flex;
  width: max-content;
  animation: brands-drift 52s linear infinite;
}
.brands-row-rev {
  animation-direction: reverse;
  animation-duration: 60s;
}
.brands-marquee:hover .brands-row,
.brands-marquee:focus-within .brands-row {
  animation-play-state: paused;
}
.brands-track {
  display: flex;
  gap: 14px;
  margin: 0;
  padding: 0 7px;
  list-style: none;
}
.brand-pill {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 13px 22px 13px 16px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-1);
  font-family: var(--font-d);
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--ink);
  white-space: nowrap;
  transition:
    transform 0.25s var(--ease),
    box-shadow 0.25s var(--ease);
}
.brand-pill img {
  width: 26px;
  height: 26px;
  flex: none;
  /* Each mark in its own brand colours; wide and tall ones keep their shape. */
  object-fit: contain;
}
.brand-pill:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
}
.brands-note {
  margin: 10px auto 0;
  max-width: 760px;
  text-align: center;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
}
@keyframes brands-drift {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
@media (max-width: 640px) {
  .brands {
    padding: 22px 0 34px;
  }
  .brands-kicker {
    margin-bottom: 10px;
  }
  .brands-marquee,
  .brands-track {
    gap: 11px;
  }
  .brand-pill {
    gap: 9px;
    padding: 11px 17px 11px 13px;
    font-size: 16px;
  }
  .brand-pill img {
    width: 22px;
    height: 22px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .brands-marquee {
    -webkit-mask-image: none;
    mask-image: none;
  }
  .brands-row {
    width: auto;
    justify-content: center;
    animation: none;
  }
  .brands-track {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 10px;
  }
  .brands-track[aria-hidden="true"] {
    display: none;
  }
}