/* ==========================================================================
   Complex Care App - website2 styles
   Re-themed to match admin/partner's own shared "Outlook Web App" look
   (see admin/htdocs/assets/css/portal.css and partner/htdocs/assets/css/
   complexcare-theme.css) rather than this site's original larch.au-derived
   warm palette - same --cc- token NAMES as before (and as those two
   stylesheets), just admin/partner's own values: Microsoft blue accent,
   navy nav/headings, Segoe UI (no web font loaded, same as neither admin
   nor partner ships one), light grey page ground instead of warm cream.
   Layout/component structure (section bands, card grid, mood band, etc.)
   is untouched - only the design tokens and the few places that hard-coded
   a colour/radius instead of using one of these change.
   ========================================================================== */

:root {
  /* Brand palette (same values as admin/partner's own theme) */
  --cc-amber: #E5A400;
  /* Fluent's own "themeLighter" blue - admin/partner have no equivalent
     soft-panel token of their own (their --cc-paper is the page's grey, not
     a soft accent), so this is the closest in-family substitute for what
     --cc-sapwood used to do here: a light, distinct accent panel. */
  --cc-sapwood: #DEECF9;
  --cc-russet: #0078D4;
  --cc-paper: #e4e4e4;
  --cc-heartwood: #605e5c;
  --cc-driftwood: #edebe9;
  --cc-bark: #003366;
  --cc-white: #FFFFFF;
  --cc-success: #2f6b3a;
  --cc-success-soft: #e3efe1;
  --cc-error: #a4321d;
  --cc-error-soft: #f7e3dd;

  /* Type - Segoe UI throughout, same single stack admin/partner both use
     for everything (headings included - no separate display serif). */
  --cc-serif: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
  --cc-sans: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
  --cc-mono: "IBM Plex Mono", "Courier New", monospace;

  --cc-radius: 0.5rem;
  --cc-section-y: clamp(3.5rem, 8vw, 6.5rem);
}

html { scroll-behavior: smooth; scroll-padding-top: 5rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--cc-paper);
  color: var(--cc-bark);
  font-family: var(--cc-sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--cc-russet); }
a:hover { color: var(--cc-bark); }

.shell { max-width: 1120px; margin: 0 auto; padding-inline: 24px; }
.shell-narrow { max-width: 640px; margin: 0 auto; padding-inline: 24px; }
.shell-medium { max-width: 820px; margin: 0 auto; padding-inline: 24px; }

h1, h2, h3, .display-serif {
  font-family: var(--cc-serif);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.1;
  text-wrap: balance;
  margin: 0;
}
h4, h5, h6 { font-family: var(--cc-sans); font-weight: 700; margin: 0; }

.display-hero { font-size: clamp(2.5rem, 5.6vw, 4.25rem); }
.display-section { font-size: clamp(1.9rem, 3.6vw, 2.9rem); }

.lede { font-size: 1.125rem; line-height: 1.65; color: var(--cc-heartwood); }

.eyebrow {
  font-family: var(--cc-mono);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--cc-russet);
  margin: 0 0 .9rem;
  display: block;
}

.measure { max-width: 42rem; }
.measure-wide { max-width: 56rem; }

/* --- Surfaces -------------------------------------------------------- */

.bg-paper { background-color: var(--cc-paper); }
.bg-sapwood { background-color: var(--cc-sapwood); }
.bg-bark { background-color: var(--cc-bark); color: var(--cc-sapwood); }
.bg-bark h1, .bg-bark h2, .bg-bark h3 { color: var(--cc-sapwood); }
.bg-bark .lede { color: var(--cc-driftwood); }
.bg-bark a { color: var(--cc-sapwood); }
.border-top { border-top: 1px solid var(--cc-driftwood); }
.border-bottom { border-bottom: 1px solid var(--cc-driftwood); }

.section { padding-block: var(--cc-section-y); }
.section-head { max-width: 46rem; margin: 0 0 2.75rem; }
.section-head p { margin: .75rem 0 0; color: var(--cc-heartwood); font-size: 1rem; line-height: 1.6; }
.section-head.center { margin-inline: auto; text-align: center; }

/* --- Buttons ----------------------------------------------------------- */

.btn {
  display: inline-block;
  /* Fluent's subtle 2px radius, same as admin/partner's own .btn-primary/
     .btn-outline-primary override (complexcare-theme.css) - not full pills
     any more. */
  border-radius: 2px;
  font-weight: 600;
  font-family: var(--cc-sans);
  padding: .75rem 1.7rem;
  font-size: .95rem;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  text-align: center;
}
.btn-block { display: block; width: 100%; }
.btn-sm { padding: .5rem 1.1rem; font-size: .85rem; }

.btn-russet { background: var(--cc-russet); color: var(--cc-white); border-color: var(--cc-russet); }
.btn-russet:hover { background: #106ebe; border-color: #106ebe; color: var(--cc-white); }

.btn-amber { background: var(--cc-amber); color: var(--cc-bark); border-color: var(--cc-amber); }
.btn-amber:hover { background: #f0b31a; border-color: #f0b31a; color: var(--cc-bark); }

.btn-bark { background: var(--cc-bark); color: var(--cc-sapwood); border-color: var(--cc-bark); }
.btn-bark:hover { background: #002347; border-color: #002347; color: var(--cc-paper); }

.btn-outline-bark { background: transparent; color: var(--cc-bark); border-color: var(--cc-bark); }
.btn-outline-bark:hover { background: var(--cc-bark); color: var(--cc-paper); }

.btn-danger { background: var(--cc-error); color: var(--cc-white); border-color: var(--cc-error); }
.btn-danger:hover { background: #7e2615; border-color: #7e2615; color: var(--cc-white); }

/* --- Navigation ---------------------------------------------------------- */

.site-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--cc-bark);
  transition: box-shadow .25s ease;
}
.site-nav.is-scrolled { box-shadow: 0 1px 0 rgba(0, 0, 0, .25); }

.nav-row { display: flex; align-items: center; justify-content: space-between; padding-block: .8rem; }

/* assets/img/website_logo.svg is transparent/white already (same mark as
   admin/partner's own admin_logo.svg/partner_logo.svg) - sits directly on
   the dark nav bar, no backdrop chip needed, unlike the old
   wesite2_logo.jpeg this replaced. */
.brand-lockup { display: inline-flex; align-items: center; text-decoration: none; }
.brand-lockup img { height: 2.75rem; width: auto; display: block; }

.nav-links { display: flex; align-items: center; gap: 1.6rem; }
.nav-links a:not(.btn) { color: var(--cc-sapwood); text-decoration: none; font-weight: 500; font-size: .95rem; }
.nav-links a:not(.btn):hover { color: var(--cc-amber); }

.nav-toggle {
  display: none;
  background: none;
  border: none;
  padding: .5rem;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
}
.nav-toggle span { display: block; width: 24px; height: 2px; background: var(--cc-sapwood); border-radius: 2px; }

@media (max-width: 860px) {
  .nav-toggle { display: flex; }
  .nav-row { flex-wrap: wrap; }
  .nav-links {
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: .2rem;
    padding: .75rem 0 .5rem;
  }
  .nav-links.open { display: flex; }
  .nav-links a:not(.btn) { width: 100%; padding: .6rem 0; }
  .nav-links a.btn { margin-top: .6rem; }
}

/* --- Hero ---------------------------------------------------------------- */

.hero { padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(3rem, 6vw, 5rem); }
.hero.center { text-align: center; }
.hero-ctas { margin-top: 2rem; display: flex; gap: .9rem; justify-content: center; flex-wrap: wrap; }

/* --- Mood band (full-bleed photo with overlay text) ---------------------- */

.mood-band { position: relative; border-radius: calc(var(--cc-radius) * 1.5); overflow: hidden; margin-block: 2rem; }
.mood-band img { display: block; width: 100%; height: 380px; object-fit: cover; }
.mood-band-caption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 1.75rem 2rem;
  background: linear-gradient(to top, rgba(0, 51, 102, .82), rgba(0, 51, 102, 0));
  color: var(--cc-paper);
  font-family: var(--cc-serif);
  font-size: 1.3rem;
}
@media (max-width: 640px) {
  .mood-band img { height: 240px; }
  .mood-band-caption { font-size: 1.05rem; padding: 1.1rem 1.25rem; }
}

/* --- Feature / audience cards --------------------------------------------- */

.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.25rem; }

/* Photo + body, same pattern larch.au uses for both its feature and
   audience cards - a real photo up top (no padding, clipped to the card's
   own rounded corners), the text content padded separately below it. */
.feature-card { background: var(--cc-white); border: 1px solid var(--cc-driftwood); border-radius: var(--cc-radius); overflow: hidden; height: 100%; display: flex; flex-direction: column; }
.feature-media { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

.feature-body { padding: 1.75rem; }
/* Icon-only feature cards (guide.php) have no .feature-media - same
   .feature-body padding, plus the small icon badge those still use. */
.feature-card .icon {
  width: 2.75rem; height: 2.75rem; border-radius: .7rem;
  background: var(--cc-sapwood); color: var(--cc-russet);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; margin-bottom: 1.1rem;
}
.feature-card h3 { font-size: 1.15rem; font-weight: 600; font-family: var(--cc-sans); margin-bottom: .5rem; }
.feature-card p { margin: 0; font-size: .95rem; line-height: 1.6; color: var(--cc-heartwood); }

/* --- Screenshot row -------------------------------------------------------- */

.screenshot-row { display: flex; justify-content: center; gap: 1.75rem; flex-wrap: wrap; }
.screenshot-row figure { margin: 0; max-width: 210px; text-align: center; }
.screenshot-row img {
  width: 100%; border-radius: .9rem; border: 1px solid var(--cc-driftwood);
  box-shadow: 0 20px 40px -22px rgba(0, 51, 102, .4); display: block;
}
.screenshot-row figcaption { margin-top: .9rem; font-size: .85rem; font-weight: 600; color: var(--cc-heartwood); }

/* --- Moments (numbered "how it works" steps) -------------------------------
   Used on a dark (index.php, bg-bark) AND a light (partners.php, bg-sapwood)
   section background - a self-contained white card per step, same
   elevation as .feature-card/.doc-card elsewhere, reads cleanly on either.
   Replaces the old thin amber connecting line + bare bordered "STEP N" text
   badge sitting directly on the section background, which the line visibly
   cut straight through. */
.moments { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem; }
.moment {
  background: var(--cc-white); border-radius: var(--cc-radius);
  padding: 2rem 1.75rem; text-align: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .08);
}
.moment-tag {
  display: flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; margin: 0 auto 1.1rem; border-radius: .7rem;
  background: var(--cc-sapwood); color: var(--cc-russet);
  font-family: var(--cc-mono); font-weight: 600; font-size: 1.05rem;
}
/* Overrides .bg-bark h1/h2/h3's own pale heading color (index.php's "How it
   works" lives in a bg-bark section) - that rule is for text sitting
   directly on the dark navy background, but .moment is now its own white
   card floating inside that section, where the same pale color is nearly
   invisible. */
.moment h3 { font-size: 1.3rem; margin: 0 0 .5rem; color: var(--cc-bark); }
.moment p { color: var(--cc-heartwood); font-size: .92rem; line-height: 1.6; margin: 0; }

/* --- Stat / callout block -------------------------------------------------- */

.stat-block { border-top: 2px solid var(--cc-bark); padding-top: 1.25rem; }
.stat-block .stat-value { font-family: var(--cc-serif); font-size: clamp(2rem, 4vw, 3rem); line-height: 1; display: block; margin-bottom: .4rem; }
.stat-block p { color: var(--cc-heartwood); margin: 0; }

.callout {
  background: var(--cc-sapwood);
  border-radius: var(--cc-radius);
  padding: 1.5rem 1.75rem;
}
.callout .eyebrow { margin-bottom: .5rem; }
.callout p { margin: 0; color: var(--cc-bark); }

/* --- Forms ----------------------------------------------------------------- */

.card {
  background: var(--cc-white);
  border-radius: calc(var(--cc-radius) * 1.1);
  padding: clamp(1.75rem, 4vw, 2.5rem);
  /* Same flat, subtle lift as admin/partner's own .card rule
     (complexcare-theme.css) instead of this site's old soft, warm-toned
     shadow. */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08);
}

/* Signup section (copy + form card) - side by side on wider screens, a
   single stacked column on mobile. */
.signup-grid {
  display: grid;
  grid-template-columns: minmax(240px, 380px) 1fr;
  gap: 3rem;
  align-items: start;
}
@media (max-width: 760px) {
  .signup-grid { grid-template-columns: 1fr; gap: 2rem; }
}

.field { margin-bottom: 1.1rem; }
.field label { display: block; font-size: .85rem; font-weight: 600; color: var(--cc-bark); margin-bottom: .4rem; }
.field input, .field select, .field textarea {
  width: 100%;
  padding: .7rem .9rem;
  /* Not --cc-driftwood (#edebe9) - same fix partner's own
     complexcare-theme.css already made for this exact problem: that pale a
     border reads as barely-there against a white input someone actually
     needs to see the edges of. */
  border: 1px solid #8a8886;
  border-radius: .6rem;
  font-family: var(--cc-sans);
  font-size: .95rem;
  background: var(--cc-white);
  color: var(--cc-bark);
}
.field textarea { resize: vertical; min-height: 120px; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--cc-russet); box-shadow: 0 0 0 .2rem rgba(0, 120, 212, .2);
}
.field-hint { margin: .4rem 0 1rem; font-size: .8rem; color: var(--cc-heartwood); }

.hp-field { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }

.terms-field { display: flex; align-items: flex-start; gap: .6rem; margin: 1rem 0 1.25rem; }
.terms-field input { width: auto; margin-top: .2rem; flex-shrink: 0; }
.terms-field label { font-size: .82rem; color: var(--cc-heartwood); line-height: 1.5; font-weight: 400; }

.form-note { margin: .9rem 0 0; font-size: .78rem; color: var(--cc-heartwood); }

.status-banner { border-radius: .7rem; padding: 1rem 1.25rem; font-size: .92rem; margin-bottom: 1.5rem; }
.status-banner.is-success { background: var(--cc-success-soft); color: var(--cc-success); border: 1px solid #c3dcc1; }
.status-banner.is-notice { background: var(--cc-sapwood); color: var(--cc-bark); border: 1px solid var(--cc-driftwood); }
.status-banner.is-error { background: var(--cc-error-soft); color: var(--cc-error); border: 1px solid #edc2b4; }

.pay-choice { display: flex; flex-direction: column; gap: .6rem; margin-top: .4rem; }
.pay-choice label {
  display: flex; align-items: flex-start; gap: .6rem; font-weight: 400; font-size: .9rem;
  color: var(--cc-bark); border: 1px solid var(--cc-driftwood); border-radius: .7rem; padding: .75rem .9rem; cursor: pointer;
}
.pay-choice input { width: auto; margin-top: .15rem; flex-shrink: 0; }
.pay-choice .pay-choice-label { font-weight: 600; display: block; }
.pay-choice .pay-choice-hint { color: var(--cc-heartwood); font-weight: 400; font-size: .8rem; }

/* --- Newsletter ------------------------------------------------------------ */

.newsletter-row {
  display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap;
  background: var(--cc-white); border-radius: var(--cc-radius); padding: 2rem 2.25rem;
}
.newsletter-copy { max-width: 32rem; }
.newsletter-copy h2 { font-size: 1.3rem; margin-bottom: .3rem; }
.newsletter-copy p { margin: 0; color: var(--cc-heartwood); font-size: .92rem; }
.newsletter-form { display: flex; gap: .6rem; flex-wrap: wrap; flex-shrink: 0; align-items: flex-start; }
.newsletter-form input {
  width: 220px;
  padding: .7rem .9rem;
  border: 1px solid #8a8886; /* see .field input's own copy of this same fix */
  border-radius: .6rem;
  font-family: var(--cc-sans);
  font-size: .95rem;
  background: var(--cc-white);
  color: var(--cc-bark);
}
.newsletter-form input:focus {
  outline: none; border-color: var(--cc-russet); box-shadow: 0 0 0 .2rem rgba(0, 120, 212, .2);
}
.newsletter-note { flex-basis: 100%; margin: .6rem 0 0; font-size: .78rem; color: var(--cc-heartwood); }
@media (max-width: 680px) {
  .newsletter-row { flex-direction: column; align-items: stretch; }
  .newsletter-form input { width: 100%; }
}

/* --- Doc cards (guide resources) -------------------------------------------- */

.doc-card {
  display: flex; align-items: flex-start; gap: 1.1rem;
  background: var(--cc-white); border-radius: var(--cc-radius); padding: 1.5rem 1.6rem;
}
.doc-card .step-icon {
  width: 2.5rem; height: 2.5rem; border-radius: .7rem; flex-shrink: 0;
  background: var(--cc-sapwood); color: var(--cc-russet);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--cc-mono); font-weight: 600; font-size: .9rem;
}
.doc-card .doc-body { flex: 1; min-width: 0; }
.doc-card .doc-num { font-family: var(--cc-mono); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--cc-russet); margin: 0 0 .25rem; }
.doc-card h3 { font-size: 1.05rem; font-weight: 600; font-family: var(--cc-sans); margin-bottom: .5rem; }
.doc-card p { margin: 0 0 .6rem; font-size: .92rem; line-height: 1.6; color: var(--cc-heartwood); }
.doc-card ol, .doc-card ul { margin: .6rem 0 0; padding-left: 1.2rem; }
.doc-card li { font-size: .92rem; line-height: 1.65; color: var(--cc-heartwood); margin-bottom: .25rem; }
.doc-card li strong { color: var(--cc-bark); }
.doc-card .tip {
  margin-top: .9rem; background: var(--cc-sapwood); border-radius: .6rem;
  padding: .75rem 1rem; font-size: .85rem; line-height: 1.6; color: var(--cc-bark);
}
.doc-shot {
  float: right; width: 150px; margin: 0 0 .6rem 1rem;
  border-radius: .7rem; border: 1px solid var(--cc-driftwood);
  box-shadow: 0 14px 28px -16px rgba(0, 51, 102, .4);
}
@media (max-width: 640px) { .doc-card { flex-direction: column; } .doc-shot { width: 110px; } }

.jump-links { margin-top: 1.75rem; display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; }
.jump-links a {
  display: inline-block; background: var(--cc-white); border: 1px solid var(--cc-driftwood); color: var(--cc-bark);
  text-decoration: none; padding: .55rem 1.1rem; border-radius: 999px; font-weight: 600; font-size: .82rem;
}
.jump-links a:hover { border-color: var(--cc-russet); color: var(--cc-russet); }

/* --- FAQ (native details/summary) ------------------------------------------ */

.faq-list { display: flex; flex-direction: column; gap: .6rem; }
.faq-item { background: var(--cc-white); border-radius: .8rem; padding: .2rem 1.4rem; }
.faq-item summary {
  cursor: pointer; list-style: none; padding: 1rem 0;
  font-weight: 600; font-size: .98rem; color: var(--cc-bark);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; font-family: var(--cc-mono); font-size: 1.3rem; color: var(--cc-russet);
  flex-shrink: 0; transition: transform .15s ease;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { margin: 0 0 1.1rem; font-size: .92rem; line-height: 1.7; color: var(--cc-heartwood); }
.faq-item p strong { color: var(--cc-bark); }
.faq-shot { display: block; width: 200px; max-width: 100%; margin: 0 0 1.1rem; border-radius: .6rem; border: 1px solid var(--cc-driftwood); box-shadow: 0 14px 28px -16px rgba(0, 51, 102, .4); }

/* --- Terms / legal content -------------------------------------------------- */

.legal h2 { font-size: 1.15rem; font-weight: 600; font-family: var(--cc-sans); margin: 1.75rem 0 .6rem; }
.legal h2:first-of-type { margin-top: 0; }
.legal p, .legal li { font-size: .95rem; line-height: 1.7; color: var(--cc-bark); }
.legal p { margin: 0 0 .9rem; }
.legal ul { margin: 0 0 .9rem; padding-left: 1.3rem; }
.updated { margin: 0 0 2rem; color: var(--cc-heartwood); font-size: .85rem; }

/* --- Blog ------------------------------------------------------------------ */

.article-card { background: var(--cc-white); border-radius: var(--cc-radius); padding: clamp(1.75rem, 4vw, 2.5rem); }
h1.title, .title { font-size: clamp(1.7rem, 4vw, 2.2rem); font-weight: 400; font-family: var(--cc-serif); line-height: 1.2; margin: 0 0 .9rem; }
.article-meta { margin: 0 0 1.75rem; color: var(--cc-heartwood); font-size: .85rem; }
.dek { font-size: 1.1rem; line-height: 1.6; color: var(--cc-heartwood); margin: 0 0 1.75rem; }
.article-hero { margin: 0 0 1.75rem; border-radius: .8rem; overflow: hidden; }
.article-hero img { width: 100%; height: 260px; object-fit: cover; display: block; }
.share-blurb { background: var(--cc-sapwood); border-radius: .8rem; padding: 1.1rem 1.4rem; margin: 0 0 2rem; font-size: .92rem; line-height: 1.6; color: var(--cc-bark); }
.share-blurb .eyebrow { margin-bottom: .4rem; }
article h2 { font-size: 1.3rem; font-weight: 600; font-family: var(--cc-sans); margin: 2.1rem 0 .75rem; }
article h2:first-of-type { margin-top: 0; }
article p, article li { font-size: .98rem; line-height: 1.75; color: var(--cc-bark); }
article p { margin: 0 0 1rem; }
article ul, article ol { margin: 0 0 1rem; padding-left: 1.3rem; }
article li { margin-bottom: .4rem; }
article strong { font-weight: 700; }
article blockquote {
  margin: 1.5rem 0; padding: .25rem 0 .25rem 1.25rem; border-left: 3px solid var(--cc-amber);
  font-family: var(--cc-serif); font-size: 1.15rem; font-style: italic; color: var(--cc-bark);
}
.share-links { margin-top: 2.25rem; padding-top: 1.5rem; border-top: 1px solid var(--cc-driftwood); }
.share-links-label { font-family: var(--cc-mono); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--cc-heartwood); margin: 0 0 .75rem; }
.share-links a.share-btn {
  display: inline-block; margin: 0 .5rem .5rem 0; padding: .5rem 1rem; border-radius: 999px;
  border: 1px solid var(--cc-driftwood); font-size: .85rem; font-weight: 600; color: var(--cc-bark); text-decoration: none;
}
.share-links a.share-btn:hover { border-color: var(--cc-russet); color: var(--cc-russet); }
.cta-box { margin-top: 2.5rem; background: var(--cc-sapwood); border-radius: var(--cc-radius); padding: 1.75rem 1.85rem; text-align: center; }
.cta-box p { color: var(--cc-bark); font-size: .95rem; margin: 0 0 1rem; }
.back-link { display: inline-block; margin-top: 1.75rem; font-size: .9rem; font-weight: 600; }

.post-list { display: flex; flex-direction: column; gap: 1rem; }
.post-card {
  display: flex; gap: 1.25rem; align-items: center; background: var(--cc-white);
  border-radius: var(--cc-radius); padding: 1.25rem 1.5rem; text-decoration: none; color: inherit;
}
.post-card:hover { box-shadow: 0 20px 40px -28px rgba(0, 51, 102, .4); }
.post-card img { width: 96px; height: 96px; border-radius: .7rem; object-fit: cover; flex-shrink: 0; }
.post-card .post-card-body { min-width: 0; }
.post-card .eyebrow { margin-bottom: .5rem; }
.post-card h2 { font-size: 1.1rem; font-weight: 600; font-family: var(--cc-sans); margin-bottom: .35rem; }
.post-card p { margin: 0; font-size: .88rem; line-height: 1.55; color: var(--cc-heartwood); }
@media (max-width: 560px) { .post-card img { width: 72px; height: 72px; } }

/* --- Footer ----------------------------------------------------------------- */

.site-footer { padding-block: 2.5rem; }
.footer-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; font-size: .85rem; color: var(--cc-heartwood); }
.footer-brand { display: flex; align-items: center; gap: .5rem; }
.footer-brand img { height: 2.6rem; width: auto; }
.site-footer a { color: var(--cc-heartwood); }
.site-footer a:hover { color: var(--cc-russet); }

/* --- Reveal on scroll -------------------------------------------------------- */

.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.js .reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; transition: none; } }

:focus-visible { outline: 3px solid var(--cc-russet); outline-offset: 2px; }