/* One user-selected composition at every viewport, scaled proportionally.
   Content and illustration are separate rows in normal document flow. */
.xj-hero {
  --hero-text:#192738;
  --hero-secondary:#46566a;
  position:relative;
  isolation:isolate;
  padding:40px 24px 24px;
  text-align:center;
  color:var(--hero-text);
  background:radial-gradient(ellipse at 50% 69%,#a9c5de80 0,transparent 49%),linear-gradient(180deg,#d9dee6,#c8d2de 73%,#d9dee6);
  border-bottom:1px solid #b8c5d3;
}
.xj-hero__content {position:relative;max-width:1040px;margin-inline:auto;z-index:1;}
.xj-hero__label {display:inline-block;padding:5px 16px;border:1px solid #aebed0;border-radius:100px;background:#e6ecf366;color:#455b75;font-size:.8125rem;font-weight:650;line-height:1.8;}
.xj-hero h1 {font-size:clamp(2.6rem,4.3vw,3.75rem);font-weight:850;line-height:1.4;letter-spacing:-1.2px;margin:17px 0 15px;text-wrap:balance;}
.xj-hero h1 span {display:block;}
.xj-hero__accent {color:#345d88;}
.xj-hero__description {max-width:610px;margin-inline:auto;font-size:1rem;line-height:1.95;color:var(--hero-secondary);text-wrap:pretty;}
.xj-hero__actions {display:flex;justify-content:center;gap:12px;margin:24px auto 0;max-width:465px;}
.xj-hero__cta {display:inline-flex;align-items:center;justify-content:center;min-height:54px;min-width:0;flex:1;padding:12px 18px;border:1px solid transparent;border-radius:12px;font-size:.9375rem;font-weight:700;line-height:1.5;transition:background-color .18s,box-shadow .18s,transform .18s;}
.xj-hero__cta--primary {background:#253e5b;color:#fff;border-color:#253e5b;box-shadow:0 5px 14px #263e5b26,inset 0 1px #ffffff24;flex:1.14;}
.xj-hero__cta--secondary {position:relative;isolation:isolate;background:#fff;color:#263b54;border-color:#c49945;box-shadow:0 4px 12px #a7771c20,inset 0 1px #fff;}
/* Gold stays within the button's border, without changing its layout footprint. */
@property --xj-gold-angle {syntax:'<angle>';initial-value:0deg;inherits:false;}
.xj-hero__cta--secondary::before {
  content:'';position:absolute;inset:-1px;border-radius:inherit;padding:2px;pointer-events:none;
  background:conic-gradient(from var(--xj-gold-angle),#b5852b,#fbe8a3 12%,#b5852b 22%,#d7af57 48%,#fff4c4 60%,#b5852b 72%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  animation:xj-gold-orbit 5s linear infinite;
}
.xj-hero__cta--secondary::after {
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(110deg,transparent 35%,#e6bc5c24 48%,#fff6d660 50%,transparent 65%);
  background-size:300% 100%;animation:xj-gold-glint 6s ease-in-out infinite;
}
@keyframes xj-gold-orbit {to{--xj-gold-angle:360deg;}}
@keyframes xj-gold-glint {0%,25%{background-position:100% 0}70%,100%{background-position:0 0}}
.xj-hero__cta--primary:hover {background:#172d47;transform:translateY(-2px);box-shadow:0 7px 18px #253e5b38;}
.xj-hero__cta--secondary:hover {background:#fffdf7;border-color:#b5852b;transform:translateY(-2px);box-shadow:0 6px 16px #b5852b38,0 0 0 2px #dfbc652b;}
.xj-hero__cta--secondary:active {transform:translateY(1px);box-shadow:0 2px 5px #a7771c26;}
.xj-hero__cta:focus-visible {outline:3px solid #214d7c;outline-offset:4px;box-shadow:0 0 0 7px #eff6ff;}
.xj-hero__art {display:block;position:relative;width:min(100%,960px);margin:28px auto 0;}
.xj-hero__art img {width:100%;height:auto;display:block;aspect-ratio:5 / 3;object-fit:contain;}
.xj-hero__note {display:flex;align-items:center;justify-content:center;gap:8px;margin:14px auto 0;color:#50637b;font-size:.8125rem;line-height:1.7;}
.xj-hero__note .age {border-color:#9fb1c5;font-size:.75rem;padding:2px 5px;flex-shrink:0;}
html[lang=en] .xj-hero h1 {line-height:1.15;letter-spacing:-1.6px;margin-block:21px;}
html[lang=en] .xj-hero__label {letter-spacing:1.35px;font-size:.75rem;}
@media(min-width:640px) and (max-width:1199px) {
  .xj-hero {padding:44px 32px 26px;}
  .xj-hero h1 {font-size:clamp(2.5rem,5vw,3.4rem);}
  .xj-hero__art {width:min(82%,760px);margin-top:24px;}
}
@media(max-width:639px) {
  .xj-hero {padding:32px 18px 23px;}
  .xj-hero__label {font-size:.75rem;padding:4px 12px;}
  .xj-hero h1 {font-size:clamp(1.7rem,7.4vw,2.65rem);letter-spacing:-.5px;line-height:1.55;margin:16px 0 12px;}
  .xj-hero__description {font-size:1rem;line-height:1.85;max-width:440px;}
  .xj-hero__actions {gap:8px;margin-top:21px;max-width:410px;}
  .xj-hero__cta {padding:12px 8px;min-height:52px;font-size:.875rem;border-radius:10px;}
  .xj-hero__art {width:min(100%,390px);margin-top:22px;}
  .xj-hero__note {font-size:.75rem;gap:7px;margin-top:10px;}
  html[lang=en] .xj-hero h1 {font-size:clamp(1.75rem,7.6vw,2.7rem);line-height:1.18;letter-spacing:-.7px;margin-block:17px;}
  html[lang=en] .xj-hero__label {font-size:.75rem;letter-spacing:.6px;}
}
@media(prefers-reduced-motion:reduce) {.xj-hero__cta{transition:none}.xj-hero__cta:hover{transform:none}}
@media(prefers-reduced-motion:reduce) {.xj-hero__cta--secondary::before,.xj-hero__cta--secondary::after{animation:none}}