/* The features page rides on /landing/styles.css (never edited) and adds only
   what that sheet lacks. */

#s00 h1 { font-size: clamp(40px, 4.6vw, 66px); }
#s00 .hero-actions { margin-bottom: 0; }
#s00 .hero-proof { margin-top: 44px; }

.built-on-request { list-style: none; margin: 1.5rem 0 2rem; padding: 0; display: grid; gap: .75rem; }
.built-on-request li { position: relative; padding-left: 1.5rem; opacity: .85; line-height: 1.5; }
.built-on-request li::before { content: "→"; position: absolute; left: 0; }

/* Hero device: the landing's console frame holding a real screen. */
#s00 .dashboard-card { display: block; height: auto; aspect-ratio: 16 / 10; }
#s00 .dashboard-card img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: left top; }

/* The ticker: every area of the platform, in a slow loop under the hero. */
.ticker { overflow: hidden; background: #031a3b; color: #cfe2ef; border-top: 1px solid rgba(255,255,255,.08); padding: 18px 0; }
.ticker-track { display: flex; width: max-content; animation: ticker 70s linear infinite; }
.ticker-track span { font: 700 14px 'Manrope', sans-serif; letter-spacing: .04em; white-space: nowrap; padding: 0 22px; position: relative; }
.ticker-track span::after { content: "·"; position: absolute; right: -3px; color: var(--teal); }
@keyframes ticker { to { transform: translateX(-50%); } }

/* The at-a-glance map: one thumbnail tile per scene, each linking down to it. */
.glance { background: #edf2f7; }
.glance h2 { font-size: clamp(32px, 3.2vw, 48px); line-height: 1.1; letter-spacing: -.04em; margin-bottom: 14px; }
.glance-lede { color: var(--muted); font-size: 17px; line-height: 1.6; margin-bottom: 40px; }
.glance-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; }
.glance-tile { display: flex; flex-direction: column; height: 100%; padding: 12px 12px 16px; background: #fff; border: 1px solid #d7e7f3; border-radius: 14px; box-shadow: 0 6px 18px rgba(0, 21, 57, .06); transition: transform .2s ease, box-shadow .2s ease; }
.glance-tile:hover, .glance-tile:focus-visible { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(0, 21, 57, .16); }
.glance-thumb { display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 10px; background: #dce5ee; border: 1px solid #d7e7f3; margin-bottom: 14px; }
.glance-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.glance-thumb.phone img { object-fit: contain; object-position: top center; }
.glance-n { font: 700 11px 'Manrope', sans-serif; letter-spacing: .16em; color: #8da0b2; margin-bottom: 4px; }
.glance-name { font: 700 16px 'Manrope', sans-serif; margin-bottom: 6px; }
.glance-line { font-size: 13px; line-height: 1.5; color: var(--muted); margin-bottom: 10px; }
.glance-count { font-size: 11px; font-weight: 700; color: #0da99d; margin-top: auto; }

/* Scenes: text left, the pinned device right; each step is one viewport of
   scroll. The script swaps the device's screen; CSS does the desktop/mobile
   split. The hero is a .scene too, but keeps the landing's .hero grid. */
.scene:not(.hero) { display: grid; grid-template-columns: 2fr 3fr; gap: 4vw; padding: 0 clamp(24px, 5vw, 80px); background: var(--paper); }
.scene-copy { padding-block: 110px 20vh; }
.scene-copy h2 { font-size: clamp(36px, 3.6vw, 54px); line-height: 1.08; letter-spacing: -.045em; margin-bottom: 20px; }
.scene-copy .lede { color: var(--muted); font-size: 17px; line-height: 1.7; max-width: 520px; }
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.step { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; counter-increment: step; transition: opacity .35s ease; }
.step h3 { font-size: 26px; letter-spacing: -.02em; margin-bottom: 10px; }
.step h3::before { content: counter(step, decimal-leading-zero); display: block; font: 700 11px 'Manrope', sans-serif; letter-spacing: .16em; color: var(--teal); margin-bottom: 12px; }
.step p { color: var(--muted); line-height: 1.7; font-size: 16px; max-width: 460px; margin-bottom: 0; }
/* The desktop split needs the script (the stage swaps screens), so only a
   page with it hides the step images; the class is set in the head. */
@media (min-width: 901px) { .js .step img, .js .step .shot { display: none; } }
.js .step:not(.is-active) { opacity: .3; }
.chips { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 10px; }
.chips span { background: #fff; border: 1px solid #d9e3ec; border-radius: 18px; padding: 9px 13px; font-size: 11px; font-weight: 700; color: #365671; }

.scene-stage { position: sticky; top: 0; height: 100vh; align-self: start; display: flex; align-items: center; justify-content: center; }
.stage-frame { position: relative; display: flex; align-items: flex-end; gap: 28px; }
/* .device here is a frame sized to its screen, not the landing's mock phone,
   so the ring's percentages are percentages of the screen. */
.scene-stage .device { position: relative; left: auto; top: auto; width: auto; height: auto; border: 0; border-radius: 0; background: none; box-shadow: none; overflow: visible; }
.scene-stage .device::before { content: none; }
.device-img { display: block; width: auto; height: auto; transition: opacity .18s ease; }
.device-img.is-swapping { opacity: 0; }
.scene-stage .device.console { transform: perspective(1400px) rotateY(-4deg) rotateX(1deg); }
.device.console .device-img { max-width: calc(60vw - 140px); max-height: 74vh; border-radius: 12px; box-shadow: 0 38px 90px rgba(0, 21, 57, .3); }
.scene-stage .device.phone { border: 6px solid #0c2035; border-radius: 29px; overflow: hidden; background: #f6f8fa; box-shadow: 0 30px 70px rgba(0, 21, 57, .35); }
.device.phone .device-img { max-height: 72vh; max-width: 26vw; }
/* An admin crop that is not a whole screen (a card, a strip, a tall panel):
   flat, at its own shape, no console tilt. */
.device.card .device-img { max-width: calc(60vw - 140px); max-height: 74vh; border-radius: 12px; background: #fff; box-shadow: 0 38px 90px rgba(0, 21, 57, .3); }
/* A second phone screen. Beside a phone, a pair. On a console, a small phone
   (60% of the console's height) at the bottom-left corner, pushed mostly
   outside it so it covers only the console's sidebar edge, never its content
   or the ring. With a card, it wraps beside or below the card, never over it. */
.scene-stage .phone-card { position: absolute; left: 0; bottom: -24px; height: 60%; width: auto; padding: 0; overflow: hidden; transform: translateX(-60%); }
.phone-card .device-img-2 { display: block; height: 100%; width: auto; }
.scene-stage .device.phone + .phone-card, .scene-stage .device.card + .phone-card { position: relative; left: auto; bottom: auto; height: auto; transform: none; }
.device.phone + .phone-card .device-img-2 { height: auto; max-height: 72vh; max-width: 26vw; }
.stage-frame:has(> .device.card + .phone-card:not([hidden])) { flex-wrap: wrap; justify-content: center; max-width: calc(60vw - 140px); }
.device.card:has(+ .phone-card:not([hidden])) .device-img { max-height: 46vh; }
.device.card + .phone-card .device-img-2 { height: auto; max-height: 40vh; max-width: 22vw; }
.ring { position: absolute; border: 3px solid var(--teal); border-radius: 10px; box-shadow: 0 0 0 5px rgba(32, 201, 195, .2), 0 0 28px rgba(32, 201, 195, .45); pointer-events: none; transition: left .4s ease, top .4s ease, width .4s ease, height .4s ease; }

/* Without the script nothing reveals and nothing swaps: the close shows as it
   is, and a desktop reads like the phone stack, every step with its images. */
html:not(.js) .reveal { opacity: 1; transform: none; }
html:not(.js) .scene:not(.hero) { display: block; }
html:not(.js) .scene-stage { display: none; }
html:not(.js) .step { min-height: auto; padding-top: 44px; }
html:not(.js) .step img { display: block; max-width: 100%; height: auto; margin-top: 18px; border-radius: 10px; box-shadow: 0 18px 40px rgba(0, 21, 57, .18); }
html:not(.js) .step img.phone-shot { width: 300px; outline: 5px solid #0c2035; border-radius: 26px; }

/* The dark scene: the landing's workflow register. */
.scene.workflow { background: #071c31; color: #fff; }
.scene.workflow .lede, .scene.workflow .step p { color: #a9c1d2; }

@media (max-width: 900px) {
  #s00 .hero-proof { flex-wrap: wrap; gap: 18px 28px; }
  .scene:not(.hero) { display: block; padding: 70px 22px; }
  .scene-copy { padding-block: 0; }
  .scene-stage { display: none; }
  .step { min-height: auto; padding-top: 44px; }
  .js .step:not(.is-active) { opacity: 1; }
  .step img { display: block; max-width: 100%; height: auto; margin-top: 18px; border-radius: 10px; box-shadow: 0 18px 40px rgba(0, 21, 57, .18); }
  /* The script's wrapper round a step's first image, holding its ring. It hugs
     the image, so the ring's percentages are the image's. */
  .step .shot { display: block; position: relative; width: fit-content; max-width: 100%; margin-top: 18px; }
  .step .shot img { margin-top: 0; }
  /* An outline, not a border: the frame takes no room inside the ring's box. */
  .step img.phone-shot { width: 300px; max-width: 100%; outline: 5px solid #0c2035; border-radius: 26px; }
}

@media (min-width: 1101px) { .glance-grid { grid-template-columns: repeat(4, 1fr); } }

/* Two across on a phone. */
@media (max-width: 600px) {
  .glance-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .glance-tile { padding: 8px 8px 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .step, .device-img, .ring, .glance-tile { transition: none; }
  .ticker-track, .floating, .floating-slow { animation: none; }
  /* A still ticker shows each area once, wrapped, not one clipped line. */
  .ticker-track { flex-wrap: wrap; width: auto; justify-content: center; }
  .ticker-track span:nth-child(n+23) { display: none; }
}