@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("fonts/atkinson-next.woff") format("woff");
  font-weight: 200 800;
  font-display: swap;
}

/* The app's DLColor tokens, on cobalt. */
:root {
  color-scheme: light dark;
  --canvas: #F4F4F6;
  --surface: #FFFFFF;
  --fill: #EBECF0;
  --line: #DDDEE5;
  --ink: #1A1B22;
  --ink-muted: #5C5E6B;
  --brand: #1D5FA8;
  --brand-soft: #E1ECF7;
  --brand-pale: #C9DBEF;
  --on-brand: #FFFFFF;
  --radius: 22px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --canvas: #111216;
    --surface: #1B1C21;
    --fill: #292A31;
    --line: #33353D;
    --ink: #ECECF0;
    --ink-muted: #A7A8B4;
    --brand: #8DBBF0;
    --brand-soft: #17304D;
    --brand-pale: #264566;
    --on-brand: #111216;
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: "Atkinson Hyperlegible Next", -apple-system, system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.55;
}

a { color: var(--brand); text-underline-offset: 3px; overflow-wrap: anywhere; }

.wrap { max-width: 680px; margin: 0 auto; padding: 0 16px; }

header.site { padding: 20px 0 8px; }
header.site .wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-weight: 700; font-size: 18px; }
.brand img { width: 28px; height: 28px; border-radius: 7px; }
nav.top { display: flex; gap: 16px; font-size: 15px; }
nav.top a { color: var(--ink-muted); text-decoration: none; }
nav.top a:hover { color: var(--brand); }

main { padding: 16px 0 40px; }

h1 { font-size: 34px; line-height: 1.15; margin: 16px 0 12px; letter-spacing: -0.01em; }
h2 { font-size: 22px; line-height: 1.25; margin: 32px 0 8px; }
h3 { font-size: 18px; margin: 20px 0 4px; }
p, ul { margin: 0 0 12px; }
ul { padding-left: 22px; }
li { margin-bottom: 6px; }
.lead { font-size: 19px; color: var(--ink-muted); }
.muted { color: var(--ink-muted); }
.small { font-size: 14px; }

.card {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 20px;
  margin: 16px 0;
}

.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 0 24px;
  border-radius: 999px;
  background: var(--brand); color: var(--on-brand);
  font-weight: 700; text-decoration: none;
  border: 0; font-family: inherit; font-size: 17px; cursor: pointer;
}
.button.quiet { background: var(--brand-soft); color: var(--brand); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 20px 0; }

/* Landing page */
.wrap.wide { max-width: 1040px; }
.sprite { position: absolute; }
svg use { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.hero { text-align: center; padding-top: 16px; }
.hero h1 { max-width: 760px; margin: 16px auto 12px; }
.hero .lead { max-width: 560px; margin: 0 auto 20px; }
.store { display: inline-block; line-height: 0; }
.store img { height: 52px; width: auto; }
.hero .small { margin-top: 10px; }
/* Hero: four iPhones with the app's real screens take turns in the middle, 6s each. The side ones sit far
   apart, small and faded. The one in the middle plays its moment, a tap on its button, while its
   explanation shows underneath. Each phone's parts share its --d delay, so each plays its moment when
   it reaches the middle. Individual translate/scale properties keep animations off each other. */
.stage { position: relative; height: 650px; max-width: 760px; margin: 28px auto 0; overflow: hidden; }
.phone { position: absolute; left: 50%; top: 10px; width: 250px; margin-left: -125px; padding: 8px; background: #1A1B22; border-radius: 46px; box-shadow: 0 24px 60px rgba(18, 28, 70, 0.22); animation: turn 24s cubic-bezier(0.65, 0, 0.35, 1) var(--d) infinite both; }
.phone:nth-child(1), .caption:nth-child(1) { --d: 0s; }
.phone:nth-child(2), .caption:nth-child(2) { --d: -18s; }
.phone:nth-child(3), .caption:nth-child(3) { --d: -12s; }
.phone:nth-child(4), .caption:nth-child(4) { --d: -6s; }
.phone * { animation-delay: var(--d) !important; }
.screen { position: relative; aspect-ratio: 1320 / 2868; overflow: hidden; border-radius: 38px; background: #000; font-size: 9px; text-align: left; }
.screen > img { position: absolute; inset: 0; width: 100%; height: 100%; }
@keyframes turn {
  0%, 23% { translate: 0 0; scale: 1; opacity: 1; z-index: 3; filter: none; }
  25%, 48% { translate: -112% 7%; scale: 0.72; opacity: 0.22; z-index: 1; filter: saturate(0.3) blur(1px); }
  50% { translate: -150% 7%; scale: 0.65; opacity: 0; z-index: 1; filter: saturate(0.3) blur(1px); }
  51%, 73% { translate: 150% 7%; scale: 0.65; opacity: 0; z-index: 1; filter: saturate(0.3) blur(1px); }
  75%, 98% { translate: 112% 7%; scale: 0.72; opacity: 0.22; z-index: 2; filter: saturate(0.3) blur(1px); }
  100% { translate: 0 0; scale: 1; opacity: 1; z-index: 3; filter: none; }
}

/* Lock Screen phone: a reminder slides down and opens to its actions, laid out the way iOS shows them,
   Taken is tapped, and the Home Screen widget goes from 5 of 8 to 6 of 8. */
.screen > img.home { opacity: 0; animation: home 24s ease-in-out infinite; }
@keyframes home { 0%, 15% { opacity: 0; } 16.5%, 73% { opacity: 1; } 74%, 100% { opacity: 0; } }
.banner { position: absolute; left: 4%; right: 4%; top: 33%; z-index: 2; animation: banner 24s cubic-bezier(0.3, 0.9, 0.3, 1) infinite both; }
@keyframes banner { 0%, 1.5% { translate: 0 -260%; opacity: 0; } 4%, 13% { translate: 0 0; opacity: 1; } 15.5%, 100% { translate: 0 -260%; opacity: 0; } }
.note, .acts { background: rgba(246, 246, 248, 0.86); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); color: #1A1B22; }
.note { display: flex; gap: 0.9em; align-items: center; padding: 1.1em 1.2em; border-radius: 2.2em; }
.note img { width: 3.6em; height: 3.6em; border-radius: 0.85em; flex: none; }
.note p { flex: 1; min-width: 0; margin: 0; font-size: 1.3em; line-height: 1.3; }
.note b { display: flex; justify-content: space-between; }
.note small { font-weight: 400; color: #6B6D78; font-size: 0.85em; }
.acts { margin-top: 0.8em; border-radius: 1.8em; overflow: hidden; transform-origin: top center; animation: acts 24s ease-in-out infinite both; }
@keyframes acts { 0%, 5.5% { opacity: 0; scale: 0.9; translate: 0 -1em; } 7.5%, 100% { opacity: 1; scale: 1; translate: 0 0; } }
.acts span { display: flex; align-items: center; justify-content: space-between; padding: 1em 1.4em; font-size: 1.4em; border-top: 1px solid rgba(26, 27, 34, 0.12); }
.acts span:first-child { border-top: 0; font-weight: 700; color: #1D5FA8; animation: hit 24s ease-in-out infinite; }
.acts svg { width: 1.2em; height: 1.2em; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
@keyframes hit { 0%, 10.5% { background: transparent; } 11.2%, 12.5% { background: rgba(29, 95, 168, 0.16); } 13.5%, 100% { background: transparent; } }
.tap { position: absolute; z-index: 3; width: 4.4em; height: 4.4em; margin: -2.2em 0 0 -2.2em; border-radius: 50%; background: rgba(29, 95, 168, 0.28); box-shadow: 0 0 0 0.3em rgba(29, 95, 168, 0.18); opacity: 0; animation: tap 24s ease-in-out infinite both; }
.tap-taken { left: 30%; top: 50%; background: rgba(255, 255, 255, 0.55); box-shadow: 0 0 0 0.3em rgba(255, 255, 255, 0.35); }
.tap-day { left: 50%; top: 41.4%; }
.tap-range { left: 50%; top: 19.9%; }
.tap-use { left: 84%; top: 91.4%; }
@keyframes tap { 0%, 9.2% { opacity: 0; scale: 1.3; } 10.3% { opacity: 1; scale: 1; } 11.3% { opacity: 1; scale: 0.8; } 12.6%, 100% { opacity: 0; scale: 1.2; } }
.count { position: absolute; z-index: 2; left: 9.5%; top: 11.6%; width: 25%; height: 3.6%; background: #FFFFFF; color: #1A1B22; font-weight: 700; font-size: 1.55em; line-height: 1; display: grid; align-items: center; opacity: 0; animation: count 24s ease-in-out infinite; }
.count span { grid-area: 1 / 1; }
.count span:first-child { animation: before 24s step-end infinite; }
.count span + span { opacity: 0; animation: after 24s step-end infinite; }
@keyframes count { 0%, 15% { opacity: 0; } 16.5%, 73% { opacity: 1; } 74%, 100% { opacity: 0; } }
@keyframes before { 0% { opacity: 1; } 19% { opacity: 0; } 74% { opacity: 1; } }
@keyframes after { 0% { opacity: 0; } 19% { opacity: 1; } 74% { opacity: 0; } }
.count-bar { position: absolute; z-index: 2; left: 10.5%; top: 17.3%; height: 0.45%; width: 18.5%; border-radius: 1em; background: #1D5FA8; opacity: 0; animation: count-bar 24s ease-in-out infinite; }
@keyframes count-bar { 0%, 15% { opacity: 0; width: 18.5%; } 16.5%, 18.5% { opacity: 1; width: 18.5%; } 20.5%, 73% { opacity: 1; width: 21.5%; } 74%, 100% { opacity: 0; width: 18.5%; } }
.pop { position: absolute; z-index: 3; left: 21%; top: 13%; width: 3em; height: 3em; margin: -1.5em 0 0 -1.5em; border-radius: 50%; border: 0.3em solid #1D5FA8; opacity: 0; animation: pop 24s ease-out infinite; }
@keyframes pop { 0%, 18.6% { opacity: 0; scale: 0.5; } 19.4% { opacity: 1; scale: 1; } 22%, 100% { opacity: 0; scale: 3; } }

/* Stock phone: Refill is tapped, 5 left becomes 35 left and "Running low" goes. */
.patch { position: absolute; z-index: 2; background: #FFFFFF; color: #1A1B22; display: flex; align-items: center; opacity: 0; animation: refill 24s step-end infinite; }
.patch-left { left: 6.5%; top: 29.7%; width: 22%; height: 3%; font-size: 1.45em; font-weight: 700; }
.patch-low { left: 6.5%; top: 34.2%; width: 62%; height: 5.4%; font-size: 1.15em; line-height: 1.6; color: #5C5E6B; flex-direction: column; align-items: flex-start; justify-content: center; white-space: nowrap; }
@keyframes refill { 0% { opacity: 0; } 11.3% { opacity: 1; } 74% { opacity: 0; } }

.captions { position: absolute; left: 0; right: 0; bottom: 0; display: grid; justify-items: center; padding: 0 16px; }
.caption { grid-area: 1 / 1; max-width: 420px; margin: 0; opacity: 0; animation: caption 24s ease-in-out var(--d) infinite both; }
.caption b { display: block; font-size: 22px; line-height: 1.25; }
.caption span { display: block; color: var(--ink-muted); font-size: 16px; margin-top: 4px; }
@keyframes caption { 0% { opacity: 0; translate: 0 10px; } 3%, 21% { opacity: 1; translate: 0 0; } 24%, 100% { opacity: 0; translate: 0 10px; } }

/* Reduce Motion: the Lock Screen phone alone, its reminder open, with its explanation. */
@media (prefers-reduced-motion: reduce) {
  .stage, .stage * { animation: none !important; }
  .phone:not(:first-child) { display: none; }
  .caption:first-child { opacity: 1; }
}

.kinds ul { list-style: none; padding: 0; margin: 32px 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.kinds li { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 8px 14px; border-radius: 999px; background: var(--brand-soft); color: var(--ink); font-size: 15px; }
.kinds svg { width: 20px; height: 20px; color: var(--brand); }

#features h2, #faq h2, .cta h2 { font-size: 28px; text-align: center; margin: 56px 0 20px; }
/* Spotlights: text beside a drawing, alternating sides on wide screens. */
.spot { display: grid; gap: 20px; background: var(--surface); border-radius: var(--radius); padding: 24px; margin-bottom: 12px; }
.spot h3 { font-size: 22px; line-height: 1.25; margin: 0 0 8px; }
.spot-text > p { color: var(--ink-muted); margin: 0 0 12px; }
.eyebrow { color: var(--brand) !important; font-weight: 700; font-size: 14px; margin: 0 0 4px !important; }
.checks { list-style: none; padding: 0; margin: 0; }
.checks li { position: relative; padding-left: 28px; margin: 0 0 6px; font-size: 16px; }
.checks li::before { content: ""; position: absolute; left: 2px; top: 6px; width: 12px; height: 6px; border-left: 2px solid var(--brand); border-bottom: 2px solid var(--brand); transform: rotate(-45deg); }
.spot-art { position: relative; min-height: 240px; border-radius: 18px; background: var(--brand-soft); display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 20px; }

.art-lock { background: #2B2440; flex-direction: column; }
.lock-time { color: #FFFFFF; font-size: 56px; font-weight: 700; line-height: 1; margin-bottom: 16px; letter-spacing: -0.02em; }
.alert-card { width: 100%; max-width: 280px; background: rgba(255, 255, 255, 0.92); color: #1A1B22; border-radius: 18px; padding: 12px 14px; }
.alert-card p { margin: 0; }
.alert-app { font-size: 12px; color: #5C5E6B; text-transform: uppercase; letter-spacing: 0.02em; }
.alert-title { font-weight: 700; font-size: 16px; }
.alert-sub { font-size: 14px; color: #5C5E6B; }
.alert-acts { display: flex; gap: 6px; margin-top: 10px; }
.alert-acts span { flex: 1; text-align: center; font-size: 14px; padding: 6px 0; border-radius: 10px; background: #FFFFFF; border: 1px solid #DDDEE5; }
.alert-acts span:first-child { background: #1D5FA8; border-color: #1D5FA8; color: #FFFFFF; font-weight: 700; }

.paper { width: 210px; background: #FFFFFF; color: #1A1B22; border-radius: 4px; padding: 16px; transform: rotate(-3deg); border: 1px solid #DDDEE5; font-size: 10px; line-height: 1.35; }
.paper p { margin: 0; }
.paper-name { font-size: 18px; font-weight: 700; }
.paper-sub { color: #5C5E6B; margin-bottom: 6px !important; }
.paper-h { font-weight: 700; font-size: 11px; border-bottom: 1px solid #1D5FA8; margin: 8px 0 4px !important; }
.paper-med b { display: block; }
.paper-med { color: #5C5E6B; margin-bottom: 3px !important; }
.paper-row { display: flex; justify-content: space-between; gap: 8px; }
.paper-row span:last-child { color: #5C5E6B; }
.art-report { flex-direction: column; gap: 20px; }
.formats { display: flex; gap: 8px; }
.formats span { background: var(--brand); color: var(--on-brand); border-radius: 999px; font-size: 13px; font-weight: 700; padding: 3px 12px; text-align: center; }

.art-body svg { flex: none; width: min(100%, 360px); height: auto; aspect-ratio: 200 / 140; }
.art-body .body { fill: var(--brand-pale); }
.art-body .site { fill: var(--surface); }
.art-body .site-last { fill: var(--ink-muted); }
.art-body text { font-size: 7px; text-anchor: middle; fill: var(--ink); font-family: inherit; }
.art-body .site-last-text { fill: var(--surface); }

.art-siri { flex-direction: column; align-items: stretch; justify-content: center; gap: 8px; }
.bubble { margin: 0; max-width: 85%; padding: 8px 12px; border-radius: 16px; font-size: 15px; line-height: 1.35; }
.bubble.you { align-self: flex-end; background: var(--surface); color: var(--ink); border-bottom-right-radius: 4px; }
.bubble.siri { align-self: flex-start; background: var(--brand); color: var(--on-brand); border-bottom-left-radius: 4px; }

#features h2.more { font-size: 22px; margin: 40px 0 16px; }
.more-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.more-grid li { margin: 0; background: var(--surface); border-radius: 18px; padding: 16px; color: var(--ink-muted); font-size: 14px; line-height: 1.4; }
.more-grid b { display: block; color: var(--ink); font-size: 16px; margin: 8px 0 2px; }
.more-grid svg, .private > svg { width: 26px; height: 26px; color: var(--brand); }

.private { display: flex; gap: 16px; align-items: flex-start; margin-top: 12px; padding: 20px; border-radius: var(--radius); background: var(--brand-soft); }
.private h3 { margin: 0 0 4px; }
.private p { margin: 0; }
.private > svg { flex: none; }

#faq details { background: var(--surface); border-radius: 16px; padding: 0 20px; margin-bottom: 8px; }
#faq summary { cursor: pointer; font-weight: 700; padding: 16px 0; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
#faq summary::-webkit-details-marker { display: none; }
#faq summary::after { content: "+"; color: var(--brand); font-weight: 400; font-size: 22px; line-height: 1; }
#faq details[open] summary::after { content: "–"; }
#faq details p { color: var(--ink-muted); padding-bottom: 16px; margin: 0; }

.cta { text-align: center; padding-bottom: 24px; }

@media (max-width: 600px) {
  .stage { height: 540px; }
  .phone { width: 190px; margin-left: -95px; border-radius: 36px; padding: 6px; }
  .screen { border-radius: 30px; font-size: 6.8px; }
  .caption b { font-size: 19px; } .caption span { font-size: 15px; }
}

@media (max-width: 479px) {
  .spot { padding: 18px; }
  .spot h3 { font-size: 20px; }
  .spot-art { min-height: 220px; }
  .more-grid li { padding: 14px; }
  #features h2, #faq h2, .cta h2 { font-size: 24px; margin-top: 44px; }
}
.cta h2 { margin-bottom: 16px; }

/* Policy */
.policy h2 { font-size: 20px; }
.policy .updated { color: var(--ink-muted); }

footer.site { border-top: 1px solid var(--line); padding: 20px 0 32px; font-size: 14px; color: var(--ink-muted); }
footer.site nav { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 8px; }
footer.site a { color: var(--ink-muted); }

@media (min-width: 720px) {
  h1 { font-size: 44px; }
  header.site { padding-top: 28px; }
  .hero h1 { font-size: 52px; }
  .spot { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: center; padding: 32px; }
  .spot.flip .spot-text { order: 2; }
  .spot-art { min-height: 300px; }
  .more-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Analytics notice: shown only once a measurement ID is set, until the visitor answers. */
.consent { position: fixed; z-index: 10; left: 16px; right: 16px; bottom: 16px; max-width: 560px; margin: 0 auto; background: var(--surface); color: var(--ink); border-radius: var(--radius); padding: 16px 20px; box-shadow: 0 14px 34px rgba(18, 28, 70, 0.18), 0 2px 6px rgba(18, 28, 70, 0.1); font-size: 15px; }
.consent p { margin: 0 0 12px; }
.consent-buttons { display: flex; gap: 10px; }
.consent-buttons .button { flex: 1; min-height: 44px; font-size: 16px; }
.linkish { background: none; border: 0; padding: 0; font: inherit; color: var(--ink-muted); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.linkish[hidden] { display: none; }

/* Blog */
.crumb { font-size: 14px; color: var(--ink-muted); margin: 16px 0 0; }
.crumb a { color: var(--ink-muted); }
.post h1 { margin-top: 8px; }
.post-meta { font-size: 14px; color: var(--ink-muted); margin-bottom: 24px; }
.post-art { margin: 0 0 24px; }
.post-art figcaption { font-size: 14px; color: var(--ink-muted); text-align: center; margin-top: 8px; }
.post ol { padding-left: 22px; margin: 0 0 12px; }
.inapp h3 { margin-top: 0; }
.inapp .store { margin-top: 4px; }
.post-list { list-style: none; padding: 0; margin: 24px 0; display: grid; gap: 12px; }
.post-list a { display: grid; gap: 4px; background: var(--surface); border-radius: var(--radius); padding: 20px; color: var(--ink); text-decoration: none; border: 1px solid transparent; }
.post-list a:hover { border-color: var(--brand); }
.post-list strong { font-size: 19px; line-height: 1.3; }
.post-tag { font-size: 13px; font-weight: 700; color: var(--brand); }

/* Feature pages, /plus and /faq (built by website/build.py) */
.feature-cards { display: grid; gap: 12px; margin: 16px 0 24px; }
.feature-cards a { display: grid; gap: 4px; background: var(--surface); border-radius: var(--radius); padding: 18px 20px; color: var(--ink); text-decoration: none; border: 1px solid transparent; }
.feature-cards a:hover { border-color: var(--brand); }
.feature-cards strong { font-size: 18px; line-height: 1.3; }
.feature-cards .eyebrow { margin: 0; }
@media (min-width: 720px) { .feature-cards { grid-template-columns: 1fr 1fr; } }
.callout { background: var(--brand-soft); border-radius: 16px; padding: 14px 16px; }
.table-wrap { overflow-x: auto; margin: 12px 0 16px; }
table.plain { width: 100%; border-collapse: collapse; background: var(--surface); border-radius: 16px; overflow: hidden; font-size: 15px; }
table.plain th, table.plain td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.plain tr:last-child td { border-bottom: 0; }
table.plain th { font-weight: 700; }
.facts { background: var(--surface); border-radius: var(--radius); padding: 4px 20px 12px; margin: 32px 0 16px; }
.facts h2 { margin-top: 16px; }
.facts dl { margin: 0; }
.facts dl > div { padding: 8px 0; border-top: 1px solid var(--line); }
.facts dt { font-weight: 700; }
.facts dd { margin: 2px 0 0; color: var(--ink-muted); }
.related { padding-left: 22px; }
.more-link-wrap { text-align: center; margin: 8px 0 24px; }
.more-link { font-weight: 700; color: var(--brand); }
.brand, nav.top a { white-space: nowrap; }
@media (max-width: 479px) { nav.top { gap: 12px; font-size: 14px; } .brand { font-size: 17px; gap: 8px; } }

/* Wallet medicine card (/wallet-medication-card, wallet-card.js). Each panel is a bank card, 85.6 x 54 mm. */
.wc-out { margin: 24px 0; }
.wc-help, .wc-note { font-size: 14px; color: var(--ink-muted); }
.wc-card { display: flex; width: 171.2mm; max-width: 100%; height: 54mm; margin: 12px 0; border: 1px solid #1A1B22; background: #FFFFFF; color: #1A1B22; overflow: hidden; }
.wc-panel { flex: 1 1 50%; min-width: 0; padding: 2.6mm 3mm; font-size: 8pt; line-height: 1.25; overflow: hidden; }
.wc-panel + .wc-panel { border-left: 1px dashed #5C5E6B; }
.wc-out .wc-card p, .wc-out .wc-card li, .wc-out .wc-card ul { font-size: inherit; line-height: inherit; max-width: none; }
.wc-card .wc-panel p { margin: 0 0 0.8mm; }
.wc-card .wc-title { font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #1D5FA8; font-size: 6.6pt; }
.wc-card .wc-name { font-weight: 700; font-size: 9.5pt; }
.wc-line b { font-weight: 700; }
.wc-card .wc-date { color: #5C5E6B; font-size: 6.4pt; margin-top: 1mm !important; }
.wc-card .wc-meds { list-style: none; margin: 0; padding: 0; }
.wc-card .wc-meds li { margin: 0 0 0.9mm; padding: 0; display: flex; flex-wrap: wrap; gap: 0 1.6mm; }
.wc-meds span { color: #3A3C46; }
@media (max-width: 680px) { .wc-card { flex-direction: column; height: auto; width: 85.6mm; } .wc-panel { height: 54mm; flex: none; } .wc-panel + .wc-panel { border-left: 0; border-top: 1px dashed #5C5E6B; } }
@media print {
  html.wc-print body * { visibility: hidden; }
  html.wc-print .wc-out, html.wc-print .wc-out * { visibility: visible; }
  html.wc-print .wc-out { position: absolute; left: 0; top: 0; margin: 0; }
  html.wc-print .wc-help { display: none; }
  .wc-card { flex-direction: row !important; width: 171.2mm !important; height: 54mm !important; break-inside: avoid; }
  .wc-panel { height: auto !important; flex: 1 1 50% !important; }
  .wc-panel + .wc-panel { border-left: 1px dashed #5C5E6B !important; border-top: 0 !important; }
}

/* Footer groups (build.py footer()) */
footer.site .fgroups { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 20px 24px; margin: 4px 0 20px; }
footer.site .fgroups h2 { font-size: 14px; margin: 0 0 8px; color: var(--ink); text-align: left; }
footer.site .fgroups a { display: block; padding: 4px 0; color: var(--ink-muted); text-decoration: none; }
footer.site .fgroups a:hover { color: var(--brand); }