html {
  margin: 0;
  padding: 0;
  box-sizing: border-box
}

body {
  margin: 0;
  font-family: 'Arimo', sans-serif;
  font-size: 16px;
  line-height: 1.55;
  color: #2b2b2b;
  background: linear-gradient(165deg, #FFF 0%, #fef5f6 48%, #FFF 100%);
  -webkit-text-size-adjust: 100%;
  word-break: break-word;
  overflow-wrap: break-word
}

.top-bar {
  background: linear-gradient(92deg, #ff62680a 0%, #1267b10a 100%);
  border-bottom: 1px solid #1267b117;
  padding: 12px 0
}

.top-bar-inner {
  max-width: 1024px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px
}

.contact-quick {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 13px;
  color: #4a4a4a
}

.contact-quick a {
  color: #1267B1;
  text-decoration: none;
  transition: color .55s ease-in-out
}

.contact-quick a:hover {
  color: #FF6268
}

.trust-marker {
  font-size: 13px;
  color: #5a5a5a;
  font-weight: 700;
  letter-spacing: .3px
}

.brand-strip {
  background: #FFF;
  border-bottom: 2px solid #ff62681f;
  box-shadow: 0 3px 3px -1px #1267b112 0 5px 14px -1px #1267b114;
  padding: 20px 0
}

.brand-strip-inner {
  max-width: 1024px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px
}

.brand-identity {
  display: flex;
  align-items: center;
  gap: 20px
}

.logo-box {
  background: #FFF;
  border: 2px solid #1267b124;
  border-radius: 9px;
  padding: 12px;
  box-shadow: 0 5px 14px -1px #ff626814 0 3px 3px -1px #1267b112;
  transition: box-shadow .6s cubic-bezier(0.25, 0.46, 0.45, 0.94), border-color .6s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

.logo-box:hover {
  box-shadow: 0 10px 40px -1px #ff626824 0 5px 14px -1px #1267b114;
  border-color: #ff62683d
}

.logo-box img {
  display: block;
  width: 40px;
  height: 40px;
  object-fit: contain
}

.brand-text {
  display: flex;
  flex-direction: column;
  gap: 6px
}

.company-name {
  font-size: 25px;
  font-weight: 700;
  color: #1267B1;
  line-height: 1.1;
  letter-spacing: -.3px
}

.tagline {
  font-size: 13px;
  color: #6a6a6a;
  line-height: 1.1
}

.nav-primary {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap
}

.nav-primary a {
  font-size: 16px;
  font-weight: 400;
  color: #3a3a3a;
  text-decoration: none;
  padding: 12px 20px;
  border-radius: 5px;
  transition: background .55s ease-in-out, color .55s ease-in-out, filter .55s ease-in-out;
  background: #1267b108;
  border: 1px solid transparent
}

.nav-primary a:hover {
  background: #ff626814;
  color: #FF6268;
  border-color: #ff626829;
  filter: brightness(1.08)
}

.nav-primary a:focus {
  outline: 2px dashed #1267B1;
  outline-offset: 3px
}

@media (max-width: 768px) {
  .brand-strip-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px
  }

  .nav-primary {
    width: 100%;
    flex-direction: column;
    align-items: stretch
  }

  .nav-primary a {
    text-align: center
  }

  .top-bar-inner {
    flex-direction: column;
    align-items: flex-start
  }
}

.base-footer {
  background: linear-gradient(178deg, #f4f9fc 0%, #e8f2f8 100%);
  border-top: 3px solid #1267b12e;
  padding: 80px 0 40px;
  margin-top: 80px
}

.footer-inner {
  max-width: 1024px;
  margin: 0 auto;
  padding: 0 20px
}

.footer-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 40px;
  margin-bottom: 60px
}

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 20px
}

.footer-logo-box {
  background: #FFF;
  border: 2px solid #1267b124;
  border-radius: 9px;
  padding: 12px;
  width: fit-content;
  box-shadow: 0 3px 3px -1px #1267b112 0 5px 14px -1px #1267b114
}

.footer-logo-box img {
  display: block;
  width: 38px;
  height: 38px;
  object-fit: contain
}

.footer-company-name {
  font-size: 19px;
  font-weight: 700;
  color: #1267B1;
  line-height: 1.1;
  margin-top: 6px
}

.footer-description {
  font-size: 13px;
  color: #5a5a5a;
  line-height: 1.55;
  margin-top: 12px
}

.footer-group {
  display: flex;
  flex-direction: column;
  gap: 20px
}

.footer-heading {
  font-size: 16px;
  font-weight: 700;
  color: #2b2b2b;
  line-height: 1.1;
  letter-spacing: .2px
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 12px
}

.footer-links a {
  font-size: 13px;
  color: #1267B1;
  text-decoration: none;
  transition: color .5s ease-in-out, padding-left .5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  padding-left: 0
}

.footer-links a:hover {
  color: #FF6268;
  padding-left: 6px
}

.footer-links a:focus {
  outline: 2px dashed #1267B1;
  outline-offset: 3px
}

.contact-list {
  display: flex;
  flex-direction: column;
  gap: 12px
}

.contact-item {
  display: flex;
  flex-direction: column;
  gap: 6px
}

.contact-label {
  font-size: 13px;
  font-weight: 700;
  color: #4a4a4a;
  line-height: 1.1
}

.contact-value {
  font-size: 13px;
  color: #1267B1;
  line-height: 1.55
}

.contact-value a {
  color: #1267B1;
  text-decoration: none;
  transition: color .55s ease-in-out
}

.contact-value a:hover {
  color: #FF6268
}

.footer-bottom {
  border-top: 1px solid #1267b124;
  padding-top: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px
}

.copyright {
  font-size: 13px;
  color: #5a5a5a;
  line-height: 1.55
}

.footer-nav-legal {
  display: flex;
  gap: 20px;
  flex-wrap: wrap
}

.footer-nav-legal a {
  font-size: 13px;
  color: #1267B1;
  text-decoration: none;
  transition: color .55s ease-in-out
}

.footer-nav-legal a:hover {
  color: #FF6268
}

.footer-nav-legal a:focus {
  outline: 2px dashed #1267B1;
  outline-offset: 3px
}

@media (max-width: 768px) {
  .footer-columns {
    grid-template-columns: 1fr
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start
  }
}

.consent-popup {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: #FFF;
  border: 2px solid #1267b129;
  border-radius: 9px;
  padding: 20px;
  max-width: 380px;
  box-shadow: 0 10px 40px -1px #1267b124 0 5px 14px -1px #1267b114;
  z-index: 1000;
  display: none;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .65s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform .65s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

.consent-popup.visible {
  opacity: 1;
  transform: translateY(0)
}

.consent-message {
  font-size: 13px;
  color: #3a3a3a;
  line-height: 1.55;
  margin-bottom: 20px
}

.consent-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap
}

.btn-accept {
  flex: 1;
  font-size: 13px;
  font-weight: 700;
  color: #FFF;
  background: linear-gradient(135deg, #1267B1 0%, #0e4d85 100%);
  border: none;
  border-radius: 5px;
  padding: 12px 20px;
  cursor: pointer;
  transition: filter .55s ease-in-out, box-shadow .55s ease-in-out;
  box-shadow: 0 3px 3px -1px #1267b112
}

.btn-accept:hover {
  filter: brightness(1.12);
  box-shadow: 0 5px 14px -1px #1267b114
}

.btn-accept:focus {
  outline: 2px dashed #1267B1;
  outline-offset: 3px
}

.link-decline {
  flex: 1;
  font-size: 13px;
  font-weight: 400;
  color: #1267B1;
  background: transparent;
  border: 1px solid #1267b13d;
  border-radius: 5px;
  padding: 12px 20px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  transition: background .55s ease-in-out, color .55s ease-in-out, border-color .55s ease-in-out
}

.link-decline:hover {
  background: #ff62680f;
  color: #FF6268;
  border-color: #ff62683d
}

.link-decline:focus {
  outline: 2px dashed #1267B1;
  outline-offset: 3px
}

@media (max-width: 768px) {
  .consent-popup {
    left: 20px;
    right: 20px;
    max-width: none
  }

  .consent-actions {
    flex-direction: column
  }
}

.terms-section {
  max-width: 1024px;
  margin: 0 auto;
  padding: 80px 20px
}

.terms-section h1 {
  font-size: 46px;
  line-height: 1.1;
  color: #1267B1;
  margin-bottom: 40px;
  letter-spacing: -.02em
}

.terms-section h2 {
  font-size: 34px;
  line-height: 1.1;
  color: #1267B1;
  margin-top: 80px;
  margin-bottom: 20px;
  letter-spacing: -.01em
}

.terms-section h3 {
  font-size: 25px;
  line-height: 1.1;
  color: #FF6268;
  margin-top: 40px;
  margin-bottom: 20px
}

.terms-section h4 {
  font-size: 19px;
  line-height: 1.55;
  color: #1267B1;
  margin-top: 40px;
  margin-bottom: 12px
}

.terms-section h5 {
  font-size: 16px;
  line-height: 1.55;
  color: #333;
  margin-top: 20px;
  margin-bottom: 12px;
  font-weight: 700
}

.terms-section h6 {
  font-size: 16px;
  line-height: 1.55;
  color: #555;
  margin-top: 20px;
  margin-bottom: 12px;
  font-weight: 600
}

.terms-section p {
  font-size: 16px;
  line-height: 1.55;
  color: #2a2a2a;
  margin-bottom: 20px
}

.terms-section strong,
.terms-section b {
  font-weight: 700;
  color: #1a1a1a
}

.terms-section em,
.terms-section i {
  font-style: italic
}

.terms-section a {
  color: #1267B1;
  text-decoration: underline;
  text-decoration-color: #1267b14d;
  text-underline-offset: 2px;
  transition: color .55s ease-in-out, text-decoration-color .55s ease-in-out
}

.terms-section a:hover {
  color: #FF6268;
  text-decoration-color: #ff626880
}

.terms-section hr {
  border: none;
  height: 2px;
  background: linear-gradient(to right, #ff626826, #1267b126);
  margin: 80px 0
}

.terms-section div {
  margin-bottom: 20px
}

@media (max-width: 768px) {
  .terms-section {
    padding: 40px 20px
  }

  .terms-section h1 {
    font-size: 34px;
    margin-bottom: 20px
  }

  .terms-section h2 {
    font-size: 25px;
    margin-top: 40px;
    margin-bottom: 12px
  }

  .terms-section h3 {
    font-size: 19px;
    margin-top: 20px;
    margin-bottom: 12px
  }

  .terms-section hr {
    margin: 40px 0
  }
}

.blog-post {
  background: linear-gradient(211deg, #ff626808 0%, transparent 52%, #1267b10a 100%);
  position: relative;
  overflow: hidden
}

.blog-post::before {
  content: '';
  position: absolute;
  top: 20%;
  right: -80px;
  width: 280px;
  height: 280px;
  border: 2px solid #ff626814;
  border-radius: 24px;
  transform: rotate(22deg);
  animation: slow-spin 180s linear infinite;
  pointer-events: none
}

@keyframes slow-spin {
  from {
    transform: rotate(22deg)
  }

  to {
    transform: rotate(382deg)
  }
}

.blog-post::after {
  content: '';
  position: absolute;
  bottom: 15%;
  left: -60px;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle at center, #1267b10f, transparent 70%);
  border-radius: 50%;
  animation: shadow-drift 25s ease-in-out infinite alternate;
  pointer-events: none
}

@keyframes shadow-drift {
  from {
    transform: translateX(0) translateY(0)
  }

  to {
    transform: translateX(120px) translateY(-80px)
  }
}

.post-hero {
  max-width: 1024px;
  margin: 0 auto;
  padding: 80px 20px;
  display: flex;
  gap: 40px;
  align-items: flex-start
}

.hero-img-col {
  flex: 0 0 280px;
  position: relative
}

.hero-img-col::before,
.hero-img-col::after {
  content: '';
  position: absolute;
  width: 40px;
  height: 40px;
  border: 3px solid #FF6268;
  pointer-events: none
}

.hero-img-col::before {
  top: -12px;
  left: -12px;
  border-right: none;
  border-bottom: none;
  border-radius: 2px 0 0 0
}

.hero-img-col::after {
  bottom: -12px;
  right: -12px;
  border-left: none;
  border-top: none;
  border-radius: 0 0 2px 0
}

.hero-img-col img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 5px;
  filter: grayscale(100%);
  transition: filter .6s ease-in-out
}

.hero-img-col:hover img {
  filter: grayscale(0%)
}

.hero-txt-col {
  flex: 1;
  padding: 20px 0
}

.post-meta {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
  font-size: 13px;
  color: #1267b1cc;
  text-transform: uppercase;
  letter-spacing: .8px
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 6px
}

.meta-icon {
  width: 16px;
  height: 16px;
  display: inline-block
}

.meta-icon svg {
  width: 100%;
  height: 100%;
  fill: currentColor
}

.hero-txt-col h1 {
  font-size: 46px;
  line-height: 1.1;
  margin: 0 0 20px;
  color: #1267B1;
  letter-spacing: -.5px
}

.hero-intro {
  font-size: 19px;
  line-height: 1.55;
  color: #000000bf;
  margin: 0
}

.divider-thick {
  max-width: 1024px;
  margin: 0 auto;
  height: 4px;
  background: linear-gradient(90deg, transparent, #FF6268, transparent)
}

.article-body {
  max-width: 1024px;
  margin: 0 auto;
  padding: 80px 20px;
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 40px;
  position: relative
}

.side-note {
  font-size: 13px;
  line-height: 1.55;
  color: #0000008c;
  padding: 20px;
  background: #ff62680a;
  border-radius: 5px;
  position: sticky;
  top: 80px;
  align-self: start
}

.main-content {
  font-size: 16px;
  line-height: 1.55;
  color: #000000d9
}

.main-content p {
  margin: 0 0 20px
}

.main-content h2 {
  font-size: 34px;
  line-height: 1.1;
  margin: 40px 0 20px;
  color: #1267B1;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 700
}

.main-content h4 {
  font-size: 19px;
  line-height: 1.1;
  margin: 40px 0 12px;
  color: #FF6268;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-weight: 700
}

.main-content abbr {
  text-decoration: none;
  border-bottom: 2px dotted #FF6268;
  cursor: help
}

.main-content mark {
  background: linear-gradient(211deg, #ff626826 0%, transparent 52%, #1267b11f 100%);
  color: inherit;
  padding: 2px 6px;
  border-radius: 2px
}

.main-content time {
  color: #1267B1;
  font-weight: 600
}

.mesh-section {
  background: radial-gradient(ellipse at 20% 30%, #ff626814, transparent 50%), radial-gradient(ellipse at 80% 70%, #1267b117, transparent 50%), radial-gradient(ellipse at 50% 50%, #ff62680a, transparent 60%);
  padding: 80px 20px;
  position: relative
}

.mesh-content {
  max-width: 1024px;
  margin: 0 auto;
  display: flex;
  gap: 40px;
  align-items: center
}

.diagram-side {
  flex: 0 0 420px;
  background: #FFF;
  border-radius: 9px;
  padding: 40px;
  box-shadow: 0 10px 40px -1px #ff626824
}

.diagram-placeholder {
  width: 100%;
  height: 280px;
  background: linear-gradient(135deg, #1267b114 0%, #ff626814 100%);
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  position: relative;
  overflow: hidden
}

.diagram-grid {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: linear-gradient(#1267b11a 1px, transparent 1px), linear-gradient(90deg, #1267b11a 1px, transparent 1px);
  background-size: 40px 40px
}

.diagram-shapes {
  position: relative;
  z-index: 1
}

.shape-circle {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #ff62684d;
  position: absolute;
  top: 40px;
  left: 80px;
  animation: float-up 8s ease-in-out infinite
}

.shape-rect {
  width: 80px;
  height: 50px;
  background: #1267b14d;
  position: absolute;
  bottom: 60px;
  right: 60px;
  border-radius: 5px;
  animation: float-down 10s ease-in-out infinite
}

@keyframes float-up {

  0%,
  100% {
    transform: translateY(0)
  }

  50% {
    transform: translateY(-20px)
  }
}

@keyframes float-down {

  0%,
  100% {
    transform: translateY(0)
  }

  50% {
    transform: translateY(20px)
  }
}

.legend-list {
  list-style: none;
  margin: 0;
  padding: 0
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  font-size: 13px;
  color: #000000bf
}

.legend-marker {
  width: 20px;
  height: 20px;
  border-radius: 2px;
  flex-shrink: 0
}

.marker-primary {
  background: #FF6268
}

.marker-secondary {
  background: #1267B1
}

.marker-tertiary {
  background: #ff626866
}

.marker-quaternary {
  background: #1267b166
}

.text-side {
  flex: 1
}

.text-side h2 {
  font-size: 34px;
  line-height: 1.1;
  margin: 0 0 20px;
  color: #1267B1;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 700
}

.text-side p {
  font-size: 16px;
  line-height: 1.55;
  color: #000000bf;
  margin: 0 0 20px;
  text-align: center
}

.divider-thick-alt {
  max-width: 1024px;
  margin: 0 auto;
  height: 4px;
  background: linear-gradient(90deg, transparent, #1267B1, transparent)
}

.tools-fixed {
  position: fixed;
  bottom: 40px;
  right: 40px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 100
}

.tool-btn {
  width: 52px;
  height: 52px;
  background: #FF6268;
  border: none;
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 5px 14px -1px #ff62684d;
  transition: transform .55s cubic-bezier(0.25, 0.46, 0.45, 0.94), filter .55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  text-decoration: none;
  color: #FFF
}

.tool-btn:hover {
  transform: translateY(-4px);
  filter: brightness(1.15)
}

.tool-btn:active {
  transform: translateY(-2px)
}

.tool-icon {
  width: 24px;
  height: 24px
}

.tool-icon svg {
  width: 100%;
  height: 100%;
  fill: currentColor
}

@media (max-width: 768px) {
  .post-hero {
    flex-direction: column;
    padding: 40px 20px
  }

  .hero-img-col {
    flex: 0 0 auto;
    width: 100%;
    max-width: 420px;
    margin: 0 auto
  }

  .hero-txt-col h1 {
    font-size: 34px
  }

  .hero-intro {
    font-size: 16px
  }

  .article-body {
    grid-template-columns: 1fr;
    padding: 40px 20px;
    gap: 20px
  }

  .side-note {
    position: static;
    margin-bottom: 20px
  }

  .main-content h2 {
    font-size: 25px
  }

  .main-content h4 {
    font-size: 16px
  }

  .mesh-section {
    padding: 40px 20px
  }

  .mesh-content {
    flex-direction: column
  }

  .diagram-side {
    flex: 0 0 auto;
    width: 100%
  }

  .text-side h2 {
    font-size: 25px
  }

  .tools-fixed {
    bottom: 20px;
    right: 20px
  }

  .tool-btn {
    width: 48px;
    height: 48px
  }
}

@media (max-width: 1280px) and (min-width: 769px) {
  .post-hero {
    padding: 60px 20px
  }

  .hero-img-col {
    flex: 0 0 240px
  }

  .article-body {
    grid-template-columns: 140px 1fr;
    padding: 60px 20px
  }

  .mesh-section {
    padding: 60px 20px
  }

  .diagram-side {
    flex: 0 0 360px
  }
}

.auth-profile {
  background: linear-gradient(211deg, #FF6268 0%, #ff626800 35%, #1267b100 65%, #1267B1 100%), #FFF;
  position: relative;
  overflow: hidden
}

.auth-profile::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 100%;
  background: radial-gradient(circle at 30% 50%, #ffffff26 0%, transparent 50%);
  animation: fog-drift 24s ease-in-out infinite;
  pointer-events: none;
  z-index: 1
}

@keyframes fog-drift {

  0%,
  100% {
    transform: translateX(0) translateY(0)
  }

  50% {
    transform: translateX(-30%) translateY(20px)
  }
}

.auth-profile>* {
  position: relative;
  z-index: 2
}

.auth-intro {
  max-width: 1024px;
  margin: 0 auto;
  padding: 40px 20px;
  background: linear-gradient(211deg, #ff626814 0%, transparent 40%, #1267b10f 100%);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 40px), 0 100%)
}

.auth-intro-content {
  max-width: 720px;
  margin: 0 auto;
  text-align: center
}

.auth-intro-content h1 {
  font-size: 46px;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: #1a1a2e;
  margin: 0 0 20px
}

.auth-intro-content p {
  font-size: 19px;
  line-height: 1.55;
  color: #2d2d44;
  margin: 0 0 40px
}

.auth-intro-actions {
  display: flex;
  flex-direction: row;
  gap: 20px;
  justify-content: center;
  align-items: center
}

.auth-intro-link {
  font-size: 16px;
  line-height: 1.55;
  color: #1267B1;
  text-decoration: none;
  padding: 12px 20px;
  border: 2px solid #1267B1;
  border-radius: 5px;
  transition: filter .55s cubic-bezier(0.25, 0.46, 0.45, 0.94), background-color .55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  background-color: transparent
}

.auth-intro-link:hover {
  filter: brightness(1.2);
  background-color: #1267b10d
}

.auth-intro-link:focus {
  outline: 3px solid #1267b166;
  outline-offset: 2px
}

.auth-intro-link-primary {
  background-color: #1267B1;
  color: #FFF
}

.auth-intro-link-primary:hover {
  background-color: #1267B1;
  filter: brightness(1.15)
}

.auth-story {
  max-width: 1024px;
  margin: 0 auto;
  padding: 80px 20px;
  background: #FFF;
  clip-path: polygon(0 40px, 100% 0, 100% 100%, 0 100%);
  margin-top: -40px
}

.auth-story-grid {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 40px;
  align-items: start
}

.auth-story-visual {
  position: relative
}

.auth-story-img-frame {
  position: relative;
  width: 100%;
  height: 420px;
  overflow: hidden;
  border-radius: 9px;
  box-shadow: 0 5px 14px -1px #ff626814 0 10px 40px -1px #ff626824
}

.auth-story-img-frame::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, transparent 60%, #ff62681f 100%);
  z-index: 1;
  pointer-events: none
}

.auth-story-img-frame::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' /%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23noise)' opacity='0.05' /%3E%3C/svg%3E");
  z-index: 2;
  pointer-events: none
}

.auth-story-img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.auth-story-text h2 {
  font-size: 34px;
  line-height: 1.1;
  letter-spacing: -.01em;
  color: #1a1a2e;
  margin: 0 0 20px
}

.auth-story-text p {
  font-size: 16px;
  line-height: 1.55;
  color: #3d3d54;
  margin: 0 0 20px
}

.auth-story-text p:last-child {
  margin-bottom: 0
}

.auth-expertise {
  max-width: 1024px;
  margin: 0 auto;
  padding: 80px 20px;
  background: linear-gradient(211deg, #1267b10a 0%, transparent 50%, #ff62680a 100%)
}

.auth-expertise h2 {
  font-size: 34px;
  line-height: 1.1;
  letter-spacing: -.01em;
  color: #1a1a2e;
  text-align: center;
  margin: 0 0 40px
}

.auth-expertise-layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 40px;
  align-items: start
}

.auth-expertise-main {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px
}

.auth-expertise-card {
  background: #FFF;
  padding: 20px;
  border-radius: 9px;
  box-shadow: 0 3px 3px -1px #1267b112 0 5px 14px -1px #1267b114;
  transition: transform .55s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow .6s ease-in-out;
  position: relative;
  overflow: hidden
}

.auth-expertise-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, #FF6268 0%, #1267B1 100%);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .65s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

.auth-expertise-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 40px -1px #1267b124
}

.auth-expertise-card:hover::before {
  transform: scaleX(1)
}

.auth-expertise-card-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 24px;
  border: 2px solid #1267B1;
  position: relative;
  margin-bottom: 12px;
  font-size: 19px;
  font-weight: 700;
  color: #1267B1
}

.auth-expertise-card-num::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  width: 48px;
  height: 48px;
  border-radius: 24px;
  border: 2px solid transparent;
  border-top-color: #FF6268;
  border-right-color: #FF6268;
  transform: rotate(0deg);
  transition: transform .6s ease-in-out
}

.auth-expertise-card:hover .auth-expertise-card-num::before {
  transform: rotate(180deg)
}

.auth-expertise-card h3 {
  font-size: 19px;
  line-height: 1.1;
  letter-spacing: .02em;
  text-transform: uppercase;
  font-weight: 700;
  color: #1a1a2e;
  margin: 0 0 12px
}

.auth-expertise-card p {
  font-size: 16px;
  line-height: 1.55;
  color: #3d3d54;
  margin: 0
}

.auth-expertise-legend {
  background: #FFF;
  padding: 20px;
  border-radius: 9px;
  box-shadow: 0 3px 3px -1px #ff626812 0 5px 14px -1px #ff626814
}

.auth-expertise-legend h3 {
  font-size: 19px;
  line-height: 1.1;
  letter-spacing: .02em;
  text-transform: uppercase;
  font-weight: 700;
  color: #1a1a2e;
  margin: 0 0 20px
}

.auth-expertise-legend-list {
  display: flex;
  flex-direction: column;
  gap: 12px
}

.auth-expertise-legend-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px
}

.auth-expertise-legend-icon {
  width: 24px;
  height: 24px;
  border-radius: 2px;
  flex-shrink: 0
}

.auth-expertise-legend-icon-a {
  background: linear-gradient(135deg, #FF6268 0%, #ff626899 100%)
}

.auth-expertise-legend-icon-b {
  background: linear-gradient(135deg, #1267B1 0%, #1267b199 100%)
}

.auth-expertise-legend-icon-c {
  background: linear-gradient(135deg, #FF6268 0%, #1267B1 100%)
}

.auth-expertise-legend-text {
  font-size: 13px;
  line-height: 1.55;
  color: #3d3d54
}

.auth-approach {
  max-width: 1024px;
  margin: 0 auto;
  padding: 80px 20px;
  background: #FFF
}

.auth-approach-container {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 40px;
  align-items: center
}

.auth-approach-text h2 {
  font-size: 34px;
  line-height: 1.1;
  letter-spacing: -.01em;
  color: #1a1a2e;
  margin: 0 0 20px
}

.auth-approach-text p {
  font-size: 16px;
  line-height: 1.55;
  color: #3d3d54;
  margin: 0 0 20px
}

.auth-approach-text p:last-child {
  margin-bottom: 0
}

.auth-approach-visual {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px
}

.auth-approach-img-wrap {
  position: relative;
  width: 100%;
  height: 180px;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0 3px 3px -1px #1267b112 0 5px 14px -1px #1267b114;
  transition: backdrop-filter .65s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow .6s ease-in-out
}

.auth-approach-img-wrap::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff0;
  backdrop-filter: blur(0px);
  z-index: 1;
  pointer-events: none;
  transition: backdrop-filter .65s cubic-bezier(0.25, 0.46, 0.45, 0.94), background .65s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

.auth-approach-img-wrap:hover::before {
  backdrop-filter: blur(4px);
  background: #ffffff26
}

.auth-approach-img-wrap:hover {
  box-shadow: 0 10px 40px -1px #1267b124
}

.auth-approach-img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.auth-approach-img-wrap-tall {
  grid-row: span 2;
  height: 372px
}

.auth-approach-aside {
  position: absolute;
  left: 20px;
  top: 80px;
  width: 200px;
  font-size: 13px;
  line-height: 1.55;
  color: #5d5d74;
  background: #fffffff2;
  padding: 12px;
  border-radius: 5px;
  box-shadow: 0 3px 3px -1px #ff626812
}

@media (max-width: 1280px) {
  .auth-intro {
    padding: 40px 20px
  }

  .auth-intro-content h1 {
    font-size: 34px
  }

  .auth-story-grid {
    grid-template-columns: 1fr 1.3fr;
    gap: 20px
  }

  .auth-story-img-frame {
    height: 360px
  }

  .auth-expertise-layout {
    grid-template-columns: 1fr
  }

  .auth-expertise-legend {
    max-width: 400px;
    margin: 0 auto
  }

  .auth-approach-container {
    grid-template-columns: 1fr;
    gap: 40px
  }

  .auth-approach-visual {
    max-width: 500px;
    margin: 0 auto
  }

  .auth-approach-aside {
    position: static;
    width: auto;
    max-width: 500px;
    margin: 20px auto 0
  }
}

@media (max-width: 768px) {
  .auth-intro {
    padding: 40px 20px
  }

  .auth-intro-content h1 {
    font-size: 25px
  }

  .auth-intro-content p {
    font-size: 16px
  }

  .auth-intro-actions {
    flex-direction: column;
    gap: 12px
  }

  .auth-intro-link {
    width: 100%;
    text-align: center
  }

  .auth-story {
    padding: 40px 20px
  }

  .auth-story-grid {
    grid-template-columns: 1fr;
    gap: 20px
  }

  .auth-story-img-frame {
    height: 280px
  }

  .auth-story-text h2 {
    font-size: 25px
  }

  .auth-expertise {
    padding: 40px 20px
  }

  .auth-expertise h2 {
    font-size: 25px
  }

  .auth-expertise-main {
    grid-template-columns: 1fr
  }

  .auth-approach {
    padding: 40px 20px
  }

  .auth-approach-text h2 {
    font-size: 25px
  }

  .auth-approach-visual {
    grid-template-columns: 1fr
  }

  .auth-approach-img-wrap-tall {
    grid-row: span 1;
    height: 240px
  }

  .auth-approach-img-wrap {
    height: 240px
  }
}

.bloglist {
  background: linear-gradient(211deg, #ff626808 0%, transparent 52%, #1267b10a 100%);
  padding: 0;
  margin: 0;
  max-width: 100%;
  overflow-x: clip
}

.bloglist .lead-banner {
  max-width: 1024px;
  margin: 0 auto;
  padding: 80px 40px;
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 40px;
  align-items: center;
  position: relative
}

.bloglist .lead-banner::before {
  content: '';
  position: absolute;
  top: 40px;
  left: 40px;
  width: 80px;
  height: 2px;
  background: #FF6268
}

.bloglist .lead-banner::after {
  content: '';
  position: absolute;
  top: 40px;
  left: 120px;
  width: 8px;
  height: 8px;
  background: #1267B1;
  transform: rotate(45deg)
}

.bloglist .lead-text {
  padding: 0
}

.bloglist .overtitle {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .15em;
  color: #1267B1;
  margin: 0 0 12px;
  font-weight: 700
}

.bloglist .main-heading {
  font-size: 62px;
  line-height: 1.1;
  margin: 0 0 20px;
  color: #2a2a2a;
  font-weight: 700;
  letter-spacing: -.02em;
  animation: letterdrop .9s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  opacity: 0
}

@keyframes letterdrop {
  0% {
    opacity: 0;
    transform: translateY(-20px)
  }

  100% {
    opacity: 1;
    transform: translateY(0)
  }
}

.bloglist .lead-desc {
  font-size: 16px;
  line-height: 1.55;
  color: #4a4a4a;
  margin: 0
}

.bloglist .lead-visual {
  position: relative;
  overflow: hidden;
  border-radius: 9px;
  box-shadow: 0 10px 40px -1px #ff626824
}

.bloglist .lead-visual img {
  width: 100%;
  height: 420px;
  object-fit: cover;
  display: block;
  filter: saturate(0.7);
  transition: filter .65s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

.bloglist .lead-visual:hover img {
  filter: saturate(1)
}

.bloglist .lead-visual::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(211deg, #ff626826 0%, transparent 50%, #1267b11f 100%);
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 1
}

.bloglist .catalog-zone {
  max-width: 1024px;
  margin: 0 auto;
  padding: 80px 40px
}

.bloglist .catalog-intro {
  text-align: center;
  margin: 0 0 40px
}

.bloglist .catalog-label {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: #1267B1;
  font-weight: 700;
  margin: 0 0 12px
}

.bloglist .catalog-heading {
  font-size: 46px;
  line-height: 1.1;
  color: #2a2a2a;
  margin: 0;
  font-weight: 700;
  letter-spacing: -.01em
}

.bloglist .posts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 40px
}

.bloglist .post-card {
  background: #fff;
  border-radius: 9px;
  overflow: hidden;
  box-shadow: 0 5px 14px -1px #1267b114;
  transition: all .55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  display: flex;
  flex-direction: column;
  position: relative
}

.bloglist .post-card:hover {
  box-shadow: 0 10px 40px -1px #1267b124;
  transform: translateY(-6px)
}

.bloglist .post-thumb {
  width: 100%;
  height: 220px;
  overflow: hidden;
  position: relative
}

.bloglist .post-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .65s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

.bloglist .post-card:hover .post-thumb img {
  transform: scale(1.08)
}

.bloglist .post-body {
  padding: 20px;
  flex: 1;
  display: flex;
  flex-direction: column
}

.bloglist .post-meta {
  display: flex;
  gap: 20px;
  margin: 0 0 12px;
  font-size: 13px;
  color: #6a6a6a
}

.bloglist .meta-item {
  display: flex;
  align-items: center;
  gap: 6px
}

.bloglist .meta-icon {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: #1267B1;
  stroke-width: 2
}

.bloglist .post-title {
  font-size: 19px;
  line-height: 1.55;
  color: #2a2a2a;
  margin: 0 0 12px;
  font-weight: 700
}

.bloglist .post-title a {
  color: inherit;
  text-decoration: none;
  transition: color .45s ease-in-out
}

.bloglist .post-title a:hover {
  color: #FF6268
}

.bloglist .post-excerpt {
  font-size: 16px;
  line-height: 1.55;
  color: #5a5a5a;
  margin: 0 0 20px;
  flex: 1
}

.bloglist .post-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0 0;
  border-top: 1px solid #1267b11f
}

.bloglist .engagement {
  display: flex;
  gap: 20px;
  font-size: 13px;
  color: #6a6a6a
}

.bloglist .engagement-item {
  display: flex;
  align-items: center;
  gap: 6px
}

.bloglist .engagement-icon {
  width: 16px;
  height: 16px;
  fill: #FF6268
}

.bloglist .read-link {
  font-size: 13px;
  color: #1267B1;
  text-decoration: none;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  transition: filter .5s ease-in-out;
  position: relative
}

.bloglist .read-link::after {
  content: '';
  position: absolute;
  right: -16px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid #1267B1;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transition: right .5s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

.bloglist .read-link:hover {
  filter: brightness(1.3)
}

.bloglist .read-link:hover::after {
  right: -20px
}

.bloglist .stats-panel {
  background: linear-gradient(211deg, #1267b10f 0%, transparent 50%, #ff62680a 100%);
  padding: 80px 40px;
  position: relative
}

.bloglist .stats-container {
  max-width: 1024px;
  margin: 0 auto
}

.bloglist .stats-header {
  margin: 0 0 40px
}

.bloglist .stats-title {
  font-size: 34px;
  line-height: 1.1;
  color: #2a2a2a;
  margin: 0 0 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  text-align: center
}

.bloglist .stats-subtitle {
  font-size: 16px;
  line-height: 1.55;
  color: #5a5a5a;
  margin: 0;
  text-align: center
}

.bloglist .heatmap-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 12px;
  max-width: 680px;
  margin: 0 auto
}

.bloglist .heat-cell {
  aspect-ratio: 1;
  border-radius: 5px;
  background: #f0f0f0;
  transition: all .55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  position: relative;
  overflow: hidden
}

.bloglist .heat-cell::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #ff62684d, #1267b14d);
  opacity: 0;
  transition: opacity .55s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

.bloglist .heat-cell:hover::before {
  opacity: 1
}

.bloglist .heat-cell.intensity-1 {
  background: #1267b126
}

.bloglist .heat-cell.intensity-2 {
  background: #1267b159
}

.bloglist .heat-cell.intensity-3 {
  background: #ff626840
}

.bloglist .heat-cell.intensity-4 {
  background: #ff626880
}

.bloglist .heat-cell.intensity-5 {
  background: linear-gradient(135deg, #ff6268b3, #1267b199)
}

.bloglist .metrics-display {
  background: #fff;
  padding: 80px 40px
}

.bloglist .metrics-wrap {
  max-width: 1024px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 40px;
  align-items: center
}

.bloglist .metrics-content {
  padding: 0
}

.bloglist .metrics-heading {
  font-size: 34px;
  line-height: 1.1;
  color: #2a2a2a;
  margin: 0 0 20px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em
}

.bloglist .metrics-text {
  font-size: 16px;
  line-height: 1.55;
  color: #5a5a5a;
  margin: 0 0 12px
}

.bloglist .metrics-visual {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px
}

.bloglist .metric-box {
  background: linear-gradient(135deg, #ff62680a, #1267b10f);
  padding: 20px;
  border-radius: 9px;
  border: 2px solid #1267b11a;
  position: relative;
  transition: all .6s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

.bloglist .metric-box:hover {
  border-color: #FF6268;
  box-shadow: 0 5px 14px -1px #ff626814
}

.bloglist .metric-badge {
  position: absolute;
  top: -12px;
  right: 20px;
  background: #FF6268;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 24px;
  box-shadow: 0 3px 3px -1px #ff626812
}

.bloglist .metric-label {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: #1267B1;
  margin: 0 0 6px;
  font-weight: 700
}

.bloglist .metric-value {
  font-size: 46px;
  line-height: 1.1;
  color: #2a2a2a;
  font-weight: 700;
  margin: 0
}

.bloglist .approach-segment {
  background: #fafbfc;
  padding: 80px 40px;
  position: relative;
  overflow: hidden
}

.bloglist .approach-segment::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, #FF6268 0%, #1267B1 100%)
}

.bloglist .approach-content {
  max-width: 1024px;
  margin: 0 auto;
  display: flex;
  gap: 40px;
  align-items: flex-start
}

.bloglist .sidebar-note {
  flex: 0 0 280px;
  padding: 20px;
  background: #1267b10a;
  border-radius: 5px;
  border-left: 4px solid #1267B1
}

.bloglist .note-label {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: #1267B1;
  font-weight: 700;
  margin: 0 0 12px
}

.bloglist .note-text {
  font-size: 16px;
  line-height: 1.55;
  color: #4a4a4a;
  margin: 0
}

.bloglist .main-text {
  flex: 1
}

.bloglist .text-heading {
  font-size: 34px;
  line-height: 1.1;
  color: #2a2a2a;
  margin: 0 0 20px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em
}

.bloglist .text-para {
  font-size: 16px;
  line-height: 1.55;
  color: #5a5a5a;
  margin: 0 0 12px
}

.bloglist .text-para:last-child {
  margin-bottom: 0
}

.bloglist .cta-strip {
  background: linear-gradient(211deg, #ff626814 0%, transparent 50%, #1267b10f 100%);
  padding: 80px 40px;
  text-align: center
}

.bloglist .cta-inner {
  max-width: 1024px;
  margin: 0 auto
}

.bloglist .cta-headline {
  font-size: 46px;
  line-height: 1.1;
  color: #2a2a2a;
  margin: 0 0 20px;
  font-weight: 700;
  letter-spacing: -.01em
}

.bloglist .cta-subtext {
  font-size: 19px;
  line-height: 1.55;
  color: #5a5a5a;
  margin: 0 0 40px
}

.bloglist .cta-button {
  display: inline-block;
  padding: 20px 40px;
  background: #1267B1;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  border-radius: 9px;
  text-transform: uppercase;
  letter-spacing: .08em;
  transition: filter .55s ease-in-out;
  box-shadow: 0 5px 14px -1px #1267b114
}

.bloglist .cta-button:hover {
  filter: brightness(1.2)
}

@media (max-width: 1280px) {
  .bloglist .lead-banner {
    grid-template-columns: 1fr
  }

  .bloglist .metrics-wrap {
    grid-template-columns: 1fr
  }

  .bloglist .approach-content {
    flex-direction: column
  }

  .bloglist .sidebar-note {
    flex: 1 1 auto;
    max-width: 100%
  }
}

@media (max-width: 768px) {
  .bloglist .main-heading {
    font-size: 46px
  }

  .bloglist .catalog-heading {
    font-size: 34px
  }

  .bloglist .posts-grid {
    grid-template-columns: 1fr
  }

  .bloglist .lead-banner {
    padding: 40px 20px
  }

  .bloglist .catalog-zone,
  .bloglist .stats-panel,
  .bloglist .metrics-display,
  .bloglist .approach-segment,
  .bloglist .cta-strip {
    padding: 40px 20px
  }

  .bloglist .heatmap-grid {
    grid-template-columns: repeat(5, 1fr)
  }

  .bloglist .metrics-visual {
    grid-template-columns: 1fr
  }

  .bloglist .cta-headline {
    font-size: 34px
  }

  .bloglist .stats-title,
  .bloglist .metrics-heading,
  .bloglist .text-heading {
    font-size: 25px
  }
}

.opening {
  max-width: 1024px;
  margin: 0 auto;
  background: #FFF;
  color: #1a1a2e
}

.opening .title-area {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 40px;
  padding: 80px 20px;
  position: relative;
  overflow: hidden
}

.opening .title-area::before {
  content: '';
  position: absolute;
  top: -80px;
  left: -120px;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, #ff62681f 0%, transparent 70%);
  filter: blur(60px);
  pointer-events: none;
  z-index: 1
}

.opening .title-area::after {
  content: '';
  position: absolute;
  bottom: -100px;
  right: -140px;
  width: 380px;
  height: 380px;
  background: radial-gradient(circle, #1267b117 0%, transparent 68%);
  filter: blur(80px);
  pointer-events: none;
  z-index: 1
}

.opening .title-left {
  position: relative;
  z-index: 2
}

.opening .title-word {
  font-size: 62px;
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -.03em;
  margin: 0 0 20px;
  color: #1a1a2e;
  opacity: 0;
  animation: revealWord .65s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards
}

.opening .title-word:nth-child(1) {
  animation-delay: .15s
}

.opening .title-word:nth-child(2) {
  animation-delay: .45s;
  color: #FF6268
}

@keyframes revealWord {
  from {
    opacity: 0;
    transform: translateY(20px)
  }

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

.opening .title-right {
  position: relative;
  z-index: 2
}

.opening .title-image-wrap {
  position: relative;
  width: 100%;
  height: 280px;
  border-radius: 9px;
  overflow: hidden
}

.opening .title-image-wrap::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(211deg, #ff626866 0%, transparent 48%, #1267b159 100%);
  z-index: 2;
  pointer-events: none
}

.opening .title-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block
}

.opening .first-article {
  padding: 80px 20px;
  background: linear-gradient(211deg, #ff626808 0%, transparent 52%, #1267b10a 100%);
  position: relative
}

.opening .first-article::before {
  content: 'ΤΝ';
  position: absolute;
  top: 40px;
  left: 40px;
  font-size: 180px;
  font-weight: 900;
  color: #ff62680f;
  line-height: 1;
  pointer-events: none;
  z-index: 1
}

.opening .first-article-inner {
  max-width: 680px;
  margin: 0 auto;
  position: relative;
  z-index: 2
}

.opening .first-article-label {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .15em;
  font-weight: 700;
  color: #FF6268;
  margin: 0 0 12px
}

.opening .first-article-heading {
  font-size: 34px;
  line-height: 1.1;
  font-weight: 700;
  margin: 0 0 20px;
  color: #1a1a2e
}

.opening .first-article-text {
  font-size: 16px;
  line-height: 1.55;
  color: #3a3a4e;
  margin: 0 0 20px
}

.opening .first-article-link {
  display: inline-block;
  padding: 12px 40px;
  background: #FF6268;
  color: #FFF;
  text-decoration: none;
  font-size: 16px;
  font-weight: 600;
  border-radius: 5px;
  transition: filter .55s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

.opening .first-article-link:hover {
  filter: brightness(1.15)
}

.opening .connections {
  padding: 80px 20px;
  background: #FFF
}

.opening .connections-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  position: relative
}

.opening .connections-shared {
  grid-column: 1 / -1;
  padding: 40px;
  background: linear-gradient(211deg, #FF6268 0%, transparent 48%, #1267B1 100%);
  border-radius: 9px;
  text-align: center
}

.opening .connections-shared-title {
  font-size: 25px;
  line-height: 1.1;
  font-weight: 700;
  color: #FFF;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: .08em
}

.opening .connection-item {
  padding: 40px;
  background: #f7f7f9;
  border-radius: 9px;
  transition: transform .6s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow .6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  box-shadow: 0 3px 3px -1px #ff626812 0 5px 14px -1px #ff626814 0 10px 40px -1px #ff626824
}

.opening .connection-item:hover {
  transform: scale(1.08);
  box-shadow: 0 3px 3px -1px #1267b112 0 5px 14px -1px #1267b114 0 10px 40px -1px #1267b124
}

.opening .connections-container:hover .connection-item:not(:hover) {
  transform: scale(0.94)
}

.opening .connection-number {
  font-size: 46px;
  line-height: 1.1;
  font-weight: 900;
  color: #FF6268;
  margin: 0 0 12px
}

.opening .connection-label {
  font-size: 19px;
  line-height: 1.55;
  font-weight: 600;
  color: #1a1a2e;
  margin: 0 0 12px
}

.opening .connection-desc {
  font-size: 16px;
  line-height: 1.55;
  color: #3a3a4e;
  margin: 0
}

.opening .navigation-system {
  padding: 80px 20px;
  background: #1267B1;
  position: relative
}

.opening .navigation-system::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 25%;
  height: 2px;
  background: #FF6268
}

.opening .navigation-system::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 68%;
  height: 2px;
  background: #fff3
}

.opening .navigation-inner {
  max-width: 800px;
  margin: 0 auto
}

.opening .navigation-heading {
  font-size: 34px;
  line-height: 1.1;
  font-weight: 700;
  color: #FFF;
  margin: 0 0 40px;
  text-align: center
}

.opening .navigation-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px
}

.opening .nav-card {
  padding: 40px;
  background: #ffffff14;
  border-radius: 5px;
  border: 2px solid #ffffff1f;
  transition: background .55s ease-in-out, border-color .55s ease-in-out
}

.opening .nav-card:hover {
  background: #ffffff24;
  border-color: #ff626866
}

.opening .nav-card-title {
  font-size: 19px;
  line-height: 1.1;
  font-weight: 700;
  color: #FFF;
  margin: 0 0 12px
}

.opening .nav-card-text {
  font-size: 16px;
  line-height: 1.55;
  color: #ffffffd9;
  margin: 0
}

.opening .origin-story {
  padding: 80px 20px;
  background: #FFF;
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 80px;
  align-items: center
}

.opening .origin-image-container {
  position: relative;
  height: 520px;
  border-radius: 24px;
  overflow: hidden
}

.opening .origin-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .9s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

.opening .origin-image-container:hover .origin-image {
  transform: scale(1.06) translateY(-12px)
}

.opening .origin-content {
  padding: 0 20px 0 0
}

.opening .origin-label {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .15em;
  font-weight: 700;
  color: #1267B1;
  margin: 0 0 12px
}

.opening .origin-heading {
  font-size: 34px;
  line-height: 1.1;
  font-weight: 700;
  margin: 0 0 20px;
  color: #1a1a2e
}

.opening .origin-text {
  font-size: 16px;
  line-height: 1.55;
  color: #3a3a4e;
  margin: 0 0 20px
}

.opening .standards {
  padding: 80px 20px;
  background: linear-gradient(211deg, #ff62680d 0%, transparent 48%, #1267b10f 100%);
  position: relative
}

.opening .standards::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 42%;
  height: 2px;
  background: #1267b133
}

.opening .standards::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 80%;
  height: 2px;
  background: #FF6268
}

.opening .standards-inner {
  max-width: 720px;
  margin: 0 auto;
  text-align: center
}

.opening .standards-heading {
  font-size: 34px;
  line-height: 1.1;
  font-weight: 700;
  margin: 0 0 40px;
  color: #1a1a2e
}

.opening .standards-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  list-style: none;
  padding: 0;
  margin: 0
}

.opening .standard-item {
  position: relative
}

.opening .standard-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 20px;
  background: #FF6268;
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .6s cubic-bezier(0.25, 0.46, 0.45, 0.94), background .6s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

.opening .standard-item:hover .standard-icon {
  transform: rotate(12deg) scale(1.12);
  background: #1267B1
}

.opening .standard-icon-shape {
  width: 28px;
  height: 28px;
  background: #FFF;
  border-radius: 5px
}

.opening .standard-title {
  font-size: 19px;
  line-height: 1.1;
  font-weight: 700;
  margin: 0 0 12px;
  color: #1a1a2e
}

.opening .standard-text {
  font-size: 16px;
  line-height: 1.55;
  color: #3a3a4e;
  margin: 0
}

.opening .problems-solved {
  padding: 80px 20px;
  background: #FFF
}

.opening .problems-container {
  max-width: 880px;
  margin: 0 auto
}

.opening .problems-intro {
  text-align: center;
  margin: 0 0 60px
}

.opening .problems-heading {
  font-size: 34px;
  line-height: 1.1;
  font-weight: 700;
  margin: 0 0 20px;
  color: #1a1a2e
}

.opening .problems-subtext {
  font-size: 19px;
  line-height: 1.55;
  color: #3a3a4e;
  margin: 0
}

.opening .problem-blocks {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px
}

.opening .problem-block {
  padding: 40px;
  background: #f7f7f9;
  border-radius: 9px;
  border-left: 0;
  position: relative;
  overflow: hidden
}

.opening .problem-block::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 6px;
  height: 100%;
  background: #FF6268;
  transition: width .65s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

.opening .problem-block:hover::before {
  width: 100%;
  opacity: .06
}

.opening .problem-block:nth-child(even)::before {
  background: #1267B1
}

.opening .problem-title {
  font-size: 19px;
  line-height: 1.1;
  font-weight: 700;
  margin: 0 0 12px;
  color: #1a1a2e;
  position: relative;
  z-index: 2
}

.opening .problem-desc {
  font-size: 16px;
  line-height: 1.55;
  color: #3a3a4e;
  margin: 0;
  position: relative;
  z-index: 2
}

.opening .problem-image-wrap {
  width: 100%;
  height: 220px;
  border-radius: 5px;
  overflow: hidden;
  margin: 20px 0 0;
  position: relative;
  z-index: 2
}

.opening .problem-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .75s ease-in-out
}

.opening .problem-block:hover .problem-image {
  transform: scale(1.08)
}

@media (max-width: 1280px) {
  .opening .title-area {
    grid-template-columns: 1fr 300px;
    gap: 40px;
    padding: 60px 20px
  }

  .opening .title-word {
    font-size: 46px
  }

  .opening .title-image-wrap {
    height: 240px
  }

  .opening .origin-story {
    grid-template-columns: 360px 1fr;
    gap: 60px
  }

  .opening .origin-image-container {
    height: 440px
  }
}

@media (max-width: 768px) {
  .opening .title-area {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 40px 20px
  }

  .opening .title-word {
    font-size: 34px
  }

  .opening .title-image-wrap {
    height: 200px
  }

  .opening .first-article {
    padding: 60px 20px
  }

  .opening .first-article::before {
    font-size: 120px;
    top: 20px;
    left: 20px
  }

  .opening .first-article-heading {
    font-size: 25px
  }

  .opening .connections-container {
    grid-template-columns: 1fr;
    gap: 20px
  }

  .opening .connections-shared {
    padding: 40px 20px
  }

  .opening .navigation-system {
    padding: 60px 20px
  }

  .opening .navigation-heading {
    font-size: 25px;
    margin: 0 0 40px
  }

  .opening .navigation-grid {
    grid-template-columns: 1fr;
    gap: 20px
  }

  .opening .origin-story {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 60px 20px
  }

  .opening .origin-image-container {
    height: 320px
  }

  .opening .origin-content {
    padding: 0
  }

  .opening .origin-heading {
    font-size: 25px
  }

  .opening .standards {
    padding: 60px 20px
  }

  .opening .standards-heading {
    font-size: 25px
  }

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

  .opening .problems-solved {
    padding: 60px 20px
  }

  .opening .problems-intro {
    margin: 0 0 40px
  }

  .opening .problems-heading {
    font-size: 25px
  }

  .opening .problems-subtext {
    font-size: 16px
  }

  .opening .problem-blocks {
    grid-template-columns: 1fr;
    gap: 20px
  }

  .opening .problem-image-wrap {
    height: 180px
  }
}

.guides-hub {
  background: linear-gradient(211deg, #FF6268 0%, #fff6 48%, #1267B1 100%);
  padding: 0;
  margin: 0;
  max-width: 100%;
  overflow-x: clip
}

.guides-hub .opening-banner {
  max-width: 1024px;
  margin: 0 auto;
  padding: 80px 20px;
  display: flex;
  flex-direction: row;
  gap: 40px;
  align-items: stretch;
  position: relative
}

.guides-hub .photo-stripe {
  flex: 0 0 280px;
  position: relative;
  overflow: hidden;
  border-radius: 9px;
  box-shadow: 0 5px 14px -1px #ff626814 0 10px 40px -1px #ff626824
}

.guides-hub .photo-stripe img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 9px
}

.guides-hub .photo-stripe::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 160px;
  background: linear-gradient(to bottom, #1267b1b3 0%, transparent 100%);
  pointer-events: none
}

.guides-hub .message-zone {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  padding: 40px 0;
  position: relative
}

.guides-hub .message-zone::before {
  content: '';
  position: absolute;
  left: -20px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #1267b126
}

.guides-hub .prime-statement {
  font-size: 46px;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: #1a1a1a;
  margin: 0;
  font-weight: 700
}

.guides-hub .prime-statement .outlined-word {
  color: transparent;
  -webkit-text-stroke: 2px #FF6268;
  text-stroke: 2px #FF6268
}

.guides-hub .sub-statement {
  font-size: 19px;
  line-height: 1.55;
  color: #2d2d2d;
  margin: 0
}

.guides-hub .entry-link {
  display: inline-block;
  font-size: 16px;
  color: #1267B1;
  text-decoration: none;
  font-weight: 600;
  padding: 12px 0;
  transition: filter .55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  position: relative
}

.guides-hub .entry-link::after {
  content: '';
  position: absolute;
  right: -24px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 8px solid #1267B1;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  opacity: .7;
  transition: transform .6s ease-in-out, opacity .6s ease-in-out
}

.guides-hub .entry-link:hover {
  filter: brightness(1.3)
}

.guides-hub .entry-link:hover::after {
  transform: translateY(-50%) translateX(6px);
  opacity: 1
}

.guides-hub .divider-zigzag {
  width: 100%;
  height: 32px;
  background-image: url("data:image/svg+xml,%3Csvg width='100' height='32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 16 L5 8 L10 16 L15 8 L20 16 L25 8 L30 16 L35 8 L40 16 L45 8 L50 16 L55 8 L60 16 L65 8 L70 16 L75 8 L80 16 L85 8 L90 16 L95 8 L100 16 L100 32 L0 32 Z' fill='%23FFFFFF'/%3E%3C/svg%3E");
  background-size: 100px 32px;
  background-repeat: repeat-x;
  margin: 0
}

.guides-hub .technique-breakdown {
  background: #0d4a7a;
  padding: 80px 20px;
  position: relative;
  overflow: hidden
}

.guides-hub .technique-breakdown::before {
  content: '';
  position: absolute;
  top: 20%;
  right: 10%;
  width: 180px;
  height: 180px;
  background: #ff62681f;
  border-radius: 50%;
  animation: flicker-pulse 4.5s ease-in-out infinite;
  pointer-events: none
}

.guides-hub .technique-breakdown::after {
  content: '';
  position: absolute;
  bottom: 15%;
  left: 8%;
  width: 140px;
  height: 140px;
  background: #ff626817;
  border-radius: 50%;
  animation: flicker-pulse 5.2s ease-in-out infinite 1.2s;
  pointer-events: none
}

@keyframes flicker-pulse {

  0%,
  100% {
    opacity: 0;
    transform: scale(0.8)
  }

  15% {
    opacity: 1;
    transform: scale(1)
  }

  30% {
    opacity: 0;
    transform: scale(0.8)
  }
}

.guides-hub .technique-inner {
  max-width: 1024px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 40px
}

.guides-hub .method-header {
  text-align: center
}

.guides-hub .method-title {
  font-size: 46px;
  line-height: 1.1;
  color: #FFF;
  margin: 0 0 20px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 700
}

.guides-hub .method-intro {
  font-size: 19px;
  line-height: 1.55;
  color: #ffffffe6;
  margin: 0 auto;
  max-width: 720px
}

.guides-hub .steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin: 40px 0 0
}

.guides-hub .step-card {
  background: #ffffff14;
  border-radius: 9px;
  padding: 40px 20px;
  text-align: center;
  position: relative;
  transition: background .65s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform .55s ease-in-out;
  border: 1px solid #ffffff1f
}

.guides-hub .step-card:hover {
  background: #ffffff26;
  transform: translateY(-6px)
}

.guides-hub .step-number {
  font-size: 62px;
  line-height: 1.1;
  color: #FF6268;
  font-weight: 700;
  margin: 0 0 20px;
  opacity: .85
}

.guides-hub .step-label {
  font-size: 19px;
  line-height: 1.55;
  color: #FFF;
  margin: 0 0 12px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase
}

.guides-hub .step-text {
  font-size: 16px;
  line-height: 1.55;
  color: #ffffffd9;
  margin: 0
}

.guides-hub .metrics-display {
  display: flex;
  flex-direction: row;
  gap: 40px;
  align-items: center;
  margin: 60px 0 0;
  padding: 40px;
  background: #ffffff0d;
  border-radius: 24px;
  border: 1px solid #ffffff1a
}

.guides-hub .chart-container {
  flex: 0 0 240px;
  position: relative
}

.guides-hub .donut-chart {
  width: 240px;
  height: 240px;
  position: relative
}

.guides-hub .donut-svg {
  transform: rotate(-90deg);
  width: 100%;
  height: 100%
}

.guides-hub .donut-bg {
  fill: none;
  stroke: #ffffff26;
  stroke-width: 28
}

.guides-hub .donut-segment-1 {
  fill: none;
  stroke: #FF6268;
  stroke-width: 28;
  stroke-dasharray: 157 471;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset .9s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

.guides-hub .donut-segment-2 {
  fill: none;
  stroke: #1267B1;
  stroke-width: 28;
  stroke-dasharray: 94 471;
  stroke-dashoffset: -157;
  transition: stroke-dashoffset .9s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

.guides-hub .donut-segment-3 {
  fill: none;
  stroke: #fff9;
  stroke-width: 28;
  stroke-dasharray: 220 471;
  stroke-dashoffset: -251;
  transition: stroke-dashoffset .9s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

.guides-hub .donut-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center
}

.guides-hub .donut-value {
  font-size: 46px;
  line-height: 1.1;
  color: #FFF;
  font-weight: 700;
  margin: 0
}

.guides-hub .donut-label {
  font-size: 13px;
  line-height: 1.55;
  color: #ffffffb3;
  margin: 6px 0 0;
  text-transform: uppercase;
  letter-spacing: .06em
}

.guides-hub .legend-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px
}

.guides-hub .legend-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px
}

.guides-hub .legend-marker {
  width: 40px;
  height: 40px;
  border-radius: 5px;
  flex-shrink: 0
}

.guides-hub .legend-marker.marker-1 {
  background: #FF6268
}

.guides-hub .legend-marker.marker-2 {
  background: #1267B1
}

.guides-hub .legend-marker.marker-3 {
  background: #fff9
}

.guides-hub .legend-content {
  flex: 1
}

.guides-hub .legend-name {
  font-size: 16px;
  line-height: 1.55;
  color: #FFF;
  margin: 0 0 6px;
  font-weight: 600
}

.guides-hub .legend-value {
  font-size: 13px;
  line-height: 1.55;
  color: #ffffffb3;
  margin: 0
}

.guides-hub .overlay-reveal {
  position: relative;
  margin: 60px 0 0
}

.guides-hub .reveal-stack {
  position: relative;
  max-width: 640px;
  margin: 0 auto
}

.guides-hub .reveal-base {
  background: #ffffff1a;
  border-radius: 9px;
  padding: 40px;
  border: 1px solid #ffffff26
}

.guides-hub .reveal-heading {
  font-size: 25px;
  line-height: 1.55;
  color: #FFF;
  margin: 0 0 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase
}

.guides-hub .reveal-description {
  font-size: 16px;
  line-height: 1.55;
  color: #ffffffd9;
  margin: 0
}

.guides-hub .reveal-upper {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #1267b1f2;
  border-radius: 9px;
  padding: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: opacity .75s ease-in-out;
  border: 1px solid #fff3
}

.guides-hub .reveal-upper:hover {
  opacity: 0
}

.guides-hub .reveal-icon {
  width: 80px;
  height: 80px;
  margin: 0 0 20px
}

.guides-hub .reveal-icon svg {
  width: 100%;
  height: 100%;
  fill: #FFF
}

.guides-hub .reveal-prompt {
  font-size: 19px;
  line-height: 1.55;
  color: #FFF;
  margin: 0;
  font-weight: 600;
  text-align: center
}

@media (max-width: 1280px) {
  .guides-hub .opening-banner {
    padding: 60px 20px
  }

  .guides-hub .photo-stripe {
    flex: 0 0 240px
  }

  .guides-hub .prime-statement {
    font-size: 34px
  }

  .guides-hub .steps-grid {
    grid-template-columns: repeat(2, 1fr)
  }
}

@media (max-width: 768px) {
  .guides-hub .opening-banner {
    flex-direction: column;
    gap: 20px;
    padding: 40px 20px
  }

  .guides-hub .photo-stripe {
    flex: 0 0 auto;
    width: 100%;
    height: 280px
  }

  .guides-hub .message-zone {
    padding: 20px 0
  }

  .guides-hub .message-zone::before {
    display: none
  }

  .guides-hub .prime-statement {
    font-size: 25px
  }

  .guides-hub .sub-statement {
    font-size: 16px
  }

  .guides-hub .technique-breakdown {
    padding: 60px 20px
  }

  .guides-hub .method-title {
    font-size: 34px
  }

  .guides-hub .steps-grid {
    grid-template-columns: 1fr;
    gap: 20px
  }

  .guides-hub .step-card {
    padding: 40px 20px
  }

  .guides-hub .metrics-display {
    flex-direction: column;
    padding: 20px;
    margin: 40px 0 0
  }

  .guides-hub .chart-container {
    flex: 0 0 auto
  }

  .guides-hub .legend-list {
    width: 100%
  }

  .guides-hub .overlay-reveal {
    margin: 40px 0 0
  }

  .guides-hub .reveal-base,
  .guides-hub .reveal-upper {
    padding: 20px
  }
}

.jrnl {
  max-width: 1024px;
  margin: 0 auto;
  padding: 0;
  background: #FFF;
  position: relative
}

.jrnl .opener {
  display: flex;
  align-items: stretch;
  min-height: 420px;
  background: linear-gradient(211deg, #ff62680a 0%, transparent 52%, #1267b10f 100%);
  border: 1px solid #1267b11f;
  border-radius: 9px;
  margin: 40px 20px;
  overflow: hidden;
  position: relative
}

.jrnl .opener::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: 80px;
  background: #FF6268;
  z-index: 2
}

.jrnl .opener::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 80px;
  height: 2px;
  background: #1267B1;
  z-index: 2
}

.jrnl .img-strip {
  width: 280px;
  flex-shrink: 0;
  position: relative;
  overflow: hidden
}

.jrnl .img-strip img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.jrnl .img-strip::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #ff6268b3 0%, transparent 100%);
  z-index: 1
}

.jrnl .text-area {
  flex: 1;
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative
}

.jrnl .text-area::before {
  content: '';
  position: absolute;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 1px;
  background: #1267b133
}

.jrnl .text-area::after {
  content: '';
  position: absolute;
  top: 20px;
  right: 20px;
  width: 1px;
  height: 40px;
  background: #1267b133
}

.jrnl .opener h1 {
  font-size: 46px;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: #1a1a2e;
  margin: 0 0 20px
}

.jrnl .opener .desc {
  font-size: 16px;
  line-height: 1.55;
  color: #4a4a5e;
  margin: 0 0 20px
}

.jrnl .opener .link-action {
  display: inline-block;
  font-size: 16px;
  color: #1267B1;
  text-decoration: none;
  transition: filter .55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  font-weight: 500
}

.jrnl .opener .link-action:hover {
  filter: brightness(1.3)
}

.jrnl .metrics {
  background: radial-gradient(ellipse at center, #ff62680d 0%, transparent 70%);
  padding: 80px 20px;
  position: relative;
  overflow: hidden
}

.jrnl .metrics::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
  height: 400px;
  border: 1px solid #1267b10f;
  border-radius: 50%;
  pointer-events: none
}

.jrnl .metrics::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 600px;
  border: 1px solid #1267b10a;
  border-radius: 50%;
  pointer-events: none
}

.jrnl .metrics-inner {
  max-width: 840px;
  margin: 0 auto;
  text-align: center
}

.jrnl .metrics h2 {
  font-size: 34px;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700;
  color: #1a1a2e;
  margin: 0 0 40px
}

.jrnl .stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin: 0 0 40px
}

.jrnl .stat-item {
  background: #FFF;
  border: 1px solid #ff626826;
  border-radius: 5px;
  padding: 40px 20px;
  box-shadow: 0 3px 3px -1px #ff626812 0 5px 14px -1px #ff626814 0 10px 40px -1px #ff626824;
  transition: transform .6s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

.jrnl .stat-item:hover {
  transform: translateY(-6px)
}

.jrnl .stat-value {
  font-size: 62px;
  line-height: 1.1;
  color: #FF6268;
  font-weight: 700;
  margin: 0 0 12px;
  display: block
}

.jrnl .stat-label {
  font-size: 16px;
  line-height: 1.55;
  color: #4a4a5e;
  margin: 0
}

.jrnl .metrics-text {
  font-size: 16px;
  line-height: 1.55;
  color: #4a4a5e;
  text-align: left;
  margin: 0
}

.jrnl .approach {
  background: #FFF;
  padding: 80px 20px;
  position: relative
}

.jrnl .approach::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: repeating-linear-gradient(to right, #1267B1 0px, #1267B1 12px, transparent 12px, transparent 20px, #1267B1 20px, #1267B1 40px, transparent 40px, transparent 48px)
}

.jrnl .approach-layout {
  max-width: 840px;
  margin: 0 auto;
  display: flex;
  gap: 40px
}

.jrnl .sidebar-note {
  width: 220px;
  flex-shrink: 0;
  background: linear-gradient(211deg, #1267b10f 0%, transparent 52%, #ff62680a 100%);
  border-radius: 5px;
  padding: 40px 20px;
  border: 1px solid #1267b11a
}

.jrnl .sidebar-note h4 {
  font-size: 19px;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 700;
  color: #1a1a2e;
  margin: 0 0 20px
}

.jrnl .sidebar-note .note-text {
  font-size: 13px;
  line-height: 1.55;
  color: #4a4a5e;
  margin: 0
}

.jrnl .main-text {
  flex: 1
}

.jrnl .main-text h3 {
  font-size: 25px;
  line-height: 1.1;
  color: #1a1a2e;
  margin: 0 0 20px
}

.jrnl .main-text p {
  font-size: 16px;
  line-height: 1.55;
  color: #4a4a5e;
  margin: 0 0 20px
}

.jrnl .main-text p:last-child {
  margin: 0
}

.jrnl .highlight-zone {
  background: #ff62680a;
  border-radius: 5px;
  padding: 20px;
  margin: 20px 0 0
}

.jrnl .interactive-demo {
  background: linear-gradient(211deg, #ff626805 0%, transparent 52%, #1267b108 100%);
  padding: 80px 20px;
  position: relative;
  overflow: hidden
}

.jrnl .interactive-demo::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: repeating-linear-gradient(to right, #FF6268 0px, #FF6268 8px, transparent 8px, transparent 14px, #FF6268 14px, #FF6268 32px, transparent 32px, transparent 38px)
}

.jrnl .demo-inner {
  max-width: 840px;
  margin: 0 auto
}

.jrnl .demo-inner h2 {
  font-size: 34px;
  line-height: 1.1;
  text-align: center;
  color: #1a1a2e;
  margin: 0 0 40px
}

.jrnl .card-set {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px
}

.jrnl .demo-card {
  background: #FFF;
  border: 1px solid #1267b11f;
  border-radius: 9px;
  padding: 40px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 3px 3px -1px #1267b112 0 5px 14px -1px #1267b114 0 10px 40px -1px #1267b124;
  transition: all .65s ease-in-out
}

.jrnl .demo-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(45deg, transparent, transparent 20px, #ff626808 20px, #ff626808 40px);
  opacity: 0;
  transition: opacity .65s ease-in-out;
  pointer-events: none
}

.jrnl .demo-card:hover::before {
  opacity: 1
}

.jrnl .demo-card:hover {
  border-color: #ff62684d;
  transform: scale(1.02)
}

.jrnl .demo-card h5 {
  font-size: 19px;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 700;
  color: #1a1a2e;
  margin: 0 0 20px
}

.jrnl .demo-card .card-text {
  font-size: 16px;
  line-height: 1.55;
  color: #4a4a5e;
  margin: 0
}

.jrnl .demo-card .accent-mark {
  position: absolute;
  bottom: 20px;
  right: 20px;
  width: 60px;
  height: 60px;
  border: 2px solid #1267b126;
  border-radius: 50%;
  transition: border-color .55s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

.jrnl .demo-card:hover .accent-mark {
  border-color: #ff626866
}

@keyframes bg-shift {
  0% {
    background-position: 0 0
  }

  50% {
    background-position: 100% 100%
  }

  100% {
    background-position: 0 0
  }
}

.jrnl .animated-bg {
  background: linear-gradient(135deg, #ff626805 0%, #1267b105 100%);
  background-size: 200% 200%;
  animation: bg-shift 8s ease-in-out infinite
}

@media (max-width: 768px) {
  .jrnl .opener {
    flex-direction: column;
    min-height: auto;
    margin: 20px 12px
  }

  .jrnl .img-strip {
    width: 100%;
    height: 280px
  }

  .jrnl .text-area {
    padding: 40px 20px
  }

  .jrnl .opener h1 {
    font-size: 34px
  }

  .jrnl .stat-grid {
    grid-template-columns: 1fr;
    gap: 20px
  }

  .jrnl .metrics {
    padding: 40px 12px
  }

  .jrnl .metrics h2 {
    font-size: 25px;
    margin: 0 0 20px
  }

  .jrnl .approach {
    padding: 40px 12px
  }

  .jrnl .approach-layout {
    flex-direction: column;
    gap: 20px
  }

  .jrnl .sidebar-note {
    width: 100%
  }

  .jrnl .interactive-demo {
    padding: 40px 12px
  }

  .jrnl .demo-inner h2 {
    font-size: 25px;
    margin: 0 0 20px
  }

  .jrnl .card-set {
    grid-template-columns: 1fr;
    gap: 20px
  }

  .jrnl .demo-card {
    padding: 20px
  }
}

@media (max-width: 1280px) and (min-width: 769px) {
  .jrnl .opener {
    margin: 40px 20px
  }

  .jrnl .img-strip {
    width: 240px
  }

  .jrnl .text-area {
    padding: 40px 20px
  }

  .jrnl .metrics {
    padding: 60px 20px
  }

  .jrnl .approach {
    padding: 60px 20px
  }

  .jrnl .interactive-demo {
    padding: 60px 20px
  }
}

.success-page {
  max-width: 1024px;
  margin: 0 auto;
  padding: 80px 20px;
  background: linear-gradient(211deg, #FF6268 0%, #ff626800 50%, #1267B1 100%);
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center
}

.success-page .confirmation-card {
  background: #FFF;
  padding: 80px 40px;
  border-radius: 9px;
  box-shadow: 0 10px 40px -1px #ff626824;
  text-align: center;
  max-width: 640px;
  width: 100%
}

.success-page .icon-wrapper {
  width: 120px;
  height: 120px;
  margin: 0 auto 40px;
  position: relative
}

.success-page .checkmark-circle {
  width: 120px;
  height: 120px;
  border: 6px solid #1267B1;
  border-radius: 50%;
  position: relative;
  background: #1267b114
}

.success-page .checkmark-stem {
  position: absolute;
  width: 6px;
  height: 40px;
  background: #1267B1;
  left: 50%;
  top: 50%;
  margin-left: 6px;
  margin-top: -12px;
  transform: rotate(45deg);
  border-radius: 2px
}

.success-page .checkmark-kick {
  position: absolute;
  width: 6px;
  height: 20px;
  background: #1267B1;
  left: 50%;
  top: 50%;
  margin-left: -8px;
  margin-top: 8px;
  transform: rotate(-45deg);
  border-radius: 2px
}

.success-page .primary-heading {
  font-size: 46px;
  line-height: 1.1;
  color: #1a1a2e;
  margin: 0 0 20px;
  letter-spacing: -.02em;
  font-weight: 700
}

.success-page .message-text {
  font-size: 19px;
  line-height: 1.55;
  color: #4a4a5e;
  margin: 0 0 40px
}

.success-page .detail-box {
  background: #1267b10a;
  padding: 20px;
  border-radius: 5px;
  margin: 40px 0;
  border-left: 4px solid #1267B1
}

.success-page .detail-box .info-line {
  font-size: 16px;
  line-height: 1.55;
  color: #4a4a5e;
  margin: 0
}

.success-page .detail-box .email-display {
  font-size: 16px;
  line-height: 1.55;
  color: #1267B1;
  font-weight: 600;
  margin: 6px 0 0
}

.success-page .action-group {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap
}

.success-page .primary-action {
  background: #1267B1;
  color: #FFF;
  padding: 12px 40px;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: filter .55s ease-in-out
}

.success-page .primary-action:hover {
  filter: brightness(1.15)
}

.success-page .secondary-action {
  background: transparent;
  color: #1267B1;
  padding: 12px 40px;
  border: 2px solid #1267B1;
  border-radius: 5px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: background .55s ease-in-out, color .55s ease-in-out
}

.success-page .secondary-action:hover {
  background: #1267b114
}

.success-page .footnote {
  font-size: 13px;
  line-height: 1.55;
  color: #7a7a8e;
  margin: 40px 0 0
}

@media (max-width: 768px) {
  .success-page {
    padding: 40px 12px
  }

  .success-page .confirmation-card {
    padding: 40px 20px
  }

  .success-page .icon-wrapper {
    width: 90px;
    height: 90px;
    margin-bottom: 20px
  }

  .success-page .checkmark-circle {
    width: 90px;
    height: 90px;
    border-width: 5px
  }

  .success-page .checkmark-stem {
    width: 5px;
    height: 30px;
    margin-left: 4px;
    margin-top: -9px
  }

  .success-page .checkmark-kick {
    width: 5px;
    height: 15px;
    margin-left: -6px;
    margin-top: 6px
  }

  .success-page .primary-heading {
    font-size: 34px
  }

  .success-page .message-text {
    font-size: 16px
  }

  .success-page .action-group {
    flex-direction: column;
    gap: 12px
  }

  .success-page .primary-action,
  .success-page .secondary-action {
    width: 100%
  }
}

h1, h2, h3, h4, h5, h6 {word-break: break-word;}