:root {
  --note-paper-final: #fff8e8;
  --note-ink-final: #162033;
  --note-muted-final: #233146;
  --note-line-final: #ff6e9c;
  --note-tape-final: rgba(232, 222, 198, 0.64);
}

[data-theme="dark"] {
  --note-paper-final: #efe8d9;
  --note-ink-final: #141b2a;
  --note-muted-final: #243046;
  --note-line-final: #f06a98;
  --note-tape-final: rgba(239, 232, 214, 0.64);
}

.featured-web-note,
.website-note,
.website-card:nth-child(even) .website-note {
  overflow: visible !important;
  border: 1px solid rgba(32, 38, 48, 0.08) !important;
  border-radius: 9px !important;
  background:
    radial-gradient(circle at 18% 14%, rgba(255, 255, 255, 0.88), transparent 34%),
    linear-gradient(155deg, rgba(255, 255, 255, 0.42), transparent 42%),
    var(--sticky-fibers),
    var(--note-paper-final) !important;
  box-shadow:
    0 22px 46px rgba(38, 31, 22, 0.12),
    0 4px 12px rgba(38, 31, 22, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
  color: var(--note-ink-final) !important;
}

.featured-web-note::before,
.website-note::before,
.website-card:nth-child(even) .website-note::before {
  display: block !important;
  position: absolute !important;
  top: 9px !important;
  left: 19px !important;
  z-index: 0 !important;
  width: 32px !important;
  height: 6px !important;
  border-radius: 999px !important;
  background: rgba(76, 63, 45, 0.055) !important;
  content: "" !important;
  transform: rotate(-4deg) !important;
}

.featured-web-note::after,
.website-note::after,
.website-card:nth-child(even) .website-note::after {
  display: block !important;
  position: absolute !important;
  right: 18px !important;
  bottom: 17px !important;
  z-index: 2 !important;
  width: 34px !important;
  height: 40px !important;
  background-color: var(--note-line-final) !important;
  content: "" !important;
  opacity: 0.94 !important;
  transform: rotate(-5deg) !important;
  mask-position: center !important;
  mask-repeat: no-repeat !important;
  mask-size: contain !important;
  -webkit-mask-position: center !important;
  -webkit-mask-repeat: no-repeat !important;
  -webkit-mask-size: contain !important;
}

.featured-web-note::after,
.website-card:nth-child(1) .website-note::after {
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 42 48' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21 42C11 31 5 22 8 14c2-5 8-6 13 2 5-8 12-7 14-2 3 8-4 17-14 28Z' fill='none' stroke='black' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 42 48' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21 42C11 31 5 22 8 14c2-5 8-6 13 2 5-8 12-7 14-2 3 8-4 17-14 28Z' fill='none' stroke='black' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

.website-card:nth-child(2) .website-note::after {
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 44 48' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M23 5l4 14 13 2-11 8 4 14-11-9-12 9 5-14L4 21l14-2 5-14Z' fill='none' stroke='black' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 44 48' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M23 5l4 14 13 2-11 8 4 14-11-9-12 9 5-14L4 21l14-2 5-14Z' fill='none' stroke='black' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

.website-card:nth-child(3) .website-note::after {
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 36 48' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21 3L7 27h12l-5 18 16-26H18l3-16Z' fill='none' stroke='black' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 36 48' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21 3L7 27h12l-5 18 16-26H18l3-16Z' fill='none' stroke='black' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

.website-card:nth-child(4) .website-note::after {
  width: 38px !important;
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 42 48' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19 5v24M11 18v15M27 18v14M35 23v12c0 6-5 10-12 10h-3c-8 0-13-5-13-12v-5c0-3 5-3 6 0l2 5M8 39l-5 3M8 35H2M12 42l-3 4' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 42 48' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19 5v24M11 18v15M27 18v14M35 23v12c0 6-5 10-12 10h-3c-8 0-13-5-13-12v-5c0-3 5-3 6 0l2 5M8 39l-5 3M8 35H2M12 42l-3 4' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

.sticky-tape {
  top: -17px !important;
  left: 50% !important;
  width: 62px !important;
  height: 26px !important;
  border-radius: 2px !important;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.16) 0 5px, rgba(172, 154, 118, 0.055) 5px 10px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.48), var(--note-tape-final)) !important;
  box-shadow:
    0 7px 13px rgba(46, 34, 20, 0.09),
    inset 0 1px 0 rgba(255, 255, 255, 0.45) !important;
  opacity: 0.86 !important;
  transform: translateX(-50%) rotate(-2deg) !important;
}

.website-card:nth-child(even) .sticky-tape {
  transform: translateX(-50%) rotate(2deg) !important;
}

.featured-web-note h3,
.website-note h2,
.website-card:nth-child(even) .website-note h2 {
  position: relative !important;
  display: inline-block !important;
  margin-bottom: 18px !important;
  color: var(--note-ink-final) !important;
  font-family: "Indie Flower", "Patrick Hand", "Segoe Print", cursive !important;
  font-size: clamp(22px, 1.75vw, 27px) !important;
  font-weight: 600 !important;
  line-height: 1.05 !important;
}

.featured-web-note h3::after,
.website-note h2::after,
.website-card:nth-child(even) .website-note h2::after {
  position: absolute !important;
  left: 0 !important;
  bottom: -8px !important;
  width: 112% !important;
  height: 2px !important;
  border-radius: 999px !important;
  background: var(--note-line-final) !important;
  content: "" !important;
  transform: rotate(-1deg) !important;
}

.featured-web-note p,
.website-note p,
.website-card:nth-child(even) .website-note p {
  color: var(--note-muted-final) !important;
  font-family: "Indie Flower", "Patrick Hand", "Segoe Print", cursive !important;
  font-size: clamp(13.5px, 1vw, 15.8px) !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
}

.websites-top-click {
  gap: 8px !important;
  width: min(390px, 90vw) !important;
  min-height: 96px !important;
  margin: clamp(8px, 1.8vw, 20px) auto clamp(20px, 3vw, 36px) !important;
}

.websites-top-click .click-text-asset {
  width: clamp(156px, 19vw, 228px) !important;
}

.websites-top-click .click-arrow-asset {
  width: clamp(112px, 13vw, 168px) !important;
  transform: translateY(4px) rotate(4deg) !important;
}

.websites-top-click::before,
.websites-top-click::after {
  display: block !important;
  position: absolute !important;
  top: 54px !important;
  width: 84px !important;
  height: 48px !important;
  background-color: var(--note-line-final) !important;
  content: "" !important;
  opacity: 0.8 !important;
  pointer-events: none !important;
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 92 54' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 8c28 5 52 15 77 35M70 25l13 18-23 2' fill='none' stroke='black' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  mask-position: center !important;
  mask-repeat: no-repeat !important;
  mask-size: contain !important;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 92 54' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 8c28 5 52 15 77 35M70 25l13 18-23 2' fill='none' stroke='black' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  -webkit-mask-position: center !important;
  -webkit-mask-repeat: no-repeat !important;
  -webkit-mask-size: contain !important;
}

.websites-top-click::before {
  left: -74px !important;
  transform: scaleX(-1) rotate(-4deg) !important;
}

.websites-top-click::after {
  right: -74px !important;
  transform: rotate(-4deg) !important;
}

@media (max-width: 760px) {
  .websites-top-click::before,
  .websites-top-click::after {
    display: none !important;
  }

  .websites-top-click {
    width: min(304px, 90vw) !important;
    min-height: 86px !important;
  }

  .websites-top-click .click-text-asset {
    width: clamp(132px, 42vw, 164px) !important;
  }

  .websites-top-click .click-arrow-asset {
    width: clamp(86px, 26vw, 110px) !important;
  }
}

/* Correct temp workspace tweak: shrink handwritten arrows by 40%. */
.featured-web-button .click-arrow-asset,
.website-note .website-open-button .click-arrow-asset {
  width: 31px !important;
}

.websites-top-click {
  width: min(330px, 90vw) !important;
  min-height: 74px !important;
}

.websites-top-click .click-arrow-asset {
  width: clamp(67px, 7.8vw, 101px) !important;
}

.websites-top-click::before,
.websites-top-click::after {
  top: 60px !important;
  width: 50px !important;
  height: 29px !important;
}

.websites-top-click::before {
  left: -48px !important;
}

.websites-top-click::after {
  right: -48px !important;
}

@media (max-width: 760px) {
  .featured-web-button .click-arrow-asset,
  .website-note .website-open-button .click-arrow-asset {
    width: 31px !important;
  }

  .websites-top-click {
    width: min(244px, 88vw) !important;
    min-height: 70px !important;
  }

  .websites-top-click .click-arrow-asset {
    width: clamp(52px, 15.6vw, 66px) !important;
  }
}


/* === Final doodle swap overrides (user-supplied PNG doodles) === */
.featured-web-note::after,
.website-note::after,
.website-card:nth-child(even) .website-note::after {
  display: none !important;
  content: none !important;
}

.featured-web-note,
.website-note,
.website-card:nth-child(even) .website-note {
  padding-bottom: 54px !important;
}

.website-note,
.featured-web-note {
  isolation: isolate;
}

.note-doodle {
  position: absolute;
  right: 14px;
  bottom: 12px;
  z-index: 3;
  display: block;
  width: 38px;
  pointer-events: none;
  user-select: none;
}

.note-doodle img {
  display: block;
  width: 100%;
  height: auto;
}

.note-doodle-flower { width: 34px; }
.note-doodle-apple { width: 33px; }
.note-doodle-ball { width: 42px; }
.note-doodle-bow { width: 38px; }

.featured-web-note .note-doodle {
  right: 18px;
  bottom: 14px;
  width: 36px;
}

/* remove old right-side handwritten CTA on homepage featured note */
.featured-web-button {
  display: none !important;
}

/* use the user's combined click-me + arrows artwork above the grid */
.websites-top-click {
  display: grid !important;
  place-items: center !important;
  width: min(420px, 92vw) !important;
  min-height: auto !important;
  margin: 8px auto 34px !important;
  filter: drop-shadow(0 6px 18px rgba(80, 55, 45, 0.08));
  transform: none !important;
}

.websites-top-click::before,
.websites-top-click::after {
  display: none !important;
  content: none !important;
}

.websites-top-click .click-combined-asset {
  display: block;
  width: clamp(190px, 25vw, 320px);
}

.websites-top-click .click-combined-asset img {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 900px) {
  .website-note,
  .featured-web-note,
  .website-card:nth-child(even) .website-note {
    padding-bottom: 50px !important;
  }

  .note-doodle {
    right: 12px;
    bottom: 10px;
    width: 34px;
  }

  .note-doodle-ball {
    width: 38px;
  }
}

@media (max-width: 760px) {
  .websites-top-click {
    width: min(280px, 88vw) !important;
    margin-bottom: 26px !important;
  }

  .websites-top-click .click-combined-asset {
    width: clamp(180px, 60vw, 250px);
  }
}


/* === Final placement polish === */
.websites-top-click {
  margin: 54px auto 8px !important;
}

.featured-web-note {
  padding-right: 78px !important;
  padding-bottom: 76px !important;
}

.featured-web-note p {
  max-width: calc(100% - 6px) !important;
}

.featured-web-note .note-doodle {
  right: 18px !important;
  bottom: 16px !important;
  width: 44px !important;
}

@media (max-width: 900px) {
  .websites-top-click {
    margin: 36px auto 8px !important;
  }

  .featured-web-note {
    padding-right: 72px !important;
    padding-bottom: 72px !important;
  }

  .featured-web-note .note-doodle {
    right: 16px !important;
    bottom: 14px !important;
    width: 40px !important;
  }
}

@media (max-width: 760px) {
  .websites-top-click {
    margin: 24px auto 8px !important;
  }

  .featured-web-note {
    padding-right: 68px !important;
    padding-bottom: 68px !important;
  }

  .featured-web-note .note-doodle {
    width: 38px !important;
  }
}


/* === Wider sticky notes so text fits better === */
.featured-web {
  --side-note: 252px !important;
  --side-gap: 24px !important;
}

.website-card:nth-child(odd) {
  grid-template-columns: 260px minmax(0, 1fr) !important;
}

.website-card:nth-child(even) {
  grid-template-columns: minmax(0, 1fr) 260px !important;
}

.website-side-info,
.website-card:nth-child(even) .website-side-info,
.website-note,
.website-card:nth-child(even) .website-note {
  width: 260px !important;
}

@media (max-width: 1100px) {
  .featured-web {
    --side-note: 232px !important;
    --side-gap: 18px !important;
  }

  .website-card:nth-child(odd) {
    grid-template-columns: 232px minmax(0, 1fr) !important;
  }

  .website-card:nth-child(even) {
    grid-template-columns: minmax(0, 1fr) 232px !important;
  }

  .website-side-info,
  .website-card:nth-child(even) .website-side-info,
  .website-note,
  .website-card:nth-child(even) .website-note {
    width: 232px !important;
  }
}


/* === Sticky notes wider in all formats === */
.featured-web {
  --side-note: 300px !important;
  --side-gap: 28px !important;
}

.featured-web-note {
  width: 300px !important;
  max-width: 300px !important;
}

.website-card:nth-child(odd) {
  grid-template-columns: 280px minmax(0, 1fr) !important;
}

.website-card:nth-child(even) {
  grid-template-columns: minmax(0, 1fr) 280px !important;
}

.website-side-info,
.website-card:nth-child(even) .website-side-info,
.website-note,
.website-card:nth-child(even) .website-note {
  width: 280px !important;
  max-width: 280px !important;
}

@media (max-width: 1320px) {
  .featured-web {
    --side-note: 280px !important;
    --side-gap: 22px !important;
  }

  .featured-web-note {
    width: 280px !important;
    max-width: 280px !important;
  }

  .website-card:nth-child(odd) {
    grid-template-columns: 260px minmax(0, 1fr) !important;
  }

  .website-card:nth-child(even) {
    grid-template-columns: minmax(0, 1fr) 260px !important;
  }

  .website-side-info,
  .website-card:nth-child(even) .website-side-info,
  .website-note,
  .website-card:nth-child(even) .website-note {
    width: 260px !important;
    max-width: 260px !important;
  }
}

@media (max-width: 1100px) {
  .featured-web {
    --side-note: 252px !important;
    --side-gap: 18px !important;
  }

  .featured-web-note {
    width: 252px !important;
    max-width: 252px !important;
  }

  .website-card:nth-child(odd) {
    grid-template-columns: 236px minmax(0, 1fr) !important;
  }

  .website-card:nth-child(even) {
    grid-template-columns: minmax(0, 1fr) 236px !important;
  }

  .website-side-info,
  .website-card:nth-child(even) .website-side-info,
  .website-note,
  .website-card:nth-child(even) .website-note {
    width: 236px !important;
    max-width: 236px !important;
  }
}

@media (max-width: 760px) {
  .featured-web {
    --side-note: min(280px, calc(100vw - 56px)) !important;
    --side-gap: 0px !important;
  }

  .featured-web-note,
  .website-side-info,
  .website-card:nth-child(even) .website-side-info,
  .website-note,
  .website-card:nth-child(even) .website-note {
    width: min(280px, calc(100vw - 56px)) !important;
    max-width: min(280px, calc(100vw - 56px)) !important;
  }
}


/* === Shift web page sticky notes slightly outward === */
.website-card:nth-child(odd) .website-side-info {
  transform: translateX(-14px) !important;
}

.website-card:nth-child(even) .website-side-info {
  transform: translateX(14px) !important;
}

@media (max-width: 760px) {
  .website-card:nth-child(odd) .website-side-info,
  .website-card:nth-child(even) .website-side-info {
    transform: none !important;
  }
}


/* === Homepage featured note moved further right and kept above the mockup === */
.featured-web-note {
  position: relative !important;
  z-index: 8 !important;
  transform: translateX(56px) !important;
}

@media (max-width: 1320px) {
  .featured-web-note {
    transform: translateX(42px) !important;
  }
}

@media (max-width: 1100px) {
  .featured-web-note {
    transform: translateX(26px) !important;
  }
}

@media (max-width: 760px) {
  .featured-web-note {
    transform: none !important;
  }
}


/* === Weby page: sticky notes stay beside the mockups, like on index === */
@media (min-width: 761px) {
  .websites-page .website-card,
  .websites-page .website-card:nth-child(odd),
  .websites-page .website-card:nth-child(even) {
    display: grid !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 26px !important;
    width: min(100%, 940px) !important;
    max-width: 940px !important;
    margin-inline: auto !important;
  }

  .websites-page .website-card:nth-child(odd) {
    grid-template-columns: 280px minmax(0, 520px) !important;
  }

  .websites-page .website-card:nth-child(even) {
    grid-template-columns: minmax(0, 520px) 280px !important;
  }

  .websites-page .website-side-info,
  .websites-page .website-card:nth-child(even) .website-side-info {
    width: 280px !important;
    max-width: 280px !important;
    justify-self: stretch !important;
    margin: 0 !important;
    transform: none !important;
    z-index: 5 !important;
  }

  .websites-page .website-note,
  .websites-page .website-card:nth-child(even) .website-note {
    position: relative !important;
    inset: auto !important;
    left: auto !important;
    right: auto !important;
    width: 280px !important;
    max-width: 280px !important;
    margin: 0 !important;
    z-index: 6 !important;
  }

  .websites-page .website-card:nth-child(odd) .website-note {
    transform: translateX(-12px) rotate(-0.6deg) !important;
  }

  .websites-page .website-card:nth-child(even) .website-note {
    transform: translateX(12px) rotate(0.6deg) !important;
  }

  .websites-page .website-screen,
  .websites-page .website-card:nth-child(even) .website-screen {
    width: 100% !important;
    max-width: 520px !important;
    justify-self: center !important;
    margin: 0 !important;
    z-index: 1 !important;
  }
}

@media (min-width: 761px) and (max-width: 1180px) {
  .websites-page .website-card,
  .websites-page .website-card:nth-child(odd),
  .websites-page .website-card:nth-child(even) {
    gap: 20px !important;
    width: min(100%, 860px) !important;
    max-width: 860px !important;
  }

  .websites-page .website-card:nth-child(odd) {
    grid-template-columns: 240px minmax(0, 470px) !important;
  }

  .websites-page .website-card:nth-child(even) {
    grid-template-columns: minmax(0, 470px) 240px !important;
  }

  .websites-page .website-side-info,
  .websites-page .website-card:nth-child(even) .website-side-info,
  .websites-page .website-note,
  .websites-page .website-card:nth-child(even) .website-note {
    width: 240px !important;
    max-width: 240px !important;
  }

  .websites-page .website-screen,
  .websites-page .website-card:nth-child(even) .website-screen {
    max-width: 470px !important;
  }
}


/* === Final spacing pass: larger web mockups, notes pushed outward === */
@media (min-width: 1181px) {
  .websites-grid {
    width: min(1280px, calc(100vw - 80px)) !important;
    max-width: 1280px !important;
  }

  .websites-page .website-card,
  .websites-page .website-card:nth-child(odd),
  .websites-page .website-card:nth-child(even) {
    gap: 34px !important;
    width: min(100%, 1180px) !important;
    max-width: 1180px !important;
  }

  .websites-page .website-card:nth-child(odd) {
    grid-template-columns: 290px minmax(0, 620px) !important;
  }

  .websites-page .website-card:nth-child(even) {
    grid-template-columns: minmax(0, 620px) 290px !important;
  }

  .websites-page .website-side-info,
  .websites-page .website-card:nth-child(even) .website-side-info,
  .websites-page .website-note,
  .websites-page .website-card:nth-child(even) .website-note {
    width: 290px !important;
    max-width: 290px !important;
  }

  .websites-page .website-card:nth-child(odd) .website-note {
    transform: translateX(-26px) rotate(-0.6deg) !important;
  }

  .websites-page .website-card:nth-child(even) .website-note {
    transform: translateX(26px) rotate(0.6deg) !important;
  }

  .websites-page .website-screen,
  .websites-page .website-card:nth-child(even) .website-screen {
    max-width: 620px !important;
  }
}

@media (min-width: 761px) and (max-width: 1180px) {
  .websites-grid {
    width: min(1060px, calc(100vw - 56px)) !important;
    max-width: 1060px !important;
  }

  .websites-page .website-card,
  .websites-page .website-card:nth-child(odd),
  .websites-page .website-card:nth-child(even) {
    gap: 24px !important;
    width: min(100%, 980px) !important;
    max-width: 980px !important;
  }

  .websites-page .website-card:nth-child(odd) {
    grid-template-columns: 250px minmax(0, 540px) !important;
  }

  .websites-page .website-card:nth-child(even) {
    grid-template-columns: minmax(0, 540px) 250px !important;
  }

  .websites-page .website-side-info,
  .websites-page .website-card:nth-child(even) .website-side-info,
  .websites-page .website-note,
  .websites-page .website-card:nth-child(even) .website-note {
    width: 250px !important;
    max-width: 250px !important;
  }

  .websites-page .website-card:nth-child(odd) .website-note {
    transform: translateX(-18px) rotate(-0.6deg) !important;
  }

  .websites-page .website-card:nth-child(even) .website-note {
    transform: translateX(18px) rotate(0.6deg) !important;
  }

  .websites-page .website-screen,
  .websites-page .website-card:nth-child(even) .website-screen {
    max-width: 540px !important;
  }
}

/* === Very small index screens: move the featured sticky note below the web preview === */
@media (max-width: 700px) {
  .featured-web {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "cta"
      "screen"
      "note" !important;
    justify-items: center !important;
    gap: 12px !important;
  }

  .featured-web-screen {
    width: min(100%, 420px) !important;
    justify-self: center !important;
  }

  .featured-web-note {
    width: min(100%, 320px) !important;
    max-width: 320px !important;
    justify-self: center !important;
    margin-top: 4px !important;
    transform: none !important;
  }

  .featured-web-cta-button,
  .featured-web-cta-button.bubble-button {
    justify-self: start !important;
    margin: 0 0 8px !important;
  }
}


/* === Extra +10% sizing pass === */
@media (min-width: 1181px) {
  .websites-grid {
    width: min(1408px, calc(100vw - 72px)) !important;
    max-width: 1408px !important;
  }

  .websites-page .website-card,
  .websites-page .website-card:nth-child(odd),
  .websites-page .website-card:nth-child(even) {
    gap: 38px !important;
    width: min(100%, 1300px) !important;
    max-width: 1300px !important;
  }

  .websites-page .website-card:nth-child(odd) {
    grid-template-columns: 320px minmax(0, 682px) !important;
  }

  .websites-page .website-card:nth-child(even) {
    grid-template-columns: minmax(0, 682px) 320px !important;
  }

  .websites-page .website-side-info,
  .websites-page .website-card:nth-child(even) .website-side-info,
  .websites-page .website-note,
  .websites-page .website-card:nth-child(even) .website-note {
    width: 320px !important;
    max-width: 320px !important;
  }

  .websites-page .website-card:nth-child(odd) .website-note {
    transform: translateX(-32px) rotate(-0.6deg) !important;
  }

  .websites-page .website-card:nth-child(even) .website-note {
    transform: translateX(32px) rotate(0.6deg) !important;
  }

  .websites-page .website-screen,
  .websites-page .website-card:nth-child(even) .website-screen {
    max-width: 682px !important;
  }
}

@media (min-width: 761px) and (max-width: 1180px) {
  .websites-grid {
    width: min(1166px, calc(100vw - 48px)) !important;
    max-width: 1166px !important;
  }

  .websites-page .website-card,
  .websites-page .website-card:nth-child(odd),
  .websites-page .website-card:nth-child(even) {
    gap: 28px !important;
    width: min(100%, 1080px) !important;
    max-width: 1080px !important;
  }

  .websites-page .website-card:nth-child(odd) {
    grid-template-columns: 275px minmax(0, 594px) !important;
  }

  .websites-page .website-card:nth-child(even) {
    grid-template-columns: minmax(0, 594px) 275px !important;
  }

  .websites-page .website-side-info,
  .websites-page .website-card:nth-child(even) .website-side-info,
  .websites-page .website-note,
  .websites-page .website-card:nth-child(even) .website-note {
    width: 275px !important;
    max-width: 275px !important;
  }

  .websites-page .website-card:nth-child(odd) .website-note {
    transform: translateX(-22px) rotate(-0.6deg) !important;
  }

  .websites-page .website-card:nth-child(even) .website-note {
    transform: translateX(22px) rotate(0.6deg) !important;
  }

  .websites-page .website-screen,
  .websites-page .website-card:nth-child(even) .website-screen {
    max-width: 594px !important;
  }
}


/* === One more +10% increase, with sticky notes slightly closer === */
@media (min-width: 1181px) {
  .websites-grid {
    width: min(1475px, calc(100vw - 60px)) !important;
    max-width: 1475px !important;
  }

  .websites-page .website-card,
  .websites-page .website-card:nth-child(odd),
  .websites-page .website-card:nth-child(even) {
    gap: 24px !important;
    width: min(100%, 1360px) !important;
    max-width: 1360px !important;
  }

  .websites-page .website-card:nth-child(odd) {
    grid-template-columns: 352px minmax(0, 750px) !important;
  }

  .websites-page .website-card:nth-child(even) {
    grid-template-columns: minmax(0, 750px) 352px !important;
  }

  .websites-page .website-side-info,
  .websites-page .website-card:nth-child(even) .website-side-info,
  .websites-page .website-note,
  .websites-page .website-card:nth-child(even) .website-note {
    width: 352px !important;
    max-width: 352px !important;
  }

  .websites-page .website-card:nth-child(odd) .website-note {
    transform: translateX(-16px) rotate(-0.5deg) !important;
  }

  .websites-page .website-card:nth-child(even) .website-note {
    transform: translateX(16px) rotate(0.5deg) !important;
  }

  .websites-page .website-screen,
  .websites-page .website-card:nth-child(even) .website-screen {
    max-width: 750px !important;
  }
}

@media (min-width: 761px) and (max-width: 1180px) {
  .websites-grid {
    width: min(1260px, calc(100vw - 36px)) !important;
    max-width: 1260px !important;
  }

  .websites-page .website-card,
  .websites-page .website-card:nth-child(odd),
  .websites-page .website-card:nth-child(even) {
    gap: 18px !important;
    width: min(100%, 1160px) !important;
    max-width: 1160px !important;
  }

  .websites-page .website-card:nth-child(odd) {
    grid-template-columns: 302px minmax(0, 653px) !important;
  }

  .websites-page .website-card:nth-child(even) {
    grid-template-columns: minmax(0, 653px) 302px !important;
  }

  .websites-page .website-side-info,
  .websites-page .website-card:nth-child(even) .website-side-info,
  .websites-page .website-note,
  .websites-page .website-card:nth-child(even) .website-note {
    width: 302px !important;
    max-width: 302px !important;
  }

  .websites-page .website-card:nth-child(odd) .website-note {
    transform: translateX(-12px) rotate(-0.5deg) !important;
  }

  .websites-page .website-card:nth-child(even) .website-note {
    transform: translateX(12px) rotate(0.5deg) !important;
  }

  .websites-page .website-screen,
  .websites-page .website-card:nth-child(even) .website-screen {
    max-width: 653px !important;
  }
}


/* === Center the Weby layout better and bring sticky notes closer to the mockups === */
.websites-grid {
  margin-inline: auto !important;
  justify-content: center !important;
  justify-items: center !important;
}

@media (min-width: 761px) {
  .websites-page .website-card,
  .websites-page .website-card:nth-child(odd),
  .websites-page .website-card:nth-child(even) {
    margin-inline: auto !important;
    justify-self: center !important;
    align-items: center !important;
  }

  .websites-page .website-screen,
  .websites-page .website-card:nth-child(even) .website-screen,
  .websites-page .website-side-info,
  .websites-page .website-card:nth-child(even) .website-side-info {
    align-self: center !important;
  }
}

@media (min-width: 1181px) {
  .websites-grid {
    width: min(1420px, calc(100vw - 56px)) !important;
    max-width: 1420px !important;
  }

  .websites-page .website-card,
  .websites-page .website-card:nth-child(odd),
  .websites-page .website-card:nth-child(even) {
    gap: 14px !important;
    width: min(100%, 1340px) !important;
    max-width: 1340px !important;
  }

  .websites-page .website-card:nth-child(odd) {
    grid-template-columns: 352px minmax(0, 750px) !important;
  }

  .websites-page .website-card:nth-child(even) {
    grid-template-columns: minmax(0, 750px) 352px !important;
  }

  .websites-page .website-card:nth-child(odd) .website-note {
    transform: translateX(10px) rotate(-0.4deg) !important;
  }

  .websites-page .website-card:nth-child(even) .website-note {
    transform: translateX(-10px) rotate(0.4deg) !important;
  }
}

@media (min-width: 761px) and (max-width: 1180px) {
  .websites-grid {
    width: min(1240px, calc(100vw - 32px)) !important;
    max-width: 1240px !important;
  }

  .websites-page .website-card,
  .websites-page .website-card:nth-child(odd),
  .websites-page .website-card:nth-child(even) {
    gap: 12px !important;
    width: min(100%, 1140px) !important;
    max-width: 1140px !important;
  }

  .websites-page .website-card:nth-child(odd) {
    grid-template-columns: 302px minmax(0, 653px) !important;
  }

  .websites-page .website-card:nth-child(even) {
    grid-template-columns: minmax(0, 653px) 302px !important;
  }

  .websites-page .website-card:nth-child(odd) .website-note {
    transform: translateX(8px) rotate(-0.4deg) !important;
  }

  .websites-page .website-card:nth-child(even) .website-note {
    transform: translateX(-8px) rotate(0.4deg) !important;
  }
}


/* === Rebalanced Weby layout: centered, narrower sticky notes, larger web previews === */
.websites-grid {
  margin-inline: auto !important;
  justify-items: center !important;
}

@media (min-width: 1181px) {
  .websites-grid {
    width: min(1380px, calc(100vw - 48px)) !important;
    max-width: 1380px !important;
  }

  .websites-page .website-card,
  .websites-page .website-card:nth-child(odd),
  .websites-page .website-card:nth-child(even) {
    display: grid !important;
    align-items: center !important;
    justify-content: center !important;
    justify-items: center !important;
    width: min(100%, 1260px) !important;
    max-width: 1260px !important;
    margin-inline: auto !important;
    gap: 14px !important;
  }

  .websites-page .website-card:nth-child(odd) {
    grid-template-columns: 272px minmax(0, 820px) !important;
  }

  .websites-page .website-card:nth-child(even) {
    grid-template-columns: minmax(0, 820px) 272px !important;
  }

  .websites-page .website-side-info,
  .websites-page .website-card:nth-child(even) .website-side-info,
  .websites-page .website-note,
  .websites-page .website-card:nth-child(even) .website-note {
    width: 272px !important;
    max-width: 272px !important;
    margin: 0 !important;
    justify-self: center !important;
  }

  .websites-page .website-card:nth-child(odd) .website-note,
  .websites-page .website-card:nth-child(even) .website-note {
    transform: none !important;
  }

  .websites-page .website-screen,
  .websites-page .website-card:nth-child(even) .website-screen {
    width: 100% !important;
    max-width: 820px !important;
    justify-self: center !important;
    margin: 0 !important;
  }
}

@media (min-width: 761px) and (max-width: 1180px) {
  .websites-grid {
    width: min(1130px, calc(100vw - 32px)) !important;
    max-width: 1130px !important;
  }

  .websites-page .website-card,
  .websites-page .website-card:nth-child(odd),
  .websites-page .website-card:nth-child(even) {
    display: grid !important;
    align-items: center !important;
    justify-content: center !important;
    justify-items: center !important;
    width: min(100%, 1070px) !important;
    max-width: 1070px !important;
    margin-inline: auto !important;
    gap: 12px !important;
  }

  .websites-page .website-card:nth-child(odd) {
    grid-template-columns: 228px minmax(0, 710px) !important;
  }

  .websites-page .website-card:nth-child(even) {
    grid-template-columns: minmax(0, 710px) 228px !important;
  }

  .websites-page .website-side-info,
  .websites-page .website-card:nth-child(even) .website-side-info,
  .websites-page .website-note,
  .websites-page .website-card:nth-child(even) .website-note {
    width: 228px !important;
    max-width: 228px !important;
    margin: 0 !important;
    justify-self: center !important;
  }

  .websites-page .website-card:nth-child(odd) .website-note,
  .websites-page .website-card:nth-child(even) .website-note {
    transform: none !important;
  }

  .websites-page .website-screen,
  .websites-page .website-card:nth-child(even) .website-screen {
    width: 100% !important;
    max-width: 710px !important;
    justify-self: center !important;
    margin: 0 !important;
  }
}


/* === Safe retry: centered layout, slightly bigger websites, notes a bit closer === */
@media (min-width: 1181px) {
  .websites-grid {
    width: min(1360px, calc(100vw - 56px)) !important;
    max-width: 1360px !important;
    margin-inline: auto !important;
    justify-content: center !important;
    justify-items: center !important;
  }

  .websites-page .website-card,
  .websites-page .website-card:nth-child(odd),
  .websites-page .website-card:nth-child(even) {
    width: min(100%, 1120px) !important;
    max-width: 1120px !important;
    margin-inline: auto !important;
    justify-self: center !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
  }

  .websites-page .website-card:nth-child(odd) {
    grid-template-columns: 272px minmax(0, 585px) !important;
  }

  .websites-page .website-card:nth-child(even) {
    grid-template-columns: minmax(0, 585px) 272px !important;
  }

  .websites-page .website-side-info,
  .websites-page .website-card:nth-child(even) .website-side-info,
  .websites-page .website-note,
  .websites-page .website-card:nth-child(even) .website-note {
    width: 272px !important;
    max-width: 272px !important;
    margin: 0 !important;
  }

  .websites-page .website-card:nth-child(odd) .website-note {
    transform: translateX(6px) rotate(-0.45deg) !important;
  }

  .websites-page .website-card:nth-child(even) .website-note {
    transform: translateX(-6px) rotate(0.45deg) !important;
  }

  .websites-page .website-screen,
  .websites-page .website-card:nth-child(even) .website-screen {
    width: 100% !important;
    max-width: 585px !important;
    margin: 0 !important;
    justify-self: center !important;
  }
}

@media (min-width: 761px) and (max-width: 1180px) {
  .websites-grid {
    width: min(1080px, calc(100vw - 32px)) !important;
    max-width: 1080px !important;
    margin-inline: auto !important;
    justify-content: center !important;
    justify-items: center !important;
  }

  .websites-page .website-card,
  .websites-page .website-card:nth-child(odd),
  .websites-page .website-card:nth-child(even) {
    width: min(100%, 980px) !important;
    max-width: 980px !important;
    margin-inline: auto !important;
    justify-self: center !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
  }

  .websites-page .website-card:nth-child(odd) {
    grid-template-columns: 228px minmax(0, 510px) !important;
  }

  .websites-page .website-card:nth-child(even) {
    grid-template-columns: minmax(0, 510px) 228px !important;
  }

  .websites-page .website-side-info,
  .websites-page .website-card:nth-child(even) .website-side-info,
  .websites-page .website-note,
  .websites-page .website-card:nth-child(even) .website-note {
    width: 228px !important;
    max-width: 228px !important;
    margin: 0 !important;
  }

  .websites-page .website-card:nth-child(odd) .website-note {
    transform: translateX(5px) rotate(-0.45deg) !important;
  }

  .websites-page .website-card:nth-child(even) .website-note {
    transform: translateX(-5px) rotate(0.45deg) !important;
  }

  .websites-page .website-screen,
  .websites-page .website-card:nth-child(even) .website-screen {
    width: 100% !important;
    max-width: 510px !important;
    margin: 0 !important;
    justify-self: center !important;
  }
}


/* === Fine alignment tweak: shift whole Weby section a bit left for visual centering === */
@media (min-width: 1181px) {
  .websites-grid {
    position: relative !important;
    left: -44px !important;
  }
}

@media (min-width: 761px) and (max-width: 1180px) {
  .websites-grid {
    position: relative !important;
    left: -32px !important;
  }
}

/* === FINAL USER FIX: dark doodles/lines red === */
[data-theme="dark"] {
  --note-line-final: #882043 !important;
}
[data-theme="dark"] .featured-web-note h3::after,
[data-theme="dark"] .website-note h2::after {
  background: #882043 !important;
}