/* Focused local finish for VIP and the beginner guide. Load after site.css. */

/* A distinct gold-framed offer; the lettering itself never shimmers. */
.lp-vip {
  isolation: isolate;
  border: 2px solid transparent;
  border-radius: 18px;
  padding: clamp(30px, 5vw, 68px);
  background:
    radial-gradient(ellipse at 95% 0%, #84502042, transparent 55%) padding-box,
    linear-gradient(132deg, #30131d, #1a0d14 55%, #2c141d) padding-box,
    linear-gradient(115deg, #98602a, #f3d296 24%, #b17b3f 46%, #ffe7af 68%, #926030) border-box;
  box-shadow: 0 24px 65px #0007, 0 0 38px #be86322e, inset 0 0 65px #cb94300c;
}
.lp-vip:hover {
  border-color: transparent;
  box-shadow: 0 24px 65px #0008, 0 0 45px #d7a74b45, inset 0 0 65px #cb943013;
}
.lp-vip > * { position: relative; z-index: 1; }
.lp-vip::before {
  content: '';
  position: absolute;
  z-index: 2;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: linear-gradient(115deg, transparent 30%, #ffe8b2 47%, #fff1cb 51%, transparent 65%);
  background-size: 260% 100%;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  animation: lp-vip-border-light 11s ease-in-out infinite;
}
.lp-vip::after {
  content: '';
  position: absolute;
  z-index: 0;
  top: -15%;
  bottom: -15%;
  left: -60%;
  width: 34%;
  background: linear-gradient(90deg, transparent, #e8bb5924 48%, #ffe7aa2e 52%, transparent);
  transform: skewX(-18deg);
  pointer-events: none;
  animation: lp-vip-surface-light 11s ease-in-out infinite;
}
@keyframes lp-vip-border-light {
  0%, 62% { background-position: 160% 0; opacity: .18; }
  70% { opacity: .95; }
  88%, 100% { background-position: -80% 0; opacity: .18; }
}
@keyframes lp-vip-surface-light {
  0%, 62% { left: -60%; opacity: 0; }
  66% { opacity: 1; }
  87% { left: 140%; opacity: 1; }
  88%, 100% { left: 140%; opacity: 0; }
}
.lp-vip .lp-kicker {
  display: inline-block;
  padding: 7px 12px;
  border: 1px solid #c69b635e;
  background: #a66b2624;
  color: #efcb90 !important;
  margin-bottom: 20px;
}
.lp-vip h2 { max-width: 900px; }
.lp-vip .lp-ticket {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 .17em;
  width: fit-content;
  max-width: 100%;
  padding: .13em .03em .21em;
  margin: 18px 0 15px;
  font: 900 clamp(68px, 10vw, 132px)/.95 Georgia, serif;
  letter-spacing: -.035em;
  background: linear-gradient(116deg, #b17735 3%, #f7dca3 25%, #ae702c 43%, #ffe9b1 58%, #d7a351 77%, #eac885);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 3px 1px #0e0709);
}
.lp-vip .lp-ticket small { font: 700 .3em/1.25 Consolas, monospace; letter-spacing: .17em; }
.lp-vip .lp-together { margin-bottom: 17px; color: #e7c9a3; }
.lp-vip .lp-together strong { color: #ffe1a7; }
.lp-vip .lp-vip-intro { max-width: 960px; font-size: 18px; color: #e7d6c7; }
.lp-vip ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px 22px;
  columns: auto;
  list-style: none;
  padding: 0;
  margin: 30px 0 38px;
  font-size: 18px;
}
.lp-vip li {
  position: relative;
  margin: 0;
  padding: 17px 18px 17px 44px;
  border: 1px solid #d0a46843;
  border-radius: 7px;
  background: linear-gradient(115deg, #bd853914, #4b22282c);
  color: #f0e1d1;
  line-height: 1.6;
}
.lp-vip li::before { content: '◆'; position: absolute; left: 17px; top: 20px; color: #dfb671; font-size: 10px; }
.lp-vip .lp-vip-price { color: #f3cf8f; font-size: clamp(56px, 6vw, 78px); line-height: 1.2; }
.lp-vip .lp-vip-price small { display: inline-block; color: #d4baa3; margin-left: 6px; }
.lp-vip .lp-vip-saving {
  display: inline-block;
  max-width: 100%;
  margin: 14px 0 6px;
  padding: 11px 17px;
  border: 1px solid #b78a4b66;
  border-radius: 6px;
  color: #e2cfb9;
  background: #ca98421a;
}
.lp-vip .lp-vip-saving strong { color: #ffdfa0; }
.lp-vip .lp-vip-highlight {
  border: 1px solid #ecc88a;
  border-left: 4px solid #e7bd78;
  border-radius: 9px;
  padding: clamp(23px, 3vw, 36px);
  margin: 30px 0;
  background: linear-gradient(118deg, #75432270, #52233185 62%, #29131a);
  box-shadow: 0 0 26px #c99b3524, inset 0 1px #fff0c42e;
  color: #f5e2cd;
  font-size: clamp(19px, 2vw, 24px);
  line-height: 1.65;
}
.lp-vip .lp-vip-highlight strong { margin-bottom: 9px; color: #ffe3a5; font-size: 1.12em; }
.lp-vip .lp-vip-note { margin-bottom: 0; max-width: 960px; color: #cdb4a4; }

/* Restore the guide's own hierarchy instead of displaying unstyled text blocks. */
.hl-newbie section:not(.hn-hero) > :last-child { margin-bottom: 0; }
.hl-newbie .hn-grid { gap: 22px; }
.hl-newbie .hn-grid article {
  padding: 22px;
  border: 1px solid #9d734754;
  border-top: 2px solid #b88b53;
  border-radius: 8px;
  background: linear-gradient(135deg, #59312125, #160c1280);
}
.hl-newbie .hn-grid article > b { display: block; color: #c5965c; font: 600 12px/1.5 Consolas, monospace; margin-bottom: 14px; letter-spacing: .13em; }
.hl-newbie .hn-grid article h3 { font-size: clamp(25px, 2.4vw, 33px); }
.hl-newbie .hn-grid article p { font-size: 16px; margin-bottom: 0; }
.hl-newbie .hn-split { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.2fr); gap: clamp(25px, 5vw, 68px); }
.hl-newbie .hn-split blockquote { margin: 28px 0 0; padding: 22px 25px; border-left: 2px solid #d0a163; background: #5d282c40; font: italic 24px/1.55 Georgia, serif; color: #e8c898; }
.hl-newbie .hn-question-list { list-style: none; counter-reset: reflection; padding: 0; margin: 30px 0 0; }
.hl-newbie .hn-question-list li {
  counter-increment: reflection;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: start;
  gap: 22px;
  padding: 23px 8px;
  margin: 0;
  border-top: 1px solid #b1834d59;
}
.hl-newbie .hn-question-list li:last-child { padding-bottom: 5px; }
.hl-newbie .hn-question-list li::before { content: counter(reflection, decimal-leading-zero); font: italic 31px/1.3 Georgia, serif; color: #d6aa68; }
.hl-newbie .hn-question-list p { margin: 0; padding-top: 2px; max-width: 960px; font-size: clamp(17px, 1.65vw, 21px); line-height: 1.65; color: #f0dfce; }
.hl-newbie .hn-sehnsucht { border-left: 3px solid #b48651; }
.hl-newbie section.hn-leitsatz {
  position: relative;
  padding: clamp(42px, 6vw, 76px) clamp(25px, 5vw, 64px);
  text-align: center;
  border: 1px solid #d4a465;
  background: radial-gradient(ellipse at top, #78332950, transparent 75%), linear-gradient(120deg, #381019, #1c0d14 75%);
  box-shadow: 0 22px 50px #0005, inset 0 0 42px #e0ac3b0b;
}
.hl-newbie .hn-leitsatz::before { content: ''; position: absolute; inset: 10px; border: 1px solid #b8844640; border-radius: 7px; pointer-events: none; }
.hl-newbie .hn-leitsatz blockquote { margin: 0; }
.hl-newbie .hn-leitsatz blockquote p { margin: 0 auto; padding: .1em 0 .18em; max-width: 1050px; font: italic clamp(29px, 4vw, 54px)/1.45 Georgia, serif; color: #e4c19a; }
.hl-newbie .hn-leitsatz strong { font-weight: 400; background: var(--metal); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; padding: .05em .05em .16em 0; }
.hl-newbie .hn-leitsatz cite { display: inline-block; margin-top: 24px; padding-top: 15px; border-top: 1px solid #c89c5d75; font: 14px/1.6 'Segoe UI', sans-serif; letter-spacing: .07em; color: #d3b391; }
.hl-newbie .hn-path ol { display: block; list-style: none; padding: 0; margin: 28px 0 0; }
.hl-newbie .hn-path li { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 22px; padding: 25px 8px; margin: 0; border-top: 1px solid #b1834d59; }
.hl-newbie .hn-path li > b { font: italic 31px/1.3 Georgia, serif; color: #d6aa68; }
.hl-newbie .hn-path li h3 { font-size: clamp(26px, 2.5vw, 33px); }
.hl-newbie .hn-path li p { margin-bottom: 0; }
.hl-newbie .hn-next .hn-grid a { display: flex; flex-direction: column; gap: 11px; padding: 24px; border: 1px solid #a1784e; border-radius: 8px; background: #4d242525; text-decoration: none; transition: border-color .2s, background-color .2s; }
.hl-newbie .hn-next .hn-grid a:hover { border-color: #e3bc7c; background-color: #82542430; }
.hl-newbie .hn-next .hn-grid b { font: 700 11px/1.5 Consolas, monospace; letter-spacing: .06em; color: #d6a267; }
.hl-newbie .hn-next .hn-grid strong { font: italic 27px/1.35 Georgia, serif; color: #eac88f; }
.hl-newbie .hn-next .hn-grid small { font-size: 14px; color: #cdb8a8; }
.hl-newbie .hn-age { margin-top: 28px; padding-top: 20px; border-top: 1px solid #80563360; font-size: 13px; }

@media(max-width: 1000px) {
  .hl-newbie .hn-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hl-newbie .hn-split { grid-template-columns: 1fr; gap: 10px; }
}
@media(max-width: 650px) {
  .lp-vip { padding: 30px 21px; }
  .lp-vip .lp-ticket { font-size: clamp(64px, 15vw, 90px); }
  .lp-vip .lp-vip-intro { font-size: 16px; }
  .lp-vip ul { grid-template-columns: 1fr; font-size: 16px; gap: 10px; margin: 25px 0; }
  .lp-vip li { padding: 14px 15px 14px 37px; }
  .lp-vip li::before { left: 14px; top: 17px; }
  .lp-vip .lp-vip-saving { font-size: 15px; }
  .lp-vip .lp-vip-highlight { padding: 22px 20px; font-size: 19px; }
  .hl-newbie .hn-grid { grid-template-columns: 1fr; gap: 17px; }
  .hl-newbie .hn-grid article { padding: 22px 20px; }
  .hl-newbie .hn-question-list li, .hl-newbie .hn-path li { grid-template-columns: 31px minmax(0, 1fr); gap: 13px; padding-inline: 0; }
  .hl-newbie .hn-question-list li::before, .hl-newbie .hn-path li > b { font-size: 27px; }
  .hl-newbie .hn-next .hn-grid a { padding: 21px; }
  .hl-newbie section.hn-leitsatz { padding: 40px 22px; }
  .hl-newbie .hn-split blockquote { padding: 18px 20px; font-size: 22px; }
}
body[data-motion='paused'] .lp-vip::before,
body[data-motion='paused'] .lp-vip::after { animation: none; }
body[data-motion='paused'] .lp-vip::before { opacity: .2; }
body[data-motion='paused'] .lp-vip::after { opacity: 0; }
@media(prefers-reduced-motion: reduce) {
  .lp-vip::before, .lp-vip::after { animation: none; }
  .lp-vip::before { opacity: .2; }
  .lp-vip::after { opacity: 0; }
}