/* Kits pages on v5: /kits/, the kit product pages, /account/, thank-you and the legal pages.
   Loaded after assets/v5.css. The first part is the v4 kit CSS moved here from assets/site.css
   unchanged (the token aliases it needs, like --radius-lg, are on .v5 in v5.css): it is written against tokens, so it takes the v5 palette.
   The "v5 layer" at the end gives it the studio shape (radii, shadows, type). Class names and
   data attributes are what assets/kits.js and assets/account.js rely on; restyle, don't rename. */

/* ── Kits (/kits/, built from content/kits/) ─────────────────────────────
   Prices carry both currencies; html[data-currency] (set before paint in
   templates/kits/_kits-head.html) shows one. Without JS both show.        */
html:not([data-currency]) .cur + .cur::before { content: " / "; color: var(--text-meta); }
[data-currency="inr"] .cur-usd, [data-currency="usd"] .cur-inr { display: none; }
.currency-toggle { display: inline-flex; padding: 3px; border: 1px solid var(--border-2); border-radius: 999px; }
html:not(.js) .currency-toggle { display: none; }
.currency-toggle button {
  padding: 4px 12px; border: 0; border-radius: 999px; background: none;
  font: inherit; font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-meta); cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.currency-toggle button:hover { color: var(--text); }
.currency-toggle button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); }
.currency-toggle button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.section-more-kits { margin-top: 14px; font-size: 0.9375rem; }
.section-more-kits .text-link { color: var(--text-muted); }
.section-more-kits .text-link:hover { color: var(--text); }
.kit-list-head { display: flex; justify-content: flex-end; margin-bottom: 8px; }
.kit-row .row-meta .price { font-family: var(--font-mono); font-size: 0.9375rem; color: var(--text); }
.kit-coming-soon h3 { color: var(--text-muted); }

.kit-kicker { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.page-head.kit-head p.kit-kicker { margin: 0 0 12px; font-size: 0.75rem; color: var(--accent); }
.kit-head h1 { max-width: 20ch; }

/* Kit page: the text on the left and the price card sticky beside it; under
   1024px the card becomes a bar fixed to the bottom of the screen (above the
   phone dock). Buy opens the checkout dialog (email and state). */
.kit-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 0 64px; align-items: start; }
.kit-main { min-width: 0; max-width: 680px; }
.kit-aside { position: sticky; top: calc(var(--nav-h) + 32px); }
.kit-buy {
  display: grid; gap: 20px; padding: 24px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
}
.kit-buy-name { font-size: 0.9375rem; font-weight: 500; color: var(--text); }
.kit-buy-price { margin-top: 10px; }
.kit-buy .price-now, .kit-checkout-price .price-now, .kit-cta-price .price-now { justify-content: flex-start; }
.kit-buy .price-now .price { font-size: 2rem; line-height: 1.1; }
.kit-buy-tax, .kit-buy-meta { margin-top: 4px; font-size: 0.8125rem; color: var(--text-meta); }
.kit-buy-soon { margin-top: 6px; font-size: 1.25rem; color: var(--text-muted); }
.kit-row .row-meta .price-tax { font-size: 0.75rem; color: var(--text-meta); }
.kit-row .row-meta .price-now { justify-content: flex-start; }
.kit-buy-action { display: grid; gap: 8px; }
.kit-buy-action .btn { width: 100%; justify-content: center; }
.kit-open-btn { gap: 0.28em; }
.kit-aside .kit-open-name { display: none; }
.kit-open-btn:disabled, .kit-buy-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.kit-buy-closed { font-size: 0.9375rem; color: var(--text-muted); }
.kit-buy-closed a { color: var(--accent); text-underline-offset: 3px; }
.kit-buy-points { display: grid; gap: 8px; padding-top: 18px; border-top: 1px solid var(--border); list-style: none; }
.kit-buy-points li { position: relative; padding-left: 22px; font-size: 0.8125rem; line-height: 1.45; color: var(--text-muted); }
.kit-buy-points li::before { content: "✓"; position: absolute; left: 2px; color: var(--accent); }
[data-kit-test][hidden], [data-kit-closed][hidden] { display: none !important; }
.kit-test-note { font-weight: 600; color: var(--danger); }

/* Checkout dialog; a sheet from the bottom on phones. */
.kit-checkout {
  width: min(460px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); margin: auto; padding: 0;
  border: 1px solid var(--border-2); border-radius: 16px; background: var(--surface); color: var(--text);
  box-shadow: 0 24px 60px rgba(0,0,0,0.35); overflow: auto; overscroll-behavior: contain;
}
.kit-checkout::backdrop { background: rgba(0,0,0,0.5); backdrop-filter: blur(3px); }
.kit-checkout[open] { animation: dialog-in 0.3s var(--ease); }
.kit-buy-form { position: relative; display: grid; padding: 28px; }
.kit-checkout h2 { margin-top: 8px; padding-right: 28px; font-size: 1.25rem; font-weight: 500; line-height: 1.3; letter-spacing: -0.01em; }
.kit-checkout-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin-top: 12px; }
.kit-checkout-price .price { font-size: 1.625rem; }
.kit-checkout-tax, .kit-cta-tax { font-size: 0.8125rem; color: var(--text-meta); }
.kit-checkout-meta { margin-top: 4px; font-size: 0.8125rem; color: var(--text-meta); }
.kit-checkout-close { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border: 0; border-radius: 8px; background: none; color: var(--text-meta); font-size: 1.5rem; line-height: 1; cursor: pointer; }
.kit-checkout-close:hover { color: var(--text); background: var(--surface-2); }
.kit-checkout-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.kit-buy-label { margin: 18px 0 6px; font-size: 0.8125rem; color: var(--text-muted); }
.kit-buy-label + .kit-buy-input { margin-top: 0; }
.kit-checkout-meta + .kit-buy-label { margin-top: 22px; }
.kit-buy-input {
  width: 100%; height: 2.875rem; padding: 0 0.875rem;
  border: 1px solid var(--border-2); border-radius: var(--radius); background: var(--bg); color: var(--text);
  font: inherit; font-size: 1rem; transition: border-color 0.15s;
}
select.kit-buy-input {
  appearance: none; -webkit-appearance: none; padding-right: 2.5rem; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%238A9491' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.95rem center;
}
.kit-buy-input:focus { outline: none; border-color: var(--accent); }
.kit-buy-input:focus-visible { box-shadow: 0 0 0 3px var(--accent-soft); }
.kit-buy-input[aria-invalid="true"] { border-color: var(--danger); }
.kit-buy-hint { margin-top: 6px; font-size: 0.75rem; color: var(--text-meta); }
.kit-buy-form .kit-buy-btn { width: 100%; height: 3rem; margin-top: 22px; justify-content: center; }
.kit-buy-status { margin-top: 10px; font-size: 0.8125rem; color: var(--text-meta); }
.kit-buy-status:empty { display: none; }
.kit-buy-status.is-error { color: var(--danger); }
.kit-buy-note { margin-top: 10px; font-size: 0.75rem; line-height: 1.5; color: var(--text-meta); text-align: center; }
.kit-buy-note + .kit-buy-note { margin-top: 4px; }
html.kit-checkout-open { overflow: hidden; }
/* The earlier inline email field; the free sample form still uses it. */
.kit-buy-email-label { font-size: 0.8125rem; color: var(--text-muted); }
.kit-buy-email { width: 100%; height: 2.75rem; padding: 0 0.875rem; border: 1px solid var(--border-2); border-radius: var(--radius); background: var(--bg); color: var(--text); font: inherit; font-size: 0.9375rem; transition: border-color 0.15s; }
.kit-buy-email:focus { outline: none; border-color: var(--accent); }
.kit-buy-email:focus-visible { box-shadow: 0 0 0 3px var(--accent-soft); }
.kit-buy-email[aria-invalid="true"] { border-color: var(--danger); }

/* End of the page: the price again and Buy. */
.kit-cta-row {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px 24px;
  padding: 20px 24px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
}
.kit-cta-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.kit-cta-price .price { font-size: 1.625rem; }

@media (max-width: 1023px) {
  .page-kit .container { max-width: 744px; }
  .kit-layout { display: block; }
  .kit-main { max-width: none; }
  .kit-aside {
    position: fixed; z-index: 115; left: 0; right: 0; bottom: 0; top: auto;
    padding: 0 12px calc(12px + env(safe-area-inset-bottom)); pointer-events: none;
  }
  .kit-buy {
    grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px;
    max-width: 720px; margin: 0 auto; padding: 10px 10px 10px 18px; border-radius: 18px;
    background: var(--nav-bg); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.18); pointer-events: auto;
  }
  .kit-buy-name, .kit-buy-meta, .kit-buy-points { display: none; }
  .kit-buy-price { margin-top: 0; }
  .kit-buy .price-now { gap: 6px; }
  .kit-buy .price-now .price { font-size: 1.375rem; }
  .kit-buy-tax { margin-top: 2px; font-size: 0.75rem; }
  .kit-buy-soon { margin-top: 0; font-size: 1rem; }
  .kit-buy-action .btn { width: auto; min-width: 112px; height: 2.875rem; }
  .kit-buy-closed { max-width: 170px; font-size: 0.8125rem; line-height: 1.4; text-align: right; }
  /* Room for the bar under the footer; the section pill would sit under it. */
  body.page-kit { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  .page-kit .island { display: none; }
  .page-kit .to-top { bottom: calc(96px + env(safe-area-inset-bottom)); }
}
/* Phones: the bar takes the dock's place instead of stacking on it, one
   row (price and Buy; the preview card sits near the top of the page). At
   the end of the page assets/kits.js sets .kit-bar-done and they swap back. */
@media (max-width: 768px) {
  .kit-aside { bottom: calc(10px + env(safe-area-inset-bottom)); padding: 0 10px; transition: transform 0.3s ease, opacity 0.3s ease, visibility 0s; }
  .kit-buy-action .kit-preview-open { display: none; }
  .kit-bar-done .kit-aside { transform: translateY(calc(100% + 20px)); opacity: 0; visibility: hidden; transition: transform 0.3s ease, opacity 0.3s ease, visibility 0s 0.3s; }
  html:not(.kit-bar-done) .page-kit .dock { transform: translateY(calc(100% + 20px)); opacity: 0; visibility: hidden; }
  .has-dock body.page-kit { padding-bottom: calc(var(--dock-space) + 16px); }
  .page-kit .to-top { bottom: calc(var(--dock-space) + 12px); }
}
@media (max-width: 768px) and (prefers-reduced-motion: reduce) { .kit-aside { transition: none; } }
@media (max-width: 640px) {
  .kit-checkout {
    width: 100%; max-width: 100%; max-height: 92dvh; margin: auto 0 0;
    border-width: 1px 0 0; border-radius: 20px 20px 0 0;
  }
  .kit-checkout[open] { animation: kit-sheet-in 0.32s var(--ease); }
  .kit-buy-form { padding: 24px 20px calc(24px + env(safe-area-inset-bottom)); }
  .kit-cta-row { padding: 18px; }
  .kit-cta-row .btn { flex: 1 1 100%; justify-content: center; }
}
@keyframes kit-sheet-in { from { transform: translateY(100%); } }
@media (prefers-reduced-motion: reduce) { .kit-checkout[open] { animation: none; } }

.kit-body { max-width: 680px; }
.kit-section { padding-top: 48px; }
.kit-section h2 { margin-bottom: 14px; font-size: 1.375rem; font-weight: 520; letter-spacing: -0.015em; }
.kit-section p, .kit-section li { font-size: 1.0625rem; line-height: 1.7; color: var(--text-muted); }
.kit-section p + p { margin-top: 12px; }
.kit-section strong { color: var(--text); font-weight: 500; }
.kit-section ul, .kit-section ol { display: grid; gap: 10px; padding-left: 0; list-style: none; }
.kit-section ul li { position: relative; padding-left: 22px; }
.kit-section ul li::before { content: ""; position: absolute; left: 4px; top: 0.72em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
/* The bundle page's list of kits: kit rows, not body bullets. */
.kit-bundle ul.rows { display: block; }
.kit-bundle ul.rows li { padding-left: 0; }
.kit-bundle ul.rows li::before { content: none; }
.kit-bundle-sum { margin-top: 16px; }
.kit-bundle-note { margin-top: 16px; font-size: 0.9375rem; color: var(--text-muted); }
.kit-section ol { counter-reset: kit-step; }
.kit-section ol li { counter-increment: kit-step; position: relative; padding-left: 34px; }
.kit-section ol li::before {
  content: counter(kit-step); position: absolute; left: 0; top: 0.2em;
  width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent); font-family: var(--font-mono); font-size: 0.75rem;
}
.kit-section ol + p, .kit-section ul + p { margin-top: 16px; }
.kit-faq h3 { margin-top: 24px; font-size: 1.0625rem; font-weight: 500; color: var(--text); }
.kit-faq h3 + p { margin-top: 6px; }
.kit-faq-item { border-bottom: 1px solid var(--border, rgba(127,127,127,.25)); }
.kit-faq-item summary {
  display: flex; justify-content: space-between; gap: 16px; align-items: baseline;
  padding: 14px 0; cursor: pointer; list-style: none; font-size: 1.0625rem; font-weight: 500; color: var(--text);
}
.kit-faq-item summary::-webkit-details-marker { display: none; }
.kit-faq-item summary::after { content: "+"; flex: none; color: var(--accent); font-family: var(--font-mono); }
.kit-faq-item[open] summary::after { content: "\2212"; }
.kit-faq-item > p { margin: 0 0 16px; }
.kit-sample .btn { margin-top: 4px; }

/* Free sample: an email form that sends a sign-in link; signed-in visitors
   get a button instead (assets/kits.js). */
.kit-sample-form { display: grid; gap: 8px; margin-top: 16px; padding: 20px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.kit-sample-out, .kit-sample-in { display: grid; gap: 8px; }
.kit-sample-out[hidden], .kit-sample-in[hidden] { display: none; }
.kit-sample-row { display: flex; gap: 8px; }
.kit-sample-row .kit-buy-email { flex: 1 1 auto; min-width: 0; }
.kit-sample-row .btn, .kit-sample-in .btn { margin-top: 0; flex: none; height: 2.75rem; justify-self: start; }
.kit-sample-note { font-size: 0.8125rem; line-height: 1.5; color: var(--text-meta); }
.kit-sample-note a { color: var(--accent); }
.kit-sample-status { font-size: 0.875rem; color: var(--text-muted); }
.kit-sample-status:empty { display: none; }
.kit-sample-status.is-error { color: var(--danger); }
@media (max-width: 560px) {
  .kit-sample-row { flex-direction: column; }
  .kit-sample-row .btn, .kit-sample-in .btn { justify-self: stretch; justify-content: center; width: 100%; }
}

/* ── Kit preview ───────────────────────────────────────────────────────────
   The entry card under the title, then a dialog that walks through a kit's
   best parts (playbook pages, tracker rows, code) and ends on Buy. Full
   screen on phones. assets/kits.js runs it. */
.kit-preview-entry { margin: 4px 0 40px; }
.kit-preview-card {
  display: flex; align-items: center; gap: 20px; width: 100%; padding: 16px 20px 16px 16px; text-align: left;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); color: var(--text);
  font: inherit; cursor: pointer; transition: border-color 0.2s, transform 0.25s var(--ease), background 0.2s;
}
.kit-preview-card:hover { border-color: var(--accent-dim); background: var(--surface-2); }
.kit-preview-card:active { transform: scale(0.995); }
.kit-preview-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.kit-preview-thumbs { position: relative; flex: none; width: 92px; height: 72px; }
.kit-preview-thumbs img {
  position: absolute; top: 4px; left: 22px; width: 48px; height: auto; border-radius: 3px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.25); background: var(--l-surface); transition: transform 0.35s var(--ease);
}
.kit-preview-thumbs img:nth-child(1) { transform: rotate(-9deg) translateX(-18px); }
.kit-preview-thumbs img:nth-child(2) { transform: rotate(7deg) translateX(18px); }
.kit-preview-thumbs img:nth-child(3) { transform: translateY(-2px); z-index: 1; }
.kit-preview-card:hover .kit-preview-thumbs img:nth-child(1) { transform: rotate(-13deg) translateX(-24px); }
.kit-preview-card:hover .kit-preview-thumbs img:nth-child(2) { transform: rotate(11deg) translateX(24px); }
.kit-preview-text { display: grid; gap: 2px; flex: 1 1 auto; min-width: 0; }
.kit-preview-title { font-size: 1.0625rem; font-weight: 520; }
.kit-preview-sub { font-size: 0.8125rem; color: var(--text-meta); }
.kit-preview-go { flex: none; font-size: 1.25rem; color: var(--accent); transition: transform 0.25s var(--ease); }
.kit-preview-card:hover .kit-preview-go { transform: translateX(4px); }
.kit-buy-action .kit-preview-open { margin-top: 0; }

.kit-preview {
  width: min(1180px, calc(100vw - 48px)); height: min(880px, calc(100dvh - 48px)); max-width: none; max-height: none;
  margin: auto; padding: 0; border: 1px solid var(--border-2); border-radius: 18px;
  background: var(--bg); color: var(--text); box-shadow: 0 30px 80px rgba(0,0,0,0.45); overflow: hidden;
}
.kit-preview::backdrop { background: rgba(0,0,0,0.6); backdrop-filter: blur(4px); }
.kit-preview[open] { animation: dialog-in 0.3s var(--ease); }
html.kit-preview-is-open { overflow: hidden; }
.kp-shell { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; height: 100%; }
.kp-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 18px 20px 10px 28px; }
.kp-count { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.kp-head h2 { margin-top: 4px; font-size: 1.125rem; font-weight: 520; letter-spacing: -0.01em; }
.kp-close { flex: none; width: 40px; height: 40px; border: 0; border-radius: 10px; background: none; color: var(--text-meta); font-size: 1.625rem; line-height: 1; cursor: pointer; }
.kp-close:hover { color: var(--text); background: var(--surface-2); }
.kp-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.kp-progress { display: flex; gap: 6px; padding: 0 28px 14px; list-style: none; border-bottom: 1px solid var(--border); }
.kp-progress li { flex: 1 1 0; }
.kp-progress button { display: block; width: 100%; height: 14px; padding: 5px 0; border: 0; background: none; cursor: pointer; }
.kp-progress button::before { content: ""; display: block; height: 4px; border-radius: 2px; background: var(--surface-3); transition: background 0.3s; }
.kp-progress button.is-done::before, .kp-progress button[aria-current="step"]::before { background: var(--accent); }
.kp-progress button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.kp-stage { position: relative; min-height: 0; overflow: hidden; }
.kp-step { display: grid; grid-template-columns: 300px minmax(0, 1fr); height: 100%; }
.kp-step[hidden] { display: none; }
.kp-step.is-in { animation: kp-in 0.35s var(--ease); }
.kp-step.is-in-back { animation: kp-in-back 0.35s var(--ease); }
@keyframes kp-in { from { opacity: 0; transform: translateX(24px); } }
@keyframes kp-in-back { from { opacity: 0; transform: translateX(-24px); } }
.kp-text { padding: 28px 24px 28px 28px; overflow: auto; border-right: 1px solid var(--border); }
.kp-label { display: flex; align-items: center; gap: 8px; font-size: 0.8125rem; color: var(--text-muted); }
.kp-kind { padding: 2px 7px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.04em; }
.kp-text h3 { margin-top: 12px; font-size: 1.375rem; font-weight: 520; line-height: 1.25; letter-spacing: -0.015em; }
.kp-text h3:focus { outline: none; }
.kp-caption { margin-top: 12px; font-size: 0.9375rem; line-height: 1.6; color: var(--text-muted); }
.kp-view { min-width: 0; min-height: 0; overflow: auto; overscroll-behavior: contain; background: var(--surface); }
.kp-foot { display: flex; justify-content: space-between; gap: 12px; padding: 14px 20px; border-top: 1px solid var(--border); background: var(--bg); }
.kp-foot .btn { min-width: 120px; justify-content: center; }
.kp-foot .btn:disabled { opacity: 0.4; cursor: default; }
.kp-foot [hidden], .kp-end-actions [hidden] { display: none; }

/* PDF pages on a desk */
.kp-doc { display: grid; justify-items: center; gap: 24px; padding: 28px 24px 40px; }
.kp-page { width: 100%; max-width: 680px; }
.kp-page img { display: block; width: 100%; height: auto; border-radius: 4px; background: var(--l-surface); box-shadow: 0 1px 2px rgba(0,0,0,0.2), 0 10px 30px rgba(0,0,0,0.22); -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.kp-page figcaption { margin-top: 10px; text-align: center; font-family: var(--font-mono); font-size: 0.6875rem; color: var(--text-meta); }

/* A spreadsheet window */
.kp-sheet, .kp-code { display: flex; flex-direction: column; min-height: 100%; }
.kp-bar { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.kp-dots { display: inline-flex; gap: 6px; }
.kp-dots::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--surface-3); box-shadow: 16px 0 0 var(--surface-3), 32px 0 0 var(--surface-3); margin-right: 32px; }
.kp-file { font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-muted); }
.kp-grid { flex: 1 1 auto; overflow: auto; }
.kp-grid:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.kp-grid table { border-collapse: collapse; font-size: 0.75rem; line-height: 1.45; }
.kp-grid col { width: 120px; }
.kp-grid col.kp-wide { width: 280px; }
.kp-grid col.kp-rn-col { width: 44px; }
.kp-grid th, .kp-grid td { padding: 6px 9px; border: 1px solid var(--border); text-align: left; vertical-align: top; }
.kp-grid td { color: var(--text); background: var(--bg); }
.kp-grid thead th { position: sticky; z-index: 1; background: var(--surface-2); font-weight: 600; color: var(--text); }
.kp-grid .kp-letters th { top: 0; height: 24px; padding: 3px 9px; font-family: var(--font-mono); font-weight: 400; font-size: 0.6875rem; color: var(--text-meta); text-align: center; background: var(--surface-3); }
.kp-grid thead tr:nth-child(2) th { top: 24px; }
.kp-grid .kp-rn { position: sticky; left: 0; z-index: 2; font-family: var(--font-mono); font-weight: 400; font-size: 0.6875rem; color: var(--text-meta); text-align: center; background: var(--surface-3); }
.kp-grid thead .kp-rn { z-index: 3; }
.kp-grid tbody tr:hover td { background: var(--accent-soft); }
.kp-cut { color: var(--accent); white-space: nowrap; }
.kp-sheet-more { padding: 10px 16px; font-size: 0.75rem; color: var(--text-meta); border-top: 1px solid var(--border); }
.kp-tabs { display: flex; gap: 2px; padding: 0 8px; overflow-x: auto; list-style: none; border-top: 1px solid var(--border); background: var(--surface-2); scrollbar-width: none; }
.kp-tabs li { flex: none; padding: 8px 12px; font-size: 0.75rem; color: var(--text-meta); white-space: nowrap; }
.kp-tabs li.is-on { color: var(--accent); background: var(--bg); box-shadow: inset 0 2px 0 var(--accent); font-weight: 600; }

/* A code editor window */
.kp-editor { display: grid; grid-template-columns: 190px minmax(0, 1fr); flex: 1 1 auto; min-height: 0; }
.kp-tree { padding: 12px 0; list-style: none; border-right: 1px solid var(--border); background: var(--surface-2); overflow: auto; }
.kp-tree li { padding: 4px 16px; font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-meta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kp-tree li.is-on { color: var(--text); background: var(--accent-soft); box-shadow: inset 2px 0 0 var(--accent); }
.kp-src { display: flex; flex-direction: column; min-width: 0; background: var(--bg); }
.kp-tab { align-self: flex-start; padding: 8px 16px; font-family: var(--font-mono); font-size: 0.75rem; color: var(--text); border-right: 1px solid var(--border); box-shadow: inset 0 2px 0 var(--accent); background: var(--bg); }
.kp-src pre { flex: 1 1 auto; margin: 0; padding: 12px 0 24px; overflow: auto; border-top: 1px solid var(--border); font-family: var(--font-mono); font-size: 0.78125rem; line-height: 1.65; color: var(--c-text); tab-size: 4; -webkit-user-select: text; user-select: text; }
.kp-src pre:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.kp-src code { font-family: inherit; }
.kp-ln { display: block; padding: 0 20px 0 0; white-space: pre; }
.kp-ln::before { content: attr(data-n); display: inline-block; width: 3.2em; margin-right: 1.4em; padding-right: 0.6em; text-align: right; color: var(--text-dim); -webkit-user-select: none; user-select: none; }
.kp-ln-more { color: var(--text-meta); }
.kp-src :is(.c, .c1, .cm, .cs, .ch, .cp, .cpf, .sd) { color: var(--c-comment); font-style: italic; }
.kp-src :is(.k, .kd, .kn, .kr, .kt, .kp, .ow) { color: var(--c-keyword); }
.kp-src :is(.kc, .m, .mi, .mf, .mh, .mo, .mb, .il) { color: var(--c-number); }
.kp-src :is(.s, .s1, .s2, .sb, .sc, .se, .sh, .si, .sx, .sr, .ss, .sa, .dl) { color: var(--c-string); }
.kp-src :is(.nf, .fm, .nb, .bp, .nc, .nn, .nd, .ne) { color: var(--c-name); }
.kp-src :is(.gh, .gu) { color: var(--c-keyword); font-weight: 600; }
.kp-src :is(.ge) { font-style: italic; }
.kp-src :is(.gs) { font-weight: 600; color: var(--c-name); }
.kp-src :is(.p, .o) { color: var(--c-punct); }

/* The last step: buy */
.kp-end { grid-template-columns: 1fr; overflow: auto; }
.kp-end-inner { align-self: center; justify-self: center; width: 100%; max-width: 540px; padding: 40px 28px; text-align: center; }
.kp-end h3 { margin-top: 12px; font-size: clamp(1.625rem, 3.2vw, 2.25rem); font-weight: 520; line-height: 1.15; letter-spacing: -0.025em; }
.kp-end h3:focus { outline: none; }
.kp-end .kp-caption { margin-top: 14px; }
.kp-end-price { display: flex; justify-content: center; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin-top: 24px; }
.kp-end-price .price-now { justify-content: center; }
.kp-end-price .price { font-size: 2.25rem; }
.kp-end-points { display: grid; gap: 8px; max-width: 340px; margin: 22px auto 0; padding: 18px 0 0; list-style: none; text-align: left; border-top: 1px solid var(--border); }
.kp-end-points li { position: relative; padding-left: 22px; font-size: 0.875rem; line-height: 1.45; color: var(--text-muted); }
.kp-end-points li::before { content: "✓"; position: absolute; left: 2px; color: var(--accent); }
.kp-end-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 28px; }
.kp-end-actions .btn { min-width: 200px; justify-content: center; }
.kp-end-closed { margin-top: 16px; font-size: 0.9375rem; color: var(--text-muted); }
.kp-end-closed a { color: var(--accent); }
.kp-restart { margin-top: 20px; border: 0; background: none; font: inherit; font-size: 0.875rem; color: var(--text-meta); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.kp-restart:hover { color: var(--text); }

@media (max-width: 900px) {
  .kit-preview { width: 100vw; height: 100dvh; border: 0; border-radius: 0; }
  .kp-head { padding: calc(12px + env(safe-area-inset-top)) 12px 8px 20px; }
  .kp-progress { padding: 0 20px 10px; }
  .kp-step { display: flex; flex-direction: column; overflow: auto; overscroll-behavior: contain; }
  .kp-text { flex: none; padding: 18px 20px 16px; overflow: visible; border-right: 0; border-bottom: 1px solid var(--border); }
  .kp-text h3 { margin-top: 8px; font-size: 1.1875rem; }
  .kp-caption { margin-top: 8px; font-size: 0.875rem; }
  .kp-view { flex: 1 0 auto; overflow: visible; }
  .kp-sheet .kp-grid, .kp-src pre { max-height: 62dvh; }
  .kp-doc { padding: 16px 12px 24px; gap: 16px; }
  .kp-editor { grid-template-columns: minmax(0, 1fr); }
  .kp-tree { display: none; }
  .kp-foot { padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); }
  .kp-foot .btn { flex: 1 1 0; min-width: 0; }
  .kp-end-actions .btn { flex: 1 1 100%; }
}
@media (max-width: 560px) {
  .kit-preview-card { gap: 14px; padding: 12px 14px 12px 10px; }
  .kit-preview-thumbs { width: 72px; height: 60px; }
  .kit-preview-thumbs img { width: 38px; left: 17px; }
  .kp-grid col { width: 100px; }
  .kp-grid col.kp-wide { width: 220px; }
}
@media (prefers-reduced-motion: reduce) {
  .kit-preview[open], .kp-step.is-in, .kp-step.is-in-back { animation: none; }
}

.kit-cta { max-width: 680px; padding-top: 64px; }
.kit-cta h2 { margin-bottom: 16px; font-size: 1.5rem; font-weight: 520; letter-spacing: -0.02em; }
/* Testimonials on a kit page (content/testimonials.json, keyed by kit slug);
   the cards are the same as under each call on /prep/. */
.kit-reviews { max-width: 680px; padding-top: 64px; }
.kit-reviews h2 { margin-bottom: 16px; font-size: 1.5rem; font-weight: 520; letter-spacing: -0.02em; }
.kit-reviews .svc-reviews { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.kit-cta-soon { padding-top: 40px; }
.kit-disclaimer { max-width: 680px; line-height: 1.6; }
.kit-legal { max-width: 680px; margin-top: 32px; }
.kit-legal + .kit-disclaimer { margin-top: 8px; }
.kit-legal a, .kit-notify-note a { color: var(--text-muted); text-decoration: underline; text-underline-offset: 3px; }

/* Legal pages (content/legal/): terms, refunds, privacy. */
.page-head p.legal-updated { margin-top: 12px; font-family: var(--font-mono); font-size: 0.8125rem; color: var(--text-meta); }
.legal { max-width: 680px; }
.legal h2 { margin: 40px 0 12px; font-size: 1.25rem; font-weight: 520; letter-spacing: -0.015em; }
.legal h3 { margin: 24px 0 8px; font-size: 1.0625rem; font-weight: 500; }
.legal p, .legal li { font-size: 1rem; line-height: 1.7; color: var(--text-muted); }
.legal p + p { margin-top: 12px; }
.legal ul { display: grid; gap: 8px; margin: 10px 0; padding-left: 0; list-style: none; }
.legal li { position: relative; padding-left: 20px; }
.legal li::before { content: ""; position: absolute; left: 4px; top: 0.72em; width: 5px; height: 5px; border-radius: 50%; background: var(--text-meta); }
.legal strong { color: var(--text); font-weight: 500; }
.legal a { color: var(--text); text-decoration: underline; text-decoration-color: var(--accent-dim); text-underline-offset: 3px; }
.legal a:hover { text-decoration-color: var(--accent); }
.legal table { width: 100%; margin-top: 12px; border-collapse: collapse; font-size: 0.9375rem; }
.legal th, .legal td { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; color: var(--text-muted); }
.legal th { color: var(--text); font-weight: 500; }

.kit-notify-wrap { max-width: 680px; margin-top: 8px; }
.page-kits-index .kit-notify-wrap { margin-top: 56px; }
.kit-notify { padding: 24px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.kit-notify h2 { margin-bottom: 16px; font-size: 1.25rem; font-weight: 520; letter-spacing: -0.015em; }
.kit-notify-fields { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 12px; }
.kit-notify-fields .field { flex: 1 1 220px; }
.field select {
  width: 100%; padding: 0.625rem 0.875rem;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--border-2); border-radius: var(--radius);
  font: inherit; font-size: 0.9375rem;
}
.field select:focus { outline: none; border-color: var(--accent); }
.kit-notify-fields input, .kit-notify-fields select, .kit-notify-fields .btn { height: 2.75rem; }
.kit-notify-note { margin-top: 12px; font-size: 0.8125rem; color: var(--text-meta); }
.kit-notify-status { margin-top: 6px; font-size: 0.875rem; color: var(--text-meta); }
.kit-notify-status:empty { display: none; }
.kit-notify-status.is-error { color: var(--danger); }

@media (max-width: 640px) {
  .kit-notify { padding: 18px; }
  .kit-notify-fields .btn { flex: 1 1 100%; }
}

/* /kits/thank-you/ */
.kit-thanks { display: grid; justify-items: start; gap: 16px; max-width: 680px; }
.kit-thanks p { font-size: 1rem; line-height: 1.7; color: var(--text-muted); }
.kit-thanks p a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }

/* /account/ (assets/account.js) */
.account-status { max-width: 680px; margin: -24px 0 24px; font-size: 0.9375rem; line-height: 1.6; color: var(--text-muted); }
.account-status:empty { display: none; }
.account-status.is-error, .account-kit-note.is-error { color: var(--danger); }
.account-panel, .account-reader { max-width: 680px; }
.account-form { display: grid; gap: 14px; justify-items: start; padding: 24px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.account-form .field { width: 100%; }
.account-note { font-size: 0.8125rem; line-height: 1.6; color: var(--text-meta); }
.account-who { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 20px; margin-bottom: 20px; }
.account-who p { font-size: 0.9375rem; color: var(--text-muted); overflow-wrap: anywhere; }
.account-who strong { color: var(--text); font-weight: 500; }
.account-list { display: grid; gap: 14px; list-style: none; }
.account-samples { margin-top: 40px; }
.account-samples-title { margin-bottom: 14px; font-size: 1rem; font-weight: 520; color: var(--text-muted); }
.account-kit { padding: 20px 24px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.account-kit-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.account-kit h2 { font-size: 1.125rem; font-weight: 520; line-height: 1.35; letter-spacing: -0.015em; }
.account-kit-meta { margin-top: 6px; font-family: var(--font-mono); font-size: 0.8125rem; color: var(--text-meta); }
.account-kit-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 20px; margin-top: 16px; }
.account-kit-note { margin-top: 10px; font-size: 0.875rem; color: var(--text-muted); }
.account-kit-note:empty { display: none; }
.account-kit-files { display: grid; gap: 8px; margin-top: 12px; list-style: none; }
.account-kit-file { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; min-height: 44px; padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); text-decoration: none; transition: border-color 0.15s ease, background-color 0.15s ease; }
.account-kit-file:hover { border-color: var(--border-2); background: var(--surface-2); }
.account-kit-file:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.account-kit-file-label { font-size: 0.9375rem; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.account-kit-file-name { font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-meta); overflow-wrap: anywhere; }
.account-kit-file-size { font-size: 0.75rem; color: var(--text-meta); font-variant-numeric: tabular-nums; }
.account-kit-note a, .account-empty a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.account-empty { padding: 20px 24px; border: 1px dashed var(--border-2); border-radius: var(--radius-lg); }
.account-empty p { font-size: 0.9375rem; line-height: 1.6; color: var(--text-muted); }
.account-empty p + p { margin-top: 8px; }
.account-reader > p a { font-size: 0.875rem; color: var(--text-muted); }
.account-reader h2 { margin: 16px 0; font-size: 1.5rem; font-weight: 520; }
.account-reader-body p, .account-reader-body li { font-size: 1.0625rem; line-height: 1.7; color: var(--text-muted); }
.account-reader-body p + p { margin-top: 12px; }
@media (max-width: 640px) {
  .account-form, .account-kit, .account-empty { padding: 18px; }
  .account-kit-actions .btn { flex: 1 1 100%; }
  .account-kit-file { flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; }
}

/* Marquee deep links: the targeted career bullet glows, then settles back to normal. */
.role li.is-hl { animation: hl-fade 4.5s var(--ease) forwards; border-radius: 6px; }
@keyframes hl-fade {
  0%   { background: var(--accent-soft); box-shadow: -10px 0 0 var(--accent-soft), 10px 0 0 var(--accent-soft), inset 3px 0 0 var(--accent); }
  70%  { background: var(--accent-soft); box-shadow: -10px 0 0 var(--accent-soft), 10px 0 0 var(--accent-soft), inset 3px 0 0 var(--accent); }
  100% { background: transparent; box-shadow: -10px 0 0 transparent, 10px 0 0 transparent, inset 3px 0 0 transparent; }
}
.role.is-hl-role { animation: hl-row 2.5s var(--ease) forwards; }
@keyframes hl-row { 0%, 40% { background: var(--accent-soft); } 100% { background: transparent; } }


/* =====================================================================
   v5 layer
   ===================================================================== */
.v5 .page { padding-top: calc(var(--nav-h) + 72px); padding-bottom: 72px; }
.v5 .page-head { max-width: 720px; margin: 0 0 40px; }
.v5 .page-head h1 { font: var(--w-head) clamp(2.125rem, 4.2vw, 3.25rem)/1.08 var(--font); letter-spacing: -.045em; text-wrap: balance; }
.v5 .page-head p { margin-top: 14px; font-size: var(--fs-lead); line-height: 1.6; color: var(--text-muted); }
.v5 .page-head p.kit-kicker, .v5 .kit-kicker { display: inline-flex; margin: 0 0 16px; font: var(--w-ui) .75rem/1 var(--font); letter-spacing: 0; text-transform: none; color: var(--accent); background: var(--accent-soft); padding: 7px 11px; border-radius: var(--r-pill); }
.v5 .page-head p.legal-updated { font: 400 .8125rem/1 var(--mono); color: var(--text-meta); margin-top: 12px; }
.v5 .back-link { margin-bottom: 24px; }
.v5 .back-link a { display: inline-flex; gap: 6px; align-items: center; font: var(--w-ui) .8125rem/1 var(--font); color: var(--text-muted); padding: 9px 14px; border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); transition: color var(--d-fast); }
.v5 .back-link a:hover { color: var(--text); }
.kits-prep-note .text-link { font-size: inherit; }

/* catalogue rows: the same cards as /prep/ */
.page-kits-index .kit-list .rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.page-kits-index .kit-row + .kit-row { margin-top: 0; }
.page-kits-index .kit-row a { height: 100%; background: var(--surface); padding: 20px; border-radius: var(--r-card); box-shadow: var(--shadow); align-content: start; }
.page-kits-index .kit-row a:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--border); }
.kit-row h3 { font-size: var(--fs-h4); font-weight: var(--w-strong); letter-spacing: -.02em; line-height: 1.3; }
.v5 .rows li + li { border-top: 0; }
@media (max-width: 767px) { .page-kits-index .kit-list .rows { grid-template-columns: 1fr; } }

/* product page */
.v5 .kit-layout { grid-template-columns: minmax(0, 1fr) 330px; gap: 0 56px; }
.v5 .kit-buy { border-radius: 24px; box-shadow: var(--shadow-lg); }
.v5 .kit-buy .price-now .price, .v5 .kit-cta-price .price, .v5 .kit-checkout-price .price { font-family: var(--font); font-weight: 400; letter-spacing: -.05em; }
.v5 .kit-buy .price-now .price { font-size: 2.75rem; line-height: 1; }
.v5 .kit-buy-points li::before { font-weight: 600; }
.v5 .kit-cta-row { border-radius: 24px; box-shadow: var(--shadow); }
.v5 .kit-section h2 { font-size: 1.5rem; font-weight: var(--w-head); letter-spacing: -.03em; }
.v5 .kit-section p, .v5 .kit-section li { font-size: 1rem; }
.v5 .kit-faq-item { border: 1px solid var(--border); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); padding: 0 18px; }
.v5 .kit-faq-item + .kit-faq-item { margin-top: 10px; }
.v5 .kit-faq-item summary { padding: 16px 0; font-weight: 520; }
.v5 .kit-sample-form, .v5 .account-form { border-radius: var(--r-card); box-shadow: var(--shadow); }
.v5 .kit-buy-email, .v5 .kit-buy-input { border-radius: var(--r-input); background: var(--surface); }
.v5 .kit-preview-card { border-radius: var(--r-card); box-shadow: var(--shadow); }
.v5 .kit-preview-card:hover { box-shadow: var(--shadow-lg); background: var(--surface); }
.v5 .kit-checkout { border-radius: 24px; border-color: var(--border); box-shadow: 0 40px 120px -30px rgba(13,14,18,.45); }
.v5 .kit-checkout::backdrop { background: rgba(13,14,18,.35); backdrop-filter: blur(6px); }
@media (max-width: 1023px) { .v5 .kit-buy { border-radius: var(--r-pill); padding: 8px 8px 8px 22px; box-shadow: var(--shadow-lg); } .v5 .kit-buy .price-now .price { font-size: 1.375rem; } }
@media (max-width: 640px) { .v5 .kit-checkout { border-radius: 24px 24px 0 0; } }

/* thank-you, account, legal */
.v5 .kit-thanks, .v5 .account-panel, .v5 .account-reader { max-width: 680px; }
.v5 .legal { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-panel); padding: clamp(22px, 4vw, 44px); box-shadow: var(--shadow); }
.v5 .legal > :first-child { margin-top: 0; }
.v5 .fine-print { margin-left: 0; }
/* QA (axe): a link inside text is underlined, not shown by colour alone */
.kit-sample-note a, .kit-buy-closed a { text-decoration: underline; text-underline-offset: 3px; }
/* Payments open: set before paint by templates/kits/product.html, so the buy area has its final
   shape from the start (kits.js still enables the buttons). */
html.kit-open [data-kit-closed] { display: none !important; }
html.kit-open button[data-kit-test][hidden] { display: inline-flex !important; }