/* Healthcare Content Marketing Agency
 * Refactor only: preserve layout, typography, color, motion and native controls.
 * design-system.css owns tokens, reset and structural defaults.
 * edition.css owns editorial components and their responsive/state variants.
 */

/* Tokens */
:root {
  /* Palette and surfaces */
  --edition-paper: #f5f6f2;
  --edition-ink: #103b40;
  --edition-deep: rgb(var(--edition-deep-rgb));
  --edition-accent: #ad3728;
  --edition-soft: #dbe7e4;
  --edition-deep-rgb: 8,44,49;
  --color-white: #fff;
  --color-action-hover: #872c21;
  --color-divider: #91aaa8;
  --color-rail: #577679;
  --color-nav-border: #789697;
  --color-input-border: #718e8d;
  --color-footer-text: #eff4f0;
  --color-table-header: #f2f6fb;
  --color-cta-support: #b9cbe0;
  --color-footer-description: #b5c7d9;
  --color-footer-link: #cbd7e4;
  --color-footer-divider: #2a3849;
  --color-footer-meta: #aebece;
  --color-menu-shadow: rgba(8,22,38,.4);
  --color-resource-hover: rgba(76,24,223,.23);
  --color-progress-track: rgba(255,255,255,.22);
  --color-glow: rgba(3,185,252,.12);

  /* Semantic aliases */
  --primary: var(--edition-accent);
  --secondary: #0c626a;
  --ground: var(--edition-paper);
  --ink: var(--edition-ink);
  --night: #151926;
  --muted: #466166;
  --line: #9ab3b2;

  /* Spacing */
  --space-2: .5rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-10: 2.5rem;
  --space-14: 3.5rem;
  --space-28: 7rem;
  --space-inline: 1.2rem;
  --space-inline-tight: .7rem;
  --space-control-block: .6rem;
  --space-text-small: 1.1rem;

  /* Typography */
  --font-body: "Source Sans 3",Arial,sans-serif;
  --font-display: "Newsreader",Georgia,serif;
  --font-data: 'DM Sans',Inter,system-ui,-apple-system,Arial,sans-serif;
  --font-size-body: 1rem;
  --font-size-small: .9rem;
  --font-size-label: 13px;
  --font-size-caption: 12px;
  --font-size-lead: 1.1rem;
  --font-size-heading-small: 1.5rem;

  /* Control geometry */
  --header-height-desktop: 82px;
  --header-height-mobile: 74px;
  --control-size: 48px;
  --menu-toggle-size: 44px;
  --logo-size: 38px;

  /* Motion */
  --motion-feedback: 180ms;
  --motion-arrow: 160ms;
  --motion-quick: 200ms;
  --motion-lift: 250ms;
  --motion-button: 270ms;
  --motion-card: 300ms;
  --motion-chapter: 600ms;
  --motion-scene: 650ms;
  --motion-reveal: 800ms;
  --motion-scene-transform: 1200ms;
  --ease-reveal: cubic-bezier(.2,.65,.25,1);

  /* Focus */
  --focus-width: 3px;
  --focus-offset: 5px;
}

/* Foundations and shared components */
 * {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 400 16px/1.7 var(--font-body);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body.menu-open {
  overflow: hidden;
}

a {
  text-decoration: none;
}

button {
  font: inherit;
  cursor: pointer;
}
svg,
img {
  display: block;
  max-width: 100%;
}

p {
  margin: 0;
  color: var(--muted);
}
h2,
h3,
h4 {
  margin: 0;
}


/* Forms */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: var(--focus-width) solid var(--secondary);
  outline-offset: 4px;
}

.skip {
  position: fixed;
  top: -80px;
  left: 20px;
  z-index: 999;
  padding: 12px;
  background: var(--primary);
  color: var(--color-white);
}

.skip:focus {
  top: 12px;
}


/* Navigation */
.site-header {
  border-bottom: 1px solid var(--line);
}

.nav-inner {
  height: 78px;
}

.site-logo {
  letter-spacing: -.035em;
}

.logo-symbol {
  flex: 0 0 37px;
  height: 37px;
  border-radius: 11px;
  background: var(--night);
  position: relative;
  overflow: hidden;
}

.desktop-menu {
  align-items: center;
}

.desktop-menu a {
  transition: color var(--motion-quick);
}

.nav-contact {
  justify-content: center;
  flex-shrink: 0;
  transition: transform var(--motion-lift) ease,box-shadow var(--motion-lift) ease;
}

.nav-contact:hover {
  transform: translateY(-2px);
  box-shadow: 0 15px 30px -18px var(--primary);
}

.nav-toggle {
  display: none;
  margin-left: auto;
  width: var(--menu-toggle-size);
  height: var(--menu-toggle-size);
  background: var(--color-white);
  border: 1px solid var(--line);
  border-radius: 12px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 6px;
}

.nav-toggle span {
  background: var(--ink);
  transition: transform var(--motion-quick);
}

.mobile-menu {
  display: none;
  position: absolute;
  top: 78px;
  left: 0;
  right: 0;
  padding: 18px max(24px,4vw) 28px;
  background: var(--ground);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 24px 45px -32px var(--color-menu-shadow);
}

.mobile-menu[hidden] {
  display: none!important;
}

.mobile-menu>a {
  display: block;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  font-weight: 750;
  color: var(--ink);
}

.mobile-menu .mobile-cta {
  display: block;
  background: var(--primary);
  color: var(--color-white);
  text-align: center;
  border-radius: 14px;
  margin-top: 14px;
}


/* Heroes and media */
.hero-text {
  position: relative;
  z-index: 2;
}

.eyebrow {
  align-items: center;
  gap: 10px;
}

.glow-dot {
  width: 7px;
  height: 7px;
  background: var(--secondary);
  border-radius: 50%;
  box-shadow: 0 0 0 4px var(--color-glow);
}

.button {
  justify-content: space-between;
  transition: transform var(--motion-button) ease,box-shadow var(--motion-button) ease,background var(--motion-button) ease;
}

.button:hover {
  transform: translateY(-3px);
}

.section-intro h2 {
  font-size: clamp(2.25rem,4.2vw,4.6rem);
}


/* Resource index */
.resource-grid {
  grid-template-columns: repeat(3,minmax(0,1fr));
}

.resource-card {
  position: relative;
  transition: transform var(--motion-card) ease,box-shadow var(--motion-card) ease,border-color var(--motion-card) ease;
}

.resource-card:hover {
  border-color: var(--color-resource-hover);
}

.resource-card h3 a:after {
  content: '';
  position: absolute;
  inset: 0;
}

.card-type {
  font: 850 11px ui-monospace,monospace;
}

.card-arrow {
  right: 26px;
  bottom: 20px;
  font-weight: 900;
  font-size: 22px;
}

.case-resource {
  color: var(--color-white);
}

.card-num {
  font: 800 clamp(2.8rem,4vw,4.2rem)/1 var(--font-data);
  letter-spacing: -.06em;
  margin-top: 26px;
}


/* Editorial content and chapter navigation */
.editorial {
  line-height: 1.85;
}

.editorial p {
  margin-bottom: 1.45em;
}

.editorial h2 {
  scroll-margin-top: 110px;
}

.editorial h3 {
  font-size: 1.4rem;
  margin: 1.8em 0 .55em;
}

.editorial li {
  margin: .4em 0;
}

.editorial a {
  text-decoration: underline;
  text-underline-offset: .2em;
}

.editorial table {
  border-collapse: collapse;
  width: 100%;
  min-width: 620px;
}

.editorial th,
.editorial td {
  padding: 14px;
  text-align: left;
  border-bottom: 1px solid var(--line);
}

.editorial th {
  background: var(--color-table-header);
}

.table-scroll {
  overflow-x: auto;
  max-width: 100%;
  border-radius: 16px;
  border: 1px solid var(--line);
}

.article-toc {
  overflow: auto;
}

.article-toc .eyebrow {
  display: block;
  margin-bottom: 15px;
}

.article-toc a {
  margin-bottom: 5px;
  line-height: 1.45;
  transition: background var(--motion-quick),color var(--motion-quick);
}

.article-toc .toc-cta {
  justify-content: space-between;
}

.cta-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
}

.bottom-cta h2 {
  font-size: clamp(2.3rem,4vw,4.5rem);
  max-width: 17ch;
}

.bottom-cta p {
  color: var(--color-cta-support);
  max-width: 60ch;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 20px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.field.span-2 {
  grid-column: span 2;
}

.field label {
  font-size: var(--font-size-label);
  font-weight: 750;
}
.field input,
.field textarea,
.field select {
  width: 100%;
  padding: 14px 16px;
}

.form-note {
  font-size: var(--font-size-caption);
  margin: 16px 0;
}


/* Footer */
.site-footer {
  padding-top: 65px;
}

.foot-columns {
  padding-bottom: 55px;
}

.foot-logo {
  font-size: 17px;
  color: var(--color-white);
  font-weight: 850;
  line-height: 1.25;
  max-width: 300px;
}

.foot-columns>div>p:nth-child(2) {
  font-size: var(--font-size-label);
  color: var(--color-footer-description);
  max-width: 32ch;
  margin-top: 16px;
}

.foot-columns nav {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.foot-columns nav a {
  font-size: var(--font-size-label);
  color: var(--color-footer-link);
}

.foot-columns nav a:hover {
  color: var(--color-white);
}

.foot-bottom {
  border-top: 1px solid var(--color-footer-divider);
  padding: 22px 0;
  color: var(--color-footer-meta);
}


/* Reading controls */
.back-top {
  position: fixed;
  z-index: 90;
  display: grid;
  place-items: center;
  border: none;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
}

.back-top.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.back-top svg.progress {
  position: absolute;
  inset: 0;
  transform: rotate(-90deg);
}

.back-top circle {
  fill: none;
  stroke-width: 2.6;
}

.back-top circle.track {
  stroke: var(--color-progress-track);
}

.back-top circle.trace {
  stroke: var(--color-white);
  stroke-linecap: round;
  stroke-dasharray: 144.51;
  stroke-dashoffset: 144.51;
}

.back-top svg.arrow {
  position: relative;
  z-index: 2;
}


/* Responsive:(max-width:1060px) */
@media(max-width:1060px) {
  .mobile-menu:not([hidden]) {
    display: block;
  }

  .resource-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }

}


/* Responsive:(max-width:720px) */
@media(max-width:720px) {
  .nav-inner {
    height: 72px;
  }

  .hero-buttons a {
    width: 100%;
  }

  .resource-grid {
    grid-template-columns: 1fr;
  }

  .article-toc {
    margin-bottom: 35px;
  }

  .article-toc nav {
    overflow-x: auto;
    padding: 6px 0;
  }

  .article-toc nav a {
    flex-shrink: 0;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

  .field.span-2 {
    grid-column: auto;
  }

  .cta-inner {
    flex-direction: column;
    align-items: start;
  }

  .foot-columns>div {
    grid-column: span 2;
  }

}


/* Responsive:(max-width:420px) */
@media(max-width:420px) {
  .foot-columns>div {
    grid-column: span 1;
  }

  .foot-bottom span {
    display: block;
    margin-bottom: 7px;
  }

}


/* Responsive:(prefers-reduced-motion:reduce) */
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *:before,
  *:after {
    animation: none!important;
    transition-duration: .001ms!important;
  }

}