/* Hallmark · component: compact CTA card (footer placement, actual size) · genre: luxury-technical (aviation) · glass
 * Reuses the already-approved "Find Your Runway" quiz engine verbatim inside a modal. This iteration: CTA only
 * (no mock page chrome), sized to match the site's existing bottom-of-article CTA card, and the decorative mark
 * is the ACTUAL SkyTeam icon (swoosh + plane), pulled from the live logo asset, not a reinterpretation. */
.sta-rwq{
  --gold:#c9a24d; --gold-deep:#b58e3d; --gold-darker:#9c7a30;
  --gold-12:rgba(201,162,77,.12); --gold-18:rgba(201,162,77,.18); --gold-30:rgba(201,162,77,.30); --gold-08:rgba(201,162,77,.08);
  --ink:#12130f; --ink-2:#1c1d18; --body:#54544c; --body-soft:#6a6a61; --muted:#96948a;
  --line:#e7e3d9; --line-2:#f0eee6; --bg:#ffffff; --bg-2:#faf9f5; --tint:#f5f2ea; --paper:#eceae1;
  --dark-grad:linear-gradient(150deg,#1a1a12 0%,#0d0e09 100%);
  --dark-radial:radial-gradient(120% 90% at 100% 0%,rgba(201,162,77,.28) 0%,transparent 52%);
  --gold-grad:linear-gradient(135deg,#d7b05b 0%,#b58e3d 60%,#a67f33 100%);
  --ok:#2f8f5b; --ok-08:rgba(47,143,91,.09); --ok-bd:rgba(47,143,91,.28);
  --glass:rgba(255,255,255,.48); --glass-2:rgba(255,255,255,.66); --glass-bd:rgba(255,255,255,.75);
  --glass-sel:rgba(201,162,77,.16); --glass-sh:0 6px 22px rgba(20,19,10,.08);
  --sky:rgba(122,150,190,.16); --sky-2:rgba(150,180,210,.10);
  --font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Cairo",sans-serif;
  --mono:ui-monospace,"SF Mono","SFMono-Regular",Menlo,"Roboto Mono",monospace;
  --r-sm:10px; --r-md:13px; --r-card:17px; --r-lg:22px; --r-xl:26px; --r-pill:999px;
  --sh-sm:0 1px 3px rgba(20,19,10,.05),0 2px 8px rgba(20,19,10,.04);
  --sh-md:0 6px 22px rgba(20,19,10,.07); --sh-lg:0 30px 70px rgba(20,19,10,.14);
  --sh-gold:0 12px 30px rgba(201,162,77,.34);
  --ease-out:cubic-bezier(.2,.8,.2,1); --dur:.42s; --dur-fast:.2s;
}
.sta-rwq{box-sizing:border-box}
.sta-rwq *{box-sizing:border-box;margin:0;padding:0}
/* pinned, not inherited: the card was signed off against a 16px base, and this widget
   now sits inside a theme whose body font-size it does not control */
.sta-rwq{font-family:var(--font);font-size:16px;color:var(--ink);-webkit-font-smoothing:antialiased;line-height:1.5}
@media(prefers-reduced-motion:reduce){.sta-rwq *{animation-duration:.01ms!important;transition-duration:.01ms!important;animation-iteration-count:1!important}}
.sta-rwq ::selection{background:var(--gold-18)}
.sta-rwq img, .sta-rwq svg{display:block;max-width:100%}
/* The theme ships a global reset `[type="button"],[type="submit"],button{white-space:nowrap}`.
   It reaches the quiz option cards, their text then cannot wrap, and the two-column grid
   blows out past the phone frame. Scoping protected the site from this widget; this line is
   the other direction - the widget refusing to inherit the site's text-flow rules. */
.sta-rwq button{font:inherit;white-space:normal}

/* ---------- prototype dev controls (NOT part of the deliverable) ---------- */
/* ================= THE DELIVERABLE: one compact CTA card ================= */
/* margin-inline:auto is the only addition to this rule: on the site the card sits in a
   1200px Elementor container, and without it the 1040px card hangs to one side. */
.sta-rwq .rwc-card{margin-inline:auto;position:relative;overflow:clip;color:#fff;border-radius:28px;
  width:min(1040px,100%);box-shadow:0 24px 60px rgba(20,19,10,.22);
  cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .18s var(--ease-out);
  background:
    radial-gradient(60% 80% at 84% 4%,rgba(255,208,146,.20) 0%,transparent 55%),
    radial-gradient(95% 75% at 10% 112%,rgba(32,44,62,.55) 0%,transparent 62%),
    linear-gradient(165deg,#1a2230 0%,#101319 50%,#0a0b08 100%)}
@media(hover:none){.sta-rwq .rwc-card:active{transform:scale(.995)}}
/* the chosen environment: a real SkyTeam training photo (C172, solo-flight approach — see
   SkyTeam-Website-Images-By-Page/01_PPL/), tone-mapped to the brand duotone and alpha-faded so it
   reads as atmosphere behind the lockup, never as a pasted-in rectangle. Concentrated on the right
   two-thirds so the phone side keeps a clean, uncluttered ground. */
/* the photo's URL is set inline by the PHP renderer, not here: WP Rocket's minifier
   rewrites relative url() against its own /cache/min/ path AND prefixes it with WPML's
   /ar, which produced a 404 for the whole Arabic site. A stylesheet with no url() in it
   cannot be rewritten wrongly. */
.sta-rwq .rwc-plane{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;
  background-size:cover;background-position:50% 42%}
/* surface material: a whisper of film grain, kept from the original material study */
.sta-rwq .rwc-card::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.6;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.09'/%3E%3C/svg%3E")}
/* vignette on its own layer so it can be verified/toggled independently */
.sta-rwq .rwc-vig{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(118% 104% at 50% 44%,transparent 54%,rgba(0,0,0,.46) 100%)}
.sta-rwq .rwc-grid{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);align-items:center;gap:58px;
  padding:34px 46px}
/* EN reads LTR: phone left, brandmark right. AR reads RTL: the whole grid mirrors, so the phone
   sits right where a reader's eye naturally starts — not just the text inside re-flowing. */
.sta-rwq[dir="rtl"] .rwc-grid, .sta-rwq [dir="rtl"] .rwc-grid{direction:rtl}
.sta-rwq[dir="rtl"] .rwc-visual, .sta-rwq [dir="rtl"] .rwc-visual, .sta-rwq[dir="rtl"] .rwc-copy, .sta-rwq [dir="rtl"] .rwc-copy{direction:rtl}
@media(max-width:680px){.sta-rwq .rwc-grid{grid-template-columns:1fr;gap:22px;padding:30px 26px;justify-items:center;text-align:center}}

.sta-rwq .rwc-visual{display:flex;align-items:center;justify-content:center;min-width:0}
.sta-rwq .teaser-wrap{position:relative;width:min(168px,60vw)}
.sta-rwq .teaser-btn{all:unset;cursor:pointer;display:block;width:100%;border-radius:34px;position:relative}
.sta-rwq .teaser-btn:focus-visible{outline:2px solid var(--gold);outline-offset:6px}
.sta-rwq .teaser-phone{width:100%;aspect-ratio:392/812;background:linear-gradient(160deg,#26261d,#0a0a07);border-radius:13.7%;padding:3.4%;
  box-shadow:0 26px 48px rgba(0,0,0,.5),0 0 0 2px rgba(255,255,255,.05),inset 0 0 0 1px rgba(0,0,0,.5);
  position:relative;transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out)}
.sta-rwq .teaser-btn:hover .teaser-phone, .sta-rwq .teaser-btn:focus-visible .teaser-phone{transform:translateY(-6px);
  box-shadow:0 32px 58px rgba(0,0,0,.55),0 0 0 2px rgba(255,255,255,.07),inset 0 0 0 1px rgba(0,0,0,.5)}
.sta-rwq .teaser-notch{position:absolute;top:3.4%;left:50%;transform:translateX(-50%);width:34%;height:3.6%;background:#000;border-radius:0 0 30% 30%;z-index:3}
/* screen colors are LITERALS, not theme vars — the lit screen is the card's affordance and must
   survive dark theme (a glowing phone at night is natural; a dark slab on a dark card is invisible) */
.sta-rwq .teaser-screen{width:100%;height:100%;border-radius:11%;overflow:hidden;position:relative;background:#fff;
  background-image:radial-gradient(70% 42% at 12% 4%,rgba(201,162,77,.08),transparent 60%),radial-gradient(60% 40% at 92% 8%,rgba(122,150,190,.16),transparent 62%),linear-gradient(180deg,#ffffff,#faf9f5)}
.sta-rwq .teaser-inner{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:14% 9% 22%;color:#12130f;container-type:inline-size}
.sta-rwq .teaser-halo{width:26%;aspect-ratio:1;border-radius:26%;background:var(--dark-grad);display:grid;place-items:center;box-shadow:var(--sh-gold);margin-bottom:9%;position:relative;overflow:hidden}
.sta-rwq .teaser-halo::after{content:"";position:absolute;inset:0;background:var(--dark-radial)}
.sta-rwq .teaser-halo svg{width:52%;height:52%;color:var(--gold);position:relative;z-index:2;transform:rotate(45deg)}
.sta-rwq .teaser-inner .th{display:block;font-size:clamp(14px,11cqi,19px);font-weight:800;letter-spacing:-.01em;line-height:1.22}
.sta-rwq .teaser-meta{margin-top:8px;font-family:var(--mono);font-size:7.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:#9c7a30;white-space:nowrap}
.sta-rwq[dir="rtl"] .teaser-meta, .sta-rwq [dir="rtl"] .teaser-meta{font-family:var(--font);letter-spacing:0;font-size:9.5px;text-transform:none}
/* Begin = a miniature of the quiz's own approved gold .cta button — the shape is the affordance */
.sta-rwq .teaser-tap{position:absolute;bottom:7%;left:0;right:0;width:max-content;margin-inline:auto;display:flex;align-items:center;gap:6px;
  font-family:var(--font);font-size:11px;font-weight:800;letter-spacing:.02em;color:#fff;background:var(--gold-grad);
  padding:8px 16px;border-radius:var(--r-pill);box-shadow:0 8px 20px rgba(201,162,77,.38);white-space:nowrap;
  transition:transform .3s var(--ease-out),box-shadow .3s var(--ease-out)}
.sta-rwq[dir="rtl"] .teaser-tap, .sta-rwq [dir="rtl"] .teaser-tap{letter-spacing:0;font-size:12px}
.sta-rwq .teaser-btn:hover .teaser-tap, .sta-rwq .teaser-btn:focus-visible .teaser-tap{transform:translateY(-1px);box-shadow:0 10px 24px rgba(201,162,77,.46)}
.sta-rwq .teaser-tap svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.6;transition:transform .3s var(--ease-out)}
.sta-rwq .teaser-btn:hover .teaser-tap svg, .sta-rwq .teaser-btn:focus-visible .teaser-tap svg{transform:translateX(3px)}
.sta-rwq[dir="rtl"] .teaser-tap svg, .sta-rwq [dir="rtl"] .teaser-tap svg{transform:scaleX(-1)}
.sta-rwq[dir="rtl"] .teaser-btn:hover .teaser-tap svg, .sta-rwq [dir="rtl"] .teaser-btn:hover .teaser-tap svg, .sta-rwq[dir="rtl"] .teaser-btn:focus-visible .teaser-tap svg, .sta-rwq [dir="rtl"] .teaser-btn:focus-visible .teaser-tap svg{transform:scaleX(-1) translateX(3px)}

.sta-rwq .rwc-copy{min-width:0;text-align:center;position:relative;container-type:inline-size}
/* the lockup's stage: a visible warm dark-gold field the brand sits inside — lit, not glowing */
.sta-rwq .rwc-copy::before{content:"";position:absolute;inset:-52px -70px;z-index:-1;
  background:radial-gradient(54% 62% at 50% 42%,rgba(190,150,74,.20),rgba(150,120,60,.07) 55%,transparent 80%)}
/* the lockup: the real horizontal icon+wordmark, full-width and dominant. Fixed direction:ltr so the icon
   never swaps sides with the text — a logo lockup doesn't mirror for RTL, only the tagline below it does. */
.sta-rwq .rwc-lockup{display:flex;align-items:center;justify-content:center;gap:3%;width:100%;direction:ltr}
.sta-rwq .rwc-wordcol{display:flex;flex-direction:column;align-items:center;min-width:0}
.sta-rwq .rwc-brand-icon{width:min(280px,44%);height:auto;flex:none;filter:drop-shadow(0 8px 18px rgba(0,0,0,.4))}
.sta-rwq .rwc-wordmark{display:flex;flex-direction:column;align-items:center;min-width:0}
/* AR has no brand-name/category split like "SKY TEAM" + "AVIATION" — it's one flowing phrase,
   so it gets one size instead of forcing an artificial two-tier structure onto it */
.sta-rwq .rwc-wordmark-ar{display:none;direction:rtl;font-family:"Cairo",var(--font);font-weight:700;line-height:1.42;
  color:var(--gold);text-align:center;font-size:clamp(1.4rem,(97cqi - 280px) / 8.8,2.7rem)}
.sta-rwq[lang="ar"] .rwc-wordmark, .sta-rwq [lang="ar"] .rwc-wordmark{display:none}
.sta-rwq[lang="ar"] .rwc-wordmark-ar, .sta-rwq [lang="ar"] .rwc-wordmark-ar{display:block}
/* NOTE: calc math inside clamp() REQUIRES spaces around + and - ; unspaced "5.3vw+1.4rem" is
   silently dropped and the wordmark collapses to the 16px inherited default. Sized in cqi against
   the copy column so the nowrap lockup can never overflow it. */
.sta-rwq .rwc-sky{font-family:Georgia,"Times New Roman",serif;font-size:clamp(2rem, (97cqi - 280px) / 6.15, 4.6rem);font-weight:700;letter-spacing:.04em;color:var(--gold);line-height:1;white-space:nowrap}
.sta-rwq .rwc-aviation{font-family:Georgia,"Times New Roman",serif;font-size:clamp(.75rem, (97cqi - 280px) / 13.6, 2.1rem);letter-spacing:.5em;color:#a8a69c;margin-top:11px;padding-inline-start:.5em}
/* livery divider: hairlines + four-point star tying the tagline into the lockup */
.sta-rwq .rwc-divider{display:flex;align-items:center;justify-content:center;gap:12px;margin:0 auto 8px;width:min(240px,70%)}
.sta-rwq .rwc-divider::before, .sta-rwq .rwc-divider::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--gold-30));}
.sta-rwq .rwc-divider::after{background:linear-gradient(90deg,var(--gold-30),transparent)}
.sta-rwq .rwc-divider svg{width:14px;height:14px;flex:none;fill:var(--gold);opacity:.85}
/* tagline reads as part of the lockup composition: sentence case, wide-tracked, brighter;
   AR keeps natural joining (tracking breaks Arabic) */
.sta-rwq .rwc-tagline{font-size:clamp(16px, 1.5vw + 8px, 21px);font-weight:400;color:#fff;letter-spacing:.12em}
.sta-rwq[dir="rtl"] .rwc-tagline, .sta-rwq [dir="rtl"] .rwc-tagline{letter-spacing:0;font-size:clamp(16px, 1.5vw + 9px, 22px)}

/* trust strip: the two regulatory marks that answer "is this legitimate" before anyone asks */
.sta-rwq .rwc-trust{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;
  gap:34px;flex-wrap:wrap;padding:20px 46px;background:rgba(250,249,245,.97)}
.sta-rwq .rwc-trust-badge{height:24px;width:auto;display:block}
@media(max-width:680px){.sta-rwq .rwc-trust{padding:16px 26px;gap:22px}.sta-rwq .rwc-trust-badge{height:19px}}
@media(max-width:680px){
  /* the mobile grid centers items to content width; a size-contained container must be given
     its width explicitly or it collapses to zero and starves every cqi/percentage inside it */
  .sta-rwq .rwc-copy{width:100%}
  .sta-rwq .rwc-brand-icon{width:min(84px,28%)}
  .sta-rwq .rwc-sky{font-size:1.5rem}
  .sta-rwq .rwc-aviation{font-size:.52rem;letter-spacing:.34em;margin-top:7px}
  .sta-rwq .rwc-tagline{font-size:14px}
}

.sta-rwq .rwc-arrow{position:absolute;top:53%;left:222px;width:70px;height:56px;transform:translateY(-50%);z-index:3;pointer-events:none}
.sta-rwq[dir="rtl"] .rwc-arrow, .sta-rwq [dir="rtl"] .rwc-arrow{left:auto;right:222px;scale:-1 1}
.sta-rwq .rwc-arrow svg{width:100%;height:100%;overflow:visible}
.sta-rwq .rwc-arrow path{fill:none;stroke:var(--gold);stroke-width:2.6;stroke-linecap:round}
.sta-rwq .rwc-arrow{animation:staq-arrow-nudge 1.8s ease-in-out infinite}
@keyframes staq-arrow-nudge{0%,100%{transform:translateY(-50%) translateX(0)}50%{transform:translateY(-50%) translateX(-6px)}}
@media(max-width:680px){.sta-rwq .rwc-arrow{display:none}}


/* The quiz popup's markup is printed into every page, but every rule that hides it lived in
   the quiz stylesheet, which only loads when the popup is opened. Between first paint and
   that file, the popup rendered as plain visible content - a flash on every navigation.
   This one rule rides in the render-blocking stylesheet instead, holds the popup invisible
   and out of the way, and stops matching the moment the engine adds .on - so the quiz
   stylesheet's own open transition is untouched. */
.sta-rwq .rwq-backdrop:not(.on){position:fixed;inset:0;opacity:0;pointer-events:none;z-index:100}