/* A stable community statement below the changing method line. */
.why-section .why-text .display-title>.hero-community-note{display:block;grid-column:2;grid-row:3;margin-top:18px;font:400 16px/1.5 Apparat,Arial,sans-serif;letter-spacing:normal;color:var(--muted,#686868);overflow-wrap:break-word}
html[data-site-theme="dark"] .why-section .why-text .display-title>.hero-community-note{color:#a4a4a4}
@media(max-width:900px){.why-section .why-text .display-title>.hero-community-note{grid-column:1/-1;font-size:15px;margin-top:16px}}

/* Refinements on the selected v267 layout. */
.hero-rotating-line .hero-word-accent{display:inline;position:relative;color:var(--ink,#131313);font:inherit!important;letter-spacing:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.14em;animation:hero-word-focus .65s ease .2s both}
.hero-rotating-line .hero-word-accent.is-struck{text-decoration:line-through;color:inherit}
@keyframes hero-word-focus{from{opacity:.35;text-decoration-color:transparent}to{opacity:1;text-decoration-color:currentColor}}
.why-section .why-text .display-title>.hero-rule-frame{display:none}
@media(min-width:901px){
 .why-section>.why-copy>.why-text>.display-title{grid-template-columns:146px minmax(0,1fr)}
 .why-section>.why-copy>.why-text>.display-title>.hero-title-logo{width:132px}
 .why-section>.why-copy>.why-text>.display-title::before,.why-section>.why-copy>.why-text>.display-title::after{display:none}
 .why-section>.why-copy>.why-text>.display-title>.hero-rule-frame{display:block;position:absolute;margin:0;padding:0;width:var(--hero-rule-width,0px);height:var(--hero-rule-height,0px);pointer-events:none;--quote-rule:#888;background:linear-gradient(var(--quote-rule),var(--quote-rule)) left top/22px 1px no-repeat,linear-gradient(var(--quote-rule),var(--quote-rule)) left top/1px 22px no-repeat,linear-gradient(var(--quote-rule),var(--quote-rule)) right bottom/22px 1px no-repeat,linear-gradient(var(--quote-rule),var(--quote-rule)) right bottom/1px 22px no-repeat;transition:width .55s ease,height .55s ease,top .55s ease}
 html[data-site-theme="dark"] .why-section>.why-copy>.why-text>.display-title>.hero-rule-frame{--quote-rule:#999}
 .why-brand>.hero-europe-map{translate:0 35px}
}
@media(max-width:900px){.why-section .why-text .display-title>.hero-rotating-line{padding:10px 12px;background:linear-gradient(#888,#888) left top/18px 1px no-repeat,linear-gradient(#888,#888) left top/1px 18px no-repeat,linear-gradient(#888,#888) right bottom/18px 1px no-repeat,linear-gradient(#888,#888) right bottom/1px 18px no-repeat}}
@media(prefers-reduced-motion:reduce){.hero-rotating-line .hero-word-accent{animation:none}.why-section>.why-copy>.why-text>.display-title>.hero-rule-frame{transition:none}}

/* The decoration uses the whole heading as its coordinate space. */
.why-section>.why-copy>.why-text>.display-title>.hero-rule-frame{grid-column:1/-1!important;grid-row:1/-1!important;align-self:start;justify-self:start;transform:none}
.hero-rotating-line .hero-word-accent:not(.is-struck){text-underline-offset:.25em;text-decoration-skip-ink:none}

/* Give the quotation a clear inset and equal corner clearances. */
.why-section>.why-copy>.why-text>.display-title{position:relative}
.why-section>.why-copy>.why-text>.display-title>.hero-rotating-line{margin-top:26px;padding:4px 14px 10px;box-sizing:border-box;min-width:0;max-width:100%;line-height:1.14;background:none;text-wrap:pretty}
.why-section>.why-copy>.why-text>.display-title>.hero-community-note{margin-top:26px;line-height:1.55}
.why-section>.why-copy>.why-text>.display-title>.hero-rule-frame{display:block;position:absolute;grid-column:1/-1!important;grid-row:1/-1!important;margin:0;padding:0;width:var(--hero-rule-width,0px);height:var(--hero-rule-height,0px);pointer-events:none;--quote-rule:#969696;background:linear-gradient(var(--quote-rule),var(--quote-rule)) left top/18px 1px no-repeat,linear-gradient(var(--quote-rule),var(--quote-rule)) left top/1px 18px no-repeat,linear-gradient(var(--quote-rule),var(--quote-rule)) right bottom/18px 1px no-repeat,linear-gradient(var(--quote-rule),var(--quote-rule)) right bottom/1px 18px no-repeat;transition:width .45s ease,height .45s ease,top .45s ease}
html[data-site-theme="dark"] .why-section>.why-copy>.why-text>.display-title>.hero-rule-frame{--quote-rule:#888}
@media(max-width:900px){.why-section>.why-copy>.why-text>.display-title>.hero-rotating-line{margin-top:24px;padding:6px 14px 12px;font-size:clamp(24px,4.2vw,34px);line-height:1.2}.why-section>.why-copy>.why-text>.display-title>.hero-community-note{font-size:14px;margin-top:24px}}
@media(prefers-reduced-motion:reduce){.why-section>.why-copy>.why-text>.display-title>.hero-rule-frame{transition:none}}

/* Center the map on the existing button anchor without moving the button. */
@media(min-width:901px){
 .why-section>.why-copy>.why-brand>.hero-europe-map{top:0;left:50%;translate:none;transform:translate(-50%,-50%)}
}

/* Give the quotation more horizontal room and anchor its logo to its text. */
@media(min-width:901px){
 .why-section>.why-copy{row-gap:56px;min-height:464px;padding-bottom:24px}
 .why-section>.why-copy>.why-text>.display-title{grid-column:1/4;max-width:920px;grid-template-columns:132px minmax(0,1fr);column-gap:26px;align-items:start}
 .why-section>.why-copy>.why-text>.display-title>span:first-of-type{grid-column:2;grid-row:1}
 .why-section>.why-copy>.why-text>.display-title>.hero-rotating-line{grid-column:2;grid-row:2;margin-top:30px;text-wrap:wrap}
 .why-section>.why-copy>.why-text>.display-title>.hero-title-logo{position:absolute;grid-column:1/-1;grid-row:1/-1;left:0;top:var(--hero-logo-top,76px);width:120px;height:auto;margin:0;align-self:start;justify-self:start}
 .why-section>.why-copy>.why-brand>.hero-europe-map{top:0;left:50%;translate:none;transform:translate(-50.36%,-47.93%)}
}
@media(min-width:901px) and (max-width:1100px){
 .why-section>.why-copy>.why-text>.display-title{grid-template-columns:112px minmax(0,1fr);column-gap:22px;font-size:28px}
 .why-section>.why-copy>.why-text>.display-title>.hero-title-logo{width:104px}
}


/* The community statement connects directly to its invitation control. */
.why-section>.why-copy>.why-text>.display-title>.hero-community-note{display:grid;grid-template-columns:minmax(0,390px) minmax(24px,1fr) auto;align-items:center;gap:0;margin-top:22px;padding-left:14px;max-width:none;box-sizing:border-box;font-size:18px;line-height:1.5;letter-spacing:normal}
.hero-community-copy{display:block;min-width:0;padding-right:20px}
.hero-community-copy>.hero-community-main,.hero-community-copy>.hero-community-detail{display:block;font:inherit;letter-spacing:inherit}
.hero-community-copy>.hero-community-main{color:var(--ink,#131313)}
.hero-community-copy>.hero-community-detail{color:var(--muted,#686868);font-size:16px;margin-top:3px}
.hero-community-note .hero-community-platform{color:var(--ink,#131313);white-space:nowrap}
.hero-community-connector{display:block!important;position:relative;height:1px;background:#aaa;width:100%;margin:0}
.hero-community-join{display:inline-flex;align-items:center;justify-content:space-between;gap:18px;min-height:46px;padding:10px 14px;border:1px solid var(--ink,#131313);color:var(--ink,#131313);background:var(--paper,#ececec);font:400 15px/1.2 Apparat,Arial,sans-serif;letter-spacing:normal;text-decoration:none;box-sizing:border-box;white-space:nowrap;transition:background .2s ease,color .2s ease}
.hero-community-join:hover,.hero-community-join:focus-visible{background:var(--ink,#131313);color:var(--paper,#ececec);outline:none}
html[data-site-theme="dark"] .hero-community-copy>.hero-community-main,html[data-site-theme="dark"] .hero-community-note .hero-community-platform{color:#ededed}
html[data-site-theme="dark"] .hero-community-copy>.hero-community-detail{color:#a4a4a4}
html[data-site-theme="dark"] .hero-community-connector{background:#666}
@media(min-width:901px){
 .why-section>.why-copy>.why-brand>.hero-europe-map{opacity:.15;mask-image:none}
 html[data-site-theme="dark"] .why-section>.why-copy>.why-brand>.hero-europe-map{opacity:.26}
}
@media(max-width:1100px){
 .why-section>.why-copy>.why-text>.display-title>.hero-community-note{font-size:16px}
 .hero-community-copy>.hero-community-detail{font-size:14px}
 .hero-community-copy{padding-right:14px}
 .hero-community-join{gap:12px;font-size:14px;padding:10px 12px}
}
@media(max-width:600px){
 .why-section>.why-copy>.why-text>.display-title>.hero-community-note{grid-template-columns:minmax(0,1fr) 28px auto;margin-top:20px;padding-left:14px;row-gap:14px}
 .hero-community-copy{grid-column:1/-1;padding-right:0;max-width:420px}
 .hero-community-connector{grid-column:1/3}
 .hero-community-join{grid-column:3;min-height:44px}
}

/* Raise only the map; the Program button retains its current anchor. */
@media(min-width:901px){.why-section>.why-copy>.why-brand>.hero-europe-map{top:clamp(-70px,-4vw,-40px)}}

/* Trace the connector from the actual Discord word to the invitation border. */
.why-section>.why-copy>.why-text>.display-title>.hero-community-note{position:relative}
.hero-community-connector{visibility:hidden}
.hero-community-wire{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;fill:none;stroke:#aaa;stroke-width:1}
.hero-community-wire path{vector-effect:non-scaling-stroke}
.hero-community-join{position:relative;z-index:1}
html[data-site-theme="dark"] .hero-community-wire{stroke:#666}
@media(min-width:901px){.why-section>.why-copy>.why-brand>.hero-europe-map{top:calc(clamp(-70px,-4vw,-40px) + 30px)}}

/* Align the invitation's center with the Discord connector without shifting the text. */
@media(min-width:601px){.hero-community-join{transform:translateY(var(--community-button-offset,0px))}}

/* The invitation arrow follows the button's foreground in both themes. */
.why-section .display-title .hero-community-join>span{color:inherit}

/* Fill the open desktop column toward its upper-left edge, keeping the CTA anchor. */
@media(min-width:1321px){
 .why-section>.why-copy>.why-brand>.hero-europe-map{
  width:clamp(1148px,min(81.2vw,calc(247.8svh - 294px)),1568px);
  transform:translate(-57.5%,-47.93%);
 }
}

/* Keep the opening statement readable and its mark aligned at each breakpoint. */
.why-section>.why-copy>.why-text>.display-title>.hero-title-logo{transition:top .45s ease}
@media(max-width:900px){
 .why-section>.why-copy>.why-text>.display-title{display:grid;grid-template-columns:76px minmax(0,1fr);column-gap:14px;font-size:clamp(26px,3.8vw,34px);line-height:1.15;max-width:100%}
 .why-section>.why-copy>.why-text>.display-title>span:first-of-type{grid-column:1/-1;grid-row:1}
 .why-section>.why-copy>.why-text>.display-title>.hero-rotating-line{grid-column:2;grid-row:2;font-size:clamp(22px,3.2vw,28px);line-height:1.3;margin-top:28px;padding:4px 14px 10px;text-wrap:wrap;overflow-wrap:break-word}
 .why-section>.why-copy>.why-text>.display-title>.hero-title-logo{display:block;position:absolute;grid-column:1/-1;grid-row:1/-1;left:0;top:var(--hero-logo-top,90px);width:72px;height:auto;margin:0;clip-path:inset(0 0 14% 0)}
 .why-section>.why-copy>.why-text>.display-title>.hero-community-note{grid-column:1/-1;grid-row:3;margin-top:28px;padding-left:0}
 html[data-site-theme="dark"] .why-section>.why-copy>.why-text>.display-title>.hero-title-logo{filter:invert(1)}
}
@media(max-width:600px){
 .why-section>.why-copy>.why-text>.display-title{grid-template-columns:56px minmax(0,1fr);column-gap:8px;font-size:clamp(25px,6.4vw,30px)}
 .why-section>.why-copy>.why-text>.display-title>.hero-title-logo{width:52px}
 .why-section>.why-copy>.why-text>.display-title>.hero-rotating-line{font-size:clamp(19px,4.8vw,23px);line-height:1.3;margin-top:24px;padding-left:12px;padding-right:12px}
}
@media(prefers-reduced-motion:reduce){.why-section>.why-copy>.why-text>.display-title>.hero-title-logo{transition:none}}