.action-demo { max-width:1100px; margin:auto; padding:0 28px; }
.action-demo [hidden] { display:none!important; }
.action-demo section, .action-demo nav { scroll-margin-top:100px; }
.action-demo .page-intro { padding:64px 0 48px; max-width:760px; }
.action-demo .development, .action-demo .eyebrow, .action-demo .small-label { font-size:12px; letter-spacing:1px; color:var(--clay); }
.action-demo .development { border:1px solid var(--line); border-radius:30px; padding:6px 12px; }
.action-demo .page-intro h1 { margin:18px 0; }
.action-demo .intro-links { display:flex; align-items:center; flex-wrap:wrap; gap:24px; }
.action-demo .button { display:inline-flex; align-items:center; gap:24px; padding:13px 22px; border:0; border-radius:8px; background:var(--clay); color:white; text-decoration:none; cursor:pointer; font:inherit; }
.action-demo button:disabled { background:var(--sage); color:var(--ink); opacity:1; cursor:default; }
.action-demo .chapter-nav { display:flex; gap:24px; flex-wrap:wrap; padding:24px 0; border-block:1px solid var(--line); font-size:14px; }
.action-demo .chapter-nav>span { margin-right:auto; font-size:11px; color:var(--muted); }
.action-demo .chapter { padding:56px 0 0; }
.action-demo .section-intro { display:grid; grid-template-columns:1fr 1fr; gap:18px 50px; margin-bottom:32px; }
.action-demo .section-intro .eyebrow { grid-column:1/-1; }
.action-demo h2 { margin:0; font-size:clamp(30px,3.2vw,44px); line-height:1.25; }
.action-demo .section-intro p { margin:0; align-self:end; color:var(--muted); }
.action-demo .demo { display:grid; grid-template-columns:1fr 1fr; background:#f1ece3; border-radius:16px; overflow:hidden; }
.action-demo .input-pane, .action-demo .departure-story { padding:30px; }
.action-demo blockquote { margin:22px 0; font-size:21px; line-height:1.6; }
.action-demo details { margin:22px 0; }
.action-demo summary { cursor:pointer; }
.action-demo details p { font-size:14px; }
.action-demo .demo-note, .action-demo .result-note { font-size:12px; color:var(--muted); }
.action-demo .output-pane, .action-demo .door-screen { margin:18px; padding:24px; background:var(--white); border:1px solid var(--line); border-radius:10px; min-width:0; }
.action-demo .output-head { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; font-size:14px; font-weight:600; }
.action-demo .badge { font-size:11px; font-weight:400; background:#eceee5; color:#526441; padding:6px 9px; border-radius:20px; }
.action-demo #plan-empty { padding:50px 0; text-align:center; color:var(--muted); }
.action-demo .day { display:block; margin:20px 0 9px; font-size:12px; color:var(--muted); }
.action-demo .task { display:flex; gap:10px; align-items:center; padding:10px 0; border-bottom:1px solid var(--line); }
.action-demo .task-icon { color:var(--clay); }
.action-demo .task strong { font-size:14px; }
.action-demo .task small { display:block; font-size:12px; color:var(--muted); }
.action-demo .person { margin-left:auto; padding:7px; background:#f5e5d5; border-radius:20px; font-size:12px; white-space:nowrap; }
.action-demo .dad { background:#e9ecdf; }
.action-demo .takeaway { display:flex; align-items:center; gap:24px; padding:24px 0; border-bottom:1px solid var(--line); }
.action-demo .takeaway span { font-size:12px; color:var(--muted); white-space:nowrap; }
.action-demo .takeaway p { margin:0; font-size:14px; }
.action-demo .email-layout { display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:center; }
.action-demo .phone { position:relative; margin:0; border-radius:14px; overflow:hidden; }
.action-demo .phone-photo { position:relative; }
.action-demo .phone-photo>img { display:block; width:100%; height:auto; }
.action-demo .phone figcaption { padding:18px; background:#f1ece3; font-size:14px; text-align:left; }
.action-demo .phone figcaption p { margin:12px 0 0; }
.action-demo .phone-screen { position:absolute; left:34%; top:13%; width:32%; height:54%; padding:2%; background:#faf7f0; font-size:11px; overflow:hidden; }
.action-demo .phone-screen small { display:block; font-size:9px; margin:12px 0; }
.action-demo .phone-screen h3 { font:600 13px var(--sans); margin:12px 0; }
.action-demo .phone-screen p { font-size:11px; line-height:1.5; }
.action-demo .forward-label { color:var(--clay); }
.action-demo .mail-result { padding:18px 0; border-top:1px solid var(--line); }
.action-demo .mail-result h4 { margin:12px 0; font-size:20px; }
.action-demo .mail-result p { margin:6px 0; }
.action-demo .email-output>small { color:var(--muted); }
.action-demo .departure-demo { background:#ebece2; }
.action-demo .door-screen h3 { font-size:26px; margin:24px 0 4px; }
.action-demo .location { font-size:14px; color:var(--muted); }
.action-demo .packing label { display:flex; align-items:center; gap:10px; padding:16px 0; border-top:1px solid var(--line); cursor:pointer; }
.action-demo .packing input { accent-color:var(--sage); width:20px; height:20px; }
.action-demo .packing small { margin-left:auto; font-size:12px; color:var(--muted); }
.action-demo .packing label:has(input:checked) span { text-decoration:line-through; color:var(--muted); }
.action-demo #packing-status { font-size:13px; color:#526441; }
.action-demo .everyday-details { display:grid; grid-template-columns:1fr 1.2fr; gap:50px; margin-top:60px; }
.action-demo .details-heading h2 { margin-top:18px; }
.action-demo .details-list article { display:flex; gap:20px; border-top:1px solid var(--line); padding:22px 0; }
.action-demo .details-list article>span { color:var(--clay); }
.action-demo .details-list h3 { font-size:21px; margin:0 0 10px; }
.action-demo .details-list p { margin:0; }
.action-demo .details-list aside { background:#f1e9dc; padding:18px; margin-top:18px; border-radius:8px; }
.action-demo .details-list aside small { color:var(--clay); }
.action-demo .closing { text-align:center; padding:50px 24px; background:#f1e7db; margin:50px 0; border-radius:16px; }
.action-demo .closing h2 { margin:22px 0; }
.action-demo .secondary-cta { display:inline-block; margin:18px 24px; }
.action-demo .launch-note { display:block; color:var(--muted); }
@media(max-width:760px) {
  .action-demo { padding:0 20px; }
  .action-demo .chapter-nav>span { width:100%; }
  .action-demo .chapter-nav { gap:16px; }
  .action-demo .section-intro, .action-demo .demo, .action-demo .email-layout, .action-demo .everyday-details { grid-template-columns:1fr; gap:24px; }
  .action-demo .input-pane, .action-demo .departure-story { padding:24px; }
  .action-demo .phone { max-width:430px; margin:auto; }
  .action-demo .phone-screen { font-size:9px; }
  .action-demo .takeaway { align-items:flex-start; gap:15px; }
  .action-demo .takeaway span { white-space:normal; }
}