/* Landing page: no-login plan picker */
.plan-picker { background: #fff; border: 1px solid #e5e7eb; border-radius: 20px; padding: 32px 24px; }
.plan-picker-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; margin: 24px auto 0; max-width: 960px; }
.plan-picker-option { text-align: left; font: inherit; font-size: 15px; font-weight: 500; line-height: 1.35; padding: 14px 16px; border: 1px solid #d1d5db; border-radius: 12px; background: #fff; color: #111827; cursor: pointer; }
.plan-picker-option:hover { border-color: #111827; }
.plan-picker-option[aria-pressed="true"] { background: #111827; color: #fff; border-color: #111827; }
.plan-picker-option:focus-visible { outline: 3px solid #2563eb; outline-offset: 2px; }
.plan-picker-result { max-width: 760px; margin: 28px auto 0; text-align: left; }
.plan-picker-result .ob-step { background: #fafafa; }
.plan-picker-result .ob-step h3 { font-size: 16px; color: #111827; }
.plan-picker-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 16px; }
@media (max-width: 640px) { .plan-picker { padding: 22px 16px; } .plan-picker-options { grid-template-columns: 1fr; } }

/* Your week, handled */
.week-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.week-card { padding: 22px; text-align: left; display: flex; flex-direction: column; gap: 10px; }
.week-card h3 { font-size: 18px; font-weight: 700; color: #111827; line-height: 1.3; margin: 0; }
.week-card > p { font-size: 14px; color: #4b5563; line-height: 1.6; margin: 0; }
.week-snippet { margin-top: auto; border: 1px solid #e5e7eb; border-radius: 12px; background: #f9fafb; padding: 12px 14px; font-size: 13px; color: #1f2937; line-height: 1.5; }
.week-snippet p { margin: 2px 0; }

/* Each example looks like the thing it is: a labelled header in its own colour, then a body shaped like the real artifact. */
.week-snippet[class*="ws-"] { --tone: #2563eb; --tint: #eff6ff; padding: 0; overflow: hidden; background: #fff; border-color: #e5e7eb; box-shadow: 0 1px 2px rgba(17, 24, 39, .04); }
.ws-todo { --tone: #2563eb; --tint: #eff6ff; }
.ws-update { --tone: #4f46e5; --tint: #eef2ff; }
.ws-message { --tone: #0f766e; --tint: #ecfdf5; }
.ws-meeting { --tone: #b45309; --tint: #fffbeb; }
.ws-roadmap { --tone: #be123c; --tint: #fff1f2; }
.ws-decision { --tone: #7c3aed; --tint: #f5f3ff; }
.ws-head { display: flex; align-items: center; gap: 6px; padding: 7px 12px; background: var(--tint); border-bottom: 1px solid #e5e7eb; color: var(--tone); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.ws-head .material-icons { font-size: 16px; }
.ws-pill { margin-left: auto; padding: 1px 8px; border-radius: 999px; background: #fff; border: 1px solid currentColor; font-size: 10.5px; letter-spacing: 0; text-transform: none; white-space: nowrap; }
.ws-message .ws-pill { background: #fff7ed; color: #9a3412; border-color: #fdba74; }
.ws-body { padding: 10px 12px 12px; }
.ws-row { display: flex; gap: 10px; align-items: flex-start; }
.ws-pad { padding: 0 12px 10px; }
.ws-foot { margin-top: 8px !important; padding-top: 6px; border-top: 1px dashed #e5e7eb; }
.ws-pad.ws-foot { margin: 0 12px 0 !important; padding: 6px 0 10px; }
.ws-check { flex: none; width: 16px; height: 16px; margin-top: 2px; border: 2px solid var(--tone); border-radius: 4px; background: #fff; }
.ws-section { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tone); }
.ws-update .ws-body { border-left: 3px solid var(--tone); margin: 10px 12px 12px; padding: 0 0 0 10px; }
.ws-avatar { flex: none; display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 999px; background: var(--tone); color: #fff; font-size: 11px; font-weight: 700; }
.ws-to { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #4b5563; font-weight: 600; margin-bottom: 8px !important; }
.ws-to .ws-avatar { width: 20px; height: 20px; font-size: 10px; }
.ws-bubble { position: relative; background: var(--tint); border: 1px solid #a7f3d0; border-radius: 4px 12px 12px 12px; padding: 9px 11px; color: #111827; }
.ws-fake-btn { display: inline-block; margin-right: 6px; padding: 1px 8px; border-radius: 6px; border: 1px solid #d1d5db; background: #fff; color: #374151; font-weight: 600; font-size: 11px; }
.ws-old { color: #6b7280; }
.ws-old del { text-decoration-color: #9ca3af; }
.week-snippet-title { font-weight: 700; }
.week-source { font-size: 12px; color: #6b7280; }
.week-cite { font-weight: 700; color: #1d4ed8; }
.week-chip { display: inline-block; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 1px 8px; margin-right: 4px; }
.week-chip-observed { background: #e0ecff; color: #1e3a8a; }
.week-chip-risk { background: #fde3e3; color: #9b1c1c; }
.week-quarters { display: flex; gap: 6px; overflow: hidden; margin-bottom: 6px; }
.week-quarters span { flex: 0 0 auto; border: 1px solid #d1d5db; border-radius: 8px; padding: 3px 8px; font-size: 12px; background: #fff; }
.week-quarters .is-now { background: #111827; color: #fff; border-color: #111827; }

/* Trust */
.trust-band { display: grid; grid-template-columns: 1.1fr 1fr; gap: 28px; align-items: center; background: #fff; border: 1px solid #e5e7eb; border-radius: 20px; padding: 32px; }
.trust-list { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 14px; }
.trust-list li { display: flex; gap: 12px; font-size: 15px; color: #374151; line-height: 1.55; }
.trust-list .material-icons { color: #1d4ed8; flex: 0 0 auto; margin-top: 2px; }
.trust-list strong { color: #111827; }
.trust-example { padding: 22px; text-align: left; }
.trust-q { font-weight: 700; font-size: 17px; color: #111827; margin: 0; }
.trust-a { color: #374151; margin: 8px 0; font-size: 15px; }
.trust-box { border-left: 4px solid #d97706; background: #fffbeb; border-radius: 8px; padding: 10px 14px; font-size: 14px; color: #1f2937; margin: 10px 0; }
.trust-box ul { margin: 6px 0 0; padding-left: 18px; list-style: disc; }

/* A week with ProdMoh */
.week-timeline { list-style: none; padding: 0; margin-left: auto; margin-right: auto; max-width: 820px; display: grid; gap: 14px; }
.week-timeline li { display: flex; gap: 16px; align-items: flex-start; background: #fff; border: 1px solid #e5e7eb; border-radius: 14px; padding: 16px 18px; text-align: left; }
.week-day { flex: 0 0 52px; height: 52px; border-radius: 12px; display: grid; place-items: center; background: #111827; color: #fff; font-weight: 700; }
.week-timeline h3 { font-size: 16px; font-weight: 700; color: #111827; margin: 0 0 4px; }
.week-timeline p { font-size: 14px; color: #4b5563; margin: 0; line-height: 1.55; }

@media (max-width: 1023px) { .week-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .trust-band { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .week-grid { grid-template-columns: 1fr; } .trust-band { padding: 22px 16px; } .week-day { flex-basis: 44px; height: 44px; } }
.features-group-title { font-size: 14px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #6b7280; }

/* Immediate, account-free task checklists in the former preview space. */
#plan-picker { scroll-margin-top: 110px; position: relative; box-shadow: 0 24px 48px rgba(15, 23, 51, .10); padding: 32px; }
.plan-picker-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; text-align: left; }
#plan-picker .plan-picker-options { grid-template-columns: 1fr; margin-top: 24px; }
#plan-picker .plan-picker-option { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px; }
#plan-picker .plan-picker-result { min-width: 0; margin: 0; max-width: none; padding: 24px; background: #f6f8fb; border: 1px solid #e2e8f0; border-radius: 16px; }
#planPickerHeadline { font-size: 23px; line-height: 1.3; font-weight: 700; color: #111827; }
.plan-picker-checklist { list-style: decimal; margin: 22px 0; padding-left: 24px; color: #334155; }
.plan-picker-checklist li { padding-left: 6px; margin-bottom: 16px; line-height: 1.65; }
.plan-picker-checklist li::marker { font-weight: 700; color: #1d4ed8; }
#plan-picker .plan-picker-cta { border-top: 1px solid #dce1e8; padding-top: 20px; margin-top: 20px; align-items: flex-start; flex-direction: column; }
@media (max-width: 760px) {
  #plan-picker { padding: 22px 16px; }
  .plan-picker-layout { grid-template-columns: 1fr; gap: 24px; }
  #plan-picker .plan-picker-result { padding: 20px; }
  #plan-picker .btn-primary { white-space: normal; }
}