/* /checkout/<slug>: cream paper summary column left, white SamCart embed right.
   Desktop: the left column is summary card + "more" stacked; the embed spans both rows.
   Phones: summary card → more → checkout, so people read the whole pitch before the form. */
body:has(.co) { background: #fff; }
.co { --line: rgba(44, 42, 30, .12); display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr; min-height: 100vh; color: var(--espresso); }
.co__bg { grid-column: 1; grid-row: 1 / span 2; background: var(--cream) url(/assets/textures/paper-cream-seamless.webp) center / 900px; border-right: 1px solid var(--line); }
.co__left { grid-column: 1; width: 100%; max-width: 520px; justify-self: end; padding: 0 56px 0 40px; position: relative; }
.co__summary { grid-row: 1; padding-top: 40px; }
.co__more { grid-row: 2; padding-bottom: 64px; }
.co__pay { grid-column: 2; grid-row: 1 / span 2; width: 100%; max-width: 520px; padding: 40px 40px 64px 56px; }

.co__card { background: #fff; border: 1px solid var(--line); border-radius: 4px; box-shadow: 0 10px 30px rgba(44, 42, 30, .08); padding: 24px; display: grid; grid-template-columns: 112px 1fr; gap: 22px; align-items: center; }
.co__photo { background: #fff; padding: 6px; box-shadow: 0 2px 10px rgba(44, 42, 30, .18); transform: rotate(-2deg); margin: 0; }
.co__photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.co__photo--cutout { background: none; padding: 0; box-shadow: none; }
.co__photo--cutout img { aspect-ratio: auto; object-fit: contain; }
.co__title { font-family: var(--font-display); font-size: 30px; line-height: 1.02; margin: 2px 0 12px; }
.co__desc { font-size: 13.5px; line-height: 1.55; margin: 0 0 14px; color: var(--bark); }
.co__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.co__chips span { font-size: 11.5px; font-weight: 600; background: #F4F0E2; border-radius: 999px; padding: 5px 10px; }

.co__h { font-family: var(--font-script); font-size: 30px; color: var(--olive); margin: 48px 0 18px; line-height: 1; }
.co__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 24px; }
.co__list li { display: grid; grid-template-columns: 26px 1fr; gap: 10px; font-size: 14px; line-height: 1.55; }
.co__list li::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--sunny); margin-top: 6px; }
.co__list strong { display: block; font-size: 14.5px; margin-bottom: 2px; }
.co__quotes { display: grid; gap: 20px; }
.co__quote { background: #fff; padding: 18px 20px; box-shadow: 0 2px 10px rgba(44, 42, 30, .08); }
.co__quote p { font-family: var(--font-display); font-size: 20px; line-height: 1.2; margin: 0 0 14px; }
.co__by { display: flex; align-items: center; gap: 10px; font-size: 11px; font-weight: 700; letter-spacing: .06em; }
.co__by img, .co__initial { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.co__initial { background: var(--sunny); display: grid; place-items: center; font-size: 13px; letter-spacing: 0; }

.co__dev-frame { width: 100%; height: 1500px; border: 0; }
.co__alt { font-size: 12.5px; line-height: 1.5; color: var(--bark); text-align: center; margin: 16px 0 0; }
.co__alt a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 860px) {
  .co { grid-template-columns: 1fr; grid-template-rows: auto auto auto; }
  .co__bg { display: none; }
  .co__left, .co__pay { grid-column: 1; max-width: none; justify-self: stretch; padding: 24px 16px 32px; }
  .co__left { background: var(--cream) url(/assets/textures/paper-cream-seamless.webp) center / 900px; }
  .co__summary { grid-row: 1; padding-bottom: 0; }
  .co__more { grid-row: 2; padding-top: 0; padding-bottom: 40px; border-bottom: 1px solid var(--line); }
  .co__pay { grid-row: 3; }
  .co__card { grid-template-columns: 88px 1fr; padding: 20px; gap: 18px; }
  .co__title { font-size: 26px; }
}