/* Home redesign draft -- styles unique to this page. Shared components
   (nav, footer, buttons, cards, tokens) still come from tokens.css +
   styles.css, loaded before this file. */

.draft-section { padding-block: clamp(64px, 10vw, 120px); }
.draft-section .section-head { max-width: 66ch; }
.draft-section + .draft-section { border-top: 1px solid color-mix(in srgb, var(--cs-ink) 8%, transparent); }
.section-num { font-family: var(--cs-font-head); font-weight: 600; font-size: 14px; color: var(--cs-sunset-text); letter-spacing: 0.06em; margin-bottom: 10px; }

/* ---- Hero ---- */
.draft-hero { padding-block: clamp(56px, 9vw, 100px) clamp(40px, 7vw, 80px); }
.draft-hero-grid { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; }
@media (min-width: 900px) { .draft-hero-grid { grid-template-columns: 1.1fr 0.9fr; } }
.draft-hero h1 { font-size: clamp(34px, 6vw, 56px); }
/* styles.css only styles `.hero .status`; this section is .draft-hero */
.draft-hero .status { margin-top: 18px; font-size: var(--cs-small); color: var(--cs-muted-text); }

/* ---- Phone preview: scripted chat -> published week. The chat collapses
   into the schedule, which then answers the chat's question (who closes
   tonight). Base styles below are the static / reduced-motion state: the
   finished week with badge and callout visible. Motion is added only under
   prefers-reduced-motion: no-preference, and pauses on hover/focus. ---- */
.phone-preview { width: min(320px, 76vw); margin-inline: auto; }
.phone-frame { position: relative; aspect-ratio: 9 / 16; background: var(--cs-surface); border-radius: 36px; border: 7px solid var(--cs-ink); overflow: hidden; box-shadow: 0 24px 48px -24px rgba(0,0,0,0.35); }
.phone-frame::before { content: ""; position: absolute; top: 10px; left: 50%; width: 60px; height: 6px; margin-left: -30px; background: color-mix(in srgb, var(--cs-ink) 25%, transparent); border-radius: 4px; z-index: 2; }
.scene { position: absolute; inset: 0; padding: 30px 14px 16px; display: flex; flex-direction: column; box-sizing: border-box; }

/* scene 1: the group chat */
.scene-chat { opacity: 0; justify-content: flex-end; gap: 6px; }
.chat-top { position: absolute; top: 24px; left: 0; right: 0; padding: 0 14px 8px; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid color-mix(in srgb, var(--cs-ink) 10%, transparent); font-size: 11.5px; }
.chat-top .avs { display: flex; }
.chat-top .avs i { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--cs-surface); margin-right: -6px; background: var(--cs-dust); }
.chat-top .avs i:nth-child(2) { background: var(--cs-sage); }
.chat-top .avs i:nth-child(3) { background: var(--cs-mesa); }
.chat-top .g { font-weight: 600; }
.chat-top .n { color: var(--cs-muted-text); margin-left: auto; }
.bubble { align-self: flex-start; max-width: 84%; background: color-mix(in srgb, var(--cs-ink) 10%, var(--cs-surface)); border-radius: 14px 14px 14px 4px; padding: 7px 11px; font-size: 12px; line-height: 1.3; opacity: 0; }
.bubble .who { display: block; font-size: 10px; font-weight: 600; color: var(--cs-muted-text); margin-bottom: 2px; }
.bubble.me { align-self: flex-end; background: var(--cs-sunset-btn); color: #fff; border-radius: 14px 14px 4px 14px; }
.bubble.photo { padding: 5px; }
.bubble.photo .img { display: block; width: 128px; height: 74px; border-radius: 9px; filter: blur(0.6px); background:
  repeating-linear-gradient(0deg, transparent 0 9px, color-mix(in srgb, var(--cs-night) 18%, transparent) 9px 10px),
  linear-gradient(135deg, var(--cs-playa), color-mix(in srgb, var(--cs-playa) 55%, var(--cs-dust))); }
.bubble.photo .cap { display: block; font-size: 10px; color: var(--cs-muted-text); padding: 4px 4px 1px; }
.typing { align-self: flex-start; display: inline-flex; gap: 4px; padding: 9px 12px; border-radius: 14px 14px 14px 4px; background: color-mix(in srgb, var(--cs-ink) 10%, var(--cs-surface)); opacity: 0; }
.typing i { width: 5px; height: 5px; border-radius: 50%; background: var(--cs-muted-text); }
.seen { align-self: flex-end; font-size: 10px; color: var(--cs-muted-text); opacity: 0; }

/* scene 2: the published week */
.scene-schedule { justify-content: flex-start; gap: 12px; }
.sched-head { display: flex; align-items: center; justify-content: space-between; }
.sched-head .t { font-family: var(--cs-font-head); font-weight: 600; font-size: 15px; }
.sched-head .t small { display: block; font-family: var(--cs-font-body); font-weight: 400; font-size: 10.5px; color: var(--cs-muted-text); }
.sched-badge { font-size: 11px; font-weight: 600; color: var(--cs-sage-small-text); display: inline-flex; align-items: center; gap: 4px; }
.sched-badge::before { content: "\2713"; }
/* one grid for the day header and every row, so the today band lines up */
.sched-grid { position: relative; display: grid; grid-template-columns: 40px repeat(5, 1fr); gap: 6px 4px; align-items: center; }
/* absolutely positioned on the grid lines: it must not occupy a cell, or
   auto-placement skips the Thursday column and shifts every cell after it */
.today-band { position: absolute; grid-column: 5 / 6; grid-row: 1 / span 6; top: -4px; bottom: -4px; left: -2px; right: -2px; border-radius: 8px; background: color-mix(in srgb, var(--cs-sunset) 14%, transparent); }
.sched-grid .day { font-size: 10px; font-weight: 600; color: var(--cs-muted-text); text-align: center; letter-spacing: 0.02em; }
.sched-grid .day.today { color: var(--cs-sunset-text); }
.sched-grid .name { font-size: 11px; color: var(--cs-muted-text); }
.chip { height: 20px; border-radius: 5px; display: flex; align-items: center; justify-content: center; font-size: 9.5px; font-weight: 600; letter-spacing: 0.01em; position: relative; z-index: 1; }
.chip.open { background: var(--cs-sage); color: var(--cs-night); }
.chip.mid { background: var(--cs-mesa); color: #fff; }
.chip.close { background: var(--cs-sunset-btn); color: #fff; }
.chip.off { border: 1.5px dashed color-mix(in srgb, var(--cs-ink) 24%, transparent); }
.tonight { margin-top: auto; display: flex; align-items: center; gap: 8px; padding: 9px 11px; border-radius: 12px; background: color-mix(in srgb, var(--cs-sunset) 12%, var(--cs-surface)); border: 1px solid color-mix(in srgb, var(--cs-sunset) 35%, transparent); font-size: 11.5px; }
.tonight b { font-family: var(--cs-font-head); font-weight: 600; }
.tonight .k { color: var(--cs-muted-text); }
.tonight .av { width: 20px; height: 20px; border-radius: 50%; background: var(--cs-mesa); flex-shrink: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* motion: 12 s loop. chat 0-36%, collapse 34-37%, schedule builds 41-60%,
   held to 92%, out by 96%. Bubble delays stagger their entrance; the collapse
   point is shared so they leave together. */
@media (prefers-reduced-motion: no-preference) {
  .scene-chat { animation: sc-chat 12s ease-in-out infinite; }
  .scene-schedule { animation: sc-sched 12s ease-in-out infinite; }
  .b1 { animation: bub 12s ease-in-out infinite; }
  .b2 { animation: bub 12s ease-in-out infinite 0.6s; }
  .b3 { animation: bub 12s ease-in-out infinite 1.2s; }
  .b4 { animation: bub 12s ease-in-out infinite 1.8s; }
  .b5 { animation: bub 12s ease-in-out infinite 2.4s; }
  .typing { animation: typ 12s ease-in-out infinite; }
  .seen { animation: seen 12s ease-in-out infinite; }
  .sched-grid > * { animation: row 12s ease-in-out infinite; }
  .sched-grid .r1 { animation-delay: 0.1s; }
  .sched-grid .r2 { animation-delay: 0.2s; }
  .sched-grid .r3 { animation-delay: 0.3s; }
  .sched-grid .r4 { animation-delay: 0.4s; }
  .sched-grid .r5 { animation-delay: 0.5s; }
  .today-band { animation: band 12s ease-in-out infinite; }
  .sched-badge { animation: badge 12s ease-in-out infinite; }
  .tonight { animation: tonight 12s ease-in-out infinite; }
  .phone-preview:hover *, .phone-preview:focus-within * { animation-play-state: paused; }
}
@keyframes sc-chat { 0%, 36% { opacity: 1; } 40%, 96% { opacity: 0; } 100% { opacity: 1; } }
@keyframes sc-sched { 0%, 38% { opacity: 0; } 41%, 92% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes bub { 0%, 3% { opacity: 0; transform: translateY(8px) scale(1); } 6%, 33% { opacity: 1; transform: translateY(0) scale(1); } 37%, 100% { opacity: 0; transform: translateY(-36px) scale(0.7); } }
@keyframes typ { 0%, 24% { opacity: 0; } 27%, 33% { opacity: 1; } 36%, 100% { opacity: 0; } }
@keyframes seen { 0%, 20% { opacity: 0; } 22%, 33% { opacity: 1; } 36%, 100% { opacity: 0; } }
@keyframes row { 0%, 41% { opacity: 0; transform: translateY(10px); } 45%, 92% { opacity: 1; transform: translateY(0); } 96%, 100% { opacity: 0; transform: translateY(0); } }
@keyframes band { 0%, 50% { opacity: 0; } 53%, 92% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes badge { 0%, 52% { opacity: 0; transform: scale(0.85); } 56%, 92% { opacity: 1; transform: scale(1); } 96%, 100% { opacity: 0; } }
@keyframes tonight { 0%, 56% { opacity: 0; transform: translateY(8px); } 60%, 92% { opacity: 1; transform: translateY(0); } 96%, 100% { opacity: 0; } }

/* ---- Steps (Build / Publish / Run the shift) ---- */
.steps { display: grid; grid-template-columns: 1fr; gap: 28px; counter-reset: step; }
@media (min-width: 780px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step { counter-increment: step; }
.step .step-num { font-family: var(--cs-font-head); font-weight: 600; font-size: 40px; color: var(--cs-dust); line-height: 1; margin-bottom: 10px; }
.step h3 { font-size: 20px; margin-bottom: 8px; }

/* ---- Feature grid by business type ---- */
.biz-grid { border-collapse: collapse; width: 100%; min-width: 620px; font-size: 14px; }
.biz-grid th, .biz-grid td { padding: 10px; border-bottom: 1px solid color-mix(in srgb, var(--cs-ink) 10%, transparent); text-align: center; }
.biz-grid th[scope="col"] { font-family: var(--cs-font-head); font-weight: 600; font-size: 13px; }
.biz-grid th[scope="row"] { text-align: left; font-weight: 500; }
.biz-grid .yes { color: var(--cs-sage-small-text); font-weight: 600; }
.biz-grid .yes::before { content: "\2713  "; }
.biz-grid .no { color: var(--cs-muted-text); }

/* ---- Compact pricing teaser ---- */
.price-chips { display: flex; flex-wrap: wrap; gap: 16px; }
.price-chip { flex: 1 1 160px; background: var(--cs-surface); border-radius: var(--cs-radius); padding: 18px 20px; border: 1px solid color-mix(in srgb, var(--cs-ink) 8%, transparent); }
.price-chip .n { font-family: var(--cs-font-head); font-weight: 600; font-size: 15px; margin-bottom: 4px; }
.price-chip .p { font-family: var(--cs-font-head); font-weight: 600; font-size: 26px; }
.price-chip .p small { font-size: 14px; font-weight: 400; color: var(--cs-muted-text); }

/* ---- Final CTA ---- */
.final-cta { text-align: center; }
.final-cta h2 { font-size: clamp(28px, 5vw, 42px); }