/* ==========================================================================
   aiRA - Industry hub pages (/solutions/retail, /solutions/restaurants-qsr,
   /solutions/travel-hospitality, /solutions/telecom)

   The split hero and its media slot are shared by all four hubs, so they live
   here once rather than four times; each page keeps its own stylesheet for
   what is genuinely its own (retail's category grid, each page's shape cards).
   Loaded AFTER pages/solutions.css (the seat machinery) and before the page's
   own file.
   ========================================================================== */

/* ---- Hero -----------------------------------------------------------------
   Split, MoEngage-style: the industry is already chosen by arriving here, so
   the hero leads with the claim and keeps the two routes beside it. */

/* NO VIEWPORT HEIGHT since 3 Oct (user: "lets remove 100vh we added in all
   pages hero"). It was a plain 100svh from 28 Sep, which needed no offset
   here and that was not luck: the negative margin-top below runs this hero
   up behind the floating header and the top padding gives the same distance
   back, so the section's own box starts at y=0.
   WHAT IT COST is that the section below no longer starts at the fold, which
   is the whole point of the change rather than a regression.
   THE flex/align-items CENTRING STAYS, unlike on /pricing where it went with
   the height. Here it is doing a second job: this hero is a two-column split
   and the copy has to centre against the FIGURE beside it, which is taller.
   On /pricing there was nothing to centre against once the height went.
   NOTE THE 25px OVERSHOOT AT 390x844 recorded in CLAUDE.md is now moot: it
   happened because 412px of copy and a 219px figure did not fit inside a
   forced 844px box, and nothing is forced any more. */
.hero-ind {
  position: relative;
  display: flex;
  align-items: center;
  /* Run the ground up behind the floating header and its gap, then give the
     top pad back, so the page has no strip of bare background above the bar. */
  margin-top: calc(-1 * (var(--nav-h) + var(--nav-float) + 2px));
  padding-block: calc(var(--sp-20) + var(--nav-h) + var(--nav-float) + 2px) var(--sp-20);
  /* Analogous halo (18 Sep): the brand tint at top centre with its two
     client-supplied flanks breathing either side of it, T300 sky to the
     left, accent-400 purple to the right. All three stay whispers. */
  background:
    radial-gradient(42% 44% at 24% 0%,
      color-mix(in srgb, var(--tertiary-300) 7%, transparent), transparent 70%),
    radial-gradient(42% 44% at 76% 0%,
      color-mix(in srgb, var(--secondary-400) 6%, transparent), transparent 70%),
    radial-gradient(58% 46% at 50% 0%,
      color-mix(in srgb, var(--brand) 5%, transparent), transparent 72%),
    linear-gradient(180deg, var(--bg-subtle), var(--bg) 78%);
}
.hero-ind > .padding-global { width: 100%; }

.hero-ind__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: var(--sp-16);
  align-items: center;
}

.hero-ind__t {
  font-family: var(--font-display);
  /* --t-display-1 (32 to 60), not the 70px hero token: this headline lives in
     half the width, and at the full hero size it broke to three lines and the
     <br> stopped meaning anything. */
  font-size: var(--t-display-0);
  /* 500, the locked H1 weight, same as the homepage hero. */
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: var(--tr-display);
  color: var(--ink);
  margin-bottom: var(--sp-5);
}

.hero-ind__sub {
  font-size: var(--t-body-xl);
  line-height: var(--lh-body);
  color: var(--ink-2);
  max-width: 34rem;
}

.hero-ind__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-8);
}


/* The hero figure is the same placeholder slot the seats use, so when real
   screenshots arrive they drop into one treatment rather than two. */
.hero-ind__shot {
  display: flex;
  align-items: center;
  justify-content: center;
  /* 16/10 since 19 Sep: 4/3 gave the photo more height than the hero copy
     beside it could answer. */
  aspect-ratio: 16 / 10;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-float);
  background-color: var(--surface);
  background-image:
    repeating-linear-gradient(to right, var(--frame-grid) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(to bottom, var(--frame-grid) 0 1px, transparent 1px 22px);
}
.hero-ind__shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
.hero-ind__shot:has(img) {
  background-image: none;
  padding: 0;
}
.hero-ind__shot:has(img) .seat__shot-ic { display: none; }

/* ---- Floating UI cards on the hero photo (19 Sep, moengage.com role-page
   reference): two small drawn-UI cards ride the photo's edges, an audience
   card top-left and the proposed move bottom-right, so the approval grammar
   is visible before the first scroll. Drawn in CSS like every product
   surface without a screenshot, and aria-hidden: they illustrate, the copy
   beside them explains. */
.hero-ind__fig { position: relative; }
/* THE TWO CARDS ARE QUIET WIDGETS since 13 Oct (user, with an Apple-style
   widget reference: "dont look like widget tho ... very ai made ui, make
   clean ui"). What came off: caps micro-labels, the mono "Pending" pill,
   the icon tile, the hairline foot and the drawn Approve button. What
   they are now: a large-radius white card on a soft wide shadow, a
   sentence-case heading led by one small brand glyph and plain type.
   (The reference's dissolving foot was NOT taken: a mask clips the card's
   own shadow, and the shadow is what lifts it off the photo.) The audience card leads with its NUMBER at
   display size; the move card says what aiRA built in one sentence and
   ends on a dashed "Your approval" slot, the invoice's "Sign here": the
   approval grammar shown as an empty place a person fills, not a badge. */
.hero-float {
  position: absolute;
  z-index: 1;
  width: 208px;
  padding: 14px var(--sp-4);
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
}
/* COMPACT, same day (user: "too big and reduce padding, very clean and
   compact"): 208px wide, 14/16 padding, a 14px heading, 12px secondary
   lines, the count at 24, a 40px approval slot. */
.hero-float--aud { top: 20px; left: -28px; }
.hero-float--move { bottom: 24px; right: -20px; }
.hero-float__k {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: var(--t-body);
  font-weight: 500;
  color: var(--ink);
}
.hero-float__k svg { width: 20px; height: 20px; flex: none; color: var(--brand); }
.hero-float__t {
  margin: 6px 0 0;
  font-size: var(--t-caption);
  line-height: 1.45;
  color: var(--ink-3);
}
.hero-float__t b { font-weight: 500; color: var(--ink); }
.hero-float__big {
  margin: 6px 0 0;
  font-size: var(--t-caption);
  color: var(--ink-3);
}
.hero-float__big b {
  font-family: var(--font-display);
  font-size: var(--t-title-xl);
  font-weight: 500;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.hero-float__sign {
  display: grid;
  place-items: center;
  height: 40px;
  margin: 10px 0 0;
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-sm);
  background: var(--surface-2);
}
.hero-float__sign span {
  padding: 0 var(--sp-3) 2px;
  border-bottom: 1px solid var(--border-strong);
  font-size: var(--t-caption);
  color: var(--ink-2);
}
@media (max-width: 991px) {
  /* Full-width figure below the split: the cards tuck inside the photo's
     edges instead of overhanging a gap that no longer exists. */
  .hero-float--aud { left: 12px; }
  .hero-float--move { right: 12px; }
}
@media (max-width: 640px) {
  .hero-float { display: none; }
}


@media (max-width: 991px) {
  .hero-ind {
    padding-block: calc(var(--sp-16) + var(--nav-h) + var(--nav-float) + 2px) var(--sp-16);
  }
  .hero-ind__grid {
    grid-template-columns: 1fr;
    gap: var(--sp-10);
  }
  /* The figure is a placeholder; below the split it earns less height. */
  .hero-ind__shot { aspect-ratio: 16 / 10; }
}

@media (max-width: 640px) {
  .hero-ind__cta .btn { width: 100%; justify-content: center; }
}

/* ---- The shape of the industry ---------------------------------------------
   The differentiator section: three structural truths about this vertical.
   Hairline-topped open columns rather than boxed cards, the questions-grid
   language from the homepage, because these are claims to read rather than
   destinations to click. */

.shape-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-10);
  margin-top: var(--sp-12);
}
/* On the hubs the three facets take the homepage questions grid's anatomy
   (17 Sep, user call: same as .feat__mini): open cells, a duotone Phosphor
   icon riding the title as a prefix, the description below. The hairline
   above the row came off on 19 Sep along with the space either side of it:
   the margin the user asked to drop, and the padding that only existed to
   clear the line. The row now sits flush under the section head.
   Scoped away from the category pages' four-up variant, which loads this
   file as well and keeps its own spacing (it restyles into cards in
   category.css and never had the hairline). */
.shape-grid:not(.shape-grid--4) {
  margin-top: 0;
}

.shape { min-width: 0; }
.shape__t {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-display);
  font-size: var(--t-title-sm);
  font-weight: 500;
  letter-spacing: var(--tr-title);
  color: var(--ink);
  margin-bottom: var(--sp-2);
}
.shape__ic {
  display: inline-flex;
  flex: none;
  color: var(--brand);
}
.shape__ic svg { width: 20px; height: 20px; }
.shape__d {
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--ink-2);
}

@media (max-width: 991px) {
  .shape-grid { grid-template-columns: 1fr; gap: var(--sp-8); }
}


/* ---- Seats -----------------------------------------------------------------
   Every hub reuses the finder's seat machinery from pages/solutions.css and
   wraps it in .rseats. These two rules were in pages/retail.css, which only
   the retail hub loads, so the other three hubs were spacing their tab bar
   differently; they belong with the shared hub styles. */


/* ---- The asks (19 Sep) -------------------------------------------------------
   The teams section came out on Hardik's call; what stands in its place
   follows the solution-first turn: three real asks for the industry, each
   taken from the opening question through the drill-down it earns to the
   move held for approval. The question is a .qstring, the sequence is the
   .thread trace, the promise is the .state badge. */

/* Since 19 Sep (evening) each thread is drawn as the product's own chat: the
   ask as a user bubble, the answer under the sparkle, the follow-up bubble,
   and the proposed move as a card wearing the approval badge. The three
   panels share hairlines with no gap, lgrid-style, so the grid's own lines
   connect them into one board. */
/* Frigade-style walkthrough (19 Sep, rebuilt the same evening to the
   frigade.com reference). ONE BOARD split 36/64: a left rail of three
   numbered steps driving the stage beside it. The steps divide on hairlines
   with no gap, and the open one takes a wash tint plus a brand rule down its
   left edge which doubles as the timer js/askstory.js advances on. The band
   still runs rail to rail, and every line in it is --frame-line: the page's
   own rail colour, so the board matches the frame around it. It was Slate/300
   until 19 Sep, which read a shade heavier and bluer than every other border
   on the page. Without the script .is-live never
   lands and the three panels simply stack and read whole. */
.askstory {
  display: grid;
  grid-template-columns: minmax(0, 36fr) minmax(0, 64fr);
  gap: 0;
  align-items: stretch;
  margin-top: var(--sp-12);
  /* Breaks the container's gutter so the band's top and bottom hairlines
     reach the frame's own lines instead of stopping short of them. */
  margin-inline: calc(-1 * var(--sp-5));
  border-block: 1px solid var(--frame-line);
}
/* The section wears .section--band from 19 Sep, so above 1200px the container
   pads 136px and the dot bands take the first 112px of it. Pulling only the
   remaining 24px puts the board's edges on the bands' inner lines: it meets
   the dots without running under them. Same arithmetic as the homepage's
   difference board. */
@media (min-width: 1200px) {
  .askstory { margin-inline: -24px; }
}

.askstory__rail {
  display: flex;
  flex-direction: column;
  /* The column divider. Each step's own rule butts into it, so every
     horizontal line runs from the board's left edge to this one. */
  border-right: 1px solid var(--frame-line);
}
.askstory__step {
  position: relative;
  /* Equal thirds of the stage's height, so the rail's lines sit at fixed
     points rather than wherever the copy happens to end. */
  flex: 1 1 0;
  display: grid;
  align-content: center;
  gap: var(--sp-2);
  justify-items: start;
  padding: var(--sp-6);
  background: none;
  border: 0;
  border-top: 1px solid var(--frame-line);
  text-align: left;
  cursor: pointer;
  transition: background var(--dur) var(--ease);
}
/* The band's own top hairline already draws this one. */
.askstory__step:first-child { border-top: 0; }
/* Three steps of light off the section wash. Closed steps carry no fill at
   all; hover puts a quarter of white over the wash; the open one lands on
   Slate/50. The open step was pure white until 19 Sep and read too hot next
   to a ground this light, so it came down one step on the ramp, which also
   leaves hover somewhere to sit between the two. */
.askstory__step.is-active { background: var(--slate-50); }
@media (hover: hover) {
  .askstory__step:not(.is-active):hover {
    background: color-mix(in srgb, var(--surface) 25%, transparent);
  }
}
/* Inset, so the ring does not sit on the board's hairlines. */
.askstory__step:focus-visible { outline: 2px solid var(--brand); outline-offset: -3px; }

/* The timer: a 3px rule down the open step's left edge, filling top to
   bottom while that step holds the stage. The closed steps carry no track,
   so the bar reads as the marker for the open one rather than as a gauge
   sitting under all three. */
.askstory__bar {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  overflow: hidden;
}
.askstory__bar::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--brand);
  transform: scaleY(0);
  transform-origin: top;
}
/* With the script off nothing animates, so the open step still needs its
   marker: the bar rests full height. Once .is-live lands the script owns the
   bar, and it parks at zero until .is-running says the clock is actually
   going. The keyframe names its own start so the fill always runs 0 -> 1
   whatever the resting value underneath it is. */
.askstory__step.is-active .askstory__bar::after { transform: scaleY(1); }
.is-live .askstory__step.is-active .askstory__bar::after { transform: scaleY(0); }
/* .is-running is set in the same frame as the setTimeout, so the line and
   the advance are one clock rather than two that drift apart. */
.askstory.is-running .askstory__step.is-active .askstory__bar::after {
  animation: askstory-fill 6000ms linear forwards;
}
.askstory.is-held .askstory__step.is-active .askstory__bar::after {
  animation-play-state: paused;
}
@keyframes askstory-fill {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}

/* The step's own eyebrow. Geist Mono at 10px, set directly by the user on
   19 Sep and knowingly against two standing rules: the 12px floor, which has
   no other exception anywhere on the site, and mono's confinement to section
   eyebrows and drawn illustrations. Both rules still hold everywhere else.
   The size is literal rather than a token because no 10px token exists and
   adding one would invite the floor to be broken again. */
.askstory__n {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  line-height: 1;
  color: var(--ink-3);
}
.askstory__t {
  font-family: var(--font-display);
  font-size: var(--t-title-sm);
  font-weight: 500;
  line-height: var(--lh-title);
  letter-spacing: var(--tr-title);
  color: var(--ink-3);
  transition: color var(--dur) var(--ease);
}
.askstory__step.is-active .askstory__t { color: var(--ink); }
.askstory__d {
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--ink-3);
  transition: color var(--dur) var(--ease);
}
.askstory__step.is-active .askstory__d { color: var(--ink-2); }

/* The stage: the board's right cell, not a box of its own. Panels stack in
   the same cell so it holds the tallest story's height and never jumps. */
.askstory__stage {
  display: grid;
  align-content: center;
  gap: var(--sp-10);
  padding: var(--sp-10) var(--sp-8);
  background: var(--bg-subtle);
}
.askstory__panel {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  width: 100%;
  max-width: 34rem;
  margin-inline: auto;
  min-width: 0;
}
.is-live .askstory__panel {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s var(--ease), visibility 0.35s;
}
.is-live .askstory__panel.is-active {
  opacity: 1;
  visibility: visible;
}

/* Everything on the stage is the product, so it renders in the product's
   own face (user call, 19 Sep): Roboto for every register inside the frame,
   including the pieces that carry display or mono elsewhere on the site.
   Sizes, weights and tracking stay as they are; only the face changes. */
.askstory__stage,
.askstory__stage .chat__tool-t,
.askstory__stage .chat__tool-m,
.askstory__stage .chat__kpi-l,
.askstory__stage .chat__kpi-n,
.askstory__stage .chat__aud-t,
.askstory__stage .chat__aud-n,
.askstory__stage .chat__move-t,
.askstory__stage .chat__ver,
.askstory__stage .mono,
.askstory__stage .state {
  font-family: var(--font-product);
}

/* ---- Chat vocabulary -------------------------------------------------------
   The .chat__* rules moved to components.css on 20 Sep, when the homepage's
   difference loop took the same elements; one source now styles them on the
   hubs and index.html. The Roboto pinning above stays here: each page pins
   its own product surface to --font-product. */

@media (max-width: 991px) {
  .askstory {
    grid-template-columns: 1fr;
    /* The board KEEPS the page's 20px gutter (user, 20 Sep: full bleed put
       the open step's progress rule on the screen edge), and side hairlines
       close the box that the rail-to-rail band never needed. */
    margin-inline: 0;
    border: 1px solid var(--frame-line);
  }
  /* Stacked, the board reads as an accordion (20 Sep, user call): each
     step's illustration plays RIGHT BELOW its step, not on one far stage
     under all three. display: contents lifts the six cells into the board's
     own grid so order can interleave them; the rail and stage boxes (and
     their borders) stop rendering, and the panels carry the stage's wash
     and gutter themselves. */
  .askstory__rail,
  .askstory__stage { display: contents; }
  .askstory__step:nth-of-type(1) { order: 1; }
  .askstory__panel:nth-of-type(1) { order: 2; }
  .askstory__step:nth-of-type(2) { order: 3; }
  .askstory__panel:nth-of-type(2) { order: 4; }
  .askstory__step:nth-of-type(3) { order: 5; }
  .askstory__panel:nth-of-type(3) { order: 6; }
  .askstory__rail { border-right: 0; }
  .askstory__step { padding: var(--sp-6) var(--pad-x); }
  /* The open step stays on the section wash here (user, 20 Sep: its Slate/50
     fill and the illustration's light ground read as one white slab): the
     brand bar and the ink shift mark it, accordion-style, and the light
     ground below is the illustration's alone, cut off by a hairline. */
  .askstory__step.is-active { background: none; }
  .askstory__panel {
    /* The stage's old inline padding, still capping the story at 34rem and
       centring it on a tablet. */
    padding: var(--sp-8) max(var(--pad-x), calc(50% - 17rem));
    max-width: none;
    background: var(--bg-subtle);
    border-top: 1px solid var(--frame-line);
  }
  /* Live, the closed stories leave the flow entirely so the accordion
     collapses; visibility and the desktop cross-fade are stage mechanics
     and come off with it. */
  .is-live .askstory__panel {
    grid-area: auto;
    display: none;
    opacity: 1;
    visibility: visible;
    transition: none;
  }
  .is-live .askstory__panel.is-active { display: flex; }
}

@media (prefers-reduced-motion: reduce) {
  /* No clock at all, so the bar goes back to being a plain marker for the
     open step rather than parking empty. */
  .is-live .askstory__step.is-active .askstory__bar::after {
    animation: none;
    transform: scaleY(1);
  }
  .askstory__step, .askstory__t, .askstory__d { transition: none; }
  .is-live .askstory__panel { transition: none; }
}