/* ==========================================================================
   CapitalXB — Redesign: subpage layer
   --------------------------------------------------------------------------
   Loaded AFTER css/redesign.css on every redesigned page EXCEPT the homepage.
   Holds the components the homepage does not use: long-form article body,
   end-of-article CTA, the resources hub grid, generic product/platform/company
   page layouts, and the FAQ accordion.

   It also deliberately OVERRIDES two components that exist in both places but
   are shaped differently on subpages:
     .imgbreak   — full-bleed band on the homepage, inset rounded card here
     .photoband  — different margins and a .pb-* caption naming

   Ported from the prototype's articles/article.css. Shell rules (tokens,
   header, footer, buttons, typography) were dropped from it because
   css/redesign.css is the single source for those.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Ambient page wash
   Subpages sit on a warm radial wash rather than the homepage's top gradient.
   -------------------------------------------------------------------------- */
body.subpage {
  background: radial-gradient(
      1100px 640px at 84% -8%,
      rgba(6, 102, 235, 0.055),
      transparent 58%
    ),
    radial-gradient(880px 600px at -10% 6%, rgba(25, 28, 31, 0.05), transparent 54%),
    var(--paper);
  background-attachment: fixed;
  line-height: 1.62;
}

body.subpage .page {
  background: none;
}

a:hover {
  color: var(--green-d);
}

/* --------------------------------------------------------------------------
   2. Long-form article
   -------------------------------------------------------------------------- */
.art {
  padding: clamp(34px, 4.5vw, 56px) 0 0;
}

.art-shell {
  max-width: 770px;
}

/* block, but only as wide as its text so the click target stays tight.
   inline-block put it on the same line as the .a-cat that follows it, and the
   margin-bottom then did nothing. */
.a-back {
  display: block;
  width: fit-content;
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--green-d);
  margin-bottom: 34px;
}

.a-back:hover {
  color: var(--ink);
}

.a-cat {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--green-d);
  font-weight: 700;
  margin-bottom: 20px;
}

.a-title {
  font-size: clamp(30px, 4.6vw, 52px);
  letter-spacing: -0.03em;
  line-height: 1.06;
  font-weight: 600;
}

.a-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.03em;
  color: var(--t3);
}

.a-dot {
  color: var(--t3);
}

.a-rule {
  height: 1px;
  /* green lead-in segment, then the hairline */
  background: linear-gradient(90deg, var(--green) 0 46px, var(--line) 46px);
  margin: 34px 0 40px;
}

.a-body {
  font-size: 16px;
  line-height: 1.75;
  color: #2b2f36;
}

.a-body .a-p {
  margin: 0 0 26px;
}

.a-body .a-p:first-child {
  font-size: 18px;
  line-height: 1.65;
  color: var(--ink);
}

.a-body strong {
  font-weight: 700;
  color: var(--ink);
}

.a-h2 {
  font-size: clamp(23px, 2.6vw, 30px);
  letter-spacing: -0.02em;
  line-height: 1.16;
  margin: 46px 0 18px;
  color: var(--ink);
}

/* accent tick above every section heading */
.a-h2::before {
  content: "";
  display: block;
  width: 30px;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--green), var(--green-l));
  margin-bottom: 18px;
}

.a-ul {
  margin: 0 0 26px;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.a-ul li {
  position: relative;
  padding-left: 30px;
  color: #2b2f36;
}

.a-ul li::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 12px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
}

/* inline links inside body copy read as links */
.a-body a {
  color: var(--green-d);
  text-decoration: underline;
  text-decoration-color: rgba(10, 87, 194, 0.34);
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
  transition: text-decoration-color 0.15s ease;
}

.a-body a:hover {
  text-decoration-color: var(--green-d);
}

.a-body blockquote {
  margin: 38px 0;
  padding: 4px 0 4px 26px;
  border-left: 3px solid var(--green);
  font-family: var(--disp);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(21px, 2.4vw, 26px);
  line-height: 1.4;
  color: var(--ink);
}

/* --------------------------------------------------------------------------
   2b. Prose fallback — style .a-body by ELEMENT, not by class
   --------------------------------------------------------------------------
   The legal and blog pages carry hand-maintained content that gets pasted in
   and updated over time, usually without the .a-p / .a-h2 / .a-ul classes.
   These element rules make any well-formed HTML dropped into .a-body read
   correctly on its own. The class rules above are more specific, so pages that
   do carry them are unaffected — declarations here are deliberately identical.

   Leftover Bootstrap classes on that content (mb-35, text-center, col-lg-8 …)
   are inert, since no page loads Bootstrap any more.
   -------------------------------------------------------------------------- */
.a-body p {
  margin: 0 0 26px;
}

.a-body h2,
.a-body h3,
.a-body h4,
.a-body h5,
.a-body h6 {
  font-family: var(--disp);
  font-weight: 600;
  font-size: clamp(23px, 2.6vw, 30px);
  letter-spacing: -0.02em;
  line-height: 1.16;
  margin: 46px 0 18px;
  color: var(--ink);
}

.a-body h4,
.a-body h5,
.a-body h6 {
  font-size: clamp(19px, 2vw, 23px);
}

/* the same accent tick the .a-h2 class gets */
.a-body h2::before,
.a-body h3::before,
.a-body h4::before,
.a-body h5::before,
.a-body h6::before {
  content: "";
  display: block;
  width: 30px;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--green), var(--green-l));
  margin-bottom: 18px;
}

.a-body ul,
.a-body ol {
  margin: 0 0 26px;
  padding: 0 0 0 4px;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.a-body li {
  position: relative;
  padding-left: 30px;
  color: #2b2f36;
}

.a-body li::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 12px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
}

/* numbered lists keep their numbers */
.a-body ol {
  counter-reset: aol;
}

.a-body ol > li {
  counter-increment: aol;
}

.a-body ol > li::before {
  content: counter(aol) ".";
  background: none;
  border-radius: 0;
  width: auto;
  height: auto;
  top: 0;
  left: 0;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 13px;
  color: var(--green-d);
}

.a-body b,
.a-body strong {
  font-weight: 700;
  color: var(--ink);
}

.a-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 30px;
  font-size: 14.5px;
  line-height: 1.55;
}

.a-body th,
.a-body td {
  border: 1px solid var(--line);
  padding: 12px 14px;
  text-align: left;
  vertical-align: top;
}

.a-body th {
  font-family: var(--disp);
  font-weight: 600;
  color: var(--ink);
  background: var(--paper2);
}

.a-body td {
  color: #2b2f36;
}

/* the legacy markup nests content in inert Bootstrap wrappers; make sure a
   trailing paragraph inside one still ends the section cleanly */
.a-body > div > *:last-child {
  margin-bottom: 0;
}

.a-body img {
  border-radius: 14px;
  margin: 8px 0 30px;
}

/* --------------------------------------------------------------------------
   2c. Conventions the hand-maintained content already uses
   These classes come from the source documents, not the design system. They
   are styled here so the content authors can keep writing them.
   -------------------------------------------------------------------------- */

/* sub-section label written as a <p>, e.g. "F. Storage of Data" */
.a-body .policy-subhead {
  font-family: var(--disp);
  font-weight: 600;
  font-size: clamp(16.5px, 1.6vw, 19px);
  letter-spacing: -0.012em;
  line-height: 1.3;
  color: var(--ink);
  margin: 34px 0 14px;
}

.a-body .text-semibold {
  font-weight: 600;
  color: var(--ink);
}

.a-body .text-decoration-underline {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.a-body .webaddress {
  color: var(--green-d);
  word-break: break-word;
}

.a-body .m0 {
  margin: 0;
}

/* wide tables scroll rather than push the page sideways */
.a-body .table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 0 30px;
}

.a-body .table-scroll table {
  margin: 0;
  min-width: 520px;
}

/* --- blog post hero + meta ----------------------------------------------
   The blog posts carry their hero as an inline background-image on a <figure
   class="post-img">, with the date as a child div. Without a height it
   collapsed to a sliver of the image, so give it real dimensions and turn the
   date into a badge. */
.a-body .post-img {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(210px, 30vw, 360px);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--paper2);
  border-radius: 18px;
  overflow: hidden;
  margin: 0 0 26px;
}

.a-body .post-img .date {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(14, 15, 17, 0.72);
  padding: 9px 15px;
  border-radius: 100px;
  margin: clamp(16px, 2vw, 24px);
}

.a-body .post-info {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--t3);
  margin-bottom: 24px;
}

/* the post title is promoted to the page <h1>, leaving this wrapper empty */
.a-body .blog-title:empty {
  display: none;
}

/* --- codes & policies document list ------------------------------------- */
.a-body .codes-policy-head {
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 4px;
}

.a-body .codes-policy-count {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--t3);
}

.a-body .codes-policy-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  transition: padding-left 0.16s ease, background 0.18s ease;
}

.a-body .codes-policy-row:hover {
  padding-left: 8px;
  background: linear-gradient(90deg, rgba(6, 102, 235, 0.05), transparent 60%);
}

.a-body .codes-policy-doc {
  min-width: 0;
}

/* the document name is marked up as a heading — reset it to list-item scale
   and drop the section accent tick */
.a-body .codes-policy-doc h4 {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.4;
  margin: 0;
  font-family: var(--body);
}

.a-body .codes-policy-doc h4::before {
  display: none;
}

.a-body .codes-policy-doc a {
  color: var(--ink);
  text-decoration: none;
}

.a-body .codes-policy-row:hover .codes-policy-doc a {
  color: var(--green-d);
}

.a-body .codes-policy-btn {
  flex: none;
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--green-d);
  border: 1px solid rgba(28, 70, 217, 0.28);
  border-radius: 100px;
  padding: 7px 16px;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

.a-body .codes-policy-btn:hover {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}

@media (max-width: 560px) {
  .a-body .codes-policy-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}

/* --------------------------------------------------------------------------
   3. End-of-article CTA
   -------------------------------------------------------------------------- */
.a-cta {
  position: relative;
  overflow: hidden;
  margin: 48px 0 64px;
  padding: clamp(30px, 4vw, 48px);
  background: radial-gradient(120% 140% at 85% -10%, #24272b 0%, #191c1f 62%);
  border-radius: 24px;
  color: #eef0f3;
  /* prototype had rgba(14,15,17,69,.5) — five components, so the shadow was dropped */
  box-shadow: 0 40px 80px -46px rgba(14, 15, 17, 0.5);
}

.a-cta > * {
  position: relative;
  z-index: 1;
}

/* concentric-ring echo of the page hero motif */
.a-cta::after {
  content: "";
  position: absolute;
  right: -150px;
  bottom: -190px;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(
      circle,
      transparent 78px,
      rgba(125, 178, 255, 0.18) 79px 80.5px,
      transparent 81.5px
    ),
    radial-gradient(
      circle,
      transparent 138px,
      rgba(255, 255, 255, 0.09) 139px 140.5px,
      transparent 141.5px
    ),
    radial-gradient(
      circle,
      transparent 198px,
      rgba(125, 178, 255, 0.11) 199px 200.5px,
      transparent 201.5px
    ),
    radial-gradient(circle at center, rgba(125, 178, 255, 0.9) 0 4px, transparent 5px);
}

.a-cta-eyebrow {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #7db2ff;
  font-weight: 700;
}

.a-cta-h {
  color: #fff;
  font-size: clamp(24px, 3vw, 34px);
  letter-spacing: -0.025em;
  margin-top: 16px;
}

.a-cta-p {
  color: #b7bcc4;
  font-size: 16px;
  line-height: 1.55;
  margin-top: 14px;
  max-width: 52ch;
}

.a-cta-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.a-cta .btn-ghost {
  border-color: rgba(255, 255, 255, 0.32);
  color: #fff;
}

.a-cta .btn-ghost:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.6);
  color: #fff;
}

/* --------------------------------------------------------------------------
   4. Page hero (resources hub, product/company pages)
   -------------------------------------------------------------------------- */
/* Only the top padding is set here. The shorthand used to be
   `padding: X 0 0` plus a padding-left, which zeroed the RIGHT padding and let
   copy run flush to the viewport edge on narrow screens. Horizontal padding is
   `.shell`'s job — whether .shell is on this element or nested inside it. */
.res-hero {
  position: relative;
  overflow: hidden;
  padding-top: clamp(38px, 5vw, 60px);
}

.res-hero > * {
  position: relative;
  z-index: 1;
}

/* concentric radar motif */
.res-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(circle at 90% 46%, #1c46d9 0 5px, transparent 5px),
    radial-gradient(
      circle at 90% 46%,
      transparent 68px,
      rgba(6, 102, 235, 0.22) 68px 69.5px,
      transparent 69.5px,
      transparent 145px,
      rgba(25, 28, 31, 0.14) 145px 146.5px,
      transparent 146.5px,
      transparent 221px,
      rgba(6, 102, 235, 0.16) 221px 222.5px,
      transparent 222.5px,
      transparent 299px,
      rgba(25, 28, 31, 0.12) 299px 300.5px,
      transparent 300.5px
    );
}

@media (max-width: 820px) {
  .res-hero::before {
    opacity: 0.42;
  }
}

.res-eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--green-d);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 14px;
}

.res-eyebrow::before {
  content: "";
  width: 30px;
  height: 2px;
  background: var(--green);
  display: inline-block;
}

.res-title {
  font-size: clamp(34px, 5.4vw, 68px);
  letter-spacing: -0.028em;
  line-height: 1.02;
  margin-top: 20px;
  font-weight: 600;
  max-width: 20ch;
  text-wrap: balance;
}

.res-title .hl {
  color: var(--green-d);
}

.res-lead {
  font-family: var(--body);
  font-size: clamp(14px, 1.3vw, 18px);
  line-height: 1.65;
  color: var(--t2);
  max-width: 66ch;
  margin-top: 20px;
  text-wrap: pretty;
}

.pg-title {
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   5. Resources hub grid
   -------------------------------------------------------------------------- */
.res-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(22px, 2.4vw, 40px);
  margin: 28px 0 clamp(56px, 7vw, 88px);
}

.res-section-h {
  font-size: clamp(24px, 2.8vw, 34px);
  letter-spacing: -0.025em;
  margin-top: clamp(40px, 5vw, 64px);
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

.res-h {
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green-d);
  font-weight: 700;
  display: flex;
  align-items: flex-end;
  min-height: 58px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--indigo);
  margin-bottom: 2px;
}

.res-l {
  display: block;
  padding: 14px 0;
  font-size: 15px;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  transition: color 0.16s ease, padding-left 0.16s ease;
  font-weight: 500;
  line-height: 1.4;
}

.res-l:hover {
  color: var(--green-d);
  padding-left: 7px;
}

@media (max-width: 1120px) {
  .res-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .res-grid {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   6. Generic content pages (products / platform / company)
   -------------------------------------------------------------------------- */
.pg {
  padding: clamp(34px, 4.5vw, 56px) 0 clamp(56px, 7vw, 88px);
}

.pg-intro {
  max-width: 64ch;
  margin-top: 24px;
}

.pg-list {
  display: flex;
  flex-direction: column;
  margin-top: 40px;
  border-top: 1px solid var(--line);
}

.pg-row {
  display: grid;
  grid-template-columns: 64px 1.1fr 1.6fr;
  gap: clamp(16px, 2.4vw, 40px);
  align-items: start;
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
  transition: background 0.18s ease, padding-left 0.2s ease;
}

.pg-row:hover {
  background: linear-gradient(90deg, rgba(6, 102, 235, 0.05), transparent 60%);
  padding-left: 10px;
}

.pg-ix {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--green-d);
}

.pg-name {
  font-family: var(--disp);
  font-weight: 700;
  font-size: clamp(19px, 1.9vw, 23px);
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.15;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.pg-flag {
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--green-d);
  background: rgba(10, 87, 194, 0.1);
  border: 1px solid rgba(10, 87, 194, 0.24);
  padding: 3px 8px;
  border-radius: 20px;
}

.pg-desc {
  font-family: var(--body);
  color: var(--t2);
  font-size: 14px;
  line-height: 1.6;
}

.pg-best {
  display: block;
  margin-top: 10px;
  font-size: 13.5px;
  color: var(--t3);
}

.pg-best b {
  color: var(--ink);
  font-weight: 600;
}

.pg-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 40px;
}

.pg-card,
.mv-card {
  position: relative;
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: clamp(26px, 2.6vw, 36px);
  transition: transform 0.22s ease, box-shadow 0.28s ease, border-color 0.22s ease;
}

.pg-card:hover {
  transform: translateY(-3px);
  /* prototype had rgba(14,15,17,69,.46) — malformed, shadow never rendered */
  box-shadow: 0 34px 66px -42px rgba(14, 15, 17, 0.46);
  border-color: rgba(6, 102, 235, 0.42);
}

.pg-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 3px;
  width: 0;
  background: linear-gradient(90deg, var(--green), var(--green-l));
  transition: width 0.32s ease;
  z-index: 2;
}

.pg-card:hover::before {
  width: 100%;
}

.pg-card-name {
  font-family: var(--disp);
  font-weight: 700;
  font-size: clamp(22px, 2.4vw, 28px);
  letter-spacing: -0.025em;
  color: var(--ink);
}

.pg-card-desc {
  color: var(--t2);
  font-size: 15.5px;
  line-height: 1.6;
  margin-top: 14px;
}

.pg-feats {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pg-feat {
  display: flex;
  gap: 12px;
  font-size: 14.5px;
  color: var(--ink);
}

.pg-arw {
  color: var(--green-d);
  font-weight: 700;
}

@media (max-width: 760px) {
  .pg-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .pg-cards {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   7. FAQ accordion (<details>/<summary>)
   -------------------------------------------------------------------------- */
.faq-wrap {
  margin: 0 0 clamp(56px, 7vw, 88px);
  border-top: 0;
}

.faq-item {
  border-bottom: 1px solid var(--line);
}

.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 0;
  font-family: var(--disp);
  font-weight: 600;
  font-size: clamp(17px, 1.7vw, 20px);
  letter-spacing: -0.015em;
  color: var(--ink);
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-sign {
  flex: none;
  width: 30px;
  height: 30px;
  border: 1px solid var(--line);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  color: var(--green-d);
  font-size: 17px;
  transition: transform 0.2s ease;
}

.faq-item[open] .faq-sign {
  transform: rotate(45deg);
}

.faq-item summary:hover .faq-sign {
  border-color: var(--green);
  color: var(--green-d);
}

.faq-a {
  color: var(--t2);
  font-size: 15.5px;
  line-height: 1.68;
  padding: 0 46px 26px 0;
  max-width: 80ch;
}

/* --------------------------------------------------------------------------
   8. Subpage overrides of shared components
   These intentionally win over css/redesign.css.
   -------------------------------------------------------------------------- */

/* .imgbreak: inset rounded card here, full-bleed on the homepage */
.imgbreak {
  border-radius: 22px;
  height: clamp(210px, 26vw, 340px);
  margin: clamp(28px, 3.4vw, 46px) 0;
  box-shadow: 0 34px 64px -42px rgba(25, 28, 31, 0.45);
}

.imgbreak img,
.imgbreak-cap {
  border-radius: 22px;
}

.imgbreak-cap {
  justify-content: flex-end;
  padding: clamp(22px, 3vw, 42px);
  background: linear-gradient(
    0deg,
    rgba(10, 12, 16, 0.92),
    rgba(10, 12, 16, 0.4) 56%,
    rgba(10, 12, 16, 0.08)
  );
}

.imgbreak-cap .eyb {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.imgbreak-cap h3 {
  font-size: clamp(22px, 2.7vw, 36px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  max-width: 22ch;
}

.imgbreak::after {
  display: none;
}

/* photo statement band — subpage margins + .pb-* caption naming */
.photoband {
  position: relative;
  width: 100%;
  height: clamp(280px, 40vw, 480px);
  border-radius: 24px;
  overflow: hidden;
  margin: clamp(44px, 5.5vw, 72px) 0 clamp(8px, 1vw, 16px);
  box-shadow: 0 40px 80px -46px rgba(14, 15, 17, 0.5);
}

.pb-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photo-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    115deg,
    rgba(14, 15, 17, 0.88),
    rgba(14, 15, 17, 0.55) 52%,
    rgba(14, 15, 17, 0.15) 82%
  );
}

.photo-cap {
  position: absolute;
  left: 0;
  top: 0;
  padding: clamp(30px, 4vw, 56px);
  z-index: 2;
  pointer-events: none;
  max-width: 640px;
}

.pb-eyebrow {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #7db2ff;
  font-weight: 700;
}

.photo-cap h2 {
  color: #fff;
  font-size: clamp(24px, 3vw, 40px);
  letter-spacing: -0.025em;
  margin-top: 16px;
  line-height: 1.08;
}

.pb-i {
  font-style: italic;
  color: #9cc5ff;
}

/* --------------------------------------------------------------------------
   9. Sheen sweeps used by product-page panels
   -------------------------------------------------------------------------- */
@keyframes cglint {
  0% {
    left: -72%;
  }
  55%,
  100% {
    left: 132%;
  }
}

.chal::before {
  content: "";
  position: absolute;
  top: 0;
  left: -72%;
  width: 42%;
  height: 100%;
  background: linear-gradient(
    100deg,
    transparent,
    rgba(255, 255, 255, 0.13),
    transparent
  );
  transform: skewX(-16deg);
  animation: cglint 7s ease-in-out infinite;
  z-index: 0;
  pointer-events: none;
}

.step-card {
  position: relative;
}

.step-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: -72%;
  width: 42%;
  height: 100%;
  background: linear-gradient(
    100deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  transform: skewX(-16deg);
  animation: cglint 6s ease-in-out infinite;
  z-index: 0;
  pointer-events: none;
}

.step-card:nth-child(2)::after {
  animation-delay: 1.4s;
}

.step-card:nth-child(3)::after {
  animation-delay: 2.8s;
}

.step-card:nth-child(4)::after {
  animation-delay: 4.2s;
}

@media (prefers-reduced-motion: reduce) {
  .chal::before,
  .step-card::after {
    animation: none;
    opacity: 0;
  }
}