/* /ethical-practices-and-security: the Ethical Practices and Security Mandate.

   Everything else on the page is the site's own (hero, checklist tile, cards,
   dark band, FAQ, closing banner). What lives here is the page's one device,
   the numbered clauses, plus the in-page index, the example-day card and the
   summary panel. Only site tokens are used, so a palette change in site.css
   carries through. */

/* --- hero: the in-page index ---------------------------------------------- */

.ep-index {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: clamp(36px, 5vw, 56px);
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.ep-index-k {
  flex: none;
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.ep-index ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
}
.ep-index a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 0 16px 0 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.94rem;
  color: var(--ink);
  text-decoration: none;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.ep-index a span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--tile-aqua);
  font-size: 0.82rem;
  font-weight: 600;
}
.ep-index a:hover { border-color: #c9d7e1; background: var(--bg-wash); }
.ep-index a:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }

/* --- the parts: heading left, clauses right ------------------------------- */

.ep-part {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(32px, 6vw, 88px);
  align-items: start;
}
.ep-part-head { position: sticky; top: 96px; }
.ep-part-head .section-head { margin-bottom: 0; }

.ep-clauses {
  list-style: none;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
}
.ep-clause {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 4px 16px;
  padding: 24px 28px 26px;
}
.ep-clause + .ep-clause { border-top: 1px solid var(--line); }
.ep-clause-n {
  padding-top: 3px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
  color: var(--action-deep);
}
.ep-clause h3 { font-size: 1.15rem; margin-bottom: 6px; }
.ep-clause p { font-size: 0.97rem; line-height: 1.6; }

/* --- the example day ------------------------------------------------------ */

.ep-day { margin-top: 36px; padding: 28px; }
.ep-day-card { position: relative; z-index: 1; padding: 20px 22px 10px; }
.ep-day-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ep-day-head .ui-card-label { margin: 0; }
.ep-day-eg {
  flex: none;
  font-size: 0.72rem;
  color: var(--ink-faint);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 9px;
}
.ep-day-rows { list-style: none; margin-top: 10px; }
.ep-day-row {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  font-size: 0.9rem;
}
.ep-day-row + .ep-day-row { border-top: 1px dashed var(--line); }
.ep-day-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--action); }
.ep-day-row.is-track .ep-day-dot { background: var(--tertiary); }
.ep-day-row.is-next .ep-day-dot { background: transparent; box-shadow: inset 0 0 0 2px #b7c4cf; }
.ep-day-k { color: var(--ink-soft); }
.ep-day-v {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--ink);
  text-align: right;
}

/* --- summary on the navy band --------------------------------------------- */

.ep-glance {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 30px 56px -32px rgba(9, 17, 26, 0.6);
}
.ep-glance-col { padding: 32px 30px 34px; }
.ep-glance-col + .ep-glance-col { border-left: 1px solid var(--line); }
.ep-glance-k {
  margin-bottom: 18px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--ink);
}
.ep-glance-list { grid-template-columns: 1fr; gap: 12px; }
.ep-glance-list li { font-size: 0.95rem; }

.ep-faq-more { margin-top: 18px; font-size: 0.92rem; color: var(--ink-faint); }

/* --- tablet --------------------------------------------------------------- */

@media (max-width: 1023px) {
  .ep-part { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .ep-part-head { position: static; }
  .ep-day { max-width: 560px; }
  .ep-glance { grid-template-columns: minmax(0, 1fr); }
  .ep-glance-col + .ep-glance-col { border-left: 0; border-top: 1px solid var(--line); }
}

/* --- phone ---------------------------------------------------------------- */

@media (max-width: 767px) {
  .ep-index { flex-direction: column; align-items: flex-start; gap: 12px; }
  .ep-clause { grid-template-columns: 40px minmax(0, 1fr); gap: 4px 10px; padding: 20px 18px 22px; }
  .ep-clause h3 { font-size: 1.05rem; }
  .ep-day { margin-top: 28px; padding: 16px; }
  .ep-day-card { padding: 16px 16px 6px; }
  .ep-glance-col { padding: 24px 22px 26px; }
}