html {
box-sizing: border-box
}

*,
::before,
::after {
box-sizing: inherit
}

body {
margin: 0;
min-height: 100dvh;
overflow-x: hidden
}

.brand-strip {
background-color: #186EE9;
padding: 8px 0
}

.brand-strip__pod {
max-width: 1140px;
margin: 0 auto;
padding: 0 24px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px
}

.brand-strip__contact-deck {
display: flex;
align-items: center;
gap: 24px
}

.brand-strip__contact-link {
display: flex;
align-items: center;
gap: 8px;
color: #fff;
text-decoration: none;
font-family: 'Inter', sans-serif;
font-size: 14px;
line-height: 1.5;
transition: color .15s ease-out;
clip-path: inset(0 0 0 0)
}

.brand-strip__contact-link:hover {
color: #EFFA4F;
clip-path: inset(-2px -2px -2px -2px)
}

.brand-strip__contact-link:focus {
outline: 2px solid #EFFA4F;
outline-offset: 2px;
text-decoration: underline
}

.brand-strip__contact-link .pe-7s-mail,
.brand-strip__contact-link .pe-7s-phone {
font-size: 17px
}

.brand-strip__label {
font-family: 'Inter', sans-serif;
font-size: 14px;
line-height: 1.5;
color: #EFFA4F;
letter-spacing: .08em;
text-transform: uppercase;
font-weight: 700
}

.top-bar {
background-color: #EDECEB;
border-bottom: 1px solid #d6d4d2;
padding: 0
}

.top-bar__pod {
max-width: 1140px;
margin: 0 auto;
padding: 0 24px;
display: flex;
align-items: stretch;
justify-content: flex-end
}

.top-bar__menu {
display: flex;
align-items: stretch;
list-style: none;
margin: 0;
padding: 0;
gap: 0
}

.top-bar__item {
display: flex;
align-items: stretch
}

.top-bar__link {
display: flex;
align-items: center;
padding: 8px 24px;
font-family: 'Inter', sans-serif;
font-size: 14px;
line-height: 1.5;
color: #2a2a2a;
text-decoration: none;
font-weight: 400;
transition: color .12s ease-out, background-color .18s ease-out;
clip-path: inset(0 0 0 0);
position: relative
}

.top-bar__link::after {
content: '';
position: absolute;
bottom: 0;
left: 24px;
right: 24px;
height: 2px;
background-color: #186EE9;
transform: scaleX(0);
transition: transform .18s ease-out
}

.top-bar__link:hover {
color: #186EE9;
background-color: #fff;
clip-path: inset(-1px -1px 0 -1px)
}

.top-bar__link:hover::after {
transform: scaleX(1)
}

.top-bar__link:focus {
outline: none;
text-decoration: underline;
color: #186EE9
}

.top-bar__link[aria-current="page"] {
color: #186EE9;
font-weight: 700
}

.top-bar__link[aria-current="page"]::after {
transform: scaleX(1)
}

.identity-deck {
background-color: #fff;
padding: 40px 0;
box-shadow: 1px 6px 28px -2px #186ee91c
}

.identity-deck__pod {
max-width: 1140px;
margin: 0 auto;
padding: 0 24px;
display: flex;
align-items: center;
gap: 24px
}

.identity-deck__logo-cell {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
background-color: #fff;
border-radius: 2px;
box-shadow: 1px 1px 6px -2px #186ee912 1px 6px 28px -2px #186ee91c;
padding: 8px
}

.identity-deck__logo-cell img {
width: 100%;
height: 100%;
object-fit: contain;
display: block
}

.identity-deck__text-cell {
display: flex;
flex-direction: column;
gap: 0
}

.identity-deck__brand-name {
font-family: 'Source Serif Pro', serif;
font-size: 38px;
line-height: 1.2;
font-weight: 700;
color: #1a2a4a;
letter-spacing: -.01em;
margin: 0
}

.identity-deck__brand-name span {
color: #186EE9
}

.identity-deck__tagline {
font-family: 'Inter', sans-serif;
font-size: 14px;
line-height: 1.5;
color: #5a5a5a;
margin: 0;
font-weight: 400
}

.identity-deck__accent-bar {
flex: 1;
height: 3px;
background-color: #EFFA4F;
border-radius: 2px;
margin-left: 40px;
align-self: center
}

@media (max-width: 640px) {
.brand-strip__pod {
flex-direction: column;
align-items: flex-start;
gap: 8px
}

.top-bar__link {
padding: 8px;
font-size: 14px
}

.identity-deck__brand-name {
font-size: 28px
}

.identity-deck__accent-bar {
display: none
}

.identity-deck__pod {
gap: 8px
}
}

@media (max-width: 360px) {
.brand-strip__contact-deck {
flex-direction: column;
align-items: flex-start;
gap: 8px
}

.top-bar__menu {
flex-wrap: wrap
}

.identity-deck__brand-name {
font-size: 28px
}
}

.ground-footer {
background-color: #1a2a4a;
padding: 80px 0 40px
}

.ground-footer__pod {
max-width: 1140px;
margin: 0 auto;
padding: 0 24px
}

.ground-footer__grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 40px;
padding-bottom: 40px;
border-bottom: 1px solid #edeceb26
}

.ground-footer__identity-cell {
display: flex;
flex-direction: column;
gap: 24px
}

.ground-footer__logo-cell {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
background-color: #fff;
border-radius: 2px;
box-shadow: 1px 1px 6px -2px #effa4f12 1px 6px 28px -2px #effa4f1c;
padding: 8px
}

.ground-footer__logo-cell img {
width: 100%;
height: 100%;
object-fit: contain;
display: block
}

.ground-footer__brand-name {
font-family: 'Source Serif Pro', serif;
font-size: 28px;
line-height: 1.2;
font-weight: 700;
color: #fff;
margin: 0
}

.ground-footer__brand-name span {
color: #EFFA4F
}

.ground-footer__about-text {
font-family: 'Inter', sans-serif;
font-size: 14px;
line-height: 1.75;
color: #b0b8c8;
margin: 0
}

.ground-footer__contact-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 8px
}

.ground-footer__contact-item {
display: flex;
align-items: center;
gap: 8px
}

.ground-footer__contact-item a {
font-family: 'Inter', sans-serif;
font-size: 14px;
line-height: 1.5;
color: #b0b8c8;
text-decoration: none;
transition: color .15s ease-out
}

.ground-footer__contact-item a:hover {
color: #EFFA4F
}

.ground-footer__contact-item a:focus {
text-decoration: underline;
color: #EFFA4F
}

.ground-footer__contact-item .pe-7s-mail,
.ground-footer__contact-item .pe-7s-phone {
color: #186EE9;
font-size: 17px;
flex-shrink: 0
}

.ground-footer__column-heading {
font-family: 'Inter', sans-serif;
font-size: 14px;
line-height: 1.5;
font-weight: 700;
color: #EFFA4F;
letter-spacing: .08em;
text-transform: uppercase;
margin: 0 0 24px
}

.ground-footer__link-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 8px
}

.ground-footer__link-list a {
font-family: 'Inter', sans-serif;
font-size: 17px;
line-height: 1.75;
color: #b0b8c8;
text-decoration: none;
transition: color .15s ease-out;
clip-path: inset(0 0 0 0);
display: inline-block
}

.ground-footer__link-list a:hover {
color: #fff;
clip-path: inset(-1px -1px -1px -1px)
}

.ground-footer__link-list a:focus {
text-decoration: underline;
color: #fff
}

.ground-footer__bottom {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
padding-top: 40px;
flex-wrap: wrap
}

.ground-footer__copyright {
font-family: 'Inter', sans-serif;
font-size: 14px;
line-height: 1.5;
color: #6a7a8a;
margin: 0
}

.ground-footer__legal-list {
display: flex;
align-items: center;
gap: 24px;
list-style: none;
margin: 0;
padding: 0;
flex-wrap: wrap
}

.ground-footer__legal-list a {
font-family: 'Inter', sans-serif;
font-size: 14px;
line-height: 1.5;
color: #6a7a8a;
text-decoration: none;
transition: color .15s ease-out
}

.ground-footer__legal-list a:hover {
color: #EFFA4F
}

.ground-footer__legal-list a:focus {
text-decoration: underline;
color: #EFFA4F
}

@media (max-width: 1024px) {
.ground-footer__grid {
grid-template-columns: 1fr 1fr
}

.ground-footer__identity-cell {
grid-column: 1 / -1
}
}

@media (max-width: 640px) {
.ground-footer__grid {
grid-template-columns: 1fr
}

.ground-footer__identity-cell {
grid-column: auto
}

.ground-footer__bottom {
flex-direction: column;
align-items: flex-start
}
}

.cookie-bar {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 2000;
background-color: #fff;
box-shadow: 1px 10px 48px -2px #186ee921;
display: none
}

.cookie-bar__pod {
max-width: 1140px;
margin: 0 auto;
padding: 24px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
flex-wrap: wrap
}

.cookie-bar__text {
font-family: 'Inter', sans-serif;
font-size: 14px;
line-height: 1.75;
color: #2a2a2a;
margin: 0;
flex: 1;
min-width: 200px
}

.cookie-bar__actions {
display: flex;
align-items: center;
gap: 24px;
flex-shrink: 0
}

.cookie-bar__accept {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 8px 24px;
background-color: transparent;
border: 2px solid #186EE9;
border-radius: 2px;
font-family: 'Inter', sans-serif;
font-size: 14px;
line-height: 1.5;
font-weight: 700;
color: #186EE9;
cursor: pointer;
transition: background-color .18s ease-out, color .18s ease-out;
position: relative;
overflow: hidden
}

.cookie-bar__accept:hover {
background-color: #186EE9;
color: #fff
}

.cookie-bar__accept:focus {
outline: 2px solid #186EE9;
outline-offset: 2px
}

.cookie-bar__decline {
background: none;
border: none;
font-family: 'Inter', sans-serif;
font-size: 14px;
line-height: 1.5;
color: #5a5a5a;
cursor: pointer;
text-decoration: underline;
padding: 0;
transition: color .15s ease-out
}

.cookie-bar__decline:hover {
color: #186EE9
}

.cookie-bar__decline:focus {
outline: 2px solid #186EE9;
outline-offset: 2px
}

@media (max-width: 640px) {
.cookie-bar__pod {
flex-direction: column;
align-items: flex-start
}

.cookie-bar__actions {
width: 100%;
justify-content: flex-start
}
}

.terms-info {
max-width: 1140px;
margin: 0 auto;
padding: 80px 40px
}

.terms-info p {
font-size: 17px;
line-height: 1.75;
margin-bottom: 24px;
color: #2a2a2a
}

.terms-info ul,
.terms-info ol {
margin-bottom: 24px;
padding-left: 40px
}

.terms-info ul {
list-style: none;
padding-left: 24px
}

.terms-info ol {
list-style: decimal
}

.terms-info ul li {
position: relative;
padding-left: 24px;
font-size: 17px;
line-height: 1.75;
margin-bottom: 8px;
color: #2a2a2a
}

.terms-info ul li::before {
content: "";
position: absolute;
left: 0;
top: 11px;
width: 8px;
height: 2px;
background-color: #186EE9;
border-radius: 2px
}

.terms-info ol li {
font-size: 17px;
line-height: 1.75;
margin-bottom: 8px;
color: #2a2a2a;
padding-left: 8px
}

.terms-info ul ul,
.terms-info ol ol,
.terms-info ul ol,
.terms-info ol ul {
margin-top: 8px;
margin-bottom: 8px
}

.terms-info em,
.terms-info i {
font-style: italic;
color: #186EE9
}

.terms-info a {
color: #186EE9;
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
transition: color .15s ease-out, text-decoration-color .2s ease-out
}

.terms-info a:hover {
color: #0f4faa;
text-decoration-color: #EFFA4F
}

.terms-info a:visited {
color: #186EE9
}

.terms-info table {
width: 100%;
border-collapse: collapse;
margin-bottom: 40px;
font-size: 14px;
line-height: 1.5;
box-shadow: 1px 6px 28px -2px #186ee91c;
border-radius: 2px;
overflow: hidden
}

.terms-info thead {
background-color: #186EE9
}

.terms-info thead th {
color: #fff;
font-size: 14px;
line-height: 1.5;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .06em;
padding: 24px;
text-align: left;
border: none
}

.terms-info tbody tr {
border-bottom: 1px solid #EDECEB;
transition: background-color .15s ease-out
}

.terms-info tbody tr:last-child {
border-bottom: none
}

.terms-info tbody tr:hover {
background-color: #effa4f1f
}

.terms-info tbody tr:nth-child(even) {
background-color: #edeceb66
}

.terms-info tbody tr:nth-child(even):hover {
background-color: #effa4f1f
}

.terms-info td {
padding: 24px;
font-size: 17px;
line-height: 1.75;
color: #2a2a2a;
vertical-align: top;
border: none;
border-right: 1px solid #EDECEB
}

.terms-info td:last-child {
border-right: none
}

.terms-info th:last-child {
border-right: none
}

.terms-info thead th {
border-right: 1px solid #fff3
}

@media (max-width: 1024px) {
.terms-info {
padding: 80px 40px
}
}

@media (max-width: 640px) {
.terms-info {
padding: 40px 24px
}

.terms-info p {
font-size: 17px
}

.terms-info ul li,
.terms-info ol li {
font-size: 17px
}

.terms-info table {
display: block;
overflow-x: auto;
-webkit-overflow-scrolling: touch
}

.terms-info thead th,
.terms-info td {
padding: 24px 8px;
font-size: 14px
}
}

@media (max-width: 360px) {
.terms-info {
padding: 40px 8px
}

.terms-info ul {
padding-left: 8px
}

.terms-info ol {
padding-left: 24px
}
}

.guides-detail {
max-width: 100%;
overflow-x: hidden
}

.guides-detail .article-frame {
max-width: 1140px;
margin: 0 auto;
padding: 0 24px
}

.guides-detail .geo-bg {
position: absolute;
border-radius: 2px;
pointer-events: none;
z-index: 0
}

.guides-detail .post-lead {
position: relative;
padding: 80px 24px 40px;
background: #fff;
text-align: center;
overflow: hidden
}

.guides-detail .post-lead__blobs {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
overflow: hidden
}

.guides-detail .post-lead__blob {
position: absolute;
border-radius: 40px;
filter: blur(48px);
opacity: .18
}

.guides-detail .post-lead__blob--a {
width: 320px;
height: 220px;
background: #EFFA4F;
top: -60px;
left: -80px;
animation: blob-rotate 18s linear infinite
}

.guides-detail .post-lead__blob--b {
width: 260px;
height: 180px;
background: #186EE9;
bottom: -40px;
right: -60px;
animation: blob-rotate 24s linear infinite reverse
}

@keyframes blob-rotate {
0% {
transform: rotate(0deg) scale(1)
}

50% {
transform: rotate(180deg) scale(1.08)
}

100% {
transform: rotate(360deg) scale(1)
}
}

.guides-detail .post-lead__inner {
position: relative;
z-index: 1;
max-width: 720px;
margin: 0 auto
}

.guides-detail .post-lead__tag {
display: inline-block;
background: #EFFA4F;
color: #111;
font-size: 14px;
line-height: 1.2;
letter-spacing: .08em;
text-transform: uppercase;
padding: 8px 24px;
border-radius: 2px;
margin-bottom: 24px;
font-weight: 700
}

.guides-detail .post-lead__heading {
font-size: 38px;
line-height: 1.2;
color: #111;
margin: 0 0 24px;
font-weight: 800
}

.guides-detail .post-lead__sub {
font-size: 17px;
line-height: 1.75;
color: #444;
margin: 0 0 24px
}

.guides-detail .post-lead__meta {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 24px;
flex-wrap: wrap;
margin-bottom: 40px
}

.guides-detail .post-lead__meta-item {
display: flex;
flex-direction: row;
align-items: center;
gap: 8px;
font-size: 14px;
line-height: 1.5;
color: #555
}

.guides-detail .post-lead__meta-item svg {
flex-shrink: 0
}

.guides-detail .post-lead__actions {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 24px;
flex-wrap: wrap;
margin-bottom: 40px
}

.guides-detail .btn-print {
display: inline-flex;
align-items: center;
gap: 8px;
background: #fff;
color: #186EE9;
border: 2px solid #186EE9;
border-radius: 2px;
font-size: 14px;
line-height: 1.5;
padding: 8px 24px;
cursor: pointer;
transition: background .5s ease-out, color .5s ease-out, clip-path .15s ease;
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
font-weight: 600
}

.guides-detail .btn-print:hover {
background: #186EE9;
color: #fff;
clip-path: polygon(0 0, 100% 0, 98% 100%, 2% 100%)
}

.guides-detail .btn-print:focus {
outline: 3px solid #EFFA4F;
outline-offset: 2px
}

.guides-detail .post-lead__image-wrap {
position: relative;
border-radius: 2px;
overflow: hidden;
max-width: 820px;
margin: 0 auto;
box-shadow: 1px 10px 48px -2px #186ee921
}

.guides-detail .post-lead__image-wrap img {
width: 100%;
height: auto;
display: block;
object-fit: cover;
animation: slow-zoom 20s ease-in-out infinite alternate
}

@keyframes slow-zoom {
0% {
transform: scale(1)
}

100% {
transform: scale(1.06)
}
}

.guides-detail .post-lead__image-gradient {
position: absolute;
inset: 0;
background: linear-gradient(to left, #ffffff8c 0%, #fff0 55%);
pointer-events: none
}

.guides-detail .divider-chevron {
width: 100%;
line-height: 0;
overflow: hidden
}

.guides-detail .divider-chevron svg {
display: block;
width: 100%
}

.guides-detail .post-body {
position: relative;
background: #EDECEB;
padding: 80px 24px
}

.guides-detail .post-body__scanlines {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
overflow: hidden
}

.guides-detail .post-body__scanline-track {
position: absolute;
top: -100%;
left: 0;
width: 100%;
height: 200%;
background: repeating-linear-gradient(to bottom, transparent 0px, transparent 18px, #186ee90a 18px, #186ee90a 20px);
animation: scanline-drift 14s linear infinite
}

@keyframes scanline-drift {
0% {
transform: translateY(0)
}

100% {
transform: translateY(50%)
}
}

.guides-detail .post-body__layout {
position: relative;
z-index: 1;
max-width: 1140px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 320px;
gap: 80px;
align-items: start
}

.guides-detail .post-body__text {
min-width: 0
}

.guides-detail .post-body__text p {
font-size: 17px;
line-height: 1.75;
color: #222;
margin: 0 0 24px
}

.guides-detail .post-body__text h2 {
font-size: 28px;
line-height: 1.2;
color: #111;
margin: 40px 0 24px;
padding-bottom: 8px;
border-bottom: 2px solid #186EE9;
display: inline-block
}

.guides-detail .post-body__text h4 {
font-size: 17px;
line-height: 1.5;
color: #111;
margin: 24px 0 8px;
font-weight: 700
}

.guides-detail .post-body__text abbr {
text-decoration: underline dotted #186EE9;
cursor: help
}

.guides-detail .post-body__text cite {
font-style: italic;
color: #333
}

.guides-detail .post-body__text time {
color: #555;
font-size: 14px
}

.guides-detail .post-body__text blockquote {
margin: 40px 0;
padding: 24px 40px;
background: #fff;
border-radius: 2px;
box-shadow: 1px 6px 28px -2px #186ee91c;
position: relative
}

.guides-detail .post-body__text blockquote::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 5px;
background: #EFFA4F;
border-radius: 2px 0 0 2px
}

.guides-detail .post-body__text a {
color: #186EE9;
text-decoration: underline;
text-underline-offset: 4px;
transition: color .45s ease-out
}

.guides-detail .post-body__text a:hover {
color: #111
}

.guides-detail .post-body__aside {
position: sticky;
top: 40px
}

.guides-detail .aside-card {
background: #fff;
border-radius: 2px;
padding: 24px;
box-shadow: inset 1px 1px 6px -2px #186ee912 1px 6px 28px -2px #186ee91c;
margin-bottom: 24px
}

.guides-detail .aside-card__label {
font-size: 14px;
line-height: 1.2;
letter-spacing: .07em;
text-transform: uppercase;
color: #186EE9;
font-weight: 700;
margin-bottom: 8px
}

.guides-detail .aside-card__value {
font-size: 17px;
line-height: 1.5;
color: #111;
font-weight: 600
}

.guides-detail .aside-card__value--large {
font-size: 28px;
line-height: 1.2;
color: #186EE9;
font-weight: 800
}

.guides-detail .aside-notch {
position: relative;
padding-left: 24px
}

.guides-detail .aside-notch::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 4px;
background: #EFFA4F;
border-radius: 2px
}

.guides-detail .pull-quote {
background: #111;
border-radius: 2px;
padding: 24px;
color: #fff;
box-shadow: 1px 10px 48px -2px #186ee921
}

.guides-detail .pull-quote__text {
font-size: 17px;
line-height: 1.75;
color: #EDECEB;
margin: 0 0 8px;
font-style: italic
}

.guides-detail .pull-quote__attr {
font-size: 14px;
line-height: 1.2;
color: #EFFA4F;
font-weight: 700
}

.guides-detail .underline-word {
position: relative;
display: inline-block
}

.guides-detail .underline-word::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 0;
height: 2px;
background: #186EE9;
animation: underline-draw .6s ease-out .4s forwards
}

@keyframes underline-draw {
to {
width: 100%
}
}

.guides-detail .divider-wave {
width: 100%;
line-height: 0;
overflow: hidden;
background: #EDECEB
}

.guides-detail .divider-wave svg {
display: block;
width: 100%
}

.guides-detail .post-quote-bg {
position: relative;
padding: 80px 24px;
background-image: url(https://images.unsplash.com/photo-1456513080510-7bf3a84b82f8?w=1400&q=80);
background-size: cover;
background-position: center
}

.guides-detail .post-quote-bg__overlay {
position: absolute;
inset: 0;
background: #edecebe0;
pointer-events: none
}

.guides-detail .post-quote-bg__geo {
position: absolute;
width: 180px;
height: 180px;
border: 2px solid #186ee926;
border-radius: 2px;
top: 40px;
right: 80px;
animation: geo-spin 30s linear infinite;
pointer-events: none
}

@keyframes geo-spin {
0% {
transform: rotate(0deg)
}

100% {
transform: rotate(360deg)
}
}

.guides-detail .post-quote-bg__inner {
position: relative;
z-index: 1;
max-width: 1140px;
margin: 0 auto
}

.guides-detail .big-quote {
margin: 0 auto 40px;
max-width: 760px;
text-align: center
}

.guides-detail .big-quote__mark {
font-size: 70px;
line-height: 1.2;
color: #186EE9;
font-weight: 900;
display: block;
margin-bottom: 8px;
opacity: .18;
line-height: .8
}

.guides-detail .big-quote__text {
font-size: 28px;
line-height: 1.5;
color: #111;
font-weight: 700;
margin: 0 0 24px
}

.guides-detail .big-quote__attr {
font-size: 14px;
line-height: 1.5;
color: #186EE9;
font-weight: 600;
letter-spacing: .06em;
text-transform: uppercase
}

.guides-detail .stats-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
max-width: 1140px;
margin: 0 auto
}

.guides-detail .stat-item {
background: #fff;
border-radius: 2px;
padding: 24px;
text-align: center;
box-shadow: 1px 1px 6px -2px #effa4f12 1px 6px 28px -2px #186ee91c;
transition: box-shadow .5s ease-out, clip-path .15s ease;
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%)
}

.guides-detail .stat-item:hover {
box-shadow: 1px 10px 48px -2px #186ee921;
clip-path: polygon(2% 0, 98% 0, 100% 100%, 0 100%)
}

.guides-detail .stat-item__number {
font-size: 38px;
line-height: 1.2;
color: #186EE9;
font-weight: 900;
display: block;
margin-bottom: 8px
}

.guides-detail .stat-item__label {
font-size: 14px;
line-height: 1.5;
color: #444
}

.guides-detail .divider-flat {
height: 2px;
background: conic-gradient(from 307deg, #EFFA4F, #186EE9, #EDECEB, #EFFA4F);
margin: 0
}

.guides-detail .post-bottom {
background: #fff;
padding: 40px 24px 80px
}

.guides-detail .post-bottom__inner {
max-width: 1140px;
margin: 0 auto
}

.guides-detail .post-bottom__row {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 24px;
flex-wrap: wrap;
padding-bottom: 40px;
border-bottom: 1px solid #EDECEB;
margin-bottom: 40px
}

.guides-detail .tag-group {
display: flex;
flex-direction: row;
gap: 8px;
flex-wrap: wrap;
align-items: center
}

.guides-detail .tag-group__label {
font-size: 14px;
line-height: 1.5;
color: #555;
font-weight: 600
}

.guides-detail .tag-pill {
display: inline-block;
background: #EDECEB;
color: #222;
font-size: 14px;
line-height: 1.5;
padding: 8px 24px;
border-radius: 40px;
font-weight: 500;
transition: background .45s ease-out, color .45s ease-out
}

.guides-detail .tag-pill:hover {
background: #186EE9;
color: #fff
}

.guides-detail .like-area {
display: flex;
flex-direction: row;
align-items: center;
gap: 8px
}

.guides-detail .like-area__count {
font-size: 17px;
line-height: 1.5;
color: #111;
font-weight: 700
}

.guides-detail .like-area__label {
font-size: 14px;
line-height: 1.5;
color: #555
}

.guides-detail .like-area__icon {
color: #186EE9
}

.guides-detail .views-area {
display: flex;
flex-direction: row;
align-items: center;
gap: 8px
}

.guides-detail .views-area__count {
font-size: 17px;
line-height: 1.5;
color: #111;
font-weight: 700
}

.guides-detail .views-area__label {
font-size: 14px;
line-height: 1.5;
color: #555
}

.guides-detail .post-bottom__cta {
display: flex;
flex-direction: row;
align-items: center;
gap: 24px;
flex-wrap: wrap
}

.guides-detail .btn-masterclass {
display: inline-flex;
align-items: center;
gap: 8px;
background: #186EE9;
color: #fff;
border: 2px solid #186EE9;
border-radius: 2px;
font-size: 17px;
line-height: 1.5;
padding: 8px 40px;
cursor: pointer;
text-decoration: none;
font-weight: 700;
transition: background .5s ease-out, color .5s ease-out, clip-path .15s ease;
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
position: relative;
overflow: hidden
}

.guides-detail .btn-masterclass:hover {
background: #111;
border-color: #111;
clip-path: polygon(0 0, 100% 0, 98% 100%, 2% 100%)
}

.guides-detail .btn-masterclass:focus {
outline: 3px solid #EFFA4F;
outline-offset: 2px
}

.guides-detail .btn-blog {
display: inline-flex;
align-items: center;
gap: 8px;
background: transparent;
color: #186EE9;
border: 2px solid #186EE9;
border-radius: 2px;
font-size: 17px;
line-height: 1.5;
padding: 8px 40px;
cursor: pointer;
text-decoration: none;
font-weight: 700;
transition: background .5s ease-out, color .5s ease-out, clip-path .15s ease;
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%)
}

.guides-detail .btn-blog:hover {
background: #186EE9;
color: #fff;
clip-path: polygon(2% 0, 98% 0, 100% 100%, 0 100%)
}

.guides-detail .btn-blog:focus {
outline: 3px solid #EFFA4F;
outline-offset: 2px
}

.guides-detail .post-bottom__note {
font-size: 14px;
line-height: 1.75;
color: #555;
max-width: 560px
}

@media (max-width: 1024px) {
.guides-detail .post-body__layout {
grid-template-columns: 1fr;
gap: 40px
}

.guides-detail .post-body__aside {
position: static
}

.guides-detail .stats-row {
grid-template-columns: repeat(2, 1fr)
}

.guides-detail .post-lead__heading {
font-size: 28px
}
}

@media (max-width: 640px) {
.guides-detail .post-lead {
padding: 40px 24px 24px
}

.guides-detail .post-lead__heading {
font-size: 28px
}

.guides-detail .stats-row {
grid-template-columns: 1fr 1fr;
gap: 8px
}

.guides-detail .post-bottom__row {
flex-direction: column;
align-items: flex-start
}

.guides-detail .big-quote__text {
font-size: 17px
}

.guides-detail .post-body {
padding: 40px 24px
}

.guides-detail .post-quote-bg {
padding: 40px 24px
}
}

@media (max-width: 360px) {
.guides-detail .stats-row {
grid-template-columns: 1fr
}

.guides-detail .post-lead__meta {
flex-direction: column;
gap: 8px
}
}

.blog-detail {
max-width: 1140px;
margin: 0 auto;
padding: 0 24px;
overflow: hidden
}

.blog-detail .post__header {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
padding: 80px 0;
position: relative;
align-items: center
}

.blog-detail .post__header-left {
padding: 40px 0 80px;
position: relative;
z-index: 1
}

.blog-detail .post__dot-grid {
position: absolute;
top: 0;
left: -24px;
right: 50%;
bottom: 0;
background-image: radial-gradient(circle, #186EE9 1px, transparent 1px);
background-size: 20px 20px;
opacity: .07;
pointer-events: none
}

.blog-detail .post__tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 24px
}

.blog-detail .post__tag {
display: inline-block;
padding: 8px 24px;
background: #EFFA4F;
color: #111;
font-size: 14px;
line-height: 1.2;
border-radius: 2px;
font-weight: 600;
letter-spacing: .08em;
text-transform: uppercase;
text-decoration: none;
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
transition: clip-path .15s ease-out, background .2s ease-out
}

.blog-detail .post__tag:hover {
clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%);
background: #186EE9;
color: #fff
}

.blog-detail .post__tag--category {
background: #EDECEB;
color: #333
}

.blog-detail .post__tag--category:hover {
background: #186EE9;
color: #fff
}

.blog-detail .post__headline {
font-size: 38px;
line-height: 1.2;
color: #111;
margin: 0 0 24px;
font-weight: 700;
position: relative;
display: inline-block
}

.blog-detail .post__headline-underline {
position: relative;
display: inline
}

.blog-detail .post__headline-underline::after {
content: '';
position: absolute;
left: 0;
bottom: -4px;
width: 100%;
height: 3px;
background: #EFFA4F;
transform: scaleX(0);
transform-origin: left;
animation: underline-draw .5s ease-out .4s forwards
}

@keyframes underline-draw {
to {
transform: scaleX(1)
}
}

.blog-detail .post__lead {
font-size: 17px;
line-height: 1.75;
color: #444;
margin: 0 0 40px
}

.blog-detail .post__image-frame {
position: relative;
border-radius: 2px;
overflow: hidden;
box-shadow: 1px 10px 48px -2px #186ee921
}

.blog-detail .post__image-frame::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: conic-gradient(from 307deg, #effa4f2e, #186ee91a, transparent 60%);
z-index: 1;
pointer-events: none
}

.blog-detail .post__image-frame::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(307deg, #b48c5040 0%, #785a3c26 40%, transparent 70%);
mix-blend-mode: multiply;
z-index: 2;
pointer-events: none
}

.blog-detail .post__image {
width: 100%;
height: 480px;
object-fit: cover;
display: block;
filter: sepia(0.2) contrast(1.05) saturate(0.9);
transition: filter .5s ease-out
}

.blog-detail .post__image-frame:hover .post__image {
filter: sepia(0.05) contrast(1.02) saturate(1.0)
}

.blog-detail .post__corner-stripe {
position: absolute;
top: 0;
right: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 0 60px 60px 0;
border-color: transparent #EFFA4F transparent transparent;
z-index: 3
}

.blog-detail .post__divider {
display: flex;
flex-direction: column;
gap: 8px;
margin: 0 0 80px
}

.blog-detail .post__divider-line {
height: 1px;
background: #EDECEB;
width: 100%
}

.blog-detail .post__divider-line--thick {
height: 3px;
background: #186EE9;
width: 80px
}

.blog-detail .post__body {
display: grid;
grid-template-columns: 1fr 320px;
gap: 80px;
align-items: start;
padding-bottom: 80px
}

.blog-detail .post__article {
min-width: 0
}

.blog-detail .post__article p {
font-size: 17px;
line-height: 1.75;
color: #333;
margin: 0 0 24px
}

.blog-detail .post__article h2 {
font-size: 28px;
line-height: 1.2;
color: #111;
margin: 40px 0 24px;
padding-bottom: 8px;
border-bottom: 2px solid #EDECEB
}

.blog-detail .post__article h3 {
font-size: 17px;
line-height: 1.5;
color: #111;
margin: 40px 0 8px;
font-weight: 700
}

.blog-detail .post__article h4 {
font-size: 14px;
line-height: 1.5;
color: #444;
margin: 24px 0 8px;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase
}

.blog-detail .post__article mark {
background: #EFFA4F;
color: #111;
padding: 0 4px;
border-radius: 2px
}

.blog-detail .post__article table {
width: 100%;
border-collapse: collapse;
margin: 24px 0 40px;
font-size: 14px;
line-height: 1.5;
box-shadow: 1px 6px 28px -2px #186ee91c;
border-radius: 2px;
overflow: hidden
}

.blog-detail .post__article caption {
font-size: 14px;
line-height: 1.5;
color: #666;
text-align: left;
padding: 0 0 8px;
font-style: italic
}

.blog-detail .post__article th {
background: #186EE9;
color: #fff;
padding: 8px 24px;
text-align: left;
font-weight: 600
}

.blog-detail .post__article td {
padding: 8px 24px;
border-bottom: 1px solid #EDECEB;
color: #333
}

.blog-detail .post__article tr:last-child td {
border-bottom: none
}

.blog-detail .post__article tr:nth-child(even) td {
background: #edeceb66
}

.blog-detail .post__article figure {
margin: 40px 0;
position: relative
}

.blog-detail .post__article figcaption {
font-size: 14px;
line-height: 1.5;
color: #666;
margin-top: 8px;
font-style: italic;
padding-left: 24px
}

.blog-detail .post__article a {
color: #186EE9;
text-decoration: underline;
text-underline-offset: 4px;
transition: color .15s ease-out
}

.blog-detail .post__article a:hover {
color: #111
}

.blog-detail .post__sidebar {
position: sticky;
top: 40px
}

.blog-detail .post__pull-quote {
background: #EDECEB;
border-radius: 2px;
padding: 40px;
margin-bottom: 40px;
position: relative;
box-shadow: inset 1px 1px 6px -2px #186ee912;
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
transition: clip-path .2s ease-out
}

.blog-detail .post__pull-quote:hover {
clip-path: polygon(0 4px, 4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%)
}

.blog-detail .post__pull-quote-text {
font-size: 17px;
line-height: 1.75;
color: #111;
font-style: italic;
margin: 0
}

.blog-detail .post__pull-quote-mark {
display: block;
width: 32px;
height: 3px;
background: #EFFA4F;
margin-bottom: 24px
}

.blog-detail .post__reading-progress {
background: #fff;
border-radius: 2px;
padding: 24px;
box-shadow: 1px 6px 28px -2px #186ee91c;
margin-bottom: 40px
}

.blog-detail .post__progress-label {
font-size: 14px;
line-height: 1.2;
color: #666;
margin: 0 0 8px;
letter-spacing: .06em;
text-transform: uppercase
}

.blog-detail .post__progress-bar {
width: 100%;
height: 6px;
background: #EDECEB;
border-radius: 2px;
overflow: hidden
}

.blog-detail .post__progress-fill {
height: 100%;
background: linear-gradient(307deg, #EFFA4F, #186EE9);
border-radius: 2px;
width: 0;
transition: width .2s ease-out
}

.blog-detail .post__mesh-card {
border-radius: 2px;
padding: 40px;
background: conic-gradient(from 307deg at 30% 70%, #186EE9 0deg, #EDECEB 90deg, #EFFA4F 180deg, #fff 270deg, #186EE9 360deg);
background-blend-mode: screen;
position: relative;
overflow: hidden;
box-shadow: 1px 10px 48px -2px #186ee921
}

.blog-detail .post__mesh-card::before {
content: '';
position: absolute;
inset: 0;
background: #ffffffbf;
pointer-events: none
}

.blog-detail .post__mesh-card-text {
position: relative;
z-index: 1;
font-size: 14px;
line-height: 1.75;
color: #222;
margin: 0 0 24px
}

.blog-detail .post__mesh-card-heading {
position: relative;
z-index: 1;
font-size: 17px;
line-height: 1.2;
color: #111;
font-weight: 700;
margin: 0 0 8px
}

.blog-detail .post__cta-link {
display: inline-block;
padding: 8px 24px;
background: #186EE9;
color: #fff;
font-size: 14px;
line-height: 1.5;
border-radius: 2px;
text-decoration: none;
font-weight: 600;
position: relative;
z-index: 1;
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
transition: clip-path .15s ease-out, background .2s ease-out;
overflow: hidden
}

.blog-detail .post__cta-link:hover {
clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%);
background: #111
}

.blog-detail .post__bottom-divider {
display: flex;
flex-direction: row;
align-items: center;
gap: 8px;
margin: 0 0 40px
}

.blog-detail .post__bottom-divider-line {
flex: 1;
height: 1px;
background: #EDECEB
}

.blog-detail .post__bottom-divider-dot {
width: 8px;
height: 8px;
border-radius: 40px;
background: #EFFA4F;
border: 2px solid #186EE9
}

.blog-detail .post__back-row {
padding: 0 0 80px
}

.blog-detail .post__back-link {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 14px;
line-height: 1.2;
color: #186EE9;
text-decoration: none;
font-weight: 600;
letter-spacing: .04em;
transition: color .15s ease-out
}

.blog-detail .post__back-link:hover {
color: #111
}

.blog-detail .post__back-arrow {
display: inline-block;
width: 18px;
height: 18px;
flex-shrink: 0
}

.blog-detail .post__reveal {
opacity: 0;
transform: translateY(16px);
animation: reveal-up .5s ease-out forwards
}

.blog-detail .post__reveal--delay1 {
animation-delay: .1s
}

.blog-detail .post__reveal--delay2 {
animation-delay: .2s
}

.blog-detail .post__reveal--delay3 {
animation-delay: .35s
}

.blog-detail .post__reveal--delay4 {
animation-delay: .5s
}

@keyframes reveal-up {
to {
opacity: 1;
transform: translateY(0)
}
}

@media (max-width: 1024px) {
.blog-detail .post__header {
grid-template-columns: 1fr;
gap: 40px;
padding: 40px 0
}

.blog-detail .post__header-left {
padding: 24px 0 40px
}

.blog-detail .post__dot-grid {
right: 0
}

.blog-detail .post__image {
height: 340px
}

.blog-detail .post__body {
grid-template-columns: 1fr;
gap: 40px
}

.blog-detail .post__sidebar {
position: static
}
}

@media (max-width: 640px) {
.blog-detail {
padding: 0 24px
}

.blog-detail .post__headline {
font-size: 28px
}

.blog-detail .post__image {
height: 240px
}

.blog-detail .post__body {
padding-bottom: 40px
}

.blog-detail .post__pull-quote {
padding: 24px
}

.blog-detail .post__mesh-card {
padding: 24px
}
}

@media (max-width: 360px) {
.blog-detail .post__headline {
font-size: 28px;
line-height: 1.2
}

.blog-detail .post__image {
height: 200px
}
}

.guides {
max-width: 100%;
overflow-x: hidden
}

.guides__container {
max-width: 1140px;
margin: 0 auto;
padding: 0 24px
}

.guides__banner {
background: #186EE9;
padding: 80px 24px;
position: relative;
overflow: hidden
}

.guides__banner-curl {
position: absolute;
top: 24px;
right: 40px;
width: 120px;
height: 120px;
opacity: .08;
pointer-events: none
}

.guides__banner-dots {
position: absolute;
inset: 0;
pointer-events: none
}

.guides__banner-dot {
position: absolute;
width: 4px;
height: 4px;
border-radius: 2px;
background: #EFFA4F;
opacity: .18
}

.guides__banner-inner {
max-width: 1140px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
align-items: center
}

.guides__banner-label {
display: inline-block;
font-size: 14px;
line-height: 1.2;
letter-spacing: .12em;
text-transform: uppercase;
color: #EFFA4F;
border: 1px solid #effa4f66;
border-radius: 2px;
padding: 8px 24px;
margin-bottom: 24px
}

.guides__banner-heading {
font-size: 70px;
line-height: 1.2;
color: #fff;
margin: 0 0 24px
}

.guides__banner-heading span {
display: inline-block;
position: relative
}

.guides__banner-heading span::after {
content: '';
position: absolute;
bottom: 4px;
left: 0;
width: 0;
height: 3px;
background: #EFFA4F;
animation: underline-draw .6s ease-out .5s forwards
}

@keyframes underline-draw {
to {
width: 100%
}
}

.guides__banner-tagline {
font-size: 17px;
line-height: 1.75;
color: #fffc;
margin: 0 0 40px;
max-width: 480px
}

.guides__banner-links {
display: flex;
flex-direction: row;
gap: 24px;
flex-wrap: wrap
}

.guides__banner-link {
font-size: 14px;
line-height: 1.2;
color: #186EE9;
background: #EFFA4F;
border-radius: 2px;
padding: 8px 24px;
text-decoration: none;
font-weight: 600;
letter-spacing: .04em;
transition: background .5s ease-out, color .5s ease-out, clip-path .15s ease-out;
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
position: relative;
overflow: hidden
}

.guides__banner-link:hover {
background: #fff;
clip-path: polygon(0 0, 100% 0, 98% 100%, 2% 100%)
}

.guides__banner-link--ghost {
background: transparent;
color: #EFFA4F;
border: 1px solid #effa4f80
}

.guides__banner-link--ghost:hover {
background: #effa4f1a;
color: #EFFA4F
}

.guides__banner-image-cell {
position: relative
}

.guides__banner-image-frame {
border-radius: 2px;
overflow: hidden;
box-shadow: 1px 10px 48px -2px #186ee921;
position: relative
}

.guides__banner-image-frame::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(307deg, #186ee973 0%, #effa4f14 100%)
}

.guides__banner-image-frame img {
width: 100%;
height: 380px;
object-fit: cover;
display: block
}

.guides__divider-geo {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 8px;
padding: 24px 0;
background: #EDECEB;
overflow: hidden
}

.guides__divider-shape {
width: 8px;
height: 8px;
background: #186EE9;
border-radius: 2px;
opacity: .3;
transform: rotate(45deg);
flex-shrink: 0
}

.guides__divider-shape--accent {
background: #EFFA4F;
opacity: .7;
width: 10px;
height: 10px
}

.guides__posts {
background: #fff;
padding: 80px 24px
}

.guides__posts-inner {
max-width: 1140px;
margin: 0 auto
}

.guides__posts-header {
margin-bottom: 40px
}

.guides__posts-heading {
font-size: 38px;
line-height: 1.2;
color: #111;
margin: 0 0 8px;
text-decoration: underline;
text-decoration-color: #EFFA4F;
text-underline-offset: 6px
}

.guides__posts-sub {
font-size: 17px;
line-height: 1.5;
color: #444;
margin: 0
}

.guides__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px
}

.guides__card {
border-radius: 2px;
background: #fff;
box-shadow: 1px 6px 28px -2px #186ee91c;
overflow: hidden;
display: flex;
flex-direction: column;
transition: box-shadow .5s ease-out, clip-path .15s ease-out;
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
opacity: 0;
animation: card-appear .5s ease-out forwards
}

.guides__card:nth-child(1) {
animation-delay: .1s
}

.guides__card:nth-child(2) {
animation-delay: .2s
}

.guides__card:nth-child(3) {
animation-delay: .3s
}

.guides__card:nth-child(4) {
animation-delay: .4s
}

@keyframes card-appear {
from {
opacity: 0;
transform: translateY(16px)
}

to {
opacity: 1;
transform: translateY(0)
}
}

.guides__card:hover {
box-shadow: 1px 10px 48px -2px #186ee921;
clip-path: polygon(0 0, 100% 0, 98% 100%, 2% 100%)
}

.guides__card-image-wrap {
position: relative;
overflow: hidden
}

.guides__card-image-wrap img {
width: 100%;
height: 180px;
object-fit: cover;
display: block;
transition: transform .5s ease-out
}

.guides__card:hover .guides__card-image-wrap img {
transform: scale(1.04)
}

.guides__card-image-wrap::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(307deg, #186ee933 0%, transparent 70%);
pointer-events: none
}

.guides__card-tag {
position: absolute;
top: 8px;
left: 8px;
font-size: 14px;
line-height: 1.2;
color: #186EE9;
background: #EFFA4F;
border-radius: 2px;
padding: 4px 8px;
font-weight: 600;
z-index: 1
}

.guides__card-body {
padding: 24px;
display: flex;
flex-direction: column;
flex: 1;
box-shadow: inset 0 2px 8px -2px #186ee912
}

.guides__card-category {
font-size: 14px;
line-height: 1.2;
color: #186EE9;
letter-spacing: .08em;
text-transform: uppercase;
margin: 0 0 8px
}

.guides__card-title {
font-size: 17px;
line-height: 1.5;
color: #111;
margin: 0 0 8px;
font-weight: 700
}

.guides__card-desc {
font-size: 14px;
line-height: 1.75;
color: #444;
margin: 0 0 24px;
flex: 1
}

.guides__card-meta {
display: flex;
flex-direction: row;
align-items: center;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 24px
}

.guides__card-readtime {
font-size: 14px;
line-height: 1.2;
color: #888;
display: flex;
flex-direction: row;
align-items: center;
gap: 4px
}

.guides__card-readtime-icon {
width: 14px;
height: 14px;
flex-shrink: 0
}

.guides__card-stats {
display: flex;
flex-direction: row;
gap: 8px;
margin-left: auto
}

.guides__card-stat {
font-size: 14px;
line-height: 1.2;
color: #888;
display: flex;
flex-direction: row;
align-items: center;
gap: 4px
}

.guides__card-date {
font-size: 14px;
line-height: 1.2;
color: #aaa;
margin-bottom: 8px
}

.guides__card-link {
display: inline-block;
font-size: 14px;
line-height: 1.2;
color: #186EE9;
text-decoration: underline;
text-decoration-color: transparent;
text-underline-offset: 4px;
font-weight: 600;
transition: text-decoration-color .4s ease-out, color .4s ease-out
}

.guides__card-link:hover {
text-decoration-color: #186EE9;
color: #0f4fb5
}

.guides__divider-wave {
height: 24px;
background: #EDECEB;
display: flex;
flex-direction: row;
align-items: center;
overflow: hidden
}

.guides__divider-wave svg {
width: 100%;
height: 24px
}

.guides__about {
background: #EDECEB;
padding: 80px 24px;
position: relative;
overflow: hidden
}

.guides__about-bleed {
position: absolute;
top: 0;
left: 0;
width: 340px;
height: 340px;
border-radius: 40px;
background: conic-gradient(from 307deg, #effa4f2e 0%, #186ee914 40%, transparent 70%);
animation: bleed-move 7s ease-in-out infinite alternate;
pointer-events: none;
z-index: 0
}

@keyframes bleed-move {
from {
transform: translate(-60px, -60px) scale(1);
opacity: .6
}

to {
transform: translate(0, 0) scale(1.1);
opacity: 1
}
}

.guides__about-inner {
max-width: 1140px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 2fr;
gap: 80px;
align-items: start;
position: relative;
z-index: 1
}

.guides__about-label {
font-size: 14px;
line-height: 1.2;
letter-spacing: .12em;
text-transform: uppercase;
color: #186EE9;
margin: 0 0 24px
}

.guides__about-heading {
font-size: 38px;
line-height: 1.2;
color: #111;
margin: 0 0 24px;
text-decoration: underline;
text-decoration-color: #EFFA4F;
text-underline-offset: 6px
}

.guides__about-metric {
margin-top: 40px
}

.guides__about-metric-number {
font-size: 70px;
line-height: 1.2;
color: #186EE9;
font-weight: 800;
display: block
}

.guides__about-metric-bar-wrap {
height: 4px;
background: #186ee926;
border-radius: 2px;
margin: 8px 0;
overflow: hidden
}

.guides__about-metric-bar {
height: 100%;
width: 0;
background: #186EE9;
border-radius: 2px;
animation: bar-fill 1s ease-out .6s forwards
}

@keyframes bar-fill {
to {
width: 72%
}
}

.guides__about-metric-label {
font-size: 14px;
line-height: 1.5;
color: #555
}

.guides__about-text {
display: flex;
flex-direction: column;
gap: 24px
}

.guides__about-pull {
float: right;
width: 200px;
margin: 0 0 24px 24px;
font-size: 28px;
line-height: 1.2;
color: #186EE9;
font-weight: 700;
border-top: 2px solid #EFFA4F;
padding-top: 8px
}

.guides__about-para {
font-size: 17px;
line-height: 1.75;
color: #333;
margin: 0
}

.guides__divider-dots {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 8px;
padding: 24px 0;
background: #fff
}

.guides__divider-dot-item {
width: 6px;
height: 6px;
border-radius: 2px;
background: #186EE9;
opacity: .2
}

.guides__divider-dot-item--big {
width: 24px;
height: 6px;
opacity: .5;
background: #EFFA4F
}

.guides__topics {
background: #fff;
padding: 80px 24px
}

.guides__topics-inner {
max-width: 1140px;
margin: 0 auto
}

.guides__topics-heading {
font-size: 38px;
line-height: 1.2;
color: #111;
margin: 0 0 40px;
text-decoration: underline;
text-decoration-color: #EFFA4F;
text-underline-offset: 6px
}

.guides__topics-list {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
list-style: none;
padding: 0;
margin: 0
}

.guides__topics-item {
background: #EDECEB;
border-radius: 2px;
padding: 40px;
display: flex;
flex-direction: row;
align-items: flex-start;
gap: 24px;
box-shadow: 1px 1px 6px -2px #186ee912;
transition: box-shadow .5s ease-out, clip-path .15s ease-out;
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%)
}

.guides__topics-item:hover {
box-shadow: 1px 6px 28px -2px #186ee91c;
clip-path: polygon(0 0, 100% 0, 99% 100%, 1% 100%)
}

.guides__topics-icon {
width: 40px;
height: 40px;
flex-shrink: 0;
background: #186EE9;
border-radius: 2px;
display: flex;
align-items: center;
justify-content: center
}

.guides__topics-icon svg {
width: 22px;
height: 22px
}

.guides__topics-text {
flex: 1
}

.guides__topics-name {
font-size: 17px;
line-height: 1.5;
color: #111;
font-weight: 700;
margin: 0 0 8px
}

.guides__topics-desc {
font-size: 14px;
line-height: 1.75;
color: #555;
margin: 0
}

.guides__divider-line {
height: 2px;
background: linear-gradient(307deg, #EFFA4F 0%, #186EE9 50%, #EDECEB 100%);
max-width: 1140px;
margin: 0 auto
}

.guides__mesh {
background: #111;
padding: 80px 24px;
position: relative;
overflow: hidden
}

.guides__mesh-bg {
position: absolute;
inset: 0;
background: conic-gradient(from 307deg at 30% 60%, #186ee959 0%, #effa4f1f 30%, #186ee90d 60%, transparent 80%);
pointer-events: none;
animation: bleed-move 9s ease-in-out infinite alternate
}

.guides__mesh-inner {
max-width: 1140px;
margin: 0 auto;
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 40px;
align-items: start
}

.guides__mesh-heading {
font-size: 38px;
line-height: 1.2;
color: #fff;
margin: 0 0 24px;
grid-column: 1 / -1;
text-decoration: underline;
text-decoration-color: #EFFA4F;
text-underline-offset: 6px
}

.guides__mesh-stat {
background: #ffffff0d;
border: 1px solid #ffffff1a;
border-radius: 2px;
padding: 40px;
box-shadow: inset 1px 1px 6px -2px #effa4f12;
transition: background .5s ease-out, border-color .4s ease-out
}

.guides__mesh-stat:hover {
background: #effa4f0f;
border-color: #effa4f40
}

.guides__mesh-stat-number {
font-size: 70px;
line-height: 1.2;
color: #EFFA4F;
font-weight: 800;
display: block;
margin-bottom: 8px
}

.guides__mesh-stat-bar-wrap {
height: 3px;
background: #effa4f26;
border-radius: 2px;
margin-bottom: 8px;
overflow: hidden
}

.guides__mesh-stat-bar {
height: 100%;
background: #EFFA4F;
border-radius: 2px;
width: 0;
animation: bar-fill-yellow 1.2s ease-out .8s forwards
}

.guides__mesh-stat:nth-child(3) .guides__mesh-stat-bar {
animation-name: bar-fill-y2
}

.guides__mesh-stat:nth-child(4) .guides__mesh-stat-bar {
animation-name: bar-fill-y3
}

@keyframes bar-fill-yellow {
to {
width: 65%
}
}

@keyframes bar-fill-y2 {
to {
width: 80%
}
}

@keyframes bar-fill-y3 {
to {
width: 55%
}
}

.guides__mesh-stat-label {
font-size: 14px;
line-height: 1.5;
color: #ffffffa6
}

.guides__contact {
background: #EDECEB;
padding: 80px 24px
}

.guides__contact-inner {
max-width: 1140px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: start
}

.guides__contact-heading {
font-size: 38px;
line-height: 1.2;
color: #111;
margin: 0 0 24px;
text-decoration: underline;
text-decoration-color: #EFFA4F;
text-underline-offset: 6px
}

.guides__contact-text {
font-size: 17px;
line-height: 1.75;
color: #333;
margin: 0 0 24px
}

.guides__contact-email {
display: inline-block;
font-size: 17px;
line-height: 1.5;
color: #186EE9;
text-decoration: underline;
text-underline-offset: 5px;
text-decoration-color: #186ee94d;
transition: text-decoration-color .4s ease-out
}

.guides__contact-email:hover {
text-decoration-color: #186EE9
}

.guides__form {
display: flex;
flex-direction: column;
gap: 24px
}

.guides__form-field {
display: flex;
flex-direction: column;
gap: 8px
}

.guides__form-label {
font-size: 14px;
line-height: 1.2;
color: #333;
font-weight: 600
}

.guides__form-input {
font-size: 17px;
line-height: 1.5;
color: #111;
background: #fff;
border: 1px solid #186ee933 !important;
border-radius: 2px;
padding: 8px 24px;
outline: none;
transition: border-color .4s ease-out, box-shadow .4s ease-out;
width: 100%;
box-sizing: border-box
}

.guides__form-input::placeholder {
color: #1116
}

.guides__form-input:focus {
border-color: #186EE9 !important;
box-shadow: 1px 1px 6px -2px #186ee912
}

.guides__form-textarea {
min-height: 120px;
resize: vertical
}

.guides__form-submit {
font-size: 17px;
line-height: 1.5;
color: #fff;
background: #186EE9;
border: none;
border-radius: 2px;
padding: 8px 40px;
cursor: pointer;
font-weight: 600;
transition: background .5s ease-out, clip-path .15s ease-out;
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
position: relative;
overflow: hidden;
align-self: flex-start
}

.guides__form-submit:hover {
background: #0f4fb5;
clip-path: polygon(0 0, 100% 0, 97% 100%, 3% 100%)
}

.guides__form-submit:focus {
outline: 2px solid #EFFA4F;
outline-offset: 2px
}

@media (max-width: 1024px) {
.guides__banner-heading {
font-size: 38px
}

.guides__banner-inner {
grid-template-columns: 1fr;
gap: 40px
}

.guides__banner-image-cell {
display: none
}

.guides__grid {
grid-template-columns: repeat(2, 1fr)
}

.guides__about-inner {
grid-template-columns: 1fr;
gap: 40px
}

.guides__mesh-inner {
grid-template-columns: 1fr 1fr
}

.guides__mesh-heading {
grid-column: 1 / -1
}

.guides__contact-inner {
grid-template-columns: 1fr;
gap: 40px
}

.guides__topics-list {
grid-template-columns: 1fr
}
}

@media (max-width: 640px) {
.guides__banner-heading {
font-size: 28px
}

.guides__posts-heading {
font-size: 28px
}

.guides__grid {
grid-template-columns: 1fr
}

.guides__mesh-inner {
grid-template-columns: 1fr
}

.guides__about-pull {
float: none;
width: auto;
margin: 0 0 24px
}

.guides__mesh-stat-number {
font-size: 38px
}

.guides__about-metric-number {
font-size: 38px
}

.guides__banner-links {
flex-direction: column
}
}

@media (max-width: 360px) {
.guides__banner {
padding: 40px 24px
}

.guides__posts {
padding: 40px 24px
}

.guides__about {
padding: 40px 24px
}

.guides__topics {
padding: 40px 24px
}

.guides__mesh {
padding: 40px 24px
}

.guides__contact {
padding: 40px 24px
}
}

.masterclass {
max-width: 100%;
overflow-x: hidden
}

.masterclass .reading-area {
max-width: 1140px;
margin: 0 auto;
padding: 0 40px
}

.masterclass .page-top {
background: #fff;
padding-top: 40px;
padding-bottom: 80px;
position: relative
}

.masterclass .page-top::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(ellipse at center, #fff 30%, #EDECEB 100%);
pointer-events: none;
z-index: 0
}

.masterclass .page-top .reading-area {
position: relative;
z-index: 1
}

.masterclass .circle-decor {
position: absolute;
border-radius: 40px;
pointer-events: none;
z-index: 0
}

.masterclass .circle-decor--large {
width: 420px;
height: 420px;
border-radius: 40px;
border: 2px solid #186ee914;
top: -80px;
right: -120px;
transform: rotate(18deg)
}

.masterclass .circle-decor--medium {
width: 240px;
height: 240px;
border-radius: 40px;
border: 2px solid #effa4f2e;
top: 40px;
right: 80px;
transform: rotate(-8deg)
}

.masterclass .circle-decor--small {
width: 120px;
height: 120px;
border-radius: 40px;
border: 2px solid #186ee91f;
bottom: 80px;
left: 24px;
transform: rotate(30deg)
}

.masterclass .top-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: center
}

.masterclass .top-text {
display: flex;
flex-direction: column;
gap: 24px
}

.masterclass .label-tag {
display: inline-flex;
align-items: center;
gap: 8px;
background: #EFFA4F;
color: #0d0d0d;
font-size: 14px;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
padding: 8px 24px;
border-radius: 2px;
width: fit-content
}

.masterclass .label-tag .tag-dot {
width: 6px;
height: 6px;
background: #186EE9;
border-radius: 2px;
display: inline-block
}

.masterclass .top-heading {
font-size: 70px;
line-height: 1.2;
color: #111;
font-weight: 900;
margin: 0
}

.masterclass .top-heading .line--light {
font-weight: 400;
color: #555;
font-size: 38px;
display: block
}

.masterclass .top-heading .line--bold {
font-weight: 900;
color: #111;
display: block
}

.masterclass .top-heading .line--accent {
font-weight: 900;
color: #186EE9;
display: block;
font-size: 70px
}

.masterclass .animated-underline {
position: relative;
display: inline-block
}

.masterclass .animated-underline::after {
content: "";
position: absolute;
left: 0;
bottom: -4px;
width: 0;
height: 3px;
background: #EFFA4F;
border-radius: 2px;
animation: underline-draw .6s ease-out .5s forwards
}

@keyframes underline-draw {
to {
width: 100%
}
}

.masterclass .top-description {
font-size: 17px;
line-height: 1.75;
color: #444;
margin: 0;
max-width: 480px
}

.masterclass .top-actions {
display: flex;
flex-direction: row;
gap: 24px;
align-items: center;
flex-wrap: wrap
}

.masterclass .btn-primary {
display: inline-flex;
align-items: center;
gap: 8px;
background: #186EE9;
color: #fff;
font-size: 17px;
font-weight: 700;
padding: 24px 40px;
border-radius: 2px;
text-decoration: none;
border: none;
cursor: pointer;
position: relative;
overflow: hidden;
transition: background-color .15s ease-out, clip-path .2s ease-out;
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
box-shadow: 1px 6px 28px -2px #186ee91c
}

.masterclass .btn-primary:hover {
background: #0f55c0;
clip-path: polygon(0 0, 100% 0, 98% 100%, 2% 100%)
}

.masterclass .btn-primary:focus {
outline: 3px solid #EFFA4F;
outline-offset: 2px
}

.masterclass .btn-primary:active {
background: #0a3d8a
}

.masterclass .btn-secondary {
display: inline-flex;
align-items: center;
gap: 8px;
background: transparent;
color: #186EE9;
font-size: 17px;
font-weight: 600;
padding: 24px 40px;
border-radius: 2px;
text-decoration: none;
border: 2px solid #186EE9;
cursor: pointer;
transition: background-color .15s ease-out, color .15s ease-out, clip-path .2s ease-out;
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%)
}

.masterclass .btn-secondary:hover {
background: #186EE9;
color: #fff;
clip-path: polygon(2% 0, 98% 0, 100% 100%, 0 100%)
}

.masterclass .btn-secondary:focus {
outline: 3px solid #EFFA4F;
outline-offset: 2px
}

.masterclass .image-zone {
position: relative
}

.masterclass .image-frame {
position: relative;
width: 100%;
border-radius: 2px;
overflow: hidden;
box-shadow: 1px 10px 48px -2px #186ee921
}

.masterclass .image-frame img {
width: 100%;
height: 520px;
object-fit: cover;
display: block;
clip-path: polygon(0 0, 92% 0, 100% 8%, 100% 100%, 8% 100%, 0 92%);
transition: clip-path .5s ease-out
}

.masterclass .image-frame:hover img {
clip-path: polygon(0 0, 96% 0, 100% 4%, 100% 100%, 4% 100%, 0 96%)
}

.masterclass .image-frame::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(307deg, transparent 60%, #effa4f59 100%);
z-index: 1;
pointer-events: none
}

.masterclass .image-frame::after {
content: "";
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
border-radius: 2px;
border: 2px solid transparent;
transition: border-color .4s ease-out;
pointer-events: none;
z-index: 2
}

.masterclass .image-frame:hover::after {
border-color: #EFFA4F
}

.masterclass .image-badge {
position: absolute;
bottom: -24px;
left: -24px;
background: #111;
color: #EFFA4F;
padding: 24px;
border-radius: 2px;
z-index: 3;
box-shadow: 1px 6px 28px -2px #186ee91c
}

.masterclass .image-badge .badge-number {
font-size: 38px;
font-weight: 900;
line-height: 1.2;
display: block
}

.masterclass .image-badge .badge-text {
font-size: 14px;
color: #EDECEB;
display: block;
line-height: 1.5
}

.masterclass .zigzag-divider {
display: block;
width: 100%;
height: 48px;
overflow: hidden;
line-height: 0
}

.masterclass .zigzag-divider svg {
display: block;
width: 100%;
height: 48px
}

.masterclass .detail-area {
background: #111;
padding-top: 80px;
padding-bottom: 80px;
position: relative
}

.masterclass .detail-area::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(ellipse at center, #1a2540 20%, #0a0f1e 100%);
pointer-events: none;
z-index: 0
}

.masterclass .detail-area .reading-area {
position: relative;
z-index: 1
}

.masterclass .detail-label {
display: inline-flex;
align-items: center;
gap: 8px;
color: #EFFA4F;
font-size: 14px;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
margin-bottom: 40px
}

.masterclass .detail-label .label-line {
width: 32px;
height: 2px;
background: #EFFA4F;
display: inline-block
}

.masterclass .detail-columns {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 80px;
align-items: start
}

.masterclass .detail-left {
display: flex;
flex-direction: column;
gap: 40px
}

.masterclass .detail-heading {
font-size: 38px;
line-height: 1.2;
color: #fff;
font-weight: 800;
margin: 0;
border-bottom: 2px solid #effa4f4d;
padding-bottom: 24px
}

.masterclass .detail-body {
display: flex;
flex-direction: column;
gap: 24px
}

.masterclass .detail-body p {
font-size: 17px;
line-height: 1.75;
color: #c8c8c8;
margin: 0
}

.masterclass .pull-quote {
display: flex;
flex-direction: row;
gap: 24px;
align-items: flex-start
}

.masterclass .pull-quote .quote-bar {
width: 4px;
min-height: 60px;
background: #EFFA4F;
border-radius: 2px;
flex-shrink: 0
}

.masterclass .pull-quote .quote-text {
font-size: 28px;
line-height: 1.5;
color: #fff;
font-weight: 700;
margin: 0
}

.masterclass .detail-right {
display: flex;
flex-direction: column;
gap: 24px
}

.masterclass .feature-cards {
display: flex;
flex-direction: column;
gap: 24px
}

.masterclass .feature-card {
display: flex;
flex-direction: column;
gap: 8px;
padding: 24px;
border-radius: 2px;
position: relative;
transition: box-shadow .2s ease-out
}

.masterclass .feature-card--yellow {
background: #EFFA4F;
color: #111;
box-shadow: inset 0 2px 12px #effa4f26
}

.masterclass .feature-card--blue {
background: #186EE9;
color: #fff;
box-shadow: inset 0 2px 12px #186ee933
}

.masterclass .feature-card--dark {
background: #ffffff0f;
color: #fff;
border: 1px solid #ffffff1a;
box-shadow: inset 0 2px 12px #186ee912
}

.masterclass .feature-card:hover {
box-shadow: 1px 6px 28px -2px #186ee92e inset 0 2px 12px #186ee912
}

.masterclass .card-border-hover {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 2px;
pointer-events: none
}

.masterclass .card-border-hover::before,
.masterclass .card-border-hover::after {
content: "";
position: absolute;
background: #EFFA4F;
transition: width .18s ease-out, height .18s ease-out
}

.masterclass .card-border-hover::before {
top: 0;
left: 0;
width: 0;
height: 2px
}

.masterclass .card-border-hover::after {
bottom: 0;
right: 0;
width: 0;
height: 2px
}

.masterclass .feature-card:hover .card-border-hover::before,
.masterclass .feature-card:hover .card-border-hover::after {
width: 100%
}

.masterclass .feature-card .card-icon {
font-size: 24px;
margin-bottom: 8px
}

.masterclass .feature-card .card-heading {
font-size: 17px;
font-weight: 700;
line-height: 1.2;
margin: 0
}

.masterclass .feature-card .card-text {
font-size: 14px;
line-height: 1.75;
margin: 0;
opacity: .85
}

.masterclass .feature-card--yellow .card-text {
color: #333
}

.masterclass .metrics-strip {
display: flex;
flex-direction: row;
gap: 24px;
margin-top: 40px;
padding-top: 40px;
border-top: 1px solid #ffffff1a;
flex-wrap: wrap
}

.masterclass .metric-item {
display: flex;
flex-direction: column;
gap: 8px;
flex: 1;
min-width: 120px;
animation: metric-appear .5s ease-out both
}

.masterclass .metric-item:nth-child(1) {
animation-delay: .1s
}

.masterclass .metric-item:nth-child(2) {
animation-delay: .25s
}

.masterclass .metric-item:nth-child(3) {
animation-delay: .4s
}

@keyframes metric-appear {
from {
opacity: 0;
transform: translateY(16px)
}

to {
opacity: 1;
transform: translateY(0)
}
}

.masterclass .metric-number {
font-size: 38px;
font-weight: 900;
color: #EFFA4F;
line-height: 1.2;
display: block
}

.masterclass .metric-label {
font-size: 14px;
color: #888;
line-height: 1.5;
display: block
}

.masterclass .zigzag-divider--dark {
background: #111
}

.masterclass .contact-strip {
background: #fff;
padding: 24px 40px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 24px;
border-top: 1px solid #EDECEB
}

.masterclass .contact-strip a {
color: #186EE9;
font-size: 17px;
font-weight: 600;
text-decoration: underline;
text-underline-offset: 5px;
transition: color .15s ease-out
}

.masterclass .contact-strip a:hover {
color: #0f55c0
}

.masterclass .contact-strip .strip-text {
font-size: 17px;
color: #555
}

@media (max-width: 1024px) {
.masterclass .top-grid {
grid-template-columns: 1fr;
gap: 40px
}

.masterclass .top-heading {
font-size: 38px
}

.masterclass .top-heading .line--accent {
font-size: 38px
}

.masterclass .image-frame img {
height: 360px
}

.masterclass .image-badge {
bottom: -8px;
left: -8px
}

.masterclass .detail-columns {
grid-template-columns: 1fr;
gap: 40px
}

.masterclass .reading-area {
padding: 0 24px
}
}

@media (max-width: 640px) {
.masterclass .page-top {
padding-top: 40px;
padding-bottom: 80px
}

.masterclass .top-heading {
font-size: 28px
}

.masterclass .top-heading .line--light {
font-size: 17px
}

.masterclass .top-heading .line--accent {
font-size: 28px
}

.masterclass .top-actions {
flex-direction: column;
align-items: flex-start
}

.masterclass .btn-primary,
.masterclass .btn-secondary {
width: 100%;
justify-content: center;
padding: 24px
}

.masterclass .metrics-strip {
flex-direction: column;
gap: 24px
}

.masterclass .detail-heading {
font-size: 28px
}

.masterclass .pull-quote .quote-text {
font-size: 17px
}

.masterclass .circle-decor--large,
.masterclass .circle-decor--medium {
display: none
}

.masterclass .reading-area {
padding: 0 24px
}

.masterclass .contact-strip {
flex-direction: column;
text-align: center;
padding: 24px;
gap: 8px
}
}

@media (max-width: 360px) {
.masterclass .top-heading {
font-size: 28px
}

.masterclass .reading-area {
padding: 0 24px
}
}

.opening {
background: #fff;
overflow-x: clip
}

.opening .gradient-divider {
height: 2px;
background: linear-gradient(to right, #EFFA4F, #186EE9);
border: none;
margin: 0
}

.opening .gradient-divider--reverse {
background: linear-gradient(to left, #EFFA4F, #186EE9)
}

.opening .pitch {
background: conic-gradient(from 307deg at 30% 60%, #EDECEB 0deg, #fff 90deg, #EFFA4F22 180deg, #186EE933 270deg, #EDECEB 360deg);
padding: 80px 24px;
position: relative
}

.opening .pitch__grid {
max-width: 1140px;
margin: 0 auto;
display: flex;
flex-direction: row;
align-items: stretch;
gap: 80px
}

.opening .pitch__text-zone {
flex: 3;
padding: 40px;
position: relative
}

.opening .pitch__text-zone::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 18px;
height: 18px;
border-top: 2px solid #186EE9;
border-left: 2px solid #186EE9;
pointer-events: none
}

.opening .pitch__text-zone::after {
content: '';
position: absolute;
bottom: 0;
right: 0;
width: 18px;
height: 18px;
border-bottom: 2px solid #EFFA4F;
border-right: 2px solid #EFFA4F;
pointer-events: none
}

.opening .pitch__detail-zone {
flex: 1;
padding: 40px 24px;
display: flex;
flex-direction: column;
justify-content: center;
gap: 24px
}

.opening .pitch__label {
font-size: 14px;
line-height: 1.5;
letter-spacing: .12em;
text-transform: uppercase;
color: #186EE9;
margin-bottom: 24px
}

.opening .pitch__heading {
font-size: 70px;
line-height: 1.2;
color: #111;
margin: 0 0 24px
}

.opening .pitch__heading .marked {
position: relative;
display: inline;
white-space: nowrap
}

.opening .pitch__heading .marked::after {
content: '';
position: absolute;
left: 0;
bottom: -4px;
width: 0;
height: 10px;
background: #EFFA4F;
z-index: -1;
animation: marker-draw .6s ease-out .4s forwards
}

@keyframes marker-draw {
to {
width: 100%
}
}

.opening .pitch__desc {
font-size: 17px;
line-height: 1.75;
color: #333;
max-width: 540px
}

.opening .pitch__stat {
font-size: 28px;
line-height: 1.2;
color: #111;
font-weight: 700
}

.opening .pitch__stat-label {
font-size: 14px;
line-height: 1.5;
color: #555;
margin-top: 8px
}

.opening .pitch__link {
display: inline-block;
font-size: 14px;
line-height: 1.5;
color: #186EE9;
text-decoration: underline;
text-underline-offset: 6px;
letter-spacing: .06em;
text-transform: uppercase;
transition: color .15s ease-out
}

.opening .pitch__link:hover {
color: #111
}

@keyframes slide-from-left {
from {
opacity: 0;
transform: translateX(-40px)
}

to {
opacity: 1;
transform: translateX(0)
}
}

@keyframes slide-from-right {
from {
opacity: 0;
transform: translateX(40px)
}

to {
opacity: 1;
transform: translateX(0)
}
}

@keyframes slide-from-bottom {
from {
opacity: 0;
transform: translateY(30px)
}

to {
opacity: 1;
transform: translateY(0)
}
}

.opening .pitch__label {
animation: slide-from-left .5s ease-out both
}

.opening .pitch__heading {
animation: slide-from-left .5s ease-out .1s both
}

.opening .pitch__desc {
animation: slide-from-left .5s ease-out .2s both
}

.opening .pitch__detail-zone {
animation: slide-from-right .5s ease-out .3s both
}

.opening .territories {
padding: 80px 24px;
background: #111
}

.opening .territories__container {
max-width: 1140px;
margin: 0 auto
}

.opening .territories__heading {
font-size: 38px;
line-height: 1.2;
color: #fff;
margin: 0 0 8px;
text-decoration: underline;
text-underline-offset: 8px;
text-decoration-color: #EFFA4F
}

.opening .territories__sub {
font-size: 17px;
line-height: 1.75;
color: #aaa;
margin: 0 0 40px
}

.opening .territories__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px
}

.opening .territory {
background: #1e1e1e;
border-radius: 2px;
padding: 40px 24px;
box-shadow: 1px 6px 28px -2px #186ee91c;
position: relative;
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
transition: clip-path .15s ease-out, box-shadow .15s ease-out
}

.opening .territory:hover {
clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%);
box-shadow: 1px 10px 48px -2px #186ee921
}

.opening .territory__icon {
width: 40px;
height: 40px;
margin-bottom: 24px
}

.opening .territory__name {
font-size: 28px;
line-height: 1.2;
color: #fff;
margin: 0 0 8px
}

.opening .territory__desc {
font-size: 14px;
line-height: 1.75;
color: #aaa;
margin: 0 0 24px
}

.opening .territory__reader {
font-size: 14px;
line-height: 1.5;
color: #EFFA4F;
letter-spacing: .08em;
text-transform: uppercase
}

.opening .territory__link {
display: inline-block;
margin-top: 24px;
font-size: 14px;
color: #fff;
text-decoration: underline;
text-underline-offset: 6px;
text-decoration-color: #186EE9;
transition: text-decoration-color .15s ease-out
}

.opening .territory__link:hover {
text-decoration-color: #EFFA4F
}

.opening .feed {
padding: 80px 24px;
background: #fff
}

.opening .feed__container {
max-width: 1140px;
margin: 0 auto
}

.opening .feed__top {
display: flex;
flex-direction: row;
align-items: baseline;
justify-content: space-between;
margin-bottom: 40px;
gap: 24px
}

.opening .feed__heading {
font-size: 38px;
line-height: 1.2;
color: #111;
margin: 0;
text-decoration: underline;
text-underline-offset: 8px;
text-decoration-color: #186EE9
}

.opening .feed__see-all {
font-size: 14px;
color: #186EE9;
text-decoration: underline;
text-underline-offset: 6px;
white-space: nowrap;
transition: color .15s ease-out
}

.opening .feed__see-all:hover {
color: #111
}

.opening .feed__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px
}

.opening .post-card {
border-radius: 2px;
overflow: hidden;
box-shadow: 1px 1px 6px -2px #effa4f12 inset 0 2px 8px #186ee90a;
background: #fff;
border: 1px solid #EDECEB;
display: flex;
flex-direction: column;
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
transition: clip-path .15s ease-out, box-shadow .5s ease
}

.opening .post-card:hover {
clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 0 100%);
box-shadow: 1px 10px 48px -2px #186ee921
}

.opening .post-card__image-wrap {
width: 100%;
aspect-ratio: 4/3;
overflow: hidden
}

.opening .post-card__image-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
transition: transform .5s ease
}

.opening .post-card:hover .post-card__image-wrap img {
transform: scale(1.04)
}

.opening .post-card__body {
padding: 24px;
flex: 1;
display: flex;
flex-direction: column;
gap: 8px
}

.opening .post-card__tag {
font-size: 14px;
line-height: 1.5;
color: #186EE9;
letter-spacing: .08em;
text-transform: uppercase
}

.opening .post-card__title {
font-size: 17px;
line-height: 1.5;
color: #111;
text-decoration: none;
display: block;
transition: color .15s ease-out
}

.opening .post-card__title:hover {
color: #186EE9
}

.opening .post-card__desc {
font-size: 14px;
line-height: 1.75;
color: #555;
margin: 0;
flex: 1
}

.opening .post-card__footer {
padding: 0 24px 24px
}

.opening .post-card__read {
font-size: 14px;
color: #111;
text-decoration: underline;
text-underline-offset: 6px;
text-decoration-color: #EFFA4F;
transition: text-decoration-color .15s ease-out
}

.opening .post-card__read:hover {
text-decoration-color: #186EE9
}

.opening .guides {
padding: 80px 24px;
background: #EDECEB
}

.opening .guides__container {
max-width: 1140px;
margin: 0 auto
}

.opening .guides__heading {
font-size: 38px;
line-height: 1.2;
color: #111;
margin: 0 0 40px;
text-decoration: underline;
text-underline-offset: 8px;
text-decoration-color: #EFFA4F
}

.opening .guides__layout {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 40px;
align-items: start
}

.opening .guide-featured {
background: #fff;
border-radius: 2px;
overflow: hidden;
box-shadow: 1px 6px 28px -2px #effa4f1c
}

.opening .guide-featured__image-wrap {
width: 100%;
aspect-ratio: 4/3;
overflow: hidden
}

.opening .guide-featured__image-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block
}

.opening .guide-featured__body {
padding: 40px
}

.opening .guide-featured__tag {
font-size: 14px;
color: #186EE9;
letter-spacing: .08em;
text-transform: uppercase;
display: block;
margin-bottom: 8px
}

.opening .guide-featured__title {
font-size: 28px;
line-height: 1.2;
color: #111;
text-decoration: none;
display: block;
margin-bottom: 8px;
transition: color .15s ease-out
}

.opening .guide-featured__title:hover {
color: #186EE9
}

.opening .guide-featured__desc {
font-size: 17px;
line-height: 1.75;
color: #444;
margin: 0 0 24px
}

.opening .guide-featured__meta {
font-size: 14px;
color: #888;
display: flex;
flex-direction: row;
gap: 24px
}

.opening .guide-secondary {
background: #fff;
border-radius: 2px;
padding: 24px;
box-shadow: 1px 1px 6px -2px #186ee912;
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
transition: clip-path .15s ease-out
}

.opening .guide-secondary:hover {
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%)
}

.opening .guide-secondary__image-wrap {
width: 100%;
aspect-ratio: 4/3;
overflow: hidden;
border-radius: 2px;
margin-bottom: 24px
}

.opening .guide-secondary__image-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block
}

.opening .guide-secondary__tag {
font-size: 14px;
color: #186EE9;
letter-spacing: .08em;
text-transform: uppercase;
display: block;
margin-bottom: 8px
}

.opening .guide-secondary__title {
font-size: 17px;
line-height: 1.5;
color: #111;
text-decoration: none;
display: block;
margin-bottom: 8px;
transition: color .15s ease-out
}

.opening .guide-secondary__title:hover {
color: #186EE9
}

.opening .guide-secondary__desc {
font-size: 14px;
line-height: 1.75;
color: #555;
margin: 0 0 24px
}

.opening .guide-secondary__meta {
font-size: 14px;
color: #888
}

.opening .author {
padding: 80px 24px;
background: #fff
}

.opening .author__container {
max-width: 1140px;
margin: 0 auto;
display: grid;
grid-template-columns: 3fr 1fr;
gap: 80px;
align-items: start
}

.opening .author__text {
display: flex;
flex-direction: column;
gap: 24px
}

.opening .author__label {
font-size: 14px;
letter-spacing: .1em;
text-transform: uppercase;
color: #186EE9
}

.opening .author__heading {
font-size: 38px;
line-height: 1.2;
color: #111;
margin: 0;
text-decoration: underline;
text-underline-offset: 8px;
text-decoration-color: #EDECEB
}

.opening .author__body {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 40px;
align-items: start
}

.opening .author__paragraphs {
display: flex;
flex-direction: column;
gap: 24px
}

.opening .author__paragraph {
font-size: 17px;
line-height: 1.75;
color: #333;
margin: 0
}

.opening .author__pullquote {
font-size: 28px;
line-height: 1.5;
color: #186EE9;
padding: 24px;
background: #EDECEB;
border-radius: 2px;
box-shadow: inset 1px 1px 6px -2px #186ee912
}

.opening .author__portraits {
display: flex;
flex-direction: column;
gap: 24px
}

.opening .portrait-card {
display: flex;
flex-direction: column;
gap: 8px;
align-items: center;
text-align: center
}

.opening .portrait-card__image-wrap {
width: 120px;
height: 160px;
border-radius: 40px;
overflow: hidden;
box-shadow: 1px 6px 28px -2px #186ee91c
}

.opening .portrait-card__image-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: top;
display: block
}

.opening .portrait-card__name {
font-size: 17px;
line-height: 1.5;
color: #111
}

.opening .portrait-card__role {
font-size: 14px;
color: #888
}

.opening .scale {
padding: 80px 24px;
background: #186EE9;
position: relative;
overflow: hidden
}

.opening .scale__bg-anim {
position: absolute;
inset: 0;
background: conic-gradient(from 307deg at 70% 40%, #186EE9 0deg, #1255b8 120deg, #186EE9 240deg, #1e7aff 360deg);
animation: color-shift 8s ease-in-out infinite alternate;
pointer-events: none;
z-index: 0
}

@keyframes color-shift {
0% {
opacity: 1;
filter: brightness(1)
}

50% {
opacity: .85;
filter: brightness(1.12)
}

100% {
opacity: 1;
filter: brightness(0.92)
}
}

.opening .scale__container {
max-width: 1140px;
margin: 0 auto;
position: relative;
z-index: 1
}

.opening .scale__heading {
font-size: 38px;
line-height: 1.2;
color: #fff;
margin: 0 0 40px;
text-decoration: underline;
text-underline-offset: 8px;
text-decoration-color: #EFFA4F
}

.opening .scale__metrics {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px
}

.opening .metric {
background: #ffffff14;
border-radius: 2px;
padding: 40px 24px;
box-shadow: inset 1px 1px 6px -2px #effa4f12;
position: relative
}

.opening .metric__number {
font-size: 70px;
line-height: 1.2;
color: #EFFA4F;
display: block
}

.opening .metric__label {
font-size: 17px;
line-height: 1.5;
color: #fff;
display: block;
margin-top: 8px
}

.opening .metric__detail {
font-size: 14px;
line-height: 1.75;
color: #ffffffa6;
margin-top: 8px
}

.opening .subscription {
padding: 80px 24px;
background: #EDECEB
}

.opening .subscription__container {
max-width: 1140px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: center
}

.opening .subscription__text {
display: flex;
flex-direction: column;
gap: 24px
}

.opening .subscription__heading {
font-size: 38px;
line-height: 1.2;
color: #111;
margin: 0;
text-decoration: underline;
text-underline-offset: 8px;
text-decoration-color: #186EE9
}

.opening .subscription__paragraph {
font-size: 17px;
line-height: 1.75;
color: #333;
margin: 0
}

.opening .subscription__detail {
font-size: 14px;
line-height: 1.75;
color: #555
}

.opening .subscription__form {
background: #fff;
border-radius: 2px;
padding: 40px;
box-shadow: 1px 6px 28px -2px #186ee91c inset 0 2px 8px #186ee90a;
display: flex;
flex-direction: column;
gap: 24px
}

.opening .form-field {
display: flex;
flex-direction: column;
gap: 8px
}

.opening .form-field__label {
font-size: 14px;
color: #333;
letter-spacing: .06em;
text-transform: uppercase
}

.opening .form-field__input {
font-size: 17px;
line-height: 1.5;
color: #111;
background: #fff;
border: 1px solid #EDECEB;
border-radius: 2px;
padding: 8px 24px;
outline: none;
transition: border-color .15s ease-out;
width: 100%;
box-sizing: border-box
}

.opening .form-field__input::placeholder {
color: #1116
}

.opening .form-field__input:focus {
border-color: #186EE9 !important
}

.opening .subscription__submit {
font-size: 17px;
line-height: 1.5;
color: #111;
background: #EFFA4F;
border: none;
border-radius: 2px;
padding: 8px 40px;
cursor: pointer;
position: relative;
overflow: hidden;
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
transition: clip-path .15s ease-out, background .15s ease-out
}

.opening .subscription__submit:hover {
background: #d9e200;
clip-path: polygon(0 0, 100% 0, calc(100% - 6px) 100%, 6px 100%)
}

.opening .subscription__submit:active {
background: #bfca00
}

.opening .continuation {
padding: 80px 24px;
background: #fff
}

.opening .continuation__container {
max-width: 1140px;
margin: 0 auto
}

.opening .continuation__heading {
font-size: 38px;
line-height: 1.2;
color: #111;
margin: 0 0 40px;
text-decoration: underline;
text-underline-offset: 8px;
text-decoration-color: #EFFA4F
}

.opening .continuation__grid {
display: grid;
grid-template-columns: 3fr 1fr;
gap: 40px;
align-items: start
}

.opening .continuation__links {
display: flex;
flex-direction: column;
gap: 24px
}

.opening .continuation-item {
display: flex;
flex-direction: row;
gap: 24px;
align-items: flex-start;
padding: 24px;
border-radius: 2px;
background: #EDECEB;
box-shadow: 1px 1px 6px -2px #effa4f12;
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
transition: clip-path .15s ease-out, box-shadow .5s ease
}

.opening .continuation-item:hover {
clip-path: polygon(6px 0, 100% 0, 100% 100%, 0 100%);
box-shadow: 1px 6px 28px -2px #186ee91c
}

.opening .continuation-item__icon {
flex-shrink: 0;
width: 40px;
height: 40px;
background: #186EE9;
border-radius: 2px;
display: flex;
align-items: center;
justify-content: center
}

.opening .continuation-item__icon svg {
width: 20px;
height: 20px;
fill: none;
stroke: #fff;
stroke-width: 2
}

.opening .continuation-item__text {
flex: 1
}

.opening .continuation-item__title {
font-size: 17px;
line-height: 1.5;
color: #111;
text-decoration: none;
display: block;
margin-bottom: 8px;
transition: color .15s ease-out
}

.opening .continuation-item__title:hover {
color: #186EE9
}

.opening .continuation-item__desc {
font-size: 14px;
line-height: 1.75;
color: #555;
margin: 0
}

.opening .continuation__mini-card {
background: #111;
border-radius: 2px;
padding: 40px 24px;
box-shadow: 1px 10px 48px -2px #186ee921 inset 0 2px 8px #effa4f12;
display: flex;
flex-direction: column;
gap: 24px
}

.opening .continuation__mini-card .mini-label {
font-size: 14px;
letter-spacing: .1em;
text-transform: uppercase;
color: #EFFA4F
}

.opening .continuation__mini-card .mini-heading {
font-size: 28px;
line-height: 1.2;
color: #fff;
margin: 0
}

.opening .continuation__mini-card .mini-desc {
font-size: 14px;
line-height: 1.75;
color: #aaa
}

.opening .continuation__mini-card .mini-link {
display: inline-block;
font-size: 14px;
color: #111;
background: #EFFA4F;
padding: 8px 24px;
border-radius: 2px;
text-decoration: none;
transition: background .15s ease-out;
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%)
}

.opening .continuation__mini-card .mini-link:hover {
background: #d9e200;
clip-path: polygon(0 0, 100% 0, calc(100% - 4px) 100%, 4px 100%)
}

@media (max-width: 1024px) {
.opening .pitch__heading {
font-size: 38px
}

.opening .pitch__grid {
gap: 40px
}

.opening .territories__grid {
grid-template-columns: 1fr 1fr
}

.opening .feed__grid {
grid-template-columns: 1fr 1fr
}

.opening .guides__layout {
grid-template-columns: 1fr
}

.opening .author__container {
grid-template-columns: 1fr;
gap: 40px
}

.opening .author__body {
grid-template-columns: 1fr
}

.opening .scale__metrics {
grid-template-columns: 1fr 1fr
}

.opening .subscription__container {
grid-template-columns: 1fr;
gap: 40px
}

.opening .continuation__grid {
grid-template-columns: 1fr
}
}

@media (max-width: 640px) {
.opening .pitch__grid {
flex-direction: column;
gap: 24px
}

.opening .pitch__heading {
font-size: 28px
}

.opening .territories__grid {
grid-template-columns: 1fr
}

.opening .feed__grid {
grid-template-columns: 1fr
}

.opening .scale__metrics {
grid-template-columns: 1fr
}

.opening .author__portraits {
flex-direction: row;
justify-content: center
}
}

@media (max-width: 360px) {
.opening .pitch {
padding: 40px 8px
}

.opening .pitch__text-zone {
padding: 24px 8px
}

.opening .metric__number {
font-size: 38px
}

.opening .feed {
padding: 40px 8px
}

.opening .territories {
padding: 40px 8px
}

.opening .guides {
padding: 40px 8px
}

.opening .author {
padding: 40px 8px
}

.opening .scale {
padding: 40px 8px
}

.opening .subscription {
padding: 40px 8px
}

.opening .continuation {
padding: 40px 8px
}
}

.blog {
max-width: 100%;
overflow-x: hidden
}

.blog__container {
max-width: 1140px;
margin: 0 auto;
padding: 0 24px
}

.blog__strip {
background: #EDECEB;
padding: 40px 0;
position: relative
}

.blog__strip-inner {
display: flex;
flex-direction: row;
align-items: stretch;
gap: 40px;
max-width: 1140px;
margin: 0 auto;
padding: 0 24px
}

.blog__strip-text {
flex: 1 1 0;
display: flex;
flex-direction: column;
justify-content: center;
gap: 24px
}

.blog__strip-label {
font-size: 14px;
line-height: 1.5;
color: #186EE9;
letter-spacing: .12em;
text-transform: uppercase
}

.blog__strip-heading {
font-size: 70px;
line-height: 1.2;
color: #111;
margin: 0
}

.blog__strip-heading span {
display: inline-block;
position: relative
}

.blog__strip-heading span::after {
content: '';
display: block;
position: absolute;
bottom: 4px;
left: 0;
width: 0;
height: 3px;
background: #EFFA4F;
animation: underline-draw .6s .4s ease-out forwards
}

@keyframes underline-draw {
to {
width: 100%
}
}

.blog__strip-desc {
font-size: 17px;
line-height: 1.75;
color: #333;
max-width: 520px;
margin: 0
}

.blog__strip-image {
flex: 0 0 260px;
position: relative;
overflow: hidden;
border-radius: 2px
}

.blog__strip-image img {
width: 260px;
height: 100%;
min-height: 220px;
object-fit: cover;
display: block;
border-radius: 2px
}

.blog__strip-image::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 60%;
height: 60%;
background: conic-gradient(from 307deg, #effa4f61, #186ee91f, transparent 60%);
z-index: 1;
pointer-events: none;
border-radius: 2px
}

.blog__dots {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 0;
overflow: hidden
}

.blog__dots svg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: .13
}

.blog__strip-text,
.blog__strip-image {
position: relative;
z-index: 1
}

.blog__zigzag {
width: 100%;
line-height: 0;
display: block
}

.blog__posts-area {
padding: 80px 0 40px;
background: #fff
}

.blog__posts-heading {
font-size: 38px;
line-height: 1.2;
color: #111;
margin: 0 0 8px;
text-decoration: underline;
text-underline-offset: 8px;
text-decoration-color: #EFFA4F
}

.blog__posts-sub {
font-size: 17px;
line-height: 1.5;
color: #555;
margin: 0 0 40px
}

.blog__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px
}

.blog__card {
background: #fff;
border-radius: 2px;
box-shadow: 1px 6px 28px -2px #186ee91c;
display: flex;
flex-direction: column;
position: relative;
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
transition: clip-path .15s ease-out, box-shadow .2s ease-out
}

.blog__card::before {
content: '';
display: block;
height: 4px;
background: #EFFA4F;
border-radius: 2px 2px 0 0;
flex-shrink: 0
}

.blog__card:hover {
clip-path: polygon(0 0, 100% 0, 100% 96%, 97% 100%, 0 100%);
box-shadow: 1px 10px 48px -2px #186ee921
}

.blog__card-image {
width: 100%;
height: 180px;
overflow: hidden;
flex-shrink: 0
}

.blog__card-image img {
width: 100%;
height: 180px;
object-fit: cover;
display: block;
transition: transform .5s ease-out
}

.blog__card:hover .blog__card-image img {
transform: scale(1.04)
}

.blog__card-body {
padding: 24px;
display: flex;
flex-direction: column;
gap: 8px;
flex: 1 1 auto
}

.blog__card-tags {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 8px
}

.blog__card-tag {
font-size: 14px;
line-height: 1.5;
color: #186EE9;
background: #186ee914;
border-radius: 40px;
padding: 2px 12px;
display: inline-block
}

.blog__card-tag--category {
color: #555;
background: #EDECEB
}

.blog__card-title {
font-size: 17px;
line-height: 1.5;
color: #111;
margin: 0;
text-decoration: none;
display: block;
font-weight: 700;
transition: color .15s ease
}

.blog__card-title:hover {
color: #186EE9
}

.blog__card-excerpt {
font-size: 14px;
line-height: 1.75;
color: #555;
margin: 0
}

.blog__card-link {
display: inline-block;
margin-top: 8px;
font-size: 14px;
line-height: 1.5;
color: #186EE9;
text-decoration: underline;
text-underline-offset: 5px;
text-decoration-color: transparent;
transition: text-decoration-color .18s ease-out;
align-self: flex-start
}

.blog__card-link:hover {
text-decoration-color: #186EE9
}

.blog__zigzag2 {
width: 100%;
line-height: 0;
display: block;
background: #fff
}

.blog__accent-area {
background: #111;
padding: 80px 0;
position: relative
}

.blog__accent-inner {
max-width: 1140px;
margin: 0 auto;
padding: 0 24px;
display: flex;
flex-direction: row;
gap: 80px;
align-items: flex-start
}

.blog__accent-pull {
flex: 0 0 280px;
display: flex;
flex-direction: column;
gap: 24px
}

.blog__accent-quote {
font-size: 28px;
line-height: 1.5;
color: #EFFA4F;
margin: 0;
font-weight: 700
}

.blog__accent-body {
flex: 1 1 0;
display: flex;
flex-direction: column;
gap: 24px
}

.blog__accent-heading {
font-size: 38px;
line-height: 1.2;
color: #fff;
margin: 0;
text-decoration: underline;
text-underline-offset: 8px;
text-decoration-color: #186EE9
}

.blog__accent-text {
font-size: 17px;
line-height: 1.75;
color: #EDECEB;
margin: 0
}

.blog__accent-cta {
display: inline-block;
background: #EFFA4F;
color: #111;
font-size: 17px;
line-height: 1.5;
padding: 8px 40px;
border-radius: 2px;
text-decoration: none;
font-weight: 700;
box-shadow: 1px 6px 28px -2px #effa4f1c;
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
transition: clip-path .15s ease-out, box-shadow .18s ease-out;
align-self: flex-start;
position: relative;
overflow: hidden
}

.blog__accent-cta:hover {
clip-path: polygon(0 0, 100% 0, 100% 88%, 96% 100%, 0 100%);
box-shadow: 1px 10px 48px -2px #effa4f21
}

.blog__accent-cta:active::after {
content: '';
position: absolute;
border-radius: 40px;
width: 8px;
height: 8px;
background: #186ee94d;
top: 50%;
left: 50%;
transform: scale(0);
animation: ripple-btn .5s ease-out;
pointer-events: none
}

@keyframes ripple-btn {
to {
transform: scale(20);
opacity: 0
}
}

.blog__guides-area {
padding: 80px 0;
background: #EDECEB
}

.blog__guides-heading {
font-size: 38px;
line-height: 1.2;
color: #111;
margin: 0 0 8px;
text-decoration: underline;
text-underline-offset: 8px;
text-decoration-color: #186EE9
}

.blog__guides-sub {
font-size: 17px;
line-height: 1.5;
color: #555;
margin: 0 0 40px
}

.blog__guides-stepped {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 24px;
align-items: start
}

.blog__guide-card {
background: #fff;
border-radius: 2px;
box-shadow: 1px 1px 6px -2px #186ee912;
display: flex;
flex-direction: column;
position: relative;
transition: box-shadow .2s ease-out
}

.blog__guide-card:nth-child(1) {
margin-top: 0
}

.blog__guide-card:nth-child(2) {
margin-top: 40px
}

.blog__guide-card:nth-child(3) {
margin-top: 80px
}

.blog__guide-card:nth-child(4) {
margin-top: 40px;
grid-column: 1 / 2
}

.blog__guide-card::before {
content: '';
display: block;
height: 4px;
background: #186EE9;
border-radius: 2px 2px 0 0;
flex-shrink: 0
}

.blog__guide-card:hover {
box-shadow: 1px 10px 48px -2px #186ee921
}

.blog__guide-body {
padding: 24px;
display: flex;
flex-direction: column;
gap: 8px
}

.blog__guide-tags {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 8px
}

.blog__guide-tag {
font-size: 14px;
line-height: 1.5;
color: #186EE9;
background: #186ee914;
border-radius: 40px;
padding: 2px 12px;
display: inline-block
}

.blog__guide-tag--category {
color: #555;
background: #EDECEB
}

.blog__guide-title {
font-size: 17px;
line-height: 1.5;
color: #111;
margin: 0;
font-weight: 700;
text-decoration: none;
display: block;
transition: color .15s ease
}

.blog__guide-title:hover {
color: #186EE9
}

.blog__guide-excerpt {
font-size: 14px;
line-height: 1.75;
color: #555;
margin: 0
}

.blog__guide-meta {
display: flex;
flex-direction: row;
gap: 8px;
flex-wrap: wrap;
align-items: center;
margin-top: 8px
}

.blog__guide-meta-item {
font-size: 14px;
line-height: 1.5;
color: #888;
display: flex;
flex-direction: row;
align-items: center;
gap: 4px
}

.blog__guide-icon {
display: inline-block;
width: 16px;
height: 16px;
flex-shrink: 0
}

.blog__guide-link {
display: inline-block;
font-size: 14px;
line-height: 1.5;
color: #186EE9;
text-decoration: underline;
text-underline-offset: 5px;
text-decoration-color: transparent;
transition: text-decoration-color .18s ease-out;
align-self: flex-start;
margin-top: 8px
}

.blog__guide-link:hover {
text-decoration-color: #186EE9
}

.blog__diagram-area {
padding: 80px 0;
background: #fff
}

.blog__diagram-heading {
font-size: 38px;
line-height: 1.2;
color: #111;
margin: 0 0 8px;
text-decoration: underline;
text-underline-offset: 8px;
text-decoration-color: #EFFA4F
}

.blog__diagram-sub {
font-size: 17px;
line-height: 1.5;
color: #555;
margin: 0 0 40px
}

.blog__diagram-layout {
display: flex;
flex-direction: row;
gap: 40px;
align-items: flex-start
}

.blog__diagram-visual {
flex: 0 0 420px;
position: relative
}

.blog__diagram-svg {
width: 100%;
height: auto;
display: block
}

.blog__diagram-text {
flex: 1 1 0;
display: flex;
flex-direction: column;
gap: 24px
}

.blog__diagram-item {
display: flex;
flex-direction: row;
gap: 24px;
align-items: flex-start;
padding: 24px;
border-radius: 2px;
background: #EDECEB;
box-shadow: inset 1px 1px 6px -2px #186ee912;
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
transition: clip-path .15s ease-out, background .18s ease-out
}

.blog__diagram-item:hover {
clip-path: polygon(0 0, 100% 0, 100% 90%, 98% 100%, 0 100%);
background: #effa4f2e
}

.blog__diagram-item-icon {
flex-shrink: 0;
width: 40px;
height: 40px;
background: #111;
border-radius: 2px;
display: flex;
align-items: center;
justify-content: center;
transition: transform .5s ease-out
}

.blog__diagram-item:hover .blog__diagram-item-icon {
transform: rotate(360deg)
}

.blog__diagram-item-icon svg {
width: 22px;
height: 22px
}

.blog__diagram-item-label {
font-size: 17px;
line-height: 1.5;
color: #111;
font-weight: 700;
margin: 0 0 4px
}

.blog__diagram-item-desc {
font-size: 14px;
line-height: 1.75;
color: #555;
margin: 0
}

.blog__dashed-frame {
border: 2px dashed #186ee940;
border-radius: 2px;
padding: 40px;
margin-top: 40px
}

.blog__dashed-inner {
display: flex;
flex-direction: column;
gap: 8px
}

.blog__dashed-heading {
font-size: 28px;
line-height: 1.5;
color: #111;
margin: 0
}

.blog__dashed-text {
font-size: 17px;
line-height: 1.75;
color: #555;
margin: 0
}

.blog__dashed-link {
display: inline-block;
margin-top: 8px;
font-size: 17px;
line-height: 1.5;
color: #186EE9;
text-decoration: underline;
text-underline-offset: 6px;
text-decoration-color: transparent;
font-weight: 700;
transition: text-decoration-color .18s ease-out;
align-self: flex-start
}

.blog__dashed-link:hover {
text-decoration-color: #186EE9
}

@media (max-width: 1024px) {
.blog__strip-heading {
font-size: 38px
}

.blog__grid {
grid-template-columns: repeat(2, 1fr)
}

.blog__guides-stepped {
grid-template-columns: 1fr 1fr
}

.blog__guide-card:nth-child(3) {
margin-top: 40px
}

.blog__guide-card:nth-child(4) {
margin-top: 0;
grid-column: auto
}

.blog__diagram-layout {
flex-direction: column
}

.blog__diagram-visual {
flex: 0 0 auto;
width: 100%;
max-width: 420px
}

.blog__accent-inner {
flex-direction: column;
gap: 40px
}

.blog__accent-pull {
flex: 0 0 auto
}
}

@media (max-width: 640px) {
.blog__strip-inner {
flex-direction: column;
gap: 24px
}

.blog__strip-image {
flex: 0 0 auto;
width: 100%
}

.blog__strip-image img {
width: 100%;
height: 200px
}

.blog__strip-heading {
font-size: 38px
}

.blog__grid {
grid-template-columns: 1fr
}

.blog__guides-stepped {
grid-template-columns: 1fr
}

.blog__guide-card:nth-child(2),
.blog__guide-card:nth-child(3),
.blog__guide-card:nth-child(4) {
margin-top: 0;
grid-column: auto
}

.blog__dashed-frame {
padding: 24px
}

.blog__accent-inner {
gap: 24px
}
}

@media (max-width: 360px) {
.blog__strip-heading {
font-size: 28px
}

.blog__posts-heading,
.blog__guides-heading,
.blog__diagram-heading,
.blog__accent-heading {
font-size: 28px
}

.blog__container {
padding: 0 8px
}

.blog__strip-inner {
padding: 0 8px
}

.blog__accent-inner {
padding: 0 8px
}
}

.about-author {
max-width: 100%;
overflow-x: hidden
}

.about-author .author-portrait-block {
max-width: 1140px;
margin: 0 auto;
padding: 80px 40px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: end
}

.about-author .author-portrait-block .portrait-column {
display: flex;
flex-direction: column;
gap: 24px
}

.about-author .author-portrait-block .portrait-frame {
width: 100%;
aspect-ratio: 2/3;
border-radius: 40px 2px 40px 2px;
overflow: hidden;
box-shadow: 1px 10px 48px -2px #186ee921;
position: relative
}

.about-author .author-portrait-block .portrait-frame::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 40%;
background: linear-gradient(to bottom, #14141e8c 0%, transparent 100%);
pointer-events: none
}

.about-author .author-portrait-block .portrait-frame img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: top;
display: block
}

.about-author .author-portrait-block .portrait-label {
font-size: 14px;
line-height: 1.5;
color: #555050;
letter-spacing: .04em;
text-transform: uppercase
}

.about-author .author-portrait-block .text-column {
display: flex;
flex-direction: column;
gap: 24px;
padding-bottom: 40px
}

.about-author .author-portrait-block .text-column .author-name {
font-size: 70px;
line-height: 1.2;
color: #1a1214;
margin: 0
}

.about-author .author-portrait-block .text-column .author-name span.underline-word {
display: inline-block;
position: relative
}

.about-author .author-portrait-block .text-column .author-name span.underline-word::after {
content: "";
position: absolute;
bottom: 4px;
left: 0;
width: 0;
height: 3px;
background: #EFFA4F;
animation: draw-underline .6s ease-out .5s forwards
}

@keyframes draw-underline {
to {
width: 100%
}
}

.about-author .author-portrait-block .text-column .author-role {
font-size: 17px;
line-height: 1.5;
color: #186EE9;
margin: 0
}

.about-author .author-portrait-block .text-column .author-intro {
font-size: 17px;
line-height: 1.75;
color: #2d2a2a;
margin: 0
}

.about-author .author-portrait-block .text-column .author-intro+.author-intro {
margin-top: 8px
}

.about-author .author-portrait-block .text-column .contact-link {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 14px;
line-height: 1.5;
color: #186EE9;
text-decoration: underline;
text-underline-offset: 6px;
transition: color .15s ease-out, clip-path .5s ease;
clip-path: inset(0 0 0 0 round 2px)
}

.about-author .author-portrait-block .text-column .contact-link:hover {
color: #0f4db5;
clip-path: inset(0 2px 0 2px round 2px)
}

.about-author .divider-rhythm {
max-width: 1140px;
margin: 0 auto;
padding: 0 40px;
display: flex;
align-items: center;
gap: 8px
}

.about-author .divider-rhythm .dash-dot-line {
flex: 1;
height: 1px;
background: repeating-linear-gradient(to right, #186EE9 0px, #186EE9 6px, transparent 6px, transparent 10px, #EFFA4F 10px, #EFFA4F 12px, transparent 12px, transparent 18px);
opacity: .4
}

.about-author .philosophy-block {
background: #EDECEB;
padding: 80px 0;
position: relative
}

.about-author .philosophy-block .philosophy-inner {
max-width: 1140px;
margin: 0 auto;
padding: 0 40px;
display: grid;
grid-template-columns: 2fr 1fr;
gap: 80px;
align-items: start
}

.about-author .philosophy-block .philosophy-body {
display: flex;
flex-direction: column;
gap: 24px
}

.about-author .philosophy-block .philosophy-body .section-heading {
font-size: 38px;
line-height: 1.2;
color: #1a1214;
margin: 0;
padding-bottom: 8px;
border-bottom: 2px solid #186EE9;
display: inline-block
}

.about-author .philosophy-block .philosophy-body .body-text {
font-size: 17px;
line-height: 1.75;
color: #2d2a2a;
margin: 0
}

.about-author .philosophy-block .philosophy-aside {
display: flex;
flex-direction: column;
gap: 24px;
padding-top: 40px
}

.about-author .philosophy-block .philosophy-aside .pull-quote {
font-size: 28px;
line-height: 1.5;
color: #186EE9;
margin: 0;
font-style: italic
}

.about-author .philosophy-block .philosophy-aside .dots-decoration {
display: flex;
flex-direction: row;
gap: 8px;
align-items: flex-end;
padding-top: 8px
}

.about-author .philosophy-block .philosophy-aside .dots-decoration .dot {
border-radius: 40px;
background: #EFFA4F;
flex-shrink: 0
}

.about-author .philosophy-block .philosophy-aside .dots-decoration .dot--large {
width: 24px;
height: 24px
}

.about-author .philosophy-block .philosophy-aside .dots-decoration .dot--medium {
width: 16px;
height: 16px;
opacity: .7
}

.about-author .philosophy-block .philosophy-aside .dots-decoration .dot--small {
width: 8px;
height: 8px;
opacity: .45
}

.about-author .philosophy-block .philosophy-aside .dots-decoration .dot--tiny {
width: 5px;
height: 5px;
opacity: .25
}

.about-author .divider-wave {
width: 100%;
overflow: hidden;
line-height: 0
}

.about-author .divider-wave svg {
display: block;
width: 100%
}

.about-author .approach-block {
padding: 80px 0;
background: #fff
}

.about-author .approach-block .approach-inner {
max-width: 1140px;
margin: 0 auto;
padding: 0 40px;
display: flex;
flex-direction: column;
gap: 40px
}

.about-author .approach-block .approach-header {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: end
}

.about-author .approach-block .approach-header .approach-heading {
font-size: 38px;
line-height: 1.2;
color: #1a1214;
margin: 0
}

.about-author .approach-block .approach-header .approach-subtitle {
font-size: 17px;
line-height: 1.75;
color: #2d2a2a;
margin: 0
}

.about-author .approach-block .approach-images {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 24px
}

.about-author .approach-block .approach-images .image-item {
display: flex;
flex-direction: column;
gap: 8px
}

.about-author .approach-block .approach-images .image-frame {
aspect-ratio: 4/3;
border-radius: 2px 40px 2px 40px;
overflow: hidden;
box-shadow: 1px 6px 28px -2px #186ee91c;
transition: box-shadow .5s ease-out
}

.about-author .approach-block .approach-images .image-frame:hover {
box-shadow: 1px 10px 48px -2px #186ee921
}

.about-author .approach-block .approach-images .image-frame img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform .55s ease-out;
clip-path: inset(0 round 2px 40px 2px 40px)
}

.about-author .approach-block .approach-images .image-frame:hover img {
transform: scale(1.04);
clip-path: inset(0 round 2px 20px 2px 20px)
}

.about-author .approach-block .approach-images .image-caption {
font-size: 14px;
line-height: 1.5;
color: #555050;
padding: 0 8px
}

.about-author .approach-block .approach-text-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px
}

.about-author .approach-block .approach-text-row .text-piece {
font-size: 17px;
line-height: 1.75;
color: #2d2a2a;
margin: 0
}

.about-author .accent-band {
background: #186EE9;
padding: 80px 0;
position: relative;
overflow: hidden
}

.about-author .accent-band::before {
content: "";
position: absolute;
top: -40px;
right: -40px;
width: 200px;
height: 200px;
border-radius: 40px;
background: conic-gradient(from 307deg, #effa4f2e 0%, #effa4f0a 50%, transparent 100%);
pointer-events: none
}

.about-author .accent-band .band-inner {
max-width: 1140px;
margin: 0 auto;
padding: 0 40px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: center
}

.about-author .accent-band .band-heading {
font-size: 38px;
line-height: 1.2;
color: #fff;
margin: 0
}

.about-author .accent-band .band-heading span.accent-yellow {
color: #EFFA4F
}

.about-author .accent-band .band-right {
display: flex;
flex-direction: column;
gap: 24px
}

.about-author .accent-band .band-right .band-text {
font-size: 17px;
line-height: 1.75;
color: #ffffffe0;
margin: 0
}

.about-author .accent-band .band-right .band-link {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 24px;
background: #EFFA4F;
color: #1a1214;
font-size: 14px;
line-height: 1.5;
border-radius: 2px;
text-decoration: none;
font-weight: 600;
letter-spacing: .03em;
text-transform: uppercase;
transition: background .15s ease-out, color .15s ease-out;
clip-path: inset(0 0 0 0 round 2px);
align-self: flex-start;
position: relative;
overflow: hidden
}

.about-author .accent-band .band-right .band-link:hover {
background: #fff;
color: #186EE9;
clip-path: inset(0 0 0 0 round 40px)
}

.about-author .accent-band .band-right .band-link:focus-visible {
outline: 2px solid #EFFA4F;
outline-offset: 4px
}

.about-author .char-hover-word {
display: inline-flex;
flex-wrap: nowrap
}

.about-author .char-hover-word .ch {
display: inline-block;
transition: color .12s ease-out
}

.about-author .char-hover-word:hover .ch {
color: #EFFA4F
}

.about-author .char-hover-word:hover .ch:nth-child(1) {
transition-delay: 0s
}

.about-author .char-hover-word:hover .ch:nth-child(2) {
transition-delay: .04s
}

.about-author .char-hover-word:hover .ch:nth-child(3) {
transition-delay: .08s
}

.about-author .char-hover-word:hover .ch:nth-child(4) {
transition-delay: .12s
}

.about-author .char-hover-word:hover .ch:nth-child(5) {
transition-delay: .16s
}

.about-author .char-hover-word:hover .ch:nth-child(6) {
transition-delay: .2s
}

.about-author .char-hover-word:hover .ch:nth-child(7) {
transition-delay: .24s
}

.about-author .fade-in {
opacity: 0;
animation: fade-reveal .55s ease-out forwards
}

.about-author .fade-in--delay-1 {
animation-delay: .1s
}

.about-author .fade-in--delay-2 {
animation-delay: .25s
}

.about-author .fade-in--delay-3 {
animation-delay: .4s
}

.about-author .fade-in--delay-4 {
animation-delay: .55s
}

@keyframes fade-reveal {
from {
opacity: 0;
transform: translateY(10px)
}

to {
opacity: 1;
transform: translateY(0)
}
}

@media (max-width: 1024px) {
.about-author .author-portrait-block {
grid-template-columns: 1fr 1fr;
gap: 40px;
padding: 80px 24px
}

.about-author .author-portrait-block .text-column .author-name {
font-size: 38px
}

.about-author .philosophy-block .philosophy-inner {
grid-template-columns: 1fr;
gap: 40px;
padding: 0 24px
}

.about-author .philosophy-block .philosophy-aside {
padding-top: 0;
flex-direction: row;
align-items: center;
flex-wrap: wrap
}

.about-author .philosophy-block .philosophy-aside .pull-quote {
font-size: 17px;
flex: 1;
min-width: 200px
}

.about-author .approach-block .approach-inner {
padding: 0 24px
}

.about-author .approach-block .approach-header {
grid-template-columns: 1fr;
gap: 24px
}

.about-author .approach-block .approach-images {
grid-template-columns: 1fr 1fr
}

.about-author .approach-block .approach-images .image-item:last-child {
display: none
}

.about-author .approach-block .approach-text-row {
grid-template-columns: 1fr;
gap: 24px
}

.about-author .accent-band .band-inner {
grid-template-columns: 1fr;
gap: 40px;
padding: 0 24px
}

.about-author .divider-rhythm {
padding: 0 24px
}
}

@media (max-width: 640px) {
.about-author .author-portrait-block {
grid-template-columns: 1fr;
gap: 24px;
padding: 40px 24px
}

.about-author .author-portrait-block .portrait-frame {
max-width: 280px
}

.about-author .author-portrait-block .text-column .author-name {
font-size: 28px
}

.about-author .philosophy-block {
padding: 40px 0
}

.about-author .philosophy-block .philosophy-inner {
padding: 0 24px
}

.about-author .approach-block {
padding: 40px 0
}

.about-author .approach-block .approach-images {
grid-template-columns: 1fr
}

.about-author .approach-block .approach-images .image-item:last-child {
display: flex
}

.about-author .accent-band {
padding: 40px 0
}

.about-author .accent-band .band-heading {
font-size: 28px
}
}

@media (max-width: 360px) {
.about-author .author-portrait-block {
padding: 40px 8px
}

.about-author .philosophy-block .philosophy-inner {
padding: 0 8px
}

.about-author .approach-block .approach-inner {
padding: 0 8px
}

.about-author .accent-band .band-inner {
padding: 0 8px
}

.about-author .divider-rhythm {
padding: 0 8px
}
}

.success-page {
min-height: 60vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 80px 24px;
background-color: #fff
}

.success-page .confirmation__wrapper {
max-width: 1140px;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
text-align: center
}

.success-page .confirmation__icon {
width: 64px;
height: 64px;
margin-bottom: 40px;
flex-shrink: 0
}

.success-page .confirmation__icon .icon-circle {
fill: none;
stroke: #186EE9;
stroke-width: 2;
transition: stroke .5s ease-out
}

.success-page .confirmation__icon .icon-check {
fill: none;
stroke: #EFFA4F;
stroke-width: 2.5;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 30;
stroke-dashoffset: 0
}

.success-page .confirmation__label {
font-size: 14px;
line-height: 1.5;
letter-spacing: .12em;
text-transform: uppercase;
color: #186EE9;
margin-bottom: 8px
}

.success-page .confirmation__heading {
font-size: 38px;
line-height: 1.2;
color: #1b1b1b;
margin-bottom: 24px;
text-decoration: underline;
text-underline-offset: 6px;
text-decoration-color: #EFFA4F;
text-decoration-thickness: 3px
}

.success-page .confirmation__text {
font-size: 17px;
line-height: 1.75;
color: #3a3a3a;
max-width: 520px;
margin-bottom: 8px
}

.success-page .confirmation__note {
font-size: 14px;
line-height: 1.5;
color: #3a3a3a;
opacity: .65;
max-width: 420px;
margin-bottom: 40px
}

.success-page .confirmation__divider {
width: 48px;
height: 2px;
background: #EDECEB;
margin-bottom: 40px;
border-radius: 2px
}

.success-page .confirmation__action {
display: inline-block;
padding: 24px 40px;
font-size: 14px;
line-height: 1.2;
letter-spacing: .08em;
text-transform: uppercase;
text-decoration: none;
color: #1b1b1b;
background-color: #EFFA4F;
border-radius: 2px;
box-shadow: 1px 6px 28px -2px #effa4f1c;
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
transition: clip-path .15s ease-out, box-shadow .5s ease-out
}

.success-page .confirmation__action:hover {
clip-path: polygon(0 0, 100% 0, 98% 100%, 2% 100%);
box-shadow: 1px 10px 48px -2px #effa4f21
}

.success-page .confirmation__action:focus {
outline: 2px solid #186EE9;
outline-offset: 4px
}

.success-page .confirmation__action:active {
box-shadow: 1px 1px 6px -2px #effa4f12
}

@media (max-width: 640px) {
.success-page {
padding: 80px 24px
}

.success-page .confirmation__heading {
font-size: 28px
}

.success-page .confirmation__text {
font-size: 17px
}
}

@media (max-width: 360px) {
.success-page .confirmation__heading {
font-size: 28px
}

.success-page .confirmation__action {
padding: 24px
}
}

h1, h2, h3, h4, h5, h6 {word-break: break-word;}