/* Aptly marketing site: components for the redesigned pages (home, in-house, contact, pricing and so on).
   Tokens, navigation, footer, buttons and base styles are in site.css, which every page loads.
   Styles that only one page needs live in that page's own file (contact.css, pricing.css).
   Bump the ?v= on every page that links this file when it changes. */

/* ---------- Page head ---------- */

.page-head {
  position: relative;
  isolation: isolate;
  background: var(--forest);
  color: var(--on-forest);
  padding: 64px 0 152px;
  text-align: center;
}
.page-head::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(48% 58% at 50% 34%, rgba(151, 196, 89, 0.19), transparent 72%),
    linear-gradient(180deg, var(--forest) 0%, var(--forest-deep) 100%);
}

.page-head h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.4rem, 5.4vw, 4rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--on-forest);
}
.page-head h1 span { font-style: italic; color: var(--leaf); white-space: nowrap; }
.page-head p { max-width: 40rem; margin: 18px auto 0; font-size: 1.15rem; line-height: 1.55; color: var(--on-forest-soft); }

/* ---------- Cards ---------- */

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 32px;
  box-shadow: 0 30px 70px -34px rgba(19, 34, 9, 0.45);
}
.card h2 { font-family: var(--serif); font-weight: 400; font-size: 1.7rem; line-height: 1.15; color: var(--ink); }
.card-sub { margin-top: 6px; font-size: 0.97rem; color: var(--muted); }

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

.hero {
  position: relative;
  isolation: isolate;
  background: var(--forest);
  color: var(--on-forest);
  padding: 34px 0 96px;
  text-align: center;
}

/* Lighting: a soft leaf-green glow behind the headline and behind the example, over a faint grid. */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(46% 30% at 50% 22%, rgba(151, 196, 89, 0.20), transparent 72%),
    radial-gradient(62% 36% at 50% 76%, rgba(151, 196, 89, 0.17), transparent 72%),
    linear-gradient(180deg, var(--forest) 0%, var(--forest-deep) 100%);
}
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(248, 247, 242, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(248, 247, 242, 0.05) 1px, transparent 1px);
  background-size: 64px 64px;
  background-position: center top;
  -webkit-mask-image: radial-gradient(75% 60% at 50% 30%, #000 10%, transparent 78%);
  mask-image: radial-gradient(75% 60% at 50% 30%, #000 10%, transparent 78%);
}

.hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 6px 14px 6px 11px;
  border-radius: 999px;
  border: 1px solid rgba(248, 247, 242, 0.18);
  background: rgba(248, 247, 242, 0.06);
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--on-forest-soft);
}
.hero-pill i { width: 8px; height: 8px; border-radius: 50%; background: var(--leaf); box-shadow: 0 0 0 4px rgba(151, 196, 89, 0.22); }

.hero h1 {
  margin-top: 18px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.7rem, 6.2vw, 4.7rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--on-forest);
}
.hero h1 span { display: block; }
.hero h1 .hero-second { font-style: italic; color: var(--leaf); padding-bottom: 0.08em; }

.hero-sub { max-width: 56rem; margin: 18px auto 0; font-size: 1.15rem; line-height: 1.5; color: var(--on-forest-soft); }

.hero-buttons { margin-top: 26px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.hero-buttons .btn { transition: background-color 0.15s, color 0.15s, border-color 0.15s, transform 0.15s, box-shadow 0.15s; }
.hero-buttons .btn-leaf { box-shadow: 0 0 0 1px rgba(151, 196, 89, 0.35), 0 12px 32px -10px rgba(151, 196, 89, 0.6); }
.hero-buttons .btn:hover { transform: translateY(-1px); }
.hero-buttons .btn-leaf:hover { box-shadow: 0 0 0 1px rgba(151, 196, 89, 0.5), 0 16px 38px -10px rgba(151, 196, 89, 0.75); }

.hero-note { margin-top: 14px; font-size: 0.9rem; color: var(--on-forest-soft); }
.hero-note a { color: var(--on-forest); }

/* One load moment: the headline, the buttons and the example rise in, in order. */
.hero-pill, .hero h1 span, .hero-sub, .hero-buttons, .hero-note, .stage { animation: rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.hero h1 span { animation-delay: 0.05s; }
.hero h1 .hero-second { animation-delay: 0.12s; }
.hero-sub { animation-delay: 0.2s; }
.hero-buttons { animation-delay: 0.26s; }
.hero-note { animation-delay: 0.3s; }
.stage { animation-delay: 0.34s; animation-duration: 0.9s; }
@keyframes rise {
  from { opacity: 0; transform: translateY(18px); filter: blur(6px); }
  to { opacity: 1; transform: none; filter: none; }
}

/* ---------- Example shortlist (hero) ---------- */

/* A translucent frame, so the example reads as the product lit from behind. */
.stage {
  margin-top: 40px;
  padding: 10px;
  border-radius: 26px;
  background: linear-gradient(180deg, rgba(248, 247, 242, 0.16), rgba(248, 247, 242, 0.05));
  border: 1px solid rgba(248, 247, 242, 0.16);
  box-shadow: 0 50px 120px -24px rgba(0, 0, 0, 0.65), 0 0 90px rgba(151, 196, 89, 0.14);
  text-align: left;
}

.sample { background: var(--paper); color: var(--ink); border-radius: 17px; overflow: hidden; }

.sample-bar {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 14px;
  padding: 14px 24px;
  border-bottom: 1px solid var(--line);
  font-size: 0.9rem;
  color: var(--muted);
}
.sample-bar strong { font-family: var(--serif); font-weight: 400; font-size: 1.25rem; color: var(--ink); margin-right: 10px; }

.sample-status { margin-left: auto; font-variant-numeric: tabular-nums; }

.sample-toggle {
  font: 500 0.78rem/1 var(--sans);
  color: var(--body);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 11px;
  cursor: pointer;
}
.sample-toggle:hover { border-color: #c9c6bc; }
.sample-toggle[hidden] { display: none; }

.sample-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--green-mid);
  transform: scaleX(0);
  transform-origin: left;
  opacity: 0;
}
.sample.is-screening .sample-progress { opacity: 1; transform: scaleX(1); transition: transform 2.7s cubic-bezier(0.3, 0.6, 0.3, 1); }

.sample-body { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }

.sample-list { display: flex; flex-direction: column; border-right: 1px solid var(--line); }

.cand {
  display: grid;
  grid-template-columns: 18px 38px minmax(0, 1fr) auto;
  gap: 6px 12px;
  align-items: center;
  width: 100%;
  padding: 13px 20px 13px 24px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.2s, box-shadow 0.2s;
}
.cand:hover { background: #fbfaf6; }
.cand[aria-pressed="true"] { background: var(--card); box-shadow: inset 4px 0 0 var(--green); }
.cand:focus-visible { outline-offset: -3px; }

.cand-rank { font-family: var(--serif); font-style: italic; font-size: 1rem; color: var(--muted); transition: opacity 0.35s; }

.cand-av {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--leaf-tint);
  color: var(--green);
  display: grid;
  place-items: center;
  font-size: 0.78rem;
  font-weight: 600;
}

.cand-name { display: block; font-size: 0.97rem; font-weight: 600; color: var(--ink); line-height: 1.3; }
.cand-role { display: block; font-size: 0.8rem; color: var(--muted); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.cand-score { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.cand-num { font-size: 1.2rem; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; transition: color 0.3s; }
.cand .verdict { transition: opacity 0.35s, transform 0.35s; }

.verdict {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1;
  padding: 5px 9px;
  border-radius: 999px;
  white-space: nowrap;
}
.v-strong { background: var(--leaf-tint); color: var(--green); }
.v-border { background: var(--amber-tint); color: var(--amber-ink); }
.v-no { background: var(--red-tint); color: var(--red); }
.n-strong { color: var(--green); }
.n-border { color: var(--amber-ink); }
.n-no { color: var(--red); }

.cand-bar { grid-column: 3 / 5; height: 3px; border-radius: 3px; background: var(--line); overflow: hidden; }
.cand-bar i { display: block; height: 100%; border-radius: 3px; transform-origin: left; transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1); }
.b-strong { background: var(--green-mid); }
.b-border { background: #d49a1c; }
.b-no { background: #d06a6a; }

.sample-hint { order: 99; padding: 14px 24px; font-size: 0.82rem; color: var(--muted); line-height: 1.45; }

/* Opening sequence. home.js adds is-intro, then is-screening, is-scored and is-ranked in turn. */
.sample.is-intro .cand, .sample.is-intro .cand[aria-pressed="true"] { background: var(--paper); box-shadow: none; }
.sample.is-intro:not(.is-ranked) .cand-rank { opacity: 0; }
.sample.is-intro:not(.is-scored) .cand .verdict { opacity: 0; transform: translateY(4px); }
.sample.is-intro:not(.is-scored) .cand-num { color: var(--muted); }
.sample.is-intro:not(.is-scored) .cand-bar i { transform: scaleX(0); }

.detail { position: relative; background: var(--card); padding: 24px 28px 28px; }

.detail-inner { transition: opacity 0.3s; }
.sample.is-intro .detail-inner { opacity: 0; }

.detail-skel { display: none; position: absolute; top: 26px; left: 28px; right: 28px; }
.sample.is-intro .detail-skel { display: block; }
.detail-skel i {
  display: block;
  height: 14px;
  margin-bottom: 14px;
  border-radius: 7px;
  background: linear-gradient(90deg, #eeece4 25%, #f8f7f2 50%, #eeece4 75%);
  background-size: 200% 100%;
  animation: shimmer 1.3s linear infinite;
}
.detail-skel i:nth-child(1) { width: 44%; height: 28px; }
.detail-skel i:nth-child(2) { width: 88%; }
.detail-skel i:nth-child(3) { width: 64%; margin-bottom: 30px; }
.detail-skel i:nth-child(4) { width: 100%; height: 58px; }
.detail-skel i:nth-child(5) { width: 100%; height: 58px; margin-bottom: 30px; }
.detail-skel i:nth-child(6) { width: 100%; height: 130px; border-radius: 12px; }
@keyframes shimmer { to { background-position: -200% 0; } }

.detail-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.detail-name { font-family: var(--serif); font-weight: 400; font-size: 1.6rem; line-height: 1.1; color: var(--ink); }
.detail-score { font-size: 1.1rem; font-weight: 600; font-variant-numeric: tabular-nums; }

.detail-sum { margin-top: 10px; font-size: 0.97rem; font-style: italic; color: var(--body); line-height: 1.5; }

.detail-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; margin-top: 18px; }

.detail h3 { font-family: var(--sans); font-size: 0.8rem; font-weight: 600; color: var(--muted); margin-bottom: 8px; }

.chips li { font-size: 0.86rem; line-height: 1.45; padding: 8px 12px; border-radius: 10px; margin-bottom: 6px; }
.chips-fit li { background: var(--leaf-tint); color: #23400f; }
.chips-gap li { background: #fdeee2; color: #7a3c12; }

.flag {
  margin-top: 14px;
  padding: 10px 14px;
  background: var(--red-tint);
  border-left: 3px solid var(--red);
  border-radius: 6px;
  font-size: 0.86rem;
  line-height: 1.45;
  color: #5c1a1a;
}
.flag strong { color: var(--red); }
.flag[hidden] { display: none; }

.mail { margin-top: 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); overflow: hidden; }
.mail-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; padding: 10px 16px; border-bottom: 1px solid var(--line); font-size: 0.8rem; color: var(--muted); }
.mail-head strong { color: var(--ink); font-weight: 600; }
.mail-body { padding: 14px 16px 16px; font-size: 0.9rem; line-height: 1.55; color: var(--body); }
.mail-subject { font-weight: 600; color: var(--ink); margin-bottom: 6px; }

/* The email writes itself. The caret takes no width, so the text never reflows as it moves. */
.mail-rest { visibility: hidden; }
.mail-typed::after {
  content: '';
  display: inline-block;
  width: 0;
  height: 1.05em;
  margin-right: -2px;
  border-right: 2px solid var(--green-mid);
  vertical-align: -0.18em;
  animation: caret 0.9s steps(1) infinite;
}
.mail-typed.done::after { display: none; }
@keyframes caret { 50% { opacity: 0; } }

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

.proof { padding: 72px 0 0; }
.proof-grid { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 48px; align-items: end; }

.proof blockquote p {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2.8vw, 2.2rem);
  line-height: 1.22;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.proof cite, .quotes cite { display: block; margin-top: 16px; font-style: normal; font-size: 0.95rem; color: var(--muted); }
.proof cite strong, .quotes cite strong { color: var(--ink); font-weight: 600; }

.proof-also { font-size: 0.95rem; color: var(--muted); border-left: 1px solid var(--line); padding-left: 24px; }
.proof-also strong { display: block; color: var(--ink); font-weight: 600; }

/* ---------- How it works ---------- */

.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; margin-top: 48px; }

.step { border-top: 1px solid var(--ink); padding-top: 20px; }
.step-n { font-family: var(--serif); font-size: 2.6rem; line-height: 1; color: var(--green-mid); }
.step h3 { font-family: var(--sans); font-size: 1.2rem; font-weight: 600; color: var(--ink); margin: 14px 0 8px; }
.step p { font-size: 1rem; color: var(--body); }

.how-more { margin-top: 40px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; font-size: 0.95rem; color: var(--muted); }

/* ---------- Split layouts ---------- */

.split { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; align-items: start; }
.split-even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.split-figure-first { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }

.points { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 32px; margin-top: 40px; }
.points dt { font-weight: 600; color: var(--ink); font-size: 1.02rem; }
.points dd { margin-top: 4px; font-size: 0.97rem; color: var(--body); }

.fineprint { margin-top: 32px; font-size: 0.92rem; color: var(--muted); max-width: 38rem; }

/* ---------- Client priorities figure ---------- */

.panel { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 24px; color: var(--ink); }
.panel-title { font-family: var(--serif); font-size: 1.3rem; font-weight: 400; line-height: 1.2; }
.panel-sub { font-size: 0.86rem; color: var(--muted); margin-top: 2px; }

.axis { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 0; margin: 0; border-left: 0; border-right: 0; min-width: 0; }
.axis:first-of-type { margin-top: 18px; }
.axis legend { float: left; padding: 0; font-size: 0.95rem; font-weight: 500; color: var(--ink); }

.seg { display: inline-flex; background: var(--surface); border-radius: 9px; padding: 3px; }
.seg label { position: relative; cursor: pointer; }
.seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg span { display: block; padding: 6px 13px; border-radius: 7px; font-size: 0.82rem; font-weight: 500; color: var(--muted); }
.seg input:checked + span { background: var(--forest); color: var(--on-forest); }
.seg input:focus-visible + span { outline: 3px solid var(--green-mid); outline-offset: 2px; }

.panel-note { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 0.86rem; color: var(--muted); }

/* ---------- Replies (forest band) ---------- */

.outcomes { margin-top: 36px; }
.outcomes li { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 16px; padding: 16px 0; border-top: 1px solid rgba(248, 247, 242, 0.16); color: var(--on-forest-soft); font-size: 1rem; }
.outcomes li:last-child { border-bottom: 1px solid rgba(248, 247, 242, 0.16); }
.outcomes .verdict { justify-self: start; align-self: start; margin-top: 4px; }
.on-forest .fineprint { color: var(--on-forest-soft); }

.portal { background: var(--paper); border-radius: 16px; color: var(--ink); overflow: hidden; box-shadow: 0 30px 70px rgba(0, 0, 0, 0.35); }
.portal-top { display: flex; align-items: center; gap: 12px; padding: 16px 24px; border-bottom: 1px solid var(--line); font-size: 0.9rem; color: var(--muted); }
.portal-chip { width: 40px; height: 40px; border-radius: 8px; background: var(--card); border: 1px solid var(--line); display: grid; place-items: center; font-family: var(--serif); font-size: 1rem; color: var(--ink); }
.portal-top strong { display: block; color: var(--ink); font-weight: 600; }
.portal-main { padding: 28px 24px 24px; }
.portal-main h3 { font-family: var(--serif); font-weight: 400; font-size: 1.5rem; line-height: 1.2; color: var(--ink); }
.portal-main > p { margin-top: 8px; font-size: 0.95rem; color: var(--body); }

.track { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; margin-top: 24px; }
.track li { font-size: 0.72rem; color: var(--muted); padding-top: 10px; border-top: 4px solid var(--line); }
.track li.done { border-top-color: var(--leaf); color: var(--body); }
.track li.now { border-top-color: var(--green); color: var(--ink); font-weight: 600; }

.fit { margin-top: 24px; padding: 16px 18px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; font-size: 0.92rem; color: var(--body); }
.fit strong { display: block; color: var(--ink); font-weight: 600; margin-bottom: 4px; }

.portal-foot { padding: 12px 24px; border-top: 1px solid var(--line); font-size: 0.78rem; color: var(--muted); }

/* ---------- Client view figure ---------- */

.share { background: var(--card); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; color: var(--ink); }
.share-top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; padding: 22px 24px; border-bottom: 1px solid var(--line); }
.share-top h3 { font-family: var(--serif); font-weight: 400; font-size: 1.5rem; line-height: 1.15; }
.share-top p { font-size: 0.86rem; color: var(--muted); margin-top: 2px; }
.share-stats { display: flex; gap: 22px; }
.share-stats div { text-align: center; font-size: 0.74rem; color: var(--muted); }
.share-stats b { display: block; font-family: var(--serif); font-weight: 400; font-size: 1.5rem; line-height: 1.1; color: var(--ink); }

.share-rows { background: var(--paper); padding: 16px; display: grid; gap: 10px; }
.share-row { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 12px 16px; }
.share-row-top { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; }
.share-rank { font-family: var(--serif); color: var(--muted); }
.share-name { font-weight: 600; font-size: 0.95rem; }
.pill { display: inline-block; font-size: 0.72rem; font-weight: 600; line-height: 1; padding: 5px 9px; border-radius: 999px; white-space: nowrap; }
.pill-honey { background: var(--honey); color: var(--honey-ink); }
.pill-slate { background: var(--slate); color: var(--slate-ink); }
.share-why { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 0.88rem; color: var(--body); }
.share-comment { margin-top: 10px; padding: 10px 12px; background: var(--paper); border-radius: 8px; font-size: 0.86rem; color: var(--body); }
.share-comment strong { color: var(--ink); font-weight: 600; }

/* ---------- Toolkit ---------- */

.kit { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 40px; margin-top: 48px; }
.kit > div { border-top: 1px solid var(--line); padding: 20px 0 24px; }
.kit dt { font-weight: 600; color: var(--ink); font-size: 1.02rem; }
.kit dd { margin-top: 4px; font-size: 0.95rem; color: var(--body); }

/* ---------- Testimonials ---------- */

.quotes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; }
.quotes blockquote p { font-size: 1.12rem; line-height: 1.6; color: var(--ink); }

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

.plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 32px; margin-top: 48px; }
.plan { border-top: 1px solid var(--ink); padding-top: 18px; }
.plan-name { font-weight: 600; color: var(--ink); font-size: 1rem; }
.plan-price { font-family: var(--serif); font-size: 2.3rem; line-height: 1.1; color: var(--ink); margin-top: 6px; }
.plan-price small { font-family: var(--sans); font-size: 0.9rem; color: var(--muted); }
.plan-what { margin-top: 10px; font-size: 0.93rem; color: var(--body); }
.plan-tag { display: inline-block; margin-left: 8px; font-size: 0.72rem; font-weight: 600; color: var(--green); background: var(--leaf-tint); padding: 4px 8px; border-radius: 999px; vertical-align: 2px; }

.plans-cta { margin-top: 40px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.plans-cta p { font-size: 0.93rem; color: var(--muted); }

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

.faq-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 64px; }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 24px; padding: 20px 0; font-size: 1.08rem; font-weight: 600; color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-weight: 400; font-size: 1.4rem; line-height: 1; color: var(--muted); }
.faq details[open] summary::after { content: '\2212'; }
.faq details p { padding: 0 48px 22px 0; font-size: 1rem; color: var(--body); }
.faq details p + p { margin-top: -10px; }

/* ---------- Closing ---------- */

.closing-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; align-items: end; }
.closing h2 { font-size: clamp(2.2rem, 4.6vw, 3.6rem); max-width: 16ch; }
.closing-actions { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 12px; }

.founder { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 18px; align-items: start; padding-left: 28px; border-left: 1px solid rgba(248, 247, 242, 0.18); color: var(--on-forest-soft); font-size: 0.97rem; }
.founder img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
.founder a { color: var(--on-forest); }

/* ---------- Walkthrough dialog ---------- */

.demo { width: min(1080px, calc(100vw - 32px)); padding: 0; border: 0; border-radius: 14px; background: #000; overflow: visible; }
.demo::backdrop { background: rgba(10, 18, 6, 0.82); }
.demo video { width: 100%; height: auto; border-radius: 14px; }
.demo-close {
  position: absolute;
  top: -46px;
  right: 0;
  background: transparent;
  border: 1px solid rgba(248, 247, 242, 0.4);
  color: var(--on-forest);
  font: 500 0.9rem/1 var(--sans);
  padding: 9px 14px;
  border-radius: 8px;
  cursor: pointer;
}

/* ---------- In-house page (<html class="site inhouse">) ---------- */

/* Gold marks the in-house page; the longer headline needs a smaller size. */
.inhouse .hero h1 { font-size: clamp(2.3rem, 5.4vw, 4.1rem); }
.inhouse .hero h1 .hero-second { color: #e0bd6a; }
.inhouse .hero-pill i { background: #e0bd6a; box-shadow: 0 0 0 4px rgba(224, 189, 106, 0.22); }
.proof-solo { max-width: 62rem; }
.nowrap { white-space: nowrap; }

/* ---------- Motion further down the page ---------- */

/* Each figure plays once when it scrolls into view (home.js adds .in-view).
   The waiting states sit under .js, so the page is complete without scripts. */

/* How it works: the rule draws across and each step arrives in order. */
.js .steps .step { position: relative; border-top-color: transparent; }
.js .steps .step::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 1px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.js .steps .step > * { opacity: 0; transform: translateY(10px); transition: opacity 0.5s, transform 0.5s; }
.js .steps.in-view .step::before { transform: scaleX(1); }
.js .steps.in-view .step > * { opacity: 1; transform: none; }
.js .steps.in-view .step:nth-child(2)::before, .js .steps.in-view .step:nth-child(2) > * { transition-delay: 0.2s; }
.js .steps.in-view .step:nth-child(3)::before, .js .steps.in-view .step:nth-child(3) > * { transition-delay: 0.4s; }

/* Client priorities: one control moves to More by itself. */
.seg span { transition: background-color 0.25s, color 0.25s; }
.axis.pulse .seg { animation: ring 1.1s ease-out 1; }
@keyframes ring {
  from { box-shadow: 0 0 0 0 rgba(74, 124, 40, 0.5); }
  to { box-shadow: 0 0 0 12px rgba(74, 124, 40, 0); }
}

/* Candidate page: the stages fill one after another, then the fit profile arrives. */
.js .portal .track li { transition: border-color 0.4s, color 0.4s, font-weight 0s; }
.js .portal.in-view .track li:nth-child(1) { transition-delay: 0.25s; }
.js .portal.in-view .track li:nth-child(2) { transition-delay: 0.6s; }
.js .portal.in-view .track li:nth-child(3) { transition-delay: 0.95s; }
.js .portal:not(.in-view) .track li.done,
.js .portal:not(.in-view) .track li.now { border-top-color: var(--line); color: var(--muted); font-weight: 400; }
.js .portal .fit { transition: opacity 0.5s 1.35s, transform 0.5s 1.35s; }
.js .portal:not(.in-view) .fit { opacity: 0; transform: translateY(8px); }

/* Client view: the stage changes, then the hiring manager's comment lands. */
.js .share .pill-slate { transition: opacity 0.45s 0.5s; }
.js .share .share-comment { transition: opacity 0.45s 1.1s, transform 0.45s 1.1s; }
.js .share:not(.in-view) .pill-slate { opacity: 0; }
.js .share:not(.in-view) .share-comment { opacity: 0; transform: translateY(10px); }

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

@media (max-width: 980px) {
  .proof-grid, .split, .split-even, .split-figure-first, .faq-grid, .closing-grid { grid-template-columns: 1fr; gap: 36px; }
  .sample-body { grid-template-columns: 1fr; }
  .sample-list { border-right: 0; }
  .proof-also { border-left: 0; padding-left: 0; }
  .steps { grid-template-columns: 1fr; gap: 28px; }
  .kit { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quotes { grid-template-columns: 1fr; gap: 40px; }
  .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
  .founder { padding-left: 0; border-left: 0; }
  .faq details p { padding-right: 0; }
}

@media (max-width: 600px) {
  .hide-sm { display: none; }
  .page-head { padding: 40px 0 128px; }
  .page-head p { font-size: 1.02rem; }
  .card { padding: 22px 18px; border-radius: 16px; }
  .hero { padding: 18px 0 56px; }
  .hero-pill { font-size: 0.8rem; padding: 5px 12px 5px 10px; }
  .hero h1 { margin-top: 12px; font-size: 2.5rem; }
  .inhouse .hero h1 { font-size: 2.15rem; }
  .hero-sub { font-size: 1rem; line-height: 1.5; margin-top: 12px; }
  .hero-buttons { margin-top: 18px; }
  .hero-buttons .btn { flex: 1 1 auto; }
  .hero-note { margin-top: 10px; }
  .stage { margin-top: 22px; padding: 6px; border-radius: 20px; }
  .sample { border-radius: 14px; }
  .sample-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 12px 16px; font-size: 0.8rem; }
  .sample-bar strong { font-size: 1.1rem; margin-right: 0; }
  .sample-co { display: none; }
  .sample-toggle { grid-column: 2; grid-row: 1; }
  .sample-status { grid-column: 1 / 3; margin-left: 0; }
  .cand { padding: 11px 14px 11px 16px; gap: 6px 10px; grid-template-columns: 14px 34px minmax(0, 1fr) auto; }
  .cand-av { width: 34px; height: 34px; }
  .sample-hint { padding: 12px 16px; }
  .detail { padding: 20px 16px 22px; }
  .detail-skel { top: 22px; left: 16px; right: 16px; }
  .detail-cols { grid-template-columns: 1fr; gap: 14px; }
  .proof { padding-top: 56px; }
  .points, .kit, .plans { grid-template-columns: 1fr; }
  .points { gap: 22px; }
  .outcomes li { grid-template-columns: 1fr; gap: 8px; }
  .share-row-top { grid-template-columns: 26px minmax(0, 1fr) auto; }
  .share-row-top .pill-stage { grid-column: 2 / 4; justify-self: start; }
  .track { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 6px; }
  .axis { padding: 12px 0; }
}