/* DropCharge LLC company pages: /, /about, /contact, /droprecs, /mydroprecs.
   The parent of two brands: DropCharge (navy hero, indigo buttons, dark
   footer) and DropRecs (soft slate page, white cards, purple accent).
   One family, the system SF Pro stack. No web fonts, no external requests,
   no analytics, no entrance animations.

   Type scale (px, ~1.25 steps): 13 · 15 · 17 · 20 · 26 · 34 · 44 · 64
   The one bold thing on each page is the hero: real app screens where they
   exist. Everything below it stays quiet. */
:root {
  --navy: #0F172A;          /* DropCharge hero + footer */
  --navy-2: #131C33;
  --indigo: #6366F1;        /* DropCharge accent */
  --indigo-hover: #4F46E5;
  --violet: #7C5CF0;        /* DropRecs accent */
  --violet-hover: #6A45E8;
  --mydr: #4338CA;          /* MyDropRecs accent: the deep indigo of its icon */
  --mydr-hover: #3730A3;
  --mydr-text: #4338CA;
  --page: #E2E8F0;          /* droprecs.app page background */
  --surface: #FFFFFF;
  --ink: #0F172A;
  --muted: #475569;
  --dim: #64748B;
  --line: rgba(15, 23, 42, 0.1);
  --link: #4F46E5;
  --t-13: 0.8125rem; --t-15: 0.9375rem; --t-17: 1.0625rem; --t-20: 1.25rem;
  --t-26: 1.625rem; --t-34: 2.125rem; --t-44: 2.75rem; --t-64: 4rem;
  color-scheme: light dark;
}
/* Dark mode follows droprecs.app's palette; the navy hero stays navy. */
@media (prefers-color-scheme: dark) {
  :root {
    --page: #0F0F12;
    --surface: #1E1E24;
    --ink: #F1F5F9;
    --muted: #A3AEC0;
    --dim: #8391A7;
    --line: rgba(255, 255, 255, 0.1);
    --link: #A5B4FC;
    --mydr-text: #A5B4FC;
  }
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: var(--t-17);
  line-height: 1.55;
  background: var(--page);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3 {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  text-wrap: balance;
}
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
:focus-visible:not(.is-toggle) { outline: 2px solid #A5B4FC; outline-offset: 3px; border-radius: 4px; }
img { display: block; max-width: 100%; height: auto; }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 32px; }

/* ── Navy band: nav + hero, the DropCharge treatment ── */
.band {
  color: #fff;
  background:
    radial-gradient(60% 80% at 100% 0%, rgba(99, 102, 241, 0.28), transparent 70%),
    linear-gradient(180deg, var(--navy) 0%, #0B1120 100%);
}
.site-nav .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; min-height: 76px;
}
.site-name {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 650; font-size: var(--t-17); color: #fff; letter-spacing: -0.01em;
}
.site-name img { width: 32px; height: 32px; border-radius: 8px; }
.site-name:hover { text-decoration: none; }
.site-links { display: flex; gap: 28px; font-size: var(--t-15); }
.site-links a { color: rgba(255, 255, 255, 0.66); }
.site-links a:hover { color: #fff; text-decoration: none; }
.site-links a[aria-current="page"] { color: #fff; }

/* Home hero: words left, the two dictation screens right. */
.hero {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center; gap: 48px; padding: 56px 0 0;
}
.hero-copy { padding-bottom: 72px; }
.hero h1 { font-size: 3.25rem; line-height: 1.06; letter-spacing: -0.03em; font-weight: 750; max-width: 16ch; }
.hero .founded { margin-top: 14px; font-size: var(--t-20); color: #C7D2FE; font-weight: 500; }
.hero .tagline { margin-top: 20px; font-size: var(--t-20); line-height: 1.5; color: rgba(255, 255, 255, 0.72); max-width: 30ch; }
.hero-actions { display: flex; gap: 12px; margin-top: 32px; flex-wrap: wrap; }

/* Two real app screens (synthetic data), side by side at the same size,
   both demos playing (Daniel 2026-10-12: "the two different size iPhones
   doesn't work"). Each phone and its name tag is one <figure>, so screen
   readers tie the name to the screen. */
.screens {
  display: flex; justify-content: center; align-items: flex-start; gap: 24px;
  align-self: end; margin: 0; padding-bottom: 48px;
  --pw: 230px; --pb: 9px; --pr: 40px;
}
.phone, .phone-solo {
  position: absolute; right: -12px; bottom: -1px; width: 330px; height: 548px;
  border: 10px solid #1B1B2B; border-bottom: 0; border-radius: 44px 44px 0 0;
  background: #1B1B2B; overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
}
.phone img, .phone-solo img {
  width: 100%; height: 100%; object-fit: cover; object-position: top;
  border-radius: 34px 34px 0 0;
}
.phone video, .phone-solo video {
  display: block; width: 100%; height: 100%; object-fit: contain; object-position: top center;
  border-radius: 34px 34px 0 0; background: #E2E8F0; /* the app's own page colour */
}
.loop-poster { display: none; }
/* The phone is the pause control (no on-screen button). Pointer cursor, and
   a subtle ring for keyboard focus only. Paused shows nothing extra. */
.is-toggle { cursor: pointer; }
.is-toggle:focus { outline: none; }
.is-toggle:focus-visible { outline: 2px solid rgba(165, 180, 252, 0.8); outline-offset: 4px; }
.phone img.loop-poster, .phone-solo img.loop-poster { object-fit: contain; object-position: top center; background: #E2E8F0; }
.shot { margin: 0; width: var(--pw); flex: none; }
.screens .phone {
  position: relative; right: auto; bottom: auto; left: auto;
  width: var(--pw); height: calc((var(--pw) - 2 * var(--pb)) * 1022 / 600 + 2 * var(--pb));
  border: var(--pb) solid #1B1B2B; border-radius: var(--pr);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.screens .phone video, .screens .phone img { border-radius: calc(var(--pr) - var(--pb)); }
.tag { margin-top: 14px; display: flex; align-items: flex-start; gap: 10px; color: #fff; line-height: 1.25; text-align: left; }
.tag img { width: 28px; height: 28px; border-radius: 7px; flex: none; margin-top: 2px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.22); }
.tag strong { display: block; font-size: var(--t-15); font-weight: 650; letter-spacing: -0.01em; }
.tag strong + span { display: block; font-size: var(--t-13); color: #C7D2FE; }
.tag-note { display: block; margin-top: 3px; font-size: 0.75rem; line-height: 1.3; color: #C7D2FE; }
/* The hero's one motion moment. Reduced motion: poster image, no video,
   no pause button. Kept after the rules above so it wins. */
@media (prefers-reduced-motion: reduce) {
  video.loop { display: none; }
  .loop-poster { display: block; }
}

/* Inner-page hero */
.page-hero { padding: 40px 0 96px; max-width: 760px; }
.page-hero h1 { font-size: var(--t-44); line-height: 1.08; letter-spacing: -0.03em; font-weight: 750; }
.page-hero .lead { margin-top: 16px; font-size: var(--t-20); color: rgba(255, 255, 255, 0.76); max-width: 38ch; }
.page-hero .lead a { color: #C7D2FE; }
.page-hero .meta { margin-top: 14px; font-size: var(--t-15); color: #C7D2FE; }
.app-mark { width: 64px; height: 64px; border-radius: 15px; margin-bottom: 24px; }
.app-icon { border-radius: 13px; flex: none; }

.product-hero { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 48px; align-items: end; }
.product-hero .page-hero { padding-bottom: 96px; }
.product-hero .phone-solo { position: relative; right: auto; justify-self: center; align-self: end; width: 290px; height: 470px; }
/* Whole phone, rounded bottom bezel included, with room below it (Daniel
   2026-10-12: the phone was cut off at the hero's bottom edge). Height
   follows the 600:1022 screen at the same width, so nothing is shrunk. */
.product-hero .phone-solo {
  --pb: 10px; border: var(--pb) solid #1B1B2B; border-radius: 44px; bottom: auto;
  height: calc((290px - 2 * var(--pb)) * 1022 / 600 + 2 * var(--pb));
  margin-bottom: 56px; box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.product-hero .phone-solo img, .product-hero .phone-solo video { border-radius: 34px; }

/* ── Buttons (dropcharge.app .btn-accent) ── */
/* Each filled button: a top-to-bottom tint in its brand hue, a thin top
   highlight, and a soft shadow in the same hue. White text is at least
   4.5:1 against the LIGHTEST stop of every state (WCAG AA):
     DropCharge  #5D5AF8 -> #4F46E5  4.90 / 6.29   hover #5550F7 -> #4B44E8  5.42 / 6.38
     DropRecs    #7C4DF7 -> #6A3DE8  4.93 / 6.09   hover #7048F0 -> #5E2FD9  5.42 / 7.28
     MyDropRecs  #4F5BF5 -> #3D4FE8  5.06 / 6.03   hover #4757F0 -> #3B4AE6  5.40 / 6.35
   Pressed: a darker tint, the button sinks 1px and the shadow tightens. */
.btn {
  --top: #5D5AF8; --bottom: #4F46E5; --top-hover: #5550F7; --bottom-hover: #4B44E8;
  --glow: 99, 102, 241;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 0 22px; border-radius: 8px;
  font-weight: 600; font-size: var(--t-15); color: #fff;
  background: linear-gradient(180deg, var(--top), var(--bottom));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 1px 2px rgba(15, 23, 42, 0.2),
    0 6px 16px -4px rgba(var(--glow), 0.55);
  transition: box-shadow 0.15s ease, transform 0.15s ease, background 0.15s ease;
}
.btn:hover {
  color: #fff; text-decoration: none;
  background: linear-gradient(180deg, var(--top-hover), var(--bottom-hover));
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.26),
    0 2px 4px rgba(15, 23, 42, 0.2),
    0 10px 24px -6px rgba(var(--glow), 0.7);
}
.btn:active {
  transform: translateY(1px);
  background: linear-gradient(180deg, var(--bottom), var(--bottom-hover));
  box-shadow:
    inset 0 2px 4px rgba(15, 23, 42, 0.25),
    0 1px 2px rgba(var(--glow), 0.4);
}
.btn-indigo { --top: #5D5AF8; --bottom: #4F46E5; --top-hover: #5550F7; --bottom-hover: #4B44E8; --glow: 99, 102, 241; }
.btn-violet { --top: #7C4DF7; --bottom: #6A3DE8; --top-hover: #7048F0; --bottom-hover: #5E2FD9; --glow: 124, 77, 247; }
.btn-mydr   { --top: #4F5BF5; --bottom: #3D4FE8; --top-hover: #4757F0; --bottom-hover: #3B4AE6; --glow: 79, 91, 245; }
/* Secondary hero button: a bright indigo outline on the navy band.
   Text #FFFFFF on #0F172A is 17.9:1; the outline #A5B4FC is 9.0:1. */
.btn-ghost {
  background: rgba(165, 180, 252, 0.08);
  border: 1.5px solid #A5B4FC;
  box-shadow: none;
}
.btn-ghost:hover {
  background: rgba(165, 180, 252, 0.18);
  border-color: #C7D2FE;
  box-shadow: 0 6px 18px -6px rgba(165, 180, 252, 0.45);
}
.btn-ghost:active { background: rgba(165, 180, 252, 0.26); box-shadow: none; }

/* ── Products ── */
.products { padding: 72px 0 96px; }
.products > h2 { font-size: var(--t-26); letter-spacing: -0.02em; margin-bottom: 24px; }
.flagships { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 24px; }
/* 3 + 2 at desktop: the three apps on top, DropScan and Recall Engine below. */
.flagships > .product { grid-column: span 2; }
.flagships > .product--dropscan, .flagships > .product--recall { grid-column: span 3; }
.product {
  background: var(--surface); border-radius: 20px; padding: 32px;
  display: flex; flex-direction: column; gap: 12px;
  box-shadow: 0 1px 0 var(--line), 0 12px 32px rgba(15, 23, 42, 0.06);
}
.product-head { display: flex; align-items: center; gap: 16px; }
.product-head img { width: 56px; height: 56px; border-radius: 13px; flex: none; }
.product h3 { font-size: var(--t-26); letter-spacing: -0.02em; }
.product p { color: var(--muted); max-width: 46ch; }
.product .btn { align-self: flex-start; margin-top: 8px; }
.product--dropcharge { border-top: 4px solid var(--indigo); }
.product--droprecs { border-top: 4px solid var(--violet); }
/* ScopeNote: third card, "Coming soon", no link (Daniel 2026-10-12). App
   icon from the ScopeNote brand kit, same size and rounding as the others. */
.product--scopenote { border-top: 4px solid #378ADD; }
/* Recall Engine (free web tool at /recall, Daniel 2026-10-12). No icon of
   its own, so the DropCharge bird is used. */
.product--recall { border-top: 4px solid var(--indigo); }
/* DropScan (FibroScan reports, /dropscan). No icon of its own: DropCharge bird. */
.product--dropscan { border-top: 4px solid var(--indigo); }
.product .product-tm { margin-top: auto; padding-top: 8px; font-size: 0.75rem; color: var(--dim); }
.soon-badge {
  align-self: flex-start; margin-top: 4px; padding: 4px 12px; border-radius: 999px;
  font-size: var(--t-13); font-weight: 650; letter-spacing: 0.02em;
  color: var(--muted) !important; background: rgba(100, 116, 139, 0.12); border: 1px solid rgba(100, 116, 139, 0.3);
}

.secondary { margin-top: 24px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.row {
  display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 20px;
  padding: 22px 32px; background: var(--surface); border-radius: 16px;
  box-shadow: 0 1px 0 var(--line);
}
.row h3 { font-size: var(--t-20); letter-spacing: -0.01em; }
.row p { color: var(--muted); font-size: var(--t-15); }
.row .soon { color: var(--mydr-text); font-weight: 600; }
.row .app-icon { width: 56px; height: 56px; border-radius: 13px; }

/* ── Content pages ── */
.content { padding-bottom: 96px; }
.panel {
  max-width: 760px; margin-top: -48px; position: relative;
  background: var(--surface); border-radius: 20px; padding: 40px 44px;
  box-shadow: 0 1px 0 var(--line), 0 12px 32px rgba(15, 23, 42, 0.06);
}
.panel > * { max-width: 64ch; }
.panel h2 { font-size: var(--t-20); letter-spacing: -0.01em; margin: 32px 0 10px; }
.panel h2:first-child { margin-top: 0; }
.panel p { margin-bottom: 14px; }
.panel ul { margin: 0 0 14px 22px; }
.panel li { margin-bottom: 10px; }
.panel .note { font-size: var(--t-15); color: var(--dim); margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--line); }

/* DropRecs features: one surface, items divided by hairlines (not a card each). */
.facts { max-width: 960px; margin-top: 40px; padding: 12px 44px 36px; }
.facts.lifted { margin-top: -48px; }
.facts > * { max-width: none; }
.facts .intro { max-width: 52ch; }
.facts .fact-list--plain li { border-top: 0; border-bottom: 1px solid var(--line); }
.fact-list--plain + .handoff { border-top: 0; }
.facts .intro { font-size: var(--t-20); line-height: 1.5; padding: 28px 0 8px; max-width: 52ch; }
.fact-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; list-style: none; margin: 0 !important; }
.fact-list li { padding: 20px 0; border-top: 1px solid var(--line); margin: 0 !important; }
.fact-list h3 { font-size: var(--t-17); margin-bottom: 4px; }
.fact-list p { color: var(--muted); font-size: var(--t-15); margin: 0; }
.fact-list--plain li p { color: var(--ink); font-size: var(--t-17); }
.handoff {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px;
  margin-top: 8px; padding-top: 24px; border-top: 1px solid var(--line);
}
.handoff p { margin: 0; color: var(--muted); max-width: 52ch; }
.handoff p strong { color: var(--ink); }
.handoff p + p { margin-top: 6px; }
.after-note { margin-top: 20px; font-size: var(--t-15); color: var(--dim); }


/* ── Footer (dropcharge.app's dark footer) ── */

/* ── Responsive ── */
@media (max-width: 960px) {
  .hero { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .hero-copy { padding-bottom: 40px; }
  .screens { justify-self: center; padding-bottom: 40px; }
  .product-hero { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .flagships { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flagships > .product, .flagships > .product--dropscan { grid-column: span 1; }
  .flagships > .product--recall { grid-column: 1 / -1; }
  .product-hero .page-hero { padding-bottom: 32px; }
  .product-hero .phone-solo { justify-self: start; width: 260px; height: calc((260px - 2 * var(--pb)) * 1022 / 600 + 2 * var(--pb)); margin-bottom: 48px; }
}
@media (max-width: 640px) {
  .wrap { padding: 0 16px; }
  .site-nav .wrap { min-height: 64px; }
  .site-links { gap: 18px; }
  .site-links .nav-products { display: none; }
  .hero { padding-top: 32px; }
  .hero h1 { font-size: var(--t-34); line-height: 1.1; }
  .hero .founded, .hero .tagline { font-size: var(--t-17); }
  .screens { gap: 14px; padding-bottom: 32px; --pw: calc((100vw - 46px) / 2); --pb: 7px; --pr: 32px; }
  .tag { gap: 8px; }
  .tag img { width: 24px; height: 24px; border-radius: 6px; }
  .page-hero { padding: 28px 0 80px; }
  .page-hero h1 { font-size: var(--t-34); }
  .page-hero .lead { font-size: var(--t-17); }
  .product-hero .phone-solo { --pb: 8px; width: 230px; height: calc((230px - 2 * var(--pb)) * 1022 / 600 + 2 * var(--pb)); border-radius: 38px; margin-bottom: 40px; }
  .product-hero .phone-solo img, .product-hero .phone-solo video { border-radius: 30px; }
  .products { padding: 48px 0 72px; }
  .flagships { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .flagships > .product, .flagships > .product--dropscan, .flagships > .product--recall { grid-column: 1 / -1; }
  .product { padding: 24px; }
  .row { grid-template-columns: 48px minmax(0, 1fr); padding: 20px 24px; gap: 16px; }
  .row .app-icon { width: 48px; height: 48px; border-radius: 11px; }
  .row .btn { grid-column: 1 / -1; justify-self: start; }
  .panel, .facts { padding-left: 22px; padding-right: 22px; }
  .panel { padding-top: 28px; padding-bottom: 28px; }
  .facts .intro { padding-top: 16px; font-size: var(--t-17); }
  .facts { padding-top: 12px; }
  .fact-list { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
  .btn:hover, .btn:active { transform: none; }
}