/*
  ZOI website look, built from the approved Figma mockup
  "V3 - 16 Oct 2026" (Draft page, Claude Site options).

  1. NAMED VALUES  - every colour, font and size used on the site
  2. BASICS
  3. HEADER AND MENU
  4. SHARED BUILDING BLOCKS
  5. HOMEPAGE SECTIONS
  6. ZBOSS DEVELOPMENT COMMUNITY PAGE
  7. ABOUT DSR PAGE
  8. ORANGE CUBE PATCHES
  9. NEWS, ARTICLES, FAQ, PRIVACY, THANK-YOU, NOT-FOUND
  10. FOOTER
  11. PHONE WIDTH
*/

/* ===================== 1. NAMED VALUES ===================== */
:root {
  /* Colours */
  --zoi-orange: #F58529;                      /* DSR orange */
  --zoi-text: rgba(255, 255, 255, 0.9);       /* main text */
  --zoi-text-muted: rgba(255, 255, 255, 0.8); /* small notes */
  --zoi-line: rgba(255, 255, 255, 0.22);      /* thin divider lines, box outlines */
  --zoi-line-soft: rgba(255, 255, 255, 0.18); /* section dividers */
  --zoi-card: rgba(255, 255, 255, 0.05);      /* the faint boxes */
  --zoi-black: #111111;                       /* page colour behind the cube pattern */
  --zoi-highlight: rgba(56, 24, 6, 0.96);     /* the dark orange "Continuous Improvement" box */

  /* Background: the black cube pattern, drawn as a clean repeating shape */
  --zoi-cubes: url("images/zoi-2026/cube-tile-black.svg");
  --zoi-cubes-orange: url("images/zoi-2026/cube-tile-orange.svg");
  --zoi-cube-size: 102.5px 179.5px;

  /* Font */
  --zoi-font: "Open Sans", Arial, sans-serif;

  /* Text sizes, from the mockup */
  --zoi-size-hero: 56px;        /* page headlines */
  --zoi-size-hero-2: 40px;      /* "Proven with Zigbee. Expanding Across IoT." */
  --zoi-size-title: 42px;       /* section titles */
  --zoi-size-sub: 24px;         /* sub-headings like "How Members Engage" */
  --zoi-size-level: 28px;       /* membership level names */
  --zoi-size-heading: 20px;     /* orange box headings */
  --zoi-size-lead: 18px;        /* opening paragraphs */
  --zoi-size-body: 17px;        /* normal text */
  --zoi-size-small: 16px;       /* box text, links in the menu */
  --zoi-size-note: 15px;        /* small box text */
  --zoi-size-tiny: 14px;        /* notes, footer */
  --zoi-size-subtitle: 13px;    /* "The evolution of the ZBOSS Open Initiative" */
  --zoi-size-number: 52px;      /* DSR numbers */

  --zoi-weight-extra: 800;
  --zoi-weight-bold: 700;
  --zoi-weight-normal: 400;

  /* Spacing, from the mockup */
  --zoi-page-width: 1200px;     /* 1088px of content plus the side margins */
  --zoi-gutter: 56px;
  --zoi-section-space: 112px;   /* space above and below each section */
  --zoi-gap: 40px;
  --zoi-radius: 6px;            /* corner rounding of the boxes */
  --zoi-icon: 34px;

  /* Orange cube patches: size and strength */
  --zoi-patch-size: 440px;
  --zoi-patch-strength: 0.6;
}

/* ===================== 2. BASICS ===================== */
@font-face {
  font-family: "Open Sans";
  src: url("fonts/open-sans.woff2") format("woff2");
  font-weight: 300 800;
  font-display: swap;
}

* { box-sizing: border-box; }

/* The page never scrolls sideways. The body clips anything that pokes out
   (like the soft edge of an orange patch) so it cannot add empty space
   below the footer. */
html { scroll-behavior: smooth; scroll-padding-top: 110px; overflow-x: hidden; }

body {
  margin: 0;
  font-family: var(--zoi-font);
  font-size: var(--zoi-size-body);
  line-height: 1.5;
  color: var(--zoi-text);
  background: var(--zoi-black) var(--zoi-cubes) 0 0 / var(--zoi-cube-size) repeat;
  overflow: clip;
}

h1, h2, h3, h4, p, ul, ol { margin: 0; }
a { color: var(--zoi-orange); text-decoration: none; }
a:hover { text-decoration: underline; }
img { display: block; max-width: 100%; }

/* Content column: 1088px wide on a computer, with a gap at each side on
   smaller screens. Lines under the menu and above the footer stop at its edges. */
.zoi-container {
  width: calc(100% - 2 * var(--zoi-gutter));
  max-width: calc(var(--zoi-page-width) - 2 * var(--zoi-gutter));
  margin: 0 auto;
}

/* ===================== 3. HEADER AND MENU ===================== */
.zoi-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--zoi-black) var(--zoi-cubes) 0 0 / var(--zoi-cube-size) repeat;
}
.zoi-header .zoi-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0;
  padding-top: 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--zoi-line);
}
.zoi-brand { display: flex; flex-direction: column; gap: 10px; flex: none; }
.zoi-brand img { width: 186px; height: auto; }
.zoi-brand span { font-size: var(--zoi-size-subtitle); line-height: 18px; color: var(--zoi-text); }
.zoi-brand:hover { text-decoration: none; }

.zoi-header nav { display: flex; align-items: center; gap: 28px; }
.zoi-header nav ul { list-style: none; padding: 0; display: flex; gap: 26px; }
.zoi-header nav a { color: var(--zoi-text); font-weight: var(--zoi-weight-bold); font-size: var(--zoi-size-small); white-space: nowrap; }
.zoi-header nav a:hover { color: var(--zoi-orange); text-decoration: none; }
.zoi-header nav a[aria-current="page"] { color: var(--zoi-orange); }
/* "Join ZOI" in the menu: orange text, like the original site; it goes to the form */
.zoi-header nav a.zoi-nav-join { color: var(--zoi-orange); }
.zoi-dsr-logo { width: 88px; height: auto; }

/* ZOI member area button, kept from the current site: orange box, white text */
.zoi-header nav .zoi-member-button {
  background: var(--zoi-orange);
  color: #FFFFFF;
  padding: 8px 16px;
}
.zoi-header nav .zoi-member-button:hover { color: #FFFFFF; opacity: 0.9; }

.zoi-menu-checkbox, .zoi-menu-button { display: none; }

/* ===================== 4. SHARED BUILDING BLOCKS ===================== */
.zoi-section { padding: var(--zoi-section-space) 0; }
.zoi-section-tight-top { padding-top: 72px; }

/* Thin line at the top of a section */
.zoi-divider { border: 0; border-top: 1px solid var(--zoi-line-soft); margin: 0 0 var(--zoi-section-space); }

.zoi-eyebrow {
  font-size: var(--zoi-size-body);
  font-weight: var(--zoi-weight-bold);
  color: var(--zoi-orange);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.zoi-headline {
  font-size: var(--zoi-size-hero);
  font-weight: var(--zoi-weight-extra);
  line-height: 1.3;
  color: var(--zoi-text);
  max-width: 1000px;
}
.zoi-headline .zoi-orange { display: block; color: var(--zoi-orange); }
.zoi-title {
  font-size: var(--zoi-size-title);
  font-weight: var(--zoi-weight-extra);
  line-height: 1.3;
  color: var(--zoi-text);
}
.zoi-orange { color: var(--zoi-orange); }
.zoi-sub {
  font-size: var(--zoi-size-sub);
  font-weight: var(--zoi-weight-bold);
  line-height: 1.4;
  color: var(--zoi-text);
}
.zoi-lead { font-size: var(--zoi-size-lead); line-height: 1.66; max-width: 820px; }
.zoi-lead + .zoi-lead { margin-top: 16px; }

/* Box with the faint fill */
.zoi-card {
  background: var(--zoi-card);
  border-radius: var(--zoi-radius);
  padding: 28px;
}
.zoi-card-heading {
  font-size: var(--zoi-size-heading);
  font-weight: var(--zoi-weight-bold);
  line-height: 1.43;
  color: var(--zoi-orange);
}

/* Icon to the left of an orange heading */
.zoi-icon-heading { display: flex; align-items: center; gap: 17px; }
.zoi-icon-heading img { width: var(--zoi-icon); height: var(--zoi-icon); flex: none; }

/* List with orange round bullets */
.zoi-chevrons { list-style: none; padding: 0 8px 0 0; display: flex; flex-direction: column; gap: 10px; }
.zoi-chevrons li { display: flex; gap: 8px; }
.zoi-chevrons li::before { content: "•"; flex: none; width: 8px; color: var(--zoi-orange); font-weight: var(--zoi-weight-bold); font-size: 16px; line-height: inherit; }
.zoi-chevrons li.zoi-sub-item { padding-left: 26px; }
.zoi-chevrons li.zoi-sub-item::before { content: "–"; font-size: var(--zoi-size-small); line-height: 1.5; }

/* Two equal columns */
.zoi-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--zoi-gap); }

/* Links and buttons */
.zoi-link { font-weight: var(--zoi-weight-bold); font-size: var(--zoi-size-body); line-height: normal; }
.zoi-button {
  display: inline-block;
  padding: 14px 26px;
  border-radius: 4px;
  font-weight: var(--zoi-weight-bold);
  font-size: var(--zoi-size-small);
  background: var(--zoi-orange);
  color: var(--zoi-black);
}
.zoi-button:hover { text-decoration: none; opacity: 0.9; }
.zoi-button-outline { background: none; color: var(--zoi-text); border: 1px solid var(--zoi-line); }

/* Contact form */
.zoi-form { margin-top: 40px; }
/* The Zoho contact form shows straight on the page, with no box of our own.
   Its height leaves room for Zoho's error messages under every field, so the
   form never needs its own scrollbar. Two columns on wider screens, one on phones. */
.zoi-form iframe { display: block; width: 100%; height: 560px; border: 0; background: transparent; }
.zoi-join-lead { margin-top: 25px; }
/* "Proven with Zigbee · Expanding Across IoT": one line with a dot, or two lines without it on phones */
.zoi-phone-break { display: none; }

/* Tables */
.zoi-table-wrap { margin-top: 16px; }
.zoi-table { width: 100%; border-collapse: collapse; font-size: var(--zoi-size-tiny); }
.zoi-table th, .zoi-table td { padding: 14px 12px; border-bottom: 1px solid var(--zoi-line); text-align: center; vertical-align: middle; }
.zoi-table th:first-child, .zoi-table td:first-child { text-align: left; width: 40%; }
.zoi-table th:not(:first-child) { width: 12%; }
.zoi-table thead th { font-size: var(--zoi-size-body); font-weight: var(--zoi-weight-bold); color: var(--zoi-orange); }
.zoi-table .zoi-yes { color: var(--zoi-orange); font-weight: var(--zoi-weight-bold); font-size: var(--zoi-size-heading); }
.zoi-note { margin-top: 14px; font-size: var(--zoi-size-tiny); color: var(--zoi-text-muted); }

/* ===================== 5. HOMEPAGE SECTIONS ===================== */
/* Opening section */
.zoi-hero-2 {
  margin-top: 17px;
  font-size: var(--zoi-size-hero-2);
  font-weight: var(--zoi-weight-bold);
  line-height: 1.28;
  color: var(--zoi-orange);
}
.zoi-hero .zoi-lead { margin-top: 25px; }
.zoi-access { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 40px; }
.zoi-access p { margin-top: 13px; }

.zoi-model-title { margin-top: 56px; }
.zoi-model { display: flex; align-items: center; gap: 11px; margin-top: 17px; }
.zoi-model-card {
  flex: 1 1 0;
  align-self: stretch;
  border: 1px solid var(--zoi-line);
  border-radius: var(--zoi-radius);
  padding: 24px 22px;
}
.zoi-model-card.is-highlight { background: var(--zoi-highlight); border-color: var(--zoi-orange); }
.zoi-model-card h4 { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: var(--zoi-weight-bold); line-height: 1.3; }
.zoi-model-card h4 img { width: 28px; height: 28px; flex: none; }
.zoi-model-card h4 { min-height: 46px; align-items: flex-start; }
.zoi-model-list { margin: 10px 0 0; padding-left: 20px; font-size: var(--zoi-size-note); line-height: 1.5; }
.zoi-model-arrow { width: 20px; height: 27px; flex: none; }

.zoi-outcomes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--zoi-gap); margin-top: 40px; padding-top: 25px; border-top: 1px solid var(--zoi-line); }
.zoi-outcomes img { width: var(--zoi-icon); height: var(--zoi-icon); }
.zoi-outcomes p { margin-top: 11px; font-weight: var(--zoi-weight-bold); }

/* What Members Get */
.zoi-intro-gap { margin-top: 8px; }
.zoi-benefits { list-style: none; padding: 0; margin-top: 25px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px var(--zoi-gap); }
.zoi-benefits li { display: flex; gap: 17px; }
.zoi-benefits img { width: var(--zoi-icon); height: var(--zoi-icon); flex: none; }
.zoi-benefits p { margin-top: 3px; }
.zoi-engage-title { margin-top: 56px; }
.zoi-engage { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.zoi-engage .zoi-card { padding: 18px; }
.zoi-engage h4 { font-size: var(--zoi-size-body); font-weight: var(--zoi-weight-bold); color: var(--zoi-orange); }
.zoi-engage p { margin-top: 8px; font-size: var(--zoi-size-tiny); line-height: 1.55; }

/* Two Ways to Participate */
.zoi-portfolio-title { margin-top: 25px; }
.zoi-portfolio-sub { margin-top: 8px; }
.zoi-portfolio { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin-top: 25px; }
.zoi-portfolio > div > p { margin-top: 11px; }
.zoi-tech { display: flex; flex-direction: column; gap: 8px; margin-top: 31px; }
.zoi-tech .zoi-card { padding: 20px; }
.zoi-tech h4 { font-size: var(--zoi-size-heading); font-weight: var(--zoi-weight-bold); }
.zoi-tech p { margin-top: 4px; }
.zoi-portfolio .zoi-link { display: inline-block; margin-top: 38px; }
.zoi-portfolio .zoi-card.zoi-catalogue { margin-top: 31px; padding: 20px; }
.zoi-catalogue .zoi-chevrons, .zoi-licensing .zoi-chevrons { gap: 14px; }
.zoi-licensing-title { margin-top: 56px; }
.zoi-licensing { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin-top: 20px; }
.zoi-licensing .zoi-card { margin-top: 14px; padding: 20px; }
.zoi-royalties { display: flex; align-items: center; gap: 17px; margin-top: 25px; }
.zoi-royalties strong { font-size: var(--zoi-size-heading); color: var(--zoi-orange); }
.zoi-royalties span { border-left: 1px solid var(--zoi-orange); padding-left: 17px; font-size: var(--zoi-size-note); }

/* Why Join ZOI */
.zoi-audiences { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 40px; }
.zoi-audiences .zoi-chevrons { margin-top: 16px; gap: 12px; font-size: var(--zoi-size-small); }

/* ZOI Community */
.zoi-community { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 40px; }
.zoi-community img { width: 110px; height: 110px; }
.zoi-community-more { margin-top: 32px; text-align: center; font-size: var(--zoi-size-heading); font-weight: var(--zoi-weight-bold); color: var(--zoi-orange); }

/* Explore ZOI */
.zoi-explore .zoi-title { margin-top: 0; }
.zoi-explore .zoi-lead { margin-top: 11px; }

/* ===================== 6. ZBOSS DEVELOPMENT COMMUNITY PAGE ===================== */
.zoi-page-hero { padding-bottom: 72px; }
.zoi-page-hero .zoi-headline { margin-top: 0; }
.zoi-page-hero .zoi-lead { margin-top: 28px; }
.zoi-intro { margin-top: 16px; }
.zoi-intro.zoi-intro-17 { margin-top: 17px; }

.zoi-zboss { display: grid; grid-template-columns: minmax(0, 620fr) minmax(0, 428fr); gap: var(--zoi-gap); align-items: start; margin-top: 16px; }
.zoi-zboss-text p { font-size: var(--zoi-size-body); line-height: 1.65; }
.zoi-zboss-text p + p { margin-top: 16px; }
.zoi-zboss .zoi-chevrons { margin-top: 16px; font-size: var(--zoi-size-note); }

.zoi-included { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 40px; }
.zoi-included .zoi-card { padding: 24px; }
.zoi-included .zoi-chevrons { margin-top: 16px; font-size: var(--zoi-size-note); }
.zoi-sheets { margin-top: 40px; }
.zoi-sheets-heading { color: var(--zoi-text); }
.zoi-sheets ul { list-style: none; padding: 0; margin-top: 14px; display: flex; flex-direction: column; gap: 10px; line-height: normal; }

.zoi-two-boxes { margin-top: 32px; align-items: start; }
.zoi-two-boxes .zoi-chevrons { margin-top: 16px; }
.zoi-two-boxes .zoi-card .zoi-chevrons { font-size: var(--zoi-size-small); }
.zoi-two-boxes .zoi-card p { margin-top: 14px; font-size: var(--zoi-size-small); line-height: 1.65; }

.zoi-levels { display: flex; flex-direction: column; gap: 16px; margin-top: 40px; }
.zoi-level { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: var(--zoi-gap); background: var(--zoi-card); border-radius: var(--zoi-radius); padding: 32px; }
.zoi-level h3 { font-size: var(--zoi-size-level); font-weight: var(--zoi-weight-extra); line-height: 1.25; color: var(--zoi-orange); }
.zoi-level-fit { margin-top: 10px; font-size: var(--zoi-size-note); line-height: 1.55; color: var(--zoi-text-muted); }
.zoi-level-details { font-size: var(--zoi-size-small); }
.zoi-level-details > p { line-height: 1.65; }
.zoi-level-details > p.zoi-level-lead { margin-top: 14px; font-weight: var(--zoi-weight-bold); line-height: 1.5; }
.zoi-level-details .zoi-chevrons { margin-top: 14px; gap: 8px; }
.zoi-features-title, .zoi-fees-title { margin-top: 56px; }

.zoi-fees { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--zoi-gap); margin-top: 16px; }
.zoi-fees strong { display: block; font-size: var(--zoi-size-heading); color: var(--zoi-orange); }
.zoi-fees span { display: block; margin-top: 4px; }

.zoi-cta .zoi-lead { margin-top: 16px; }
.zoi-cta .zoi-button { margin-top: 40px; }

/* ===================== 7. ABOUT DSR PAGE ===================== */
.zoi-about-hero { padding-bottom: 40px; }
.zoi-about { padding-top: 56px; }
.zoi-numbers { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--zoi-gap); margin-top: 34px; }
.zoi-numbers strong { display: block; font-size: var(--zoi-size-number); font-weight: var(--zoi-weight-extra); line-height: 1.22; color: var(--zoi-orange); }
.zoi-numbers span { display: block; margin-top: 8px; }
.zoi-member-of { margin-top: 34px; padding-top: 17px; border-top: 1px solid var(--zoi-line-soft); }
.zoi-member-logos { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-top: 8px; padding: 17px 0; }
.zoi-member-logos img { width: auto; }
.zoi-about-explore .zoi-divider { margin-bottom: 56px; }
.zoi-about-explore .zoi-title { margin-top: 0; }
.zoi-about-explore .zoi-lead { margin-top: 16px; }
.zoi-about-explore .zoi-button { margin-top: 32px; }

/* ===================== 8. ORANGE CUBE PATCHES =====================
   Soft patches of orange cubes, placed on alternating sides of the page.
   They sit exactly on top of the black cubes (accents.js lines them up)
   and fade out softly, so there are no hard edges. Each section says
   which side it glows from and how far down, for example:
   class="zoi-patch zoi-patch-right" style="--patch-y: 0.5"
*/
.zoi-patch { position: relative; }
.zoi-patch::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -300px;
  bottom: -300px;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  background: var(--zoi-cubes-orange) 0 calc(-1 * var(--patch-top, 0px)) / var(--zoi-cube-size) repeat;
  -webkit-mask-image: radial-gradient(circle var(--zoi-patch-size) at var(--patch-x, 0%) calc(300px + (100% - 600px) * var(--patch-y, 0.5)),
    rgba(0, 0, 0, var(--zoi-patch-strength)) 0,
    rgba(0, 0, 0, calc(var(--zoi-patch-strength) * 0.45)) 45%,
    rgba(0, 0, 0, calc(var(--zoi-patch-strength) * 0.12)) 75%,
    rgba(0, 0, 0, 0) 100%);
  mask-image: radial-gradient(circle var(--zoi-patch-size) at var(--patch-x, 0%) calc(300px + (100% - 600px) * var(--patch-y, 0.5)),
    rgba(0, 0, 0, var(--zoi-patch-strength)) 0,
    rgba(0, 0, 0, calc(var(--zoi-patch-strength) * 0.45)) 45%,
    rgba(0, 0, 0, calc(var(--zoi-patch-strength) * 0.12)) 75%,
    rgba(0, 0, 0, 0) 100%);
}
.zoi-patch-left { --patch-x: 0%; }
.zoi-patch-right { --patch-x: 100%; }
html.zoi-patches-ready .zoi-patch::before { opacity: 1; }

/* A second patch on the same block, for the long pages (news, articles, FAQ,
   privacy). Same look, placed with --patch2-y and zoi-patch2-left/right. */
.zoi-patch-2::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -300px;
  bottom: -300px;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  background: var(--zoi-cubes-orange) 0 calc(-1 * var(--patch-top, 0px)) / var(--zoi-cube-size) repeat;
  -webkit-mask-image: radial-gradient(circle var(--zoi-patch-size) at var(--patch2-x, 0%) calc(300px + (100% - 600px) * var(--patch2-y, 0.5)),
    rgba(0, 0, 0, var(--zoi-patch-strength)) 0,
    rgba(0, 0, 0, calc(var(--zoi-patch-strength) * 0.45)) 45%,
    rgba(0, 0, 0, calc(var(--zoi-patch-strength) * 0.12)) 75%,
    rgba(0, 0, 0, 0) 100%);
  mask-image: radial-gradient(circle var(--zoi-patch-size) at var(--patch2-x, 0%) calc(300px + (100% - 600px) * var(--patch2-y, 0.5)),
    rgba(0, 0, 0, var(--zoi-patch-strength)) 0,
    rgba(0, 0, 0, calc(var(--zoi-patch-strength) * 0.45)) 45%,
    rgba(0, 0, 0, calc(var(--zoi-patch-strength) * 0.12)) 75%,
    rgba(0, 0, 0, 0) 100%);
}
.zoi-patch2-left { --patch2-x: 0%; }
.zoi-patch2-right { --patch2-x: 100%; }
html.zoi-patches-ready .zoi-patch-2::after { opacity: 1; }

/* Soft dark shadow behind words, so text stays readable over the orange */
.zoi-patch :is(h2, h3, h4, p, li, span, strong, a:not(.zoi-button)) {
  text-shadow: 0 0 14px rgba(17, 17, 17, 0.9), 0 0 28px rgba(17, 17, 17, 0.7);
}

/* ===================== 9. NEWS, ARTICLES, FAQ, PRIVACY, THANK-YOU, NOT-FOUND =====================
   Built from the V3 designs "V3 Updates and News page", "V3 News article page
   (layout for every article)", "V3 FAQ page" and "V3 Privacy Policy page".
   The thank-you and not-found pages follow the same look. */

/* The content column, the same width as on every other page */
.updates-page .container, .article-heading, .article-content, .simple-page .container,
.not-found-page .container, .thank-you {
  width: calc(100% - 2 * var(--zoi-gutter));
  max-width: calc(var(--zoi-page-width) - 2 * var(--zoi-gutter));
  margin: 0 auto;
}

/* Links inside running text are underlined, as in the designs */
.updates-page .preview a, .article-content a, .simple-page .container a, .thank-you-link {
  color: var(--zoi-orange);
  text-decoration: underline;
}

/* Updates and News: two columns of boxes */
.updates-page .container { padding: var(--zoi-section-space) 0; }
.updates-container { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--zoi-gap); align-items: start; }
.updates-block, .news-block { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.updates-header { margin: 0 0 16px; font-size: var(--zoi-size-title); font-weight: var(--zoi-weight-extra); line-height: 1.3; color: var(--zoi-text); }
.updates-page .article { padding: 28px; background: var(--zoi-card); border-radius: var(--zoi-radius); overflow-wrap: break-word; }
.updates-page .date { margin: 0; font-size: var(--zoi-size-note); color: var(--zoi-text-muted); }
.updates-page .title-link { display: block; margin-top: 8px; }
.updates-page .title-link:hover { text-decoration: none; }
.updates-page .title-link:hover .article-title { text-decoration: underline; }
.updates-page .article-title { margin: 0; font-size: var(--zoi-size-heading); font-weight: var(--zoi-weight-bold); line-height: 1.43; color: var(--zoi-orange); }
.updates-page .preview { margin-top: 12px; font-size: var(--zoi-size-small); line-height: 1.65; }
.updates-page .preview > * + *, .updates-page .preview li > * + * { margin-top: 12px; }
.updates-page .preview :is(h1, h2, h3, h4) { margin-bottom: 0; font-size: inherit; font-weight: var(--zoi-weight-bold); line-height: inherit; }
.updates-page .preview :is(ul, ol) { margin-bottom: 0; padding: 0; list-style: none; }
.updates-page .preview img { max-width: 100%; height: auto; }
.zoi-spacer { display: none; }
.show-more-button {
  align-self: flex-start;
  margin-top: 16px;
  padding: 14px 26px;
  border: 0;
  border-radius: 4px;
  background: var(--zoi-orange);
  color: var(--zoi-black);
  font-family: var(--zoi-font);
  font-size: var(--zoi-size-small);
  font-weight: var(--zoi-weight-bold);
  line-height: 1.5;
  cursor: pointer;
}
.show-more-button:hover { opacity: 0.9; }

/* News article: title and date, a line, then the text in one readable column */
.article-heading { padding: var(--zoi-section-space) 0 40px; }
.article-header { max-width: 1000px; margin: 0; font-size: var(--zoi-size-title); font-weight: var(--zoi-weight-extra); line-height: 1.3; color: var(--zoi-text); }
.article-heading .date { margin: 16px 0 0; color: var(--zoi-text-muted); }
.article-body { padding-bottom: var(--zoi-section-space); }
.article-content { padding-top: 40px; border-top: 1px solid var(--zoi-line-soft); line-height: 1.65; overflow-wrap: break-word; }
.article-content > * { max-width: 820px; margin-top: 0; margin-bottom: 0; }
.article-content > * + * { margin-top: 16px; }
.article-content > br { display: none; }
.article-content > .zoi-subheading, .article-content > :is(h1, h2, h3, h4) {
  margin-top: 32px;
  font-size: var(--zoi-size-heading);
  font-weight: var(--zoi-weight-bold);
  line-height: 1.5;
  color: var(--zoi-text);
}
.article-content > :first-child { margin-top: 0; }
.article-content :is(ul, ol) { padding: 0; list-style: none; }
.article-content li { position: relative; padding-left: 16px; }
.article-content li + li { margin-top: 10px; }
.article-content li > * { margin: 0; }
.article-content li > * + * { margin-top: 12px; }
.article-content li::before { content: "•"; position: absolute; left: 0; top: 0; color: var(--zoi-orange); font-weight: var(--zoi-weight-bold); font-size: 16px; line-height: inherit; }
.article-content img { max-width: 100%; height: auto; }
.article-image-link, .article-image { display: block; }
.article-image { width: 100%; height: auto; }
/* Videos fill the text column and keep their shape on any screen */
.article-content iframe { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; }

/* FAQ and Privacy Policy: a large title, then each item between thin lines */
.simple-page .container { padding: var(--zoi-section-space) 0; }
.page-header { max-width: 1000px; margin: 0 0 56px; font-size: var(--zoi-size-hero); font-weight: var(--zoi-weight-extra); line-height: 1.3; color: var(--zoi-text); }
.simple-page .container > div { max-width: 820px; padding-bottom: 28px; }
.simple-page p { margin: 8px 0 0; line-height: 1.65; }
.simple-page p.zoi-qa { margin-top: 0; padding-top: 28px; border-top: 1px solid var(--zoi-line-soft); }
.simple-page p.zoi-qa ~ p.zoi-qa { margin-top: 28px; }
.simple-page p.zoi-qa > strong:first-child { display: block; margin-bottom: 8px; font-size: var(--zoi-size-heading); line-height: 1.5; color: var(--zoi-orange); }
.simple-page p.zoi-qa > strong:first-child + br { display: none; }

/* Thank-you page */
.thank-you-section { min-height: calc(100vh - 210px); }
.thank-you { padding: var(--zoi-section-space) 0; }
.thank-you-icon { display: block; width: 50px; height: 50px; }
.thank-you-icon :is(circle, path) { stroke: var(--zoi-orange); }
.thank-you-text { margin-top: 24px; }
.thank-you-header { display: block; max-width: 1000px; font-size: var(--zoi-size-hero); font-weight: var(--zoi-weight-extra); line-height: 1.3; color: var(--zoi-text); }
.thank-you-content { display: block; max-width: 820px; margin-top: 28px; font-size: var(--zoi-size-lead); line-height: 1.66; }

/* Page not found */
.not-found-page { min-height: calc(100vh - 210px); }
.not-found-page .container { padding: var(--zoi-section-space) 0; }
.not-found-title { margin: 0; font-size: var(--zoi-size-hero); font-weight: var(--zoi-weight-extra); line-height: 1.3; color: var(--zoi-text); }
.not-found-page .container a { display: inline-block; margin-top: 40px; padding: 14px 26px; border-radius: 4px; background: var(--zoi-orange); color: var(--zoi-black); font-size: var(--zoi-size-small); font-weight: var(--zoi-weight-bold); }
.not-found-page .container a:hover { text-decoration: none; opacity: 0.9; }

/* ===================== 10. FOOTER ===================== */
.zoi-footer .zoi-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  padding-top: 28px;
  padding-bottom: 40px;
  border-top: 1px solid var(--zoi-line);
  font-size: var(--zoi-size-tiny);
}
.zoi-footer ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 28px; }
.zoi-footer a { color: var(--zoi-text); }
/* DSR logo beside the copyright line, linked to the DSR Corporation site */
.zoi-footer-end { display: flex; align-items: center; gap: 24px; }
.zoi-footer-dsr img { display: block; width: 73px; height: auto; }

/* ===================== 11. PHONE WIDTH ===================== */
/* Tablets turned sideways and small laptop windows: the computer layout,
   with the menu behind the three-line button so it never runs off the edge */
@media (max-width: 1199px) {
  .zoi-menu-button {
    display: flex; flex-direction: column; justify-content: center; gap: 6px;
    width: 44px; height: 44px; cursor: pointer;
  }
  .zoi-menu-button span { display: block; height: 2px; background: var(--zoi-text); }
  .zoi-header .zoi-container { flex-wrap: wrap; }
  .zoi-header nav { display: none; width: 100%; flex-direction: column; align-items: flex-start; gap: 20px; padding: 28px 0 10px; }
  .zoi-header nav ul { flex-direction: column; gap: 16px; }
  .zoi-menu-checkbox:checked ~ nav { display: flex; }
}

@media (max-width: 1120px) {
  .zoi-numbers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .zoi-community { flex-wrap: wrap; justify-content: center; }
}

@media (max-width: 980px) {
  /* Phone sizes, taken from the phone frames of the mockup */
  :root {
    --zoi-size-hero: 36px;
    --zoi-size-hero-2: 26px;
    --zoi-size-title: 30px;
    --zoi-size-sub: 22px;
    --zoi-size-level: 24px;
    --zoi-size-heading: 19px;
    --zoi-size-lead: 17px;
    --zoi-size-number: 44px;
    --zoi-gutter: 20px;
    --zoi-section-space: 64px;
    --zoi-icon: 30px;
    --zoi-patch-size: 220px;
    --zoi-patch-strength: 0.45;
  }
  .zoi-lead { line-height: 1.6; }
  .zoi-lead + .zoi-lead { margin-top: 14px; }
  .zoi-card { padding: 20px; }
  .zoi-card-heading { line-height: 1.5; }
  .zoi-icon-heading { gap: 14px; }

  /* Header: smaller logo */
  .zoi-brand { gap: 8px; }
  .zoi-brand img { width: 150px; }
  .zoi-brand span { line-height: 20px; }

  /* Everything stacks into one column */
  .zoi-access, .zoi-two, .zoi-benefits, .zoi-portfolio, .zoi-licensing, .zoi-audiences,
  .zoi-zboss, .zoi-included, .zoi-fees, .zoi-outcomes, .zoi-engage { grid-template-columns: minmax(0, 1fr); }

  /* Homepage: opening section */
  .zoi-hero-2 { margin-top: 14px; }
  .zoi-hero .zoi-lead { margin-top: 22px; }
  .zoi-access { gap: 14px; margin-top: 14px; }
  .zoi-access .zoi-card-heading { line-height: 1.4; }
  .zoi-access p { margin-top: 10px; font-size: var(--zoi-size-small); }
  .zoi-model-title { margin-top: 40px; }
  .zoi-model { flex-direction: column; align-items: stretch; gap: 8px; margin-top: 14px; }
  .zoi-model-card { padding: 18px 20px; }
  .zoi-model-card h4 { font-size: var(--zoi-size-body); margin-right: -2px; min-height: 0; }
  .zoi-model-list { margin-top: 8px; }
  .zoi-join-lead { margin-top: 22px; }
  .zoi-model-card h4 img { width: 26px; height: 26px; }
  .zoi-model-arrow { align-self: center; transform: rotate(90deg); margin: -3.5px 0; }
  .zoi-outcomes { gap: 24px; margin-top: 32px; padding-top: 24px; }
  .zoi-outcomes > div { display: flex; align-items: center; gap: 14px; }
  .zoi-outcomes p { margin-top: 0; }

  /* Homepage: What Members Get */
  .zoi-intro-gap { margin-top: 10px; }
  .zoi-benefits { gap: 24px; margin-top: 24px; }
  .zoi-benefits li { gap: 14px; }
  .zoi-benefits .zoi-card-heading { line-height: 1.4; }
  .zoi-benefits p { font-size: var(--zoi-size-small); }
  .zoi-engage-title { margin-top: 40px; }
  .zoi-engage { margin-top: 10px; }
  .zoi-engage .zoi-card { padding: 18px; }
  .zoi-engage p { margin-top: 6px; font-size: var(--zoi-size-note); }

  /* Homepage: Two Ways to Participate */
  .zoi-portfolio-title { margin-top: 22px; }
  .zoi-portfolio-sub { margin-top: 6px; font-size: var(--zoi-size-small); }
  .zoi-portfolio { gap: 32px; margin-top: 28px; }
  .zoi-portfolio > div > p { margin-top: 8px; font-size: var(--zoi-size-small); }
  .zoi-tech { gap: 10px; margin-top: 10px; }
  .zoi-tech h4 { font-size: var(--zoi-size-heading); }
  .zoi-tech p { font-size: var(--zoi-size-small); }
  .zoi-portfolio .zoi-link { margin-top: 16px; }
  .zoi-portfolio .zoi-card.zoi-catalogue { margin-top: 10px; }
  .zoi-licensing-title { margin-top: 48px; }
  .zoi-licensing { gap: 24px; margin-top: 24px; }
  .zoi-licensing .zoi-card { margin-top: 10px; }
  .zoi-royalties { flex-direction: column; align-items: flex-start; gap: 4px; margin-top: 28px; border-left: 2px solid var(--zoi-orange); padding-left: 14px; }
  .zoi-royalties strong { line-height: 1.5; }
  .zoi-royalties span { border-left: 0; padding-left: 0; }

  /* Homepage: Why Join ZOI */
  .zoi-audiences { gap: 16px; margin-top: 16px; }
  .zoi-audiences .zoi-card-heading { line-height: 1.4; }
  .zoi-audiences .zoi-chevrons { margin-top: 14px; font-size: var(--zoi-size-note); }

  /* Homepage: ZOI Community and Explore ZOI */
  .zoi-community { display: grid; grid-template-columns: repeat(4, 76px); justify-content: space-between; gap: 16px 0; margin-top: 28px; }
  .zoi-community img { width: 76px; height: 76px; }
  .zoi-community-more { margin-top: 24px; font-size: 18px; }
  .zoi-explore .zoi-lead { margin-top: 10px; }
  .zoi-form { margin-top: 32px; }

  /* ZBOSS Development Community page */
  .zoi-page-hero { padding-bottom: 24px; }
  .zoi-page-hero .zoi-lead { margin-top: 22px; }
  .zoi-zboss-hero .zoi-eyebrow { font-size: var(--zoi-size-small); margin-bottom: 18px; }
  .zoi-zboss-hero .zoi-headline { font-size: 34px; line-height: 1.28; }
  .zoi-section-tight-top { padding-top: 40px; }
  .zoi-intro, .zoi-intro.zoi-intro-17 { margin-top: 14px; }
  .zoi-zboss { gap: 24px; margin-top: 14px; }
  .zoi-zboss-text p { line-height: 1.6; }
  .zoi-zboss-text p + p { margin-top: 14px; }
  .zoi-zboss .zoi-chevrons { margin-top: 14px; }
  .zoi-included { gap: 16px; margin-top: 16px; }
  .zoi-included .zoi-card { padding: 20px; }
  .zoi-included .zoi-chevrons { margin-top: 14px; }
  .zoi-sheets { margin-top: 28px; }
  .zoi-sheets ul { margin-top: 12px; }
  .zoi-two-boxes { gap: 28px; margin-top: 24px; }
  .zoi-two-boxes > div:not(.zoi-card) .zoi-chevrons { margin-top: 12px; font-size: var(--zoi-size-small); }
  .zoi-how-works .zoi-two-boxes > div:not(.zoi-card) .zoi-chevrons { margin-top: 16px; }
  .zoi-two-boxes .zoi-card .zoi-chevrons { margin-top: 14px; font-size: var(--zoi-size-note); }
  .zoi-two-boxes .zoi-card p { margin-top: 12px; font-size: var(--zoi-size-note); }

  /* Membership levels: one column, and the "best fit" line moves to the bottom of the box */
  .zoi-levels { margin-top: 16px; }
  .zoi-level { display: flex; flex-direction: column; gap: 12px; padding: 20px; }
  .zoi-level > div:first-child { display: contents; }
  .zoi-level h3 { order: 1; }
  .zoi-level-details { order: 2; display: flex; flex-direction: column; gap: 12px; font-size: var(--zoi-size-note); }
  .zoi-level-details > p.zoi-level-lead, .zoi-level-details .zoi-chevrons { margin-top: 0; }
  .zoi-level-details .zoi-chevrons { gap: 10px; }
  .zoi-chevrons li::before { width: 7px; }
  .zoi-level-details .zoi-chevrons li.zoi-sub-item { padding-left: 20px; }
  .zoi-level-fit { order: 3; margin-top: 0; font-size: var(--zoi-size-tiny); }
  .zoi-features-title { margin-top: 36px; line-height: 1.5; }
  .zoi-fees-title { margin-top: 36px; }
  .zoi-fees { gap: 16px; }
  .zoi-note { margin-top: 12px; font-size: 13px; }
  .zoi-cta .zoi-lead { margin-top: 14px; }
  .zoi-cta .zoi-button { margin-top: 28px; }

  /* Features table: narrow columns with the headings turned sideways, so it fits a phone screen */
  .zoi-table-wrap { margin-top: 12px; }
  .zoi-table th, .zoi-table td { padding: 10px 4px; line-height: 1.4; }
  .zoi-table th:first-child, .zoi-table td:first-child { width: auto; padding-left: 0; padding-right: 8px; font-size: 12px; }
  .zoi-table td { font-size: 12px; }
  .zoi-table .zoi-yes { font-size: 16px; }
  .zoi-table thead th:not(:first-child) { writing-mode: vertical-rl; transform: rotate(180deg); text-align: left; font-size: 13px; line-height: 1.2; padding: 10px 0; width: 45px; }

  /* About DSR page */
  .zoi-about { padding-top: 40px; }
  .zoi-numbers { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 30px; margin-top: 32px; }
  .zoi-numbers span { margin-top: 6px; font-size: var(--zoi-size-small); }
  .zoi-member-of { margin-top: 32px; padding-top: 16px; }
  .zoi-member-logos { flex-direction: column; align-items: flex-start; gap: 24px; margin-top: 20px; padding: 0; }
  .zoi-about-explore .zoi-divider { margin-bottom: 40px; }

  /* News, articles, FAQ, privacy, thank-you, not-found: from their phone designs */
  .updates-container { grid-template-columns: minmax(0, 1fr); gap: 64px; }
  .updates-header { margin-bottom: 8px; }
  .updates-page .article { padding: 20px; }
  .updates-page .date { font-size: var(--zoi-size-tiny); }
  .updates-page .title-link { margin-top: 6px; }
  .updates-page .article-title { line-height: 1.5; }
  .updates-page .preview { margin-top: 10px; font-size: var(--zoi-size-note); }
  .updates-page .preview > * + *, .updates-page .preview li > * + * { margin-top: 10px; }
  .show-more-button { margin-top: 12px; }
  .article-heading { padding-bottom: 24px; }
  .article-heading .date { margin-top: 14px; font-size: var(--zoi-size-small); }
  .article-content { padding-top: 24px; line-height: 1.6; }
  .article-content > * + * { margin-top: 14px; }
  .article-content > .zoi-subheading, .article-content > :is(h1, h2, h3, h4) { margin-top: 30px; }
  .article-content > :first-child { margin-top: 0; }
  .page-header { margin-bottom: 24px; }
  .simple-page .container > div { padding-bottom: 24px; }
  .simple-page p { margin-top: 6px; line-height: 1.6; }
  .simple-page p.zoi-qa { padding-top: 24px; }
  .simple-page p.zoi-qa ~ p.zoi-qa { margin-top: 24px; }
  .thank-you-content { margin-top: 22px; }

  /* Footer: one link per line */
  .zoi-footer .zoi-container { flex-direction: column; align-items: flex-start; }
  .zoi-footer ul { flex-direction: column; gap: 20px; }
  .zoi-footer-end { flex-direction: column; align-items: flex-start; gap: 20px; }
}

/* Tablets held upright: the phone layout, with more room at the sides and
   two columns where single boxes would otherwise stretch very wide */
@media (min-width: 600px) and (max-width: 980px) {
  :root {
    --zoi-gutter: 40px;
    --zoi-patch-size: 330px;
  }
  .zoi-access, .zoi-benefits, .zoi-engage, .zoi-portfolio, .zoi-licensing, .zoi-audiences,
  .zoi-two, .zoi-fees, .updates-container { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zoi-portfolio, .zoi-licensing, .zoi-two-boxes { column-gap: 24px; }
  .updates-container { gap: 24px; }
  .zoi-numbers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .zoi-outcomes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .zoi-outcomes > div { display: block; }
  .zoi-outcomes p { margin-top: 11px; }
  .zoi-footer .zoi-container { flex-direction: row; align-items: center; }
  .zoi-footer ul { flex-direction: row; gap: 28px; }
  .zoi-footer-end { flex-direction: row; align-items: center; gap: 24px; }
}
@media (min-width: 760px) and (max-width: 980px) {
  .zoi-community { grid-template-columns: repeat(8, 76px); }
}

/* Phones: the contact form stacks into one column and needs more height,
   and the second home headline breaks onto two lines without its dot */
@media (max-width: 599px) {
  .zoi-form iframe { height: 740px; }
  .zoi-join-dot { display: none; }
  .zoi-phone-break { display: inline; }
}