.learn-page { background: #fff; }
.learn-page main > section { width: min(1240px, calc(100% - 44px)); }
.help-ideas-panels { width: min(1240px, calc(100% - 44px)); margin-inline: auto; }
.help-ideas-panels > section { width: 100%; }

.help-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 230px;
  align-items: center;
  gap: 72px;
  padding: 74px 0 68px;
}

.help-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 calc(50% - 50vw);
  border-bottom: 1px solid var(--line);
  background: #f7faf7;
}

.help-hero-copy { max-width: 820px; }
.help-hero h1 { margin-bottom: 18px; color: #46504a; font-size: 58px; line-height: 1; letter-spacing: 0; }
.help-hero-copy > p:not(.eyebrow) { max-width: 730px; margin-bottom: 0; color: var(--ink-soft); font-size: 18px; line-height: 1.6; }
.help-search { position: relative; max-width: 760px; margin-top: 30px; }
.help-search input {
  width: 100%;
  min-height: 62px;
  border: 1px solid #cfd8d1;
  border-radius: 7px;
  padding: 0 58px 0 54px;
  background: #fff;
  color: #424d46;
  font: inherit;
  font-size: 16px;
  box-shadow: 0 14px 34px rgba(40, 53, 44, 0.08);
}
.help-search input:focus { border-color: #b18a20; outline: 3px solid rgba(247, 200, 68, 0.25); }
.help-search-icon { position: absolute; z-index: 1; top: 20px; left: 21px; width: 17px; height: 17px; border: 2px solid #657169; border-radius: 50%; pointer-events: none; }
.help-search-icon::after { content: ""; position: absolute; width: 8px; height: 2px; right: -6px; bottom: -3px; border-radius: 2px; background: #657169; transform: rotate(45deg); }
.help-search button { position: absolute; top: 13px; right: 12px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: transparent; cursor: pointer; }
.help-search button::before, .help-search button::after { content: ""; position: absolute; top: 17px; left: 10px; width: 16px; height: 2px; border-radius: 2px; background: #69746d; transform: rotate(45deg); }
.help-search button::after { transform: rotate(-45deg); }
.help-search button:hover { background: #f0f3f0; }
.help-popular { display: flex; flex-wrap: wrap; align-items: center; gap: 7px 13px; margin-top: 16px; color: #707b74; font-size: 12px; }
.help-popular span { font-weight: 850; }
.help-popular button { border: 0; border-bottom: 1px solid #9da8a1; padding: 2px 0; background: transparent; color: #59655e; font: inherit; font-weight: 750; cursor: pointer; }
.help-popular button:hover { border-color: #8b6810; color: #74570c; }
.help-hero-sunny { display: grid; place-items: center; min-height: 220px; }
.help-hero-sunny > span { width: 116px; height: 116px; border-radius: 50%; background: #ffc83d; box-shadow: 0 0 0 9px #ffe7a0, 0 0 0 25px rgba(255, 244, 199, 0.68), 0 24px 48px rgba(159, 113, 9, 0.15); animation: help-sunny-breathe 4.8s ease-in-out infinite; }

.help-mode-bar { padding: 0; }
.help-mode-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-bottom: 1px solid #dce3dd; }
.help-mode-tabs button { position: relative; min-height: 92px; border: 0; padding: 20px 26px; background: #fff; color: #69746d; text-align: left; cursor: pointer; }
.help-mode-tabs button + button { border-left: 1px solid #e2e7e3; }
.help-mode-tabs button::after { content: ""; position: absolute; inset: auto 26px -1px; height: 4px; background: transparent; }
.help-mode-tabs button[aria-selected="true"] { background: #fffdf7; color: #424d46; }
.help-mode-tabs button[aria-selected="true"]::after { background: var(--sun); }
.help-mode-tabs strong, .help-mode-tabs span { display: block; }
.help-mode-tabs strong { margin-bottom: 4px; font-size: 18px; }
.help-mode-tabs span { font-size: 12px; font-weight: 650; }

.help-tutorials { padding: 58px 0 104px; }
.help-tutorial-heading { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 30px; }
.help-tutorial-heading h2 { margin-bottom: 9px; color: #48534c; font-size: 38px; line-height: 1.06; }
.help-tutorial-heading p:last-child { margin: 0; color: #6b766f; font-size: 14px; }
.help-expand-button { flex: 0 0 auto; border: 1px solid #d5ddd7; border-radius: 5px; padding: 9px 13px; background: #fff; color: #5f6a63; font: inherit; font-size: 11px; font-weight: 850; cursor: pointer; }
.help-category-list { display: flex; gap: 7px; margin-bottom: 34px; padding-bottom: 5px; overflow-x: auto; scrollbar-width: thin; }
.help-category-list button { flex: 0 0 auto; min-height: 37px; border: 1px solid #d9e0da; border-radius: 5px; padding: 0 13px; background: #fff; color: #667169; font: inherit; font-size: 11px; font-weight: 800; cursor: pointer; }
.help-category-list button[aria-pressed="true"] { border-color: #38433d; background: #38433d; color: #fff; }
.help-tutorial-list { border-top: 1px solid #dce3dd; }
.help-tutorial-item { border-bottom: 1px solid #dce3dd; }
.help-tutorial-item summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 28px; min-height: 116px; padding: 20px 8px; list-style: none; cursor: pointer; }
.help-tutorial-item summary::-webkit-details-marker { display: none; }
.help-tutorial-copy { display: grid; grid-template-columns: 158px minmax(210px, 0.8fr) minmax(260px, 1.2fr); align-items: center; gap: 22px; }
.help-tutorial-copy small { color: #8a6813; font-size: 9px; font-weight: 900; line-height: 1.35; text-transform: uppercase; }
.help-tutorial-copy strong { color: #49544d; font-size: 17px; line-height: 1.3; }
.help-tutorial-copy > span { color: #6b766f; font-size: 13px; line-height: 1.5; }
.help-tutorial-meta { display: flex; align-items: center; justify-content: flex-end; gap: 16px; min-width: 94px; color: #7b857f; font-size: 10px; font-weight: 800; }
.help-tutorial-meta i { position: relative; width: 30px; height: 30px; border: 1px solid #d8dfda; border-radius: 50%; }
.help-tutorial-meta i::before, .help-tutorial-meta i::after { content: ""; position: absolute; top: 13px; left: 8px; width: 12px; height: 2px; border-radius: 2px; background: #67726b; transition: transform 180ms ease; }
.help-tutorial-meta i::after { transform: rotate(90deg); }
.help-tutorial-item[open] { background: #fbfcfb; }
.help-tutorial-item[open] .help-tutorial-meta i::after { transform: rotate(0); }
.help-tutorial-body { max-width: 910px; margin-left: 180px; padding: 0 24px 38px 0; }
.help-tutorial-body ol { display: grid; gap: 18px; margin: 0; padding: 0; list-style: none; counter-reset: tutorial-step; }
.help-tutorial-body li { position: relative; min-height: 34px; padding: 4px 0 0 48px; color: #56625b; font-size: 14px; line-height: 1.6; counter-increment: tutorial-step; }
.help-tutorial-body li::before { content: counter(tutorial-step); position: absolute; top: 0; left: 0; display: grid; place-items: center; width: 31px; height: 31px; border-radius: 50%; background: #ffefb8; color: #74570c; font-size: 11px; font-weight: 900; }
.help-example { margin-top: 26px; border-left: 3px solid var(--sun); padding: 4px 0 4px 17px; }
.help-example span { color: #8a6813; font-size: 9px; font-weight: 900; text-transform: uppercase; }
.help-example p { margin: 5px 0 0; color: #535f58; font-size: 13px; font-weight: 750; line-height: 1.55; }
.help-tip { margin: 22px 0 0; padding: 14px 16px; background: #eef4ef; color: #5c6861; font-size: 12px; line-height: 1.55; }
.help-tip strong { display: block; margin-bottom: 3px; color: #46534b; font-size: 9px; text-transform: uppercase; }
.help-demo-link { display: inline-block; margin-top: 22px; border-bottom: 1px solid #9b7a22; color: #72570d; font-size: 12px; font-weight: 850; text-decoration: none; }
.help-tutorial-media { margin: 0 0 26px; }
.help-tutorial-media img { display: block; width: 100%; height: auto; border: 1px solid #d9e0da; border-radius: 7px; }
.help-empty { border-block: 1px solid #dce3dd; padding: 70px 20px; text-align: center; }
.help-empty-sunny { width: 50px; height: 50px; margin: 0 auto 22px; border-radius: 50%; background: #ffc83d; box-shadow: 0 0 0 5px #ffe7a0, 0 0 0 12px rgba(255, 244, 199, 0.68); }
.help-empty h3 { margin-bottom: 7px; color: #4d5851; font-size: 21px; }
.help-empty p { margin: 0 0 20px; color: #6b766f; font-size: 13px; }

@keyframes help-sunny-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); } }

.learn-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(520px, 1.18fr);
  align-items: center;
  gap: 72px;
  min-height: calc(100svh - 128px);
  max-height: 800px;
  padding: 74px 0 92px;
}

.learn-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 calc(50% - 50vw);
  border-bottom: 1px solid var(--line);
  background: #f7faf7;
}

.learn-hero-copy { max-width: 620px; }
.learn-hero h1 { margin-bottom: 24px; color: #46504a; font-size: 68px; line-height: 0.98; letter-spacing: 0; }
.learn-hero-copy > p:not(.eyebrow) { max-width: 590px; margin-bottom: 0; color: var(--ink-soft); font-size: 20px; line-height: 1.58; }
.learn-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.learn-hero-notes { display: flex; flex-wrap: wrap; gap: 10px 20px; margin-top: 25px; color: #68736c; font-size: 12px; font-weight: 800; }
.learn-hero-notes span { display: inline-flex; align-items: center; gap: 8px; }
.learn-hero-notes span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 3px var(--mint-soft); }

.learn-hero-scene { position: relative; min-height: 570px; overflow: hidden; }
.learn-sunny { position: absolute; z-index: 6; top: 42px; left: 50%; width: 112px; height: 112px; border-radius: 50%; background: #ffc83d; box-shadow: 0 0 0 9px #ffe7a0, 0 0 0 25px rgba(255, 244, 199, 0.68), 0 26px 54px rgba(159, 113, 9, 0.17); animation: learn-sunny-drift 5s ease-in-out infinite; }
.thought-note { position: absolute; z-index: 2; border: 1px solid #dde4de; border-radius: 6px; padding: 12px 15px; background: #fff; color: #606a64; font-size: 13px; font-weight: 800; box-shadow: 0 12px 28px rgba(38, 48, 41, 0.08); animation: thought-arrive 5.8s ease-in-out infinite; }
.thought-one { top: 52px; left: 8%; transform: rotate(-3deg); }
.thought-two { top: 190px; right: 4%; transform: rotate(3deg); animation-delay: -1.2s; }
.thought-three { top: 262px; left: 2%; transform: rotate(2deg); animation-delay: -2.2s; }
.thought-four { top: 112px; right: 2%; transform: rotate(-2deg); animation-delay: -3.1s; }
.organized-list { position: absolute; inset: auto 8% 28px 18%; z-index: 4; min-height: 280px; border: 1px solid #d9e0da; border-radius: 8px; padding: 30px 34px; background: #fff; box-shadow: 0 30px 70px rgba(32, 43, 36, 0.12); }
.organized-list > span { color: var(--sun-deep); font-size: 10px; font-weight: 900; text-transform: uppercase; }
.organized-list > strong { display: block; margin: 8px 0 26px; color: #4d5851; font-size: 25px; }
.organized-list p { display: grid; grid-template-columns: 10px 1fr; align-items: center; gap: 12px; margin: 0; padding: 14px 0; border-top: 1px solid #e8ece8; color: #626d66; font-size: 14px; font-weight: 750; }
.dot { width: 9px; height: 9px; border-radius: 50%; }
.dot.sun { background: var(--sun); }
.dot.sky { background: var(--sky); }
.dot.mint { background: var(--mint); }

.learn-watch { padding: 112px 0; }
.walkthrough-tool { overflow: hidden; border: 1px solid #dce3dd; border-radius: 8px; background: #f4f7f4; box-shadow: var(--shadow-soft); }
.walkthrough-tabs { display: flex; overflow-x: auto; border-bottom: 1px solid #dce3dd; background: #fff; scrollbar-width: none; }
.walkthrough-tabs::-webkit-scrollbar { display: none; }
.walkthrough-tabs button { flex: 1 0 190px; min-height: 58px; border: 0; border-right: 1px solid #e4e9e5; padding: 0 20px; background: #fff; color: #707a74; font-weight: 850; cursor: pointer; }
.walkthrough-tabs button:last-child { border-right: 0; }
.walkthrough-tabs button[aria-selected="true"] { background: #eef3ef; color: #38423c; box-shadow: inset 0 -4px 0 var(--sun); }
.walkthrough-layout { display: grid; grid-template-columns: minmax(300px, 0.72fr) minmax(560px, 1.28fr); min-height: 590px; }
.walkthrough-copy { display: flex; flex-direction: column; justify-content: center; padding: 48px; border-right: 1px solid #dce3dd; background: #fff; }
.walkthrough-kicker { margin-bottom: 13px; color: var(--sun-deep); font-size: 11px; font-weight: 900; text-transform: uppercase; }
.walkthrough-copy h3 { margin-bottom: 18px; color: #46504a; font-size: 36px; line-height: 1.08; }
.walkthrough-copy > p:not(.walkthrough-kicker) { margin-bottom: 0; color: var(--ink-soft); font-size: 16px; line-height: 1.65; }
.walkthrough-copy blockquote { margin: 26px 0 0; border-left: 3px solid var(--sun); padding: 5px 0 5px 17px; color: #5b665f; font-size: 14px; font-weight: 750; line-height: 1.55; }
.walkthrough-controls { display: flex; align-items: center; gap: 10px; margin-top: 30px; }
.walkthrough-play, .walkthrough-replay { min-height: 43px; border-radius: 5px; font-weight: 850; cursor: pointer; }
.walkthrough-play { display: inline-flex; align-items: center; gap: 10px; border: 0; padding: 0 17px; background: var(--ink); color: #fff; }
.walkthrough-play span { width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 9px solid currentColor; }
.walkthrough-play.is-playing span { width: 9px; height: 12px; border: 0; background: linear-gradient(to right, currentColor 0 3px, transparent 3px 6px, currentColor 6px 9px); }
.walkthrough-play b { font: inherit; }
.walkthrough-replay { border: 1px solid var(--line); padding: 0 15px; background: #fff; color: #59635d; }

.walkthrough-visual { display: grid; align-content: center; gap: 18px; min-width: 0; padding: 34px; }
.demo-window { min-height: 454px; overflow: hidden; border: 1px solid #d8dfd9; border-radius: 8px; background: #fff; box-shadow: 0 22px 54px rgba(36, 47, 39, 0.1); }
.demo-window-bar { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; min-height: 55px; border-bottom: 1px solid #e1e6e2; padding: 0 18px; background: #fafbfa; }
.demo-window-bar strong { color: #55605a; font-size: 13px; }
.demo-window-bar small { color: #7b857f; font-size: 10px; font-weight: 800; text-transform: uppercase; }
.mini-sunny { width: 23px; height: 23px; border-radius: 50%; background: #ffc83d; box-shadow: 0 0 0 4px #ffe7a0, 0 0 0 8px rgba(255, 244, 199, 0.65); }
.demo-screen { position: relative; min-height: 330px; overflow: hidden; padding: 28px; background: #f6f8f6; }
.demo-caption { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 16px; min-height: 68px; border-top: 1px solid #e1e6e2; padding: 12px 18px; background: #fff; }
.demo-caption span { border-radius: 4px; padding: 7px 9px; background: var(--sun-soft); color: #806112; font-size: 10px; font-weight: 900; }
.demo-caption p { margin: 0; color: #59645d; font-size: 13px; font-weight: 750; line-height: 1.4; }
.walkthrough-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.walkthrough-steps button { height: 7px; border: 0; border-radius: 4px; padding: 0; background: #dce3dd; cursor: pointer; }
.walkthrough-steps button.is-complete, .walkthrough-steps button[aria-current="step"] { background: var(--sun); }

.demo-chat { display: grid; align-content: center; gap: 15px; min-height: 274px; }
.demo-message { max-width: 82%; border-radius: 6px; padding: 14px 16px; color: #526059; font-size: 13px; line-height: 1.5; opacity: 0; transform: translateY(12px); animation: demo-enter 420ms ease forwards; }
.demo-message.user { justify-self: end; background: #e8f2fb; }
.demo-message.sunny { justify-self: start; border: 1px solid #e0e6e1; background: #fff; }
.demo-destination-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.demo-destination { min-height: 84px; border: 1px solid #dce3dd; border-radius: 6px; padding: 13px; background: #fff; opacity: 0; transform: translateY(12px); animation: demo-enter 420ms ease forwards; }
.demo-destination:nth-child(2) { animation-delay: 90ms; }
.demo-destination:nth-child(3) { animation-delay: 180ms; }
.demo-destination:nth-child(4) { animation-delay: 270ms; }
.demo-destination span { display: block; margin-bottom: 7px; color: #8c6a16; font-size: 9px; font-weight: 900; text-transform: uppercase; }
.demo-destination strong { color: #56615b; font-size: 12px; line-height: 1.35; }
.demo-confirmation { display: grid; place-items: center; min-height: 274px; text-align: center; }
.demo-check { display: grid; place-items: center; width: 62px; height: 62px; margin: 0 auto 18px; border-radius: 50%; background: var(--mint); color: #fff; font-size: 28px; font-weight: 900; animation: demo-pop 480ms cubic-bezier(.16,1,.3,1); }
.demo-confirmation strong { display: block; color: #4d5952; font-size: 20px; }
.demo-confirmation p { max-width: 360px; margin: 9px auto 0; color: #748078; font-size: 13px; line-height: 1.5; }

.demo-day { display: grid; grid-template-columns: 0.78fr 1.22fr; gap: 14px; min-height: 274px; }
.demo-day-request, .demo-day-plan { border: 1px solid #dce3dd; border-radius: 7px; padding: 17px; background: #fff; }
.demo-day-request span, .demo-day-plan > span { color: #926d12; font-size: 9px; font-weight: 900; text-transform: uppercase; }
.demo-day-request p { margin: 15px 0 0; color: #56615b; font-size: 13px; font-weight: 750; line-height: 1.5; }
.demo-timeline { display: grid; gap: 8px; margin-top: 14px; }
.demo-time { display: grid; grid-template-columns: 42px 1fr; align-items: center; gap: 9px; }
.demo-time small { color: #87918b; font-size: 9px; }
.demo-time strong { border-left: 4px solid var(--sky); border-radius: 4px; padding: 10px; background: var(--sky-soft); color: #58666e; font-size: 11px; }
.demo-time.focus strong { border-color: var(--sun); background: var(--sun-soft); }
.demo-time.reset strong { border-color: var(--mint); background: var(--mint-soft); }
.demo-time.is-new { animation: demo-slide 480ms cubic-bezier(.16,1,.3,1); }

.demo-share { display: grid; grid-template-columns: 1fr 0.82fr; gap: 14px; min-height: 274px; }
.demo-grocery-list, .demo-share-panel { border: 1px solid #dce3dd; border-radius: 7px; padding: 17px; background: #fff; }
.demo-grocery-list > span, .demo-share-panel > span { color: #926d12; font-size: 9px; font-weight: 900; text-transform: uppercase; }
.demo-grocery-list h4 { margin: 7px 0 16px; color: #4e5952; font-size: 18px; }
.demo-grocery-list p { margin: 0; padding: 8px 0; border-top: 1px solid #edf0ed; color: #657069; font-size: 12px; }
.demo-share-person { display: flex; align-items: center; gap: 10px; margin: 16px 0; color: #56615b; font-size: 12px; font-weight: 850; }
.demo-avatar { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--sky); color: #fff; font-size: 12px; font-weight: 900; }
.demo-scope { display: grid; gap: 8px; }
.demo-scope p { margin: 0; border-radius: 5px; padding: 10px; background: #eef5f0; color: #52625a; font-size: 11px; font-weight: 800; }
.demo-scope p.locked { background: #f2f3f2; color: #858e88; }
.demo-share-button { margin-top: 15px; border: 0; border-radius: 5px; padding: 10px 12px; background: #344039; color: #fff; font-size: 11px; font-weight: 850; }

.learn-ideas { position: relative; padding: 112px 0; }
.learn-ideas::before { content: ""; position: absolute; z-index: -1; inset: 0 calc(50% - 50vw); border-block: 1px solid var(--line); background: #f7f9f7; }
.idea-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.idea-card { position: relative; min-height: 352px; overflow: hidden; border: 1px solid #dce3dd; border-radius: 8px; padding: 28px; background: #fff; }
.idea-number { position: absolute; right: 20px; top: 17px; color: #dbe1dc; font-size: 42px; font-weight: 900; }
.idea-tag { margin-bottom: 24px; color: var(--sun-deep); font-size: 10px; font-weight: 900; text-transform: uppercase; }
.idea-card h3 { max-width: 290px; margin-bottom: 15px; color: #4b5650; font-size: 25px; line-height: 1.12; }
.idea-card > p:not(.idea-tag) { color: #657069; font-size: 14px; line-height: 1.6; }
.idea-card blockquote { position: absolute; inset: auto 28px 25px; margin: 0; border-left: 3px solid var(--accent); padding: 3px 0 3px 14px; color: #56615b; font-size: 12px; font-weight: 750; line-height: 1.5; }
.idea-project { --accent: var(--sun); }
.idea-routine { --accent: var(--mint); }
.idea-voice { --accent: var(--sky); }
.idea-research { --accent: var(--lilac); }
.idea-home { --accent: var(--coral); }
.idea-personal { --accent: #6f8f7b; }

.prompt-lab { display: grid; grid-template-columns: 0.7fr 1.3fr; gap: 80px; padding: 112px 0; }
.prompt-lab-copy { align-self: center; }
.prompt-lab h2, .learn-next h2 { margin-bottom: 18px; color: #49534d; font-size: 44px; line-height: 1.04; }
.prompt-lab-copy > p:last-child, .learn-next p { color: var(--ink-soft); font-size: 17px; line-height: 1.65; }
.prompt-list { display: grid; gap: 9px; }
.prompt-list button { display: grid; grid-template-columns: 94px 1fr auto; align-items: center; gap: 15px; min-height: 78px; border: 1px solid #dce3dd; border-radius: 7px; padding: 13px 16px; background: #fff; text-align: left; cursor: pointer; transition: border-color 160ms ease, background 160ms ease, transform 160ms ease; }
.prompt-list button:hover { border-color: #d3b45c; background: #fffdf5; transform: translateX(3px); }
.prompt-list span { color: #8a6813; font-size: 9px; font-weight: 900; text-transform: uppercase; }
.prompt-list strong { color: #56615b; font-size: 13px; line-height: 1.4; }
.prompt-list small { min-width: 74px; color: #7a857e; font-size: 10px; font-weight: 850; text-align: right; }

.learn-next { display: flex; align-items: center; justify-content: space-between; gap: 50px; margin-bottom: 92px; border-block: 1px solid var(--line); padding: 66px 0; }
.learn-next > div:first-child { max-width: 670px; }
.learn-next > div:first-child p:last-child { margin-bottom: 0; }
.learn-next-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }

@keyframes learn-sunny-drift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes thought-arrive { 0%, 100% { opacity: 0.72; } 50% { opacity: 1; transform: translateY(-5px) rotate(0); } }
@keyframes demo-enter { to { opacity: 1; transform: translateY(0); } }
@keyframes demo-pop { from { opacity: 0; transform: scale(0.65); } to { opacity: 1; transform: scale(1); } }
@keyframes demo-slide { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }

@media (max-width: 1020px) {
  .help-hero { grid-template-columns: minmax(0, 1fr) 180px; gap: 40px; }
  .help-hero h1 { font-size: 50px; }
  .help-tutorial-copy { grid-template-columns: 125px minmax(180px, 0.8fr) minmax(220px, 1.2fr); gap: 18px; }
  .help-tutorial-body { margin-left: 143px; }
  .learn-hero { grid-template-columns: 1fr 1fr; gap: 28px; }
  .learn-hero h1 { font-size: 56px; }
  .walkthrough-layout { grid-template-columns: 0.78fr 1.22fr; }
  .walkthrough-copy { padding: 34px; }
  .walkthrough-visual { padding: 24px; }
  .idea-grid { grid-template-columns: repeat(2, 1fr); }
  .prompt-lab { gap: 42px; }
}

@media (max-width: 760px) {
  .learn-page main > section { width: min(100% - 28px, 620px); }
  .help-ideas-panels { width: min(100% - 28px, 620px); }
  .help-hero { display: block; padding: 52px 0 48px; }
  .help-hero h1 { font-size: 42px; }
  .help-hero-copy > p:not(.eyebrow) { font-size: 16px; }
  .help-search { margin-top: 24px; }
  .help-search input { min-height: 58px; padding-left: 50px; font-size: 15px; }
  .help-search-icon { top: 18px; left: 19px; }
  .help-hero-sunny { display: none; }
  .help-mode-tabs button { min-height: 82px; padding: 16px 14px; }
  .help-mode-tabs button::after { inset-inline: 14px; }
  .help-mode-tabs strong { font-size: 15px; }
  .help-mode-tabs span { font-size: 10px; line-height: 1.35; }
  .help-tutorials { padding: 48px 0 76px; }
  .help-tutorial-heading { align-items: start; }
  .help-tutorial-heading h2 { font-size: 32px; }
  .help-tutorial-item summary { min-height: 120px; gap: 12px; padding: 18px 2px; }
  .help-tutorial-copy { display: block; }
  .help-tutorial-copy small, .help-tutorial-copy strong, .help-tutorial-copy > span { display: block; }
  .help-tutorial-copy small { margin-bottom: 6px; }
  .help-tutorial-copy strong { margin-bottom: 6px; font-size: 16px; }
  .help-tutorial-copy > span { font-size: 12px; }
  .help-tutorial-meta { min-width: 31px; }
  .help-tutorial-meta { font-size: 0; }
  .help-tutorial-body { margin-left: 0; padding: 0 8px 32px; }
  .learn-hero { grid-template-columns: 1fr; max-height: none; padding: 52px 0 70px; }
  .learn-hero h1 { font-size: 48px; }
  .learn-hero-copy > p:not(.eyebrow) { font-size: 17px; }
  .learn-hero-scene { min-height: 470px; }
  .learn-sunny { top: 38px; left: auto; right: 26px; width: 82px; height: 82px; box-shadow: 0 0 0 7px #ffe7a0, 0 0 0 18px rgba(255,244,199,0.68), 0 20px 42px rgba(159,113,9,0.16); }
  .thought-one { top: 34px; left: 2%; }
  .thought-two { top: 146px; right: 1%; }
  .thought-three { top: 202px; left: 0; }
  .thought-four { display: none; }
  .organized-list { inset: auto 0 0 7%; min-height: 250px; padding: 24px; }
  .learn-watch, .learn-ideas, .prompt-lab { padding: 78px 0; }
  .walkthrough-layout { grid-template-columns: 1fr; }
  .walkthrough-copy { border-right: 0; border-bottom: 1px solid #dce3dd; padding: 30px 24px; }
  .walkthrough-copy h3 { font-size: 30px; }
  .walkthrough-visual { padding: 14px; }
  .demo-window { min-height: 425px; }
  .demo-screen { min-height: 300px; padding: 16px; }
  .demo-day, .demo-share { grid-template-columns: 1fr; }
  .demo-day-request { display: none; }
  .demo-share { gap: 8px; }
  .demo-grocery-list, .demo-share-panel { padding: 13px; }
  .idea-grid { grid-template-columns: 1fr; }
  .idea-card { min-height: 330px; }
  .prompt-lab { grid-template-columns: 1fr; gap: 24px; }
  .prompt-lab h2, .learn-next h2 { font-size: 36px; }
  .prompt-list button { grid-template-columns: 76px 1fr; }
  .prompt-list small { grid-column: 2; text-align: left; }
  .learn-next { display: grid; margin-bottom: 60px; padding: 52px 0; }
  .learn-next-actions { justify-content: start; }
}

@media (max-width: 480px) {
  .help-hero h1 { font-size: 38px; }
  .help-popular { align-items: baseline; }
  .help-popular span { width: 100%; }
  .help-tutorial-heading { display: block; }
  .help-expand-button { margin-top: 15px; }
  .help-tutorial-body li { padding-left: 42px; }
  .learn-hero-actions, .learn-next-actions { display: grid; }
  .learn-hero-actions a, .learn-next-actions a { width: 100%; }
  .learn-hero h1 { font-size: 43px; }
  .walkthrough-tabs button { flex: 1 1 0; min-width: 0; min-height: 64px; padding-inline: 6px; font-size: 10px; line-height: 1.2; }
  .walkthrough-copy { padding-inline: 20px; }
  .walkthrough-copy blockquote { font-size: 13px; }
  .demo-destination-grid { grid-template-columns: 1fr; }
  .demo-destination { min-height: 61px; }
  .demo-caption { grid-template-columns: 1fr; gap: 6px; }
  .idea-card { padding: 24px; }
  .idea-card blockquote { inset-inline: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .help-hero-sunny > span, .learn-sunny, .thought-note, .demo-message, .demo-destination, .demo-check, .demo-time.is-new { animation: none !important; opacity: 1; transform: none; }
  .help-tutorial-meta i::before, .help-tutorial-meta i::after { transition: none; }
  .prompt-list button { transition: none; }
}