.shiny-thing {
  background-color: #edece8;
  width: 1440px;
  min-width: 100%;
  height: 4050px;
  position: relative;
  margin: 0 auto;
}
/* h 3370, top 649 */
.shiny-thing .rectangle {
  position: absolute;
  top: 649px;
  left: 24px;
  width: calc(100% - 48px);
  height: 3370px;
  background-color: #f8f8f8;
  border-radius: 8px;
}

.shiny-thing .img {
  position: absolute;
  height: 14px;
  top: var(--hero-logo-top);
  left: 513px;
  width: 75px;
  color: #131c36;
}

.shiny-thing .tagline {
  position: absolute;
  width: 413px;
  top: var(--hero-tagline-top);
  left: 80px;
  font-family: "Manrope", Helvetica;
  font-weight: 700;
  color: #131c36;
  font-size: 20px;
  letter-spacing: -0.40px;
  line-height: 24px;
}

.shiny-thing .guardrails-for {
  position: absolute;
  width: 847px;
  top: var(--hero-title-top);
  left: 513px;
  font-family: "Manrope", Helvetica;
  font-weight: 700;
  color: #131c36;
  font-size: 105px;
  letter-spacing: -3.15px;
  line-height: 100px;
}

.shiny-thing .your-team-always {
  position: absolute;
  width: 641px;
  top: var(--hero-description-top);
  left: 513px;
  font-family: "Manrope", Helvetica;
  font-weight: 400;
  color: #676d7f;
  font-size: 20px;
  letter-spacing: 0;
  line-height: 25px;
}

.shiny-thing .span {
  font-weight: 500;
}

.shiny-thing .hero-emphasis {
  font-weight: 700;
}

.shiny-thing .group {
  position: absolute;
  top: var(--hero-cta-top);
  left: calc(50.00% - 206px);
  width: 225px;
  height: 56px;
  box-shadow: 0px 20px 80px #5162ff40;
  text-decoration: none;
  display: block;
}

.shiny-thing .rectangle-2 {
  position: absolute;
  top: calc(50.00% - 28px);
  left: calc(50.00% - 112px);
  width: 223px;
  height: 56px;
}

.shiny-thing .div {
  position: absolute;
  top: calc(50.00% - 20px);
  left: calc(50.00% - 108px);
  width: 215px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Manrope", Helvetica;
  font-weight: 500;
  color: #ffffff;
  font-size: 16px;
  text-align: center;
  letter-spacing: 0;
  line-height: 18px;
}

.shiny-thing .section-heading-problem {
  width: 413px;
  top: var(--problem-heading-top);
  left: 80px;
  font-family: "Manrope", Helvetica;
  font-weight: 700;
  letter-spacing: -0.64px;
  line-height: 38px;
  position: absolute;
  color: #131c36;
  font-size: 32px;
}

.shiny-thing .section-heading-who {
  position: absolute;
  width: 413px;
  top: var(--who-heading-top);
  left: 80px;
  font-family: "Manrope", Helvetica;
  font-weight: 700;
  color: #131c36;
  font-size: 32px;
  letter-spacing: -0.64px;
  line-height: 60px;
}

.shiny-thing .section-heading-about {
  position: absolute;
  width: 413px;
  top: var(--about-heading-top);
  left: 80px;
  font-family: "Manrope", Helvetica;
  font-weight: 700;
  color: #131c36;
  font-size: 18px;
  letter-spacing: -0.36px;
  line-height: 24px;
}

.shiny-thing .at-series-a-velocity {
  position: absolute;
  width: 739px;
  top: var(--problem-text-top);
  left: 513px;
  font-family: "Manrope", Helvetica;
  font-weight: 500;
  color: #676d7f;
  font-size: 32px;
  letter-spacing: 0;
  line-height: 40px;
}

.shiny-thing .we-re-building-the {
  position: absolute;
  width: 1310px;
  top: var(--about-statement-top);
  left: 81px;
  font-family: "Manrope", Helvetica;
  font-weight: 500;
  color: #676d7f;
  font-size: 64px;
  letter-spacing: 0;
  line-height: 72px;
}

.shiny-thing .late-seed-and-series {
  position: absolute;
  width: 847px;
  top: var(--who-text-top);
  left: 513px;
  font-family: "Manrope", Helvetica;
  font-weight: 500;
  color: #676d7f;
  font-size: 48px;
  letter-spacing: 0;
  line-height: 52px;
  z-index: 10;
}

.shiny-thing .p {
  position: absolute;
  width: 630px;
  top: var(--footer-top);
  left: 80px;
  font-family: "Manrope", Helvetica;
  font-weight: 500;
  color: #131c364c;
  font-size: 16px;
  letter-spacing: 0;
  line-height: 16px;
}

.shiny-thing .after-years-in-GTM {
  position: absolute;
  width: 522px;
  top: var(--pattern-text-top);
  left: 513px;
  font-family: "Manrope", Helvetica;
  font-weight: 500;
  color: #676d7f;
  font-size: 20px;
  letter-spacing: 0;
  line-height: 28px;
}

.shiny-thing .section-heading-pattern {
  width: 334px;
  top: var(--pattern-heading-top);
  left: 81px;
  font-family: "Manrope", Helvetica;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 28px;
  position: absolute;
  color: #131c36;
  font-size: 32px;
}

.shiny-thing .section-heading-built {
  position: absolute;
  width: 334px;
  top: var(--built-heading-top);
  left: 81px;
  font-family: "Manrope", Helvetica;
  font-weight: 800;
  color: #131c36;
  font-size: 32px;
  letter-spacing: 0;
  line-height: 28px;
}

.shiny-thing .section-heading-for {
  position: absolute;
  width: 334px;
  top: var(--for-heading-top);
  left: 81px;
  font-family: "Manrope", Helvetica;
  font-weight: 800;
  color: #131c36;
  font-size: 32px;
  letter-spacing: 0;
  line-height: 28px;
}

.shiny-thing .we-stopped {
  position: absolute;
  width: 522px;
  top: var(--built-text-top);
  left: 513px;
  font-family: "Manrope", Helvetica;
  font-weight: 400;
  color: #676d7f;
  font-size: 20px;
  letter-spacing: 0;
  line-height: 28px;
}

.shiny-thing .product-name {
  font-weight: 800;
}

.shiny-thing .late-seed-and-series-2 {
  position: absolute;
  width: 522px;
  top: var(--for-text-top);
  left: 513px;
  font-family: "Manrope", Helvetica;
  font-weight: 500;
  color: #676d7f;
  font-size: 20px;
  letter-spacing: 0;
  line-height: 28px;
}

/* Positioning variables - all elements positioned absolutely from top */
:root {
  /* Hero section */
  --hero-logo-top: 25px;
  --hero-tagline-top: 178px;
  --hero-title-top: 166px;
  --hero-description-top: 394px;
  --hero-cta-top: 486px;
  
  /* Background rectangle */
  --rectangle-top: 649px;
  
  /* Problem section */
  --problem-heading-top: 703px;
  --problem-text-top: 702px;
  
  /* Solution section */
  --solution-heading-top: 1025px;
  --execution-wrapper-top: 1135px;
  
  /* Who this is for section */
  --who-heading-top: 1733px;
  --who-text-top: 1755px;
  
  /* Secondary CTA */
  --cta-secondary-top: 2006px;
  
  /* About section */
  --about-heading-top: 2284px;
  --about-statement-top: 2325px;
  
  /* Pattern section */
  --pattern-heading-top: 2716px;
  --pattern-text-top: 2720px;
  
  /* What we built section */
  --built-heading-top: 3080px;
  --built-text-top: 3085px;
  
  /* Who we're for section */
  --for-heading-top: 3558px;
  --for-text-top: 3561px;
  
  /* Divider lines */
  --divider-line-1-top: 2168px;
  --divider-line-2-top: 2677px;
  --divider-line-3-top: 3042px;
  --divider-line-4-top: 3522px;
  --divider-line-5-top: 3941px;
  
  /* Footer */
  --footer-top: 3954px;
}

.shiny-thing .divider-line-1 {
  top: var(--divider-line-1-top);
  left: 81px;
  width: 1286px;
  height: 1px;
  position: absolute;
  object-fit: cover;
}

.shiny-thing .divider-line-2 {
  top: var(--divider-line-2-top);
  left: 81px;
  width: 1286px;
  height: 1px;
  position: absolute;
  object-fit: cover;
}

.shiny-thing .divider-line-3 {
  top: var(--divider-line-3-top);
  left: 81px;
  width: 1286px;
  height: 1px;
  position: absolute;
  object-fit: cover;
}

.shiny-thing .divider-line-4 {
  top: var(--divider-line-4-top);
  left: 81px;
  width: 1286px;
  height: 1px;
  position: absolute;
  object-fit: cover;
}

.shiny-thing .divider-line-5 {
  top: var(--divider-line-5-top);
  left: 82px;
  width: 1278px;
  height: 1px;
  position: absolute;
  object-fit: cover;
}

.shiny-thing .footer-brand {
  position: absolute;
  top: var(--footer-top);
  left: calc(50.00% + 400px);
  width: 243px;
  font-family: "Manrope", Helvetica;
  font-weight: 700;
  color: #131c364c;
  font-size: 14px;
  text-align: right;
  letter-spacing: -0.28px;
  line-height: 18px;
}

.shiny-thing .section-heading-solution {
  width: 413px;
  top: var(--solution-heading-top);
  left: 80px;
  font-family: "Manrope", Helvetica;
  font-weight: 700;
  letter-spacing: -0.64px;
  line-height: 40px;
  position: absolute;
  color: #131c36;
  font-size: 32px;
}

.shiny-thing .execution-wrapper {
  position: absolute;
  top: var(--execution-wrapper-top);
  left: 24px;
  width: calc(100% - 48px);
  padding: 72px 88px;
}

.shiny-thing .execution-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 48px;
}

.shiny-thing .execution-column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  border-right: 1px solid #d9dbe8;
  padding-right: 48px;
}

.shiny-thing .execution-column:last-child {
  border-right: none;
  padding-right: 0;
}

.shiny-thing .execution-column:nth-child(n + 2) {
  padding-left: 48px;
}

.shiny-thing .execution-column:first-child {
  /* border-left: 1px solid #d9dbe8; */
  padding-left: 48px;
}

/* Standalone left vertical line */
.shiny-thing .vertical-line-left {
  position: absolute;
  top: 1210px;
  left: 80px;
  width: 1px;
  height: 470px;
  background-color: #d9dbe8;
}

/* Standalone middle vertical line */
.shiny-thing .vertical-line-middle {
  position: absolute;
  top: 1210px;
  left: 513px;
  width: 1px;
  height: 470px;
  background-color: #d9dbe8;
}

/* Standalone right vertical line */
.shiny-thing .vertical-line-right {
  position: absolute;
  top: 1210px;
  left: 947px;
  width: 1px;
  height: 470px;
  background-color: #d9dbe8;
}

.shiny-thing .execution-icon {
  width: 56px;
  height: auto;
}

.shiny-thing .execution-title {
  margin: 0;
  font-family: "Manrope", Helvetica;
  font-weight: 700;
  color: #131c36;
  font-size: 44px;
  line-height: 48px;
}

.shiny-thing .execution-subtitle {
  margin: 0;
  font-family: "Manrope", Helvetica;
  font-weight: 700;
  color: #656a79;
  font-size: 18px;
  line-height: 26px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.shiny-thing .execution-body {
  margin: 0;
  font-family: "Manrope", Helvetica;
  font-weight: 500;
  color: #4b5268;
  font-size: 18px;
  line-height: 28px;
}

.shiny-thing .group-2 {
  position: absolute;
  width: 225px;
  height: 56px;
  top: var(--cta-secondary-top);
  left: 514px;
  text-decoration: none;
  display: block;
}

.shiny-thing .rectangle-3 {
  position: absolute;
  width: 99.11%;
  height: 100%;
  top: 0;
  left: 0;
}

.shiny-thing .cta-button-secondary {
  position: absolute;
  width: 95.56%;
  height: 71.43%;
  top: 14.29%;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Manrope", Helvetica;
  font-weight: 500;
  color: #131c36;
  font-size: 16px;
  text-align: center;
  letter-spacing: 0;
  line-height: 18px;
  border: 2px solid #131c36;
  border-radius: 8px;
  background: transparent;
}

.shiny-thing .rectangle-3 {
  display: none;
}

/* MOBILE */
/* ============================
   Mobile layout (< 1000px)
   Matches your "Shiny-thing_startpage_mobile_01" spec
   ============================ */

@media (max-width: 999px) {
  /* Container becomes a vertical stack we can order */
  .shiny-thing {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    width: 100%;
    min-width: 0;
    height: auto;
    padding: 16px;
    background: #EDEDE8;
  }

  /* Unified content box for all sections from problem to footer */
  .shiny-thing .mobile-content-box {
    display: flex;
    flex-direction: column;
    width: 100% !important;
    background: #F8F8F8;
    border-radius: 8px;
    padding: 16px;
    gap: 16px;
    order: 55 !important;
  }

  /* Style divider lines within mobile content box */
  .shiny-thing .mobile-content-box .divider-line-1,
  .shiny-thing .mobile-content-box .divider-line-2,
  .shiny-thing .mobile-content-box .divider-line-3,
  .shiny-thing .mobile-content-box .divider-line-4,
  .shiny-thing .mobile-content-box .divider-line-5 {
    position: static !important;
    width: 100% !important;
    height: 0 !important;
    margin: 8px 0 !important;
    border: none !important;
    border-top: 1px solid #d9dbe8 !important;
    object-fit: cover;
  }

  /* Position each divider between sections using order property */
  .shiny-thing .mobile-content-box .divider-line-1 { order: 120 !important; } /* After group-2 button (115) → before About (130) */
  .shiny-thing .mobile-content-box .divider-line-2 { order: 145 !important; } /* After About statement (140) → before Pattern (150) */
  .shiny-thing .mobile-content-box .divider-line-3 { order: 165 !important; } /* After The Pattern text (160) → before Built heading (170) */
  .shiny-thing .mobile-content-box .divider-line-4 { order: 185 !important; } /* After What we built text (180) → before For heading (190) */
  .shiny-thing .mobile-content-box .divider-line-5 { order: 205 !important; } /* After Who we're for text (200) → before footer (210) */

  /* Hide desktop-only decor (but keep mobile-content-box dividers visible) */
  .shiny-thing .rectangle { display: none !important; }
  .shiny-thing > .divider-line-1,
  .shiny-thing > .divider-line-2,
  .shiny-thing > .divider-line-3,
  .shiny-thing > .divider-line-4,
  .shiny-thing > .divider-line-5,
  .shiny-thing .vertical-line-left,
  .shiny-thing .vertical-line-middle,
  .shiny-thing .vertical-line-right,
  .shiny-thing .vertical-line-left { display: none !important; }

  /* Return positioned children to normal flow (no overlaps) */
  .shiny-thing .img,
  .shiny-thing .tagline,
  .shiny-thing .guardrails-for,
  .shiny-thing .your-team-always,
  .shiny-thing .group,
  .shiny-thing .section-heading-problem,
  .shiny-thing .at-series-a-velocity,
  .shiny-thing .section-heading-solution,
  .shiny-thing .execution-wrapper,
  .shiny-thing .section-heading-who,
  .shiny-thing .late-seed-and-series,
  .shiny-thing .group-2,
  .shiny-thing .section-heading-about,
  .shiny-thing .we-re-building-the,
  .shiny-thing .section-heading-pattern,
  .shiny-thing .after-years-in-GTM,
  .shiny-thing .section-heading-built,
  .shiny-thing .we-stopped,
  .shiny-thing .section-heading-for,
  .shiny-thing .late-seed-and-series-2,
  .shiny-thing .p,
  .shiny-thing .footer-brand {
    position: static !important;
    left: auto !important; top: auto !important; right: auto !important; bottom: auto !important;
    transform: none !important;
    width: auto !important;
  }
  /* HERO button wrapper MUST be positioned for its absolute children */
  .shiny-thing .group {
    position: relative !important;   /* key fix */
    width: 223px !important;
    height: 56px;
    margin: 12px 0 24px;
    align-self: flex-start;
    order: 50 !important;            /* under the hero text, above "The problem" */
    box-shadow: 0 20px 80px rgba(81,99,255,.25);
  }

  /* HERO section - tagline, logo, heading, text, button */
  .shiny-thing .img { width: 75px; height: auto; margin: 8px 0 4px; order: 10 !important; }
  .shiny-thing .tagline { font-weight: 700; font-size: 12px; line-height: 24px; color: #131C36; margin: 2px 0 10px; order: 20 !important; }
  .shiny-thing .guardrails-for { font-weight: 700; font-size: 56px; line-height: 56px; letter-spacing: -0.03em; color: #131C36; margin: 6px 0 10px; order: 30 !important; }
  .shiny-thing .your-team-always { font-weight: 500; font-size: 18px; line-height: 24px; color: #131C36; margin: 0 0 12px; max-width: 40ch; order: 40 !important; }

  /* The problem section */
  .shiny-thing .section-heading-problem { order: 60; }
  .shiny-thing .at-series-a-velocity { order: 70; }

  /* The solution section */
  .shiny-thing .section-heading-solution { order: 80; }
  .shiny-thing .execution-wrapper { order: 90; }

  /* Who this is for section */
  .shiny-thing .section-heading-who { order: 100; }
  .shiny-thing .late-seed-and-series { order: 110; }
  .shiny-thing .group-2 { order: 115; }

  /* About / Pattern / Built / For sections */
  .shiny-thing .section-heading-about { order: 130; }
  .shiny-thing .we-re-building-the { order: 140; }
  .shiny-thing .section-heading-pattern { order: 150; }
  .shiny-thing .after-years-in-GTM { order: 160; }
  .shiny-thing .section-heading-built { order: 170; }
  .shiny-thing .we-stopped { order: 180; }
  .shiny-thing .section-heading-for { order: 190; }
  .shiny-thing .late-seed-and-series-2 { order: 200; }

  /* Footer */
  .shiny-thing .p { order: 210; }
  .shiny-thing .footer-brand { order: 220; display: none; }
  .shiny-thing .rectangle-2 { display: none !important; }
  .shiny-thing .group {
    background: #4171FF;
    border-radius: 8px;
  }
  .shiny-thing .div {
    position: static !important; margin: 0 !important;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 500; font-size: 16px; line-height: 18px; background: transparent !important;
    width: 100% !important;
    height: 100% !important;
  }

  /* "The problem" as a single card */
  .shiny-thing .section-heading-problem { font-weight: 700; font-size: 24px; line-height: 28px; letter-spacing: -0.02em; color: #131C36; margin: 8px 0 6px; order: 60 !important; }
  .shiny-thing .section-heading-problem::before { display: none !important; content: none !important; }
  .shiny-thing .at-series-a-velocity {
    background: transparent; border: none; border-radius: 0; padding: 0; margin: 0;
    color: #676D7F; font-weight: 500; font-size: 18px; line-height: 24px;
    order: 70 !important;
  }

  /* Execution → 1-column cards */
  .shiny-thing .section-heading-solution { font-weight: 700; font-size: 24px; line-height: 28px; letter-spacing: -0.02em; color: #131C36; margin: 18px 0 8px; order: 80 !important; }
  .shiny-thing .execution-wrapper { width: 100%; padding: 0; order: 90 !important; }
  .shiny-thing .execution-columns { display: grid; grid-template-columns: 1fr; row-gap: 12px; }
  .shiny-thing .execution-column { background: transparent; border-radius: 0; padding: 0 0 0 12px; gap: 8px; border-left: 1px solid #d9dbe8; border-right: none; }
  .shiny-thing .execution-icon { width: 50px; height: auto; }
  .shiny-thing .execution-title { margin: 0; font-weight: 700; font-size: 48px; line-height: 1.15; color: #131C36; }
  .shiny-thing .execution-subtitle { margin: 0 0 6px; font-weight: 700; font-size: 14px; line-height: 1.3; color: rgba(118,119,127,.7); text-transform: none; letter-spacing: 0; }
  .shiny-thing .execution-body { margin: 0; font-weight: 500; font-size: 18px; line-height: 24px; color: #676D7F; }

  /* Who this is for + small bordered CTA */
  .shiny-thing .section-heading-who { font-weight: 800; font-size: 18px; line-height: 22px; letter-spacing: -0.03em; color: #192343; margin: 20px 0 6px; order: 100 !important; }
  .shiny-thing .late-seed-and-series { font-weight: 500; font-size: 40px; line-height: 44px; color: #676D7F; margin: 0 0 10px; max-width: 20ch; order: 110 !important; }
  .shiny-thing .group-2 {
    position: static !important;
    display: inline-block !important;
    margin: 6px 0 18px;
    width: auto !important;
    height: auto !important;
    order: 115 !important;
    left: auto !important;
    top: auto !important;
  }
  .shiny-thing .rectangle-3 { display: none !important; }
  .shiny-thing .cta-button-secondary {
    position: static !important;
    display: inline-block !important;
    padding: 14px 16px;
    border: 1px solid #131C36;
    border-radius: 8px;
    font-weight: 600;
    font-size: 16px;
    line-height: 18px;
    color: #131C36;
    background: transparent;
    white-space: nowrap;
    width: auto !important;
    height: auto !important;
    top: auto !important;
    left: auto !important;
  }

  /* About / Pattern / Built / For */
  .shiny-thing .section-heading-about { font-weight: 800; font-size: 16px; line-height: 20px; letter-spacing: -0.02em; color: #131C36; margin: 16px 0 6px; }
  .shiny-thing .we-re-building-the { font-weight: 500; font-size: 32px; line-height: 38px; color: #676D7F; margin: 0 0 8px; max-width: 26ch; }
  .shiny-thing .section-heading-pattern,
  .shiny-thing .section-heading-built,
  .shiny-thing .section-heading-for {
    font-weight: 700; font-size: 24px; line-height: 28px; letter-spacing: -0.02em; color: #131C36; margin: 16px 0 6px;
  }
  .shiny-thing .after-years-in-GTM,
  .shiny-thing .we-stopped,
  .shiny-thing .late-seed-and-series-2 {
    margin: 0; color: #676D7F; font-weight: 500; font-size: 18px; line-height: 24px; max-width: 40ch;
  }

  /* Footer */
  .shiny-thing .p {
    margin-top: 12px; text-align: left; color: rgba(19,28,54,.5); font-size: 12px; line-height: 16px;
  }
}