:root{
    --bg: #FEFAE0;
    --ink: #161616;
    --ink-2: #5b5b56;
    --ink-3: #8a8a82;
    --paper: #FBFAEF;
    --accent: #7c8c42;        /* olive green for highlights */
    --banner: #F4E5C9;        /* peach cream for stats banner */
    --side-pad: 116px;        /* shared horizontal page padding */
  }

  *{ box-sizing: border-box }
  html, body{ margin: 0; padding: 0 }
  body{
    font-family: "Manrope", ui-sans-serif, system-ui, sans-serif;
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: clip;
  }
  a{ color: inherit; text-decoration: none }
  img{ max-width: 100% }

  /* ---------- Back link ---------- */
  .back-link{
    position: fixed; top: 24px; left: 24px;
    z-index: 50;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 18px;
    background: rgba(255,255,255,.7);
    border-radius: 999px;
    font-size: 14px; font-weight: 600;
    color: var(--ink);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 1px 2px rgba(0,0,0,.05);
    transition: background .2s ease;
  }
  .back-link:hover{ background: rgba(255,255,255,.95) }

  /* ---------- Section nav ---------- */
  html{
    scroll-behavior: smooth;
    scroll-padding-top: 100px;
  }
  .cs-nav{
    position: fixed;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 50;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px;
    background: rgba(255, 255, 255, .7);
    border-radius: 999px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
  }
  .cs-nav a{
    padding: 8px 16px;
    border-radius: 999px;
    font-family: "Manrope", sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    text-decoration: none;
    transition: background .2s ease, color .2s ease;
  }
  .cs-nav a:hover{ background: rgba(126, 148, 119, .15); color: #5C7256; }
  .cs-nav a.active{ background: #7E9477; color: #fff; }
  @media (max-width: 720px){
    .cs-nav a{ padding: 6px 10px; font-size: 12px; }
  }

  /* ---------- Hero image ---------- */
  .cs-hero{
    width: 100%;
    margin: 0;
    padding: 60px 0 24px;
  }
  .cs-hero img{
    width: 100%;
    max-width: none;
    height: auto;
    display: block;
  }

  /* ---------- Title block ---------- */
  .cs-wrap{
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--side-pad);
  }
  .cs-title-block{
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 36px;
  }
  .cs-label{
    display: inline-flex; align-items: center; gap: 10px;
    font-family: "Manrope", sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: normal;
    color: #1E1E1E;
  }
  .cs-label img{ width: 22px; height: 22px; display: block }
  .cs-title{
    margin: 0;
    font-family: "Manrope", sans-serif;
    font-size: 32px;
    font-weight: 700;
    line-height: normal;
    color: #1E1E1E;
  }
  .cs-status{
    display: inline-flex;
    padding: 4px 20px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 24px;
    background: #E9EDC9;
    font-family: "Manrope", sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: normal;
    color: #1E1E1E;
  }
  .cs-intro p{
    margin: 0 0 14px;
    font-family: "Manrope", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: normal;
    color: #221F1F;
    max-width: 100%;
  }
  .cs-intro p:last-child{ margin-bottom: 0; }
  .cs-intro a{
    color: inherit;
    text-decoration: none;
    font-weight: 700;
    transition: color .15s ease;
  }
  .cs-intro a:hover,
  .cs-intro a:focus-visible{
    color: #7c8c42;
    outline: none;
  }
  .cs-intro a:active{
    color: #5d6b30;
  }

  /* ---------- Stats banner ---------- */
  .cs-stats{
    display: inline-flex;
    /* left padding aligns the medal with the intro paragraphs' left edge
       (cs-wrap is max-width 940px, centered, with 24px inner padding) */
    padding: 12px 40px 12px max(var(--side-pad), calc((100vw - 1200px) / 2 + var(--side-pad)));
    justify-content: center;
    align-items: center;
    gap: 16px;
    border-radius: 0 50px 50px 0;
    background: #FAEDCD;
    margin: 36px 0;
    font-family: "Manrope", sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: normal;
    color: #6A4E08;
  }
  .cs-stats img{ width: 44px; height: 44px; flex-shrink: 0 }
  .cs-stats strong{
    font-weight: 700;
  }

  /* ---------- Sections (sticky-label two-col) ----------
     Sections share the same left edge as .cs-wrap (max-width 940, 24px padding)
     so labels start where the title/intro above begins. */
  .cs-section{
    max-width: 1200px;
    margin: 80px auto;
    padding: 0 var(--side-pad);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 48px;
    align-items: start;
  }
  .cs-section-label{
    font-family: "Manrope", sans-serif;
    font-size: 24px;
    font-weight: 700;
    line-height: normal;
    color: #1E1E1E;
    white-space: nowrap;
  }
  .cs-section-body{
    display: flex;
    flex-direction: column;
    gap: 28px;
  }
  .cs-section-body p{
    margin: 0;
    font-family: "Manrope", sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: normal;
    color: #221F1F;
  }
  .cs-highlight{
    color: #919E29;
    font-weight: 800;
  }
  .cs-quote{
    display: flex;
    align-items: center;
    gap: 8px;
    align-self: stretch;
  }
  .cs-quote img{
    width: 81.147px;
    height: 78.135px;
    aspect-ratio: 27 / 26;
    transform: rotate(-7.708deg);
    flex-shrink: 0;
  }
  .cs-quote p{
    margin: 0;
    font-family: "Kite One", cursive;
    font-style: normal;
    font-size: 20px;
    font-weight: 400;
    line-height: normal;
    color: #1E1E1E;
  }

  /* ---------- Screenshot pair (aligned with body column, bleeds right) ---------- */
  .cs-screenshots{
    display: flex;
    gap: 24px;
    margin: 0;
    padding: 0;
    overflow: visible;
    min-width: 0;
  }
  .cs-screenshots img{
    width: 530.28px;
    height: 317.52px;
    aspect-ratio: 162 / 97;
    flex-shrink: 0;
    max-width: none;
    display: block;
    border-radius: 20px;
    border: 8px solid #1E1E1E;
    object-fit: fill;
  }
  /* ---------- "Check out my other work" section ---------- */
  .cs-more-section{
    max-width: 1200px;
    margin: 120px auto;
    padding: 0 var(--side-pad);
    display: flex;
    flex-direction: column;
    gap: 32px;
  }
  .cs-more-eyebrow{
    margin: 0 0 4px;
    font-family: "Kite One", cursive;
    font-size: 20px;
    font-weight: 400;
    line-height: normal;
    color: #616060;
  }
  .cs-more-title{
    margin: 0;
    font-family: "Manrope", sans-serif;
    font-size: 32px;
    font-weight: 700;
    line-height: normal;
    color: #1E1E1E;
  }
  .cs-more-card{
    display: flex;
    align-items: center;
    gap: 32px;
    padding: 24px;
    border-radius: 20px;
    background: var(--paper);
    text-decoration: none;
    color: inherit;
    transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease;
  }
  .cs-more-card:hover{
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0,0,0,.08);
  }
  .cs-more-thumb{
    flex-shrink: 0;
    width: 280px;
    height: 180px;
    border-radius: 14px;
    overflow: hidden;
  }
  .cs-more-thumb img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .cs-more-text{
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .cs-more-card-title{
    font-family: "Manrope", sans-serif;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.3;
    color: #1E1E1E;
  }
  .cs-more-cta{
    font-family: "Manrope", sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #7E9477;
    transition: color .2s ease;
  }
  .cs-more-card:hover .cs-more-cta{
    color: #5C7256;
  }

  .cs-section-body .cs-caption{
    margin: -16px 0 0;
    font-family: "Manrope", sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: normal;
    color: rgba(34, 31, 31, 0.6);
    max-width: 530.28px;
  }

  /* ---------- Understanding the Problem section ---------- */
  .cs-problem-section{
    max-width: 1200px;
    margin: 100px auto 80px;
    padding: 0 var(--side-pad);
  }
  .cs-problem-title{
    margin: 0 0 32px;
    font-family: "Manrope", sans-serif;
    font-size: 48px;
    font-weight: 700;
    line-height: normal;
    color: #1E1E1E;
  }
  .cs-problem-title-script{
    font-family: "Mogra", "Manrope", cursive;
    font-size: 48px;
    font-weight: 400;
    line-height: normal;
    color: #1E1E1E;
  }
  .cs-problem-bubble{
    background-image: url("../assets/case-studies/forum/text-container.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding: 36px 48px 56px;
    margin: 0 0 8px;
    max-width: none;
  }
  .cs-problem-bubble p{
    margin: 0;
    font-family: "Manrope", sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: normal;
    color: #1E1E1E;
  }
  .cs-problem-intro{
    margin: 0 0 16px;
    padding-left: 52px;
    font-family: "Manrope", sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: normal;
    color: var(--ink);
  }
  .cs-problem-list{
    list-style: none;
    margin: 0;
    padding: 0 0 0 52px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .cs-problem-item{
    display: flex;
    align-items: center;
    gap: 14px;
    font-family: "Manrope", sans-serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--ink);
  }
  .cs-checkbox{
    width: 36.96px;
    height: 36.96px;
    flex-shrink: 0;
  }
  .cs-problem-item-content{
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
  }
  .cs-problem-branches{
    display: inline-flex;
    flex-direction: column;
    gap: 4px;
    font-weight: 400;
  }
  .cs-problem-branch{
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  .cs-problem-branch img{
    width: 32px;
    height: auto;
    flex-shrink: 0;
  }

  /* ---------- Research / Competitor study section ---------- */
  .cs-research-section{
    margin: 100px 0 80px;
  }
  .cs-research-card{
    background: #E6EAC4;
    border-radius: 32px;
    padding: 48px 0 96px;
  }
  .cs-research-card-inner{
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--side-pad);
  }
  .cs-research-intro{
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 96px;
  }
  .cs-research-intro p{
    margin: 0;
    font-family: "Kite One", cursive;
    font-size: 24px;
    font-weight: 400;
    font-style: normal;
    line-height: normal;
    color: #1E1E1E;
  }
  .cs-research-intro img{
    width: 66.936px;
    height: 61.894px;
    aspect-ratio: 66.94 / 61.89;
    transform: rotate(13.323deg);
    flex-shrink: 0;
  }
  .cs-research-block{
    margin-bottom: 96px;
  }
  .cs-research-block:last-child{
    margin-bottom: 0;
  }
  .cs-research-h3{
    margin: 0 0 28px;
    font-family: "Manrope", sans-serif;
    font-size: 32px;
    font-weight: 800;
    line-height: normal;
    color: #919E29;
  }
  .cs-research-row{
    display: flex;
    align-items: flex-start;
    gap: 40px;
  }
  .cs-research-row--reverse{
    flex-direction: row-reverse;
  }
  .cs-research-text{
    flex: 1;
    min-width: 0;
  }
  .cs-research-text > p{
    margin: 0 0 32px;
    font-family: "Manrope", sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: normal;
    color: #1E1E1E;
  }
  .cs-research-text ul{
    margin: 0;
    padding: 0 0 0 24px;
    list-style: disc;
    display: flex;
    flex-direction: column;
    gap: 32px;
  }
  .cs-research-text li{
    font-family: "Kite One", cursive;
    font-size: 20px;
    font-weight: 400;
    font-style: normal;
    line-height: normal;
    color: #1E1E1E;
  }
  .cs-research-image{
    flex-shrink: 0;
    border-radius: 20px;
    display: block;
    object-fit: cover;
  }
  .cs-research-image--competitor{
    width: 651px;
    height: 433px;
    aspect-ratio: 215 / 143;
  }
  .cs-research-image--oldui{
    width: 627px;
    height: 426px;
    aspect-ratio: 131 / 89;
  }

  /* ---------- Main goals section ---------- */
  .cs-goals-section{
    max-width: 1200px;
    margin: 100px auto 80px;
    padding: 0 var(--side-pad);
  }
  .cs-goals-title{
    margin: 0 0 40px;
    font-family: "Manrope", sans-serif;
    font-size: 28px;
    font-weight: 700;
    line-height: normal;
    color: #231F20;
    max-width: 900px;
  }
  .cs-goals-list{
    margin: 0;
    padding-left: 54px;
    list-style: decimal;
    font-family: "Manrope", sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 40px;
    color: #231F20;
  }
  .cs-goals-list li{
    padding-left: 8px;
  }
  .cs-goals-list .cs-mogra{
    font-family: "Mogra", "Manrope", cursive;
    font-size: 20px;
    font-weight: 400;
    line-height: 40px;
    color: #231F20;
  }

  /* ---------- Identity section ---------- */
  .cs-identity-section{
    max-width: 1200px;
    margin: 100px auto 80px;
    padding: 0 var(--side-pad);
  }
  .cs-identity-row{
    display: flex;
    align-items: flex-end;
    gap: 48px;
    margin-bottom: 28px;
  }
  .cs-identity-left{
    flex: 1;
    min-width: 0;
  }
  .cs-identity-title{
    margin: 0 0 28px;
    font-family: "Manrope", sans-serif;
    font-size: 28px;
    font-weight: 700;
    line-height: 40px;
    color: #1E1E1E;
  }
  .cs-identity-title-script{
    font-family: "Mogra", "Manrope", cursive;
    font-weight: 400;
    color: #1E1E1E;
  }
  .cs-identity-content1{
    margin: 0;
    font-family: "Manrope", sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 25px;
    color: #1E1E1E;
  }
  .cs-identity-personality{
    font-family: "Mogra", "Manrope", cursive;
    font-weight: 400;
    line-height: 25px;
    color: #74928B;
  }
  .cs-identity-image{
    width: 635px;
    height: 256px;
    flex-shrink: 0;
    display: block;
    object-fit: cover;
  }
  .cs-identity-content2{
    margin: 0;
    font-family: "Manrope", sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 28px;
    color: #1E1E1E;
  }
  .cs-identity-feeling{
    font-family: "Kite One", cursive;
    font-weight: 400;
    line-height: 28px;
    color: #74928B;
  }
  .cs-identity-content2 strong{
    font-weight: 700;
    color: #1E1E1E;
  }

  /* ---------- Prototyping section ---------- */
  .cs-prototype-section{
    max-width: 1200px;
    margin: 160px auto 80px;
    padding: 0 var(--side-pad);
  }
  .cs-prototype-title{
    margin: 0 0 28px;
    font-family: "Manrope", sans-serif;
    font-size: 28px;
    font-weight: 700;
    line-height: 40px;
    color: #1E1E1E;
  }
  .cs-prototype-title-script{
    font-family: "Mogra", "Manrope", cursive;
    font-weight: 400;
    color: #1E1E1E;
  }
  .cs-prototype-content{
    margin: 0 0 28px;
    font-family: "Manrope", sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 28px;
    color: #1E1E1E;
  }
  .cs-prototype-content strong{
    font-weight: 700;
    color: #1E1E1E;
  }
  .cs-prototype-kite{
    font-family: "Kite One", cursive;
    font-weight: 400;
    color: #919E29;
  }
  .cs-prototype-image{
    width: 100vw;
    max-width: none;
    height: auto;
    display: block;
    /* Bleed the image to the full viewport width, ignoring the section's padding */
    margin-left: calc((100vw - 100%) / -2);
    margin-right: calc((100vw - 100%) / -2);
    margin-bottom: 40px;
  }
  .cs-prototype-image:last-child{ margin-bottom: 0; }
  .cs-prototype-section .cs-prototype-image:first-of-type{ margin-top: -20px; }

  /* ---------- The End is Near section ---------- */
  .cs-end-section{
    max-width: 1200px;
    margin: 100px auto 80px;
    padding: 0 var(--side-pad);
  }
  .cs-end-header{
    margin-bottom: 32px;
  }
  .cs-end-pretitle{
    margin: 0 0 4px;
    font-family: "Kite One", cursive;
    font-size: 18px;
    font-weight: 400;
    line-height: normal;
    color: #1E1E1E;
  }
  .cs-end-title{
    margin: 0;
    font-family: "Manrope", sans-serif;
    font-size: 32px;
    font-weight: 700;
    line-height: normal;
    color: #1E1E1E;
  }
  .cs-end-card{
    background: #FAEDCD;
    border-radius: 32px;
    padding: 56px 64px;
    /* Card extends 64px past the section's content edges on each side;
       internal horizontal padding of 64px brings the content back to the
       standard page-padding alignment so the iteration rows line up with
       other sections. */
    margin-left: -64px;
    margin-right: -64px;
    display: flex;
    flex-direction: column;
    gap: 74px;
  }
  .cs-end-intro{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
  }
  .cs-end-intro img{
    width: 71.369px;
    height: 66.924px;
    aspect-ratio: 64.88 / 60.84;
    transform: rotate(8.338deg);
    flex-shrink: 0;
  }
  .cs-end-intro p{
    margin: 0;
    font-family: "Kite One", cursive;
    font-size: 20px;
    font-weight: 400;
    line-height: 30px;
    color: #1E1E1E;
  }
  .cs-end-mogra{
    font-family: "Mogra", "Manrope", cursive;
    font-weight: 400;
    color: #1E1E1E;
  }
  .cs-end-iter{
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 32px;
    align-items: start;
  }
  .cs-end-iter-label{
    margin: 0;
    font-family: "Manrope", sans-serif;
    font-size: 24px;
    font-weight: 700;
    line-height: normal;
    color: #6A4E08;
    white-space: nowrap;
  }
  .cs-end-iter-content{
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
  .cs-end-iter-desc{
    margin: 0;
    font-family: "Manrope", sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 28px;
    color: #1E1E1E;
  }
  .cs-end-iter-image{
    width: 100%;
    height: auto;
    display: block;
  }
  .cs-end-success{
    margin: 0;
    text-align: left;
    font-family: "Kite One", cursive;
    font-size: 20px;
    font-weight: 400;
    line-height: 30px;
    color: #1E1E1E;
  }
  .cs-end-pill-wrap{
    margin-top: 56px;
  }
  .cs-end-pill{
    font-family: "Manrope", sans-serif;
    font-size: 28px;
    font-weight: 800;
    line-height: 30px;
    color: #6A4E08;
  }
  .cs-end-followup{
    margin: 28px 0 0;
    font-family: "Manrope", sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 28px;
    color: #1E1E1E;
  }
  .cs-end-followup + .cs-end-followup{
    margin-top: 28px;
  }

  /* ---------- AI saves the day section ---------- */
  .cs-ai-section{
    max-width: 1200px;
    margin: 100px auto 80px;
    padding: 0 var(--side-pad);
    display: flex;
    flex-direction: column;
    gap: 56px;
  }
  .cs-ai-header{
    margin: 0;
  }
  .cs-ai-title{
    margin: 0;
    font-family: "Manrope", sans-serif;
    font-size: 28px;
    font-weight: 700;
    line-height: 40px;
    color: #1E1E1E;
  }
  .cs-ai-subtitle{
    margin: 0;
    font-family: "Kite One", cursive;
    font-size: 20px;
    font-weight: 400;
    line-height: 30px;
    color: #1E1E1E;
  }
  .cs-ai-bubble-wrap{
    display: flex;
    justify-content: flex-end;
  }
  .cs-ai-bubble{
    display: flex;
    width: 713px;
    max-width: 100%;
    padding: 20px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 28px;
    background: #FAEDCD;
    font-family: "Manrope", sans-serif;
    font-size: 20px;
    font-weight: 500;
    line-height: 28px;
    color: #1E1E1E;
  }
  .cs-ai-response{
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .cs-ai-response-text{
    display: flex;
    flex-direction: column;
    gap: 28px;
  }
  .cs-ai-response p{
    margin: 0;
    font-family: "Kite One", cursive;
    font-size: 20px;
    font-weight: 400;
    line-height: 28px;
    color: #1E1E1E;
  }
  .cs-ai-actions{
    display: flex;
    align-items: center;
    gap: 14px;
  }
  .cs-ai-actions img{
    width: 24px;
    height: 24px;
    display: block;
  }
  .cs-ai-chatbox{
    display: flex;
    padding: 20px;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    gap: 16px;
    border-radius: 28px;
    background: #FFFFFF;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  }
  .cs-ai-chatbox-text{
    margin: 0;
    font-family: "Manrope", sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 28px;
    color: #1E1E1E;
  }
  .cs-ai-chatbox-icons{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    align-self: stretch;
  }
  .cs-ai-chatbox-icon{
    width: 42px;
    height: 42px;
    display: block;
  }
  .cs-ai-chatbox-right{
    display: flex;
    align-items: center;
    gap: 14px;
  }

  /* Scroll-triggered animations for the AI section */
  .cs-ai-bubble-wrap,
  .cs-ai-response{
    opacity: 0;
    transform: translateY(40px);
    transition: opacity .6s ease, transform .6s cubic-bezier(.2,.8,.2,1);
  }
  .cs-ai-bubble-wrap{
    transition: opacity .95s ease, transform .95s cubic-bezier(.2,.8,.2,1);
  }
  .cs-ai-bubble-wrap.in-view,
  .cs-ai-response.in-view{
    opacity: 1;
    transform: translateY(0);
  }
  @media (prefers-reduced-motion: reduce){
    .cs-ai-bubble-wrap,
    .cs-ai-response{
      opacity: 1;
      transform: none;
      transition: none;
    }
  }

  /* ---------- The Final Product section ---------- */
  .cs-final-section{
    max-width: 1200px;
    margin: 100px auto 80px;
    padding: 0 var(--side-pad);
  }
  .cs-final-header{
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 32px;
  }
  .cs-final-title{
    margin: 0;
    font-family: "Manrope", sans-serif;
    font-size: 48px;
    font-weight: 700;
    line-height: normal;
    color: #1E1E1E;
  }
  .cs-final-header img{
    width: 60.8px;
    height: 60.8px;
    aspect-ratio: 1 / 1;
    translate: 12px -2px;
    transform-origin: 50% 60%;
    animation: cs-party-wobble 1.3s ease-in-out infinite;
    transition: scale .25s ease;
    cursor: pointer;
  }
  .cs-final-header img:hover{
    animation-play-state: paused;
    scale: 1.1;
  }
  .cs-final-header img.clicked{
    animation: cs-party-bounce .6s ease-out forwards !important;
    animation-play-state: running !important;
  }
  @keyframes cs-party-wobble{
    /* quick quiver: rotate up, rotate down, settle, then wait ~1s */
    0%        { rotate: 0deg; }
    8%        { rotate: -3deg; }
    16%       { rotate: 3deg; }
    23%, 100% { rotate: 0deg; }
  }
  @keyframes cs-party-bounce{
    /* click feedback: rotate up 20deg, then settle back */
    0%   { rotate: 0deg; }
    30%  { rotate: -20deg; }
    100% { rotate: 0deg; }
  }
  @media (prefers-reduced-motion: reduce){
    .cs-final-header img{ animation: none; }
  }
  .cs-final-video{
    width: 960px;
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    background: #D9D9D9;
    display: block;
    margin-bottom: 28px;
  }
  .cs-final-caption{
    margin: 0;
    font-family: "Manrope", sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 28px;
    color: #1E1E1E;
  }

  /* ---------- What I learned section ---------- */
  .cs-learned-section{
    max-width: 1200px;
    margin: 100px auto 80px;
    padding: 0 var(--side-pad);
    display: flex;
    flex-direction: column;
    gap: 28px;
  }
  .cs-learned-title{
    margin: 0;
    font-family: "Manrope", sans-serif;
    font-size: 48px;
    font-weight: 700;
    line-height: normal;
    color: #1E1E1E;
  }
  .cs-learned-body{
    margin: 0;
    font-family: "Manrope", sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 32px;
    color: #1E1E1E;
  }
  .cs-learned-group{
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .cs-learned-list{
    margin: 0;
    padding: 0 0 0 28px;
    list-style: disc;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .cs-learned-list li{
    font-family: "Manrope", sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 32px;
    color: #1E1E1E;
  }
  .cs-learned-highlight{
    font-family: "Manrope", sans-serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 32px;
    color: #919E29;
  }

  /* ---------- Responsive ---------- */
  @media (max-width: 860px){
    .cs-hero{ padding-top: 80px }
    .cs-section{ grid-template-columns: 1fr; gap: 18px }
    .cs-screenshots{ grid-template-columns: 1fr }
    .cs-stats{ flex-wrap: wrap; border-radius: 24px; padding: 22px 28px }
    .cs-quote{ flex-direction: column; gap: 12px }
  }

  /* ---------- Mobile + tablet blocker ---------- */
  .mobile-blocker{ display: none; }
  @media (max-width: 1024px){
    html, body{ overflow: hidden; height: 100%; }
    .mobile-blocker{
      display: flex;
      position: fixed;
      inset: 0;
      z-index: 9999;
      background: var(--bg);
      align-items: center;
      justify-content: center;
      padding: 32px;
    }
    .mobile-blocker-inner{
      text-align: center;
      max-width: 360px;
    }
    .mobile-blocker-text{
      font-family: "Kite One", serif;
      font-size: 22px;
      line-height: 1.5;
      color: var(--ink, #161616);
      margin: 0 0 28px;
    }
    .mobile-blocker-btn{
      display: inline-block;
      padding: 12px 28px;
      border-radius: 999px;
      background: #7E9477;
      color: #fff;
      font-family: "Manrope", sans-serif;
      font-size: 14px;
      font-weight: 600;
      text-decoration: none;
      transition: background .2s ease;
    }
    .mobile-blocker-btn:hover{ background: #5C7256; }
    .mobile-blocker-text--tablet{ display: none; }
  }
  @media (min-width: 641px) and (max-width: 1024px){
    .mobile-blocker-text--mobile{ display: none; }
    .mobile-blocker-text--tablet{ display: block; }
  }