/* ==========================================================================
   pages.css — the long-form pages: privacy policy, terms, refund policy,
   services and Help & FAQ.

   Loaded per page from a @section Head block, the same way home.css and
   product.css are, so the pages that do not use any of this never pay for it.

   Every value here is a token from site.css's :root block. There are no new
   brand colours and no second copy of a component — .mi-prose, .mi-btn and
   .mi-container all still come from site.css and are only ever composed with,
   never redeclared.
   ========================================================================== */

/* ============================== layout ============================== */

.mi-legal-grid {
  display: grid;
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}
.mi-legal-grid--solo { grid-template-columns: minmax(0, 1fr); }

/* The copy column is capped for reading, not stretched to the grid cell. A legal
   paragraph at full container width runs past 110 characters a line. */
.mi-legal-main { max-width: 74ch; }
.mi-legal-grid--solo .mi-legal-main { margin-inline: auto; }

@media (max-width: 1024px) {
  .mi-legal-grid { grid-template-columns: minmax(0, 1fr); }
  .mi-legal-main { max-width: none; }
}

/* ============================ contents rail ============================ */

/* Clears the sticky header, stated literally the way home.css and product.css
   state theirs — there is no header-height token to read. */
.mi-legal-rail { position: sticky; top: 110px; }

@media (max-width: 1024px) {
  /* Sticky would pin the whole list over the copy once it is a full-width block. */
  .mi-legal-rail { position: static; }
}

.mi-legal-toc {
  padding: 6px 6px 8px;
  background: linear-gradient(180deg, #fff 0%, #fbfcff 100%);
  border: 1px solid var(--mi-line);
  border-radius: var(--mi-radius-lg);
  box-shadow: var(--mi-shadow-sm);
}

.mi-legal-toc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mi-space-3);
  padding: 12px 14px;
  color: var(--mi-title);
  font-family: var(--font-primary);
  font-size: var(--mi-text-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
}
.mi-legal-toc-head::-webkit-details-marker { display: none; }

.mi-legal-toc-count {
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  height: 22px;
  padding: 0 7px;
  background: rgb(67 86 232 / 0.10);
  color: var(--mi-brand);
  border-radius: var(--mi-radius-pill);
  font-size: 12px;
  letter-spacing: 0;
}

/* On desktop the panel is never a disclosure: no pointer, no marker, always open. */
@media (min-width: 1025px) {
  .mi-legal-toc-head { cursor: default; pointer-events: none; }
}

/* The caret only exists where the panel can actually collapse. */
@media (max-width: 1024px) {
  .mi-legal-toc-head::after {
    content: "";
    width: 9px;
    height: 9px;
    margin-left: auto;
    border-right: 2px solid var(--mi-muted);
    border-bottom: 2px solid var(--mi-muted);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform var(--mi-transition);
  }
  .mi-legal-toc[open] .mi-legal-toc-head::after { transform: rotate(-135deg) translate(-2px, -2px); }
  .mi-legal-toc-count { margin-left: auto; }
}

.mi-legal-toc-list {
  margin: 0;
  padding: 0 6px 4px;
  list-style: none;
  counter-reset: none;
}
.mi-legal-toc-list a {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: var(--mi-space-2);
  align-items: baseline;
  padding: 9px 10px;
  color: var(--mi-body);
  font-size: var(--mi-text-sm);
  line-height: 1.45;
  border-radius: var(--mi-radius-sm);
  transition: background var(--mi-transition), color var(--mi-transition);
}
.mi-legal-toc-list a:hover,
.mi-legal-toc-list a:focus-visible {
  background: rgb(67 86 232 / 0.07);
  color: var(--mi-title);
}
.mi-legal-toc-num {
  color: var(--mi-faint);
  font-family: var(--font-primary);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.mi-legal-toc-list a:hover .mi-legal-toc-num { color: var(--mi-brand); }

/* ============================== the copy ============================== */

.mi-legal-intro {
  margin: 0 0 var(--mi-space-5);
  color: var(--mi-muted);
  font-size: var(--mi-text-lg);
  line-height: 1.65;
}

.mi-legal-lead {
  padding-bottom: var(--mi-space-6);
  border-bottom: 1px solid var(--mi-line);
}

.mi-legal-block { scroll-margin-top: 120px; }
.mi-legal-block + .mi-legal-block { margin-top: var(--mi-space-7); }
.mi-legal-lead + .mi-legal-block { margin-top: var(--mi-space-7); }

.mi-legal-h {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--mi-space-3);
  align-items: baseline;
  margin: 0 0 var(--mi-space-4);
  font-size: var(--mi-text-2xl);
  letter-spacing: -0.02em;
}

/* The number is the only ornament on the page, so it carries the brand. */
.mi-legal-num {
  display: inline-grid;
  place-items: center;
  min-width: 34px;
  height: 26px;
  padding: 0 8px;
  background: linear-gradient(135deg, rgb(67 86 232 / 0.12) 0%, rgb(157 123 255 / 0.12) 100%);
  color: var(--mi-brand);
  border-radius: var(--mi-radius-pill);
  font-size: 13px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  transform: translateY(-2px);
}

/* Visible on hover or keyboard focus only — present for the reader who wants it,
   silent for the one who does not. */
.mi-legal-anchor {
  color: var(--mi-faint);
  font-weight: 700;
  text-decoration: none;
  opacity: 0;
  transition: opacity var(--mi-transition), color var(--mi-transition);
}
.mi-legal-h:hover .mi-legal-anchor,
.mi-legal-anchor:focus-visible { opacity: 1; }
.mi-legal-anchor:hover { color: var(--mi-brand); }

/* ============================ page footer ============================ */

.mi-legal-foot {
  margin-top: var(--mi-space-8);
  padding-top: var(--mi-space-6);
  border-top: 1px solid var(--mi-line);
}
.mi-legal-foot-title {
  margin: 0 0 var(--mi-space-4);
  color: var(--mi-faint);
  font-family: var(--font-primary);
  font-size: var(--mi-text-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.mi-legal-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: var(--mi-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.mi-legal-links a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--mi-space-2) var(--mi-space-3);
  height: 100%;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--mi-line);
  border-radius: var(--mi-radius);
  color: var(--mi-title);
  transition: border-color var(--mi-transition), box-shadow var(--mi-transition),
              transform var(--mi-transition);
}
.mi-legal-links a:hover {
  transform: translateY(-2px);
  border-color: rgb(67 86 232 / 0.30);
  box-shadow: var(--mi-shadow-sm);
}
.mi-legal-link-label { font-family: var(--font-primary); font-weight: 600; }
.mi-legal-link-note {
  grid-column: 1 / -1;
  color: var(--mi-muted);
  font-size: var(--mi-text-sm);
  line-height: 1.5;
}
/* Placed explicitly on the first row. The note above it spans both columns, so under
   auto-placement the arrow was pushed to a third row and sat beneath the note at the
   left edge instead of beside the label. */
.mi-legal-link-go {
  grid-row: 1;
  grid-column: 2;
  justify-self: end;
  color: var(--mi-brand);
  font-size: var(--mi-text-lg);
}

.mi-legal-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--mi-space-4);
  margin-top: var(--mi-space-6);
  padding: clamp(20px, 3vw, 28px);
  background:
    radial-gradient(90% 140% at 100% 0%, rgb(157 123 255 / 0.10) 0%, transparent 60%),
    linear-gradient(135deg, #f5f7ff 0%, #eef2fd 100%);
  border: 1px solid var(--mi-line);
  border-radius: var(--mi-radius-lg);
}
.mi-legal-cta-title {
  margin: 0 0 4px;
  color: var(--mi-title);
  font-family: var(--font-primary);
  font-size: var(--mi-text-lg);
  font-weight: 700;
}
.mi-legal-cta-text {
  margin: 0;
  max-width: 48ch;
  color: var(--mi-muted);
  font-size: var(--mi-text-sm);
  line-height: 1.6;
}

/* ================================ FAQ ================================ */

.mi-faq-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mi-space-3);
  max-width: 88ch;
  margin-bottom: var(--mi-space-5);
}

.mi-faq-search {
  position: relative;
  flex: 1;
  min-width: min(100%, 280px);
}
.mi-faq-search input {
  width: 100%;
  height: 46px;
  padding: 0 16px 0 44px;
  background: #fff;
  border: 1px solid var(--mi-line-strong);
  border-radius: var(--mi-radius-pill);
  color: var(--mi-title);
  font: inherit;
  transition: border-color var(--mi-transition), box-shadow var(--mi-transition);
}
.mi-faq-search input::placeholder { color: var(--mi-faint); }
.mi-faq-search input:focus {
  outline: none;
  border-color: var(--mi-brand);
  box-shadow: 0 0 0 4px rgb(67 86 232 / 0.12);
}
.mi-faq-search svg {
  position: absolute;
  top: 50%;
  left: 15px;
  translate: 0 -50%;
  color: var(--mi-faint);
  pointer-events: none;
}

.mi-faq-toggle {
  height: 46px;
  padding: 0 18px;
  background: #fff;
  border: 1px solid var(--mi-line-strong);
  border-radius: var(--mi-radius-pill);
  color: var(--mi-title);
  font-family: var(--font-primary);
  font-size: var(--mi-text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--mi-transition), color var(--mi-transition);
}
.mi-faq-toggle:hover { border-color: var(--mi-brand); color: var(--mi-brand); }

/* Spoken to a screen reader, never shown: the count changes as the reader types. */
.mi-faq-count {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.mi-faq-empty {
  max-width: 88ch;
  padding: var(--mi-space-6);
  background: #fff;
  border: 1px dashed var(--mi-line-strong);
  border-radius: var(--mi-radius-lg);
  color: var(--mi-muted);
  text-align: center;
}

/* ---- the accordion ----

   <details>/<summary> as it already was, restyled. The open state is the browser's,
   so the whole thing still works with JavaScript blocked. */

.mi-faq--rich { gap: var(--mi-space-3); }

.mi-faq--rich .mi-faq-item {
  padding: 0;
  background: #fff;
  border: 1px solid var(--mi-line);
  border-radius: var(--mi-radius);
  box-shadow: var(--mi-shadow-sm);
  transition: border-color var(--mi-transition), box-shadow var(--mi-transition);
}
.mi-faq--rich .mi-faq-item:hover { border-color: rgb(67 86 232 / 0.25); }
.mi-faq--rich .mi-faq-item[open] {
  border-color: rgb(67 86 232 / 0.30);
  box-shadow: var(--mi-shadow);
}

/* Layout and the +/- marker both stay with site.css's .mi-faq-q — this only adjusts the
   type and spacing. An earlier draft added its own marker span here and the card ended up
   with TWO plus signs, because the base rule already draws one in ::after. */
.mi-faq--rich .mi-faq-q {
  padding: 18px 20px;
  font-size: var(--mi-text-base);
  line-height: 1.5;
}
.mi-faq--rich .mi-faq-item[open] .mi-faq-q { color: var(--mi-brand); }

.mi-faq--rich .mi-faq-a {
  padding: 0 20px 18px;
  color: var(--mi-body);
  line-height: 1.7;
}
.mi-faq--rich .mi-faq-a p { margin: 0; }
.mi-faq--rich .mi-faq-a::before {
  content: "";
  display: block;
  height: 1px;
  margin-bottom: 14px;
  background: var(--mi-line);
}

@media (prefers-reduced-motion: reduce) {
  .mi-legal-links a:hover { transform: none; }
  .mi-faq--rich .mi-faq-item { transition: none; }
}

/* ================================ print ================================

   A policy is the one thing on this site people actually print or save as PDF.
   Drop the chrome and let the copy run full width. */

@media print {
  .mi-legal-rail,
  .mi-legal-cta,
  .mi-legal-anchor,
  .mi-faq-bar { display: none; }

  .mi-legal-grid { grid-template-columns: minmax(0, 1fr); }
  .mi-legal-main { max-width: none; }
  .mi-legal-block { break-inside: avoid; }
  .mi-legal-links a { border-color: #999; box-shadow: none; }
  .mi-faq--rich .mi-faq-item { box-shadow: none; border-color: #999; break-inside: avoid; }
}

/* The FAQ page has no contents rail, so its closing block follows the list measure. */
.mi-legal-cta--faq { max-width: 88ch; }

/* Lead with no sections after it: no trailing rule (see _LegalPage.cshtml). */
.mi-legal-lead--only { padding-bottom: 0; border-bottom: 0; }