/* ---------------------------------------------------------------------------
   Industry and solution pages
   ---------------------------------------------------------------------------
   One stylesheet for eight pages, because they are one layout. Everything here
   is either a component the scene kit does not have or a size the kit's default
   would get wrong at this density.
   ------------------------------------------------------------------------ */

/* ---------------------------------------------------------------------------
   The "why" grid
   ---------------------------------------------------------------------------
   EIGHT CARDS, FOUR ACROSS. The kit tops out at three columns because three is
   right for three things; eight in a three-column grid leaves a widowed pair on
   a third row and costs a whole scene band for two cards. Four by two is the
   only arrangement of eight that is a rectangle.
   ------------------------------------------------------------------------ */

@media (min-width: 760px) {
  .srk-page .srk-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1100px) {
  .srk-page .srk-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/*
 * Eight cards at the kit's default padding is 220px taller than the band. The
 * cards carry one line of heading and one sentence, so they do not need the
 * padding a three-up feature card needs.
 */
@media (min-width: 1100px) {
  .srk-page .srin-why .srk-card {
    padding: clamp(16px, 1.5vw, 22px);
  }

  .srk-page .srin-why .srk-card h3 {
    font-size: clamp(16px, 1.15vw, 18px);
    margin-bottom: 0.4em;
  }

  .srk-page .srin-why .srk-card p {
    font-size: clamp(14px, 0.95vw, 15px);
  }
}

/* ---------------------------------------------------------------------------
   The hero tagline
   ------------------------------------------------------------------------ */

/*
 * KYC carries a three-word line under its standfirst - "Verify once. Reuse
 * forever." - which is the page's whole argument. It is set as a statement
 * rather than as body copy, and it is optional: a page without one renders
 * nothing here.
 */
/*
 * A tighter top margin than the kit's default, because on the longest of these
 * heroes - real estate, whose standfirst names six professions - the default
 * put the scene 34px over its band. It is a statement attached to the lede
 * above it rather than a new beat, so it can sit closer to it.
 */
.srk-page .srin-tagline {
  margin-top: clamp(8px, 1.1vh, 12px);
  color: var(--srk-accent-live, var(--srh-accent));
  font-size: clamp(18px, 1.5vw, 22px);
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* ---------------------------------------------------------------------------
   The prose sections
   ------------------------------------------------------------------------ */

.srin-narrow {
  max-width: 74ch;
}

/*
 * The list label ("Key features", "Integration benefits") is a paragraph and
 * not a heading, on purpose: it labels the list below it inside a section that
 * already has an h2, and promoting it would put a level in the document outline
 * for two words.
 */
.srk-page .srin-listing {
  margin-top: clamp(18px, 2.4vh, 26px);
  color: var(--srh-pale);
  font-weight: 600;
}

.srk-page .srin-list {
  list-style: none;
  margin: clamp(14px, 2vh, 20px) 0 0;
  padding: 0;
  display: grid;
  gap: clamp(10px, 1.4vh, 16px);
}

/*
 * A drawn marker rather than a disc, so it can carry the live accent and stay
 * aligned with the first line of a wrapping item. The list is still a real
 * <ul>, so it still announces its length.
 */
.srk-page .srin-list li {
  position: relative;
  padding-left: 26px;
  color: var(--srh-ink);
}

.srk-page .srin-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--srk-accent-live, var(--srh-accent));
}

.srk-page .srin-list strong {
  color: var(--srh-pale);
}

/* ---------------------------------------------------------------------------
   The case study cards
   ---------------------------------------------------------------------------
   The captured page listed these as headings with no links, which is a strange
   thing to do with the only proof on the page. The whole card is the link, not
   a "read more" in the corner: a 300px card with an 80px target is a target
   most people miss.
   ------------------------------------------------------------------------ */

.srk-page a.srin-case {
  display: block;
  text-decoration: none;
  transition:
    transform 260ms var(--srk-ease, ease),
    border-color 260ms var(--srk-ease, ease);
}

.srk-page a.srin-case:hover,
.srk-page a.srin-case:focus-visible {
  transform: translateY(-3px);
  border-color: var(--srk-accent-live, var(--srh-accent));
}

.srk-page a.srin-case h3 {
  color: var(--srk-accent-live, var(--srh-accent));
}

@media (prefers-reduced-motion: reduce) {
  .srk-page a.srin-case,
  .srk-page a.srin-case:hover {
    transition: none;
    transform: none;
  }
}

/* ---------------------------------------------------------------------------
   The closer
   ------------------------------------------------------------------------ */

.srin-centre {
  text-align: center;
  margin-inline: auto;
}

.srk-page .srin-centre p {
  margin-inline: auto;
}

.srin-centre-actions {
  justify-content: center;
}

/* ---------------------------------------------------------------------------
   The Tranche 2 pages
   ---------------------------------------------------------------------------
   Three components the solution pages do not need: the numbered steps, the
   AUSTRAC compliance table, and the capability list that used to be the tick
   column of a competitor comparison.
   ------------------------------------------------------------------------ */

/*
 * The three steps keep their numbers, because the order is the content: a
 * client verifies before a credential can be shared. The marker is drawn so it
 * can carry the live accent, but it is a real <ol> underneath and still reads
 * as "1 of 3".
 */
.srk-page .srin-steps {
  counter-reset: srin-step;
  list-style: none;
  margin: clamp(24px, 3.4vh, 38px) 0 0;
  padding: 0;
  display: grid;
  gap: clamp(16px, 2.2vh, 24px);
}

@media (min-width: 900px) {
  .srk-page .srin-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.srk-page .srin-steps li {
  counter-increment: srin-step;
  padding-top: 44px;
  position: relative;
  color: var(--srh-ink);
}

.srk-page .srin-steps li::before {
  content: counter(srin-step);
  position: absolute;
  top: 0;
  left: 0;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid var(--srh-hairline);
  background: var(--srh-surface);
  color: var(--srk-accent-live, var(--srh-accent));
  font-size: 0.875rem;
  font-weight: 600;
}

.srk-page .srin-steps strong {
  display: block;
  margin-bottom: 0.4em;
  color: var(--srh-pale);
  font-size: clamp(17px, 1.3vw, 20px);
}

/* --- the compliance table ------------------------------------------------ */

/*
 * Scrolls inside itself, never the page. Three columns of readable text will
 * not fit 390px, and a page that drifts sideways under a thumb reads as broken
 * whatever caused it. The container is focusable and labelled so a keyboard
 * user can reach the columns a phone cannot show.
 */
.srin-table-wrap {
  margin-top: clamp(22px, 3.4vh, 34px);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 16px;
  border: 1px solid var(--srh-hairline);
  background: rgba(10, 36, 114, 0.28);
}

.srin-table-wrap:focus-visible {
  outline: 2px solid var(--srk-accent-live, var(--srh-accent));
  outline-offset: 3px;
}

.srk-page .srin-table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  font-size: clamp(13px, 0.95vw, 15px);
}

/* Available to a screen reader, not to the eye: the h2 already says this. */
.srk-page .srin-table caption {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/*
 * Ten rows at the kit's usual row height put this scene 52px over its band, and
 * on a page whose promise is one chevron press per screen the overflow is the
 * part the chevron skips. A compliance table is scanned rather than read, so it
 * can take a tighter row than prose can.
 */
.srk-page .srin-table th,
.srk-page .srin-table td {
  padding: clamp(8px, 0.9vw, 11px) clamp(10px, 1.2vw, 18px);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--srh-hairline);
}

.srk-page .srin-table tbody tr:last-child th,
.srk-page .srin-table tbody tr:last-child td { border-bottom: 0; }

.srk-page .srin-table thead th {
  color: var(--srh-pale);
  font-size: clamp(12px, 0.85vw, 14px);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-bottom-color: rgba(77, 138, 255, 0.4);
}

.srk-page .srin-table tbody th {
  color: var(--srh-pale);
  font-weight: 600;
  width: 30%;
}

.srk-page .srin-table td { color: var(--srh-ink); }

/*
 * "Compliant" as a word, not a tick glyph. A bare check mark is announced
 * inconsistently by screen readers and means nothing without its column
 * heading; the word says the same thing to everyone.
 */
.srk-page .srin-table .srin-yes {
  color: var(--srk-accent-live, var(--srh-accent));
  font-weight: 600;
  white-space: nowrap;
}

/* --- the capability list -------------------------------------------------- */

.srk-page .srin-caps {
  list-style: none;
  margin: clamp(24px, 3.4vh, 38px) 0 0;
  padding: 0;
  display: grid;
  gap: clamp(10px, 1.4vh, 15px);
}

@media (min-width: 760px)  { .srk-page .srin-caps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.srk-page .srin-caps li {
  position: relative;
  padding-left: 30px;
  color: var(--srh-pale);
  font-weight: 600;
}

.srk-page .srin-caps li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 14px;
  height: 8px;
  border-left: 2px solid var(--srk-accent-live, var(--srh-accent));
  border-bottom: 2px solid var(--srk-accent-live, var(--srh-accent));
  transform: rotate(-45deg);
}

/* ---------------------------------------------------------------------------
   The injected hero, suppressed
   ---------------------------------------------------------------------------
   WPCode snippet 991039 rewrites the h1 and injects a subhead, tagline and
   Book a Demo button into the hero of every industry vertical page. It exists
   because those Elementor pages had no usable hero of their own, and it is
   still doing that job on /banking/ and /finance/, which are not rebuilt.

   On a page using this template it is pure duplication: the lede, the tagline
   and the CTA all render twice, once centred from the injection and once in the
   layout below it. Visible on /lawyers/, /accounting/ and /real-estate/, and on
   /kyc/ before this rule.

   THIS IS THE SECOND TIME THAT BUG HAS BEEN FIXED. Snippet 991389,
   "kyc-hero-dedupe-v1", hides the same injection on the old KYC hero and its
   comment describes the same duplication exactly. That snippet is now redundant
   - KYC is a .srin-page and this rule covers it - and can be retired whenever
   somebody is confident enough to remove it.

   display:none rather than visibility or opacity, deliberately: the duplicate
   is read twice by a screen reader as well as seen twice, so it should leave
   the accessibility tree with the layout.
   ------------------------------------------------------------------------ */
.srin-page .srn-hero-injection {
  display: none;
}

/* ---------------------------------------------------------------------------
   Product shots
   ---------------------------------------------------------------------------
   Rohan, 2026-08-31: "Each should also have some images of the product where
   needed." A section that carries one becomes two columns; a section that does
   not is untouched, which is why the eight pages built before this still render
   exactly as they did.

   TWO SHAPES, and the difference is the whole reason there are two classes.
   A PHOTOGRAPH CAN BE CROPPED. A SCREENSHOT CANNOT. The same sentence is
   written at the top of inc/about-showcases.php, and it was learned there: a
   cropped screenshot cuts the interface in half and reads as a rendering fault
   rather than a composition.
   ------------------------------------------------------------------------ */

.srin-split {
  display: grid;
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}

/*
 * One column until there is genuinely room for two. Below this the image goes
 * under the copy, which is the right order: the words are the argument and the
 * picture is the evidence.
 */
@media (min-width: 900px) {
  .srin-has-shot .srin-split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  }
}

/*
 * The copy keeps a readable measure inside its own column rather than
 * inheriting .srin-narrow, which the template drops on these scenes: 74ch in a
 * half-width column would be a ribbon.
 */
.srin-copy { max-width: 62ch; }

.srin-shot {
  margin: 0;
  display: grid;
  place-items: center;
}

/*
 * THE PHONE. object-fit: contain and a height budget rather than a width, so
 * the frame never crops the interface however narrow the column gets. The
 * height is capped against the scene band rather than in pixels, because these
 * scenes are one-screen and a 1763px-tall screenshot would otherwise decide the
 * band's height by itself.
 */
.srin-shot--phone img {
  display: block;
  width: auto;
  height: auto;
  max-height: min(52vh, 460px);
  max-width: 100%;
  object-fit: contain;
  border-radius: 22px;
  box-shadow: 0 24px 60px rgba(2, 8, 30, 0.55);
}

/*
 * THE WIDE SHOT. A photograph or a desktop UI, so it may be cropped to a
 * consistent ratio and it fills its column. 16:10 is the files' own ratio, so
 * nothing is actually cut at this size; declaring it stops a future file of a
 * different shape from changing the scene's height.
 */
.srin-shot--wide img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 16px;
  border: 1px solid var(--srh-hairline);
  box-shadow: 0 20px 50px rgba(2, 8, 30, 0.45);
}

@media (max-width: 899px) {
  /* Under the copy, and smaller: on a phone the picture is support, not the
     argument, and a full-height screenshot would push the CTA off the screen. */
  .srin-shot--phone img { max-height: 42vh; }
}

/* ---------------------------------------------------------------------------
   The heading and its lede, welded together
   ---------------------------------------------------------------------------
   Every h2 on every one of these pages sat flush against the paragraph under
   it: measured gap 0px, on scenes with a shot and without.

   The cause is the trap product-sharering-me.css documents at length. scene-kit
   gives .srk-lede a top margin and then resets `.srk-page .srk-scene p
   { margin: 0 }`; two classes and an element beats two classes, so the reset
   wins and the lede loses its space.

   That file's note says "seven other templates use .srk-lede without this fault
   showing, so there is no reason to move them". That was wrong about this one -
   the fault was showing here the whole time, on eleven pages, and it took
   putting an image beside the copy for anyone to look closely enough to see it.
   The About Us page hides it because its own stylesheet puts the gap on the h2
   instead, which is exactly how it stayed hidden here.

   Same fix as there, and scoped the same way: specificity rather than
   !important, and only on this template's pages.
   ------------------------------------------------------------------------ */

.srin-page .srk-page .srk-lede,
.srin-page .srk-page .srk-scene .srk-lede {
  margin-top: 0.85em;
}

/* ---------------------------------------------------------------------------
   Links inside the copy
   ---------------------------------------------------------------------------
   The three financial pages put links inside their feature lists - "See the
   app", "See how it works", "See the ledger" - and until this rule they
   inherited a link colour meant for a light ground: rgb(10, 5, 87) on
   rgb(9, 20, 48), a contrast ratio of 1.02 against a floor of 4.5. Navy on
   navy. Not hard to read, INVISIBLE, and the harness caught it on the first run
   after the pages went up.

   No page had an inline link in its body copy before, which is why the gap
   existed: every other link on these pages is a .srk-btn and carries its own
   colour.
   ------------------------------------------------------------------------ */

.srk-page .srin-list a,
.srk-page .srin-copy p a {
  color: var(--srk-accent-live, var(--srh-accent));
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.28);
}

.srk-page .srin-list a:hover,
.srk-page .srin-list a:focus-visible,
.srk-page .srin-copy p a:hover,
.srk-page .srin-copy p a:focus-visible {
  border-bottom-color: currentColor;
}

/* ---------------------------------------------------------------------------
   Further reading
   ------------------------------------------------------------------------ */

.srk-page .srin-read-date {
  display: block;
  margin-bottom: 0.5em;
  color: var(--srk-accent-live, var(--srh-accent));
  font-size: clamp(11px, 0.8vw, 12px);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* A blog headline is a sentence, not a label, so these cards carry more text
   than the case-study cards beside them and need a tighter setting to sit in
   the same band. */
.srk-page .srin-reading .srk-card h3 {
  font-size: clamp(15px, 1.1vw, 18px);
  line-height: 1.3;
}

.srk-page .srin-reading .srk-card p {
  font-size: clamp(13px, 0.9vw, 14px);
  color: var(--srh-ink-soft);
}

/*
 * The merged beat carries a heading, a lede AND the card grid, where before the
 * grid had a scene to itself. On the longest lede of the eleven - nightlife's -
 * that ran the scene 25px past its band, and on a page whose chevron moves one
 * screen at a time the overflow is the part the chevron skips. The grid gives
 * up some of its top margin rather than the copy giving up a line.
 */
.srk-page #c-what .srin-why {
  margin-top: clamp(18px, 2.4vh, 30px);
}

.srk-page #c-what .srk-lede {
  margin-bottom: 0;
}

/* ---------------------------------------------------------------------------
   The hero photograph
   ---------------------------------------------------------------------------
   THE SCRIM IS THE WHOLE JOB. White display type over a photograph is the
   easiest way on this site to fail WCAG AA without noticing, because a
   photograph's contrast varies across its own surface: the harness samples one
   pair, the eye finds the worst one. So the image is darkened globally AND a
   gradient runs from the left edge, which is where every one of these heroes
   sets its text.

   The scene's own data-bg still shows through underneath and still drives the
   journey engine, so a page whose photograph fails to load looks exactly like
   the eleven pages did before there were photographs.
   ------------------------------------------------------------------------ */

.srin-hero--photo { position: relative; isolation: isolate; }

.srin-hero-media {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}

.srin-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  /* Knocked well back before the gradient is applied. These are stock
     photographs behind a sales argument, not the argument itself. */
  opacity: 0.34;
  filter: saturate(0.85);
}

/*
 * Two layers, and both are needed. The flat wash guarantees a floor everywhere
 * on the image; the gradient buys back extra depth on the left third, under the
 * text, without flattening the picture entirely on the right where there is
 * nothing to read.
 */
.srin-hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--srk-bg, #04101F) 92%, transparent) 0%,
      color-mix(in srgb, var(--srk-bg, #04101F) 78%, transparent) 42%,
      color-mix(in srgb, var(--srk-bg, #04101F) 55%, transparent) 100%),
    color-mix(in srgb, var(--srk-bg, #04101F) 30%, transparent);
}

@media (max-width: 899px) {
  /* On a phone the text runs the full width, so the left-weighted gradient has
     nothing to weight: the wash goes flat and heavier instead. */
  .srin-hero-media img { opacity: 0.26; }

  .srin-hero-media::after {
    background: color-mix(in srgb, var(--srk-bg, #04101F) 68%, transparent);
  }
}

/* ---------------------------------------------------------------------------
   Bigger media
   ---------------------------------------------------------------------------
   Rohan, 2026-08-31: "The phone is too small." It was: the column was 0.85fr
   against the copy's 1fr and the phone was capped at min(52vh, 460px), so on a
   1440 screen it drew about 200px wide - a device small enough that the
   interface inside it was decorative rather than readable, which defeats the
   only reason to show a screen at all.

   The column now takes an equal share and the cap rises to min(70vh, 620px).
   ------------------------------------------------------------------------ */

@media (min-width: 900px) {
  .srin-has-shot .srin-split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

/*
 * Rohan, 2026-09-01: "The phone on the hero is way too small and should be
 * shown as it is in DigitalMe size wise."
 *
 * The 31 Aug pass raised the cap to min(70vh, 620px), which drew 286px wide on
 * a 1440 screen. DigitalMe sizes its phone by WIDTH, not height:
 *
 *   digital-me.css:30   --phone-width: clamp(280px, 26vw, 420px)
 *
 * which is 374px on the same screen. Driving off height was the actual mistake:
 * a height cap sets the width only as a side effect of the aspect ratio, so the
 * device kept shrinking on short viewports even when the column had room. The
 * column is 562px wide and the band has 314px of vertical slack, both measured,
 * so the width DigitalMe uses fits with room to spare.
 *
 * Same clamp as DigitalMe, then bounded by the height actually available so a
 * short viewport cannot push the scene past its band - the fault that hid the
 * bottom row of the case-studies index. 2.1667 is the clip's own aspect ratio
 * (620/286 as measured), and it is DigitalMe's --phone-height ratio too.
 */
.srin-shot--phone {
  --srin-phone-w: min(
    clamp(280px, 26vw, 420px),
    calc((var(--vph, 100dvh) - 140px) / 2.1667)
  );
}

.srin-shot--phone img,
.srin-shot--phone .srk-scene-video {
  width: var(--srin-phone-w);
  height: auto;
  max-height: none;
}

/*
 * The clip is the same object as the still it replaces: same rounded frame,
 * same shadow, same contain-not-crop rule. A verification is a sequence, so
 * losing the top or bottom of the sheet loses the point of showing it.
 *
 * POSITION MUST BE RESET FIRST. scene-kit styles .srk-scene-video for the job
 * it was built for - a full-bleed clip behind a scene - with
 * `position: absolute; inset: 0; width: 100%; height: 100%`. Dropped into a
 * grid column that makes the video ignore the column entirely: it pinned itself
 * to the scene's left edge at full height and printed the phone straight over
 * the copy. Every one of these five declarations is undoing that, not styling.
 */
.srin-shot--clip .srk-scene-video {
  position: static;
  inset: auto;
  display: block;
  /* --srin-phone-w is set on .srin-shot--phone and is the single source of truth
     for device width. This rule and the phone rule have equal specificity, and
     this one is later, so leaving `auto` here silently beat the sizing and drew
     the clip at the full 562px column width. Falls back to auto for any clip
     that is not a phone, so the block still does its original undoing job. */
  width: var(--srin-phone-w, auto);
  height: auto;
  max-width: 100%;
  object-fit: contain;
  background: transparent;
  border-radius: 22px;
  box-shadow: 0 24px 60px rgba(2, 8, 30, 0.55);
}

/*
 * Under the copy on a phone, the device is support rather than the argument, and
 * it must not eat the screen. Width-driven for the same reason as the desktop
 * rule above: 26vw collapses to nothing at 390px, so the clamp floor would win
 * and draw a 280px device inside a 358px column. Sized off the column instead,
 * then bounded by height so it still cannot overflow the band.
 */
@media (max-width: 899px) {
  .srin-shot--phone img,
  .srin-shot--phone .srk-scene-video {
    width: min(72%, calc((var(--vph, 100dvh) - 120px) / 2.1667));
  }
}

/*
 * The reference-implementation disclaimer. Quiet but not hidden: it sits under
 * the lede at body size with a rule beside it, rather than in the grey 11px the
 * captured page used. A caveat set smaller than everything it qualifies is a
 * caveat nobody reads, and this one is the reason the page is allowed to
 * describe a rollout at all.
 */
.srk-page .srin-disclaimer {
  max-width: 62ch;
  margin-top: clamp(14px, 2vh, 20px);
  padding-left: clamp(12px, 1.2vw, 16px);
  border-left: 2px solid var(--srh-hairline);
  color: var(--srh-ink-soft);
  font-size: clamp(13px, 0.95vw, 15px);
  line-height: 1.5;
}

/* ---------------------------------------------------------------------------
   The hero: copy left, app right
   ---------------------------------------------------------------------------
   Rohan, 2026-08-31: "The app should show up as the hero for each industry
   specific... the text should be on the left, the phone on the right."

   Before this the copy ran the full 1180 measure with the photograph only
   behind it. Nothing was centred - every heading measured x=130 - but a lede
   wrapping across the whole frame with a big picture behind it reads as a
   centred block, and worse, the page led with an argument while the product it
   argues for sat three scenes down.
   ------------------------------------------------------------------------ */

.srin-hero-inner { display: grid; gap: clamp(24px, 4vw, 64px); }

@media (min-width: 960px) {
  .srin-hero-inner {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    align-items: center;
  }
}

/* The copy keeps a readable measure inside its own column. It is NOT centred
   and never was; this just stops it running the full frame. */
.srin-hero-copy { max-width: 60ch; }

.srin-hero-app {
  display: grid;
  place-items: center;
}

/*
 * Undoing scene-kit, not styling. .srk-scene-video is built for a full-bleed
 * clip behind a scene - absolute, inset 0, 100% by 100% - so in a grid column
 * it ignores the column and paints itself over the copy. Same five
 * declarations as .srin-shot--clip, and the same reason.
 */
.srin-hero-app .srin-app-clip {
  position: static;
  inset: auto;
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  background: transparent;
  border-radius: var(--srk-phone-screen-radius);
}

/*
 * THE BEZEL. Same numbers as .srk-phone in scene-kit.css, which is what the
 * product heroes draw, so an industry hero and a product hero show the same
 * device. Not the same class: the clip is 400x866 and .srk-phone-screen is
 * 760x1744, so borrowing it would letterbox the film inside the frame.
 *
 * width: max-content lets the frame hug whatever height the clip settles at,
 * which is how one rule covers a 1440 desktop and a short laptop without a
 * second breakpoint. The shadow moves here from the clip: it belongs to the
 * device, not to the screen.
 */
/*
 * The closer's app shot. The bezel is .srin-hero-phone, shared with the hero,
 * so a page that opens on a device closes on the same device. The screen is a
 * still rather than the film, so it needs the width the frame would otherwise
 * take from the video, and it is capped smaller than the hero's: this is the
 * last beat and the copy beside it is the call to action.
 */
.srin-page .srin-closer-shot--app {
  margin: 0;
  display: flex;
  justify-content: center;
}

.srin-page .srin-closer-shot--app .srin-hero-phone {
  width: min(var(--srk-phone-width), 300px);
}

.srin-page .srin-closer-shot--app img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--srk-phone-screen-radius);
  /*
   * BOTH OF THESE ARE RESETS, and without them the screen is destroyed.
   * .srin-closer-shot img further down this file pins aspect-ratio 5/4 with
   * object-fit: cover, which is right for the industry PHOTOGRAPH it was
   * written for and crops a 760x1763 phone screen into a landscape letterbox.
   * This rule wins on specificity but only for the properties it names, so
   * naming width and height was not enough: the aspect-ratio it never
   * mentioned went on applying, and the shot came out 274x219.
   */
  aspect-ratio: auto;
  object-fit: contain;
}

/*
 * The trust row: evidence under the hero's buttons, on the dark ground.
 *
 * Not a card. The snippet this replaces drew a white panel, which is what made
 * it read as something that had escaped from another page; on a dark hero the
 * seals and the words carry themselves and need no plate behind them. A single
 * hairline above sets it apart from the buttons without boxing it in.
 */
.srin-page .srin-trust {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(20px, 2.4vw, 40px);
  align-items: center;
  margin: clamp(20px, 2.6vh, 34px) 0 0;
  padding-top: clamp(16px, 2vh, 26px);
  border-top: 1px solid rgba(234, 240, 255, 0.16);
  list-style: none;
}

.srin-page .srin-trust-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.srin-page .srin-trust-seal {
  width: 44px;
  height: 44px;
  flex: none;
  object-fit: contain;
}

.srin-page .srin-trust-label {
  display: block;
  line-height: 1.25;
}

.srin-page .srin-trust-label strong {
  display: block;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--srh-bright, #f8fafc);
}

.srin-page .srin-trust-label span {
  display: block;
  font-size: 0.75rem;
  margin-top: 2px;
  color: var(--srh-pale, #dee0ff);
  opacity: 0.78;
}

@media (max-width: 599px) {
  .srin-page .srin-trust { gap: 14px 22px; }
  .srin-page .srin-trust-seal { width: 34px; height: 34px; }
}

/*
 * THE PRIMARY CALL TO ACTION IS BRAND BLUE, not the scene accent.
 *
 * Rohan, 2026-09-02, on /advanced-age-verification/: "the Book a demo button
 * ... #010ED0 button fill with white text. Keep the button geometry and hover
 * behaviour, only the colour changes."
 *
 * scene-kit.css gives .srk-btn-primary the LIVE accent and computes its ink
 * from the same value, which is a good idea for a product journey and is what
 * made this button lavender. It is also why the CTA is pink on
 * /adult-creator-dating/ (#FF3D8C) and peach on /ecommerce/ (#FFB4A8): the one
 * element on the page that should never drift off brand was the one element
 * wired to drift with it.
 *
 * Scoped to .srin-page, so this is the thirteen industry pages and nothing
 * else. The product and company journeys keep the accent-tinted button.
 *
 * Geometry and hover are untouched: only background and color are set here,
 * and the transform on :hover lives in scene-kit.css where it was.
 */
.srin-page .srk-page .srk-btn-primary {
  background: #010ED0;
  color: #ffffff;
}

.srin-hero-phone {
  position: relative;
  width: var(--srk-phone-width);
  max-width: 100%;
  margin-inline: auto;
  padding: 12px;
  border-radius: var(--srk-phone-radius);
  background: #050d2c;
  border: 1px solid rgba(234, 240, 255, 0.2);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.62);
}

/*
 * THE SIZE IS NOT SET HERE. It is --srk-phone-width in scene-kit.css, the same
 * token every .srk-phone on the site reads, which is the only way an industry
 * hero and a product hero can be the same size on any viewport. This frame was
 * briefly sized off its own 84vh cap and came out 364px against the product
 * pages' 346px: right on its own page, wrong beside the next one.
 *
 * The film is 400x866 and .srk-phone-screen is 760x1744, so at a shared WIDTH
 * the two devices differ in height by about 40px. That is the artwork, not the
 * layout, and cropping the film to match would cut a caption off the app UI.
 */

@media (max-width: 959px) {
  /* Under the copy on a phone, and smaller: the words are the argument and a
     full-height device would push the CTA off the first screen. */
  /* Width is the shared token; nothing to cap here any more. */
}

/* The closer, left-aligned with everything else. It was the one centred block
   on these pages and it had no reason to be: a page that sets every other beat
   from x=130 should not finish by moving the reader's eye to the middle. */
.srk-page .srin-closer .srin-centre,
.srk-page .srin-closer .srin-centre p { text-align: left; margin-inline: 0; }
.srk-page .srin-closer .srin-centre-actions { justify-content: flex-start; }

/* ---------------------------------------------------------------------------
   Demo films
   ------------------------------------------------------------------------ */

.srin-demos {
  display: grid;
  gap: clamp(18px, 2.4vw, 30px);
  margin-top: clamp(22px, 3vh, 34px);
}

@media (min-width: 900px) {
  .srin-demos { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
}

.srin-demo { margin: 0; }

/* 16:9, held by the box rather than by the iframe, so the frame reserves its
   height before YouTube answers and the scene does not jump when it does. */
.srin-demo-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--srh-hairline);
  background: rgba(4, 12, 28, 0.6);
}

.srin-demo-frame iframe,
.srin-demo-frame video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.srk-page .srin-demo figcaption {
  margin-top: clamp(10px, 1.4vh, 14px);
  color: var(--srh-ink-soft);
  font-size: clamp(13px, 0.95vw, 15px);
  line-height: 1.5;
}

.srk-page .srin-demo figcaption strong {
  display: block;
  color: var(--srh-pale);
  margin-bottom: 0.2em;
}

/* ---------------------------------------------------------------------------
   The hero, typing itself out
   ---------------------------------------------------------------------------
   Rohan: "Text should type out and tell the story."

   Opacity only, never position: every word is already in its final place, so
   there is no reflow and no layout shift on the largest text on the page. The
   words are wrapped by assets/js/industry.js and are visible until that script
   decides otherwise, so with JavaScript off, or with reduced motion, the hero
   is a plain readable heading.
   ------------------------------------------------------------------------ */

.srin-typing .srin-w {
  opacity: 0;
  transition: opacity 260ms linear;
  transition-delay: calc(var(--w, 0) * 55ms);
}

.srin-typing.is-typed .srin-w { opacity: 1; }

/*
 * The caret. It rides the last word rather than being a separate element, so it
 * cannot fall onto its own line when the heading wraps. It stops blinking once
 * the line is done, because a caret that blinks forever on finished text reads
 * as a stuck cursor rather than as composition.
 */
.srin-typing .srin-w:last-child::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 0.9em;
  margin-left: 0.12em;
  vertical-align: -0.08em;
  background: var(--srk-accent-live, var(--srh-accent));
  opacity: 0;
}

.srin-typing.is-typed .srin-w:last-child::after {
  opacity: 1;
  animation: srin-caret 900ms steps(1) 3;
  animation-delay: calc(var(--w, 0) * 55ms);
}

@keyframes srin-caret {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .srin-typing .srin-w { opacity: 1; transition: none; }
  .srin-typing .srin-w:last-child::after { display: none; }
}

/* The play facade. A real button, so it is reachable and operable by keyboard
   and announced as a control rather than as a picture. */
/*
 * THREE CLASSES, because the Elementor Global Kit styles bare `button` and
 * outranked a single class: the facade painted itself the kit's CTA blue
 * (#010ED0) instead of the dark ground below, which dropped the small print on
 * it to a contrast of 3.18 against a floor of 4.5. The harness caught it; the
 * eye would have read it as a blue button that was meant to be there.
 */
.srk-page .srin-demo .srin-demo-play {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: grid;
  place-content: center;
  gap: 10px;
  justify-items: center;
  border: 0;
  cursor: pointer;
  background:
    radial-gradient(120% 120% at 50% 40%, rgba(95, 208, 255, 0.16), transparent 60%),
    rgba(4, 14, 32, 0.9);
  color: var(--srh-pale);
  font: inherit;
}

.srk-page .srin-demo .srin-demo-play:hover,
.srk-page .srin-demo .srin-demo-play:focus-visible {
  background:
    radial-gradient(120% 120% at 50% 40%, rgba(95, 208, 255, 0.26), transparent 60%),
    rgba(4, 14, 32, 0.86);
}

.srk-page .srin-demo .srin-demo-play:focus-visible {
  outline: 2px solid var(--srk-accent-live, var(--srh-accent));
  outline-offset: -3px;
}

/* Drawn rather than a glyph font or an image: one triangle, any size, no
   request, and nothing for a screen reader to mispronounce. */
.srin-demo-glyph {
  width: 0;
  height: 0;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-left: 25px solid var(--srk-accent-live, var(--srh-accent));
  margin-left: 6px;
}

.srin-demo-cta { font-weight: 600; letter-spacing: 0.01em; }

/* --srh-ink-fade is 52% white, which is fine on a card and not fine at 11px:
   it measured 3.18 here. The soft ink is 72% and clears the floor at this
   size. A caption nobody can read is not a quieter caption, it is a missing
   one. */
.srk-page .srin-demo .srin-demo-host {
  color: var(--srh-ink-soft);
  font-size: clamp(12px, 0.85vw, 13px);
}

/* ---------------------------------------------------------------------------
   The workflow chain
   ---------------------------------------------------------------------------
   Drawn as a sequence with a rule running through it, because the argument is
   the ORDER: cheap client-side captures first, the branch in the middle, the
   billable server calls only after it. A feature list cannot say that.

   Two nodes are marked. The gate is where a run can end for free, and the paid
   nodes are the only lines that reach an invoice. Both carry a word as well as
   a colour, because a colour alone is not a label.
   ------------------------------------------------------------------------ */

.srk-page .srin-flow {
  counter-reset: srin-node;
  list-style: none;
  margin: clamp(24px, 3.2vh, 38px) 0 0;
  padding: 0;
  display: grid;
  gap: clamp(10px, 1.3vh, 15px);
  max-width: 78ch;
}

.srk-page .srin-flow-step {
  counter-increment: srin-node;
  position: relative;
  padding-left: 46px;
  display: grid;
  gap: 2px 14px;
  color: var(--srh-ink);
  font-size: clamp(15px, 1.05vw, 17px);
}

@media (min-width: 820px) {
  .srk-page .srin-flow-step { grid-template-columns: 210px minmax(0, 1fr); align-items: baseline; }
}

/* The number, and the rule that joins it to the next one. */
.srk-page .srin-flow-step::before {
  content: counter(srin-node);
  position: absolute;
  left: 0;
  top: 0.1em;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid var(--srh-hairline);
  background: var(--srh-surface);
  color: var(--srh-ink-soft);
  font-size: 0.8rem;
  font-weight: 600;
}

.srk-page .srin-flow-step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 13px;
  top: calc(0.1em + 28px);
  bottom: calc(-1 * clamp(10px, 1.3vh, 15px));
  width: 1px;
  background: var(--srh-hairline);
}

.srk-page .srin-flow-task {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.92em;
  color: var(--srk-accent-live, var(--srh-accent));
  letter-spacing: -0.01em;
}

.srk-page .srin-flow-note { color: var(--srh-ink-soft); }

/* The branch: where a run can end without costing anything. */
.srk-page .srin-flow-step.is-gate::before {
  border-color: var(--srk-accent-live, var(--srh-accent));
  color: var(--srk-accent-live, var(--srh-accent));
}

/* The billable calls. Labelled in words, not only in colour. */
.srk-page .srin-flow-step.is-paid .srin-flow-task::after {
  content: "billable";
  display: inline-block;
  margin-left: 10px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(240, 179, 102, 0.5);
  color: #F0B366;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: 1px;
}

.srk-page .srin-flow-step.is-end::before {
  background: var(--srk-accent-live, var(--srh-accent));
  border-color: var(--srk-accent-live, var(--srh-accent));
  color: #04101F;
}

/*
 * THREE CLASSES. Fourth time today: scene-kit resets
 * `.srk-page .srk-scene p { margin: 0 }`, two classes and an element, which
 * beats a two-class rule. Written as `.srk-page .srin-flow-cost` this margin
 * computed to 0 and the cost line collided with the last node of the chain.
 */
.srk-page .srk-scene .srin-flow-cost {
  max-width: 74ch;
  margin-top: clamp(18px, 2.4vh, 26px);
  padding-left: clamp(12px, 1.2vw, 16px);
  border-left: 2px solid var(--srk-accent-live, var(--srh-accent));
  color: var(--srh-ink-soft);
  font-size: clamp(14px, 1vw, 16px);
}

/* The demo CTA is the one button on these pages that is not "book a demo", so
   it is allowed to look different from the primary it sits beside. */
.srk-page .srin-try { font-weight: 700; }

/* ---------------------------------------------------------------------------
   Bigger. Rohan: "Make the tiles larger... Use up the real estate of the page
   with larger text if it works."
   ------------------------------------------------------------------------ */

@media (min-width: 1100px) {
  /* The four-up reason cards had been squeezed to fit a scene that also carried
     a heading and a lede. They fit at a readable size now. */
  .srk-page .srin-why .srk-card { padding: clamp(20px, 1.9vw, 28px); }
  .srk-page .srin-why .srk-card h3 { font-size: clamp(17px, 1.3vw, 20px); }
  .srk-page .srin-why .srk-card p { font-size: clamp(15px, 1.05vw, 16px); }

  /* Case-study and reading cards, same treatment. */
  .srk-page .srin-case h3 { font-size: clamp(18px, 1.35vw, 22px); }
  .srk-page .srin-reading .srk-card h3 { font-size: clamp(16px, 1.2vw, 19px); }
  .srk-page .srin-reading .srk-card p { font-size: clamp(14px, 1vw, 15px); }
}

/* The Link builder capture. It was 0.85fr of a split and read as a thumbnail of
   a dense interface, which is worse than not showing it. It now takes the full
   measure of its scene when it is the only thing in it. */
.srk-page .srin-shot--wide img { max-width: none; }

@media (min-width: 900px) {
  .srin-has-shot .srin-split:has(.srin-shot--wide) {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.28fr);
  }
}

/* The closer, with the industry photograph beside it. Cropped tall rather than
   wide: it is filling a column, not spanning a scene, and a 16:10 crop in a
   half-width column leaves the same empty band the copy alone did. */
@media (min-width: 900px) {
  .srin-closer-split { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); align-items: center; }
}

.srin-closer-shot { margin: 0; }

.srin-closer-shot img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  border-radius: 18px;
  border: 1px solid var(--srh-hairline);
  box-shadow: 0 24px 60px rgba(2, 8, 30, 0.5);
}

@media (max-width: 899px) {
  /* Under the copy, and shorter: nobody needs a half-screen photograph between
     them and the button they came to press. */
  .srin-closer-shot img { aspect-ratio: 16 / 9; }
}

/*
 * The longest chain is crypto's, at ten nodes, and banking's nine already ran
 * the scene 10px past its band. The rows carry one line each, so the gap is
 * what gives, not the type size.
 */
@media (min-width: 900px) {
  .srk-page .srin-flow { gap: clamp(7px, 0.95vh, 11px); }
  .srk-page .srin-flow-step { font-size: clamp(14px, 1vw, 16px); }
  .srk-page .srk-scene .srin-flow-cost { margin-top: clamp(14px, 1.8vh, 20px); }
}

/* ---------------------------------------------------------------------------
   Three scenes that grew past their band when the tiles and the Link capture
   were enlarged. Measured at 1440, fixed at the thing that actually grew.
   ------------------------------------------------------------------------ */

@media (min-width: 900px) {
  /*
   * The wide capture now takes the larger half of its split, which made it tall
   * enough to drive the scene rather than sit in it. Height is capped against
   * the band; the crop is 16:10 and it fills the width it is given, so this
   * only bites on the widest screens.
   */
  .srin-shot--wide img { max-height: min(50vh, 440px); }

  /* Ten nodes on crypto. The rows are single lines, so the leading is what
     gives; the type stays where it is. */
  .srk-page .srin-flow-step { line-height: 1.35; }

  /*
   * The four-up grid: the enlargement was right for eleven pages and 89px too
   * much for nightlife, which carries the longest lede of the thirteen. The
   * cards keep the larger type and give back the padding, which is the part
   * nobody reads.
   */
  .srk-page .srin-why .srk-card { padding: clamp(17px, 1.55vw, 23px); }
}

/* ---------------------------------------------------------------------------
   Scene padding, on these pages only
   ---------------------------------------------------------------------------
   Five scenes across four pages sat 8 to 69px past their band once the tiles,
   the type and the Link capture were enlarged. Chasing each one with its own
   rule was going to leave thirteen pages held together by exceptions.

   The lever that works uniformly is the scene's own vertical padding. The kit
   sets --srk-scene-gap to clamp(80px, 11vh, 180px), which at a 900px band is
   about 99px top AND bottom: 198px of the 900 spent on air before a word is
   set. 9vh gives back roughly 36px per scene, which covers every one of the
   five, and is still a generous margin for a page whose whole layout is one
   idea per screen.

   Scoped to .srin-page. The product and company pages are not this dense and
   have no reason to lose the air.
   ------------------------------------------------------------------------ */

.srin-page .srk-page .srk-scene {
  --srk-scene-gap: clamp(64px, 9vh, 150px);
}

/* The hero device is sized by --srk-phone-width in scene-kit.css, shared with
   every other hero on the site. There was briefly an unmediated override here
   that beat the mobile cap on source order alone; it is gone with the rest of
   the bespoke sizing. */