/* Launch language is English LTR (README 3.3). The theme may still be RTL. */
.noursky-page{direction:ltr!important;text-align:left!important;overflow-x:hidden;
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.noursky-page *{direction:ltr!important}
/* Neutralise inherited theme typography and colour on text elements only. */
.noursky-page h1,.noursky-page h2,.noursky-page h3,.noursky-page h4,
.noursky-page h5,.noursky-page h6,.noursky-page p,
.noursky-page li,.noursky-page b,.noursky-page strong{
  font-family:inherit!important;color:inherit!important}
/* Buttons and chips must NOT inherit the theme's link colour, but their own
   colours are theme-aware (--ink flips to near-white in dark mode), so inherit
   from main.css rather than hardcoding. Only the inner spans/svg are reset. */
.noursky-page .btn *,.noursky-page .chip *{color:inherit!important}
.noursky-page .btn,.noursky-page .chip{text-decoration:none!important}
.noursky-page .head--c,.noursky-page .ctas--c{text-align:center!important}
/* Reveal animations are progressive enhancement. If main.js has not run yet,
   show everything rather than a blank page; .loaded then drives the real ones. */
body:not(.loaded) .noursky-page .rv,
body:not(.loaded) .noursky-page .stag>*,
body:not(.loaded) .noursky-page .fu,
body:not(.loaded) .noursky-page .stage,
body:not(.loaded) .noursky-page h1 .w>i{opacity:1!important;transform:none!important}
/* Responsive guard: nothing may exceed the viewport width. */
.noursky-page img,.noursky-page svg,.noursky-page video{max-width:100%;height:auto}
.noursky-page pre,.noursky-page table{max-width:100%;overflow-x:auto}

/* ---------------------------------------------------------------------------
   Elementor global colour tokens.

   Elementor applies --e-global-color-primary to every heading widget, using a
   fixed hex from the kit. That does not flip with the theme, so headings go
   invisible in dark mode. Rebind the tokens to the design-system variables,
   which are already theme-aware.
   --------------------------------------------------------------------------- */
:root,
body.elementor-page,
.elementor-kit-10,
[class*="elementor-kit-"]{
  --e-global-color-primary: var(--ink);
  --e-global-color-secondary: var(--graphite);
  --e-global-color-text: var(--text-2);
  --e-global-color-accent: var(--signal);
}
/* ---------------------------------------------------------------------------
   Bridge: main.css → Elementor's DOM.

   main.css styles .eyebrow / .lead / .d-lg as the element itself. Elementor
   puts the class on a wrapper div and renders the text in a child, so the
   class never reaches the text and the child keeps the kit's global heading
   size — an eyebrow label rendered at 82px next to a 56px H1 was this bug.
   Every rule below therefore targets the child Elementor actually renders.

   Values are read from main.css, not invented. Three values here differ from
   the task-4 brief's prose because the brief did not match main.css:
     - .eyebrow color is var(--silver-500), not var(--text-2) (main.css:69).
     - .lead max-width is 50ch, not 60ch (main.css:66).
     - .card border-radius/padding/border use var(--r-lg)=24px, var(--s6)=32px,
       and var(--silver-300), not 16px/28px 26px/var(--silver-200)
       (main.css:282). .card's heading is .h4 (17px/650), not 19px/640 — the
       19px/640 value in the brief actually belongs to .plan h3 (main.css:468).
       .card p is 14.5px/1.6, not 15px/1.65 (main.css:291).
   --------------------------------------------------------------------------- */
.elementor-element.eyebrow .elementor-heading-title{
  font:600 11.5px/1.4 var(--fm)!important;letter-spacing:.18em!important;
  text-transform:uppercase!important;color:var(--silver-500)!important;
}
.e-con.sec--ink .elementor-element.eyebrow .elementor-heading-title{
  color:rgba(255,255,255,.5)!important;
}
.elementor-element.d-xl .elementor-heading-title{
  font-size:clamp(44px,7.2vw,82px)!important;line-height:.99!important;
  font-weight:700!important;letter-spacing:-.045em!important;
}
.elementor-element.d-lg .elementor-heading-title{
  font-size:clamp(34px,5vw,56px)!important;line-height:1.04!important;
  font-weight:700!important;letter-spacing:-.038em!important;
}
.elementor-element.h2 .elementor-heading-title{
  font-size:clamp(28px,3.6vw,44px)!important;line-height:1.08!important;
  font-weight:700!important;letter-spacing:-.034em!important;
}
.elementor-element.lead .elementor-widget-container p{
  font-size:17px!important;line-height:1.6!important;
  color:var(--text-2)!important;max-width:50ch;
}
.elementor-element.pull .elementor-widget-container p{
  font-size:22px!important;line-height:1.45!important;font-weight:640!important;
  letter-spacing:-.02em!important;color:var(--ink)!important;
}
.elementor-element.closing .elementor-widget-container p{
  font-size:19px!important;line-height:1.5!important;color:var(--ink)!important;
}

/* Geometry: the design is .sec (full-bleed rhythm) > .wrap (1280px measure). */
.e-con.wrap{
  width:100%!important;max-width:1280px!important;margin-inline:auto!important;
  padding-inline:clamp(16px,4vw,72px)!important;
}
.e-con.sec,.e-con.sec--ink,.e-con.sec--cloud,.e-con.page-hero{
  padding-block:clamp(64px,8vw,112px)!important;
  overflow:hidden;   /* decorative discs/orbits are wider than the viewport */
}

/* Cards: icon-box styled to match .card in main.css (border-radius:var(--r-lg)=24px,
   padding:var(--s6)=32px, border-color:var(--silver-300)). */
.elementor-element.card .elementor-icon-box-wrapper{
  background:var(--white);border:1px solid var(--silver-300);
  border-radius:24px;padding:32px;height:100%;
}
.elementor-element.card .elementor-icon-box-title{
  font-size:17px!important;line-height:1.3!important;font-weight:650!important;
  letter-spacing:-.018em!important;
}
.elementor-element.card .elementor-icon-box-description{
  font-size:14.5px!important;line-height:1.6!important;color:var(--text-2)!important;
}

/* Plans: price-table wrapper styled to match .plan in main.css (border-radius:
   var(--r-xl)=32px, padding:var(--s7) var(--s6)=48px 32px, border-color:
   var(--silver-300)). Elementor's price-table widget markup/class structure
   was not verified against a rendered page, so only the wrapper — whose
   selector (.elementor-price-table) is standard across Elementor Pro — is
   styled here; inner heading/price sizing is left to the widget's own
   settings (heading text set via widget content, sized in the editor) rather
   than a guessed inner-class selector. */
.elementor-element.plan .elementor-price-table{
  background:var(--white);border:1px solid var(--silver-300);
  border-radius:32px;padding:48px 32px;height:100%;
}

/* Dark-mode surfaces: main.css does not just flip --white/--silver-300 here —
   .card and .plan get component-specific dark overrides (main.css:726, 767)
   that use --cloud-100 and a translucent white border instead of the flipped
   tokens. Without this, --white flips to #0A0A0B (the page background) and
   these surfaces would render near-black and disappear into the page. */
[data-theme="dark"] .elementor-element.card .elementor-icon-box-wrapper,
[data-theme="dark"] .elementor-element.plan .elementor-price-table{
  background:var(--cloud-100)!important;border-color:rgba(255,255,255,.09)!important;
}

/* Dark sections invert regardless of the active theme. */
.e-con.sec--ink{
  background:linear-gradient(170deg,#1D1D1F 0%,#0A0A0B 60%,#141418 100%)!important;
}
.e-con.sec--ink .elementor-heading-title,
.e-con.sec--ink .elementor-icon-box-title{color:#fff!important}
.e-con.sec--ink .elementor-widget-text-editor p,
.e-con.sec--ink .elementor-icon-box-description{color:#C3C7CE!important}
.e-con.sec--cloud{background:var(--cloud-50)!important}

/* Motion is an enhancement, never a precondition for reading the page. */
@media (prefers-reduced-motion: reduce){
  .elementor-element{animation:none!important;transition:none!important}
  [data-settings*="motion_fx"]{transform:none!important}
}