/* ==========================================================================
   Indo Spy — feature modules
   --------------------------------------------------------------------------
   Loaded after pages.css. Everything here belongs to a feature rather than to
   the base system: the product finder, the category master video, the pincode
   checker, the local-store block, and the blog.

     1. Product finder
     2. Category master video
     3. Pincode checker
     4. Local store and delivery
     5. Blog
   ========================================================================== */

/* ==========================================================================
   1. Product finder
   ========================================================================== */

.is-finder {
  border: 1px solid var(--is-line);
  border-radius: var(--is-radius);
  background: var(--is-white);
  padding: var(--is-s5);
}
@media (min-width: 768px) { .is-finder { padding: var(--is-s7); } }

.is-progress {
  height: 3px;
  background: var(--is-gray-light);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: var(--is-s2);
}
.is-progress__bar {
  display: block; height: 100%;
  background: var(--is-black);
  transition: width var(--is-t);
}
.is-progress__text span { text-transform: none; letter-spacing: 0; opacity: .75; }
.is-progress__text {
  font-family: var(--is-font-display);
  font-size: var(--is-fs-label);
  letter-spacing: var(--is-ls-label);
  text-transform: uppercase;
  color: var(--is-text-2);
  margin: 0 0 var(--is-s5);
}

.is-q__title { font-size: clamp(1.25rem, 1.1rem + 0.8vw, 1.75rem); margin-bottom: var(--is-s2); }
.is-q__hint { color: var(--is-text-2); font-size: var(--is-fs-sm); margin-bottom: var(--is-s5); }

.is-q__opts {
  display: grid;
  gap: var(--is-s3);
  /* auto-fill, not auto-fit: a two-answer question (Yes / No) keeps card
     width instead of stretching each answer across half the page. */
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr));
}

/* An answer, not a checkbox. Sized as a card you tap rather than a form row
   you fill: 72px minimum so it clears the 44px touch target with room to
   spare, an icon to find it by, and the match count as a readable figure
   rather than a stray number. */
.is-opt {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--is-s3);
  min-height: 72px;
  padding: var(--is-s3) var(--is-s4);
  border: 1px solid var(--is-line);
  border-radius: var(--is-radius-sm);
  background: var(--is-white);
  cursor: pointer;
  text-align: left;
  transition: border-color var(--is-t), box-shadow var(--is-t), background var(--is-t), transform var(--is-t);
}
.is-opt:hover {
  border-color: var(--is-black);
  box-shadow: 0 2px 4px rgba(16,18,20,.04), 0 10px 24px -14px rgba(16,18,20,.28);
  transform: translateY(-1px);
}
.is-opt:focus-visible { outline: 2px solid var(--is-black); outline-offset: 2px; }
.is-opt[aria-pressed="true"] {
  border-color: var(--is-black);
  box-shadow: inset 0 0 0 1px var(--is-black);
  background: var(--is-bg-soft);
}

/* The icon disc. Quiet by default, inverts on hover so the whole card reads
   as one control rather than an icon sitting next to some text. */
.is-opt__ico {
  display: grid; place-items: center;
  width: 42px; height: 42px; flex: none;
  border-radius: 50%;
  background: var(--is-bg-soft, #F4F5F6);
  color: var(--is-ink);
  transition: background var(--is-t), color var(--is-t);
}
.is-opt:hover .is-opt__ico { background: var(--is-black); color: var(--is-white); }
.is-opt[aria-pressed="true"] .is-opt__ico { background: var(--is-black); color: var(--is-white); }

.is-opt__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.is-opt__label {
  font-family: var(--is-font-display);
  font-weight: 600;
  font-size: var(--is-fs-base, 1rem);
  color: var(--is-ink);
  line-height: 1.35;
}
.is-opt__note {
  font-size: var(--is-fs-xs);
  line-height: 1.45;
  color: var(--is-text-2);
}
.is-opt[aria-pressed="true"] .is-opt__label { color: var(--is-black); }

/* The count. Stacked figure + word so it reads as "49 products" at a glance
   instead of an unexplained number floating at the edge of the row. */
.is-opt__n {
  display: grid; justify-items: end; gap: 0;
  flex: none;
  font-family: var(--is-font-display);
  font-weight: 700;
  font-size: var(--is-fs-sm);
  color: var(--is-ink);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.is-opt__n small {
  display: block;
  font-family: var(--is-font-body, inherit);
  font-weight: 400;
  font-size: var(--is-fs-2xs, .6875rem);
  color: var(--is-text-2);
  letter-spacing: .01em;
}

.is-opt__go { flex: none; color: var(--is-line-strong, #C4C8CE); transition: color var(--is-t), transform var(--is-t); }
.is-opt:hover .is-opt__go { color: var(--is-black); transform: translateX(2px); }

/* Below ~520px the count moves under the label rather than squeezing the
   text into a two-word column. */
@media (max-width: 520px) {
  .is-opt { grid-template-columns: auto minmax(0, 1fr) auto; row-gap: 2px; }
  .is-opt__n { grid-column: 2 / 3; justify-items: start; flex-direction: row; }
  .is-opt__n small { display: inline; margin-left: .25rem; }
}

/* ── Guided flow: warning, and the stop outcome ───────────────────────────
   The door/entrance branch can end in advice rather than a shortlist. It is
   deliberately not styled as an error — nothing has gone wrong; the honest
   answer is simply a different product. */
.is-q__warn {
  display: flex;
  gap: var(--is-s2);
  align-items: flex-start;
  margin: 0 0 var(--is-s5);
  padding: var(--is-s3) var(--is-s4);
  border: 1px solid var(--is-warn-line, #EADFC2);
  background: var(--is-warn-bg, #FDF8EC);
  border-radius: var(--is-radius-sm);
  font-size: var(--is-fs-sm);
  line-height: 1.55;
  color: var(--is-ink);
}
.is-q__warn svg { flex: none; margin-top: 2px; color: var(--is-warn-ink, #8A6100); }

.is-q--stop { text-align: center; max-width: 34rem; margin-inline: auto; }
.is-q__warnmark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  margin: 0 auto var(--is-s4);
  border-radius: 50%;
  background: var(--is-warn-bg, #FDF8EC);
  color: var(--is-warn-ink, #8A6100);
}
.is-q--stop .is-q__hint { margin-bottom: var(--is-s5); }
.is-q__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--is-s3);
  justify-content: center;
}

/* Shown only when nothing met every requirement, so the shopper is told why a
   card is here rather than being left to assume it is a perfect match. */
.is-match__partial {
  margin: 0;
  padding: var(--is-s2) var(--is-s4);
  font-size: var(--is-fs-xs);
  color: var(--is-text-2);
  background: var(--is-bg-soft);
  border-top: 1px solid var(--is-line-soft);
}

.is-finder__nav {
  display: flex; flex-wrap: wrap; gap: var(--is-s3);
  margin-top: var(--is-s6);
  padding-top: var(--is-s5);
  border-top: 1px solid var(--is-line-soft);
}
.is-finder__count { font-size: var(--is-fs-sm); color: var(--is-text-2); margin: var(--is-s4) 0 0; }
.is-finder__count strong { color: var(--is-black); font-family: var(--is-font-display); }

/* Shortlist card: the product card plus the reasons it matched. */
.is-match {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--is-line-soft);
  border-radius: var(--is-radius);
  overflow: hidden;
  background: var(--is-white);
}
.is-match .is-card { border: 0; border-radius: 0; }
.is-match .is-card:hover { box-shadow: none; transform: none; }
.is-match__why {
  padding: 0 var(--is-s4) var(--is-s4);
  border-top: 1px solid var(--is-line-soft);
  padding-top: var(--is-s4);
  margin-top: auto;
}
.is-match__why .is-label { display: block; margin-bottom: var(--is-s2); }
.is-match__why ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--is-s1); }
.is-match__why li {
  display: flex; align-items: flex-start; gap: var(--is-s2);
  font-size: var(--is-fs-xs); color: var(--is-ink-muted); line-height: 1.5;
}
.is-match__why svg { flex: none; color: var(--is-ok); margin-top: 2px; }
.is-match__actions { display: grid; gap: var(--is-s2); padding: var(--is-s4); padding-top: 0; }

/* ==========================================================================
   2. Category master video
   ========================================================================== */

.is-cvideo {
  display: grid;
  gap: var(--is-s5);
  align-items: center;
  border: 1px solid var(--is-line);
  border-radius: var(--is-radius);
  overflow: hidden;
  background: var(--is-white);
}
@media (min-width: 768px) { .is-cvideo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; align-items: stretch; } }

.is-cvideo__media {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--is-charcoal);
  display: grid; place-items: center;
  overflow: hidden;
}
.is-cvideo__media img { width: 100%; height: 100%; object-fit: contain; padding: var(--is-s5); opacity: .82; }

.is-cvideo__play {
  position: absolute; inset: 0; margin: auto;
  width: 64px; height: 64px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: rgba(255,255,255,.94);
  color: var(--is-black);
  cursor: pointer;
  box-shadow: var(--is-shadow-lift);
  transition: transform var(--is-t), background var(--is-t);
}
.is-cvideo__play:hover { transform: scale(1.06); background: #fff; }

.is-cvideo__pending {
  position: relative;
  padding: var(--is-s2) var(--is-s4);
  border: 1px dashed rgba(255,255,255,.5);
  border-radius: 999px;
  background: rgba(0,0,0,.45);
  color: #fff;
  font-family: var(--is-font-display);
  font-size: var(--is-fs-xs);
  font-weight: 600;
}

.is-cvideo__body { padding: var(--is-s5); }
@media (min-width: 768px) { .is-cvideo__body { padding: var(--is-s6); } }
.is-cvideo__title { font-size: var(--is-fs-h3); margin: var(--is-s2) 0 var(--is-s3); }
.is-cvideo__desc { color: var(--is-ink-muted); font-size: var(--is-fs-sm); margin-bottom: var(--is-s4); }
.is-cvideo__meta { font-size: var(--is-fs-xs); color: var(--is-text-2); margin-bottom: var(--is-s5); line-height: 1.6; }
.is-cvideo__flag {
  display: inline-block; margin-right: var(--is-s2);
  padding: 2px var(--is-s2); border-radius: 4px;
  background: #C9A227; color: #fff;
  font-family: var(--is-font-display); font-size: var(--is-fs-label);
  font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.is-cvideo__cta { display: flex; flex-wrap: wrap; gap: var(--is-s3); }

/* The transcript is text on the page, not a substitute for the video and not
   hidden from crawlers — <details> keeps it collapsed without removing it. */
.is-transcript {
  margin-top: var(--is-s4);
  border: 1px solid var(--is-line-soft);
  border-radius: var(--is-radius-sm);
  padding: var(--is-s4);
  background: var(--is-bg-soft);
}
.is-transcript summary {
  cursor: pointer;
  font-family: var(--is-font-display);
  font-weight: 600;
  font-size: var(--is-fs-sm);
  color: var(--is-black);
}
.is-transcript p { margin: var(--is-s3) 0 0; font-size: var(--is-fs-sm); color: var(--is-ink-muted); }

/* The summary now carries a label and a length, so it needs to lay out as a
   row rather than a single run of text. */
.is-transcript summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--is-s3);
  flex-wrap: wrap;
  list-style: none;                /* the default marker sits badly in a flex row */
}
.is-transcript summary::-webkit-details-marker { display: none; }

/* A disclosure needs an affordance; drawn here since the marker is gone. */
.is-transcript__label { display: inline-flex; align-items: center; gap: 8px; }
.is-transcript__label::before {
  content: '';
  width: 7px; height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform var(--is-t);
}
.is-transcript[open] .is-transcript__label::before { transform: rotate(45deg); }

.is-transcript__meta { font-size: var(--is-fs-xs); color: var(--is-text-2); font-weight: 400; }

/* A transcript is read, not skimmed, so it gets a reading measure of its own
   rather than running the full width of the section above it. */
.is-transcript__body { max-width: 72ch; }
.is-transcript__body p + p { margin-top: var(--is-s3); }

.is-transcript__note {
  font-style: italic;
  color: var(--is-text-2) !important;
}

.is-transcript summary:focus-visible {
  outline: 2px solid var(--is-black);
  outline-offset: 3px;
  border-radius: 3px;
}

.is-videomodal {
  position: fixed; inset: 0; z-index: 1400;
  background: rgba(0,0,0,.9);
  display: grid; place-items: center; padding: var(--is-s5);
  opacity: 0; transition: opacity var(--is-t);
}
.is-videomodal[hidden] { display: none; }
.is-videomodal.is-open { opacity: 1; }
.is-videomodal__panel { width: min(980px, 100%); }
.is-videomodal__panel video,
.is-videomodal__panel iframe {
  width: 100%; aspect-ratio: 16 / 9; display: block;
  border: 0; border-radius: var(--is-radius); background: #000;
}
.is-videomodal__close { position: absolute; top: var(--is-s4); right: var(--is-s4); color: #fff; background: none; border: 0; cursor: pointer; padding: var(--is-s2); }

/* ==========================================================================
   3. Pincode checker
   ========================================================================== */

.is-pincode {
  border: 1px solid var(--is-line);
  border-radius: var(--is-radius-sm);
  padding: var(--is-s4);
  background: var(--is-bg-soft);
}
.is-pincode__title {
  display: flex; align-items: center; gap: var(--is-s2);
  font-family: var(--is-font-display); font-weight: 600; font-size: var(--is-fs-sm);
  color: var(--is-black); margin-bottom: var(--is-s3);
}
.is-pincode__row { display: flex; gap: var(--is-s2); }
.is-pincode__row .is-input { min-height: 44px; background: var(--is-white); }
.is-pincode__out { display: none; margin-top: var(--is-s3); font-size: var(--is-fs-sm); }
.is-pincode__out.is-on { display: block; }
.is-pincode__state {
  display: flex; align-items: center; gap: var(--is-s2);
  font-family: var(--is-font-display); font-weight: 600;
}
.is-pincode__out p { margin: var(--is-s2) 0 0; font-size: var(--is-fs-xs); color: var(--is-ink-muted); line-height: 1.6; }
.is-pincode__out p a { text-decoration: underline; text-underline-offset: 2px; color: var(--is-black); }
.is-pincode__out--yes .is-pincode__state { color: var(--is-ok); }
.is-pincode__out--ok .is-pincode__state { color: var(--is-ink); }
.is-pincode__out--no .is-pincode__state { color: #B42318; }
.is-pincode__out--loading .is-pincode__state { color: var(--is-text-2); }
.is-pincode__note { font-size: var(--is-fs-label); color: var(--is-text-2); margin: var(--is-s3) 0 0; line-height: 1.5; }

/* ==========================================================================
   4. Local store and delivery
   ========================================================================== */

.is-local { display: grid; gap: var(--is-s5); }
@media (min-width: 992px) { .is-local { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--is-s6); } }

.is-localcard {
  display: flex; flex-direction: column; gap: var(--is-s3);
  padding: var(--is-s5);
  border: 1px solid var(--is-line);
  border-radius: var(--is-radius);
  background: var(--is-white);
}
@media (min-width: 768px) { .is-localcard { padding: var(--is-s6); } }
/* The two routes are visually distinct: the store is the one Indo Spy can do
   that an online-only seller cannot, so it leads. */
.is-localcard--store { background: var(--is-black); color: rgba(255,255,255,.75); border-color: var(--is-black); }
.is-localcard--store .is-localcard__t,
.is-localcard--store .is-label { color: #fff; }
.is-localcard--store .is-label { color: rgba(255,255,255,.55); }
.is-localcard--store address { color: rgba(255,255,255,.75); }
.is-localcard--store a { color: #fff; }

.is-localcard__icon {
  width: 40px; height: 40px; display: grid; place-items: center;
  border: 1px solid var(--is-line); border-radius: var(--is-radius-sm);
  color: var(--is-black);
}
.is-localcard--store .is-localcard__icon { border-color: rgba(255,255,255,.25); color: #fff; }
.is-localcard__t { font-family: var(--is-font-display); font-weight: 700; font-size: var(--is-fs-h3); color: var(--is-black); margin: 0; }
.is-localcard__d { font-size: var(--is-fs-sm); margin: 0; }
.is-localcard address { font-style: normal; font-size: var(--is-fs-sm); line-height: 1.7; margin: 0; }
.is-localcard__cta { display: flex; flex-wrap: wrap; gap: var(--is-s3); margin-top: auto; padding-top: var(--is-s4); }
.is-localcard__note { font-size: var(--is-fs-label); color: var(--is-text-2); margin: var(--is-s2) 0 0; }
.is-localcard--store .is-localcard__note { color: rgba(255,255,255,.5); }

/* ==========================================================================
   5. Blog
   ========================================================================== */

.is-posts { display: grid; gap: var(--is-s5); grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }

.is-post {
  display: flex; flex-direction: column;
  border: 1px solid var(--is-line-soft);
  border-radius: var(--is-radius);
  overflow: hidden;
  background: var(--is-white);
  transition: border-color var(--is-t), box-shadow var(--is-t), transform var(--is-t);
}
.is-post:hover { border-color: var(--is-line); box-shadow: var(--is-shadow-lift); transform: translateY(-2px); }
.is-post__media { aspect-ratio: 16 / 10; background: var(--is-bg-soft); overflow: hidden; }
.is-post__media img { width: 100%; height: 100%; object-fit: contain; padding: var(--is-s4); }
.is-post__body { padding: var(--is-s4); display: flex; flex-direction: column; gap: var(--is-s2); flex: 1 1 auto; }
.is-post__title { font-family: var(--is-font-display); font-weight: 700; font-size: 1.0625rem; color: var(--is-black); line-height: 1.35; }
.is-post__ex { font-size: var(--is-fs-sm); color: var(--is-ink-muted); margin: 0; }
.is-post__meta { font-size: var(--is-fs-xs); color: var(--is-text-2); margin-top: auto; padding-top: var(--is-s3); }

.is-article { display: grid; gap: var(--is-s6); }
@media (min-width: 992px) { .is-article { grid-template-columns: 240px minmax(0, 1fr); gap: var(--is-s8); align-items: start; } }
/* min-width:0 is load-bearing. A grid item's automatic minimum is its
   max-content size, so the 460px min-width on the comparison table pushed this
   column to 476px inside a 320px screen and the .is-ctable overflow container
   never got the chance to scroll. */
.is-article__body { max-width: 72ch; min-width: 0; }
.is-article > * { min-width: 0; }
.is-article__body h2 { font-size: var(--is-fs-h3); margin: var(--is-s7) 0 var(--is-s3); }
.is-article__body h3 { font-size: 1.0625rem; margin: var(--is-s5) 0 var(--is-s2); }
.is-article__body p, .is-article__body li { color: var(--is-ink-muted); font-size: var(--is-fs-body); line-height: var(--is-lh-body); }
.is-article__body ul { padding-left: var(--is-s5); display: grid; gap: var(--is-s2); margin-bottom: var(--is-s4); }
.is-article__lede { font-size: 1.125rem; color: var(--is-ink); }

.is-toc { display: none; }
@media (min-width: 992px) { .is-toc { display: block; position: sticky; top: calc(var(--is-header-h) + var(--is-s4)); } }
.is-toc ul { list-style: none; margin: var(--is-s3) 0 0; padding: 0; display: grid; gap: var(--is-s2); }
.is-toc a { font-size: var(--is-fs-xs); color: var(--is-text-2); }
.is-toc a:hover { color: var(--is-black); }

/* Comparison table inside an article. Scrolls in its own container so a wide
   table never makes the page scroll sideways. */
.is-ctable { overflow-x: auto; margin-bottom: var(--is-s5); }
.is-ctable table { width: 100%; border-collapse: collapse; font-size: var(--is-fs-sm); min-width: 460px; }
.is-ctable th, .is-ctable td { text-align: left; padding: var(--is-s3); border-bottom: 1px solid var(--is-line-soft); vertical-align: top; }
.is-ctable th {
  font-family: var(--is-font-display); font-size: var(--is-fs-label);
  letter-spacing: var(--is-ls-label); text-transform: uppercase; color: var(--is-text-2);
}
.is-ctable td { color: var(--is-ink-muted); }
.is-ctable tbody th { color: var(--is-black); font-size: var(--is-fs-sm); text-transform: none; letter-spacing: 0; font-weight: 600; }

/* Specification table on the product page — a real <table>, so the data is
   machine-readable rather than a grid of divs. */
.is-spectable { width: 100%; border-collapse: collapse; font-size: var(--is-fs-sm); }
.is-spectable th, .is-spectable td { text-align: left; padding: var(--is-s3) 0; border-bottom: 1px solid var(--is-line-soft); }
.is-spectable th { color: var(--is-text-2); font-weight: 400; width: 40%; }
.is-spectable td { color: var(--is-ink); }
.is-spectable tr:last-child th, .is-spectable tr:last-child td { border-bottom: 0; }

/* Cart page actions row — continue shopping / clear cart. */
.is-cartactions {
  display: flex; flex-wrap: wrap; gap: var(--is-s3);
  margin-top: var(--is-s5);
  padding-top: var(--is-s5);
  border-top: 1px solid var(--is-line-soft);
}
.is-cartactions[hidden] { display: none; }
.is-cartactions [data-confirming="1"] { border-color: #B42318; color: #B42318; }

/* Pointer from the sidebar filters to the finder, for anyone who would
   rather answer questions than tick boxes. */
.is-fhelp {
  font-size: var(--is-fs-xs);
  color: var(--is-text-2);
  line-height: 1.6;
  margin: var(--is-s5) 0 0;
  padding-top: var(--is-s4);
  border-top: 1px solid var(--is-line-soft);
}
.is-fhelp .is-link { font-size: var(--is-fs-xs); }

/* ==========================================================================
   Media box fill fix
   --------------------------------------------------------------------------
   These boxes set a fixed aspect-ratio and expect the image to fit inside it.
   Several also used "display:grid; place-items:center", which makes a child
   with height:100% resolve against an auto-sized row instead of stretching —
   so the image kept its own aspect and overflowed the box. Measured when the
   category banner still held one: a 510x510 image in a 510x287 box, clipped
   by 223px. The banner shows the guide video now; the rest still need this.

   Letting the image fill both axes gives object-fit:contain a real box to work
   in. The category-guide poster keeps its grid so the play button and the
   placeholder badge can still centre over the image.
   ========================================================================== */

.is-featmedia,
.is-promo__media,
.is-split__media,
.is-qv__media {
  display: block;
}
.is-featmedia > img,
.is-promo__media > img,
.is-split__media > img,
.is-qv__media > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Poster and overlay share one grid cell, so the image fills the box and the
   control sits on top of it rather than beside it. */
.is-cvideo__media > img,
.is-cvideo__media > .is-cvideo__pending,
.is-cvideo__media > .is-cvideo__play {
  grid-area: 1 / 1;
}
.is-cvideo__media > img {
  align-self: stretch;
  justify-self: stretch;
  width: 100%;
  height: 100%;
}

/* Tablet and up: the media fills its half of the card.

   It used to be align-items:center with a fixed aspect-ratio, so on a tablet —
   where the copy column wraps tallest and the media column is narrowest — the
   poster floated in the middle of the bordered card with ~59px of dead white
   above and below it. This must stay AFTER the base .is-cvideo__media rule:
   same specificity, and the later rule wins. Dropping aspect-ratio is what
   makes it fill; leaving it in makes the stretched height drive the width
   (height x 1.6) and the panel overflows its column. */
@media (min-width: 768px) {
  .is-cvideo__media { aspect-ratio: auto; min-height: 240px; }
  .is-cvideo__body { display: flex; flex-direction: column; justify-content: center; }
}

/* ── Finder stepper ────────────────────────────────────────────────────────
   A bar alone says how far along you are but nothing about what is done. Each
   step gets a segment: answered carries a tick and links back to itself,
   current is marked, the rest sit muted ahead. State is never colour alone —
   the tick, the number, the weight and the aria all say the same thing. */

.is-steps { margin-bottom: var(--is-s4); }
.is-steps__list {
  display: flex; flex-wrap: wrap;
  gap: var(--is-s2) var(--is-s3);
  list-style: none; margin: 0; padding: 0;
  counter-reset: step;
}
.is-steps__item { display: flex; align-items: center; min-width: 0; }

.is-steps__link {
  display: inline-flex; align-items: center; gap: .45rem;
  min-width: 0;
  font-size: var(--is-fs-xs);
  line-height: 1.2;
  color: var(--is-text-2);
  text-decoration: none;
  border-radius: 999px;
  transition: color var(--is-t);
}
a.is-steps__link:hover { color: var(--is-black); }
a.is-steps__link:focus-visible { outline: 2px solid var(--is-black); outline-offset: 3px; }

.is-steps__dot {
  display: grid; place-items: center;
  width: 22px; height: 22px; flex: none;
  border-radius: 50%;
  border: 1px solid var(--is-line);
  background: var(--is-white);
  font-family: var(--is-font-display);
  font-size: .6875rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--is-text-2);
  transition: background var(--is-t), border-color var(--is-t), color var(--is-t);
}
.is-steps__label {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 11ch;
}

/* Answered */
.is-steps__item--done .is-steps__dot { background: var(--is-black); border-color: var(--is-black); color: var(--is-white); }
.is-steps__item--done .is-steps__link { color: var(--is-ink); }

/* Current — ringed rather than merely darker, so it reads at a glance */
.is-steps__item--now .is-steps__dot {
  background: var(--is-white);
  border-color: var(--is-black);
  color: var(--is-black);
  box-shadow: 0 0 0 3px rgba(16,18,20,.10);
}
.is-steps__item--now .is-steps__link { color: var(--is-black); font-weight: 600; }
.is-steps__item--now .is-steps__label { max-width: none; }

/* Still to come */
.is-steps__item--todo .is-steps__link { opacity: .55; }

/* The connector between segments. Drawn on the item, not between elements, so
   a wrapped row never leaves a line dangling off the end. */
.is-steps__item + .is-steps__item::before {
  content: '';
  width: 14px; height: 1px; flex: none;
  margin-right: var(--is-s3);
  background: var(--is-line);
}

@media (max-width: 560px) {
  /* On a phone the labels cost more width than they earn — the dots plus the
     "Step 4 of 7" line underneath carry it. */
  .is-steps__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .is-steps__item--now .is-steps__label { position: static; width: auto; height: auto; clip: auto; max-width: 14ch; }
  .is-steps__list { gap: var(--is-s2); }
  .is-steps__item + .is-steps__item::before { width: 8px; margin-right: var(--is-s2); }
}

.is-progress__text span {
  text-transform: none; letter-spacing: 0; opacity: .7;
}
.is-progress__text span::before { content: ' · '; }

/* Option row: count reads as a figure with its unit, and an arrow says the
   click moves you on rather than just ticking a box. */
.is-opt__n small {
  display: block;
  font-family: var(--is-font-body, inherit);
  font-weight: 400;
  font-size: .6875rem;
  color: var(--is-text-2);
}
.is-opt__go { flex: none; color: var(--is-line-strong, #C4C8CE); transition: color var(--is-t), transform var(--is-t); }
.is-opt:hover .is-opt__go { color: var(--is-black); transform: translateX(2px); }

/* ── Running tally ─────────────────────────────────────────────────────────
   The live count of what still matches. It replaces a grey sentence that sat
   under the buttons and read as a footnote — this is the number that proves
   the answers are doing something, so it gets a panel.

   The figure is set large and tabular so it does not jiggle as it changes
   from 12 to 4 to 2; the strip beside it carries the wording, and the action
   sits at the end for anyone happy to stop early. */

.is-tally {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--is-s4);
  margin-top: var(--is-s5);
  padding: var(--is-s3) var(--is-s4);
  border: 1px solid var(--is-line);
  border-left: 3px solid var(--is-black);
  border-radius: var(--is-radius-sm);
  background: var(--is-bg-soft, #F4F5F6);
}

.is-tally__fig {
  font-family: var(--is-font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 1.3rem + 0.9vw, 2rem);
  line-height: 1;
  color: var(--is-black);
  font-variant-numeric: tabular-nums;
  min-width: 1.6ch;
  text-align: center;
}

.is-tally__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.is-tally__txt strong {
  font-family: var(--is-font-display);
  font-weight: 600;
  font-size: var(--is-fs-sm);
  color: var(--is-ink);
  line-height: 1.3;
}
.is-tally__txt span {
  font-size: var(--is-fs-xs);
  color: var(--is-text-2);
  line-height: 1.4;
}
.is-tally__txt--only { grid-column: 1 / -1; }

.is-tally__cta {
  display: inline-flex; align-items: center; gap: .35rem;
  flex: none;
  padding: .5rem .85rem;
  border: 1px solid var(--is-line-strong, #C4C8CE);
  border-radius: 999px;
  background: var(--is-white);
  font-family: var(--is-font-display);
  font-weight: 600;
  font-size: var(--is-fs-xs);
  color: var(--is-ink);
  text-decoration: none;
  transition: background var(--is-t), color var(--is-t), border-color var(--is-t);
}
.is-tally__cta:hover { background: var(--is-black); border-color: var(--is-black); color: var(--is-white); }
.is-tally__cta:focus-visible { outline: 2px solid var(--is-black); outline-offset: 2px; }
.is-tally__cta svg { transition: transform var(--is-t); }
.is-tally__cta:hover svg { transform: translateX(2px); }

/* Down to a handful: the rail goes solid and the figure is the loudest thing
   on the panel, because at that point the shopper is nearly done. */
.is-tally--narrow {
  border-color: var(--is-black);
  background: var(--is-white);
  box-shadow: 0 2px 4px rgba(16,18,20,.04), 0 12px 28px -18px rgba(16,18,20,.3);
}

@media (max-width: 560px) {
  .is-tally {
    grid-template-columns: auto minmax(0, 1fr);
    row-gap: var(--is-s3);
  }
  .is-tally__cta { grid-column: 1 / -1; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .is-tally__cta svg { transition: none; }
}


/* ==========================================================================
   Customer rating (About page)

   Built to read as evidence rather than as a badge: the number is large
   enough to be the point, the sample size and the source sit with it, and the
   whole thing links to the place anyone can check it. A rating without its
   sample size is marketing; with it, it is a fact.
   ========================================================================== */


/* One star, as a repeating mask. A mask rather than five <svg> elements so a
   fractional score can be drawn exactly: the fill below is clipped to the
   percentage, and the mask decides what shape that fill takes. */
:root {
  --is-star-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 20'%3E%3Cpath d='M12 1.5l3 6.2 6.8 1-4.9 4.8 1.2 6.8L12 17.1 5.9 20.3l1.2-6.8L2.2 8.7l6.8-1z'/%3E%3C/svg%3E");
}

.is-rating {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--is-s5);
  align-items: center;
  padding: var(--is-s5) var(--is-s6);
  border: 1px solid var(--is-line);
  border-radius: var(--is-radius);
  background: var(--is-white);
}

/* The score, given the weight of a figure rather than of body copy. */
.is-rating__score {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-right: var(--is-s5);
  border-right: 1px solid var(--is-line-soft, var(--is-line));
}
.is-rating__n {
  font-family: var(--is-font-display);
  font-size: clamp(42px, 7vw, 64px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--is-black);
  font-variant-numeric: tabular-nums;
}
.is-rating__of {
  margin-top: 4px;
  font-size: var(--is-fs-xs);
  color: var(--is-text-2);
  text-transform: uppercase;
  letter-spacing: .08em;
}

.is-rating__body { min-width: 0; }

/* One gradient rather than five glyphs, so 4.8 is drawn as 4.8 and not
   rounded up to a fifth full star. The track is the empty state; the fill is
   clipped to the exact percentage. */
.is-rating__stars {
  position: relative;
  display: block;
  width: 122px;
  height: 20px;
  background: var(--is-line);
  -webkit-mask: var(--is-star-mask);
  mask: var(--is-star-mask);
  -webkit-mask-size: 24px 20px;
  mask-size: 24px 20px;
  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
}
.is-rating__stars-fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: #E8A317;
}

.is-rating__meta {
  margin: var(--is-s3) 0 0;
  font-family: var(--is-font-display);
  font-weight: 600;
  font-size: var(--is-fs-sm);
}
.is-rating__note {
  margin: 4px 0 0;
  font-size: var(--is-fs-xs);
  line-height: 1.6;
  color: var(--is-text-2);
  max-width: 46ch;
}
.is-rating__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--is-s3);
  font-size: var(--is-fs-sm);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Below the phone breakpoint the divider becomes a rule under the score,
   because a vertical divider beside a wrapped column reads as a mistake. */
@media (max-width: 575px) {
  .is-rating { grid-template-columns: 1fr; gap: var(--is-s4); padding: var(--is-s5); }
  .is-rating__score {
    flex-direction: row;
    align-items: baseline;
    gap: var(--is-s3);
    padding: 0 0 var(--is-s4);
    border-right: 0;
    border-bottom: 1px solid var(--is-line-soft, var(--is-line));
  }
  .is-rating__of { margin-top: 0; }
}

/* A section that should not add its own top rim above the next one. */
.is-section--norim { padding-top: 0; }