/*
 * Product Design Kit: components.
 * Plain CSS classes, prefixed k-, phone first. Needs tokens.css loaded before it.
 * Every colour comes from a token, so sections can re-theme what's inside them
 * (.k-dark, .k-tinted, .k-band) and the accent can change per product.
 */

/* ---------- Page base ---------- */
.k-page {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 400 var(--step-body) / var(--leading-text) var(--type-text);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}
.k-page *, .k-page *::before, .k-page *::after { box-sizing: border-box; }
.k-page :where(h1, h2, h3, h4, p, ol, ul, dl, dd, figure, blockquote) { margin: 0; }
.k-page :where(img, svg, video) { display: block; max-width: 100%; }
:where(.k-page) a { color: inherit; } /* zero class weight, so .k-btn and .k-link colours win */
.k-page ::selection { background: var(--accent-fill); color: var(--on-accent); }
/* Focus rings use the readable accent shade: a light accent itself (yellow, a pale blue) is under 3:1 on white. */
.k-page :focus-visible { outline: 3px solid var(--accent-text); outline-offset: 3px; }
html:has(.k-page) { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-height) + 16px); }

.k-wrap { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--margin); }
.k-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;
}

/* ---------- Type ---------- */
.k-hero-title, .k-title, .k-statement, .k-heading, .k-wordmark, .k-figure {
  font-family: var(--type-display);
  text-wrap: balance;
}
.k-hero-title {
  font-size: var(--step-hero); font-weight: var(--weight-display);
  line-height: 0.98; letter-spacing: var(--tracking-hero);
}
.k-title {
  font-size: var(--step-title); font-weight: var(--weight-display);
  line-height: 1.02; letter-spacing: var(--tracking-title); max-width: 20ch;
}
.k-statement {
  font-size: var(--step-statement); font-weight: var(--weight-statement);
  line-height: var(--leading-statement); letter-spacing: var(--tracking-statement); max-width: 24ch;
}
/* A heading inside a section: a step down from the title, at the statement size. */
.k-heading {
  font-size: var(--step-statement); font-weight: var(--weight-display);
  line-height: 1.1; letter-spacing: var(--tracking-statement);
}
.k-lede { font-size: var(--step-body); max-width: var(--measure); }
.k-prose { max-width: var(--measure); }
.k-prose > * + * { margin-top: 1em; }
.k-small { font-size: var(--step-small); color: var(--ink-2); max-width: 48em; }
.k-link { color: var(--accent-text); font-weight: 600; text-decoration: none; }
.k-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.k-figure { font-weight: var(--weight-display); letter-spacing: var(--tracking-hero); font-variant-numeric: tabular-nums; line-height: 1; }
.k-page code { font: 0.9em var(--type-code); background: var(--surface-2); padding: 0.05em 0.3em; border-radius: 4px; }

@media (min-width: 1000px) {
  .k-lede { font-size: 1.25rem; line-height: 1.5; }
}

/* ---------- Buttons ---------- */
.k-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--control-height); padding: 0 26px;
  border: 0; border-radius: var(--radius-pill);
  background: var(--accent-fill); color: var(--on-accent);
  font: 600 1rem/1 var(--type-text); text-decoration: none; white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.k-btn:hover { background: var(--accent-hover); }
.k-btn:active { background: var(--accent-pressed); transform: scale(0.97); }
.k-btn:disabled, .k-btn[aria-disabled="true"] { opacity: 0.6; cursor: default; transform: none; }
.k-btn--small { min-height: var(--control-height-small); padding: 0 18px; font-size: var(--step-small); }
.k-btn--block { width: 100%; }
/* Ink: the inverse of the section it sits in (dark on light, white on dark). */
.k-btn--ink { background: var(--ink); color: var(--ground); }
.k-btn--ink:hover, .k-btn--ink:active { background: var(--ink-2); }
/* Light: a white button for dark and accent sections. */
.k-btn--light { background: #fff; color: var(--dark); }
.k-btn--light:hover, .k-btn--light:active { background: var(--accent-tint); }
/* Soft: the secondary action, a grey step instead of a fill. */
.k-btn--soft { background: var(--surface); color: var(--ink); }
.k-btn--soft:hover, .k-btn--soft:active { background: var(--surface-2); }
/* Quiet: a text action next to a primary button. */
.k-btn--quiet { background: transparent; color: var(--ink); padding-inline: 12px; }
.k-btn--quiet:hover, .k-btn--quiet:active { background: var(--surface); }
.k-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* ---------- Inputs ---------- */
.k-label { display: block; font-weight: 600; margin-bottom: 10px; }
.k-input, .k-select, .k-textarea {
  width: 100%; min-width: 0; min-height: var(--control-height); padding: 0 20px;
  border: 2px solid var(--surface-2); border-radius: var(--radius-pill);
  background: #fff; color: var(--dark); font: inherit;
  transition: border-color var(--dur-fast) var(--ease);
}
.k-textarea { min-height: 140px; padding: 14px 20px; border-radius: var(--radius); resize: vertical; }
.k-input::placeholder, .k-textarea::placeholder { color: #6b7079; }
.k-input:focus, .k-select:focus, .k-textarea:focus { outline: none; border-color: var(--accent-text); }
.k-input[aria-invalid="true"] { border-color: var(--danger); }
.k-hint { margin-top: 10px; font-size: var(--step-small); color: var(--ink-2); }
/* Honeypot field for bots, kept off screen. */
.k-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; } /* hidden field, not a rule. taste-skill-ignore */

/* ---------- Navigation ---------- */
.k-nav { position: sticky; top: 0; z-index: 20; background: var(--ground); }
.k-nav__inner { display: flex; align-items: center; gap: 12px; height: var(--nav-height); }
.k-wordmark {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 1.375rem; font-weight: 600; line-height: 1; letter-spacing: -0.01em;
  text-decoration: none; color: var(--ink);
}
.k-wordmark { white-space: nowrap; min-width: 0; }
.k-wordmark svg, .k-wordmark img { height: 28px; width: auto; flex: none; }
/* Narrow phones: a smaller wordmark so name, action and menu share one row. */
@media (max-width: 420px) {
  .k-wordmark { font-size: 1.125rem; gap: 8px; }
  .k-wordmark svg, .k-wordmark img { height: 24px; }
  .k-nav .k-btn--small { padding: 0 12px; }
}
.k-nav__links { display: none; }
.k-nav__links a { text-decoration: none; font-size: var(--step-small); color: var(--ink-2); transition: color var(--dur-fast) var(--ease); }
.k-nav__links a:hover, .k-nav__links a[aria-current="page"] { color: var(--ink); }
.k-nav__end { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.k-nav .k-btn--small { min-height: 36px; padding: 0 14px; font-size: 0.875rem; }
/* Phone menu: a native disclosure, works without script. */
.k-nav__menu { position: relative; }
.k-nav__menu > summary {
  list-style: none; cursor: pointer; display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: var(--radius-pill);
  transition: background-color var(--dur-fast) var(--ease);
}
.k-nav__menu > summary::-webkit-details-marker { display: none; }
.k-nav__menu > summary:hover { background: var(--surface); }
.k-nav__menu > summary svg { width: 22px; height: 22px; }
.k-nav__menu-panel {
  position: absolute; right: 0; top: calc(100% + 8px); min-width: 220px;
  display: grid; padding: 8px; background: var(--ground); border-radius: var(--radius);
  box-shadow: var(--float-shadow); /* a real overlay menu. taste-skill-ignore */
}
.k-nav__menu-panel a { padding: 12px 14px; border-radius: var(--radius-inner); text-decoration: none; font-weight: 500; }
.k-nav__menu-panel a:hover { background: var(--surface); }

@media (min-width: 1000px) {
  .k-nav__inner { gap: 32px; }
  .k-nav__links { display: flex; gap: 28px; margin-left: auto; }
  .k-nav__end { margin-left: 0; }
  .k-nav__menu { display: none; }
  .k-nav .k-btn--small { min-height: var(--control-height-small); padding: 0 18px; font-size: var(--step-small); }
}

/* ---------- Sections and their colour fields ---------- */
.k-section { padding-block: var(--section); background: var(--ground); color: var(--ink); }
.k-section--flush-top { padding-top: 0; }
/* Two sections on the same field share one gap instead of stacking two. */
.k-section:not(.k-section--surface, .k-tinted, .k-dark, .k-band) + .k-section:not(.k-section--surface, .k-tinted, .k-dark, .k-band),
.k-section--surface + .k-section--surface { padding-top: 0; }
.k-section--surface { --ground: var(--field-grey); --surface: #fff; }
/* Tinted: the accent's tint as the field, white panels inside it. */
.k-tinted { --ground: var(--accent-tint); --surface: #fff; background: var(--ground); color: var(--ink); }
/* Dark: ink field. Everything inside re-themes through the tokens. */
.k-dark {
  --ground: var(--dark); --surface: var(--dark-surface); --surface-2: #30343b;
  --ink: var(--on-dark); --ink-2: var(--on-dark-2);
  --accent-text: var(--accent-on-dark);
  background: var(--ground); color: var(--ink);
}
.k-dark :focus-visible { outline-color: var(--accent-on-dark); }
/* Band: the accent fill as the field (closing call to action). */
.k-band {
  --ground: var(--accent-fill); --surface: rgb(255 255 255 / 0.14); --surface-2: rgb(255 255 255 / 0.5);
  --ink: var(--on-accent); --ink-2: var(--on-accent); --accent-text: var(--on-accent);
  background: var(--ground); color: var(--ink);
}
.k-band :focus-visible { outline-color: var(--on-accent); }
.k-band .k-btn:not(.k-btn--light, .k-btn--quiet) { background: var(--dark); color: #fff; }
.k-band .k-btn:not(.k-btn--light, .k-btn--quiet):hover { background: #2a2d33; }
.k-band .k-input { border-color: #fff; }
.k-band .k-input:focus { border-color: var(--dark); }

/* Section head: title on the left, a sentence on the right (stacks on phones). */
.k-section-head { display: grid; gap: var(--space-5); margin-bottom: clamp(32px, 4vw, 56px); }
.k-section-head > p { font-size: var(--step-body); max-width: 30em; }
@media (min-width: 1000px) {
  .k-section-head { grid-template-columns: 1fr 1fr; gap: var(--gutter); align-items: end; }
  .k-section-head > p { font-size: 1.25rem; }
}

/* ---------- Hero: words on one side, an interface fragment on the other ---------- */
.k-hero { padding: var(--space-6) 0 var(--section); }
.k-hero__grid { display: grid; gap: var(--space-7); align-items: center; }
.k-hero .k-lede { margin-top: var(--space-5); }
.k-hero__action { margin-top: var(--space-6); }
.k-hero__meta { margin-top: var(--space-4); font-size: var(--step-small); color: var(--ink-2); }
@media (min-width: 1000px) {
  /* The hero fills the first screen, so the fold lands on the next section's edge. */
  .k-hero { min-height: calc(100svh - var(--nav-height)); display: flex; align-items: center; padding: clamp(24px, 5vh, 64px) 0; }
  .k-hero > .k-wrap { width: 100%; }
  .k-hero__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(32px, 5vw, 88px); }
  .k-hero .k-hero-title { font-size: clamp(2.5rem, min(4.8vw, 9vh), 5rem); }
}

/* ---------- Interface fragment frame ---------- */
/* Holds a real piece of the product, built in HTML. Mark the root data-ui. */
.k-frame { background: var(--surface); border-radius: var(--radius); overflow: hidden; }
.k-frame__bar {
  display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 16px;
  background: var(--surface-2); color: var(--ink-2); font-size: 0.8125rem;
}
.k-frame__bar strong { color: var(--ink); font-weight: 600; }
.k-frame__body { padding: clamp(16px, 2.4vw, 32px); min-width: 0; }
.k-frame--dark { background: var(--dark); color: #e6e8eb; }
.k-frame--dark .k-frame__bar { background: var(--dark-surface); color: var(--on-dark-2); }
.k-frame pre { margin: 0; overflow-x: auto; font: 500 clamp(0.8125rem, 1.05vw, 1rem) / 1.75 var(--type-code); }
.k-frame pre code { background: none; padding: 0; font: inherit; }
.k-frame mark { background: var(--accent-fill); color: var(--on-accent); padding: 0.1em 0.45em; border-radius: 4px; }
/* A white card inside a frame or a tinted section. */
.k-panel { background: var(--ground); border-radius: var(--radius-inner); padding: var(--space-4); }
.k-frame .k-panel { background: #fff; color: var(--dark); }
.k-frame .k-panel + .k-panel { margin-top: var(--space-2); }

/* A real screenshot inside a frame. */
.k-shot { width: 100%; height: auto; }
/* A phone: the ink bezel holding a phone-width screen or fragment. */
.k-phone {
  width: min(100%, 300px); padding: 10px; background: var(--dark); border-radius: 36px;
}
.k-phone > * { border-radius: 27px; overflow: hidden; background: #fff; color: var(--dark); }
/* A desktop frame with a phone overlapping its lower corner. */
.k-device-pair { position: relative; padding-bottom: var(--space-8); }
.k-device-pair > .k-phone { position: absolute; right: var(--space-4); bottom: 0; width: min(38%, 220px); }

/* ---------- Strip: a row of chips that jump to the sections below (Phyle's week). ---------- */
/* Two columns on phones (a row cut off at the edge reads as clipped), one row on desktop. */
.k-strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; list-style: none; padding: 0; }
.k-strip a {
  display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 16px 18px;
  background: var(--surface); border-radius: var(--radius); text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.k-strip a:hover { background: var(--accent-tint); }
.k-strip a:active { transform: scale(0.98); }
.k-strip strong { font: 600 1.125rem/1.2 var(--type-display); }
.k-strip span { font-size: var(--step-small); color: var(--ink-2); }
@media (min-width: 1000px) {
  .k-strip { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
}

/* ---------- Story: copy beside the screen that does the job; the screen stays put on desktop ---------- */
.k-story { display: grid; gap: var(--space-6); align-items: start; }
.k-story__copy .k-lede { margin-top: var(--space-4); }
.k-story__copy dl { display: grid; gap: var(--space-4); margin-top: var(--space-6); }
.k-story__copy dt { font: 600 1.25rem/1.2 var(--type-display); letter-spacing: -0.005em; }
.k-story__copy dd { margin-top: 4px; max-width: 34em; }
@media (min-width: 1000px) {
  .k-story { grid-template-columns: 5fr 7fr; gap: clamp(40px, 6vw, 96px); }
  .k-story__screen { position: sticky; top: calc(var(--nav-height) + 32px); }
  .k-story--flip .k-story__copy { order: 2; }
}

/* ---------- Problem / proof: a statement beside its argument, then two panels compared ---------- */
.k-split { display: grid; gap: var(--space-6); align-items: start; }
.k-split .k-prose p + p { margin-top: 1.1em; }
.k-compare { display: grid; gap: var(--space-4); margin-top: clamp(48px, 7vw, 104px); }
.k-compare figure { display: flex; flex-direction: column; }
.k-compare figcaption { font: 600 1.25rem/1.2 var(--type-display); letter-spacing: -0.005em; margin-bottom: 14px; }
.k-compare figure > :last-child { flex: 1; }
@media (min-width: 1000px) {
  .k-split { grid-template-columns: 1.1fr 1fr; gap: clamp(32px, 6vw, 112px); }
  .k-compare { grid-template-columns: 1fr 1fr; gap: clamp(16px, 2vw, 24px); }
}

/* ---------- Feature list: a heading beside a two-column definition list ---------- */
.k-features { display: grid; gap: var(--space-5); padding-block: clamp(32px, 4vw, 56px); }
.k-features + .k-features { padding-top: 0; }
.k-features > .k-heading { max-width: 18ch; }
.k-features dl { display: grid; gap: var(--space-5); }
.k-features dt {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 16px;
  font: 600 1.25rem/1.2 var(--type-display); letter-spacing: -0.005em;
}
.k-features dt span { color: var(--accent-text); font: 600 var(--step-small)/1.2 var(--type-text); font-variant-numeric: tabular-nums; }
.k-features dd { margin-top: 6px; max-width: 40em; }
@media (min-width: 700px) {
  .k-features dl { grid-template-columns: 1fr 1fr; gap: var(--space-6) clamp(24px, 3vw, 48px); }
}
@media (min-width: 1000px) {
  .k-features { grid-template-columns: 1fr 1.6fr; gap: clamp(24px, 5vw, 80px); }
}

/* Steps: a real ordered list, order shown by position. The current one carries the accent. */
.k-steps { list-style: none; padding: 0; display: grid; gap: clamp(28px, 3vw, 40px); margin-top: clamp(32px, 4vw, 56px); }
.k-steps h3 { font: 600 clamp(1.375rem, 2vw, 1.875rem)/1.1 var(--type-display); letter-spacing: -0.005em; margin-bottom: 8px; }
.k-steps p { max-width: 34em; }
.k-steps > li:first-child h3 { color: var(--accent-text); }
.k-two { display: grid; gap: var(--space-7); align-items: center; }
@media (min-width: 1000px) {
  .k-two { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(40px, 6vw, 104px); }
}

/* ---------- Pricing ---------- */
.k-toggle {
  display: inline-flex; padding: 4px; margin: 0 0 var(--space-6); border: 0;
  background: var(--surface); border-radius: var(--radius-pill);
}
.k-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.k-toggle label {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 20px;
  border-radius: var(--radius-pill); font-weight: 600; font-size: var(--step-small); cursor: pointer;
  color: var(--ink-2); transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.k-toggle label span { color: var(--accent-text); font-weight: 600; }
.k-toggle input:checked + label { background: var(--ink); color: var(--ground); }
.k-toggle input:checked + label span { color: inherit; }
.k-toggle input:focus-visible + label { outline: 3px solid var(--accent-text); outline-offset: 2px; }
/* Prices swap with the toggle, no script needed. */
.k-pricing [data-yearly] { display: none; }
.k-pricing:has(input[value="yearly"]:checked) [data-yearly] { display: revert; }
.k-pricing:has(input[value="yearly"]:checked) [data-monthly] { display: none; }

.k-tiers { display: grid; gap: var(--space-4); }
.k-tier {
  display: flex; flex-direction: column; gap: var(--space-4);
  padding: clamp(24px, 3vw, 40px); background: var(--surface); border-radius: var(--radius);
}
.k-tier__name { font: 600 1.25rem/1.2 var(--type-display); letter-spacing: -0.005em; }
.k-price { font: 600 clamp(2.75rem, 2rem + 3vw, 4.25rem)/1 var(--type-display); letter-spacing: var(--tracking-hero); font-variant-numeric: tabular-nums; }
.k-price small { font-size: 0.35em; letter-spacing: 0; color: var(--ink-2); margin-left: 4px; font-weight: 500; }
.k-tier ul { list-style: none; padding: 0; display: grid; gap: 10px; }
.k-tier li { padding-left: 28px; position: relative; }
.k-tier li::before {
  content: ""; position: absolute; left: 2px; top: 0.35em; width: 14px; height: 8px;
  border: solid var(--accent-text); border-width: 0 0 2.5px 2.5px; transform: rotate(-45deg);
}
.k-tier .k-btn { margin-top: auto; }
/* The recommended tier: the dark field. */
.k-tier--featured {
  --surface: var(--dark-surface); --ink: var(--on-dark); --ink-2: var(--on-dark-2); --accent-text: var(--accent-on-dark);
  background: var(--dark); color: var(--ink);
}
@media (min-width: 760px) {
  .k-tiers { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
}

/* ---------- FAQ ---------- */
.k-faq { display: grid; gap: var(--space-5); align-items: start; }
.k-faq details { background: var(--surface); border-radius: var(--radius); margin-bottom: 10px; transition: background-color var(--dur-fast) var(--ease); }
.k-faq details:hover { background: var(--surface-2); }
.k-faq summary {
  list-style: none; cursor: pointer; position: relative; padding: 20px 56px 20px 24px;
  font: 600 1.125rem/1.3 var(--type-text);
}
.k-faq summary::-webkit-details-marker { display: none; }
.k-faq summary::after {
  content: "+"; position: absolute; right: 24px; top: 50%; transform: translateY(-50%);
  font: 500 1.75rem/1 var(--type-display); color: var(--accent-text); transition: transform var(--dur-fast) var(--ease);
}
.k-faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.k-faq details > :not(summary) { padding: 0 24px 22px; max-width: 42em; }
@media (min-width: 1000px) {
  .k-faq { grid-template-columns: 1fr 1.6fr; gap: clamp(24px, 5vw, 80px); }
  .k-faq > .k-title { position: sticky; top: calc(var(--nav-height) + 32px); }
  .k-faq summary { font-size: 1.25rem; }
}

/* ---------- Email capture: posts as a normal form; js/kit.js upgrades it in place ---------- */
.k-capture { max-width: 560px; }
.k-capture__row { display: flex; flex-direction: column; gap: 10px; }
.k-capture .k-btn { width: 100%; }
.k-capture.is-done .k-capture__row { display: none; }
.k-capture.is-done .k-hint { color: var(--ink); font-weight: 600; font-size: var(--step-body); }
.k-capture.is-error .k-hint { color: var(--danger); font-weight: 600; }
.k-band .k-capture.is-error .k-hint, .k-dark .k-capture.is-error .k-hint { color: var(--ink); }
@media (min-width: 600px) {
  .k-capture__row { flex-direction: row; }
  .k-capture .k-btn { width: auto; }
}

/* ---------- Closing band ---------- */
.k-cta .k-hero-title { max-width: 16ch; }
.k-cta .k-capture, .k-cta .k-actions { margin-top: var(--space-6); }

/* ---------- Footer: the name returns at full width ---------- */
.k-footer { padding: clamp(48px, 6vw, 88px) 0 40px; }
.k-footer__mark { font: 600 clamp(3.5rem, 15vw, 15rem)/0.85 var(--type-display); letter-spacing: var(--tracking-title); color: var(--ink); }
.k-footer__row { display: grid; gap: var(--space-5); margin-top: var(--space-6); color: var(--ink-2); font-size: var(--step-small); }
.k-footer__row p { max-width: 36em; }
.k-footer__links { display: flex; flex-wrap: wrap; gap: 8px 24px; list-style: none; padding: 0; }
.k-footer__links a { text-decoration: none; }
.k-footer__links a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 700px) {
  .k-footer__row { grid-template-columns: 1fr 1fr; }
}

/* ---------- Range slider (Vue KitSlider or plain input) ---------- */
.k-range { width: 100%; height: 28px; appearance: none; background: transparent; accent-color: var(--accent-fill); cursor: pointer; }
.k-range::-webkit-slider-runnable-track { height: 8px; border-radius: var(--radius-pill); background: linear-gradient(var(--accent-fill), var(--accent-fill)) 0 / var(--fill, 50%) 100% no-repeat, var(--surface-2); } /* taste-skill-ignore: a two-tone track, not a gradient */
.k-range::-webkit-slider-thumb { appearance: none; width: 28px; height: 28px; margin-top: -10px; border-radius: 50%; background: #fff; border: 3px solid var(--accent-fill); }
.k-range::-moz-range-track { height: 8px; border-radius: var(--radius-pill); background: var(--surface-2); }
.k-range::-moz-range-progress { height: 8px; border-radius: var(--radius-pill); background: var(--accent-fill); }
.k-range::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 3px solid var(--accent-fill); }
.k-range:focus-visible { outline: 3px solid var(--accent-text); outline-offset: 4px; }

/* ---------- Motion: entrances only when script runs, never hiding content otherwise ----------
   Content is hidden only under html.k-js, which the head snippet adds and takes away again
   if kit.js hasn't marked the page k-ready within 3 seconds. No script, a failed script or
   reduced motion: everything stays visible. */
@media (prefers-reduced-motion: no-preference) {
  .k-js .k-reveal { opacity: 0; transform: translateY(var(--rise)); transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); transition-delay: var(--delay, 0ms); }
  .k-js .k-reveal.is-in { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html:has(.k-page) { scroll-behavior: auto; }
}