/* Settle product cards and buttons (owner brief, 21 Oct 2026).
   One system for every Starter Pack and Workspace card, panel and promo.
   Self-contained: base.html sets tailwind.config before the CDN loads, so nothing here
   relies on Tailwind theme colours or the font-display family. No transforms anywhere. */
:root {
  --sp-bg: #F7F7F4;
  --sp-card: #FFFFFF;
  --sp-text: #1C2928;
  --sp-muted: #667370;
  --sp-teal: #176C69;
  --sp-teal-hover: #125A57;
  --sp-teal-press: #0E4A47;
  --sp-teal-tint: #EEF5F4;
  --sp-border: #E4E6E3;
  --sp-warm: #B58A57;
  --sp-warm-text: #7A5A33;
}

/* ── Buttons ───────────────────────────────────────────── */
.sp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 48px; padding: .75rem 1.25rem; border-radius: 12px; border: 1px solid transparent;
  font-family: inherit; font-size: 1rem; font-weight: 600; line-height: 1.25; letter-spacing: -.005em;
  text-align: center; text-decoration: none !important; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.sp-btn:focus { outline: none; }
.sp-btn:focus-visible { outline: 3px solid rgba(23,108,105,.35); outline-offset: 2px; }
.sp-btn--block { display: flex; width: 100%; }
.sp-btn--sm { min-height: 42px; padding: .5rem 1rem; font-size: .9375rem; border-radius: 10px; }
.sp-btn--primary, a.sp-btn--primary, .guide-body a.sp-btn--primary {
  background: var(--sp-teal); color: #fff !important; border-color: var(--sp-teal);
  box-shadow: 0 1px 2px rgba(14,74,71,.18);
}
.sp-btn--primary:hover { background: var(--sp-teal-hover); border-color: var(--sp-teal-hover); }
.sp-btn--primary:active { background: var(--sp-teal-press); border-color: var(--sp-teal-press); box-shadow: inset 0 1px 2px rgba(0,0,0,.18); }
.sp-btn--secondary, a.sp-btn--secondary, .guide-body a.sp-btn--secondary {
  background: #fff; color: var(--sp-teal) !important; border-color: #B9D3D1;
}
.sp-btn--secondary:hover { background: var(--sp-teal-tint); border-color: var(--sp-teal); }
.sp-btn--secondary:active { background: #E1EEEC; border-color: var(--sp-teal-press); }
.sp-btn--inverse { background: #fff; color: var(--sp-teal) !important; border-color: #fff; }
.sp-btn--inverse:hover { background: var(--sp-teal-tint); }
.sp-btn--inverse:focus-visible { outline-color: rgba(255,255,255,.6); }
@media (prefers-reduced-motion: reduce) { .sp-btn { transition: none; } }

/* ── Shared card parts ─────────────────────────────────── */
.sp-card, .sp-compact, .sp-panel {
  background: var(--sp-card); color: var(--sp-text); border: 1px solid var(--sp-border); border-radius: 16px;
  box-shadow: 0 1px 2px rgba(28,41,40,.04), 0 12px 32px -24px rgba(28,41,40,.28);
}
.sp-eyebrow { font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--sp-teal); margin: 0 0 .375rem; }
.sp-badge {
  display: inline-flex; align-items: center; gap: .45rem; align-self: flex-start;
  font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--sp-warm-text); margin: 0 0 .625rem;
}
.sp-badge::before { content: ""; width: 14px; height: 1px; background: var(--sp-warm); }
.sp-title { font-size: 1.1875rem; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; color: var(--sp-text); margin: 0; }
.sp-price { font-size: 1.75rem; font-weight: 600; line-height: 1; letter-spacing: -.02em; color: var(--sp-text); white-space: nowrap; margin: 0; font-variant-numeric: tabular-nums; }
.sp-price small { font-size: .8125rem; font-weight: 500; color: var(--sp-muted); letter-spacing: 0; margin-left: .25rem; }
.sp-line { font-size: .9375rem; line-height: 1.55; color: var(--sp-muted); margin: .5rem 0 0; }
.sp-ticks { list-style: none; margin: 1.125rem 0 1.375rem; padding: 0; display: grid; gap: .625rem; font-size: .9375rem; line-height: 1.45; color: var(--sp-text); }
.sp-ticks li { display: flex; gap: .625rem; align-items: flex-start; margin: 0; padding: 0; }
.sp-ticks li::before { content: none !important; }
.sp-ticks li { list-style: none !important; }
.sp-tick { width: 1.125rem; height: 1.125rem; flex-shrink: 0; margin-top: .14rem; color: var(--sp-teal); }
.sp-note { font-size: .8125rem; line-height: 1.45; color: var(--sp-muted); text-align: center; margin: .75rem 0 0; }
.sp-note a { color: var(--sp-teal); text-decoration: none; }
.sp-note a:hover { text-decoration: underline; }
.sp-fine { font-size: .8125rem; color: var(--sp-muted); text-align: center; margin: 1.25rem 0 0; }

/* ── Full card (image on top) ──────────────────────────── */
.sp-card { display: flex; flex-direction: column; overflow: hidden; height: 100%; }
.sp-media {
  display: flex; align-items: center; justify-content: center; gap: .75rem;
  height: 244px; padding: 20px; background: var(--sp-bg); border-bottom: 1px solid var(--sp-border);
}
.sp-media img { display: block; max-height: 100%; width: auto; }
.sp-media .sp-page { height: 100%; width: auto; border-radius: 4px; border: 1px solid rgba(28,41,40,.10); box-shadow: 0 1px 2px rgba(28,41,40,.06), 0 6px 16px -8px rgba(28,41,40,.25); background: #fff; }
.sp-media .sp-page--back { height: 88%; }
.sp-screen { height: 100%; max-width: 100%; aspect-ratio: 760 / 455; display: flex; flex-direction: column; border-radius: 8px; overflow: hidden; border: 1px solid rgba(28,41,40,.12); background: #fff; box-shadow: 0 1px 2px rgba(28,41,40,.06), 0 6px 16px -8px rgba(28,41,40,.25); }
.sp-screen__bar { flex: 0 0 auto; height: 14px; display: flex; gap: 4px; align-items: center; padding: 0 7px; background: #F1F2F0; border-bottom: 1px solid var(--sp-border); }
.sp-screen__bar span { width: 5px; height: 5px; border-radius: 50%; background: #CDD2CF; }
.sp-screen img { width: 100%; height: auto; flex: 1 1 auto; object-fit: cover; object-position: top left; max-height: none; }
.sp-body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 1.5rem; }
.sp-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.sp-body .sp-ticks { flex: 1 1 auto; align-content: start; }
.sp-pair { display: grid; grid-template-columns: 1fr; gap: 1.25rem; align-items: stretch; }
@media (min-width: 768px) { .sp-pair { grid-template-columns: 1fr 1fr; gap: 1.5rem; } }
@media (min-width: 768px) { .sp-media { height: 276px; } }
@media (max-width: 420px) {
  .sp-media { height: 212px; padding: 16px; }
  .sp-body { padding: 1.25rem; }
  .sp-price { font-size: 1.625rem; }
}

/* ── Starter Pack media band (owner, 21 Oct 2026) ───────────
   The cover is the hero: taller band on phones, crisp 800w source via srcset on retina,
   layered contact + ambient shadow and a faint light edge (::after). The contents page sits
   smaller and tucked behind; hidden on very narrow screens. No transforms, no hover motion. */
.sp-media--pack { gap: 0; padding: 24px 20px 22px; }
.sp-media--pack .sp-cover { position: relative; z-index: 2; display: block; height: 100%; flex: 0 0 auto; border-radius: 3px;
  box-shadow: 0 1px 1px rgba(28,41,40,.08), 0 2px 4px rgba(28,41,40,.06), 0 10px 18px -6px rgba(28,41,40,.20), 0 22px 36px -18px rgba(28,41,40,.28); }
.sp-media--pack .sp-cover::after { content: ""; position: absolute; inset: 0; border-radius: 3px; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(28,41,40,.10), inset 0 1px 0 rgba(255,255,255,.75), inset 1px 0 0 rgba(255,255,255,.45); }
.sp-media--pack .sp-page--cover { height: 100%; width: auto; max-height: none; border: 0; border-radius: 3px; box-shadow: none; }
.sp-media--pack .sp-page--back { position: relative; z-index: 1; height: 78%; margin-left: -34px; border-radius: 3px; border-color: rgba(28,41,40,.08);
  box-shadow: 0 1px 2px rgba(28,41,40,.05), 0 8px 16px -10px rgba(28,41,40,.22); }
@media (max-width: 767px) { .sp-media--pack { height: 320px; } }
@media (max-width: 420px) { .sp-media--pack { height: 308px; padding: 22px 16px 20px; } .sp-media--pack .sp-page--back { height: 74%; margin-left: -40px; } }
@media (max-width: 340px) { .sp-media--pack .sp-page--back { display: none; } }

/* ── Compact card (no image) ───────────────────────────── */
.sp-compact { display: flex; flex-direction: column; padding: 1.25rem 1.25rem 1.375rem; height: 100%; }
.sp-compact .sp-title { font-size: 1.0625rem; }
.sp-compact .sp-line { font-size: .875rem; margin-bottom: 1rem; flex: 1 1 auto; }
.sp-compact .sp-btn { align-self: flex-start; }
.sp-compact--quiet { background: var(--sp-bg); box-shadow: none; }
@media (max-width: 639px) { .sp-compact .sp-btn { align-self: stretch; } }

/* ── Horizontal panel (thumbnail left) ─────────────────── */
.sp-panel { display: flex; gap: 1.125rem; align-items: flex-start; padding: 1.25rem; }
.sp-panel__thumb { flex: 0 0 auto; width: 72px; }
.sp-panel__thumb img { display: block; width: 100%; height: auto; border-radius: 4px; border: 1px solid rgba(28,41,40,.10); box-shadow: 0 4px 12px -6px rgba(28,41,40,.25); }
.sp-panel__main { flex: 1 1 auto; min-width: 0; }
.sp-panel .sp-title { font-size: 1rem; }
.sp-panel .sp-line { font-size: .875rem; margin: .375rem 0 .875rem; }
.sp-panel .sp-note { text-align: left; margin-top: .625rem; font-size: .75rem; }
@media (max-width: 479px) { .sp-panel__thumb { width: 56px; } .sp-panel .sp-btn { display: flex; width: 100%; } }

/* ── Whole card is clickable (owner, 21 Oct 2026) ──────────
   The card's main button stretches an invisible layer over the card, so a click anywhere
   on it does exactly what the button does (same link, same tracking). Secondary links in
   the note sit above that layer. Hover is subtle: border and shadow only, no movement. */
.sp-card, .sp-panel, .sp-compact { position: relative; transition: border-color .18s ease, box-shadow .18s ease; }
.sp-card .sp-btn, .sp-panel .sp-btn, .sp-compact .sp-btn { position: static; }
.sp-card .sp-btn::after, .sp-panel .sp-btn::after, .sp-compact .sp-btn::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 1;
}
.sp-card .sp-note, .sp-card .sp-note a, .sp-panel .sp-note, .sp-panel .sp-note a { position: relative; z-index: 2; }
.sp-card:hover, .sp-panel:hover, .sp-compact:hover {
  cursor: pointer; border-color: rgba(23,108,105,.38);
  box-shadow: 0 1px 2px rgba(28,41,40,.05), 0 18px 40px -22px rgba(28,41,40,.38);
}
.sp-card:has(.sp-btn:focus-visible), .sp-panel:has(.sp-btn:focus-visible), .sp-compact:has(.sp-btn:focus-visible) {
  border-color: rgba(23,108,105,.55);
}
@media (prefers-reduced-motion: reduce) { .sp-card, .sp-panel, .sp-compact { transition: none; } }

/* ── Quiet strip (homepage Workspace mention, 21 Oct 2026) ─ tertiary, no image */
.sp-strip {
  max-width: 50rem; margin: 0 auto; display: flex; flex-direction: column; gap: .625rem; align-items: flex-start;
  padding: 1rem 1.25rem; background: var(--sp-card); border: 1px solid var(--sp-border); border-radius: 14px;
  box-shadow: 0 1px 2px rgba(28,41,40,.04); text-align: left;
}
.sp-strip__text { margin: 0; font-size: .9375rem; line-height: 1.5; color: var(--sp-muted); }
.sp-strip__text strong { color: var(--sp-text); font-weight: 600; }
.sp-strip__link { flex: 0 0 auto; font-size: .9375rem; font-weight: 600; color: var(--sp-teal); text-decoration: none; white-space: nowrap; border-radius: 6px; }
.sp-strip__link:hover { text-decoration: underline; text-underline-offset: 3px; }
.sp-strip__link:focus-visible { outline: 3px solid rgba(23,108,105,.35); outline-offset: 2px; }
@media (min-width: 768px) {
  .sp-strip { flex-direction: row; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1rem 1.5rem; }
}

/* Card images pass clicks through to the card link (owner, 21 Oct 2026). */
.sp-card .sp-media, .sp-card .sp-media *, .sp-panel .sp-panel__thumb { pointer-events: none; }

/* ── Sidebar card (guides, 21 Oct 2026) ─────────────────────
   Compact Starter Pack card at the top of the guide sidebar. Desktop only: the sidebar drops
   below the article on mobile, where the in-article box does the job. From lg up the whole
   sidebar stack is sticky (card first), so the card stays in view while reading and stops at
   the end of the article column, above the footer. No transforms. */
.sp-card--side { height: auto; padding: 1.125rem 1.125rem 1.25rem; }
.sp-side__head { display: flex; gap: .875rem; align-items: center; }
.sp-side__thumb { flex: 0 0 auto; width: 58px; pointer-events: none; }
.sp-side__thumb img { display: block; width: 100%; height: auto; border-radius: 3px; border: 1px solid rgba(28,41,40,.10); box-shadow: 0 1px 2px rgba(28,41,40,.06), 0 6px 14px -8px rgba(28,41,40,.30); }
.sp-side__text { min-width: 0; }
.sp-card--side .sp-title { font-size: 1rem; }
.sp-card--side .sp-line { font-size: .8125rem; line-height: 1.45; margin-top: .25rem; }
.sp-card--side .sp-ticks { margin: .875rem 0 1rem; gap: .4rem; font-size: .8125rem; }
.sp-card--side .sp-tick { width: 1rem; height: 1rem; margin-top: .1rem; }
.sp-card--side .sp-btn { font-size: .875rem; padding: .5rem .75rem; }
.guide-side-card { display: none; }
@media (min-width: 1024px) {
  .guide-side-card { display: block; }
  .guide-side-stack { position: sticky; top: 96px; }
}

/* ── Mobile guide upsells (21 Oct 2026, owner) ──────────────
   Below lg the sidebar card is not shown, so guides carry a second in-article Pack card
   (.guide-mid-mobile) and a slim sticky bar (.guide-sticky). Both hidden from lg up.
   The bar is display:none until shown, so it never counts as an offer view while hidden. */
.guide-sticky { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  background: #fff; border-top: 1px solid var(--sp-border);
  padding: .5rem 1rem calc(.5rem + env(safe-area-inset-bottom, 0px)); }
.guide-sticky.on { display: block; animation: guide-sticky-fade .2s ease; }
.guide-sticky__inner { display: flex; align-items: center; gap: .75rem; max-width: 40rem; margin: 0 auto; }
.guide-sticky__text { flex: 1 1 auto; min-width: 0; font-size: .9375rem; font-weight: 600; color: var(--sp-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.guide-sticky__btn { flex: 0 0 auto; }
.guide-sticky__x { flex: 0 0 auto; width: 2rem; height: 2rem; border: 0; background: none; color: var(--sp-muted); font-size: 1.375rem; line-height: 1; border-radius: 6px; cursor: pointer; }
.guide-sticky__x:focus-visible { outline: 3px solid rgba(23,108,105,.35); }
@keyframes guide-sticky-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .guide-sticky.on { animation: none; } }
@media (min-width: 1024px) { .guide-sticky, .guide-sticky.on, .guide-mid-mobile { display: none !important; } }
.guide-end-pack { margin-bottom: 1rem; }