/*
 * Security & Compliance page sheet — owned by the security-compliance agent.
 * Source of truth: design-import/Security.dc.html, tokens from
 * assets/css/design/base.css. Loaded after base.css by functions.php.
 */

/* ── Scroll-linked fade-up (design: section > div view() timeline) ─────── */
/* ── Section scaffolding ───────────────────────────────────────────────── */
.sec-section {
  padding: 72px 24px;
}

/* White bands with a hairline top rule (BAA, audit). */
.sec-section--white {
  background: #fff;
  border-top: 1px solid var(--d-line);
}

.sec-rail {
  max-width: 1120px;
  margin: 0 auto;
}

/* Anchor chips land clear of the glass sticky header. */
#hipaa,
#baa,
#hosting,
#audit {
  scroll-margin-top: 96px;
}

/* Centered section head (BAA). */
.sec-section-head {
  text-align: center;
  max-width: 560px;
  margin: 0 auto;
}

.sec-section-head h2 {
  font-size: clamp(26px, 3vw, 36px);
  margin: 12px 0 0;
  letter-spacing: -0.02em;
  font-weight: 800;
}

.sec-section-head__lede {
  font-size: 15.5px;
  color: var(--d-body);
  line-height: 1.65;
  margin: 14px 0 0;
}

/* ── Hero ──────────────────────────────────────────────────────────────── */
.sec-hero {
  padding: 72px 24px 56px;
  text-align: center;
}

.sec-hero__rail {
  max-width: 760px;
  margin: 0 auto;
}

.sec-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--d-input-border);
  background: #fff;
  border-radius: 99px;
  padding: 6px 15px;
  font-size: 13px;
  font-weight: 700;
  color: var(--d-green);
}

.sec-hero h1 {
  font-size: clamp(32px, 4.4vw, 50px);
  line-height: 1.08;
  margin: 22px 0 0;
  letter-spacing: -0.025em;
  font-weight: 800;
}

.sec-hero__lead {
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--d-body);
  max-width: 560px;
  margin: 18px auto 0;
  text-wrap: balance;
}

.sec-hero__chips {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 30px;
  flex-wrap: wrap;
}

.sec-chip {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--d-ghost-border);
  background: #fff;
  color: var(--d-green);
  border-radius: 99px;
  padding: 10px 20px;
  font-size: 13.5px;
  font-weight: 700;
  transition: border-color .2s ease;
}

.sec-chip:hover,
.sec-chip:focus-visible {
  border-color: var(--d-green);
  color: var(--d-green);
}

/* ── At-a-glance strip ─────────────────────────────────────────────────── */
.sec-glance {
  padding: 56px 24px 24px;
}

.sec-glance__grid {
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
}

.sec-glance__card {
  background: #fff;
  border: 1px solid var(--d-line);
  border-radius: 14px;
  padding: 22px;
  display: flex;
  gap: 14px;
  align-items: center;
  transition: transform .25s ease, box-shadow .25s ease;
}

.sec-glance__card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(23, 37, 31, .08);
}

.sec-glance__tile {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--d-tile);
  color: var(--d-green);
  display: flex;
  align-items: center;
  justify-content: center;
}

.sec-glance__title {
  font-size: 14.5px;
  font-weight: 800;
}

.sec-glance__sub {
  font-size: 12.5px;
  color: var(--d-body);
  margin-top: 2px;
}

/* ── Shared split layout (hipaa, hosting, audit) ───────────────────────── */
.sec-split {
  display: grid;
  gap: 56px;
  align-items: center;
}

.sec-split--media-right {
  grid-template-columns: 1fr 500px;
}

.sec-split--media-left {
  grid-template-columns: 460px 1fr;
}

.sec-split h2 {
  font-size: clamp(26px, 3vw, 36px);
  margin: 12px 0 0;
  letter-spacing: -0.02em;
  font-weight: 800;
}

.sec-split .d-eyebrow {
  margin: 0;
}

.sec-split__lead {
  font-size: 15.5px;
  color: var(--d-body);
  line-height: 1.65;
  margin: 16px 0 0;
  max-width: 480px;
}

.sec-split__lead + .sec-split__lead {
  margin-top: 12px;
}

.sec-split__media {
  min-width: 0;
}

/* Check rows: titled pairs (hipaa) and single lines (audit). */
.sec-checks {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.sec-checks__row {
  display: flex;
  gap: 13px;
  align-items: flex-start;
}

.sec-checks__mark {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--d-accent);
  display: inline-flex;
}

.sec-checks__title {
  font-size: 14.5px;
  font-weight: 700;
}

.sec-checks__body {
  font-size: 13.5px;
  color: var(--d-body);
  margin-top: 2px;
  line-height: 1.5;
}

.sec-checks__line {
  font-size: 14.5px;
  color: var(--d-body-strong);
}

/* ── Browser-frame chrome (product-media rendered to the design frame) ─── */
.sec-frame .product-window {
  border-radius: 16px;
  border: 1px solid var(--d-frame-border);
  background: #fff;
  box-shadow: 0 20px 56px rgba(23, 37, 31, .1);
}

.sec-frame .product-window__bar {
  justify-content: flex-start;
  min-height: 0;
  gap: 7px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--d-line-soft);
  background: var(--d-frame-bg);
  font-family: var(--d-font);
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
}

.sec-frame .product-window__dots {
  gap: 7px;
}

.sec-frame .product-window__dots span {
  width: 9px;
  height: 9px;
  background: var(--d-frame-dot);
}

.sec-frame .product-media__title {
  flex: none;
  min-width: 0;
  margin-left: 8px;
  font-size: 11.5px;
  color: var(--d-muted-alt);
  background: var(--d-chip-bg);
  border-radius: 6px;
  padding: 3px 12px;
}

.sec-frame .product-media__stage {
  background: #fff;
}

/* ── 2 · BAA cards ─────────────────────────────────────────────────────── */
.sec-baa__grid {
  margin-top: 44px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 14px;
}

.sec-baa__card {
  background: var(--d-bg);
  border: 1px solid var(--d-line-soft);
  border-radius: 16px;
  padding: 28px;
  transition: transform .25s ease, box-shadow .25s ease;
}

.sec-baa__card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(23, 37, 31, .08);
}

.sec-baa__num {
  display: inline-flex;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--d-green);
  color: #fff;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
}

.sec-baa__num--accent {
  background: var(--d-accent);
}

.sec-baa__card h3 {
  font-size: 15.5px;
  font-weight: 800;
  letter-spacing: normal;
  margin: 16px 0 0;
}

.sec-baa__card p {
  font-size: 14px;
  color: var(--d-body);
  line-height: 1.55;
  margin: 8px 0 0;
}

.sec-baa__card--deep {
  background: var(--d-deep);
  border-color: var(--d-deep);
  color: #fff;
}

.sec-baa__card--deep:hover {
  box-shadow: 0 14px 32px rgba(18, 41, 31, .3);
}

.sec-baa__card--deep h3 {
  color: #fff;
}

.sec-baa__card--deep p {
  color: var(--d-dark-body);
}

/* ── 3 · Hosting spec card ─────────────────────────────────────────────── */
.sec-host__card {
  background: #fff;
  border: 1px solid var(--d-line);
  border-radius: 16px;
  padding: 32px;
  min-width: 0;
}

.sec-host__head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sec-host__head h3 {
  font-size: 15.5px;
  font-weight: 800;
  letter-spacing: normal;
  margin: 0;
}

.sec-host__table {
  margin: 20px 0 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.sec-host__row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 0;
  border-bottom: 1px solid var(--d-line-soft);
  font-size: 14px;
}

.sec-host__row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.sec-host__row dt {
  color: var(--d-body);
  margin: 0;
}

.sec-host__row dd {
  font-weight: 700;
  text-align: right;
  margin: 0;
}

/* ── 4 · Audit-log panel (dark, illustrative) ──────────────────────────── */
.sec-log {
  background: var(--d-deep);
  border-radius: 16px;
  padding: 26px;
  box-shadow: 0 20px 56px rgba(18, 41, 31, .25);
  min-width: 0;
}

.sec-log__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.sec-log__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--d-accent);
}

.sec-log__label {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--d-accent-soft);
  text-transform: uppercase;
}

.sec-log__row {
  display: flex;
  gap: 14px;
  align-items: baseline;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.sec-log__time {
  flex-shrink: 0;
  font-size: 12px;
  color: var(--d-accent-soft);
  font-weight: 700;
  min-width: 62px;
}

.sec-log__entry {
  font-size: 13.5px;
  color: var(--d-line);
  line-height: 1.5;
}

.sec-log__entry b {
  font-weight: 700;
  color: #fff;
}

.sec-log__note {
  padding-top: 14px;
  font-size: 12px;
  color: var(--d-dark-muted);
}

/* ── Dark CTA (blends into the footer that follows) ────────────────────── */
.sec-cta {
  background: var(--d-deep);
  color: #fff;
  /* Design: 88px top, footer joins below; 72px matches the .dc footer gap. */
  padding: 88px 24px 72px;
  margin-top: 24px;
}

.sec-cta__rail {
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
}

.sec-cta h2 {
  font-size: clamp(26px, 3vw, 36px);
  margin: 0;
  letter-spacing: -0.02em;
  font-weight: 800;
  color: #fff;
}

.sec-cta__lede {
  font-size: 15.5px;
  color: var(--d-dark-body);
  line-height: 1.6;
  margin: 14px auto 0;
  max-width: 440px;
}

.sec-cta__actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 28px;
  flex-wrap: wrap;
}

.sec-cta__primary {
  background: #fff;
  color: var(--d-deep);
  padding: 14px 28px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
  transition: background .2s ease;
}

.sec-cta__primary:hover,
.sec-cta__primary:focus-visible {
  background: var(--d-tile);
  color: var(--d-deep);
}

/* body.syncrx-site prefix required: the global `body.syncrx-site a` colour rule
   is specificity (0,1,2) and outranks a bare class, which painted this link
   --d-green on the deep-green band at 1.97:1, effectively invisible. */
body.syncrx-site .sec-cta__ghost {
  border: 1.5px solid rgba(255, 255, 255, .3);
  color: #fff;
  padding: 14px 28px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
  transition: border-color .2s ease;
}

body.syncrx-site .sec-cta__ghost:hover,
body.syncrx-site .sec-cta__ghost:focus-visible {
  border-color: var(--d-accent-soft);
  color: #fff;
}

/* ── Responsive (WORK-SUMMARY.md: 2-col ≤900) ──────────────────────────── */
@media (max-width: 900px) {
  .sec-split--media-right,
  .sec-split--media-left {
    grid-template-columns: 1fr;
  }
}

/* ── Motion safety ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .sec-glance__card,
  .sec-baa__card,
  .sec-chip,
  .sec-cta__primary,
  .sec-cta__ghost {
    transition: none;
  }

  .sec-glance__card:hover,
  .sec-baa__card:hover {
    transform: none;
  }
}

/* ── Hero on deep green, matching home, prescribers and pharmacies ────────
   This page previously kept a light hero while the rest of the site moved to
   the green gradient, which is what made the site read as several sites.
   Colours below are the same tokens used on the approved pages, contrast-checked
   against the LIGHTEST point of the gradient: white 10.85:1, sage 5.91:1,
   lede 6.77:1. The hero is pulled up by the sticky header's height so the
   green runs to the top of the page instead of sitting under a white band. */
.sec-hero {
  --srx-header-h: 98px;
  margin-top: calc(-1 * var(--srx-header-h));
  padding-top: calc(72px + var(--srx-header-h));
  background:
    radial-gradient(120% 90% at 50% 0%, var(--d-deep-glow) 0%, transparent 60%),
    linear-gradient(180deg, var(--d-deep-lift) 0%, var(--d-deep) 100%);
  color: #fff;
}

.sec-hero h1 {
  color: #fff;
}

.sec-hero .d-highlight {
  color: var(--c-sage);
}

.sec-hero .d-eyebrow,
.sec-hero .sec-badge {
  color: var(--c-sage);
}

.sec-hero__lead {
  color: var(--d-sage-text);
}