/* Storixa — responsive layer.
   Loaded last. Owns the things screen size alone does not cover: safe areas on
   fixed chrome, the forced-colours palette, scroll affordances on the sticky
   nav, and direction-agnostic alignment.

   Not here: container queries. The two places a component genuinely changes
   context (the capability card in a 1-col vs 3-col grid, the story panel in a
   split vs stacked layout) are already driven by page breakpoints that follow
   the content pressure. Adding container-type would create a size-containment
   box for a benefit nothing currently needs. */

/* ─────────────────────────────────────────────────────────────────────────────
   1 · Safe areas. The header and the quick-nav are sticky, and the consent
   notice and dialogs are fixed. On a notched device with viewport-fit=cover
   they can sit under the notch, the rounded corners, or the home indicator.
   Padding from the environment insets keeps them clear; the values are zero on
   devices without insets, so this costs nothing elsewhere.
   ───────────────────────────────────────────────────────────────────────────── */
.site-header{
  padding-left:env(safe-area-inset-left,0);
  padding-right:env(safe-area-inset-right,0);
}
.v5-quick-nav{
  margin-left:env(safe-area-inset-left,0);
  margin-right:env(safe-area-inset-right,0);
}
.v5-consent-notice{
  bottom:calc(17px + env(safe-area-inset-bottom,0));
  left:calc(50% + (env(safe-area-inset-left,0) - env(safe-area-inset-right,0)) / 2);
}
dialog{
  max-height:calc(100svh - 35px - env(safe-area-inset-top,0) - env(safe-area-inset-bottom,0));
}

/* ─────────────────────────────────────────────────────────────────────────────
   2 · Forced colours. Measured in forced-colors:active, the selected tab and
   the idle tab both resolved to a white field, because selection was carried by
   background and box-shadow alone and the mode flattens both. Every selected
   state gets a boundary that survives the substitution. System colour keywords
   are used so the boundary comes from the user's own palette.
   ───────────────────────────────────────────────────────────────────────────── */
@media(forced-colors:active){
  .v5-play-tabs button[aria-selected="true"],
  .demo-toolbar button[aria-selected="true"],
  .v5-selectors button.active,
  .v5-choice-grid button.active,
  .experience-step-nav button[aria-selected="true"],
  .persona.active,
  .mobile-persona.active,
  .mobile-demo-switcher button.active,
  .growth-options button.is-active,
  .persona-switch button.is-active,
  .billing-switch button.is-active,
  .trust-policy button.is-active,
  .plan-card.plan-featured{
    border:2px solid CanvasText;
  }
  /* Decorative depth and tinted washes are noise in a forced palette, and a
     translucent surface can hide the boundary the system just drew. */
  .capability-card,
  .v5-play-shell,
  .v5-onboard-card,
  .v5-estimator-card,
  .detail-feature,
  .related-card,
  .why-panel{box-shadow:none}
  .icon{forced-color-adjust:auto}
  /* A filled CTA loses its fill here; keep it a legible control. */
  .v5-blue-glass,
  .v5-clear-glass,
  .detail-primary,
  .detail-secondary{border:1px solid ButtonText}
}

/* ─────────────────────────────────────────────────────────────────────────────
   3 · Scroll affordance on the sticky quick nav. At 390px two of its six items
   sit outside the viewport with the scrollbar hidden, so nothing tells the
   reader more exists. A trailing fade signals the overflow; it is removed once
   the end is reached, and it is dropped entirely for reduced transparency.
   ───────────────────────────────────────────────────────────────────────────── */
.v5-quick-nav{
  mask-image:linear-gradient(to right,#000 calc(100% - 34px),transparent);
  -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 34px),transparent);
}
/* The fade shows whenever content continues past the trailing edge, which
   includes the start position. It is only removed once the end is reached or
   when the row is not overflowing at all. */
.v5-quick-nav.is-at-end,
.v5-quick-nav:not(.is-overflowing){
  mask-image:none;
  -webkit-mask-image:none;
}
@media(prefers-reduced-transparency:reduce){
  .v5-quick-nav{mask-image:none;-webkit-mask-image:none}
}

/* ─────────────────────────────────────────────────────────────────────────────
   4 · Direction-agnostic alignment. The product ships `lang="en"` only, so this
   is not a full RTL build; it is the cheap half that costs nothing and removes
   the declarations that would visibly fight a mirrored layout.
   `end` replaces `right` and `start` replaces `left`, so LTR rendering is
   byte-identical and only the RTL case changes. The remaining physical offsets
   are pixel positions inside the decorative product mocks, where a mirrored
   illustration is a different job, not a flipped one.
   ───────────────────────────────────────────────────────────────────────────── */
.dash-row-value,
.experience-footnote{text-align:end}
.experience-step-nav button,
.v5-stack button,
.v5-choice-grid button{text-align:start}