/* ============================================================================
   Informed Software Solutions — SceneLedger page styles
   ----------------------------------------------------------------------------
   Page-specific styles for product-sceneledger.html ONLY. Loaded AFTER the
   shared cascade (tokens.css → base.css → components.css → product.css → this).
   The page sets body.theme-sceneledger, so --product-accent (coral #FF5A4E) and
   --product-accent-text (lifted coral #FF7A5C, AA on every navy ground) are
   resolved — consume the vars, never hex. Shared product.css is FROZEN.

   Ridge metaphor: the SceneLedger app mark itself — concentric BROKEN
   fingerprint-maze arcs (forensic identity), a squared room-corner bracket
   breaking out of them at the top right (the floor plan), and a dropped map-pin
   dot (the located exhibit). Arcs read as a cool luminous ridge; only the
   bracket and the pin carry the coral, exactly as the icon rations it.

   This page also DEPARTS from the sibling pages' SVG-mock convention by client
   request: the hero and every feature row carry a REAL portrait phone
   screenshot. product.css assumes a 1280x800 landscape mock, so the portrait
   presentation rules live here.
   ========================================================================== */

.theme-sceneledger {
  /* Local aliases so the inline ridge SVG can read theme colours without
     hardcoding hex (raw values live only in tokens.css). */
  --sl-spark: var(--accent-sl-soft);
  --sl-line: rgba(143, 168, 194, 0.22); /* navy-300 hairline on dark vignettes */
}

/* ===========================================================================
   HERO — ridge motif behind a PORTRAIT phone shot
   =========================================================================== */

/* Ridge slot: let the maze arcs bleed past the visual column so they frame the
   phone rather than sit behind it. The slot is absolutely positioned (inset:0)
   by product.css; the bleed scales the drawing out around the device. */
.theme-sceneledger .product-hero__ridge {
  inset: -10% -22%;
  /* On the navy void the arcs must read as a luminous cool ridge-line object —
     the icon draws the fingerprint in off-white and spends its coral only on
     the corner bracket and the pin. Warm the cool tone by a whisper so the
     identity carries, but do not tint the whole maze. */
  color: color-mix(in srgb, var(--product-accent) 14%, var(--navy-300));
}

.theme-sceneledger .product-hero__ridge svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* The room-corner bracket + the map pin are the only coral elements — the same
   ration the app icon uses. Classes, not brittle attribute selectors. */
.theme-sceneledger .sl-ridge__corner {
  stroke: var(--sl-spark);
}

.theme-sceneledger .sl-ridge__pin {
  fill: var(--sl-spark);
  stroke: none;
}

.theme-sceneledger .sl-ridge__pin-ring {
  stroke: var(--sl-spark);
}

/* Soft glow on the identity elements only (bracket + pin). */
.theme-sceneledger .sl-ridge__corner,
.theme-sceneledger .sl-ridge__pin,
.theme-sceneledger .sl-ridge__pin-ring {
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--product-accent) 55%, transparent));
}

/* ---------------------------------------------------------------------------
   PORTRAIT PHONE SHOT in the hero. product.css frames .product-hero__ui as a
   full-bleed 1280x800 landscape "screen"; a 720x1564 portrait shot at
   width:100% would be ~1100px tall in the visual column. Constrain the frame
   to a device width, centre it, and take the radius up to a phone corner.
--------------------------------------------------------------------------- */
.theme-sceneledger .product-hero__ui {
  width: min(240px, 64vw);
  margin-inline: auto;
  border-radius: 40px;
  /* deepest navy behind the shot so any subpixel edge reads as device, not card */
  background-color: var(--navy-950);
  border: 1px solid var(--line-strong);
  box-shadow:
    var(--shadow-xl),
    0 0 0 1px rgba(86, 129, 171, 0.12),
    0 0 70px -10px color-mix(in srgb, var(--product-accent) 38%, transparent);
}

/* ---------------------------------------------------------------------------
   PLATFORM LINE — honest hardware statement under the hero actions.
--------------------------------------------------------------------------- */
.theme-sceneledger .sl-platforms {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  line-height: var(--lh-snug);
  color: var(--ink-soft);
  max-width: 34rem;
}

.theme-sceneledger .sl-platforms strong {
  color: var(--product-accent-text);
  font-weight: 500;
}

/* ===========================================================================
   FEATURE CARDS — SceneLedger accent flourish (mirrors the sibling pages: a
   thin accent rule scales in from the top as the card lifts).
   =========================================================================== */
.theme-sceneledger .feature-card {
  overflow: hidden;
}

.theme-sceneledger .feature-card::after {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(
    to bottom,
    var(--product-accent),
    var(--product-accent-2));
  transform: scaleY(0);
  transform-origin: 0 0;
  transition: transform var(--dur-med) var(--ease-out);
}

.theme-sceneledger .feature-card:hover::after,
.theme-sceneledger .feature-card:focus-within::after {
  transform: scaleY(1);
}

/* ===========================================================================
   FEATURE-ROW MEDIA — a dark vignette card holding a floating phone shot.
   The sibling pages put a 4:3 inline SVG here; SceneLedger puts the real app
   on a navy stage so the light screenshots read as deliberate, not pasted in.
   =========================================================================== */
.theme-sceneledger .sl-vignette {
  background-color: var(--navy-900);
  border-color: var(--sl-line);
  display: flex;
  justify-content: center;
  padding: var(--space-7) var(--space-5);
}

/* Warm pool behind the device so the phone sits IN the card, not ON it. */
.theme-sceneledger .sl-vignette::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(58% 48% at 50% 42%,
      color-mix(in srgb, var(--product-accent) 16%, transparent) 0%,
      transparent 70%),
    radial-gradient(80% 70% at 50% 108%,
      rgba(44, 80, 120, 0.20) 0%,
      transparent 60%);
}

.theme-sceneledger .sl-shot {
  position: relative;
  z-index: var(--z-raised);
  width: min(230px, 60%);
  flex: 0 0 auto;
  border-radius: 34px;
  overflow: hidden;
  background-color: var(--navy-950);
  border: 1px solid var(--line-strong);
  box-shadow:
    var(--shadow-lg),
    0 0 0 1px rgba(86, 129, 171, 0.10),
    0 0 54px -16px color-mix(in srgb, var(--product-accent) 42%, transparent);
}

.theme-sceneledger .sl-shot img {
  width: 100%;
  height: auto;
  display: block;
}

/* ===========================================================================
   CTA BAND — dark navy moment. The page is NOT .theme-operations, so the
   shared .btn-ghost reads as navy-on-navy here; re-tone it for the dark band.
   The primary already picks up the coral accent from product.css (navy-900
   label on coral = ~5.4:1), so only its hover needs steadying.
   =========================================================================== */
.theme-sceneledger .product-cta .btn-ghost {
  color: var(--paper);
  border-color: rgba(143, 168, 194, 0.45);
  background-color: transparent;
}

.theme-sceneledger .product-cta .btn-ghost:hover {
  color: var(--product-accent-text);
  border-color: var(--product-accent-text);
  background-color: color-mix(in srgb, var(--product-accent) 12%, transparent);
}

.theme-sceneledger .product-cta .btn-primary:hover {
  color: var(--navy-950);
}

/* CTA kicker: shared product.css colours it beacon amber; carry the SceneLedger
   coral through to the final dark moment instead. */
.theme-sceneledger .product-cta__kicker {
  color: var(--product-accent-text);
}

.theme-sceneledger .product-cta__kicker.kicker--dot::before {
  background-color: var(--product-accent-text);
}

/* ===========================================================================
   RESPONSIVE — the device gains presence as the columns widen.
   =========================================================================== */
@media (min-width: 600px) {
  .theme-sceneledger .product-hero__ui {
    width: 270px;
  }
}

@media (min-width: 900px) {
  .theme-sceneledger .product-hero__ridge {
    inset: -12% -28%;
  }

  .theme-sceneledger .product-hero__ui {
    width: 290px;
  }

  .theme-sceneledger .sl-vignette {
    padding: var(--space-6) var(--space-5);
  }

  .theme-sceneledger .sl-shot {
    width: 215px;
  }
}

@media (min-width: 1200px) {
  .theme-sceneledger .sl-shot {
    width: 240px;
  }
}

/* Smallest screens: rein the ridge bleed in so it never overflows the visual
   column (the hero is single-column here). */
@media (max-width: 599.98px) {
  .theme-sceneledger .product-hero__ridge {
    inset: -6% -8%;
    opacity: 0.85;
  }

  .theme-sceneledger .sl-vignette {
    padding: var(--space-6) var(--space-4);
  }
}

/* ---------------------------------------------------------------------------
   REDUCED-MOTION / NO-MOTION — parity with the sibling product pages. The
   coral drop-shadow glows are decorative; drop the filters so nothing implies
   motion that will not play.
--------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .theme-sceneledger .sl-ridge__corner,
  .theme-sceneledger .sl-ridge__pin,
  .theme-sceneledger .sl-ridge__pin-ring {
    filter: none;
  }

  .theme-sceneledger .product-hero__ui,
  .theme-sceneledger .sl-shot {
    box-shadow: var(--shadow-lg), 0 0 0 1px rgba(86, 129, 171, 0.12);
  }
}