html{scroll-behavior:smooth;scroll-padding-top:96px}
body{margin:0;background:#FFFFFF;color:#012C3D;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:#F8444F;text-decoration:none}
a:hover{color:#C22836}
::selection{background:#012C3D;color:#FFFFFF}
input,select,textarea,button{font:inherit;color:inherit}
@keyframes prxMq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes prxFloat{from{transform:translateY(-8px)}to{transform:translateY(10px)}}
@keyframes prxPulse{0%{box-shadow:0 0 0 0 rgba(248,68,79,0.45)}100%{box-shadow:0 0 0 18px rgba(248,68,79,0)}}
@keyframes prxScan{0%{top:6%}100%{top:90%}}
@keyframes prxBlink{0%,100%{opacity:1}50%{opacity:0.15}}
@keyframes prxDrift{from{background-position:0 0}to{background-position:112px 112px}}
@keyframes prxSTravel{0%{left:-16%;opacity:0}10%{opacity:1}88%{opacity:1}100%{left:104%;opacity:0}}
@keyframes prxSRipple{0%{transform:scale(0.35);opacity:0}18%{opacity:0.9}100%{transform:scale(2.5);opacity:0}}
@keyframes prxSGrip{0%,10%{transform:scaleY(1)}44%,66%{transform:scaleY(0.38)}100%{transform:scaleY(1)}}
@keyframes prxSPop{0%,100%{opacity:0.32;transform:scale(0.85)}45%{opacity:1;transform:scale(1.3)}}
@keyframes prxSCycle{0%{opacity:0;transform:translateY(6px)}6%,28%{opacity:1;transform:translateY(0)}34%,100%{opacity:0;transform:translateY(-6px)}}
@keyframes prxSWipe{0%{clip-path:inset(0 100% 0 0)}70%,100%{clip-path:inset(0 0 0 0)}}
@keyframes prxSEdge{0%{left:0%;opacity:0}5%{opacity:1}66%{opacity:1}70%{left:100%}71%,100%{left:100%;opacity:0}}
@keyframes prxSSpeck{0%,48%{opacity:0.75;transform:translateY(0)}80%,100%{opacity:0;transform:translateY(-12px)}}
@keyframes prxSBreathe{0%,100%{opacity:0.45;transform:scale(0.92)}50%{opacity:0.9;transform:scale(1.1)}}
@keyframes prxSMuscle{0%,10%{transform:scale(1,1)}20%,58%{transform:scale(0.92,1.3)}75%,100%{transform:scale(1,1)}}
@keyframes prxSFlowDash{to{stroke-dashoffset:-96}}
@keyframes prxSDrawN{0%{stroke-dashoffset:100;opacity:0}6%{opacity:1}50%{stroke-dashoffset:0}72%{stroke-dashoffset:0;opacity:1}82%{stroke-dashoffset:0;opacity:0}83%{stroke-dashoffset:100;opacity:0}100%{stroke-dashoffset:100;opacity:0}}
@keyframes prxSForce{0%,10%{stroke-dashoffset:100}42%,68%{stroke-dashoffset:35}92%,100%{stroke-dashoffset:100}}
@keyframes prxSPinchL{0%,8%{transform:translateX(0)}40%,66%{transform:translateX(11px)}92%,100%{transform:translateX(0)}}
@keyframes prxSPinchR{0%,8%{transform:translateX(0)}40%,66%{transform:translateX(-11px)}92%,100%{transform:translateX(0)}}
@keyframes prxSFing{0%,16%{transform:scaleX(0)}36%,62%{transform:scaleX(1)}82%,100%{transform:scaleX(0)}}

/* Generated from the design's style-hover / style-focus attributes.
   !important because the design keeps its base look in inline style attributes. */
.prx-hv-navlink:hover {
  color:#F8444F !important;
}
.prx-hv-cta-sm:hover {
  background:#E03340 !important;
  color:#FFFFFF !important;
  transform:translateY(-1px) !important;
}
.prx-hv-cta:hover {
  background:#E03340 !important;
  color:#FFFFFF !important;
  transform:translateY(-2px) !important;
}
.prx-hv-ghost:hover {
  border-color:#012C3D !important;
  color:#012C3D !important;
  background:#F4F7F8 !important;
}
.prx-hv-cta-orange:hover {
  background:#D8552F !important;
  color:#FFFFFF !important;
  transform:translateY(-2px) !important;
}
.prx-hv-white:hover {
  color:#FFFFFF !important;
}
.prx-hv-orange:hover {
  color:#EE6C4D !important;
}
.prx-hv-submit:hover {
  background:#E03340 !important;
  transform:translateY(-1px) !important;
}

.prx-fc-field:focus {
  border-color:#F8444F !important;
  background:#FFFFFF !important;
}

/* ══ Mobile pass ══════════════════════════════════════════════════════════
   The design ships a single desktop header and no small-screen rules. These
   override inline styles (and styles applied at runtime by applyHeroSkin),
   so !important is required throughout. Breakpoint is 899px to match the
   `window.innerWidth < 900` mobile branch in app.js. */

/* Stop iOS inflating text in landscape. */
html { -webkit-text-size-adjust: 100%; }

/* The highlight span is flipped to inline-block for the entrance animation,
   so its gradient painted the full box width — leaving a stray bar under the
   last line whenever the heading wrapped (it wraps at every hero width). A
   text decoration follows the text itself, line by line. */
[data-i18n="hero_h1b"] {
  background-image: none !important;
  text-decoration-line: underline;
  text-decoration-color: rgba(248, 68, 79, 0.4);
  text-decoration-thickness: 0.17em;
  text-underline-offset: 0.01em;
  text-decoration-skip-ink: none;
}

@media (max-width: 899px) {
  /* Fallback only — app.js measures the real header and overwrites this on
     the root element, so it stays correct across widths and languages. */
  :root { --prx-header: 106px; }

  /* Anchor targets were landing under a header half again as tall as the
     96px the design assumed. */
  html { scroll-padding-top: calc(var(--prx-header) + 12px) !important; }

  /* ── Header ────────────────────────────────────────────────────────────
     Was: one flex row that wrapped the section links onto four lines and
     pushed the waitlist CTA to x=426 on a 390px viewport — off-screen and
     silently clipped by the root's overflow-x. Now: logo + language + CTA
     on one row, section links on a scrollable strip beneath. */
  [data-nav] > div {
    flex-wrap: wrap !important;
    row-gap: 0 !important;
    column-gap: 10px !important;
    padding: 9px 16px !important;
  }
  [data-nav] > div > a:first-child { order: 1; min-height: 34px; }
  [data-nav] > div > a:first-child img { height: 22px !important; }
  [data-nav] > div > div { order: 2; margin-inline-start: auto !important; }
  [data-nav] > div > a[href="#contact"] {
    order: 3;
    padding: 9px 12px !important;
    font-size: 13px !important;
    white-space: nowrap;
  }
  /* Tightened so the longest CTA label (Arabic) still shares row one at 390px.
     Below that it wraps to its own row, which is fine — the header height is
     measured at runtime, so scroll-padding and card offsets follow it. */
  [data-nav] [data-lg] { padding: 5px 8px !important; }
  [data-nav] nav {
    order: 9;
    flex-basis: 100% !important;
    width: 100%;
    margin-inline-start: 0 !important;
    flex-wrap: nowrap !important;
    gap: 20px !important;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  [data-nav] nav::-webkit-scrollbar { display: none; }
  [data-nav] nav a {
    white-space: nowrap;
    display: flex;
    align-items: center;
    min-height: 44px;          /* was a 15px-tall tap target */
  }
  [data-nav] [data-lg] { min-height: 36px; }

  /* ── Hero ──────────────────────────────────────────────────────────────
     applyHeroSkin() now gives the artwork its own band and the copy the lower
     46vh. This tunes the copy to fit that band rather than growing back up
     into the arm — the 40px headline floor alone ran to four lines. */
  [data-beat="0"] h1 { font-size: clamp(26px, 7.4vw, 34px) !important; margin-top: 8px !important; }
  [data-beat] h2     { font-size: clamp(24px, 6.8vw, 32px) !important; margin-top: 10px !important; }
  [data-beat] p      { font-size: 14.5px !important; line-height: 1.5 !important; margin-top: 14px !important; }
  [data-beat="0"] [data-beat-k] { margin-top: 16px !important; }
  [data-beat-k]      { font-size: 11px !important; }
  [data-beat-chip]   { font-size: 10px !important; padding: 6px 11px !important; }
  [data-beat="0"] [data-hi="4"],
  [data-beat="4"] [data-beat-inner] > div:last-child {
    margin-top: 18px !important;
    gap: 10px !important;
  }
  [data-beat] a[href="#contact"],
  [data-beat-cta2] { padding: 12px 20px !important; font-size: 14.5px !important; }

  /* ── Sticky system cards ───────────────────────────────────────────────
     Their staggered sticky offsets start at 82px, which tucks the first card
     under the taller mobile header. Re-stagger from below it. */
  [data-stack] > article:nth-of-type(1) { top: calc(var(--prx-header) + 8px) !important; }
  [data-stack] > article:nth-of-type(2) { top: calc(var(--prx-header) + 19px) !important; }
  [data-stack] > article:nth-of-type(3) { top: calc(var(--prx-header) + 30px) !important; }
  [data-stack] > article:nth-of-type(4) { top: calc(var(--prx-header) + 41px) !important; }
  [data-stack] > article:nth-of-type(5) { top: calc(var(--prx-header) + 52px) !important; }
  [data-stack] > article:nth-of-type(6) { top: calc(var(--prx-header) + 63px) !important; }

  /* ── Section rhythm ────────────────────────────────────────────────────
     110–120px block padding is desktop-scaled; claw back some width too. */
  section:not(#top):not(#systems) { padding-inline: 20px !important; }
  #tech, #access, #roadmap, section:not([id]) { padding-block: 76px !important; }
  #story   { padding-block: 82px !important; }
  #faq     { padding-block: 24px 76px !important; }
  #contact { padding-block: 84px 48px !important; }

  /* ── Forms ─────────────────────────────────────────────────────────────
     iOS Safari zooms the viewport when a focused field is under 16px. */
  #contact input, #contact select, #contact textarea { font-size: 16px !important; }

  /* Comfortable tap targets for the remaining inline links. */
  #contact a[href^="mailto:"], #contact a[href^="tel:"], #contact a[href="#"] {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
  }
}

/* Short phones (SE-class, 640–700px tall). French copy runs ~100px longer than
   English — on these that is enough to push it back into the artwork even after
   the hero band has given up all the room it can. */
@media (max-width: 899px) and (max-height: 700px) {
  [data-beat="0"] h1 { font-size: 24px !important; }
  [data-beat] h2     { font-size: 22px !important; }
  [data-beat] p      { font-size: 13.5px !important; line-height: 1.45 !important; margin-top: 10px !important; }
  [data-beat="0"] [data-beat-k] { margin-top: 12px !important; }
  [data-beat="0"] [data-hi="4"],
  [data-beat="4"] [data-beat-inner] > div:last-child { margin-top: 14px !important; }
  [data-beat] a[href="#contact"],
  [data-beat-cta2] { padding: 10px 16px !important; font-size: 14px !important; }
}