/* ==========================================================================
   INDUSTRY PAGES: challenge -> solution -> use case -> learn -> contact
   --------------------------------------------------------------------------
   Written by tools/industries/journey.py (Logistics first). Builds on
   styles.css and rds-system.css and adds only what they do not provide.
   Behaviour lives in assets/js/industry.js; without it the challenge links
   jump to the solutions and every guide is listed.
   ========================================================================== */

.ind-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   HERO (copy only; the illustration and layout are the page's own)
   -------------------------------------------------------------------------- */
.robo-hero .ind-hero-h1 {
  font-size: clamp(3rem, 5.2vw, 4.6rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
  margin-bottom: 1.5rem;
}
/* The artwork is wide (16:9), so it gets the larger column and runs on past
   the container's edge toward the window; the hero's overflow: hidden keeps
   that from ever scrolling. Below 1025px it sits under the copy, full width. */
.robo-hero .ind-hero-grid { grid-template-columns: minmax(0, .92fr) minmax(0, 1.18fr); gap: clamp(1.5rem, 3vw, 3rem); }
/* the bleed never passes the window's edge by more than the art's own
   transparent margin */
.ind-art-col { position: relative; z-index: 1; margin-right: calc(-1 * min(9vw, 170px, (100vw - 1300px) / 2 + 40px)); }
@media (max-width: 1340px) { .ind-art-col { margin-right: calc(-1 * clamp(0px, 4vw, 56px)); } }
/* stacked: the copy centred over the art, as the site's own phone hero is */
@media (max-width: 1024px) {
  .robo-hero .ind-hero-grid { grid-template-columns: minmax(0, 1fr); text-align: center; }
  .ind-hero-grid .hero-ctas { justify-content: center; }
  .robo-hero .ind-hero-grid .ind-hero-lead, .robo-hero .ind-hero-grid .ind-hero-sub { margin-inline: auto; }
  .ind-art-col { width: 100%; max-width: 860px; margin: -.5rem auto 0; }
}
/* phones: edge to edge (the art carries its own soft margin) */
@media (max-width: 680px) {
  .ind-art-col { width: calc(100% + 2.5rem); max-width: none; margin: -.25rem -1.25rem 0; }
}
/* Japanese glyphs run wide: the headline holds one line beside the art */
:lang(ja) .robo-hero .ind-hero-h1 { font-size: clamp(2.4rem, 3.7vw, 3.4rem); line-height: 1.2; }
/* a long industry name (Technology, Media & Telecommunications) still holds
   two lines in the half column */
.robo-hero .ind-hero-h1-long { font-size: clamp(2.5rem, 3.9vw, 3.5rem); line-height: 1.1; }
:lang(ja) .robo-hero .ind-hero-h1-long { font-size: clamp(2.2rem, 3.4vw, 3.2rem); line-height: 1.25; }
/* a headline set as two chosen lines beside the art (Intelligent /
   Warehousing Solutions): small enough that the longer line always fits */
.robo-hero .ind-hero-h1-two { font-size: clamp(2.2rem, 3.4vw, 3.15rem); line-height: 1.08; }
/* the initials of a name, picked out in the brand blue (T, M, T) */
.robo-hero .ind-hero-h1 .ind-ini { color: var(--primary); }
.robo-hero .ind-hero-sub { max-width: 34em; margin: -.4rem 0 .8rem; font-size: 1.2rem; font-weight: 700; line-height: 1.45; color: var(--midnight); }
.robo-hero .ind-hero-lead {
  max-width: 34em;
  margin-bottom: 2.25rem;
  font-size: 1.2rem;
  line-height: 1.65;
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   1. KEY CHALLENGES: four cards, each naming the problem and its themes
   -------------------------------------------------------------------------- */
.ind-ch { position: relative; z-index: 2; background: #fff; padding-block: clamp(4rem, 8vw, 6rem); }
.ind-ch .section-header,
.ind-sa .section-header { max-width: 780px; margin: 0 auto 3.5rem; }
.ind-ch-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem;
}
/* Each card spans four rows of the grid (number, title, text, points) and
   shares them with its neighbours, so the titles and rules line up across a
   row whatever each card's text length. */
.ind-ch-card {
  --ind-accent: var(--primary);
  position: relative;
  display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; align-content: start;
  padding: 1.9rem 1.6rem 1.6rem;
  background: #fff; border: 1px solid var(--border-color); border-radius: 15px;
  transition: border-color .3s var(--rds-ease-standard), box-shadow .3s var(--rds-ease-standard);
}
.ind-ch-num::before {
  content: ""; display: inline-block; width: 22px; height: 3px; margin-right: .6rem;
  border-radius: 2px; background: var(--ind-accent); vertical-align: middle;
}
.ind-ch-card:hover,
.ind-ch-card:focus-within { border-color: rgba(0, 125, 209, .35); box-shadow: 0 16px 36px rgba(32, 48, 91, .08); }
.ind-ch-card:nth-child(4n + 2) { --ind-accent: var(--orange); }
.ind-ch-card:nth-child(4n + 3) { --ind-accent: var(--cyan); }
.ind-ch-card:nth-child(4n + 4) { --ind-accent: var(--teal); }
.ind-ch-num { font-size: 13px; font-weight: 700; letter-spacing: .16em; color: var(--text-muted); }
.ind-ch-card h3 { margin: .7rem 0 .75rem; font-size: 1.25rem; line-height: 1.3; color: var(--midnight); }
.ind-ch-card > p { margin: 0 0 1.25rem; font-size: 15px; line-height: 1.65; color: var(--text-muted); }
.ind-ch-points {
  /* last thing in the card now the link has gone — the card's own
     padding-bottom carries the space the margin used to */
  list-style: none; margin: 0; padding: 1.1rem 0 0;
  border-top: 1px solid var(--border-color); display: grid; gap: .55rem;
}
.ind-ch-points li { position: relative; padding-left: 1.05rem; font-size: 14.5px; line-height: 1.45; color: var(--midnight); }
.ind-ch-points li::before {
  content: ""; position: absolute; left: 0; top: .55em; width: 6px; height: 6px;
  border-radius: 50%; background: var(--ind-accent);
}

/* --------------------------------------------------------------------------
   2. TECHNOLOGY SOLUTIONS: the page's own glow cards, laid out and linked
   -------------------------------------------------------------------------- */
.ind-sol-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.ind-sol-grid .ind-sol-card {
  display: flex; flex-direction: column; padding: 2rem 2rem 1.75rem;
  transition: opacity .35s var(--rds-ease-standard), border-color .35s var(--rds-ease-standard),
              box-shadow .35s var(--rds-ease-standard), transform .2s ease-out;
}
.ind-sol-card > h3 + p { margin-bottom: 1.25rem; }
.ind-seg { list-style: none; margin: -.35rem 0 1rem; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.ind-seg li {
  padding: .22rem .6rem; border-radius: 999px; background: #F1F4F9; border: 1px solid var(--border-color);
  font-size: 11.5px; font-weight: 700; line-height: 1.3; letter-spacing: .03em; color: var(--text-muted);
}
.ind-sol-card > .ind-seg + p { margin-bottom: 1.25rem; }
.ind-sol-card > .ind-seg + p:has(+ .ind-cap) { margin-bottom: .8rem; }
.ind-sol-card > h3 + p:has(+ .ind-cap) { margin-bottom: .8rem; }
/* the related use case keeps its place under the description */
.ind-sol-card .uc-rel {
  margin: 0 0 1.25rem; padding: .85rem 1rem .95rem;
  border: 0; border-left: 3px solid var(--primary); border-radius: 0 8px 8px 0;
  background: #F2F8FD;
}
/* "Powered by": secondary, directly under the description */
.ind-cap { margin: 0 0 1.25rem; font-size: 14px; line-height: 1.5; color: var(--text-muted); }
.ind-cap a {
  position: relative; z-index: 2;
  color: var(--midnight); font-weight: 700; text-decoration: none;
  border-bottom: 1px solid rgba(32, 48, 91, .28);
  transition: color .2s ease, border-color .2s ease;
}
.ind-cap a:hover { color: var(--rds-color-primary-text, #006FBA); border-color: currentColor; }

/* the tenth card closes the grid as one wide row instead of an orphan */
@media (min-width: 1100px) {
  .ind-sol-grid .ind-sol-wide {
    grid-column: 1 / -1;
    display: grid; grid-template-columns: 52px minmax(0, 1fr) auto;
    column-gap: 2rem; align-items: start;
  }
  .ind-sol-wide > svg { grid-row: 1 / span 5; margin: 0 !important; }
  .ind-sol-wide > h3, .ind-sol-wide > p, .ind-sol-wide > .uc-rel, .ind-sol-wide > .ind-seg { grid-column: 2; }
  .ind-sol-wide > .uc-rel { margin-bottom: 0; }
  .ind-sol-wide > h3 + p, .ind-sol-wide > h3 + p:has(+ .ind-cap) { margin-bottom: 0; }
  .ind-sol-wide > .ind-cap {
    grid-column: 3; grid-row: 1 / span 5; align-self: center;
    margin: 0; padding: .25rem 0 .25rem 2rem; border-top: 0; border-left: 1px solid var(--border-color);
    white-space: nowrap;
  }
}
@media (max-width: 1099px) { .ind-sol-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* An industry's signature at the head of its solutions (Banking: Control ->
   Decide -> Act -> Evidence), in the navy of the guides' centrepieces. Four
   stages joined by arrows, each with the question it asks; a light passes
   from one to the next. Two by two on tablets, stacked on phones. */
.ind-ctl {
  position: relative; overflow: hidden; margin: 0 0 2.75rem; padding: clamp(1.4rem, 3vw, 2.25rem);
  border-radius: 22px; background: linear-gradient(160deg, #20305B 0%, #15224A 100%); color: #fff;
  box-shadow: 0 24px 60px -32px rgba(21, 34, 74, .55);
}
.ind-ctl::before {
  content: ""; position: absolute; right: -140px; top: -180px; width: 440px; height: 440px; border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 195, 255, .18), transparent 68%); pointer-events: none;
}
.ind-ctl-head { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem 1.25rem; margin-bottom: 1.4rem; }
.ind-ctl-head h3 { margin: 0; font-size: clamp(1.35rem, 2.1vw, 1.65rem); line-height: 1.2; color: #fff; }
.ind-ctl-head p { margin: 0; font-size: 16px; line-height: 1.55; color: #C9D3E8; }
.ind-ctl-list {
  position: relative; list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.1rem;
}
.ind-ctl-s {
  position: relative; padding: 1rem 1.1rem 1.15rem; border: 1px solid rgba(255, 255, 255, .12); border-radius: 14px;
  background: rgba(255, 255, 255, .05); animation: indCtlStep 8s ease-in-out infinite; animation-delay: calc(var(--i) * 2s);
}
/* the arrow to the next stage, in the gap between the two */
.ind-ctl-s:not(:last-child)::after {
  content: ""; position: absolute; z-index: 1; right: -.78rem; top: 1.45rem; width: 8px; height: 8px;
  border-top: 2px solid #6FDCFF; border-right: 2px solid #6FDCFF; transform: rotate(45deg);
}
.ind-ctl-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: .75rem; }
.ind-ctl-n { font-size: 12px; font-weight: 700; letter-spacing: .12em; color: #7CC4F2; }
.ind-ctl-top .ind-ui { width: 26px; height: 26px; color: #6FDCFF; }
.ind-ctl-s b { display: block; margin-bottom: .45rem; font-size: 15px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #fff; }
.ind-ctl-s p { margin: 0; font-size: 15px; line-height: 1.5; color: #D5DCEB; }
/* a stage with several lines (Retail) */
.ind-ctl-s ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.ind-ctl-s ul li { position: relative; padding-left: .9rem; font-size: 14.5px; line-height: 1.45; color: #D5DCEB; }
.ind-ctl-s ul li::before { content: ""; position: absolute; left: 0; top: .6em; width: 5px; height: 5px; border-radius: 50%; background: #6FDCFF; opacity: .8; }
/* five stages (Food & Beverage) sit in five columns on wide screens */
@media (min-width: 1101px) {
  .ind-ctl-list.ind-ctl-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .9rem; }
  .ind-ctl-5 .ind-ctl-s { padding-inline: .95rem; }
  .ind-ctl-5 .ind-ctl-s:not(:last-child)::after { right: -.68rem; }
}
@media (min-width: 681px) and (max-width: 1100px) {
  .ind-ctl-list.ind-ctl-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ind-ctl-5 .ind-ctl-s:nth-child(2n)::after { display: none; }
  .ind-ctl-5 .ind-ctl-s:last-child { grid-column: 1 / -1; }
}
/* and where the loop goes next: back to the start */
.ind-ctl-again { position: relative; display: flex; align-items: center; gap: .55rem; margin: 1.1rem 0 0; font-size: 15px; font-weight: 600; color: #6FDCFF; }
.ind-ctl-again .ind-ui { flex: none; width: 20px; height: 20px; }
@keyframes indCtlStep {
  0%, 30%, 100% { border-color: rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .05); }
  9%, 21% { border-color: rgba(111, 220, 255, .7); background: rgba(111, 220, 255, .1); }
}
@media (max-width: 900px) {
  .ind-ctl-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ind-ctl-s:nth-child(2)::after { display: none; }
}
@media (max-width: 680px) {
  .ind-ctl { margin-bottom: 2.25rem; border-radius: 18px; }
  .ind-ctl-head { display: block; }
  .ind-ctl-head h3 { margin-bottom: .4rem; }
  .ind-ctl-list { grid-template-columns: minmax(0, 1fr); gap: .8rem; }
  .ind-ctl-s:nth-child(2)::after,
  .ind-ctl-s:not(:last-child)::after { display: block; right: auto; left: 1.6rem; top: auto; bottom: -.62rem; transform: rotate(135deg); }
}

/* --------------------------------------------------------------------------
   2b. MOST VIEWED ARTICLES: a navy band between the light sections
   -------------------------------------------------------------------------- */
.ind-mv {
  position: relative; overflow: hidden; padding-block: clamp(4rem, 8vw, 6rem);
  background: linear-gradient(180deg, #20305B 0%, #15224A 100%); color: #fff;
}
.ind-mv::before {
  content: ""; position: absolute; right: -180px; top: -220px; width: 560px; height: 560px; border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 195, 255, .16), transparent 68%); pointer-events: none;
}
.ind-mv .container { position: relative; }
.ind-mv .section-header { max-width: 780px; margin: 0 auto 3rem; }
.ind-mv .section-header h2 { color: #fff; }
.ind-mv .badge.teal { background: rgba(30, 178, 169, .16); border-color: rgba(95, 211, 203, .4); color: #6FE0D8; }
.ind-mv-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.ind-mv-card {
  height: 100%; display: flex; flex-direction: column; gap: .85rem; padding: 1.9rem 1.75rem 1.75rem;
  border: 1px solid rgba(255, 255, 255, .14); border-radius: 15px; background: rgba(255, 255, 255, .05);
  color: #fff; text-decoration: none;
  transition: background-color .3s var(--rds-ease-standard), border-color .3s var(--rds-ease-standard),
              transform .3s var(--rds-ease-standard);
}
.ind-mv-card:hover { background: rgba(255, 255, 255, .09); border-color: rgba(124, 196, 242, .55); transform: translateY(-3px); }
.ind-mv-card:focus-visible { outline: 3px solid #7CC4F2; outline-offset: 3px; }
.ind-mv-card h3 { margin: 0; font-size: 19px; font-weight: 700; line-height: 1.4; color: #fff; }
.ind-mv-card p {
  margin: 0; font-size: 15px; line-height: 1.65; color: #B4C0D6;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.ind-mv-more { margin-top: auto; padding-top: .5rem; font-size: 15px; font-weight: 700; color: #7CC4F2; }
.ind-mv-card:hover .ind-mv-more { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 899px) {
  .ind-mv-grid { grid-template-columns: minmax(0, 1fr); max-width: 640px; margin-inline: auto; }
}
@media (prefers-reduced-motion: reduce) { .ind-mv-card { transition: none; } .ind-mv-card:hover { transform: none; } }

/* --------------------------------------------------------------------------
   3. STEP ARTICLES: understand -> evaluate -> implement
   --------------------------------------------------------------------------
   One article per stage, read left to right, each more actionable than the
   last. The three-part meter fills as the stages advance; the arrows between
   cards carry the order. No tabs, no choices: it is a sequence. */
.ind-sa { background: #fff; padding-block: clamp(4rem, 8vw, 6rem); }
.ind-sa-list {
  --ind-sa-gap: 3.25rem;
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ind-sa-gap);
}
.ind-sa-item { position: relative; display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 0; }
.ind-sa-card {
  position: relative;
  grid-row: span 5; display: grid; grid-template-rows: subgrid; row-gap: 0;
  padding: 1.9rem 1.9rem 1.75rem;
  background: #fff; border: 1px solid var(--border-color); border-radius: 15px;
  transition: border-color .3s var(--rds-ease-standard), box-shadow .3s var(--rds-ease-standard);
}
.ind-sa-card:not(.is-soon):hover,
.ind-sa-card:focus-within { border-color: rgba(0, 125, 209, .4); box-shadow: 0 16px 36px rgba(32, 48, 91, .08); }
/* the arrow from one stage to the next, centred in the gap */
.ind-sa-item:not(:last-child)::after {
  content: ""; position: absolute; top: 50%; right: calc(var(--ind-sa-gap) / -2 - 17px);
  width: 34px; height: 34px; margin-top: -17px; border-radius: 50%;
  border: 1px solid rgba(0, 125, 209, .3); background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23007DD1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 16px;
}
.ind-sa-meter { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin-bottom: 1.4rem; }
.ind-sa-meter span { height: 4px; border-radius: 2px; background: #DCE6F0; }
.ind-sa-meter span.on { background: var(--primary); }
.ind-sa-step { margin: 0 0 .75rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem .75rem; }
.ind-sa-num { font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--text-muted); }
.ind-sa-stage { font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--rds-color-primary-text, #006FBA); }
.ind-sa-card h3 { margin: 0 0 .75rem; font-size: 1.3rem; line-height: 1.35; color: var(--midnight); }
/* once an article is written its title is the card's one link, stretched over it */
.ind-sa-link { color: inherit; text-decoration: none; }
.ind-sa-link::after { content: ""; position: absolute; inset: 0; border-radius: 15px; }
.ind-sa-card:hover .ind-sa-link { color: var(--rds-color-primary-text, #006FBA); }
.ind-sa-desc { margin: 0 0 1.5rem; font-size: 15px; line-height: 1.7; color: var(--text-muted); }
.ind-sa-cta {
  align-self: end; justify-self: start; margin: 0;
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: 15px; font-weight: 700; color: var(--rds-color-primary-text, #006FBA); text-decoration: none;
}
.ind-sa-card:hover .ind-sa-cta:not(.is-soon) { text-decoration: underline; text-underline-offset: 3px; }
/* not written yet: the same button, visibly off, saying so */
.ind-sa-cta.is-soon { flex-wrap: wrap; gap: .5rem .8rem; color: #8A94AD; }
.ind-sa-cta-t, .ind-sa-soon { white-space: nowrap; }
.ind-sa-cta.is-soon .ind-sa-cta-t {
  display: inline-flex; align-items: center; min-height: 46px; padding: .7rem 1.4rem;
  border: 1px dashed #B8C2D6; border-radius: 999px; background: #F7F9FC; line-height: 1.2;
}
.ind-sa-soon {
  padding: .2rem .6rem; border: 1px dashed #B8C2D6; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted);
}
.ind-sa-cta.is-soon .ind-sa-soon { padding: 0; border: 0; }

/* --------------------------------------------------------------------------
   4. THE CLOSE (the band itself is the page's own inline style)
   -------------------------------------------------------------------------- */
.ind-cta-h { margin-bottom: 1rem; font-size: clamp(30px, 3.4vw, 43px); line-height: 1.2; color: #fff; }
.ind-cta-p {
  max-width: 700px; margin: 0 auto 2.5rem;
  font-size: clamp(17px, 1.6vw, 20px); line-height: 1.7; color: rgba(255, 255, 255, .72);
}

@media (max-width: 1199px) {
  .ind-ch-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ind-sa-list { --ind-sa-gap: 2.5rem; }
  .ind-sa-card { padding: 1.6rem 1.5rem 1.5rem; }
}

/* tablets and phones: the three stages stack, top to bottom */
@media (max-width: 899px) {
  .ind-sa-list { --ind-sa-gap: 3rem; grid-template-columns: minmax(0, 1fr); max-width: 640px; margin-inline: auto; }
  .ind-sa-item:not(:last-child)::after {
    top: auto; right: auto; left: 50%; bottom: calc(var(--ind-sa-gap) / -2 - 17px);
    margin: 0 0 0 -17px; transform: rotate(90deg);
  }
}

/* phones */
@media (max-width: 680px) {
  .ind-ch-grid, .ind-sol-grid { grid-template-columns: minmax(0, 1fr); }
  .ind-ch .section-header, .ind-sa .section-header { margin-bottom: 2.5rem; }
  .ind-ch-card { padding: 1.6rem 1.35rem 1.4rem; }
  .ind-sol-grid .ind-sol-card { padding: 1.6rem 1.4rem 1.4rem; }
  .ind-sa-card { padding: 1.6rem 1.4rem 1.5rem; }
  /* on a phone the icon need not take a row of its own height */
  .ind-sol-card > svg { width: 44px !important; height: 44px !important; margin-bottom: 1rem !important; }
}

/* "Read the Article": a real button (the site's primary), opening the reader */
.ind-sa-card .ind-sa-open {
  align-self: end; justify-self: start; display: inline-flex; align-items: center; gap: .5rem;
  min-height: 46px; padding: .7rem 1.4rem; font-family: inherit; font-size: 15px; line-height: 1.2;
}

/* --------------------------------------------------------------------------
   5. THE GUIDE READER: a <dialog> over the blurred page
   --------------------------------------------------------------------------
   An editorial page in a panel: a bar that stays (where you are, close, how
   far you have read), then the guide at a reading measure. */
html.ind-ar-lock, html.ind-ar-lock body { overflow: hidden; }
dialog.ind-ar {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: clamp(0px, 3vh, 32px) clamp(0px, 3vw, 32px);
  border: 0; background: transparent; color: inherit; overflow: hidden;
}
dialog.ind-ar[open] { display: flex; }
dialog.ind-ar::backdrop {
  background: rgba(8, 26, 51, .45);
  -webkit-backdrop-filter: blur(10px) saturate(1.1); backdrop-filter: blur(10px) saturate(1.1);
}
.ind-ar-panel {
  position: relative; display: flex; flex-direction: column;
  width: 100%; max-width: 940px; height: 100%; margin: 0 auto; overflow: hidden;
  background: #fff; border-radius: 22px;
  box-shadow: 0 40px 120px rgba(8, 26, 51, .35);
}
dialog.ind-ar[open] .ind-ar-panel { animation: ind-ar-in .45s var(--rds-ease-standard) both; }
dialog.ind-ar[open]::backdrop { animation: ind-ar-fade .3s ease both; }
@keyframes ind-ar-in { from { opacity: 0; transform: translateY(28px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes ind-ar-fade { from { opacity: 0; } to { opacity: 1; } }

.ind-ui { display: block; width: 24px; height: 24px; flex: none; }
.ind-ar-bar {
  position: relative; flex: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 64px; padding: .7rem 1rem .7rem 1.75rem; border-bottom: 1px solid var(--border-color); background: #fff;
}
.ind-ar-crumb {
  margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted);
}
.ind-ar-crumb b { font-weight: 700; color: var(--rds-color-primary-text, #006FBA); }
.ind-ar-x {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border: 1px solid var(--border-color); border-radius: 50%; background: #fff; color: var(--midnight); cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease;
}
.ind-ar-x:hover { background: var(--bg-alt); border-color: rgba(0, 125, 209, .35); }
.ind-ar-x .ind-ui { width: 20px; height: 20px; }
.ind-ar-progress {
  position: absolute; left: 0; bottom: -1px; width: 100%; height: 2px; transform-origin: 0 50%;
  transform: scaleX(var(--ind-ar-p, 0)); background: linear-gradient(90deg, var(--primary), var(--cyan));
}
.ind-ar-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; outline: none; }

.ind-ar-body {
  max-width: 760px; margin: 0 auto;
  padding: clamp(2.25rem, 5vw, 3.75rem) clamp(1.25rem, 5vw, 3rem) clamp(3rem, 6vw, 4.5rem);
  font-size: 17px; line-height: 1.75; color: #3B4763;
}
.ind-ar-body p { margin: 0 0 1.1rem; }

/* opening */
.ind-ar-hero { margin-bottom: 2.5rem; padding-bottom: 2.5rem; border-bottom: 1px solid var(--border-color); }
.ind-ar-hero .ind-sa-meter { max-width: 180px; margin-bottom: 1.75rem; }
.ind-ar-body .ind-ar-hero h2 {
  margin: 0 0 1.25rem; font-size: clamp(32px, 4.4vw, 48px); font-weight: 700; line-height: 1.12;
  letter-spacing: -.02em; color: var(--midnight);
}
.ind-ar-body .ind-ar-lead { font-size: clamp(18px, 1.9vw, 21px); line-height: 1.65; color: var(--midnight); }
.ind-ar-vs { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1.75rem 0; }
.ind-ar-body .ind-ar-vs p {
  margin: 0; display: flex; flex-direction: column; gap: .8rem; padding: 1.3rem 1.4rem;
  border-radius: 14px; font-size: 15.5px; line-height: 1.65;
}
.ind-ar-vs p:first-child { background: #F4F6FA; color: var(--text-muted); }
.ind-ar-vs p:last-child {
  background: linear-gradient(135deg, #EAF5FD, #F4FAFF); color: var(--midnight);
  box-shadow: inset 0 0 0 1px rgba(0, 125, 209, .2);
}
.ind-ar-vs .ind-ui { width: 26px; height: 26px; color: var(--text-muted); }
.ind-ar-vs p:last-child .ind-ui { color: var(--primary); }

/* in this guide */
.ind-ar-toc { margin: 0 0 3.25rem; padding: 1.4rem 1.6rem 1.5rem; border: 1px solid var(--border-color); border-radius: 14px; }
.ind-ar-body .ind-ar-toc-t {
  margin: 0 0 .8rem; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-muted);
}
.ind-ar-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; counter-reset: ind-toc; }
.ind-ar-toc li { display: flex; gap: .8rem; counter-increment: ind-toc; }
.ind-ar-toc li::before {
  content: counter(ind-toc, decimal-leading-zero); min-width: 1.6rem; padding-top: .12rem;
  font-size: 13px; font-weight: 700; color: var(--rds-color-primary-text, #006FBA);
}
.ind-ar-toc a { font-size: 15.5px; font-weight: 600; line-height: 1.5; color: var(--midnight); text-decoration: none; }
.ind-ar-toc a:hover { color: var(--rds-color-primary-text, #006FBA); text-decoration: underline; text-underline-offset: 3px; }

.ind-ar-sec { margin-bottom: 3.5rem; padding-block: 0; scroll-margin-top: 1.5rem; }   /* not the site's 96px section padding */
.ind-ar-body .ind-ar-sec h3 {
  margin: 0 0 1.25rem; font-size: clamp(24px, 2.8vw, 31px); font-weight: 700; line-height: 1.25;
  letter-spacing: -.01em; color: var(--midnight);
}

/* the six areas */
.ind-ar-areas { list-style: none; margin: 1.75rem 0 0; padding: 0; }
.ind-ar-area { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 1.5rem; padding: 1.9rem 0; border-top: 1px solid var(--border-color); }
.ind-ar-area:last-child { border-bottom: 1px solid var(--border-color); }
.ind-ar-area-mark { display: flex; flex-direction: column; align-items: center; gap: .45rem; }
.ind-ar-glyph { display: block; width: 58px; height: 58px; }
.ind-ar-area-mark span { font-size: 12px; font-weight: 700; letter-spacing: .14em; color: var(--text-muted); }
.ind-ar-body .ind-ar-area h4 { margin: .25rem 0 .75rem; font-size: 20px; font-weight: 700; line-height: 1.35; color: var(--midnight); }
.ind-ar-body .ind-ar-area-body p { font-size: 16px; }
.ind-ar-tags { margin: 1.1rem 0 1.25rem; }
.ind-ar-body .ind-ar-tags-t {
  margin: 0 0 .55rem; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-muted);
}
.ind-ar-tags ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .45rem; }
.ind-ar-tags li {
  padding: .38rem .85rem; border-radius: 999px; background: #EEF5FB; color: #0A4E7E;
  font-size: 14px; font-weight: 600; line-height: 1.35;
}
.ind-ar-qs { list-style: none; margin: .2rem 0 1.15rem; padding: 0; display: grid; gap: .5rem; }
.ind-ar-qs li {
  position: relative; padding: .62rem 1rem .62rem 2.6rem; border-radius: 10px; background: #F6F8FB;
  font-size: 15.5px; font-weight: 600; line-height: 1.45; color: var(--midnight);
}
.ind-ar-qs li::before {
  content: "?"; position: absolute; left: .85rem; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; width: 1.15rem; height: 1.15rem; border-radius: 50%;
  background: var(--primary); color: #fff; font-size: 11px; font-weight: 700; line-height: 1;
}
.ind-ar-body .ind-ar-note {
  margin: 1.1rem 0; padding: .95rem 1.15rem; border-left: 3px solid var(--teal); border-radius: 0 10px 10px 0;
  background: #F0FAF9; font-size: 15.5px; color: #24504D;
}
.ind-ar-stmt { margin-top: 2.25rem; padding: 1.75rem 1.9rem; border-radius: 18px; background: var(--midnight); }
.ind-ar-body .ind-ar-stmt p { margin: 0; font-size: 19px; font-weight: 600; line-height: 1.55; color: #fff; }
.ind-ar-body .ind-ar-stmt p + p { margin-top: .45rem; font-weight: 400; color: #BFD3EE; }

/* Detect -> Understand -> Decide -> Act */
.ind-ar-stages {
  --ind-ar-gap: 1.75rem;
  list-style: none; margin: 1.25rem 0 1.75rem; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ind-ar-gap);
}
.ind-ar-stages li {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: .55rem;
  padding: 1.1rem .5rem; border: 1px solid var(--border-color); border-radius: 14px; background: #fff;
  font-size: 15px; font-weight: 700; color: var(--midnight); text-align: center;
}
.ind-ar-stages .ind-ui { width: 28px; height: 28px; color: var(--primary); }
.ind-ar-stages li:not(:last-child)::after {
  content: ""; position: absolute; top: 50%; right: calc(var(--ind-ar-gap) / -2 - 6px); width: 12px; height: 12px;
  margin-top: -6px; border-top: 2px solid var(--primary); border-right: 2px solid var(--primary); transform: rotate(45deg);
  opacity: .55;
}
.ind-ar-example { padding: 1.6rem 1.75rem; border-radius: 16px; background: var(--bg-alt); }
.ind-ar-body .ind-ar-example-t {
  margin: 0 0 .4rem; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-muted);
}
.ind-ar-body .ind-ar-scenario {
  display: flex; align-items: center; gap: .65rem; margin: 0 0 1.25rem;
  font-size: 18px; font-weight: 700; line-height: 1.45; color: var(--midnight);
}
.ind-ar-scenario .ind-ui { color: var(--orange); }
.ind-ar-steps { list-style: none; margin: 0; padding: 0; }
.ind-ar-steps li {
  position: relative; display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: 1rem;
  padding: .7rem 0 .7rem 1.6rem;
}
.ind-ar-steps li::before {
  content: ""; position: absolute; left: 0; top: 1.2rem; width: 10px; height: 10px; border-radius: 50%;
  background: var(--primary); box-shadow: 0 0 0 4px rgba(0, 125, 209, .15);
}
.ind-ar-steps li:not(:last-child)::after {
  content: ""; position: absolute; left: 4px; top: 1.75rem; bottom: -.55rem; width: 2px; background: rgba(0, 125, 209, .25);
}
.ind-ar-step-k {
  padding-top: .2rem; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--rds-color-primary-text, #006FBA);
}
.ind-ar-body .ind-ar-steps p { margin: 0; font-size: 16px; line-height: 1.65; color: var(--midnight); }
.ind-ar-body .ind-ar-human { display: flex; align-items: flex-start; gap: .75rem; margin: 1.35rem 0 0; font-size: 15.5px; color: var(--text-muted); }
.ind-ar-human .ind-ui { width: 22px; height: 22px; margin-top: .2rem; color: var(--teal); }

/* automate, recommend, approve */
.ind-ar-tiers { list-style: none; margin: 1.25rem 0 1.6rem; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem; }
.ind-ar-tiers > li {
  display: flex; flex-direction: column; gap: .9rem; padding: 1.3rem 1.3rem 1.4rem;
  border: 1px solid var(--border-color); border-radius: 14px;
  font-size: 16px; font-weight: 700; line-height: 1.4; color: var(--midnight);
}
.ind-ar-tiers > li > .ind-ui { width: 28px; height: 28px; }
.ind-ar-tier-0 .ind-ui { color: var(--primary); }
.ind-ar-tier-1 .ind-ui { color: #0094C6; }
.ind-ar-tiers .ind-ar-tier-2 { background: #F0FAF9; border-color: rgba(30, 178, 169, .35); }
.ind-ar-tier-2 .ind-ui { color: var(--teal); }
.ind-ar-body .ind-ar-stmt-sm { padding-left: 1.1rem; border-left: 3px solid var(--primary); font-size: 18px; font-weight: 600; line-height: 1.55; color: var(--midnight); }

/* where to start */
.ind-ar-check { list-style: none; margin: 1rem 0 1.5rem; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.ind-ar-check li {
  display: flex; align-items: flex-start; gap: .7rem; padding: .85rem 1rem; border-radius: 12px; background: #F6F8FB;
  font-size: 15.5px; line-height: 1.45; color: var(--midnight);
}
.ind-ar-check span { display: block; }
.ind-ar-check span::first-letter { text-transform: uppercase; }
.ind-ar-check .ind-ui { width: 20px; height: 20px; padding: 3px; border-radius: 50%; background: var(--primary); color: #fff; stroke-width: 2.6; }
.ind-ar-reframe {
  margin-top: 2.25rem; padding: 2rem 1.75rem; border-radius: 18px; text-align: center;
  background: linear-gradient(160deg, #F4F8FC 0%, #EAF5FD 100%);
}
.ind-ar-body .ind-ar-rf-k { margin: 0 0 .35rem; font-size: 14px; color: var(--text-muted); }
.ind-ar-body .ind-ar-rf-q1 {
  margin: 0 0 1rem; font-size: clamp(20px, 2.4vw, 24px); font-weight: 600; line-height: 1.35; color: #8C97AE;
  text-decoration: line-through; text-decoration-color: rgba(247, 83, 38, .55); text-decoration-thickness: 2px;
}
.ind-ar-body .ind-ar-rf-mid { max-width: 30em; margin: 0 auto 1.6rem; font-size: 15.5px; color: var(--text-muted); }
.ind-ar-body .ind-ar-rf-q2 { margin: 0; font-size: clamp(24px, 3vw, 31px); font-weight: 700; line-height: 1.3; color: var(--midnight); }

/* what comes next */
.ind-ar-next {
  position: relative; margin-top: 1.75rem; padding: 1.9rem 1.9rem 2rem; overflow: hidden;
  border-radius: 18px; background: var(--midnight); color: #fff;
}
.ind-ar-next::before {
  content: ""; position: absolute; right: -80px; top: -80px; width: 260px; height: 260px; border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 195, 255, .28), transparent 70%);
}
.ind-ar-body .ind-ar-next-k { margin: 0 0 1rem; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #7CC4F2; }
.ind-ar-body .ind-ar-next-step { margin: 0 0 .35rem; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #A9B4CC; }
.ind-ar-body .ind-ar-next-t { margin: 0 0 .55rem; font-size: clamp(21px, 2.4vw, 25px); font-weight: 700; line-height: 1.3; color: #fff; }
.ind-ar-body .ind-ar-next-d { margin: 0 0 1.35rem; font-size: 15.5px; color: #C9D4E8; }
.ind-ar-next .ind-sa-soon { position: relative; color: #C9D4E8; border-color: rgba(255, 255, 255, .35); }
.ind-ar-next-go {
  position: relative; display: inline-flex; align-items: center; gap: .45rem; padding: .7rem 1.3rem;
  border: 0; border-radius: 999px; background: #fff; color: var(--midnight); cursor: pointer;
  font: inherit; font-size: 15px; font-weight: 700; text-decoration: none;
}

/* --- blocks used from Step 02 on ------------------------------------------- */
/* a numbered factor: a light numeral over the heading */
.ind-ar-factor { padding-top: 2.6rem; border-top: 1px solid var(--border-color); }
.ind-ar-fnum {
  display: block; margin-bottom: .5rem; font-family: var(--rds-font-latin); font-size: 54px; font-weight: 300;
  line-height: 1; letter-spacing: -.02em; color: var(--primary);
}
/* items written in lower case read as list entries; set them as entries */
.ind-ar-tags li::first-letter, .ind-ar-fork li::first-letter, .ind-ar-tiers-full ul li::first-letter,
.ind-ar-group li::first-letter { text-transform: uppercase; }
.ind-ar-tags li.ind-keep::first-letter { text-transform: none; }

.ind-ar-todo .ind-ui { padding: 1px; background: none; color: var(--primary); stroke-width: 2; }
.ind-ar-body .ind-ar-source {
  display: flex; align-items: flex-start; gap: .7rem; margin: 1.25rem 0 0; padding: .95rem 1.15rem;
  border-radius: 10px; background: #F7F8FA; font-size: 14.5px; line-height: 1.6; color: var(--text-muted);
}
.ind-ar-source .ind-ui { width: 20px; height: 20px; margin-top: .15rem; color: #98A2B8; }
.ind-ar-source-a { font-weight: 600; color: var(--rds-color-primary-text, #006FBA); text-underline-offset: 3px; white-space: nowrap; }
/* text that carries on after a box gets room to breathe */
.ind-ar-body .ind-ar-reframe + p, .ind-ar-body .ind-ar-source + p, .ind-ar-body .ind-ar-human + p,
.ind-ar-body .ind-ar-path + p { margin-top: 1.25rem; }

/* "What happens next?": one event, the ways it can go */
.ind-ar-fork { margin-top: .25rem; }
.ind-ar-body .ind-ar-fork-q { margin: 0 0 .15rem; font-size: 17px; font-weight: 700; color: var(--midnight); }
.ind-ar-body .ind-ar-fork-lead { margin: 0 0 .6rem; font-size: 15px; color: var(--text-muted); }
.ind-ar-fork ul {
  list-style: none; margin: 0 0 0 .35rem; padding: 0 0 0 1.5rem; display: grid; gap: .45rem;
  border-left: 2px solid rgba(0, 125, 209, .3);
}
.ind-ar-fork li {
  position: relative; padding: .55rem .95rem; border: 1px solid var(--border-color); border-radius: 10px; background: #fff;
  font-size: 15px; font-weight: 600; line-height: 1.45; color: var(--midnight);
}
.ind-ar-fork li::before {
  content: ""; position: absolute; left: calc(-1.5rem - 1px); top: 50%; width: 1.35rem; height: 2px;
  background: rgba(0, 125, 209, .3);
}

/* automate / recommend / approve, each with its examples */
.ind-ar-tiers-full > li { gap: .55rem; font-weight: 400; }
.ind-ar-tiers-full > li > .ind-ui { margin-bottom: .2rem; }
.ind-ar-tier-h { font-size: 16.5px; font-weight: 700; line-height: 1.35; color: var(--midnight); }
.ind-ar-tier-d { font-size: 14.5px; line-height: 1.55; color: var(--text-muted); }
.ind-ar-tier-l {
  margin-top: .35rem; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-muted);
}
.ind-ar-tiers-full ul { margin: 0; padding: 0 0 0 1.05rem; display: grid; gap: .3rem; font-size: 14px; line-height: 1.45; color: var(--midnight); }

/* a short sequence: choose, baseline, test */
.ind-ar-seq {
  --ind-ar-gap: 1.75rem;
  list-style: none; margin: 1.25rem 0 1.6rem; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ind-ar-gap);
}
.ind-ar-seq li {
  position: relative; display: flex; flex-direction: column; gap: .7rem; padding: 1.15rem 1.2rem;
  border: 1px solid var(--border-color); border-radius: 14px; background: #fff;
  font-size: 15.5px; font-weight: 600; line-height: 1.45; color: var(--midnight);
}
.ind-ar-seq-n {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--primary); color: #fff; font-size: 14px; font-weight: 700;
}
.ind-ar-seq li:not(:last-child)::after {
  content: ""; position: absolute; top: 50%; right: calc(var(--ind-ar-gap) / -2 - 6px); width: 12px; height: 12px;
  margin-top: -6px; border-top: 2px solid var(--primary); border-right: 2px solid var(--primary); transform: rotate(45deg);
  opacity: .55;
}

/* the readiness check: seven questions, each with what it tests */
.ind-ar-ready {
  list-style: none; margin: 1.25rem 0 1.6rem; padding: 0; counter-reset: ind-ready;
  border: 1px solid var(--border-color); border-radius: 16px; overflow: hidden;
}
.ind-ar-ready li {
  display: grid; grid-template-columns: 2.2rem 10rem minmax(0, 1fr); align-items: baseline; gap: .9rem;
  padding: 1rem 1.3rem; counter-increment: ind-ready;
}
.ind-ar-ready li + li { border-top: 1px solid var(--border-color); }
.ind-ar-ready li:nth-child(odd) { background: #FAFBFD; }
.ind-ar-ready li::before {
  content: counter(ind-ready, decimal-leading-zero); font-size: 13px; font-weight: 700; color: var(--text-muted);
}
.ind-ar-ready-k { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--rds-color-primary-text, #006FBA); }
.ind-ar-ready-q { font-size: 16px; font-weight: 600; line-height: 1.5; color: var(--midnight); }

/* problem -> ... -> result */
.ind-ar-chain {
  list-style: none; margin: 1.1rem 0 1.6rem; padding: 1.4rem 1.5rem; border-radius: 16px; background: var(--bg-alt);
  display: flex; flex-wrap: wrap; align-items: center; gap: .65rem 1.9rem;
}
.ind-ar-chain li {
  position: relative; padding: .55rem 1rem; border: 1px solid rgba(0, 125, 209, .25); border-radius: 999px; background: #fff;
  font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--midnight);
}
.ind-ar-chain li:last-child { border-color: var(--primary); background: var(--primary); color: #fff; }
/* pills written in lower case (they continue the sentence above) start with a capital */
.ind-ar-chain li::first-letter, .ind-ar-opt::first-letter, .ind-ar-plus-i::first-letter { text-transform: uppercase; }
.ind-ar-chain li:not(:last-child)::after {
  content: ""; position: absolute; top: 50%; right: -1.3rem; width: 9px; height: 9px; margin-top: -4.5px;
  border-top: 2px solid var(--primary); border-right: 2px solid var(--primary); transform: rotate(45deg); opacity: .6;
}
.ind-ar-body .ind-ar-bigq {
  margin: 1.5rem 0 0; font-size: clamp(24px, 3vw, 31px); font-weight: 700; line-height: 1.3; color: var(--midnight);
}

/* --- blocks used from Step 03 on ------------------------------------------- */
.ind-ar-hero .ind-ar-chain { margin: 1rem 0 1.4rem; }
.ind-ar-body .ind-ar-reframe-long .ind-ar-rf-q2 { max-width: 34em; margin-inline: auto; font-size: clamp(18px, 2vw, 21px); line-height: 1.5; }

/* a process, step under step */
.ind-ar-vflow { margin: 1.5rem 0; padding: 1.5rem 1.6rem; border-radius: 16px; background: var(--bg-alt); }
.ind-ar-vflow ol { list-style: none; margin: .4rem 0 0; padding: 0; display: grid; gap: 1.6rem; counter-reset: ind-vf; }
.ind-ar-vflow li {
  position: relative; display: flex; align-items: center; gap: .8rem; padding: .7rem 1rem;
  border: 1px solid var(--border-color); border-radius: 12px; background: #fff; counter-increment: ind-vf;
  font-size: 15.5px; font-weight: 600; line-height: 1.4; color: var(--midnight);
}
.ind-ar-vflow li::first-letter, .ind-ar-vflow li > span::first-letter { text-transform: uppercase; }
.ind-ar-vflow li::before {
  content: counter(ind-vf); flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: #E8F3FB; color: var(--rds-color-primary-text, #006FBA); font-size: 13px; font-weight: 700;
}
.ind-ar-vflow li:first-child::before { background: var(--primary); color: #fff; }
.ind-ar-vflow li:not(:last-child)::after {
  content: ""; position: absolute; left: 50%; bottom: -1.15rem; width: 9px; height: 9px; margin-left: -4.5px;
  border-right: 2px solid var(--primary); border-bottom: 2px solid var(--primary); transform: rotate(45deg); opacity: .5;
}

/* instead of this, start with that */
.ind-ar-compare { margin: 1.5rem 0; }
.ind-ar-cmp { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: .9rem; }
.ind-ar-cmp > .ind-ui { align-self: center; width: 22px; height: 22px; color: var(--primary); }
.ind-ar-body .ind-ar-cmp p {
  margin: 0; display: flex; flex-direction: column; gap: .5rem; padding: 1.15rem 1.25rem; border-radius: 14px;
  font-size: 15.5px; font-weight: 600; line-height: 1.5;
}
.ind-ar-cmp span { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.ind-ar-cmp-a { background: #F4F6FA; color: var(--text-muted); }
.ind-ar-cmp-a span { color: #98A2B8; }
.ind-ar-cmp-b { background: #EAF5FD; color: var(--midnight); box-shadow: inset 0 0 0 1px rgba(0, 125, 209, .25); }
.ind-ar-cmp-b span { color: var(--rds-color-primary-text, #006FBA); }

/* the three questions a pilot answers */
.ind-ar-qcards { list-style: none; margin: 1rem 0 1.6rem; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem; }
.ind-ar-qcards li { display: flex; flex-direction: column; gap: .55rem; padding: 1.25rem 1.2rem 1.35rem; border: 1px solid var(--border-color); border-radius: 14px; }
/* four questions sit two by two, not three and one */
@media (min-width: 681px) { .ind-ar-qcards:has(> li:nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ind-ar-qc-n { font-size: 13px; font-weight: 700; letter-spacing: .1em; color: var(--rds-color-primary-text, #006FBA); }
.ind-ar-qc-q { font-size: 16.5px; font-weight: 700; line-height: 1.35; color: var(--midnight); }
.ind-ar-qc-a { font-size: 14.5px; line-height: 1.55; color: var(--text-muted); }
.ind-ar-sec .ind-ar-stmt { margin: 1.6rem 0; }

/* confidence and risk decide who acts */
.ind-ar-route { margin: 1.25rem 0 1.5rem; }
.ind-ar-body .ind-ar-route-lead { margin: 0 0 .7rem; }
.ind-ar-route ol { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.ind-ar-route li {
  --ind-ar-c: var(--teal);
  display: grid; grid-template-columns: minmax(0, 15rem) auto minmax(0, 1fr); align-items: center; gap: 1rem;
  padding: .85rem 1.1rem; border-radius: 12px; border-left: 4px solid var(--ind-ar-c); background: #F7F9FC;
}
.ind-ar-route-1 { --ind-ar-c: var(--cyan); }
.ind-ar-route .ind-ar-route-2 { --ind-ar-c: var(--orange); }
.ind-ar-route-c { font-size: 14.5px; font-weight: 700; line-height: 1.4; color: var(--midnight); }
.ind-ar-route .ind-ui { width: 20px; height: 20px; color: var(--ind-ar-c); }
.ind-ar-route-o { font-size: 15.5px; line-height: 1.45; color: var(--midnight); }

/* scale across, or scale up */
.ind-ar-pair { margin: 1.25rem 0; }
.ind-ar-body .ind-ar-pair-lead { margin: 0 0 .7rem; }
.ind-ar-pair-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: .9rem; }
.ind-ar-body .ind-ar-pair-i {
  margin: 0; display: flex; flex-direction: column; gap: .4rem; padding: 1.15rem 1.25rem;
  border: 1px solid var(--border-color); border-radius: 14px; font-size: 15px; line-height: 1.55;
}
.ind-ar-pair-i b { font-size: 16.5px; color: var(--midnight); }
.ind-ar-pair-i ul { list-style: none; margin: .1rem 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.ind-ar-pair-i ul li { padding: .2rem .6rem; border-radius: 999px; background: #EAF5FD; font-size: 13.5px; font-weight: 600; color: var(--midnight); }
.ind-ar-pair-or {
  align-self: center; display: grid; place-items: center; min-width: 40px; height: 40px; padding: 0 .5rem; border-radius: 999px;
  background: var(--bg-alt); color: var(--text-muted); font-size: 13px; font-weight: 700;
}

/* autonomy rising, stage by stage */
.ind-ar-ladder { margin: 1.5rem 0; padding: 1.5rem 1.6rem; border-radius: 16px; background: var(--bg-alt); }
.ind-ar-ladder ol { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .5rem; }
.ind-ar-ladder ol > li {
  position: relative; display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); align-items: center; gap: .9rem;
  padding: .75rem 1rem .95rem; border-radius: 12px; background: #fff; overflow: hidden;
}
.ind-ar-ladder-k { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--rds-color-primary-text, #006FBA); }
.ind-ar-ladder-t { font-size: 15.5px; font-weight: 600; line-height: 1.45; color: var(--midnight); }
.ind-ar-ladder-t::first-letter, .ind-ar-stmt-sm::first-letter { text-transform: uppercase; }
.ind-ar-ladder-bar {
  position: absolute; left: 0; bottom: 0; height: 3px; width: calc(var(--ind-ar-l) * 100%);
  background: linear-gradient(90deg, var(--primary), var(--cyan));
}

/* the nine-step path */
.ind-ar-path { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; }
.ind-ar-path > li {
  position: relative; display: flex; flex-direction: column; gap: .35rem; padding: 1.1rem 1.15rem 1.2rem;
  border: 1px solid var(--border-color); border-radius: 14px; background: #fff;
}
.ind-ar-path > li:last-child { border-color: var(--primary); background: #EAF5FD; }
.ind-ar-path-n { font-family: var(--rds-font-latin); font-size: 26px; font-weight: 300; line-height: 1; color: var(--primary); }
.ind-ar-path-k { margin-top: .35rem; font-size: 16px; font-weight: 700; color: var(--midnight); }
.ind-ar-path-t { font-size: 14px; line-height: 1.5; color: var(--text-muted); }
/* four stages sit two by two (Restaurant) */
.ind-ar-path:has(> li:nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* a stage's own items (Restaurant: what the restaurant does in response) */
.ind-ar-body .ind-ar-path-items { list-style: none; margin: .15rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.ind-ar-body .ind-ar-path-items li {
  margin: 0; padding: .2rem .6rem; border-radius: 999px; background: #EAF5FD; font-size: 13px; font-weight: 600; color: var(--midnight);
}
.ind-ar-path > li:last-child .ind-ar-path-items li { background: #fff; }
.ind-ar-path-items li::first-letter { text-transform: uppercase; }

/* one question to stop on */
.ind-ar-q { margin: 1.4rem 0; padding: 1.5rem 1.6rem; border-radius: 16px; background: linear-gradient(160deg, #F4F8FC, #EAF5FD); }
.ind-ar-body .ind-ar-q-q { margin: 0; font-size: clamp(20px, 2.3vw, 24px); font-weight: 700; line-height: 1.35; color: var(--midnight); }

/* the last guide's close */
.ind-ar-body .ind-ar-cta-h { position: relative; margin: 0 0 .6rem; font-size: clamp(22px, 2.6vw, 27px); font-weight: 700; line-height: 1.3; color: #fff; }
.ind-ar-close-cta .ind-ar-next-d { position: relative; }

/* --- blocks used from TMT's Step 01 on --------------------------------------- */
/* THE CENTREPIECE: using AI against automating work with AI. A navy panel
   wider than the text: the chatbot's one hop, then Observe -> Understand ->
   Decide -> Act walked through one case, a light passing stage to stage;
   under it, the same four stages across the industry's own lines. */
.ind-oda { margin: 1.75rem calc(-1 * clamp(0px, 4vw, 56px)) 1.6rem; }
.ind-oda-panel {
  position: relative; overflow: hidden; padding: clamp(1.3rem, 3vw, 2rem);
  border-radius: 20px; background: linear-gradient(160deg, #20305B 0%, #15224A 100%); color: #fff;
}
.ind-oda-panel::before {
  content: ""; position: absolute; right: -140px; top: -160px; width: 420px; height: 420px; border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 195, 255, .2), transparent 68%); pointer-events: none;
}
.ind-oda-k { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #A9B4CC; }
.ind-oda-k-on { color: #6FDCFF; }
.ind-oda-chat {
  position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.1rem;
  margin-bottom: 1.5rem; padding: .8rem 1.1rem; border: 1px dashed rgba(255, 255, 255, .2); border-radius: 12px;
  background: rgba(255, 255, 255, .04);
}
.ind-ar-body .ind-oda-hop { display: flex; align-items: center; gap: .6rem; margin: 0; }
.ind-oda-hop span { padding: .3rem .8rem; border-radius: 999px; background: rgba(255, 255, 255, .09); font-size: 14px; font-weight: 600; color: #DCE4F2; }
.ind-oda-hop .ind-ui { width: 18px; height: 18px; color: #8794B0; }
.ind-oda-main { position: relative; }
.ind-ar-body .ind-oda-scn { display: flex; align-items: center; gap: .6rem; margin: .45rem 0 1.15rem; font-size: 18px; font-weight: 700; line-height: 1.4; color: #fff; }
.ind-oda-scn .ind-ui { width: 22px; height: 22px; color: #FF9270; }
.ind-oda-stages {
  --ind-oda-gap: 1.6rem;
  list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--ind-oda-gap);
}
.ind-oda-s {
  position: relative; display: flex; flex-direction: column; gap: .55rem; padding: 1.1rem 1.05rem 1.25rem;
  border: 1px solid rgba(255, 255, 255, .14); border-radius: 14px; background: rgba(255, 255, 255, .06);
  animation: indOdaStep 6s ease-in-out infinite; animation-delay: calc(var(--i) * 1.5s);
}
.ind-oda-s:not(:last-child)::after {
  content: ""; position: absolute; top: 50%; right: calc(var(--ind-oda-gap) / -2 - 6px); width: 12px; height: 12px;
  margin-top: -6px; border-top: 2px solid #6FDCFF; border-right: 2px solid #6FDCFF; transform: rotate(45deg); opacity: .75;
}
.ind-oda-n { font-size: 12px; font-weight: 700; letter-spacing: .12em; color: #7CC4F2; }
.ind-oda-s .ind-ui { width: 30px; height: 30px; color: #6FDCFF; }
.ind-oda-s b { font-size: 18px; line-height: 1.3; color: #fff; }
.ind-ar-body .ind-oda-s p { margin: 0; font-size: 14.5px; line-height: 1.55; color: #C9D4E8; }
@keyframes indOdaStep {
  0%, 30%, 100% { border-color: rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .06); box-shadow: none; }
  8%, 20% { border-color: rgba(111, 220, 255, .75); background: rgba(111, 220, 255, .12);
            box-shadow: 0 0 0 1px rgba(111, 220, 255, .35), 0 14px 32px rgba(0, 0, 0, .25); }
}
.ind-oda-rows { margin-top: 1.25rem; }
.ind-ar-body .ind-oda-rows-lead { margin: 0 0 .7rem; font-size: 16px; font-weight: 600; color: var(--midnight); }
.ind-oda-table {
  width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0;
  border: 1px solid var(--border-color); border-radius: 14px; overflow: hidden; font-size: 14.5px; line-height: 1.45;
}
.ind-oda-table thead td, .ind-oda-table thead th { padding: .7rem .9rem; background: var(--bg-alt); }
.ind-oda-table thead td { width: 22%; }
.ind-oda-table thead th { width: 19.5%; }
.ind-oda-table thead th {
  text-align: left; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--rds-color-primary-text, #006FBA);
}
.ind-oda-table tbody th, .ind-oda-table tbody td { padding: .85rem .9rem; border-top: 1px solid var(--border-color); text-align: left; vertical-align: top; color: var(--midnight); }
.ind-oda-table tbody th { font-weight: 700; }
.ind-oda-table tbody td { border-left: 1px solid var(--border-color); }
.ind-oda-table td span { display: block; }
.ind-oda-table td span::first-letter { text-transform: uppercase; }

/* three short cards side by side */
.ind-ar-trio { list-style: none; margin: 1.1rem 0 1.4rem; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; }
.ind-ar-trio li {
  display: flex; flex-direction: column; gap: .4rem; padding: 1rem 1.05rem; border: 1px solid var(--border-color);
  border-radius: 12px; background: #F6F8FB; font-size: 14.5px; line-height: 1.5; color: var(--midnight);
}
.ind-ar-trio-k { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--rds-color-primary-text, #006FBA); }
/* a numbered sequence, read down the first column, then the second */
.ind-ar-olist {
  list-style: none; margin: 1rem 0 1.4rem; padding: 0; counter-reset: ind-ol;
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(4, auto); grid-auto-flow: column; gap: .5rem .7rem;
}
.ind-ar-olist li {
  display: flex; align-items: center; gap: .7rem; padding: .7rem .9rem; border-radius: 10px; background: #F6F8FB;
  counter-increment: ind-ol; font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--midnight);
}
.ind-ar-olist li::before {
  content: counter(ind-ol); flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--primary); color: #fff; font-size: 13px; font-weight: 700;
}
/* alternatives */
.ind-ar-body .ind-ar-opts { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .6rem; margin: .5rem 0 1.4rem; }
.ind-ar-opt {
  padding: .45rem 1rem; border: 1px solid rgba(0, 125, 209, .35); border-radius: 999px; background: #EAF5FD;
  font-size: 15px; font-weight: 700; color: var(--midnight);
}
.ind-ar-opts-or { font-size: 14px; color: var(--text-muted); }
/* a flow that opens with a sentence */
.ind-ar-vflow .ind-ar-scenario { margin: 0 0 .35rem; }
.ind-ar-body .ind-ar-vflow-lead { margin: 0 0 .55rem; font-size: 15px; color: var(--text-muted); }

@media (max-width: 900px) {
  .ind-oda-stages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ind-oda-s:nth-child(2)::after { display: none; }
}

/* --- blocks used from TMT's Step 02 on --------------------------------------- */
/* what to weigh: a short label over its question, one card each */
.ind-ar-kq { margin: 1rem 0 1.5rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .7rem; }
.ind-ar-kq > div {
  padding: .95rem 1.05rem 1.05rem; border: 1px solid var(--border-color); border-top: 3px solid var(--primary);
  border-radius: 12px; background: #fff;
}
.ind-ar-kq dt { margin-bottom: .35rem; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--rds-color-primary-text, #006FBA); }
.ind-ar-kq dd { margin: 0; font-size: 15.5px; font-weight: 600; line-height: 1.45; color: var(--midnight); }
/* the same kind of list for each part of the industry, side by side */
.ind-ar-groups { margin: 1rem 0 1.5rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; }
.ind-ar-group { padding: 1rem 1.05rem 1.1rem; border: 1px solid var(--border-color); border-radius: 12px; background: #F6F8FB; }
.ind-ar-group ul { list-style: none; margin: .55rem 0 0; padding: 0; }
.ind-ar-group li { position: relative; padding: .2rem 0 .2rem 1rem; font-size: 15px; line-height: 1.45; color: var(--midnight); }
.ind-ar-group li::before {
  content: ""; position: absolute; left: 0; top: .78em; width: 6px; height: 6px; border-radius: 50%; background: var(--primary); opacity: .7;
}
/* a numbered list's items start with a capital, whatever was typed */
.ind-ar-olist li > span::first-letter { text-transform: uppercase; }
/* THE CLOSING GRAPHIC: the TMT AI Equation. The same navy as Step 01's
   centrepiece; seven links, one under another, a light passing down them,
   the last one lit. */
.ind-eq {
  position: relative; overflow: hidden; margin: 1.5rem calc(-1 * clamp(0px, 4vw, 56px)) 1.6rem;
  padding: clamp(1.4rem, 3.4vw, 2.3rem); border-radius: 20px; background: linear-gradient(160deg, #20305B 0%, #15224A 100%);
  display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: center; gap: 1.5rem 2.4rem;
}
.ind-eq::before {
  content: ""; position: absolute; left: -160px; bottom: -200px; width: 460px; height: 460px; border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 195, 255, .18), transparent 68%); pointer-events: none;
}
.ind-ar-body .ind-eq-lead { position: relative; margin: 0; font-size: clamp(22px, 2.5vw, 28px); font-weight: 700; line-height: 1.3; color: #fff; }
.ind-eq-list { position: relative; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .45rem; }
.ind-eq-list::before {
  content: ""; position: absolute; left: calc(.45rem + 15px); top: 18px; bottom: 18px; width: 2px;
  background: linear-gradient(rgba(111, 220, 255, .25), rgba(111, 220, 255, .85));
}
.ind-eq-list li {
  position: relative; display: flex; align-items: center; gap: .9rem; padding: .5rem .9rem .5rem .45rem; border-radius: 12px;
  font-size: 16px; font-weight: 700; line-height: 1.3; color: #fff;
  animation: indEqStep 8.4s ease-in-out infinite; animation-delay: calc(var(--i) * 1.2s);
}
.ind-eq-n {
  position: relative; flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  border: 1.5px solid rgba(111, 220, 255, .6); background: #1A2A52; font-size: 12px; font-weight: 700; color: #6FDCFF;
}
.ind-eq-list li:last-child .ind-eq-n { border-color: #6FDCFF; background: #6FDCFF; color: #15224A; }
.ind-eq-list li:last-child { color: #6FDCFF; }
@keyframes indEqStep {
  0%, 22%, 100% { background: transparent; }
  6%, 14% { background: rgba(111, 220, 255, .12); }
}

/* --- blocks used from TMT's Step 03 on --------------------------------------- */
/* words the author bolded */
.ind-ar strong { font-weight: 700; color: var(--midnight); }
.ind-ar-body .ind-ar-stmt-sm strong { color: var(--rds-color-primary-text, #006FBA); }
/* a label that is a sentence: plain bold, not small capitals */
.ind-ar-plain .ind-ar-trio-k { font-size: 14.5px; font-weight: 700; letter-spacing: 0; text-transform: none; line-height: 1.4; color: var(--midnight); }
/* a ladder whose stages have long names */
.ind-ar-ladder-wide ol > li { grid-template-columns: 11.5rem minmax(0, 1fr); }
/* what not to say: the struck-through half of a reframe */
.ind-ar-avoid { margin-top: 1.1rem; padding: 1.25rem 1.5rem; }
/* sentences side by side */
.ind-ar-tiles { list-style: none; margin: .8rem 0 1.4rem; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .65rem; }
.ind-ar-tiles-2, .ind-ar-tiles-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ind-ar-tiles li {
  padding: .85rem 1rem; border-left: 3px solid var(--primary); border-radius: 10px; background: #F6F8FB;
  font-size: 15px; line-height: 1.5; color: var(--midnight);
}
/* the decisions to make, each worked through in its own card */
.ind-ar-decide { list-style: none; margin: 1rem 0 1.5rem; padding: 0; counter-reset: ind-dc; display: grid; gap: .8rem; }
.ind-ar-decide > li { counter-increment: ind-dc; padding: 1.15rem 1.3rem 1.25rem; border: 1px solid var(--border-color); border-radius: 14px; background: #fff; }
.ind-ar-body .ind-ar-decide-q { display: flex; align-items: center; gap: .7rem; margin: 0 0 .55rem; font-size: 17.5px; font-weight: 700; line-height: 1.35; color: var(--midnight); }
.ind-ar-decide-q::before {
  content: counter(ind-dc); flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: var(--primary); color: #fff; font-size: 13px; font-weight: 700;
}
.ind-ar-body .ind-ar-decide > li > p { margin-bottom: .5rem; }
.ind-ar-body .ind-ar-decide > li > :last-child { margin-bottom: 0; }
/* a table read down its columns: one card per part of the industry, its
   rows lined up across the cards */
.ind-ar-cols {
  margin: 1.1rem 0 1.5rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(var(--r), auto); gap: 0 .8rem;
}
.ind-ar-col {
  grid-row: span var(--r); display: grid; grid-template-rows: subgrid;
  border: 1px solid var(--border-color); border-radius: 14px; overflow: hidden; background: #fff;
}
.ind-ar-body .ind-ar-col-h {
  margin: 0; padding: .8rem 1rem; background: linear-gradient(160deg, #20305B 0%, #15224A 100%);
  font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #fff;
}
.ind-ar-col ul { grid-row: span var(--n); display: grid; grid-template-rows: subgrid; list-style: none; margin: 0; padding: 0; }
.ind-ar-col li { padding: .75rem 1rem; font-size: 15px; line-height: 1.45; color: var(--midnight); }
.ind-ar-col li + li { border-top: 1px solid var(--border-color); }
.ind-ar-col li:first-child { font-weight: 700; }
/* one thing weighed against several */
.ind-ar-body .ind-ar-bal {
  display: flex; flex-wrap: wrap; align-items: center; gap: .55rem .6rem; margin: .8rem 0 1.4rem;
  padding: 1.2rem 1.3rem; border-radius: 16px; background: var(--bg-alt);
}
.ind-ar-bal-a { padding: .5rem 1.1rem; border-radius: 999px; background: #20305B; font-size: 16px; font-weight: 700; color: #fff; }
.ind-ar-bal-end { display: inline-flex; align-items: center; gap: .6rem; white-space: nowrap; }
.ind-ar-bal-w { font-size: 15px; font-style: italic; color: var(--text-muted); }
.ind-ar-bal-i { padding: .45rem .95rem; border: 1px solid rgba(0, 125, 209, .3); border-radius: 999px; background: #fff; font-size: 15px; font-weight: 700; color: var(--midnight); }
/* THE CLOSING GRAPHIC: the practical path, in the navy of the other two
   guides' centrepieces. Eight stages, four to a row, each row on its rail,
   a light passing stage to stage, the last one lit. */
.ind-np {
  --ind-np-gap: 1.3rem;
  position: relative; overflow: hidden; list-style: none; margin: 1.25rem calc(-1 * clamp(0px, 4vw, 56px)) 1.6rem;
  padding: clamp(1.4rem, 3.4vw, 2.2rem); border-radius: 20px; background: linear-gradient(160deg, #20305B 0%, #15224A 100%);
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.8rem var(--ind-np-gap);
}
.ind-np::before {
  content: ""; position: absolute; right: -150px; top: -190px; width: 440px; height: 440px; border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 195, 255, .18), transparent 68%); pointer-events: none;
}
.ind-np li { position: relative; display: flex; flex-direction: column; gap: .35rem; }
.ind-np li::before {
  position: absolute; top: 16px; left: 40px; right: calc(-1 * var(--ind-np-gap)); height: 2px;
  background: linear-gradient(90deg, rgba(111, 220, 255, .7), rgba(111, 220, 255, .25));
}
@media (min-width: 901px) { .ind-np li:not(:nth-child(4n)):not(:last-child)::before { content: ""; } }
/* nine stages (Retail) sit three by three, the rail joining each row */
@media (min-width: 901px) {
  .ind-np-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ind-np-3 li:not(:nth-child(4n)):not(:last-child)::before { content: none; }
  .ind-np-3 li:not(:nth-child(3n)):not(:last-child)::before { content: ""; }
}
@media (min-width: 681px) and (max-width: 900px) {
  .ind-np { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ind-np li:nth-child(odd):not(:last-child)::before { content: ""; }
}
.ind-np-n {
  position: relative; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  border: 1.5px solid rgba(111, 220, 255, .6); background: #1A2A52; font-size: 12px; font-weight: 700; color: #6FDCFF;
  animation: indNpStep 8.8s ease-in-out infinite; animation-delay: calc(var(--i) * 1.1s);
}
.ind-np li:last-child .ind-np-n { border-color: #6FDCFF; background: #6FDCFF; color: #15224A; }
.ind-np-k { margin-top: .55rem; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #fff; }
.ind-np li:last-child .ind-np-k { color: #6FDCFF; }
.ind-np-t { font-size: 14.5px; line-height: 1.5; color: #C9D4E8; }
@keyframes indNpStep {
  0%, 20%, 100% { box-shadow: 0 0 0 0 rgba(111, 220, 255, 0); }
  6%, 12% { box-shadow: 0 0 0 6px rgba(111, 220, 255, .22); }
}

@media (max-width: 900px) {
  .ind-ar-tiles { grid-template-columns: minmax(0, 1fr); }
}

/* --- blocks used from Warehousing's Step 01 on -------------------------------- */
/* THE CENTREPIECE: the intelligent warehouse loop. Five stages in the navy of
   the other guides' centrepieces, each with what it draws on or asks; a dashed
   return runs from Verify back up to Sense, so the list reads as a cycle, and
   a light passes from stage to stage. */
.ind-loop {
  position: relative; overflow: hidden; margin: 1.5rem calc(-1 * clamp(0px, 4vw, 56px)) 1.6rem;
  padding: clamp(1.3rem, 3vw, 2rem); border-radius: 20px; background: linear-gradient(160deg, #20305B 0%, #15224A 100%); color: #fff;
}
.ind-loop::before {
  content: ""; position: absolute; right: -150px; top: -170px; width: 430px; height: 430px; border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 195, 255, .18), transparent 68%); pointer-events: none;
}
.ind-loop-list { position: relative; list-style: none; margin: 0; padding: 0 0 0 30px; display: grid; gap: .65rem; }
.ind-loop-list::before {
  content: ""; position: absolute; left: 0; top: 30px; bottom: 30px; width: 22px;
  border: 2px dashed rgba(111, 220, 255, .45); border-right: 0; border-radius: 16px 0 0 16px;
}
.ind-loop-list::after {
  content: ""; position: absolute; left: 13px; top: 25px; width: 10px; height: 10px;
  border-top: 2px solid #6FDCFF; border-right: 2px solid #6FDCFF; transform: rotate(45deg);
}
.ind-loop-s {
  position: relative; display: grid; grid-template-columns: 10.5rem minmax(0, 1fr); gap: .4rem 1.2rem; align-items: start;
  padding: 1rem 1.2rem; border: 1px solid rgba(255, 255, 255, .12); border-radius: 14px; background: rgba(255, 255, 255, .05);
  animation: indLoopStep 7s ease-in-out infinite; animation-delay: calc(var(--i) * 1.4s);
}
.ind-loop-s:not(:last-child)::after {
  content: ""; position: absolute; z-index: 1; left: 2.35rem; bottom: -9px; width: 8px; height: 8px;
  border-right: 2px solid #6FDCFF; border-bottom: 2px solid #6FDCFF; transform: rotate(45deg); opacity: .75;
}
.ind-loop-head { display: flex; align-items: center; gap: .6rem; padding-top: .1rem; }
.ind-loop-n { font-size: 12px; font-weight: 700; letter-spacing: .12em; color: #7CC4F2; }
.ind-loop-head .ind-ui { flex: none; width: 26px; height: 26px; color: #6FDCFF; }
.ind-loop-head b { font-size: 17px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #fff; }
.ind-ar-body .ind-loop-d { margin: 0 0 .45rem; font-size: 15.5px; font-weight: 600; line-height: 1.45; color: #fff; }
.ind-ar-body .ind-loop-k { margin: 0 0 .35rem; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #A9B4CC; }
.ind-ar-body .ind-loop-body ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem .4rem; }
.ind-ar-body .ind-loop-body li {
  margin: 0; padding: .25rem .65rem; border: 1px solid rgba(255, 255, 255, .1); border-radius: 999px; background: rgba(255, 255, 255, .08);
  font-size: 13.5px; line-height: 1.4; color: #DCE4F2;
}
.ind-ar-body .ind-loop-again { display: flex; align-items: center; gap: .55rem; margin: .95rem 0 0 30px; font-size: 14.5px; font-weight: 600; color: #6FDCFF; }
.ind-ar-body .ind-loop-again-k { margin: 1.1rem 0 0 30px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #A9B4CC; }
.ind-ar-body .ind-loop-again-k + .ind-loop-again { margin-top: .35rem; font-size: 16px; }
.ind-loop-again .ind-ui { flex: none; width: 20px; height: 20px; }
@keyframes indLoopStep {
  0%, 26%, 100% { border-color: rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .05); }
  7%, 18% { border-color: rgba(111, 220, 255, .7); background: rgba(111, 220, 255, .1); }
}
/* several signals, joined, leading to a result and then an action */
.ind-ar-conv { margin: .8rem 0 1.3rem; padding: 1.1rem 1.2rem 1.2rem; border-radius: 14px; background: var(--bg-alt); }
.ind-ar-body .ind-ar-conv-in { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .45rem 1.6rem; }
.ind-ar-body .ind-ar-conv-in li {
  position: relative; margin: 0; padding: .4rem .85rem; border: 1px solid rgba(0, 125, 209, .25); border-radius: 999px; background: #fff;
  font-size: 14.5px; font-weight: 600; color: var(--midnight);
}
.ind-ar-conv-in li + li::before {
  content: "+"; position: absolute; left: -1.1rem; top: 50%; transform: translateY(-50%); font-size: 17px; font-weight: 700; color: var(--primary);
}
.ind-ar-conv-in li::first-letter, .ind-ar-conv-steps li::first-letter { text-transform: uppercase; }
.ind-ar-body .ind-ar-conv-steps { list-style: none; margin: 0; padding: 0; display: grid; justify-items: start; }
.ind-ar-body .ind-ar-conv-steps li {
  position: relative; margin: 1.2rem 0 0; padding: .5rem .95rem; border: 1px solid var(--border-color); border-radius: 10px; background: #fff;
  font-size: 15px; font-weight: 700; color: var(--midnight);
}
.ind-ar-conv-steps li::before {
  content: ""; position: absolute; left: 1.2rem; top: -1.15rem; width: 2px; height: .85rem; background: var(--primary); opacity: .45;
}
.ind-ar-conv-steps li::after {
  content: ""; position: absolute; left: calc(1.2rem - 3px); top: -.55rem; width: 8px; height: 8px;
  border-right: 2px solid var(--primary); border-bottom: 2px solid var(--primary); transform: rotate(45deg); opacity: .6;
}
.ind-ar-body .ind-ar-conv-steps li:last-child { border-color: var(--primary); background: var(--primary); color: #fff; }
/* a groups block of two sits in two columns, four question cards two by two */
.ind-ar-groups-2, .ind-ar-kq-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* --- blocks used from Warehousing's Step 02 on -------------------------------- */
/* problem -> AI opportunity -> measure, two cases side by side */
.ind-ar-cases {
  margin: .8rem 0 1.4rem; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: .8rem;
}
.ind-ar-case { padding: 1.05rem 1.15rem 1.15rem; border: 1px solid var(--border-color); border-radius: 14px; background: #fff; }
.ind-ar-case dl { margin: 0; display: grid; align-content: start; gap: .75rem; }
.ind-ar-body .ind-ar-case-h { margin: 0 0 .75rem; padding-bottom: .6rem; border-bottom: 1px solid var(--border-color); font-size: 16px; font-weight: 700; color: var(--midnight); }
.ind-ar-cases-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ind-ar-cases-2, .ind-ar-cases-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ind-ar-case dd::first-letter { text-transform: uppercase; }
/* one pilot, set out as a card */
.ind-ar-spec { margin: .8rem 0 1.4rem; border: 1px solid var(--border-color); border-radius: 14px; overflow: hidden; background: #fff; }
.ind-ar-body .ind-ar-spec-h { margin: 0; padding: .8rem 1.15rem; background: linear-gradient(160deg, #20305B 0%, #15224A 100%); font-size: 15.5px; font-weight: 700; color: #fff; }
.ind-ar-spec dl { margin: 0; }
.ind-ar-spec dl > div { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: .9rem; padding: .75rem 1.15rem; }
.ind-ar-spec dl > div + div { border-top: 1px solid var(--border-color); }
.ind-ar-spec dt { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--rds-color-primary-text, #006FBA); padding-top: .15rem; }
.ind-ar-spec dd { margin: 0; font-size: 15px; line-height: 1.5; color: var(--midnight); }
/* a ladder stage's own items */
.ind-ar-body .ind-ar-ladder-items { grid-column: 2; list-style: none; margin: .1rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.ind-ar-body .ind-ar-ladder-items li {
  margin: 0; padding: .2rem .6rem; border-radius: 999px; background: #EAF5FD; font-size: 13px; font-weight: 600; color: var(--midnight);
}
.ind-ar-ladder-items li::first-letter { text-transform: uppercase; }

/* a loop whose stage names run long (Retail: Customer Signal, Understand) */
.ind-loop-wide .ind-loop-s { grid-template-columns: 13.5rem minmax(0, 1fr); }
@media (max-width: 680px) { .ind-loop-wide .ind-loop-s { grid-template-columns: minmax(0, 1fr); } }
/* Banking Step 01. Its loop runs in one line, Signal to Evidence, with no way
   back to the start */
.ind-loop-line .ind-loop-list { padding-left: 0; }
.ind-loop-line .ind-loop-list::before, .ind-loop-line .ind-loop-list::after { display: none; }
.ind-loop-body li::first-letter { text-transform: uppercase; }
/* rules as a rules engine reads them: IF ... THEN ... */
.ind-ar-rules { margin: .5rem 0 1.4rem; display: grid; gap: .5rem; }
.ind-ar-body .ind-ar-rule {
  margin: 0; padding: .8rem 1.1rem; display: grid; grid-template-columns: 3.4rem minmax(0, 1fr); gap: .25rem .5rem;
  align-items: baseline; border: 1px solid var(--border-color); border-left: 3px solid var(--primary); border-radius: 12px;
  background: #fff; font-size: 15.5px; font-weight: 600; line-height: 1.45; color: var(--midnight);
}
.ind-ar-rule-k {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; font-weight: 700;
  letter-spacing: .06em; color: var(--rds-color-primary-text, #006FBA);
}
.ind-ar-body .ind-ar-rules-or { margin: 0; padding-left: 1.1rem; font-size: 13px; font-weight: 700; color: var(--text-muted); }
/* parts that work together: A + B + C */
.ind-ar-body .ind-ar-plus { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem .55rem; margin: .4rem 0 1.3rem; }
.ind-ar-plus-i {
  padding: .5rem 1rem; border-radius: 999px; background: linear-gradient(160deg, #20305B 0%, #15224A 100%);
  font-size: 15px; font-weight: 700; color: #fff;
}
.ind-ar-plus-op { font-size: 18px; font-weight: 700; color: var(--primary); }
/* a flow that ends one of two ways */
.ind-ar-vflow-forked li:last-child::after {
  content: ""; position: absolute; left: 50%; bottom: -1.15rem; width: 9px; height: 9px; margin-left: -4.5px;
  border-right: 2px solid var(--primary); border-bottom: 2px solid var(--primary); transform: rotate(45deg); opacity: .5;
}
.ind-ar-vf-fork { margin-top: 1.6rem; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: .7rem; }
.ind-ar-body .ind-ar-vf-fork p {
  margin: 0; padding: .7rem 1rem; border: 1px solid var(--border-color); border-left: 3px solid var(--teal); border-radius: 12px;
  background: #fff; font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--midnight);
}
.ind-ar-body .ind-ar-vf-fork p:last-child { border-left-color: var(--orange); }
.ind-ar-vf-or { align-self: center; font-size: 13px; font-weight: 700; color: var(--text-muted); }
/* the line a group closes on */
.ind-ar-body .ind-ar-group-after { margin: .6rem 0 0; font-size: 14px; line-height: 1.45; color: var(--text-muted); }
/* a ladder's hand-off: off the scale, to a person */
.ind-ar-ladder ol > li.ind-ar-ladder-off {
  grid-template-columns: minmax(0, 1fr); gap: .3rem; border: 1.5px dashed rgba(0, 121, 203, .35); background: transparent;
}
.ind-ar-ladder-off .ind-ar-ladder-k { display: flex; align-items: center; gap: .4rem; }
.ind-ar-ladder-off .ind-ui { width: 18px; height: 18px; color: var(--teal); }
/* Banking Step 03: the control stack, layer under layer from where the
   information comes from to the record of what happened. The layers that decide
   what may happen (policy, a person) are tinted, so the line between
   intelligence and execution shows. */
.ind-st { list-style: none; margin: 1rem 0 1.5rem; padding: 0; display: grid; gap: .85rem; }
.ind-st-l {
  --st: var(--primary);
  position: relative; display: grid; grid-template-columns: 1.9rem 11.5rem minmax(0, 1fr); column-gap: .9rem; row-gap: .35rem;
  align-items: baseline; padding: .95rem 1.15rem; border: 1px solid var(--border-color); border-left: 4px solid var(--st);
  border-radius: 12px; background: #fff;
}
.ind-st-l:not(:last-child)::after {
  content: ""; position: absolute; z-index: 1; left: 1.45rem; bottom: -.7rem; width: 8px; height: 8px;
  border-right: 2px solid var(--primary); border-bottom: 2px solid var(--primary); transform: rotate(45deg); opacity: .5;
}
.ind-st-n { font-size: 12px; font-weight: 700; letter-spacing: .1em; color: var(--text-muted); }
.ind-st-l b { font-size: 15px; font-weight: 700; line-height: 1.35; color: var(--midnight); }
.ind-ar-body .ind-st-l p { grid-column: 3; margin: 0; font-size: 15px; line-height: 1.5; color: var(--text-muted); }
.ind-st-data { --st: #9AABC6; }
.ind-st-ai { --st: var(--cyan); }
.ind-st-control, .ind-st-human { background: #F2F6FC; }
.ind-st-control { --st: #20305B; }
.ind-st-human { --st: var(--teal); }
.ind-st-audit { --st: var(--orange); }
@media (max-width: 680px) {
  .ind-st-l { grid-template-columns: 1.9rem minmax(0, 1fr); }
  .ind-ar-body .ind-st-l p { grid-column: 2; }
}
/* Banking Step 02: a ladder stage's example, and an equation's result */
.ind-ar-body .ind-ar-ladder-ex { grid-column: 2; margin: .1rem 0 0; font-size: 14px; line-height: 1.45; color: var(--text-muted); }
.ind-ar-ladder-ex span { font-weight: 700; color: var(--rds-color-primary-text, #006FBA); }
.ind-ar-plus-res { background: linear-gradient(160deg, #0B84D6 0%, #006FBA 100%); }
/* an equation that ends badly (Retail: demand without inventory truth) */
.ind-ar-formula-warn .ind-ar-plus-res { background: linear-gradient(160deg, #E0571F 0%, #C2410C 100%); }
@media (max-width: 680px) {
  .ind-ar-vf-fork { grid-template-columns: minmax(0, 1fr); gap: .45rem; }
  .ind-ar-vf-or { justify-self: center; }
  .ind-ar-body .ind-ar-ladder-ex { grid-column: 1; }
}
.ind-ar-case dt { margin-bottom: .25rem; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.ind-ar-case dd { margin: 0; font-size: 15px; line-height: 1.5; color: var(--midnight); }
.ind-ar-case-0 dt { color: var(--orange); }
.ind-ar-case-0 dd { font-weight: 600; }
.ind-ar-case-1 dt { color: var(--rds-color-primary-text, #006FBA); }
.ind-ar-case-2 { padding-top: .7rem; border-top: 1px dashed var(--border-color); }
.ind-ar-case-2 dt { color: var(--teal); }
.ind-ar-body .ind-ar-cases-or { align-self: center; margin: 0; font-size: 14px; font-style: italic; color: var(--text-muted); }
/* low, medium and higher risk */
.ind-ar-risks { list-style: none; margin: .8rem 0 1.4rem; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; }
.ind-ar-risks > li {
  --ind-ar-c: var(--teal);
  padding: 1rem 1.1rem 1.1rem; border: 1px solid var(--border-color); border-top: 4px solid var(--ind-ar-c); border-radius: 12px; background: #fff;
}
.ind-ar-risks > .ind-ar-risk-1 { --ind-ar-c: #E8A317; }
.ind-ar-risks > .ind-ar-risk-2 { --ind-ar-c: var(--orange); }
.ind-ar-risk-k { display: block; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ind-ar-c); }
.ind-ar-body .ind-ar-risks p { margin: .45rem 0 0; font-size: 14.5px; line-height: 1.5; color: var(--midnight); }
.ind-ar-body .ind-ar-risks p:first-of-type { font-weight: 600; }
.ind-ar-body .ind-ar-risks p + p { color: var(--text-muted); }
/* a group's sub-label */
.ind-ar-body .ind-ar-group-sub { margin: .15rem 0 0; font-size: 12.5px; color: var(--text-muted); }

@media (max-width: 900px) {
  .ind-ar-risks, .ind-ar-cases-3 { grid-template-columns: minmax(0, 1fr); }
}

/* the reader on a phone: the whole screen */
@media (max-width: 680px) {
  dialog.ind-ar { padding: 0; }
  .ind-ar-panel { max-width: none; border-radius: 0; }
  .ind-ar-bar { min-height: 56px; padding-left: 1.25rem; }
  .ind-ar-crumb-a { display: none; }          /* the bar keeps the step and stage */
  .ind-ar-body { font-size: 16px; }
  .ind-ar-vs, .ind-ar-check, .ind-ar-tiers { grid-template-columns: minmax(0, 1fr); }
  .ind-ar-stages { --ind-ar-gap: 1.5rem; grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: .75rem; }
  .ind-ar-stages li:nth-child(2)::after { display: none; }
  .ind-ar-area { grid-template-columns: minmax(0, 1fr); gap: .9rem; }
  .ind-ar-area-mark { flex-direction: row; gap: .75rem; }
  .ind-ar-glyph { width: 46px; height: 46px; }
  .ind-ar-steps li { grid-template-columns: minmax(0, 1fr); gap: .15rem; }
  .ind-ar-example, .ind-ar-stmt, .ind-ar-next { padding-left: 1.3rem; padding-right: 1.3rem; }
  .ind-ar-seq { grid-template-columns: minmax(0, 1fr); --ind-ar-gap: 1.6rem; }
  .ind-ar-seq li:not(:last-child)::after { top: auto; right: auto; left: 50%; bottom: calc(var(--ind-ar-gap) / -2 - 6px); margin: 0 0 0 -6px; transform: rotate(135deg); }
  .ind-ar-ready li { grid-template-columns: 2rem minmax(0, 1fr); gap: .2rem .7rem; padding: .95rem 1.1rem; }
  .ind-ar-ready-q { grid-column: 2; }
  .ind-ar-fnum { font-size: 44px; }
  .ind-ar-chain { gap: .6rem 1.7rem; padding: 1.2rem; }
  .ind-ar-cmp, .ind-ar-pair-row { grid-template-columns: minmax(0, 1fr); }
  .ind-ar-cmp > .ind-ui { justify-self: center; transform: rotate(90deg); }
  .ind-ar-pair-or { justify-self: center; }
  .ind-ar-qcards, .ind-ar-path, .ind-ar-path:has(> li:nth-child(4):last-child) { grid-template-columns: minmax(0, 1fr); }
  .ind-ar-route li { grid-template-columns: minmax(0, 1fr); gap: .3rem; }
  .ind-ar-route li > .ind-ui { display: none; }
  .ind-ar-ladder ol > li { grid-template-columns: minmax(0, 1fr); gap: .2rem; }
  .ind-ar-vflow, .ind-ar-ladder, .ind-ar-q { padding-left: 1.2rem; padding-right: 1.2rem; }
  .ind-oda { margin-inline: 0; }
  .ind-oda-stages { grid-template-columns: minmax(0, 1fr); --ind-oda-gap: 1.4rem; }
  .ind-oda-s:nth-child(2)::after { display: block; }
  .ind-oda-s:not(:last-child)::after { top: auto; right: auto; left: 50%; bottom: calc(var(--ind-oda-gap) / -2 - 6px); margin: 0 0 0 -6px; transform: rotate(135deg); }
  .ind-oda-table, .ind-oda-table tbody, .ind-oda-table tr, .ind-oda-table th, .ind-oda-table td { display: block; width: auto; }
  .ind-oda-table thead { display: none; }
  .ind-oda-table { border: 0; border-radius: 0; overflow: visible; }
  .ind-oda-table tr { margin-bottom: .7rem; border: 1px solid var(--border-color); border-radius: 12px; overflow: hidden; }
  .ind-oda-table tbody th { border-top: 0; background: var(--bg-alt); }
  .ind-oda-table td { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: .6rem; border-left: 0; }
  .ind-oda-table td::before {
    content: attr(data-k); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: var(--rds-color-primary-text, #006FBA); padding-top: .15rem;
  }
  .ind-ar-trio, .ind-ar-olist, .ind-ar-groups, .ind-ar-kq-4 { grid-template-columns: minmax(0, 1fr); }
  .ind-eq { margin-inline: 0; grid-template-columns: minmax(0, 1fr); }
  .ind-ar-cases, .ind-ar-cases-2, .ind-ar-cases-4 { grid-template-columns: minmax(0, 1fr); }
  .ind-ar-spec dl > div { grid-template-columns: minmax(0, 1fr); gap: .2rem; }
  .ind-ar-body .ind-ar-ladder-items { grid-column: 1; }
  .ind-ar-body .ind-ar-cases-or { justify-self: center; }
  .ind-loop { margin-inline: 0; }
  .ind-loop-list { padding-left: 24px; }
  .ind-loop-list::before { width: 16px; }
  .ind-loop-list::after { left: 8px; }
  .ind-loop-s { grid-template-columns: minmax(0, 1fr); padding: .9rem 1rem; }
  .ind-ar-body .ind-loop-again { margin-left: 24px; }
  .ind-ar-ladder-wide ol > li { grid-template-columns: minmax(0, 1fr); }
  .ind-ar-tiles-2, .ind-ar-tiles-4 { grid-template-columns: minmax(0, 1fr); }
  .ind-ar-cols, .ind-ar-col, .ind-ar-col ul { display: block; }
  .ind-ar-col + .ind-ar-col { margin-top: .7rem; }
  .ind-np { margin-inline: 0; grid-template-columns: minmax(0, 1fr); gap: 1.1rem; }
  .ind-np li { display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: .9rem; row-gap: .15rem; }
  .ind-np-n { grid-row: span 2; }
  .ind-np-k { margin-top: .45rem; }
  .ind-np li:not(:last-child)::before {
    content: ""; top: 34px; bottom: -1.1rem; left: 15px; right: auto; width: 2px; height: auto; background: rgba(111, 220, 255, .45);
  }
  .ind-ar-olist { grid-template-rows: none; grid-auto-flow: row; }
}

@media (prefers-reduced-motion: reduce) {
  .ind-sol-grid .ind-sol-card, .ind-ch-card, .ind-sa-card { transition: none; }
  dialog.ind-ar[open] .ind-ar-panel, dialog.ind-ar[open]::backdrop { animation: none; }
  .ind-oda-s, .ind-eq-list li, .ind-np-n, .ind-loop-s, .ind-ctl-s { animation: none; }
}

/* --------------------------------------------------------------------------
   6. AUDIENCE PAGES: Startups, Enterprise, NGO (tools/audience/layout.py)
   The same parts as an industry page, in three other shapes: six challenges
   with no points under them, four solutions that list their features, and
   an industry name on each article.
   -------------------------------------------------------------------------- */
/* six challenges, three by two; a card spans three rows (number, title,
   text) where an industry card spans four — these have no theme list */
.ind-ch-grid.ind-ch-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ind-ch-6 .ind-ch-card { grid-row: span 3; }
.ind-ch-6 .ind-ch-card > p { margin-bottom: 0; }
/* four solutions, two by two */
.ind-sol-grid.ind-sol-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* a solution's features (the page's own), each with a tick */
.ind-feat {
  list-style: none; margin: 0 0 1.4rem; padding: 1.05rem 0 0;
  border-top: 1px solid var(--border-color);
  display: flex; flex-wrap: wrap; gap: .6rem 1.5rem;
}
.ind-feat li { position: relative; padding-left: 1.55rem; font-size: 14.5px; font-weight: 500; line-height: 1.45; color: var(--midnight); }
.ind-feat li::before {
  content: ""; position: absolute; left: 0; top: .12em; width: 1.05rem; height: 1.05rem; border-radius: 50%;
  background: #E8F3FB;
}
.ind-feat li::after {
  content: ""; position: absolute; left: .37rem; top: .3em; width: .28rem; height: .52rem;
  border: solid var(--primary); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
/* the service behind each card sits at its foot, level across a row */
.ind-sol-2 .ind-sol-card > .ind-cap { margin: auto 0 0; padding-top: .25rem; }
/* the industry an article was written for */
.ind-mv-tag {
  align-self: flex-start; padding: .25rem .65rem; border-radius: 999px;
  background: rgba(124, 196, 242, .12); border: 1px solid rgba(124, 196, 242, .32);
  font-size: 11.5px; font-weight: 700; letter-spacing: .1em; line-height: 1.3; text-transform: uppercase; color: #9CD3F5;
}
:lang(ja) .ind-mv-tag { letter-spacing: .04em; }
@media (max-width: 1199px) { .ind-ch-grid.ind-ch-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* nine articles: three across from 900px, two on a small tablet, and on a
   phone one row to swipe, with the next card in view - stacked, the nine
   were some 2,500px of scrolling at 390px */
@media (min-width: 681px) and (max-width: 899px) {
  .ind-mv-aud .ind-mv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; }
}
@media (max-width: 680px) {
  .ind-ch-grid.ind-ch-6, .ind-sol-grid.ind-sol-2 { grid-template-columns: minmax(0, 1fr); }
  .ind-feat { gap: .55rem 1.25rem; }
  .ind-mv-aud .ind-mv-grid {
    display: flex; gap: 1rem; max-width: none; padding-bottom: 1rem;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    scrollbar-width: thin; scrollbar-color: rgba(124, 196, 242, .45) transparent;
  }
  .ind-mv-aud .ind-mv-grid > li { flex: 0 0 85%; scroll-snap-align: start; }
}