/* Adobe Fonts kit — Neue Haas Grotesk Text (400/500/700) + Display (100–900).
   @import must be the first statement of the file. */


/* ============================================================
   MDS templates — repeated page sections from the medO Website UI
   Import order: variables.css → components.css → templates.css

   Sections in this file (usage counts across the Figma pages):
     .section             generic centered section wrapper
     .section-hero        product hero, image + gradient overlay (every product page)
     .section-cta         large gradient CTA banner            (14×)
     .section-cta-compact solid centered CTA band              (9×)
     .section-split       media + text two-column              (11×)
     .section-benefits    heading left + benefit list right    (11×)
     .check-list          blue checkmark bullet list (used in splits)

   NOTE: the website uses a 1420px content container with its own
   accent palette (#006afa / #004097 / #003f94) that is not part of
   the MDS tokens — both are exposed as custom properties below.
   ============================================================ */

:root {
  --section-container: 1420px;
  --site-accent: #006afa;
  --site-accent-dark: #004097;
  --site-accent-deep: #003f94;

  /* Point the DS typeface token (variables.css) at the Typekit family —
     this file loads after variables.css, so the override wins everywhere.
     The kit's text family carries 400/500/700; missing weights (600 semibold,
     200/300 light, 800) resolve to the nearest served weight, which matches
     the Figma masters (its "Semi Bold" styles are 700 too). */
  --typography-family-typeface-1: "neue-haas-grotesk-text", "Neue Haas Grotesk Text Pro";
}

/* ── generic section wrapper ── */
.section {
  display: flex;
  justify-content: center;
  padding: var(--spacing-5xl) var(--grid-system-margin); /* 80px / responsive margin */
}
.section-inner {
  width: 100%;
  max-width: var(--section-container);
}
/* --grid-system-margin jumps to 295px at >=1440 (it's the site's outer nav-grid
   margin, not this container's spec) — left alone, that shrinks .section's
   content box to 1330px BEFORE .section-inner's max-width ever gets to apply,
   so every generic-section page (blog, the section shortcodes) rendered ~90px
   narrower / more inset than the page-specific `.xxx-in` containers (alys-in,
   apropos-in, …), which all use the width% recipe instead and land correctly
   on 1420/x=250. Mobile/tablet are unaffected — the padding-derived width
   already matches 88.406% there, since --grid-system-margin's smaller tiers
   were sized for exactly that. Overriding only >=1440, AFTER the base rule
   above so it actually wins the cascade, fixes the mismatch without touching
   the tiers that already work. */
@media (min-width: 1440px) {
  .section { padding-inline: 0; }
  .section-inner {
    width: 100%; /* 1420/1920 */
    margin-inline: auto;
  }
}

/* ============================================================
   Hero — product pages
   <header class="section-hero">
     <div class="section-hero-media"><img …/></div>
     <div class="section-hero-content">
       <h1 class="section-hero-title">…</h1>
       <p class="section-hero-text">…</p>
       <button class="btn-pill btn-primary on-dark">…</button>
     </div>
   </header>
   ============================================================ */
.section-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 568px;
  overflow: hidden;
  color: var(--neutrals-100-white);
  font-family: var(--typography-family-body), "Helvetica Neue", Arial, sans-serif;
}
.section-hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.section-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
  display: block;
}
/* blue gradient wash over the left side */
.section-hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--hero-gradient,
    linear-gradient(90deg, var(--site-accent-deep) 0%, rgba(0, 106, 250, 0.85) 30%, rgba(0, 106, 250, 0) 65%));
}
.section-hero-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-md);
  max-width: 640px;
  padding: var(--spacing-4xl) var(--grid-system-margin);
}
/* typography via DS classes in markup: .h3 .fw-bold / .text-p3 */
.section-hero-text { max-width: 570px; }
.section-hero-content .btn-pill { margin-top: var(--spacing-md); }

/* ============================================================
   CTA — large gradient banner (pre-footer, 14×)
   <section class="section">
     <div class="section-inner section-cta">
       <div class="section-cta-text">
         <h2 class="section-cta-title">…</h2>
         <p class="section-cta-desc">…</p>
       </div>
       <button class="btn-pill btn-primary on-dark">…</button>
     </div>
   </section>
   ============================================================ */
.section-cta {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--spacing-4xl);
  min-height: 494px;
  padding: var(--spacing-3xl) var(--spacing-lg);
  background: var(--cta-gradient,
    linear-gradient(-71deg, var(--site-accent-deep) 3.5%, var(--site-accent) 30.7%, var(--site-accent) 69.7%, var(--site-accent-deep) 89.4%));
  color: var(--neutrals-100-white);
  font-family: var(--typography-family-body), "Helvetica Neue", Arial, sans-serif;
}
/* decorative "1 Ofys" blend texture behind the gradient (optional child) */
.section-cta { position: relative; overflow: hidden; }
.section-cta > * { position: relative; }
.section-cta-texture {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -45%);
  width: 100%;
  max-width: none;
  mix-blend-mode: color-burn;
  opacity: 0.8;
  pointer-events: none;
}
/* centred variant (e.g. the blog newsletter band) — the base CTA pushes its
   text and button to the top/bottom edges of the 494px band; here the block
   sits centred on both axes instead. */
.section-cta-center {
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: var(--spacing-md);
}
.section-cta-center .section-cta-title,
.section-cta-center .section-cta-desc { max-width: none; }
.section-cta-text {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}
/* typography via DS classes in markup: .h4/.h6 .fw-bold / .text-p3/.text-p4 */
.section-cta-title { max-width: 584px; }
.section-cta-desc { max-width: 570px; }
.section-cta > .btn-pill { align-self: flex-end; }

/* ============================================================
   CTA — compact solid band (9×)
   <section class="section-cta-compact">
     <h2 class="section-cta-title">…</h2>
     <p class="section-cta-desc">…</p>
     <div class="section-cta-actions"> buttons… </div>
   </section>
   ============================================================ */
.section-cta-compact {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--spacing-md);
  padding: var(--spacing-3xl) var(--grid-system-margin);
  background: var(--site-accent);
  color: var(--neutrals-100-white);
  font-family: var(--typography-family-body), "Helvetica Neue", Arial, sans-serif;
}
.section-cta-compact .section-cta-title { max-width: 640px; }
.section-cta-compact .section-cta-desc { max-width: 520px; }
.section-cta-actions {
  display: flex;
  gap: var(--spacing-md);
  flex-wrap: wrap;
  justify-content: center;
  margin-top: var(--spacing-md);
}

/* ============================================================
   Split — media + text two-column (11×)
   <section class="section">
     <div class="section-inner section-split">
       <div class="section-split-media"><img …/></div>
       <div class="section-split-content">
         <h2 class="section-split-title">…</h2>
         <p class="section-split-text">…</p>
         <ul class="check-list"> <li>…</li> </ul>
         <button class="btn-pill btn-primary">…</button>
       </div>
     </div>
   </section>
   Add .section-split-reverse to put the media on the right.
   ============================================================ */
.section-split {
  display: flex;
  align-items: center;
  gap: var(--spacing-4xl);
  font-family: var(--typography-family-body), "Helvetica Neue", Arial, sans-serif;
}
.section-split-reverse { flex-direction: row-reverse; }
.section-split-media {
  flex: 0 0 40%;
  border-radius: var(--radius-7md); /* 16px */
  overflow: hidden;
  background: var(--neutrals-300);
}
.section-split-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.section-split-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-md);
}
/* typography via DS classes in markup: .h5 .fw-bold / .text-p3 */
.section-split-title { color: var(--neutrals-950); }
.section-split-text {
  color: var(--neutrals-800);
}
.section-split-content .btn-pill { margin-top: var(--spacing-md); }

/* blue checkmark bullet list */
.check-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}
.check-list li {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-size: var(--typography-size-p3);
  line-height: var(--typography-line-height-p3);
  color: var(--neutrals-950);
}
.check-list li::before {
  content: "";
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--site-accent);
  /* white checkmark */
  -webkit-mask: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%23006afa'/%3E%3Cpath d='M6 10.2l2.6 2.6L14 7.6' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

/* ============================================================
   Benefits — heading left + list card right (11×)
   <section class="section">
     <div class="section-inner section-benefits">
       <div class="section-benefits-intro">
         <h2 class="section-split-title">…</h2>
         <p class="section-split-text">…</p>
         <button class="btn-pill btn-primary">…</button>
       </div>
       <ul class="benefit-list">
         <li class="benefit-item">
           <span class="benefit-icon"> svg </span>
           <span class="benefit-body">
             <span class="benefit-title">…</span>
             <span class="benefit-desc">…</span>
           </span>
         </li>
       </ul>
     </div>
   </section>
   ============================================================ */
.section-benefits {
  display: flex;
  align-items: center;
  gap: var(--spacing-5xl);
  font-family: var(--typography-family-body), "Helvetica Neue", Arial, sans-serif;
}
.section-benefits-intro {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-md);
}
.benefit-list {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 0 0 46%;
  display: flex;
  flex-direction: column;
}
.benefit-item {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-md);
  padding: var(--spacing-md) var(--spacing-lg);
  background: var(--neutrals-100-white);
  border: 1px solid var(--neutrals-400);
}
.benefit-item + .benefit-item { border-top: 0; }
.benefit-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: var(--site-accent);
  margin-top: 2px;
}
.benefit-icon svg { width: 100%; height: 100%; }
.benefit-body {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2xs);
}
.benefit-title {
  color: var(--neutrals-950);
}
.benefit-desc {
  color: var(--neutrals-700);
}

/* ── responsive stacking ── */
@media (max-width: 900px) {
  .section-hero { min-height: 480px; }
  .section-cta {
    min-height: 0;
    align-items: stretch;
  }
  .section-cta > .btn-pill { align-self: flex-start; }
  .section-split,
  .section-split-reverse,
  .section-benefits {
    flex-direction: column;
    align-items: stretch;
  }
  .section-split-media { flex-basis: auto; }
  .benefit-list { flex-basis: auto; }
}