:root{
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Manrope", var(--font-sans);
  --font-mono: "Space Grotesk", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;

  /* Light (when explicitly selected) */
  --surface: #f7f9fb;
  --surface-low: #f2f4f6;
  --surface-lowest: #ffffff;
  --surface-high: #e6e8ea;
  --surface-highest: #d1d5db;
  --surface-bright: #ffffff;

  --primary: #0b1220;
  --primary-container: #131b2e;

  /* Accent: Ozar brand orange (light mode = darker shade for contrast on #f7f9fb) */
  --tertiary: #aa5c02;
  --on-tertiary: #ffffff;
  --accent-link: #0d6efd;

  --outline: rgba(198, 198, 205, 0.22);
  --shadow: 0 10px 30px rgba(10,12,16,0.06);
  --shadow-strong: 0 18px 50px rgba(10,12,16,0.18);

  --r-md: 10px;
  --r-xl: 18px;
  --container: 1480px;

  /* === Configurable knobs === */
  /* Hero image aspect ratio — ONE source of truth.
     Change here to retune every .de-hero-media frame in the theme.
     Try '16/9' (landscape), '1/1' (square), '4/5' (portrait), '3/2', etc.
     There are two responsive overrides below: at narrow desktop / large
     tablet sizes the hero leans portrait (4/5) so the image isn't crushed,
     and on phones it goes 1/1 so the caption stays legible. */
  --hero-aspect: 16/9;
  /* Hero image cosmetics in dark mode — kept subtle by default. Set --hero-img-opacity: 1 to disable. */
  --hero-img-opacity: 0.95;
  --hero-img-blend: normal;
  /* Body background tone in light mode — light gray, not whiteout.
     '#f2f4f6' is the previous tone; bump to '#eef0f3' for slightly grayer feel. */
  --bg-light-base: #eef1f4;
  --bg-light-band: #e3e7ec;
  /* Atmospheric accent orbs */
  --orb-a: var(--tertiary);
  --orb-b: #5b8fbf;
  --orb-c: #c46d2e;
}

/* Comfortable widths for 2K / 4K / ultrawide displays
   - 2560×1440 (2K)   → 1880
   - 3200×1800 / 3360×1890 (5K-scaled retina) → 2400
   - 3840×2160 (true 4K) → 2640
   - 5120+ (ultrawide / Apple Pro Display) → 3200 */
@media (min-width: 1700px){ :root{ --container: 1640px; } }
@media (min-width: 2200px){ :root{ --container: 1880px; } }
@media (min-width: 3100px){ :root{ --container: 2400px; } }
@media (min-width: 3700px){ :root{ --container: 2640px; } }
@media (min-width: 5000px){ :root{ --container: 3200px; } }

/* Hero proportion sweeps as the viewport changes:
   - phone (<=600px) → 1/1 so the caption breathes and the image stays a recognizable square
   - tight-desktop / large-tablet (866–1695px) → 4/5 portrait
                                                  (per Ozar: the landscape 16/9
                                                  crushes the product image in
                                                  this window)
   - wide-desktop / 2K+ (>=1696px) keeps the :root 16/9 default. */
@media (max-width: 600px){
  :root{ --hero-aspect: 1/1; }
}
@media (min-width: 866px) and (max-width: 1695px){
  :root{ --hero-aspect: 4/5; }
}

html.dark,
html[data-theme="dark"]{
  --surface: #0a0c10;
  --surface-low: #13161c;
  --surface-lowest: #1c2128;
  --surface-high: #2d333b;
  --surface-highest: #444c56;
  --surface-bright: #22272e;

  --primary: #ffffff;
  --primary-container: #1c2128;

  --outline: rgba(205, 205, 215, 0.12);
  --shadow: 0 14px 44px rgba(0,0,0,0.28);
  --shadow-strong: 0 22px 70px rgba(0,0,0,0.42);

  /* Accent: Ozar brand orange (dark mode = brighter shade for contrast on #0a0c10) */
  --tertiary: #FF9B00;
  --on-tertiary: #1a0d00;
  --accent-link: #3d8bfd;

  /* Hero image stays cleaner in dark mode (no overlay-blend artefacts) */
  --hero-img-opacity: 1;
  --hero-img-blend: normal;

  /* Atmospheric orbs are brighter in dark mode */
  --orb-a: #FF9B00;
  --orb-b: #4ee0c2;
  --orb-c: #6aa9ff;
}

*{ box-sizing:border-box; }
html, body{ height:100%; }
body{
  margin:0;
  font-family: var(--font-sans);
  background: var(--surface);
  color: var(--primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color .25s ease, color .25s ease;
  position: relative;
  overflow-x: hidden;
}

/* Light-mode body uses a light-gray base (not pure white) */
html[data-theme="light"] body{
  background: var(--bg-light-base);
}

/* ---------- Atmospheric background layers (orbs + faint grid + soft noise) ---------- */
.de-bg-layer{
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.de-bg-grid{
  position: absolute;
  inset: -10%;
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse at center, rgba(0,0,0,0.85) 30%, transparent 78%);
  mask-image: radial-gradient(ellipse at center, rgba(0,0,0,0.85) 30%, transparent 78%);
  animation: deDrift 80s linear infinite;
}
html[data-theme="light"] .de-bg-grid{
  background-image:
    linear-gradient(rgba(20,30,45,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20,30,45,0.05) 1px, transparent 1px);
}
.de-bg-orb{
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  will-change: transform;
}
.de-bg-orb.a{
  width: clamp(360px, 38vw, 620px);
  aspect-ratio: 1/1;
  background: radial-gradient(circle, var(--orb-a) 0%, transparent 68%);
  top: -8%; left: -8%;
  opacity: .28;
  animation: deFloatA 26s ease-in-out infinite alternate;
}
.de-bg-orb.b{
  width: clamp(380px, 40vw, 680px);
  aspect-ratio: 1/1;
  background: radial-gradient(circle, var(--orb-b) 0%, transparent 70%);
  bottom: -12%; right: -10%;
  opacity: .24;
  animation: deFloatB 32s ease-in-out infinite alternate;
}
.de-bg-orb.c{
  width: clamp(280px, 28vw, 460px);
  aspect-ratio: 1/1;
  background: radial-gradient(circle, var(--orb-c) 0%, transparent 70%);
  top: 50%; left: 58%;
  opacity: .18;
  animation: deFloatC 38s ease-in-out infinite alternate;
}
html[data-theme="light"] .de-bg-orb.a,
html[data-theme="light"] .de-bg-orb.b,
html[data-theme="light"] .de-bg-orb.c{ opacity: .14; filter: blur(110px); }

.de-bg-noise{
  position: absolute;
  inset: 0;
  opacity: 0.045;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  mix-blend-mode: overlay;
}
html[data-theme="light"] .de-bg-noise{ opacity: 0.07; }

/* Make sure all main content sits above the bg layer */
header.de-nav-wrap, main, footer.de-footer{ position: relative; z-index: 1; }

@keyframes deDrift{
  from { transform: translate(0,0); }
  to   { transform: translate(-56px,-56px); }
}
@keyframes deFloatA{
  from { transform: translate(0,0) scale(1); }
  to   { transform: translate(70px, 50px) scale(1.1); }
}
@keyframes deFloatB{
  from { transform: translate(0,0) scale(1); }
  to   { transform: translate(-60px,-70px) scale(1.12); }
}
@keyframes deFloatC{
  from { transform: translate(0,0) scale(1); }
  to   { transform: translate(-90px, 40px) scale(0.92); }
}
@media (prefers-reduced-motion: reduce){
  .de-bg-orb, .de-bg-grid{ animation: none; }
}

::selection{
  background: var(--tertiary);
  color: var(--on-tertiary);
}

a{ color: inherit; text-decoration:none; }
a:hover{ color: var(--tertiary); }

.de-container{
  width: 98%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Glass nav + header ---------- */
.glass-nav{
  background: color-mix(in oklab, var(--surface-lowest) 84%, transparent);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

.de-nav-wrap{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  padding: 18px 0;
  transition: padding .25s ease;
}

.de-nav-shell{ max-width: var(--container); margin:0 auto; padding: 0 24px; }
.de-nav{
  border: 1px solid var(--outline);
  border-radius: 999px;
  padding: 14px 28px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  box-shadow: var(--shadow);
  gap: 16px;
}
@media (min-width: 1080px){
  .de-nav{ padding: 14px 32px; }
}
/* On phones the 999px stadium radius is too aggressive — the brand image is
   42px tall, the burger sits next to it, the pill is barely wider than the
   image and reads as a goofy-rounded blob. Drop to a soft rounded rectangle
   (and tighten the side padding) below 720px. The desktop pill stays. */
@media (max-width: 720px){
  .de-nav-wrap{ padding: 12px 0; }
  .de-nav-shell{ padding: 0 14px; }
  .de-nav{
    border-radius: 18px;
    padding: 10px 14px;
    gap: 10px;
  }
}

.de-logo-text{
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.03em;
}

.de-links{ display:none; }
.de-links-list{
  list-style:none;
  display:flex;
  gap: 18px;
  padding:0; margin:0;
  align-items:center;
}

.de-link, .de-link-btn{
  font-size: 14px;
  font-weight: 600;
  color: color-mix(in oklab, var(--primary) 70%, transparent);
  background: transparent;
  border:0;
  cursor:pointer;
  padding: 10px 10px;
  border-radius: 999px;
  transition: background-color .2s ease, color .2s ease;
}

.de-link:hover, .de-link-btn:hover{
  background: color-mix(in oklab, var(--surface-high) 30%, transparent);
  color: var(--primary);
}

.de-actions{ display:flex; gap: 10px; align-items:center; flex-wrap: wrap; justify-content: flex-end; }
.de-svg-icon{ display:block; }
.de-admin-link{
  font-weight: 800;
  font-size: 13px;
  padding: 8px 12px;
  border-radius: 999px;
  color: color-mix(in oklab, var(--primary) 72%, transparent);
  white-space: nowrap;
}
.de-admin-link:hover{
  color: var(--tertiary);
  background: color-mix(in oklab, var(--surface-high) 28%, transparent);
}
.de-icon-btn{
  width: 38px; height: 38px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--primary);
  cursor:pointer;
  display:grid;
  place-items:center;
  transition: background-color .2s ease, border-color .2s ease;
}
.de-icon-btn:hover{
  background: color-mix(in oklab, var(--surface-high) 32%, transparent);
  border-color: var(--outline);
}

.de-cta{
  display:none;
  background: var(--primary);
  color: var(--surface);
  padding: 10px 16px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 13px;
  transition: opacity .2s ease, transform .2s ease;
}
.de-cta:hover{ opacity:.92; transform: translateY(-1px); color: var(--surface); }
.de-cta-full{ display:block; text-align:center; }

.de-burger{
  width: 40px; height: 40px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid transparent;
  cursor:pointer;
  display:flex;
  flex-direction: column;
  justify-content:center;
  gap: 5px;
  padding: 10px;
}
.de-burger:hover{ border-color: var(--outline); background: color-mix(in oklab, var(--surface-high) 30%, transparent); }
.de-burger-line{
  height: 2px; width: 100%;
  background: color-mix(in oklab, var(--primary) 70%, transparent);
  border-radius: 99px;
  transition: transform .2s ease, opacity .2s ease;
}

/* Dropdown */
.has-dropdown{ position: relative; }
.de-chevron{
  display:inline-block;
  width: 10px; height: 10px;
  margin-left: 6px;
  border-right: 1.8px solid currentColor;
  border-bottom: 1.8px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
  opacity: .8;
}
.de-dropdown{
  list-style:none;
  padding: 8px;
  margin: 10px 0 0;
  position:absolute;
  left:0;
  min-width: 190px;
  border-radius: 14px;
  border: 1px solid var(--outline);
  background: color-mix(in oklab, var(--surface-lowest) 92%, transparent);
  box-shadow: var(--shadow-strong);
  display:none;
}
.has-dropdown[data-open="1"] .de-dropdown{ display:block; }
.de-dropdown-link{
  display:block;
  padding: 10px 10px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 14px;
  color: color-mix(in oklab, var(--primary) 78%, transparent);
}
.de-dropdown-link:hover{
  background: color-mix(in oklab, var(--surface-high) 32%, transparent);
  color: var(--primary);
}

/* Mobile menu */
.de-mobile{
  margin-top: 10px;
  border-radius: 18px;
  border: 1px solid var(--outline);
  padding: 14px 14px 16px;
  box-shadow: var(--shadow-strong);
}
.de-mobile-list{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap: 6px; }
.de-mobile-link, .de-mobile-sublink{
  display:flex;
  width:100%;
  justify-content: space-between;
  align-items:center;
  padding: 12px 12px;
  border-radius: 14px;
  font-weight: 700;
  color: color-mix(in oklab, var(--primary) 78%, transparent);
}
.de-mobile-sublink{ font-weight: 650; padding-left: 24px; }
.de-mobile-link:hover, .de-mobile-sublink:hover{
  background: color-mix(in oklab, var(--surface-high) 30%, transparent);
  color: var(--primary);
}
.de-mobile-dropdown-menu{ list-style:none; padding: 0; margin: 0 0 4px; }
.mobile-has-dropdown[data-open="1"] .de-mobile-dropdown-menu{ display:block; }
.de-mobile-footer{
  margin-top: 12px;
  display:flex;
  gap: 10px;
  align-items:center;
  flex-direction: column;
}
.de-mobile-account{
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.de-search{ width:100%; }
.de-search-input{
  width:100%;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--outline);
  background: color-mix(in oklab, var(--surface-lowest) 85%, transparent);
  color: var(--primary);
  outline:none;
}
.de-search-input:focus{ border-color: color-mix(in oklab, var(--tertiary) 80%, #ffffff 20%); }

/* Icons (SVG mask — crisp at any size, follows currentColor) */
.de-icon{
  position: relative;
  width: 20px;
  height: 20px;
  display: block;
  background: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 20px 20px;
  mask-size: 20px 20px;
}
.de-icon-search{
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><path d='M21 21l-4.3-4.3'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><path d='M21 21l-4.3-4.3'/></svg>");
}
/* Show moon icon in dark mode (= "click to go light"); sun icon in light mode (= "click to go dark") */
.de-icon-sun, .de-icon-moon{ display: none; }
html[data-theme="dark"]  .de-icon-moon{ display: block; }
html[data-theme="light"] .de-icon-sun{ display: block; }
.de-icon-sun{
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='4.5'/><path d='M12 2v2.5'/><path d='M12 19.5V22'/><path d='M2 12h2.5'/><path d='M19.5 12H22'/><path d='M4.6 4.6l1.8 1.8'/><path d='M17.6 17.6l1.8 1.8'/><path d='M4.6 19.4l1.8-1.8'/><path d='M17.6 6.4l1.8-1.8'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='4.5'/><path d='M12 2v2.5'/><path d='M12 19.5V22'/><path d='M2 12h2.5'/><path d='M19.5 12H22'/><path d='M4.6 4.6l1.8 1.8'/><path d='M17.6 17.6l1.8 1.8'/><path d='M4.6 19.4l1.8-1.8'/><path d='M17.6 6.4l1.8-1.8'/></svg>");
}
.de-icon-moon{
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z'/></svg>");
}

/* ---------- Page spacing ---------- */
main{ padding-top: 2rem; }

/* ---------- Editorial sections (optional helpers) ---------- */
.de-hero{
  /* Top padding keeps the headline from hugging the nav bar. */
  padding: clamp(20px, 4vw, 48px) 0 60px;
}

/* Rotating hero — all slides overlap in a single grid cell. JS (theme.js
   initHeroRotator) toggles `is-active` on the incoming slide and `is-leaving`
   on the outgoing one, producing a horizontal SLIDE-LEFT rather than a
   cross-fade: the new slide glides in from the right while the old one glides
   out to the left. Transform + opacity only — GPU-composited, so it stays
   smooth on low-power devices where opacity cross-fades look muddy.
   Single-slide pages skip the .has-many flag and behave like a static hero. */
.de-hero-rotator{
  display: grid;
}
.de-hero-rotator > .de-hero-slide{
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(56px);   /* waiting off to the right (next up) */
  /* No transition on the resting state: when JS drops `is-leaving`, the slide
     snaps back off-stage instantly (while invisible) instead of tweening. */
}
.de-hero-rotator > .de-hero-slide.is-active{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(0);
  transition: transform .6s cubic-bezier(.22,.61,.36,1), opacity .45s ease;
  will-change: transform, opacity;
}
.de-hero-rotator > .de-hero-slide.is-leaving{
  opacity: 0;
  visibility: visible;           /* stay visible while it slides out */
  pointer-events: none;
  transform: translateX(-56px);  /* glide out to the left */
  transition: transform .6s cubic-bezier(.22,.61,.36,1), opacity .45s ease;
  will-change: transform, opacity;
}
/* Single-slide pages don't need transitions or the off-stage offset. */
.de-hero-rotator:not(.has-many) > .de-hero-slide{ transition: none; transform: none; }

.de-hero-dots{
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 22px;
}
.de-hero-dot{
  width: 28px;
  height: 4px;
  border: 0;
  border-radius: 99px;
  background: color-mix(in oklab, var(--primary) 22%, transparent);
  padding: 0;
  cursor: pointer;
  transition: background .2s ease, width .2s ease;
}
.de-hero-dot:hover{ background: color-mix(in oklab, var(--primary) 42%, transparent); }
.de-hero-dot.is-active{
  background: var(--tertiary);
  width: 52px;
}
.de-hero-dot:focus-visible{
  outline: 2px solid var(--tertiary);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce){
  .de-hero-rotator > .de-hero-slide,
  .de-hero-rotator > .de-hero-slide.is-active,
  .de-hero-rotator > .de-hero-slide.is-leaving{ transition: none; }
}

.de-hero-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 32px;
  /* Anchor both columns to the top of the row so the media frame doesn't
     float in the middle when its computed (aspect-ratio) height is shorter
     than the text column. Fixes the "décalage" where the image hugged the
     bottom-right of its grid cell. */
  align-items:start;
}
/* When the media frame is taller than the copy, the copy used to pin to the
   top of the row and read as cramped. Center the TEXT column against the row
   height; the media frame stays top-anchored (the décalage fix above). */
.de-hero-grid > div:first-child{
  align-self: center;
}
.de-label{
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .7;
}
.de-h1{
  font-family: var(--font-display);
  font-size: clamp(46px, 7vw, 92px);
  /* 1.08 keeps the two hero lines clearly separated (was .92, which let
     ascenders/descenders nearly collide and read as cramped). */
  line-height: 1.08;
  margin: 16px 0 22px;
  letter-spacing: -0.05em;
}
.de-accent{ color: var(--tertiary); }
.de-lead{
  font-size: 18px;
  line-height: 1.7;
  max-width: 52ch;
  color: color-mix(in oklab, var(--primary) 70%, transparent);
}
.de-btn-row{ display:flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.de-btn{
  display:inline-flex;
  gap: 10px;
  align-items:center;
  padding: 14px 18px;
  border-radius: var(--r-md);
  font-weight: 800;
  font-size: 14px;
  border: 1px solid transparent;
  cursor:pointer;
}
.de-btn-primary{
  background: var(--tertiary);
  color: var(--on-tertiary);
}
.de-btn-primary:hover{ filter: brightness(1.04); transform: translateY(-1px); }
.de-btn-secondary{
  background: var(--surface-high);
  color: var(--primary);
  border-color: var(--outline);
}
.de-btn-secondary:hover{ background: var(--surface-highest); }

.de-midnight{
  border-radius: var(--r-xl);
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-container) 100%);
  box-shadow: var(--shadow-strong);
  overflow:hidden;
  /* border: 1px solid color-mix(in oklab, var(--outline) 70%, transparent); */
}

/* Hero media — ONE source of truth for proportions: `:root --hero-aspect`.
   Change it once at the top of this file and every hero frame follows.
   Width fills the grid cell; height is derived from aspect-ratio. No
   max-height fight, no per-template inline overrides, no orphan vars. */
.de-hero-media{
  position: relative;
  isolation: isolate;
  width: 100%;
  aspect-ratio: var(--hero-aspect);
}
.de-hero-img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: var(--hero-img-opacity, 1);
  mix-blend-mode: var(--hero-img-blend, normal);
  pointer-events: none;
}
/* (The old `.de-hero-media > *:not(img) { position: relative; z-index: 1 }`
   rule was removed — its specificity (0,1,1) was beating .de-hero-caption
   (0,1,0) and clobbering its `position: absolute`. The caption now sets its
   own positioning + z-index below.) */
/* Caption anchored bottom-right with a focused dark backdrop that fades to
   transparent on the left so the image stays the hero, not the chrome. */
.de-hero-media::after{ content: none; } /* superseded by caption backdrop */
.de-hero-caption{
  position: absolute;
  right: 0;
  bottom: 0;
  left: auto;
  max-width: min(70%, 32rem);
  padding: 18px 22px 18px 36px;
  color: #fff;
  z-index: 1;
  text-align: right;
  background: linear-gradient(
    to left,
    rgba(0,0,0,0.72) 0%,
    rgba(0,0,0,0.55) 45%,
    rgba(0,0,0,0)    100%
  );
  border-bottom-right-radius: var(--r-xl);
  /* tiny blur softens the edge between dark text-pad and the bright image */
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.de-hero-caption-title{
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.02em;
  line-height: 1.15;
  text-shadow: 0 1px 2px rgba(0,0,0,0.45);
}
.de-hero-caption-sub{
  opacity: .82;
  font-family: var(--font-mono);
  font-size: 12px;
  margin-top: 4px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.45);
}

.de-featured{
  background: var(--surface-low);
  padding: 62px 0;
}
.de-section-head{
  display:flex;
  align-items:flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
}
.de-h2{
  font-family: var(--font-display);
  font-size: 34px;
  letter-spacing: -0.04em;
  margin:0;
}
.de-tiles{
  display:grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
.de-tile{
  background: var(--surface-lowest);
  /* border: 1px solid var(--outline); */
  border-radius: var(--r-xl);
  overflow:hidden;
  box-shadow: 0 8px 24px rgba(25, 28, 30, 0.04);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.de-tile:hover{
  transform: translateY(-6px);
  box-shadow: var(--shadow-strong);
  border-color: color-mix(in oklab, var(--tertiary) 38%, var(--outline));
}
.de-tile-media{
  aspect-ratio: 16/9;
  background: var(--surface-high);
  overflow: hidden;
  position: relative;
}
.de-tile-img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.de-tile-body{ padding: 22px; }
.de-tile-cat{
  font-family: var(--font-mono);
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 10px;
  color: var(--tertiary);
}
.de-tile-title{
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.03em;
  font-size: 22px;
  margin: 10px 0 10px;
}
.de-tile-excerpt{
  margin:0 0 18px;
  font-size: 14px;
  line-height: 1.7;
  color: color-mix(in oklab, var(--primary) 62%, transparent);
}
.de-tile-meta{
  padding-top: 14px;
  border-top: 1px solid var(--outline);
  display:flex;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 700;
}
.de-tile-meta span:last-child{
  font-family: var(--font-mono);
  opacity: .6;
  font-weight: 600;
}

/* ---------- Long-form editorial ---------- */
/* ---------- Page header (no-hero) — used by leadThanks.php and any other
   sub-page that needs to clearly read as "not the home". Breadcrumbs +
   eyebrow + title + lede. Sits ABOVE the existing main content sections. */
.de-pagehead{
  padding: 130px 0 28px; /* clears the fixed nav-wrap */
}
.de-pagehead-inner{
  max-width: 920px;
  margin: 0 auto;
}
.de-pagehead-crumbs{
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .04em;
  color: color-mix(in oklab, var(--primary) 55%, transparent);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}
.de-pagehead-crumbs a{
  color: inherit;
  border-bottom: 1px dotted transparent;
  transition: color .15s ease, border-color .15s ease;
}
.de-pagehead-crumbs a:hover{
  color: var(--tertiary);
  border-bottom-color: currentColor;
}
.de-pagehead-sep{ opacity: .6; }
.de-pagehead-here{ color: var(--primary); font-weight: 700; }

.de-pagehead-eyebrow-row{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.de-pagehead-pulse{
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--tertiary);
  box-shadow: 0 0 0 0 color-mix(in oklab, var(--tertiary) 45%, transparent);
  animation: dePulse 1.8s infinite;
}
.de-pagehead-routed{
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .72;
}

.de-pagehead-title{
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(34px, 5vw, 56px);
  letter-spacing: -0.035em;
  line-height: 1.06;
  margin: 6px 0 14px;
}
.de-pagehead-lede{
  font-size: 17px;
  line-height: 1.62;
  color: color-mix(in oklab, var(--primary) 78%, transparent);
  margin: 0 0 18px;
  max-width: 56ch;
}

.de-longform{ padding: 70px 0; }
.de-longform-inner{ max-width: 880px; }

/* About section: 2-column layout (2× copy + 1× lead-gen card) */
.de-about-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
  align-items: start;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}
@media (min-width: 980px){
  .de-about-grid{
    grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr);
    gap: 56px;
  }
  /* When the lead form is OFF (CmsConfig::leadFormEnabled = false) there's no
     right-hand card. Rather than leave the copy hugging the left with a dead
     right half, split the EXISTING About copy into a two-column editorial
     layout: the eyebrow + headline sit on the left (sticky), the body + CTA
     flow on the right. Fills the row with real content — no wasted space. */
  .de-about-grid--solo{
    grid-template-columns: 1fr;
  }
  .de-about-grid--solo > .de-about-copy{
    max-width: none;
  }
  /* Selector kept at (0,3,0) so `max-width` beats the later, equal-specificity
     `.de-about-copy .de-longform-inner{ max-width:none }` reset below. */
  .de-about-grid--solo .de-about-copy .de-longform-inner{
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
    gap: clamp(40px, 5vw, 72px);
    align-items: start;
    max-width: 1180px;
    margin-inline: auto;
  }
  .de-about-grid--solo .de-about-head{
    position: sticky;
    top: 110px;
  }
  .de-about-grid--solo .de-about-head .de-longform-title{
    margin-top: 0;      /* align headline with the first body line across the gutter */
  }
}
.de-about-copy .de-longform-inner{ padding: 0; max-width: none; }

/* ---------- Lead-gen card (dating-app intake on About row) ---------- */
.de-leadgen-card{
  position: sticky;
  top: 110px;
  background: var(--surface-lowest);
  border: 1px solid var(--outline);
  border-radius: var(--r-xl);
  padding: 26px 24px 28px;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.de-leadgen-card::before{
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--tertiary) 0%, var(--accent-link, var(--tertiary)) 50%, var(--orb-b) 100%);
  opacity: .85;
}
.de-leadgen-eyebrow{
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--tertiary);
  margin-bottom: 8px;
}
.de-leadgen-title{
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 24px;
  letter-spacing: -0.03em;
  margin: 0 0 6px;
}
.de-leadgen-tagline{
  font-size: 13.5px;
  line-height: 1.55;
  color: color-mix(in oklab, var(--primary) 68%, transparent);
  margin: 0 0 18px;
}
.de-leadgen-form{ display: flex; flex-direction: column; gap: 12px; }
.de-leadgen-field{ display: flex; flex-direction: column; gap: 6px; }
.de-leadgen-field-label{
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  color: color-mix(in oklab, var(--primary) 80%, transparent);
}
.de-leadgen-select,
.de-leadgen-input{
  font: inherit;
  font-size: 14px;
  color: var(--primary);
  background: var(--surface);
  border: 1px solid var(--outline);
  border-radius: var(--r-md);
  padding: 10px 12px;
  outline: none;
  transition: border-color .15s ease, background-color .15s ease;
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
}
.de-leadgen-select{
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%237a7a7a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M1 1l5 5 5-5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px 8px;
  padding-right: 32px;
}
.de-leadgen-select:focus,
.de-leadgen-input:focus{
  border-color: var(--tertiary);
  background: color-mix(in oklab, var(--surface-lowest) 92%, transparent);
}
.de-leadgen-submit{
  width: 100%;
  justify-content: center;
  margin-top: 6px;
  border: none;
  cursor: pointer;
}
.de-leadgen-flash{
  font-size: 13px;
  padding: 10px 12px;
  border-radius: 10px;
  margin: -4px 0 14px;
  line-height: 1.45;
}
.de-leadgen-flash--ok{
  background: color-mix(in oklab, var(--tertiary) 16%, var(--surface-lowest));
  color: var(--primary);
  border: 1px solid color-mix(in oklab, var(--tertiary) 35%, var(--outline));
}
.de-leadgen-flash--err{
  background: color-mix(in oklab, #e55 16%, var(--surface-lowest));
  color: var(--primary);
  border: 1px solid color-mix(in oklab, #e55 35%, var(--outline));
}
@media (max-width: 979px){
  .de-leadgen-card{ position: static; }
}
.de-longform-title{
  font-family: var(--font-display);
  font-size: clamp(30px, 4.4vw, 50px);
  letter-spacing: -0.04em;
  line-height: 1.04;
  margin: 18px 0 28px;
}
.de-longform-body{
  font-size: 17px;
  line-height: 1.75;
  color: color-mix(in oklab, var(--primary) 80%, transparent);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.de-longform-lede{
  font-size: 21px;
  font-weight: 600;
  color: var(--primary);
  line-height: 1.55;
}
.de-pullquote{
  margin: 8px 0;
  padding: 6px 0 6px 22px;
  border-left: 4px solid var(--tertiary);
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(22px, 2.8vw, 28px);
  color: var(--primary);
  line-height: 1.35;
}
.de-longform-cta{
  display: inline-block;
  margin-top: 36px;
  font-weight: 800;
  padding-bottom: 4px;
  border-bottom: 2px solid var(--tertiary);
  color: var(--primary);
}
.de-longform-cta:hover{ color: var(--tertiary); }

/* ---------- Newsletter ---------- */
.de-newsletter{ padding: 30px 0 90px; }
.de-newsletter-card{
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  padding: clamp(36px, 6vw, 80px);
  color: #fff;
}
.de-newsletter-body{
  position: relative;
  z-index: 1;
  max-width: 640px;
}
.de-newsletter-title{
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.04em;
  font-size: clamp(34px, 5vw, 60px);
  line-height: 1.05;
  margin: 0 0 20px;
  color: #fff;
}
.de-newsletter-lead{
  font-size: 17px;
  line-height: 1.7;
  color: rgba(255,255,255,0.72);
  margin: 0 0 28px;
}
.de-newsletter-form{
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.de-newsletter-input{
  flex: 1 1 auto;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: var(--r-md);
  padding: 16px 20px;
  font: inherit;
  font-size: 15px;
  color: #fff;
  outline: none;
  transition: border-color .2s ease, background-color .2s ease;
}
.de-newsletter-input::placeholder{ color: rgba(255,255,255,0.45); }
.de-newsletter-input:focus{
  border-color: var(--tertiary);
  background: rgba(255,255,255,0.12);
}
.de-newsletter-submit{
  white-space: nowrap;
  padding: 16px 26px;
  font-size: 14px;
}
.de-newsletter-note{
  margin-top: 12px;
  font-size: 12px;
  color: rgba(255,255,255,0.55);
}
/* Decorative CSS-only atmospheric backdrop for the newsletter card.
   Two soft orbs + a faint dot grid — same family as the page background. */
.de-newsletter-watermark{ display: none; } /* legacy element kept hidden if still rendered */
.de-newsletter-card::before,
.de-newsletter-card::after{
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
}
.de-newsletter-card::before{
  width: clamp(280px, 38vw, 520px);
  aspect-ratio: 1/1;
  background: radial-gradient(circle, var(--tertiary) 0%, transparent 65%);
  top: -10%; right: -8%;
  opacity: .42;
}
.de-newsletter-card::after{
  width: clamp(260px, 34vw, 480px);
  aspect-ratio: 1/1;
  background: radial-gradient(circle, #4ee0c2 0%, transparent 70%);
  bottom: -18%; right: 30%;
  opacity: .22;
}
.de-newsletter-card{
  background-image:
    radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1.6px),
    linear-gradient(135deg, #0b1220 0%, #131b2e 100%);
  background-size: 22px 22px, 100% 100%;
}

@media (min-width: 720px){
  .de-newsletter-form{ flex-direction: row; align-items: stretch; }
  .de-newsletter-input{ min-width: 0; }
}

/* ---------- Footer ---------- */
.de-footer{
  border-top: 1px solid var(--outline);
  padding: 24px 0;
}
.de-footer-inner{
  display:flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
}
.de-footer-logo{
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.04em;
}
.de-footer-copy{
  font-family: var(--font-mono);
  font-size: 11px;
  opacity: .6;
  margin-top: 4px;
}
.de-footer-links{ display:flex; gap: 16px; flex-wrap: wrap; }
.de-footer-links a{
  font-size: 13px;
  font-weight: 700;
  opacity: .75;
}
.de-footer-links a:hover{ opacity: 1; color: var(--tertiary); }
.de-footer-status{ display:flex; align-items:center; gap: 10px; }
.de-pulse{
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--tertiary);
  box-shadow: 0 0 0 0 rgba(122,167,199,0.45);
  animation: dePulse 1.7s infinite;
}
@keyframes dePulse{
  0%{ box-shadow: 0 0 0 0 rgba(122,167,199,0.45); }
  70%{ box-shadow: 0 0 0 10px rgba(122,167,199,0); }
  100%{ box-shadow: 0 0 0 0 rgba(122,167,199,0); }
}
.de-status-text{
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: .7;
}

/* ---------- Responsive ---------- */
/* ---------- Login modal (front theme; no Bootstrap) ---------- */
html.de-modal-open,
html.de-modal-open body{
  overflow: hidden;
}
.de-modal-backdrop{
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.de-modal-backdrop[hidden]{ display: none !important; }
.de-modal{
  width: 100%;
  max-width: 420px;
  border-radius: var(--r-xl);
  border: 1px solid var(--outline);
  box-shadow: var(--shadow-strong);
  padding: 0;
  max-height: min(90vh, 640px);
  overflow: auto;
  outline: none;
}
.de-modal-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 18px 0;
}
.de-modal-title{
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.03em;
}
.de-modal-body{ padding: 14px 18px 22px; }
.de-modal-close{ flex-shrink: 0; }
.de-icon-close{
  width: 14px;
  height: 14px;
  position: relative;
  display: block;
  /* Cancel the .de-icon base (background:currentColor, shaped by a mask):
     this icon has no mask-image; it draws its X with the ::before/::after
     bars below. Without this override the base paints the whole span as a
     solid square that hides the X (seen on the login modal's close button). */
  background: transparent;
}
.de-icon-close::before,
.de-icon-close::after{
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 14px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}
.de-icon-close::before{ transform: rotate(45deg); }
.de-icon-close::after{ transform: rotate(-45deg); }

.de-login-alert{
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 14px;
  margin-bottom: 14px;
  border: 1px solid var(--outline);
}
.de-login-alert--error{
  background: color-mix(in oklab, #c44 18%, var(--surface-lowest));
  color: var(--primary);
}
.de-login-error-list{ margin: 0; padding-left: 1.1em; }
.de-login-form{ display: flex; flex-direction: column; gap: 14px; }
.de-field{ display: flex; flex-direction: column; gap: 6px; }
.de-field-label{
  font-size: 12px;
  font-weight: 700;
  opacity: .75;
}
.de-field-error{
  font-size: 12px;
  font-weight: 600;
  color: color-mix(in oklab, #e66 70%, var(--primary));
}
.de-input-invalid{
  border-color: color-mix(in oklab, #e55 55%, var(--outline)) !important;
}
.de-check{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
}
.de-check input{ width: 16px; height: 16px; accent-color: var(--tertiary); }
.de-login-submit{ width: 100%; justify-content: center; border: none; }
.de-login-links{ margin-top: 8px; text-align: center; }
.de-login-links-p{
  margin: 8px 0 0;
  font-size: 13px;
  color: color-mix(in oklab, var(--primary) 72%, transparent);
}
.de-login-links a{ color: var(--tertiary); font-weight: 700; }

@media (min-width: 860px){
  .de-links{ display:block; }
  .de-cta{ display:inline-flex; }
  .de-burger{ display:none; }
  .de-mobile{ display:none; }
  .de-hero-grid{ grid-template-columns: 1.11fr .99fr; gap: 2rem; }
  .de-tiles{ grid-template-columns: repeat(3, 1fr); gap: 22px; }
  .de-footer-inner{ flex-direction: row; align-items:center; justify-content: space-between; }
}

/* ===========================================================
   Ozar-brand overrides for the DigitalEditorial theme
   =========================================================== */

/* --- Honeypot: never visible regardless of CSP / env overrides --- */
#userWebSite,
#hpc,
[name="user_website"],
[name="honeypot"]{
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
}
#userWebSite *{ display: none !important; }

/* --- Logo image (switches with theme) ---
   "beyaz" (white) logo reads on dark backgrounds → show in DARK mode.
   "unischeme" (multi-color on transparent) reads on light backgrounds → show in LIGHT mode.
   Default rule renders the logo (so a lone, theme-agnostic image such as
   ozar-logo-unischeme.png shows in both modes). The -dark/-light variants
   only hide when BOTH are present and one should swap with the theme. */
.de-logo-img{ display: block; max-height: 36px; width: auto; }
html[data-theme="light"] .de-logo-img.de-logo-dark{ display: none; }
html[data-theme="dark"]  .de-logo-img.de-logo-light{ display: none; }

/* --- Active nav state --- */
.de-link-item.is-active .de-link{
  color: var(--tertiary);
  background: color-mix(in oklab, var(--surface-high) 18%, transparent);
}

/* --- Language selector (Ozar partial reused under DE nav) --- */
.de-actions .language-selector{
  position: relative;
  display: inline-block;
}
.de-actions .language-toggle{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--primary);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease;
}
.de-actions .language-toggle:hover{
  background: color-mix(in oklab, var(--surface-high) 32%, transparent);
  border-color: var(--outline);
}
.de-actions .language-toggle .dropdown-arrow{ opacity: .6; }
.de-actions .language-dropdown{
  position: absolute;
  /* Anchor flush against the toggle (top: 100%) and absorb the visual gap with
     a transparent padding strip so the cursor can move from toggle → menu
     without leaving the hover area. */
  top: 100%;
  right: 0;
  min-width: 200px;
  margin-top: 0;
  padding-top: 10px;
  display: none;
  z-index: 60;
}
/* The actual styled card lives in a ::before pseudo-fill that sits below the
   transparent bridge strip. */
.de-actions .language-dropdown::before{
  content: "";
  position: absolute;
  top: 10px; left: 0; right: 0;
  height: 100%;
  background: color-mix(in oklab, var(--surface-lowest) 94%, transparent);
  border: 1px solid var(--outline);
  border-radius: 14px;
  box-shadow: var(--shadow-strong);
  z-index: 0;
}
.de-actions .language-dropdown > *{ position: relative; z-index: 1; }
.de-actions .language-selector:hover .language-dropdown,
.de-actions .language-selector:focus-within .language-dropdown{ display: block; }
.de-actions .language-option{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  color: color-mix(in oklab, var(--primary) 80%, transparent);
}
.de-actions .language-option:hover{
  background: color-mix(in oklab, var(--surface-high) 30%, transparent);
  color: var(--primary);
}
.de-actions .language-option.active{
  background: color-mix(in oklab, var(--tertiary) 16%, transparent);
  color: var(--tertiary);
}

/* --- Newsletter card: stronger contrast in BOTH light & dark modes ---
   The card uses the .de-midnight gradient (var(--primary) → var(--primary-container)).
   In light mode `--primary` is near-black, so the card stays dark — we just
   bump the white text opacity for full readability. */
.de-newsletter-card{
  color: #fff;
  background:
    linear-gradient(135deg, #0b1220 0%, #131b2e 100%);
}
.de-newsletter-title,
.de-newsletter-card .de-accent{
  color: #ffffff;
}
.de-newsletter-card .de-accent{
  color: var(--tertiary);
}
.de-newsletter-lead{
  color: rgba(255,255,255,0.86);
  font-weight: 500;
}
.de-newsletter-input{
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.28);
  color: #ffffff;
}
.de-newsletter-input::placeholder{ color: rgba(255,255,255,0.6); }
.de-newsletter-input:focus{
  border-color: var(--tertiary);
  background: rgba(255,255,255,0.18);
}
.de-newsletter-submit{
  background: var(--tertiary);
  color: var(--on-tertiary);
  border: none;
}
.de-newsletter-submit:hover{
  filter: brightness(1.04);
  transform: translateY(-1px);
  color: var(--on-tertiary);
}
.de-newsletter-watermark{
  color: rgba(255,255,255,0.10);
}
.de-newsletter-note{ color: rgba(255,255,255,0.7); }

/* --- Footer (full Ozar 2025 content port) --- */
.de-footer{
  border-top: 1px solid var(--outline);
  padding: 56px 0 28px;
  background: var(--surface-low);
}
.de-footer-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
  padding-bottom: 36px;
}
.de-footer-col{ display: flex; flex-direction: column; gap: 12px; }
.de-footer-h3{
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin: 0 0 6px;
  color: var(--primary);
  opacity: .78;
}
.de-footer-h3-sub{ margin-top: 18px; }
.de-footer-h4{
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .6;
  margin: 0;
}
.de-footer-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.de-footer-list a{
  font-size: 14px;
  font-weight: 600;
  color: color-mix(in oklab, var(--primary) 78%, transparent);
}
.de-footer-list a:hover{ color: var(--tertiary); }

.de-social-links{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.de-social-link{
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid var(--outline);
  color: color-mix(in oklab, var(--primary) 78%, transparent);
  transition: color .2s ease, background-color .2s ease, border-color .2s ease;
}
.de-social-link:hover{
  color: var(--tertiary);
  border-color: color-mix(in oklab, var(--tertiary) 50%, var(--outline));
  background: color-mix(in oklab, var(--tertiary) 8%, transparent);
}

.de-video-feed{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 6px;
}
.de-video-card a{ display: block; color: inherit; }
.de-video-card.video-card-hidden{ display: none; } /* progressively revealed by Ozar2025 scroll script if present */
.de-video-thumbnail{
  position: relative;
  aspect-ratio: 16/9;
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface-high);
}
.de-video-thumbnail img{ width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s ease; }
.de-video-card:hover .de-video-thumbnail img{ transform: scale(1.04); }
.de-video-play{
  position: absolute; inset: 0;
  width: 48px; height: 48px;
  margin: auto;
  border-radius: 50%;
  background: rgba(0,0,0,0.55);
  display: grid; place-items: center;
}
.de-video-play::before{
  content: "";
  width: 0; height: 0;
  border-left: 12px solid #fff;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  transform: translateX(2px);
}
.de-video-duration{
  position: absolute;
  right: 6px; bottom: 6px;
  background: rgba(0,0,0,0.7);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 4px;
}
.de-video-title{
  margin-top: 8px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  color: color-mix(in oklab, var(--primary) 80%, transparent);
}

.de-tweet-feed{ display: flex; flex-direction: column; gap: 14px; margin-top: 8px; }
.de-tweet-card{
  background: var(--surface-lowest);
  border: 1px solid var(--outline);
  border-radius: 14px;
  padding: 14px 16px;
}
.de-tweet-header{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}
.de-tweet-icon{ opacity: .8; }
.de-tweet-author{ font-weight: 800; }
.de-tweet-handle{ font-family: var(--font-mono); opacity: .6; font-weight: 600; }
.de-tweet-body{ margin: 8px 0; font-size: 14px; line-height: 1.55; color: color-mix(in oklab, var(--primary) 80%, transparent); }
.de-tweet-body p{ margin: 0 0 8px; }
.de-tweet-body a{ color: var(--accent-link, var(--tertiary)); }
.de-tweet-image img{
  width: 100%;
  height: auto;
  border-radius: 10px;
  margin-top: 6px;
  display: block;
}
.de-tweet-tags{ display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.de-tweet-tags a{
  font-size: 12px;
  font-weight: 700;
  color: var(--tertiary);
}
.de-tweet-footer{ font-size: 11px; opacity: .6; }
.de-tweet-date{ font-family: var(--font-mono); color: inherit; }

.de-footer-bottom{
  border-top: 1px solid var(--outline);
  padding-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}
.de-footer-brand{ display: flex; flex-direction: column; gap: 4px; }
.de-footer-logo{
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.04em;
  font-size: 18px;
}
.de-footer-credit{
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  opacity: .65;
}
.de-footer-credit a{ color: var(--tertiary); font-weight: 700; }

@media (min-width: 860px){
  .de-footer-grid{
    grid-template-columns: 1fr 1.4fr 1.2fr;
    gap: 48px;
    padding-bottom: 48px;
  }
  .de-video-feed{ grid-template-columns: 1fr 1fr; }
  .de-footer-bottom{
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

/* ===========================================================
   Newsletter + tertiary column (polls, lead-gen — future)
   - Mobile / narrow: tertiary stacks above OR below the card.
   - Desktop ≥1080px: card on left, tertiary column on right.
   - The tertiary column is invisible if empty (no .de-aside-card children).
   =========================================================== */
.de-newsletter-row{
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  align-items: start;
}
.de-aside{
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.de-aside:empty{ display: none; }
.de-aside-card{
  background: var(--surface-lowest);
  border: 1px solid var(--outline);
  border-radius: var(--r-xl);
  padding: 22px;
  box-shadow: var(--shadow);
}
.de-aside-eyebrow{
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tertiary);
  font-weight: 800;
  margin-bottom: 8px;
}
.de-aside-title{
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -0.02em;
  margin: 0 0 6px;
}
.de-aside-note{
  font-size: 13px;
  line-height: 1.55;
  color: color-mix(in oklab, var(--primary) 65%, transparent);
  margin: 0;
}

@media (min-width: 1080px){
  .de-newsletter-row{
    grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr);
    gap: 28px;
  }
}

/* When lead-form is OFF there's no aside column, so the newsletter card
   spans the FULL row. Its interior text stays capped at 640px on the left
   (.de-newsletter-body) while the decorative orbs fill the right — a
   deliberate full-bleed CTA band rather than an off-centre card floating in
   empty space. */
.de-newsletter-row--solo{
  display: block;
}
.de-newsletter-row--solo > .de-newsletter-card{
  max-width: none;
  margin: 0;
}

/* ===========================================================
   Cookie consent — banner (bottom-left) + preferences modal.
   Ported from TekCrunch and retokenised to DigitalEditorial.
   Rendered once from homeLayout (site-wide). Both surfaces ship
   with the `hidden` attribute; theme.js (initCookieConsent) reveals
   the banner only when no consent cookie exists yet. The scoped
   [hidden] rules stay authoritative over the display values (same
   pattern as .de-modal-backdrop[hidden]).
   =========================================================== */
.de-cookie-banner{
  position: fixed;
  left: clamp(14px, 3vw, 28px);
  bottom: clamp(14px, 3vw, 28px);
  z-index: 200;
  width: min(420px, calc(100vw - 28px));
  background: var(--surface-lowest);
  border: 1px solid var(--outline);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-strong);
  padding: 18px 20px;
  color: var(--primary);
}
.de-cookie-banner[hidden]{ display: none !important; }
.de-cookie-banner-head{ display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.de-cookie-banner-head strong{ font-family: var(--font-display); font-size: 15px; font-weight: 800; }
.de-cookie-banner-text{
  margin: 0 0 12px;
  color: color-mix(in oklab, var(--primary) 72%, transparent);
  font-size: 13.5px;
  line-height: 1.55;
}
.de-cookie-actions{ display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.de-cookie-btn{
  font: inherit;
  cursor: pointer;
  border-radius: var(--r-md);
  font-weight: 700;
  font-size: 13px;
  padding: 9px 14px;
  border: 1px solid transparent;
  line-height: 1;
}
.de-cookie-btn--primary{ background: var(--tertiary); color: var(--on-tertiary); }
.de-cookie-btn--primary:hover{ filter: brightness(1.04); }
.de-cookie-btn--ghost{
  border-color: var(--outline);
  color: color-mix(in oklab, var(--primary) 82%, transparent);
  background: transparent;
}
.de-cookie-btn--ghost:hover{ background: var(--surface-high); }
.de-cookie-btn--link{
  color: color-mix(in oklab, var(--primary) 62%, transparent);
  background: transparent;
  font-weight: 700;
  font-size: 13px;
  padding: 9px 4px;
}
.de-cookie-btn--link:hover{ color: var(--tertiary); }
/* The banner's "Accept all" grows to fill; the modal footer's does not. */
.de-cookie-banner .de-cookie-btn--primary{ flex: 1; }

.de-cookie-modal{
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(0, 0, 0, .55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.de-cookie-modal[hidden]{ display: none !important; }
.de-cookie-dialog{
  width: 100%;
  max-width: 560px;
  max-height: 88vh;
  overflow: auto;
  background: var(--surface-lowest);
  border: 1px solid var(--outline);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-strong);
  color: var(--primary);
}
.de-cookie-dialog-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--outline);
}
.de-cookie-dialog-head strong{ font-family: var(--font-display); font-size: 17px; font-weight: 800; }
.de-cookie-close{
  width: 32px;
  height: 32px;
  border-radius: var(--r-md);
  color: color-mix(in oklab, var(--primary) 62%, transparent);
  display: grid;
  place-items: center;
  cursor: pointer;
  border: 0;
  background: transparent;
}
.de-cookie-close:hover{ background: var(--surface-high); color: var(--primary); }
.de-cookie-dialog-body{ padding: 6px 24px 4px; }
.de-cookie-intro{
  color: color-mix(in oklab, var(--primary) 72%, transparent);
  font-size: 14px;
  line-height: 1.6;
  margin: 16px 0 6px;
}
.de-cookie-row{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--outline);
}
.de-cookie-row:last-child{ border-bottom: 0; }
.de-cookie-row-name{ font-size: 14.5px; font-weight: 700; margin-bottom: 3px; }
.de-cookie-row-desc{
  font-size: 13px;
  line-height: 1.5;
  max-width: 44ch;
  color: color-mix(in oklab, var(--primary) 58%, transparent);
}
.de-cookie-row input[type="checkbox"]{ width: 18px; height: 18px; accent-color: var(--tertiary); cursor: pointer; }
.de-cookie-lock{ opacity: .6; }
.de-cookie-lock input[type="checkbox"]{ cursor: default; }
.de-cookie-dialog-foot{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 18px 24px;
  border-top: 1px solid var(--outline);
}
.de-cookie-spacer{ flex: 1; }
@media (max-width: 520px){
  .de-cookie-banner{ width: calc(100vw - 24px); }
}

/* ===========================================================
   In-page video strip (home page "DMARC Aide in action").
   Reuses the global .de-video-card / -thumbnail / -play /
   -duration / -title components from the footer feed, laid out
   as a wider 3-up grid with larger titles.
   =========================================================== */
.de-videos{ padding: 10px 0 60px; }
.de-video-strip{
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
}
.de-video-strip .de-video-title{
  font-size: 14.5px;
  line-height: 1.45;
  margin-top: 10px;
}
@media (min-width: 720px){
  .de-video-strip{ grid-template-columns: repeat(3, 1fr); }
}