/* Your® Journey platform (/platform/) on the MotionTech palette.
 *
 * Loaded after the platform's own stylesheets, on the two platform pages only
 * (inc/platform.php). The platform CSS is synced from its project and never
 * edited here; this file maps it onto theme.json:
 *
 *   platform          -> MotionTech
 *   --navy  #0A2C54   -> navy        #0A2C54 (same)
 *   --cyan  #1ACDD8   -> teal        #1ACDD8 (same)
 *   --cyan-soft #7DE3EA -> teal-light #ABEEF2
 *   --mist  #DEFBFF   -> teal-tint   #EEFDFF
 *   --paper #F4FBFD   -> off-white   #F8FEFF
 *   --muted #51647D   -> navy-mid    #475F7F
 *   --teal  #1E4A4D   -> teal-deep   #094448
 *   #08203F (dark)    -> navy-deep   #05162A
 *   #123A6B (dark hi) -> navy        #0A2C54
 *
 * The Shore colours (--active, --dynamic, --steel) are product meaning, not
 * decoration, and stay as they are.
 */
:root {
	--navy: #0A2C54;
	--cyan: #1ACDD8;
	--cyan-soft: #ABEEF2;
	--mist: #EEFDFF;
	--paper: #F8FEFF;
	--muted: #475F7F;
	--teal: #094448;
	--line: rgba(10, 44, 84, 0.12);
}

/* Hard-coded dark surfaces: video players, thumbnails, empty states. */
.feature-card .feature-player,
.feature-card .feature-player iframe,
.feature-card .feature-player video,
.vthumb,
.vplayer,
.vplayer iframe,
.vplayer video {
	background: #05162A;
}
.vthumb-empty {
	background: linear-gradient(160deg, #0A2C54, #05162A);
}
.yj-facade {
	background:
		radial-gradient(120% 90% at 80% -10%, rgba(26, 205, 216, 0.35), transparent 55%),
		linear-gradient(160deg, #0A2C54, #05162A 72%);
}
[data-yj-youtube] iframe { background: #05162A; }
.yj-vmodal-box,
.yj-vmodal-player video,
.yj-vmodal-player iframe { background: #05162A; }

/* ---------------------------------------------------------------------------
   Header: light, like the MotionTech header (off-white, navy text, teal
   accents, the teal logo) instead of the platform's navy bar with a white
   logo. The logo itself is swapped by build/tools/sync-platform.py.
   The footer stays dark, as on the main site.
   --------------------------------------------------------------------------- */
body > header {
	background: rgba(248, 254, 255, 0.96);
	border-bottom: 1px solid #D8F4F6;
	box-shadow: 0 1px 0 rgba(10, 44, 84, 0.04);
}
body > header .brand .fallback,
body > header .brand .sub b { color: #0A2C54; }
body > header .brand .sub { border-left-color: rgba(10, 44, 84, 0.15); }
body > header .brand .sub span { color: #0d7684; }
body > header .nav-links a,
body > header .yj-nav-link,
body > header .yj-nav-trigger { color: #0A2C54; }
body > header .nav-links a:hover,
body > header .yj-nav-link:hover,
body > header .yj-nav-trigger:hover,
body > header .yj-nav-trigger[aria-expanded="true"],
body > header .yj-nav-link[aria-current="page"],
body > header .yj-nav-trigger[aria-current="true"] { color: #094448; }
body > header .nav-cta .btn-ghost { color: #0A2C54; border-color: rgba(10, 44, 84, 0.25); }
body > header .lang-trigger { color: #0A2C54; border-color: rgba(10, 44, 84, 0.2); background: #fff; }
body > header .lang-trigger .lang-action { color: #475F7F; }
body > header .lang-trigger .lang-current { color: #0A2C54; }
body > header .burger { border-color: rgba(10, 44, 84, 0.2); background: #fff; }
body > header .burger:hover { background: #EEFDFF; }
body > header .burger span { background: #0A2C54; }
/* Phone menu panel */
body > header .nav-links.open { background: #F8FEFF; border-bottom: 1px solid #D8F4F6; }
body > header .nav-links.open a { color: #0A2C54; border-bottom-color: #D8F4F6; }
body > header .nav-links.open .yj-nav-product { color: #0A2C54; }
body > header .nav-links.open .yj-nav-product-tag { color: #475F7F; }
body > header .nav-links.open .yj-nav-mark,
body > header .nav-links.open .yj-nav-product:hover .yj-nav-mark { background: #EEFDFF; }