/*
  Layout: the shared layer every region builds on (design package, sections 3, 5, 17 and 19).
  The rails and the sections, the type roles and two-tone headings, the components
  (buttons, badges, glass), the touch targets, the section reveals and the background arc's
  canvas. The nav, the close and the footer are in chrome.css; each region's own rules are in
  its own file (README, "Build regions").

  Layouts (package, section 5): wide is (min-width: 1024px) and (orientation: landscape);
  medium is everything else above 720px; narrow is 720px and under. Logical properties only, so
  the page mirrors in RTL; --dir multiplies anything directional.
*/

:root {
  --nav-top: 14px;
  --nav-h: 58px;
  --nav-bottom: calc(var(--nav-top) + var(--nav-h));
  --rails: calc(var(--container) + 2 * var(--gutter));

  /* Type roles (package, section 3). Arabic drops the tracking and takes longer lines below. */
  --fs-hero: clamp(2.75rem, 1rem + 5vw, 5.5rem); /* the hero H1 and the reveal */
  --fs-arc: clamp(2rem, 1.2rem + 2.4vw, 3.8rem); /* the arc's H2s: problem, imagine */
  --fs-section: clamp(2rem, 1.3rem + 2vw, 3rem); /* every section's two-tone H2 */
  --fs-step: clamp(2rem, 1.3rem + 2vw, 3.1rem); /* the story's step H3s */
  --fs-slide: clamp(1.8rem, 1.2rem + 1.7vw, 2.75rem); /* the panel's slide H3s */
  --fs-card: 1.125rem; /* card and cell H3s, in Plex Sans */
  --fs-para: 1.0625rem; /* step and slide paragraphs */
  --fs-eyebrow: 0.75rem;
  --lh-hero: 1.02;
  --lh-arc: 1.08;
  --lh-section: 1.1;
  --lh-step: 1.05;
  --lh-slide: 1.08;
  --track-h1: -0.03em;
  --track-h2: -0.025em;
  --track-h3: -0.028em;
  --measure-copy: 26em; /* the hero sub, and step and slide paragraphs */
  --measure-h2: 21em;
}
:root:lang(ar) {
  --lh-hero: 1.3;
  --lh-arc: 1.35;
  --lh-section: 1.4;
  --lh-step: 1.35;
  --lh-slide: 1.35;
  --track-h1: 0;
  --track-h2: 0;
  --track-h3: 0;
}

/* Icon sprites: symbols only, drawn where a <use> points at them. Each region keeps its own. */
.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* ---------- Rails: Mintlify's framed column ----------
   The column's width and gutters. The page draws no rail lines, dividers or squares (065/008). */
.rails {
  width: 100%;
  max-width: var(--rails);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
body {
  position: relative;
}

/* ---------- Sections ----------
   .section is the padding; put it on a region's outermost box together with .rails (or on a
   .rails box inside it). The 1px top border stays, transparent, so no position moved when the
   divider went. */
.section {
  position: relative;
  padding-block: var(--section-pad);
  border-block-start: 1px solid transparent;
}
main > .section:first-child {
  border-block-start: 0;
}
/* A centred section: the close, Web and desktop, the privacy teaser. */
.section--center {
  text-align: center;
}
.section--center .h2,
.section--center .lead {
  margin-inline: auto;
}
.section--center .cta {
  justify-content: center;
}

/* ---------- Type roles (package, section 3) ---------- */
.h-hero {
  font-size: var(--fs-hero);
  line-height: var(--lh-hero);
  letter-spacing: var(--track-h1);
  overflow-wrap: break-word;
}
.h-arc {
  font-size: var(--fs-arc);
  line-height: var(--lh-arc);
  letter-spacing: var(--track-h1);
  overflow-wrap: break-word;
}
/* The section heading: two tones in one element, the tone sentence in .tone. */
.h2 {
  max-width: var(--measure-h2);
  margin-block-end: clamp(2.5rem, 1.5rem + 3vw, 4rem);
  font-size: var(--fs-section);
  line-height: var(--lh-section);
  letter-spacing: var(--track-h2);
  overflow-wrap: break-word;
}
.tone {
  color: var(--ash);
}
.h-step {
  font-size: var(--fs-step);
  line-height: var(--lh-step);
  letter-spacing: var(--track-h3);
}
.h-slide {
  font-size: var(--fs-slide);
  line-height: var(--lh-slide);
  letter-spacing: var(--track-h2);
}
.h-card {
  font-family: var(--font-body);
  font-size: var(--fs-card);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0;
}
.lead {
  max-width: var(--measure-copy);
  color: var(--ash);
  font-size: var(--fs-lead);
}
.para {
  max-width: var(--measure-copy);
  color: var(--ash);
  font-size: var(--fs-para);
}
.caption {
  color: var(--ash);
  font-size: var(--fs-caption);
}
/* The hero's rhythm: the H1, then the lead, then the button pair. */
.h-hero + .lead {
  margin-block-start: 1.25rem;
}
.lead + .cta {
  margin-block-start: 2.25rem;
}

/* Eyebrows are Gold; labels are the same mono caps in Ash ("Works with", "Them", a place). */
.eyebrow,
.label {
  margin-block-end: 1rem;
  font-family: var(--font-label);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}
.eyebrow {
  color: var(--gold);
}
.label {
  color: var(--ash);
}
:lang(ar) .eyebrow,
.eyebrow:lang(ar),
:lang(ar) .label,
.label:lang(ar) {
  font-size: 0.8125rem;
  text-transform: none;
}
.mono {
  font-family: var(--font-mono);
  font-size: 0.94em;
}

/* ---------- Buttons (package, section 17): pills, 46px (38px small), Plex Sans 500 ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 46px;
  padding: 0.5rem 1.375rem;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font: 500 0.9375rem / 1.2 var(--font-body);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--dur-1) var(--ease-out),
    border-color var(--dur-1) var(--ease-out),
    color var(--dur-1) var(--ease-out),
    transform var(--dur-1) var(--ease-out);
}
.btn:active {
  transform: scale(0.98);
}
.btn--gold {
  background: var(--gold);
  color: var(--night);
}
.btn--gold:hover {
  background: var(--gold-hover);
}
.btn--ghost {
  border-color: var(--border-strong);
  background: transparent;
  color: var(--ivory);
}
.btn--ghost:hover {
  border-color: var(--ivory);
}
.btn--sm {
  min-height: 38px;
  padding-inline: 1rem;
  font-size: 0.875rem;
}

/* A row of buttons: the CTA pair and the like. */
.cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* ---------- The arrow link (round 3, 065/016 and 065/017) ----------
   A standalone text link that leads to another page: Plex Sans 500 in Gold with the shared
   arrow (#i-nav-arrow) at its inline end, mirrored in RTL; underlined on hover, as the footer's
   links are. The landing's privacy teaser, About us and Careers use it. */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2rem;
  color: var(--gold);
  font: 500 1.0625rem / 1.4 var(--font-body);
  text-decoration: none;
  transition: color var(--dur-1) var(--ease-out);
}
.link-arrow:hover {
  color: var(--gold-hover);
  text-decoration: underline;
}
.link-arrow svg {
  flex: none;
  width: 1.125em;
  height: 1.125em;
  transform: scaleX(var(--dir));
}

/* ---------- Badges (package, section 17): mono, 10 to 11px ----------
   .badge is a hairline outline in Ash; --fill sits on Surface 2; --gold is the gold fill
   ("Now", "Recommended", "Save up to 20%"). .chip is not defined here: it is the phone kit's. */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  color: var(--ash);
  font: 500 0.6875rem / 1.4 var(--font-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.badge:lang(ar),
:lang(ar) .badge {
  font-size: 0.75rem;
  letter-spacing: 0; /* tracking breaks Arabic joining (tokens.css) */
  text-transform: none;
}
.badge--fill {
  border-color: transparent;
  background: var(--surface-2);
}
.badge--gold {
  border-color: transparent;
  background: var(--gold);
  color: var(--night);
}

/* ---------- Glass (package, sections 2 and 17) ----------
   Used on exactly four things: the nav pill, the panel's tab bar, the story's NOCTS quote cards
   and the 11:15 brief card. Text on it keeps 4.5:1 over the busiest frame behind it. */
.glass {
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-filter);
  backdrop-filter: var(--glass-filter);
  box-shadow: var(--shadow-float);
}

/* ---------- Frost: content surfaces over the background arc (round 2, 2026-10-15) ----------
   Used by the ladder's panel, the life list's pills and card, privacy's cards and the pricing
   cards (the difference's duel cards are solid). .frost is the panel or card, --dense where
   text is dense, --raised for the open or picked item. The radius is the component's own. */
.frost {
  border: 1px solid var(--hairline);
  background: var(--frost-bg);
  -webkit-backdrop-filter: var(--frost-filter);
  backdrop-filter: var(--frost-filter);
}
.frost--dense {
  background: var(--frost-bg-dense);
}
.frost--raised {
  background: var(--frost-raised);
}

/* ---------- Touch targets: 44px on narrow screens (package, section 18) ---------- */
@media (max-width: 720px) {
  .btn--sm,
  .link-arrow {
    min-height: 44px;
  }
}

/* ---------- Section reveals (package, section 19) ----------
   page.js adds .is-in as an element scrolls into view: a 16px rise and a fade over 0.6s.
   Children of [data-reveal-stagger] step in 60ms apart (page.js writes their --reveal-delay).
   Hidden starting states apply only under .js and never with reduced motion. Should the page's
   modules never arrive (.is-ready never set), the failsafe shows everything after 4s. */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] {
    transition:
      opacity 0.6s var(--ease-out) var(--reveal-delay, 0s),
      transform 0.6s var(--ease-out) var(--reveal-delay, 0s);
  }
  .js [data-reveal]:not(.is-in) {
    opacity: 0;
    transform: translateY(16px);
  }
  .js:not(.is-ready) [data-reveal]:not(.is-in) {
    animation: failsafe 0.6s var(--ease-out) 4s both;
  }
}
@keyframes failsafe {
  to {
    opacity: 1;
    transform: none;
  }
}

/* ---------- The background arc (065/009; README, "Background arc") ----------
   arc.js's canvas, after load, with JS and WebGL: fixed between <html>'s Night and the page,
   100lvh tall (a collapsing toolbar never resizes it), fading in on its first frame. --arc-dim
   is its opacity, held where Ash and Gold text keep 4.5:1 over its brightest dot. */
.bg-arc {
  --arc-dim: 0.3;
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: var(--z-env);
  display: block;
  inline-size: 100%;
  block-size: 100vh;
  block-size: 100lvh;
  pointer-events: none;
  opacity: 0;
}
.bg-arc.is-drawn {
  opacity: var(--arc-dim);
}
/* The hero's staged rise (opening.css, 065/018) holds the arc back until the devices are mostly
   in (.is-arc-held on the opening, from story.js); it then fades up over its 0.6s. Without :has()
   the arc fades in on its first frame, as it does on every other load. */
body:has(.opening.is-arc-held) > .bg-arc.is-drawn {
  opacity: 0;
}
/* The arc dims for reading: while a data-arc="dim" section crosses the viewport's middle line
   (arc-gl.js), it fades to 40% of its strength. */
.bg-arc.is-drawn.is-dim {
  opacity: calc(var(--arc-dim) * 0.4);
}
@media (prefers-reduced-motion: no-preference) {
  .bg-arc {
    transition: opacity 0.6s var(--ease-out);
  }
  /* Dimming and coming back take 0.8s; .is-reading stays on once it has dimmed. */
  .bg-arc.is-reading {
    transition-duration: 0.8s;
  }
}