/* ============================================================
   CareDepth — caredepth.com
   Hand-written CSS. No build step, no framework, no dependencies.
   Edit this file directly; the browser reads it as-is.
   ============================================================ */


/* ------------------------------------------------------------
   0. FONTS
   Source Serif 4 and Inter, served from website/fonts/ — no
   request ever leaves caredepth.com. Both are variable fonts,
   so one file per family covers every weight the page uses.
   Both are licensed under the SIL Open Font License; the
   license texts sit alongside the files in website/fonts/.
   ------------------------------------------------------------ */
@font-face {
  font-family: "Source Serif 4";
  src: url("fonts/source-serif-4-latin-var.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("fonts/inter-latin-var.woff2") format("woff2");
  font-weight: 400 600;    /* variable axis — 400 body, 600 labels */
  font-style: normal;
  font-display: swap;
}


/* ------------------------------------------------------------
   1. PALETTE
   The first six values are the existing CareDepth colors, taken
   unchanged from the previous page. Everything below them is
   derived from those same hues for use on the dark sections.
   ------------------------------------------------------------ */
:root {
  /* Existing palette */
  --warm-sand:      #F7F5F0;   /* cream page background */
  --near-black:     #2D3331;   /* body text */
  --deep-lavender:  #6A5B7B;   /* headings — the logo purple */
  --warm-gray:      #8A8780;   /* secondary text */
  --border:         #E0DDD6;   /* hairlines */
  --sage-green:     #6B8F73;   /* links on cream */

  /* Dark sections.
     --deep is a dark aubergine: the logo purple above at exactly the
     same hue (268°), with the lightness dropped from 42% to 22%.
     To try the alternatives, replace this one value:
         #282032  deepest, hue 268°, 22%, 16%
         #372C44  current,  hue 268°, 22%, 22%
         #463856  softest,  hue 268°, 21%, 28%                      */
  --deep:           #372C44;
  --deep-text:      #DBD8DE;   /* body text on dark */
  --deep-bright:    #FBF9F5;   /* headings on dark */
  --deep-rule:      rgba(219, 216, 222, 0.16);  /* hairlines on dark */
  --sage-light:     #9DC7A6;   /* links and labels on dark */

  /* Type. Self-hosted; the fallbacks cover the moment before the
     woff2 files land. */
  --serif: "Source Serif 4", Georgia, "Times New Roman", Times, serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
           "Helvetica Neue", Arial, system-ui, sans-serif;

  /* Measure: holds body copy to roughly 65–75 characters a line. */
  --measure: 34em;
}


/* ------------------------------------------------------------
   2. BASE
   ------------------------------------------------------------ */
* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--warm-sand);
  color: var(--near-black);
  font-family: var(--sans);
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.1875rem);   /* 16px → 19px */
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  max-width: 100%;
  height: auto;
}

p {
  margin: 0 0 1.25em;
}

p:last-child {
  margin-bottom: 0;
}

a {
  color: var(--sage-green);
  text-decoration: underline;
  text-underline-offset: 2px;
}

a:hover {
  text-decoration: none;
}

/* ------------------------------------------------------------
   3. LAYOUT — bands and wrappers
   A "band" is a full-width horizontal stripe with a background
   color. The ".wrap" inside it holds the content to a max width
   and centers it. Alternating dark and cream bands gives the
   page its rhythm.
   ------------------------------------------------------------ */
.band {
  padding: clamp(3.5rem, 2rem + 7vw, 7rem) 1.5rem;
}

/* Consecutive cream sections shouldn't double their padding —
   the tight variant trims the top. */
.band--tight {
  padding-top: 0;
}

.band--cream {
  background: var(--warm-sand);
  color: var(--near-black);
}

.band--dark {
  background: var(--deep);
  color: var(--deep-text);
}

.band--dark a {
  color: var(--sage-light);
}

.wrap {
  max-width: 66rem;
  margin: 0 auto;
}

.prose {
  max-width: var(--measure);
}


/* ------------------------------------------------------------
   4. HEADINGS
   ------------------------------------------------------------ */
h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.125rem, 1.4rem + 3.2vw, 3.5rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--deep-bright);
  margin: 0 0 1.5rem;

  /* Narrow enough that the headline breaks between its two
     sentences rather than mid-sentence. In em, so the break holds
     as the type scales. Widen this if you change the headline. */
  max-width: 14em;
}

.section-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.625rem, 1.2rem + 1.7vw, 2.375rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--deep-lavender);
  margin: 0 0 2rem;
  max-width: 20em;
}

.band--dark .section-title {
  color: var(--deep-bright);
}

h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.3125rem, 1.05rem + 1vw, 1.75rem);
  line-height: 1.25;
  color: var(--deep-bright);
  margin: 0 0 1.25rem;
}


/* ------------------------------------------------------------
   5. HERO
   ------------------------------------------------------------ */
/* The hero uses the same .wrap width as every other section, so its
   left edge lines up with the rest of the page. The hero's text is
   held to a readable width by the max-width on each element below,
   not by narrowing the wrapper. */
.logo {
  display: block;
  width: 100%;

  /* 400px on a normal screen. The 60vw guard only bites on narrow
     windows — without it, a 400px logo would run nearly edge to edge
     on small tablets and landscape phones. Change the 400 to resize;
     the logo file is 872px wide, so anything past 436px will start to
     look soft on a Retina display. */
  max-width: min(400px, 60vw);

  height: auto;
  margin: 0 0 clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
}

.eyebrow {
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.1875rem);
  line-height: 1.45;
  color: var(--sage-light);
  margin: 0 0 1.25rem;
  max-width: 34em;
}

.lead {
  font-size: clamp(1.0625rem, 1rem + 0.5vw, 1.375rem);
  line-height: 1.55;
  color: var(--deep-text);
  max-width: 30em;
  margin: 0;
}


/* ------------------------------------------------------------
   6. LONG-FORM COPY
   ------------------------------------------------------------ */

/* A single sentence carrying more weight than the paragraphs
   around it. Used for the one bolded line in the copy deck:
   "CareDepth turns what your aide knows...". */
.statement {
  font-family: var(--serif);
  font-size: clamp(1.1875rem, 1.05rem + 0.9vw, 1.625rem);
  line-height: 1.35;
  color: var(--deep-lavender);
  margin-bottom: 1.75em;
}

.prose ul {
  margin: 0 0 1.25em;
  padding-left: 1.25em;
}

.prose li {
  margin-bottom: 0.6em;
  padding-left: 0.25em;
}

.prose li::marker {
  color: var(--sage-green);
}


/* ------------------------------------------------------------
   7. SHIFT MOMENTS
   Text and phone side by side on wide screens, stacked on
   narrow ones. Order flips on the second moment.
   ------------------------------------------------------------ */
.moment {
  display: grid;
  gap: clamp(2.5rem, 1rem + 5vw, 4.5rem);
  align-items: center;
  padding-bottom: clamp(3.5rem, 2rem + 5vw, 6rem);
  margin-bottom: clamp(3.5rem, 2rem + 5vw, 6rem);
  border-bottom: 1px solid var(--deep-rule);
}

.moment:last-child {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: none;
}

.moment__text {
  max-width: var(--measure);
}

.moment__asset {
  display: flex;
  justify-content: center;
}

@media (min-width: 62em) {
  .moment {
    grid-template-columns: 1fr auto;
  }

  /* Second moment: screenshot on the left, text on the right.
     The column widths have to swap along with the order, or the
     screenshot lands in the wide column and gets squeezed. */
  .moment--reverse {
    grid-template-columns: auto 1fr;
  }

  .moment--reverse .moment__text  { order: 2; }
  .moment--reverse .moment__asset { order: 1; }

  /* Third moment: the summary is full width, not a side column. */
  .moment--stacked {
    grid-template-columns: 1fr;
  }
}


/* ------------------------------------------------------------
   8. SCREENSHOTS
   The screenshots already carry their own device frame and have
   transparent rounded corners, so they sit straight on the dark
   background with no CSS frame around them.
   ------------------------------------------------------------ */
.screenshot {
  display: block;
  width: clamp(15rem, 72vw, 23rem);   /* 240px → 368px */
  height: auto;
  filter: drop-shadow(0 1.5rem 2.5rem rgba(0, 0, 0, 0.45));
}


/* ------------------------------------------------------------
   9. SHIFT SUMMARY
   Real HTML text, not a screenshot and not in a phone frame.
   Styled as a page torn out of a document — cream paper on the
   dark band, so it reads as the brightest thing on screen.
   ------------------------------------------------------------ */
.summary {
  background: var(--warm-sand);
  color: var(--near-black);
  border-radius: 4px;
  padding: clamp(1.75rem, 1rem + 3.5vw, 3.5rem);
  max-width: 42rem;
  box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.32);
  font-size: 0.9375em;

  /* Tighter than the rest of the page — 1.24 against the body's 1.65,
     a 25% reduction. Reads as a working document rather than an
     article. Everything inside the card inherits this. */
  line-height: 1.24;
}

.summary__head {
  border-bottom: 1px solid var(--border);
  padding-bottom: 1.25rem;
  margin-bottom: 1.75rem;
}

.summary__client {
  font-family: var(--serif);
  font-size: 1.375em;
  line-height: 1.2;
  color: var(--deep-lavender);
  margin: 0 0 0.4rem;
}

.summary__meta {
  font-size: 0.875em;
  color: var(--warm-gray);
  margin: 0;
}

/* Completed care-plan tasks. The check marks are real characters in
   index.html, not CSS decoration, so the list stays readable if you
   edit the text. */
.summary__tasks {
  list-style: none;
  margin: 0 0 2rem;
  padding: 0;
  border-bottom: 1px solid var(--border);
  padding-bottom: 1.5rem;
}

.summary__tasks li {
  padding-left: 1.5em;
  text-indent: -1.5em;
  margin-bottom: 0.6em;
}

.summary__tasks li:last-child {
  margin-bottom: 0;
}

.summary p:last-child {
  margin-bottom: 0;
}


/* ------------------------------------------------------------
   10. BADGE AND CONTACT
   ------------------------------------------------------------ */
.badge {
  margin-top: 2.5rem;
  margin-bottom: 0;
}

.badge a {
  display: inline-block;
  text-decoration: none;
  border: none;
}

.badge img {
  display: block;
  width: 120px;
  height: auto;
}

.contact p {
  margin: 0;
  line-height: 1.9;
  color: var(--warm-gray);
}

.contact__name {
  color: var(--near-black);
}

.contact__address {
  margin-top: 1.5rem;
  line-height: 1.7;
}


/* ------------------------------------------------------------
   11. NARROW SCREENS
   Checked at 380px wide.
   ------------------------------------------------------------ */
@media (max-width: 30em) {
  .band {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .logo {
    max-width: 240px;
  }

  .screenshot {
    width: 100%;
  }
}