/* caredmeds.com. Tokens are the light set of design/tokens.json (direction C, "Arc"). Light mode only. */

@font-face { font-family: "Heebo"; font-weight: 400; font-style: normal; font-display: swap; src: url("/fonts/heebo-400.woff2") format("woff2"); }
@font-face { font-family: "Heebo"; font-weight: 500; font-style: normal; font-display: swap; src: url("/fonts/heebo-500.woff2") format("woff2"); }
@font-face { font-family: "Heebo"; font-weight: 600; font-style: normal; font-display: swap; src: url("/fonts/heebo-600.woff2") format("woff2"); }
@font-face { font-family: "Heebo"; font-weight: 700; font-style: normal; font-display: swap; src: url("/fonts/heebo-700.woff2") format("woff2"); }

:root {
  color-scheme: light;

  /* color, from tokens.json light */
  --bg: #EAF0F2;
  --surface: #FFFFFF;
  --text: #12212A;
  --text-soft: #476069;
  --line: #C6D3D9;
  --line-strong: #6B8590;
  --primary: #12212A;
  --primary-text: #F3EEE3;
  --primary-soft: #D5E2E7;
  --success: #14694A;
  --warn: #9A3412;
  --warn-soft: #FBE3D6;
  --arc-track: #C6D3D9;

  /* space, the app scale plus two larger steps */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;

  /* radius */
  --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-sheet: 32px; --r-pill: 999px;

  /* type, web scale derived from the app tokens (caption 15, label 17, body 19, rowTitle 25, headline 34) */
  --t-caption: 0.9375rem;
  --t-label: 1rem;
  --t-body: 1.125rem;
  --t-h3: 1.1875rem;
  --t-h2: 1.375rem;
  --t-h1: 1.875rem;

  --lh-body: 1.7;
  --measure: 68ch;
  --gutter: var(--s5);
  --focus: 0 0 0 2px var(--surface), 0 0 0 5px var(--line-strong);
}
:lang(he) { --lh-body: 1.8; }

@media (min-width: 768px) {
  :root { --t-body: 1.1875rem; --t-h1: 2.125rem; --t-h2: 1.5625rem; --gutter: var(--s6); }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Heebo", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  font-size: var(--t-body);
  line-height: var(--lh-body);
  font-weight: 400;
  overflow-x: clip;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--r-sm); }

/* ---------------------------------------------------------------- header */

.top {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--s4) var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s3);
  min-height: 44px;
  text-decoration: none;
  font-weight: 600;
  font-size: 1.125rem;
  letter-spacing: -0.005em;
}
.brand img { width: 40px; height: 40px; border-radius: 10px; }
.brand.small { font-size: var(--t-label); gap: var(--s2); }
.brand.small img { width: 28px; height: 28px; border-radius: 7px; }

.langs {
  list-style: none;
  margin: 0;
  padding: 3px;
  display: flex;
  gap: 2px;
  border: 2px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
}
.langs a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  min-width: 44px;
  padding: 0 var(--s3);
  border-radius: var(--r-pill);
  font-size: var(--t-caption);
  font-weight: 500;
  text-decoration: none;
  color: var(--text-soft);
  transition: background-color 150ms ease, color 150ms ease;
}
.langs a:hover { color: var(--text); background: var(--bg); }
.langs a[aria-current] { background: var(--primary); color: var(--primary-text); font-weight: 600; }
.langs a:focus-visible { box-shadow: 0 0 0 3px var(--line-strong); border-radius: var(--r-pill); }
@media (max-width: 440px) {
  :root { --gutter: 20px; }
  .top { gap: var(--s2); }
  .brand { gap: var(--s2); }
  .brand img { width: 36px; height: 36px; border-radius: 9px; }
  .brand span { font-size: 1rem; }
  .langs a { padding: 0 9px; }
}
@media (max-width: 350px) {
  .brand span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}

/* ---------------------------------------------------------------- home */

.home {
  flex: 1;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: var(--s6) var(--gutter) var(--s8);
}
.hero { text-align: center; }
.hero .arc { width: min(100%, 300px); height: auto; margin: 0 auto var(--s4); }
.hero h1 {
  margin: 0;
  font-size: clamp(2.5rem, 9vw, 3.5rem);
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.lede {
  margin: var(--s4) auto 0;
  max-width: 36ch;
  font-size: 1.25rem;
  line-height: 1.55;
  color: var(--text-soft);
  text-wrap: balance;
}
:lang(he) .lede { line-height: 1.7; }

.doc-list {
  list-style: none;
  margin: var(--s7) 0 0;
  padding: 0 var(--s5);
  background: var(--surface);
  border-radius: var(--r-lg);
}
.doc-list li + li { border-top: 1.5px solid var(--line); }
.doc-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  min-height: 72px;
  padding: var(--s4) 0;
  text-decoration: none;
  font-weight: 600;
  font-size: 1.1875rem;
  line-height: 1.4;
}
.doc-list a:hover span { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 0.25em; }
.doc-list a:focus-visible { box-shadow: 0 0 0 3px var(--line-strong); border-radius: var(--r-md); margin: 0 calc(var(--s3) * -1); padding-inline: var(--s3); }
.chev { flex: none; width: 22px; height: 22px; color: var(--line-strong); }
[dir="rtl"] .chev { transform: scaleX(-1); }

/* ---------------------------------------------------------------- document */

.doc-wrap {
  flex: 1;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--s2) 0 0;
}
.sheet {
  background: var(--surface);
  border-radius: var(--r-sheet) var(--r-sheet) 0 0;
  padding: var(--s6) var(--gutter) var(--s7);
  min-width: 0;
}
.toc { display: none; }

@media (min-width: 768px) {
  .doc-wrap { padding: var(--s4) var(--gutter) var(--s7); }
  .sheet { border-radius: var(--r-sheet); padding: var(--s7) var(--s8) var(--s8); max-width: 880px; margin: 0 auto; }
}
@media (min-width: 1120px) {
  .doc-wrap.has-toc {
    display: grid;
    grid-template-columns: 260px minmax(0, 880px);
    gap: var(--s7);
    justify-content: center;
    align-items: start;
  }
  .has-toc .sheet { margin: 0; }
  .toc {
    display: block;
    position: sticky;
    top: var(--s5);
    max-height: calc(100vh - var(--s7));
    overflow-y: auto;
    padding-top: var(--s7);
  }
  .toc ol { list-style: none; margin: 0; padding: 0; border-inline-start: 1.5px solid var(--line); }
  .toc a {
    display: block;
    padding: 6px var(--s4);
    margin-inline-start: -1.5px;
    border-inline-start: 1.5px solid transparent;
    font-size: var(--t-caption);
    line-height: 1.45;
    color: var(--text-soft);
    text-decoration: none;
    transition: color 150ms ease, border-color 150ms ease;
  }
  .toc a:hover { color: var(--text); border-inline-start-color: var(--text); }
}

.prose { max-width: var(--measure); margin: 0 auto; overflow-wrap: break-word; }
.prose > * + * { margin-top: var(--s4); }
.prose h1 {
  margin: 0 0 var(--s5);
  font-size: var(--t-h1);
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
:lang(he) .prose h1 { line-height: 1.35; letter-spacing: 0; }
.prose h2 {
  margin: var(--s7) 0 0;
  padding-top: var(--s5);
  border-top: 1.5px solid var(--line);
  font-size: var(--t-h2);
  line-height: 1.35;
  font-weight: 600;
  scroll-margin-top: var(--s5);
}
.prose h3 {
  margin: var(--s6) 0 0;
  font-size: var(--t-h3);
  line-height: 1.45;
  font-weight: 600;
}
.prose h2 + *, .prose h3 + * { margin-top: var(--s3); }
.prose p { margin: var(--s4) 0 0; }
.prose h1 + p { margin-top: 0; color: var(--text-soft); font-size: var(--t-label); }
.prose h1 + p strong { color: var(--text); font-weight: 500; }
.prose strong { font-weight: 600; }

.prose a {
  color: var(--text);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 0.22em;
  transition: text-decoration-color 150ms ease;
}
.prose a:hover { text-decoration-color: var(--text); }
.prose a.u { overflow-wrap: anywhere; unicode-bidi: isolate; }

/* lists: the app's status shapes, a ring for bullets */
.prose ul, .prose ol { margin: var(--s3) 0 0; padding: 0; list-style: none; }
.prose li { position: relative; padding-inline-start: var(--s6); }
.prose li + li { margin-top: var(--s2); }
.prose ul > li::before {
  content: "";
  position: absolute;
  inset-inline-start: 6px;
  top: calc(var(--lh-body) * 0.5em - 5px);
  width: 10px;
  height: 10px;
  border: 2px solid var(--line-strong);
  border-radius: 50%;
}
.prose ol { counter-reset: step; }
.prose ol > li { counter-increment: step; }
.prose ol > li::before {
  content: counter(step);
  position: absolute;
  inset-inline-start: 0;
  top: calc(var(--lh-body) * 0.5em - 12px);
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--text);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.prose li > ul { margin-top: var(--s2); }

/* a paragraph that is bold in full: the medical disclaimer and the like */
.prose p.note {
  padding: var(--s4) var(--s5);
  background: var(--bg);
  border-inline-start: 4px solid var(--primary);
  border-radius: var(--r-sm);
}

/* fields to fill and open legal points: easy to spot, impossible to miss */
mark { unicode-bidi: isolate; color: inherit; background: none; }
mark.fill {
  background: var(--warn-soft);
  color: var(--warn);
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 6px;
  box-shadow: inset 0 0 0 1.5px var(--warn);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
mark.legal {
  background: var(--primary-soft);
  box-shadow: inset 0 0 0 1.5px var(--line-strong);
  color: var(--text);
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 6px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}


/* tables: real table from 760px, stacked records below */
.table { margin-top: var(--s5); }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--t-label); line-height: 1.6; font-variant-numeric: tabular-nums; }
.prose thead th {
  text-align: start;
  vertical-align: bottom;
  font-size: var(--t-caption);
  font-weight: 500;
  color: var(--text-soft);
  padding: 0 var(--s3) var(--s3);
  border-bottom: 2px solid var(--text);
}
.prose tbody th, .prose tbody td {
  text-align: start;
  vertical-align: top;
  padding: var(--s3);
  border-bottom: 1.5px solid var(--line);
}
.prose tbody th { font-weight: 600; }
.prose thead th:first-child, .prose tbody th { padding-inline-start: 0; }
.prose thead th:last-child, .prose tbody td:last-child { padding-inline-end: 0; }

@media (min-width: 760px) {
  .doc-privacy .table { margin-inline: calc(var(--s6) * -1); }
  .doc-privacy .prose table { font-size: var(--t-caption); }
}
@media (min-width: 1120px) {
  .doc-privacy .table { margin-inline: calc(var(--s7) * -1); }
}

@media (max-width: 759px) {
  .prose table, .prose tbody, .prose tr, .prose tbody th, .prose tbody td { display: block; width: 100%; }
  .prose thead, .prose thead tr, .prose thead th { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .prose tbody tr {
    padding: var(--s4) 0;
    border-top: 1.5px solid var(--line);
  }
  .prose tbody tr:last-child { border-bottom: 1.5px solid var(--line); }
  .prose tbody th, .prose tbody td { padding: 0; border: 0; }
  .prose tbody th { font-size: var(--t-body); line-height: 1.5; margin-bottom: var(--s2); }
  .prose tbody td { display: grid; grid-template-columns: 1fr; gap: 0; margin-top: var(--s3); }
  .prose tbody td::before {
    content: attr(data-label);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-soft);
    line-height: 1.5;
  }
}

/* ---------------------------------------------------------------- footer */

.foot {
  background: var(--surface);
  border-top: 1.5px solid var(--line);
}
.home-page .foot { background: transparent; }
.foot-in {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--s6) var(--gutter) var(--s7);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4) var(--s6);
}
.foot-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1) var(--s5);
}
.foot-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--t-caption);
  color: var(--text-soft);
  text-decoration: none;
}
.foot-links a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 0.25em; }
@media (max-width: 767px) {
  .foot-in { flex-direction: column; align-items: flex-start; }
  .foot-links { flex-direction: column; gap: 0; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}
@media print {
  .top, .foot, .toc { display: none; }
  body { background: #fff; }
  .sheet { padding: 0; }
}