/* Shared site chrome and design tokens. Loaded after each page stylesheet. */
:root {
  --site-navy: #123477;
  --site-blue: #0879e8;
  --site-sky: #eaf5ff;
  --site-yellow: #ffc52e;
  --site-coral: #f43d68;
  --site-ink: #21365d;
  --site-muted: #66758f;
  --site-border: #d7e5f5;
  --site-page-gutter: clamp(18px, 4vw, 56px);
}

html { scroll-behavior: smooth; }
body {
  color: var(--site-ink);
  font-family: "Barlow", "Segoe UI", Arial, sans-serif;
  line-height: 1.5;
  overflow-x:clip;
}
/* Keep the sticky header in place if the translation engine injects its banner. */
.goog-te-banner-frame.skiptranslate { display:none !important; }
body { top:0 !important; }
button, input, textarea, select { font: inherit; }
a { text-underline-offset: 3px; }

.site-header {
  position: sticky;
  z-index: 160;
  top: 0;
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 30px);
  min-height: 88px;
  padding: 10px var(--site-page-gutter);
  background: rgba(255,255,255,.97);
  border-bottom: 1px solid rgba(18,52,119,.09);
  box-shadow: 0 5px 20px rgba(20,49,91,.06);
  backdrop-filter: blur(12px);
}
.site-header a { text-decoration: none; }
.site-header,
.site-header *,
.footer,
.footer *,
.site-footer,
.site-footer * { font-family: "Barlow", "Segoe UI", Arial, sans-serif; }
.site-header .brand { display:flex; align-items:center; flex:0 0 auto; }
.site-header .brand img { width:clamp(170px, 18vw, 250px); height:auto; max-height:68px; object-fit:contain; }
.site-header .nav {
  display:flex;
  flex:1;
  align-items:center;
  justify-content:center;
  gap:clamp(6px, .8vw, 12px) !important;
  white-space:nowrap;
}
.site-header .nav a:not(.drawer-brand) {
  position:relative;
  padding:12px 0;
  color:#2d3e5b;
  font-size:14px;
  font-weight:600;
  transition:color .2s ease;
}
.site-header .nav a:not(.drawer-brand):hover,
.site-header .nav a.active { color:var(--site-blue); }
.site-header .nav a:not(.drawer-brand)::after {
  position:absolute;
  right:0;
  bottom:5px;
  left:0;
  height:2px;
  background:var(--site-blue);
  border-radius:2px;
  content:"";
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .2s ease;
}
.site-header .nav a:not(.drawer-brand):hover::after,
.site-header .nav a.active::after { transform:scaleX(1); }
.site-header .nav .drawer-brand { display:none; }
.site-header .gtranslate_wrapper { flex:0 0 auto; }
.site-header .gtranslate_wrapper select.gt_selector {
  width:88px;
  min-height:38px;
  padding:7px 28px 7px 10px;
  color:var(--site-navy);
  background:#fff;
  border:1px solid var(--site-border);
  border-radius:9px;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
}
.site-header .gtranslate_wrapper select.gt_selector:focus-visible {
  outline:3px solid rgb(8 121 232 / 22%);
  outline-offset:2px;
}
.site-header .header-cta {
  flex:0 0 auto;
  padding:12px 18px;
  color:#fff;
  background:linear-gradient(135deg,#168bf4,#0864d2);
  border-radius:10px;
  box-shadow:0 5px 13px rgba(8,121,232,.2);
  font-size:14px;
  font-weight:700;
  line-height:1.2;
  text-align:center;
  transition:transform .2s ease, box-shadow .2s ease;
}
.site-header .header-cta:hover { transform:translateY(-1px); box-shadow:0 8px 18px rgba(8,121,232,.27); }
.site-header .right-side { display:flex; flex:0 0 auto; align-items:center; gap:12px; }
.site-header .menu-button { display:none; }
.site-header .menu-button svg {
  display:block;
  flex:0 0 24px;
  width:24px;
  height:24px;
  color:var(--site-navy);
  stroke:currentColor;
  opacity:1;
  visibility:visible;
}
.site-header .menu-button .menu-open-icon { display:block; }
.site-header .menu-button .menu-close-icon { display:none; }
.footer,
.site-footer { padding-left:var(--site-page-gutter); padding-right:var(--site-page-gutter); }

@media (max-width:1500px) {
  :root { --site-page-gutter:20px; }
  .site-header { position:sticky !important; top:0; min-height:76px; padding:8px var(--site-page-gutter); }
  .site-header:has(.nav.open) {
    position:sticky !important;
    top:0;
    z-index:1201;
    animation:none;
    transform:none;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
  .site-header .brand img { width:190px; max-height:58px; }
  .site-header .menu-button {
    display:grid;
    flex:0 0 42px;
    width:42px;
    height:42px;
    margin-left:auto;
    padding:0;
    place-items:center;
    color:var(--site-navy);
    background:#fff;
    border:1px solid var(--site-border);
    border-radius:10px;
    cursor:pointer;
  }
  .site-header .menu-button[aria-expanded="true"],
  .site-header:has(.nav.open) .menu-button {
    position:fixed;
    z-index:1203;
    top:16px;
    right:16px;
  }
  .site-header .menu-button[aria-expanded="true"] .menu-open-icon,
  .site-header:has(.nav.open) .menu-open-icon { display:none !important; }
  .site-header .menu-button[aria-expanded="true"] .menu-close-icon,
  .site-header:has(.nav.open) .menu-close-icon {
    display:block !important;
    width:24px;
    height:24px;
    color:var(--site-navy);
    opacity:1 !important;
    visibility:visible !important;
  }
  .site-header .nav {
    position:fixed !important;
    z-index:1202;
    inset:0 0 0 auto;
    display:flex;
    width:min(350px,86vw);
    height:100vh;
    height:100dvh !important;
    box-sizing:border-box;
    padding:22px;
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    gap:4px !important;
    overflow-y:auto;
    background:#fff;
    box-shadow:-100vw 0 0 100vw rgba(14,32,63,.42), -12px 0 35px rgba(18,52,119,.14);
    overscroll-behavior:contain;
    transform:translateX(110%);
    visibility:hidden;
    transition:transform .25s ease, visibility .25s ease;
  }
  .site-header .nav.open {
    visibility:visible;
    transform:translateX(0);
    background:#fff;
  }
  body.menu-open .site-header .nav {
    display:flex !important;
    visibility:visible !important;
    transform:translateX(0) !important;
    background:#fff !important;
  }
  body.menu-open .site-header .nav > a {
    visibility:visible !important;
    opacity:1 !important;
    color:#2d3e5b;
  }
  .site-header .nav .drawer-brand { display:block !important; flex:0 0 auto; padding:4px 48px 18px 0; border-bottom:1px solid var(--site-border); }
  .site-header .nav .drawer-brand img { width:190px; max-height:60px; object-fit:contain; }
  .site-header .nav a:not(.drawer-brand) { padding:12px 4px; font-size:16px; }
  .site-header .nav a:not(.drawer-brand)::after { bottom:6px; right:auto; width:42px; }
  .site-header .nav .drawer-brand::after { display:none; }
  .site-header .gtranslate_wrapper { margin-top:14px; }
  .site-header .gtranslate_wrapper select.gt_selector { width:100%; min-height:44px; font-size:16px; }
  .site-header .header-cta { margin-left:0; padding:10px 12px; font-size:13px; }
  body.menu-open { overflow:hidden; }
  /* Keep the page scrim behind the opaque drawer, even inside stacking contexts. */
  body.menu-open::before { display:none; }
}
@media (max-width:640px) {
  :root { --site-page-gutter:12px; }
  .site-header { gap:9px; min-height:68px; padding:7px var(--site-page-gutter); }
  .site-header .brand img { width:clamp(128px,44vw,176px); max-height:50px; }
  .site-header .menu-button { width:38px; height:38px; flex-basis:38px; }
  .site-header .header-cta { max-width:112px; padding:8px 9px; font-size:11px; }
}
@media (max-width:360px) {
  .site-header { gap:6px; padding-inline:8px; }
  .site-header .brand img { width:116px; max-height:44px; }
  .site-header .right-side { gap:6px; }
  .site-header .menu-button { width:36px; height:36px; flex-basis:36px; }
  .site-header .header-cta { max-width:88px; min-width:0; padding:7px 6px; font-size:10px; }
}

.coming-soon-section { margin:48px auto; max-width:1100px; padding:32px; text-align:center; background:#eaf5ff; border-radius:18px; }
.challenge-page { max-width:900px; margin:40px auto; padding:24px; }
.challenge-page h1 { margin:28px 0 12px; color:#123477; }
.challenge-page details { margin:14px 0; padding:18px 22px; background:#fff; border:1px solid #d7e5f5; border-radius:12px; box-shadow:0 4px 15px rgba(20,49,91,.06); }
.challenge-page summary { color:#123477; cursor:pointer; font-size:19px; font-weight:700; }
.challenge-page details p { margin:14px 0 0; }
.challenge-back-link { display:inline-block; margin-top:24px; font-weight:700; }
@media(max-width:700px){.coming-soon-section{margin:28px 16px;padding:24px}.challenge-page{margin:20px auto;padding:18px}}

.beta-banner { display:flex; justify-content:center; align-items:center; gap:10px; min-height:44px; padding:8px 16px; color:#123477; background:linear-gradient(90deg,#fff2ca,#ffdf8a,#fff2ca); text-align:center; font-size:14px; font-weight:600; letter-spacing:.02em; }
.beta-banner-label { padding:3px 9px; color:#fff; background:#123477; border-radius:999px; font-size:11px; font-weight:800; letter-spacing:.09em; }
.beta-banner strong { font-size:17px; }
.secondary-page-main { min-height:55vh; }
.contact-panel { max-width:820px; margin:52px auto; padding:clamp(28px,5vw,56px); text-align:center; background:linear-gradient(145deg,#fff,#eaf5ff); border:1px solid #d7e5f5; border-radius:22px; box-shadow:0 12px 35px rgba(20,49,91,.08); }
.contact-panel h1 { margin:12px 0; color:#123477; font-size:clamp(32px,5vw,48px); }
.contact-panel p { max-width:620px; margin:0 auto; color:#536782; font-size:18px; }
.contact-actions { display:flex; justify-content:center; flex-wrap:wrap; gap:12px; margin:28px 0; }
.contact-actions a { display:inline-block; padding:12px 18px; border-radius:10px; font-weight:700; text-decoration:none; }
.contact-action-primary { color:#fff; background:#0879e8; }
.contact-action-secondary { color:#123477; background:#fff; border:1px solid #d7e5f5; }
.contact-panel .contact-note { font-size:15px; }
@media(max-width:600px){.beta-banner{gap:7px;font-size:13px}.contact-panel{margin:28px 16px;padding:26px 20px}}

/* Readable body copy across desktop and mobile. */
.rocky-site main p, .challenge-page p { font-size:18px; line-height:1.65; }
.rocky-site main .faq-question strong, .challenge-page summary { font-size:20px; line-height:1.4; }
.rocky-site main .faq-answer { font-size:18px; line-height:1.65; }
.rocky-site main .challenge-tag { font-size:15px; }
.challenge-page details p { font-size:18px; line-height:1.7; }
.contact-panel .contact-note { font-size:16px; }
@media(max-width:640px) { .rocky-site main p, .challenge-page p, .rocky-site main .faq-answer { font-size:17px; line-height:1.65; } .rocky-site main .faq-question strong, .challenge-page summary { font-size:18px; } }

.coming-soon-page { max-width:820px; margin:52px auto; padding:clamp(28px,5vw,56px); text-align:center; background:linear-gradient(145deg,#fff,#eaf5ff); border:1px solid #d7e5f5; border-radius:22px; box-shadow:0 12px 35px rgba(20,49,91,.08); }
.coming-soon-page h1 { margin:14px 0; color:#123477; font-size:clamp(32px,5vw,48px); }
.coming-soon-page p { max-width:620px; margin:12px auto; color:#536782; font-size:18px; line-height:1.65; }
@media(max-width:640px){.coming-soon-page{margin:28px 16px;padding:26px 20px}.coming-soon-page p{font-size:17px}}

.coming-soon-link { display:inline-block; margin:10px 8px 0; padding:10px 16px; color:#123477; background:#fff; border:1px solid #d7e5f5; border-radius:9px; font-weight:700; text-decoration:none; }
.coming-soon-link:hover { color:#0879e8; border-color:#0879e8; }