/* Layout refresh: visual structure only. Text content, fonts and section order remain unchanged. */
:root {
  --jk-bg: #0a0f1b;
  --jk-panel: rgba(26, 26, 46, 0.72);
  --jk-panel-soft: rgba(246, 246, 246, 0.045);
  --jk-line: rgba(246, 246, 246, 0.105);
  --jk-text-muted: rgba(246, 246, 246, 0.66);
  --jk-green: #c5e817;
  --jk-pink: #e10098;
}

html { scroll-behavior: smooth; }
body { overflow-x: hidden; }

section[id] {
  isolation: isolate;
}

section[id] .container {
  width: min(100% - 2rem, 1280px) !important;
  margin-inline: auto !important;
}

section[id] h2,
section[id] h3,
section[id] p {
  text-wrap: pretty;
}

section[id] p {
  max-width: 68ch;
}

.section-label {
  width: fit-content !important;
  padding: 0.45rem 0.8rem !important;
  border: 1px solid rgba(197, 232, 23, 0.22) !important;
  border-radius: 999px !important;
  background: rgba(197, 232, 23, 0.055) !important;
}

.hero-grid {
  gap: clamp(2rem, 4vw, 5rem) !important;
}

.stats-bar,
.proof-stats-grid {
  border-radius: 28px !important;
  overflow: hidden !important;
  border: 1px solid var(--jk-line) !important;
  background: linear-gradient(135deg, rgba(246,246,246,0.055), rgba(246,246,246,0.018)) !important;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.18) !important;
}

.whatido-grid,
.how-grid,
.why-grid,
.for-grid,
.book-grid,
.footer-grid {
  gap: clamp(1.25rem, 3vw, 3.25rem) !important;
}

.whatido-grid > div,
.how-grid > div,
.why-grid > div,
.for-grid > div,
.book-grid > div {
  border: 1px solid var(--jk-line) !important;
  border-radius: 32px !important;
  padding: clamp(1.35rem, 2.6vw, 2.6rem) !important;
  background: linear-gradient(145deg, rgba(246,246,246,0.07), rgba(246,246,246,0.025)) !important;
  box-shadow: 0 26px 90px rgba(0, 0, 0, 0.18) !important;
  backdrop-filter: blur(10px) !important;
}

.whatido-grid > div:first-child,
.why-grid > div:first-child,
.for-grid > div:first-child {
  background: linear-gradient(145deg, rgba(197,232,23,0.075), rgba(246,246,246,0.025)) !important;
}

.whatido-grid > div:nth-child(2),
.how-grid > div:nth-child(2),
.why-grid > div:nth-child(2),
.for-grid > div:nth-child(2) {
  background: linear-gradient(145deg, rgba(225,0,152,0.07), rgba(246,246,246,0.024)) !important;
}

.whatido-grid > div:first-child > div:nth-of-type(2),
.for-grid > div:nth-child(2),
.why-grid > div:nth-child(2) > div,
.how-grid > div:first-child > div,
.how-grid > div:nth-child(2) > div {
  border-radius: 24px !important;
}

.services-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 1rem !important;
  background: transparent !important;
}

.service-card {
  min-height: 100% !important;
  border: 1px solid var(--jk-line) !important;
  border-radius: 30px !important;
  background: linear-gradient(150deg, rgba(246,246,246,0.07), rgba(26,26,46,0.92)) !important;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.2) !important;
}

.service-card:hover,
.rec-grid > div:hover,
.tools-grid > div:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(197, 232, 23, 0.28) !important;
}

#proof .container > div > div,
#projects .container > div > div,
#contact .container > div,
#cta .container > div {
  border-radius: 32px !important;
}

.tools-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 1rem !important;
}

.tools-grid > div {
  border: 1px solid var(--jk-line) !important;
  border-radius: 26px !important;
  padding: 1.25rem !important;
  background: rgba(246, 246, 246, 0.045) !important;
  transition: transform .25s ease, border-color .25s ease !important;
}

.rec-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-items: stretch !important;
}

.rec-grid > div {
  border: 1px solid var(--jk-line) !important;
  border-radius: 30px !important;
  background: linear-gradient(145deg, rgba(246,246,246,0.06), rgba(26,26,46,0.92)) !important;
  min-height: 100% !important;
  transition: transform .25s ease, border-color .25s ease !important;
}

#who-this-is-for .for-grid > div:nth-child(2) {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0.85rem !important;
}

#who-this-is-for .for-grid > div:nth-child(2) > div {
  border: 1px solid rgba(246,246,246,0.08) !important;
  border-radius: 22px !important;
  padding: 1.1rem !important;
  background: rgba(10, 15, 27, 0.36) !important;
}

#what-i-do .whatido-grid > div:first-child > div:nth-of-type(2) {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0.75rem !important;
  border: 0 !important;
  background: transparent !important;
}

#what-i-do .whatido-grid > div:first-child > div:nth-of-type(2) > div {
  border: 1px solid rgba(246,246,246,0.08) !important;
  border-radius: 18px !important;
  padding: 1rem !important;
  background: rgba(10,15,27,0.36) !important;
}

#how-i-work .how-grid > div:first-child > div:nth-child(2) > div:nth-child(2),
#projects .container > div > div:last-child,
#proof .container > div > div:last-child {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 1rem !important;
}

#how-i-work .how-grid > div:first-child > div:nth-child(2) > div:nth-child(2) > div,
#projects .container > div > div:last-child > div,
#proof .container > div > div:last-child > div {
  border: 1px solid rgba(246,246,246,0.08) !important;
  border-radius: 24px !important;
  padding: 1.15rem !important;
  background: rgba(10, 15, 27, 0.36) !important;
}

#published-work .book-grid > div:last-child {
  border-color: rgba(197, 232, 23, 0.18) !important;
}

#contact a,
#cta a,
.btn-primary {
  border-radius: 999px !important;
}

@media (min-width: 900px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr) !important;
  }
  .whatido-grid,
  .how-grid,
  .why-grid,
  .for-grid,
  .book-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr) !important;
    align-items: start !important;
  }
  .footer-grid {
    display: grid !important;
    grid-template-columns: 1.2fr repeat(3, minmax(0, .8fr)) !important;
  }
}

@media (max-width: 1100px) {
  .services-grid,
  .tools-grid,
  .rec-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  section[id] .container {
    width: min(100% - 1.25rem, 1280px) !important;
  }
  .services-grid,
  .tools-grid,
  .rec-grid,
  #who-this-is-for .for-grid > div:nth-child(2),
  #what-i-do .whatido-grid > div:first-child > div:nth-of-type(2),
  #how-i-work .how-grid > div:first-child > div:nth-child(2) > div:nth-child(2),
  #projects .container > div > div:last-child,
  #proof .container > div > div:last-child {
    grid-template-columns: 1fr !important;
  }
  .whatido-grid > div,
  .how-grid > div,
  .why-grid > div,
  .for-grid > div,
  .book-grid > div,
  .service-card,
  .rec-grid > div {
    border-radius: 24px !important;
  }
}


/* Responsive hardening pass: no content/font changes. */
*, *::before, *::after { box-sizing: border-box; }
img, svg, video, canvas { max-width: 100%; height: auto; }
section[id] .container,
.hero-grid,
.whatido-grid,
.how-grid,
.why-grid,
.for-grid,
.book-grid,
.footer-grid,
.services-grid,
.tools-grid,
.rec-grid { min-width: 0 !important; }
section[id] .container > *,
.hero-grid > *,
.whatido-grid > *,
.how-grid > *,
.why-grid > *,
.for-grid > *,
.book-grid > *,
.footer-grid > *,
.services-grid > *,
.tools-grid > *,
.rec-grid > * { min-width: 0 !important; }
a, p, li, h1, h2, h3, h4 { overflow-wrap: anywhere; }

@media (max-width: 899px) {
  .footer-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1.25rem !important;
  }
}

@media (max-width: 520px) {
  section[id] {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  section[id] h1,
  section[id] h2 {
    hyphens: auto;
  }
  .footer-grid,
  .stats-bar,
  .proof-stats-grid {
    grid-template-columns: 1fr !important;
  }
  #contact a,
  #cta a,
  .btn-primary {
    width: 100% !important;
    max-width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: normal !important;
  }
  .whatido-grid > div,
  .how-grid > div,
  .why-grid > div,
  .for-grid > div,
  .book-grid > div,
  .service-card,
  .rec-grid > div {
    padding: clamp(1rem, 5vw, 1.35rem) !important;
  }
}

/* Safe motion layer: non-content, non-font changes. Existing counter animations stay untouched. */
.jk-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 560ms ease, transform 560ms ease;
  will-change: opacity, transform;
}

.jk-reveal.jk-visible {
  opacity: 1;
  transform: translateY(0);
}

.jk-reveal-stagger > .jk-reveal:nth-child(2) { transition-delay: 70ms; }
.jk-reveal-stagger > .jk-reveal:nth-child(3) { transition-delay: 120ms; }
.jk-reveal-stagger > .jk-reveal:nth-child(4) { transition-delay: 170ms; }
.jk-reveal-stagger > .jk-reveal:nth-child(5) { transition-delay: 220ms; }
.jk-reveal-stagger > .jk-reveal:nth-child(6) { transition-delay: 270ms; }

.service-card,
.rec-grid > div,
.tools-grid > div,
#who-this-is-for .for-grid > div:nth-child(2) > div,
#what-i-do .whatido-grid > div:first-child > div:nth-of-type(2) > div,
#how-i-work .how-grid > div:first-child > div:nth-child(2) > div:nth-child(2) > div,
#projects .container > div > div:last-child > div,
#proof .container > div > div:last-child > div,
#contact a,
#cta a,
.btn-primary {
  transition-property: transform, box-shadow, border-color, background-color, opacity;
  transition-duration: 220ms;
  transition-timing-function: ease;
}

@media (hover: hover) and (pointer: fine) {
  .service-card:hover,
  .rec-grid > div:hover,
  .tools-grid > div:hover,
  #who-this-is-for .for-grid > div:nth-child(2) > div:hover,
  #what-i-do .whatido-grid > div:first-child > div:nth-of-type(2) > div:hover,
  #how-i-work .how-grid > div:first-child > div:nth-child(2) > div:nth-child(2) > div:hover,
  #projects .container > div > div:last-child > div:hover,
  #proof .container > div > div:last-child > div:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 18px 55px rgba(0, 0, 0, 0.22) !important;
    border-color: rgba(197, 232, 23, 0.28) !important;
  }

  #contact a:hover,
  #cta a:hover,
  .btn-primary:hover {
    transform: translateY(-2px) !important;
  }
}

#contact a:focus-visible,
#cta a:focus-visible,
.btn-primary:focus-visible {
  outline: 2px solid rgba(197, 232, 23, 0.82) !important;
  outline-offset: 4px !important;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .jk-reveal,
  .jk-reveal.jk-visible,
  .service-card,
  .rec-grid > div,
  .tools-grid > div,
  #contact a,
  #cta a,
  .btn-primary {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
}


/* Clean production layout — single source of truth.
   Content and font families are unchanged. */

/* Width system */
:root {
  --jk-max: 1320px;
  --jk-pad: clamp(1rem, 4vw, 3rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { overflow-x: hidden; }

section[id] .container,
header .container,
footer .container {
  width: min(calc(100% - var(--jk-pad)), var(--jk-max)) !important;
  max-width: var(--jk-max) !important;
  margin-inline: auto !important;
}

img, svg, video, canvas {
  max-width: 100%;
  height: auto;
}

/* Conservative typography polish — no oversized hero. */
main > section:first-of-type h1,
.page-wrapper > section:first-of-type h1,
body section:first-of-type h1 {
  font-size: clamp(2.55rem, 3.85vw, 4.1rem) !important;
  line-height: 1.06 !important;
  letter-spacing: -0.04em !important;
  max-width: 780px !important;
}

main > section:first-of-type p,
.page-wrapper > section:first-of-type p,
body section:first-of-type p {
  font-size: clamp(1rem, 1.02vw, 1.12rem) !important;
  line-height: 1.7 !important;
  max-width: 640px !important;
}

@media (min-width: 900px) {
  section[id] h2 {
    font-size: clamp(1.9rem, 2.55vw, 2.9rem) !important;
    line-height: 1.13 !important;
  }

  section[id] h3 {
    font-size: clamp(1.08rem, 1.12vw, 1.28rem) !important;
  }

  section[id] p,
  section[id] li {
    font-size: clamp(1rem, .95vw, 1.08rem) !important;
    line-height: 1.72 !important;
  }

  .section-label {
    font-size: .74rem !important;
  }
}

@media (max-width: 899px) {
  :root { --jk-pad: 1.1rem; }

  main > section:first-of-type h1,
  .page-wrapper > section:first-of-type h1,
  body section:first-of-type h1 {
    font-size: clamp(2.15rem, 9vw, 2.85rem) !important;
    line-height: 1.06 !important;
    max-width: 100% !important;
  }
}

/* Consistent buttons */
button,
.btn-primary,
a.btn-primary,
#published-work a,
#cta button,
#contact button,
header button {
  border-radius: 999px !important;
}

/* Remove footer CTA only */
#contact .btn-primary,
footer .btn-primary,
#contact button.btn-primary {
  display: none !important;
}

/* Main grids use consistent width */
.whatido-grid,
.how-grid,
.why-grid,
.for-grid,
.book-grid,
.services-grid,
.tools-grid,
.rec-grid,
#projects .container > div {
  width: 100% !important;
  max-width: var(--jk-max) !important;
  margin-inline: auto !important;
}

/* Tools: no empty chatbot card; four balanced cards. */
@media (min-width: 900px) {
  .tools-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1rem !important;
  }

  .tools-grid > div {
    min-height: 180px !important;
  }
}

@media (min-width: 1200px) {
  .tools-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

.tools-grid span:empty,
.tools-grid button:empty,
.tools-grid a:empty {
  display: none !important;
}

/* How I work: building blocks in 2 columns on desktop. */
@media (min-width: 900px) {
  #how-i-work .how-grid > div:nth-child(2) > div {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: .85rem 1rem !important;
  }

  #how-i-work .how-grid > div:nth-child(2) > div > div {
    border: 1px solid rgba(246,246,246,.075) !important;
    border-radius: 18px !important;
    background: rgba(246,246,246,.035) !important;
    padding: .95rem 1.05rem !important;
    min-height: 64px !important;
  }
}

/* Published work: preserve component structure; only make book cover larger safely. */
#published-work .book-grid * {
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  word-break: normal !important;
}

@media (min-width: 900px) {
  #published-work .book-grid {
    align-items: center !important;
  }

  #published-work .book-grid img {
    max-height: 520px !important;
    width: auto !important;
    max-width: min(90%, 420px) !important;
    object-fit: contain !important;
  }
}

@media (max-width: 899px) {
  #published-work .book-grid img {
    max-height: 420px !important;
    width: auto !important;
    max-width: 84% !important;
    object-fit: contain !important;
  }
}

/* Projects: do not break React accordion; only normalize visual states. */
#projects .container > div > div:last-child > div {
  box-shadow: none !important;
  outline: 0 !important;
}

#projects .container > div > div:last-child > div > button {
  outline: 0 !important;
}

#projects button > div:last-child {
  margin-top: 0 !important;
  align-self: center !important;
}

#projects .container > div > div:last-child > div > button + div {
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
  margin-top: 0 !important;
}

/* Who CTA: added by clean helper JS, inside first card. */
.jk-after-who-cta {
  margin-top: 1.25rem !important;
  display: flex !important;
  justify-content: flex-start !important;
}

.jk-after-who-cta button {
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 700 !important;
  color: #0a0f1b !important;
  background: #c5e817 !important;
  border: 1px solid #c5e817 !important;
  border-radius: 999px !important;
  padding: .8rem 1.35rem !important;
  min-height: 44px !important;
  cursor: pointer !important;
}

@media (max-width: 899px) {
  .jk-after-who-cta button {
    width: 100% !important;
    text-align: center !important;
  }
}

/* Footer mobile nav left */
@media (max-width: 899px) {
  #contact .footer-grid,
  #contact .footer-grid > div,
  #contact .footer-grid > div > div,
  #contact .footer-grid a,
  #contact .footer-grid button {
    text-align: left !important;
    align-items: flex-start !important;
    justify-items: start !important;
  }
}

/* Projects accordion desktop stability fix */
#projects .container > div > div:last-child {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}
#projects .container > div > div:last-child > div {
  width: 100% !important;
  display: block !important;
  grid-column: auto !important;
  min-height: auto !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(246,246,246,.07) !important;
  border-radius: 0 !important;
}
#projects .container > div > div:last-child > div > button {
  width: 100% !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 1.5rem !important;
  padding: 1.75rem 0 !important;
}
#projects .container > div > div:last-child > div > button + div {
  width: 100% !important;
  display: block !important;
  padding: 0 0 2rem 2.75rem !important;
  margin: 0 !important;
  background: transparent !important;
}
@media (max-width: 899px) {
  #projects .container > div > div:last-child > div > button + div {
    padding-left: 0 !important;
  }
}

/* Final layout pass requested by Juliana: sections in one full-width column, not split panels. */
@media (min-width: 900px) {
  .whatido-grid,
  .how-grid,
  .why-grid,
  .for-grid,
  .book-grid {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    gap: clamp(1.5rem, 2.5vw, 2.5rem) !important;
    align-items: stretch !important;
  }

  .whatido-grid > div,
  .how-grid > div,
  .why-grid > div,
  .for-grid > div,
  .book-grid > div {
    width: 100% !important;
    max-width: 100% !important;
  }

  #what-i-do .whatido-grid > div:first-child > div:nth-of-type(2),
  #who-this-is-for .for-grid > div:nth-child(2),
  #how-i-work .how-grid > div:first-child > div:nth-child(2) > div:nth-child(2),
  #how-i-work .how-grid > div:nth-child(2) > div {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1rem !important;
  }

  #why-this-matters .why-grid,
  #why-now .why-grid {
    display: flex !important;
    flex-direction: column !important;
  }
}

/* Mobile and tablet: use more of the viewport and avoid narrow card columns. */
@media (max-width: 899px) {
  :root { --jk-pad: 0.75rem; }

  section[id] .container,
  header .container,
  footer .container {
    width: calc(100% - 1rem) !important;
    max-width: calc(100% - 1rem) !important;
  }

  .whatido-grid,
  .how-grid,
  .why-grid,
  .for-grid,
  .book-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.15rem !important;
  }

  .whatido-grid > div,
  .how-grid > div,
  .why-grid > div,
  .for-grid > div,
  .book-grid > div,
  .service-card,
  .rec-grid > div {
    width: 100% !important;
    max-width: 100% !important;
    padding: clamp(1.05rem, 4vw, 1.5rem) !important;
  }

  #what-i-do .whatido-grid > div:first-child > div:nth-of-type(2),
  #who-this-is-for .for-grid > div:nth-child(2),
  #how-i-work .how-grid > div:first-child > div:nth-child(2) > div:nth-child(2),
  #how-i-work .how-grid > div:nth-child(2) > div {
    grid-template-columns: 1fr !important;
  }

  a, p, li, h1, h2, h3, h4, span {
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
  }
}

/* Proof stat bar: remove the odd separator strip/gap while keeping the card layout. */
.proof-stats-grid,
.stats-bar {
  gap: 0 !important;
  background-color: transparent !important;
}
.proof-stats-grid > div,
.stats-bar > div {
  border-left: 1px solid rgba(246,246,246,0.07) !important;
}
.proof-stats-grid > div:first-child,
.stats-bar > div:first-child {
  border-left: 0 !important;
}
@media (max-width: 760px) {
  .proof-stats-grid > div,
  .stats-bar > div {
    border-left: 0 !important;
    border-top: 1px solid rgba(246,246,246,0.07) !important;
  }
  .proof-stats-grid > div:first-child,
  .stats-bar > div:first-child {
    border-top: 0 !important;
  }
}

/* Final layout polish requested on 2026-04-30 */

/* Keep the Published Work / book block as the original desktop split: book visual on the left, content on the right. */
@media (min-width: 900px) {
  #published-work .book-grid {
    display: grid !important;
    grid-template-columns: minmax(280px, 0.9fr) minmax(0, 1.1fr) !important;
    align-items: center !important;
    gap: clamp(2rem, 4vw, 4rem) !important;
  }
}

/* Turn the two-part Why / Who sections into one coherent full-width card instead of two separate columns/cards. */
#why-now .why-grid,
#who-this-is-for .for-grid {
  display: block !important;
  border: 1px solid var(--jk-line) !important;
  border-radius: 32px !important;
  padding: clamp(1.35rem, 3vw, 3rem) !important;
  background: linear-gradient(145deg, rgba(246,246,246,0.065), rgba(225,0,152,0.055), rgba(246,246,246,0.02)) !important;
  box-shadow: 0 26px 90px rgba(0, 0, 0, 0.18) !important;
  backdrop-filter: blur(10px) !important;
}

#why-now .why-grid > div,
#who-this-is-for .for-grid > div {
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#why-now .why-grid > div:first-child,
#who-this-is-for .for-grid > div:first-child {
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem) !important;
}

#who-this-is-for .for-grid > div:nth-child(2) {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0.85rem !important;
}

#who-this-is-for .for-grid > div:nth-child(2) > div {
  border: 1px solid rgba(246,246,246,0.08) !important;
  border-radius: 22px !important;
  padding: 1.1rem !important;
  background: rgba(10,15,27,0.36) !important;
}

/* How I work: remove the vertical green connector line and keep 1/2/3 cards aligned on desktop. */
#how-i-work .how-grid > div:first-child > div:nth-child(2) {
  position: static !important;
}

#how-i-work .how-grid > div:first-child > div:nth-child(2) > div:first-child {
  display: none !important;
}

#how-i-work .how-grid > div:first-child > div:nth-child(2) > div:nth-child(2) {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 1rem !important;
}

#how-i-work .how-grid > div:first-child > div:nth-child(2) > div:nth-child(2) > div {
  padding: 1.15rem !important;
  padding-bottom: 1.15rem !important;
  border: 1px solid rgba(246,246,246,0.08) !important;
  border-radius: 24px !important;
  background: rgba(10,15,27,0.36) !important;
  align-items: flex-start !important;
}

#how-i-work .how-grid > div:first-child > div:nth-child(2) > div:nth-child(2) > div p {
  overflow-wrap: anywhere !important;
}

@media (max-width: 760px) {
  #why-now .why-grid,
  #who-this-is-for .for-grid {
    border-radius: 24px !important;
    padding: 1.25rem !important;
  }

  #who-this-is-for .for-grid > div:nth-child(2),
  #how-i-work .how-grid > div:first-child > div:nth-child(2) > div:nth-child(2) {
    grid-template-columns: 1fr !important;
  }
}