.home .content-section { margin-top: 76px; padding-top: 0; border-top: 0; }
.home .content-section>h2 { max-width: 24ch; font-size: clamp(32px, 3.5vw, 46px); margin-bottom: 30px; }
.home .content-section[aria-labelledby="find-the-answer-for-your-next-run"]>h2 { max-width: none; }
.home .task-grid { gap: 20px; }
.home .task-card {
  position: relative;
  --recipe-component-card-standard-backgroundcolor: #192733;
  border-color: #3c4c59;
  padding: 26px !important;
  transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}
.home .task-card:first-child {
  --recipe-component-card-standard-backgroundcolor: #30271e;
  border-color: #82623b;
}
.home .task-heading { display: grid; grid-template-columns: 48px 1fr; gap: 18px; align-items: center; margin-bottom: 18px; }
.home .task-icon-box {
  display: grid; place-items: center; width: 48px; height: 48px;
  color: #8ce4ef; border: 1px solid #456373; border-radius: 14px;
  background: #15222d; box-shadow: inset 0 2px 0 #ffffff09, 0 4px 0 #0d1721;
}
.home .task-card:first-child .task-icon-box { color: #f2bd4e; border-color: #80633d; background: #251e19; }
.home svg.task-icon { display: block; width: 25px; height: 25px; padding: 0; border: 0; border-radius: 0; background: none; fill: none; stroke: currentColor; stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; }
.home .task-card h3 { margin: 0; font-size: 26px; line-height: 1.18; max-width: 25ch; }
.home .task-card p { margin: 0; color: #bdc7d1; font-size: 15px; line-height: 1.75; }
.home .task-card a { font-weight: 700; color: #91e9f5; text-decoration-thickness: 1px; }
.home .task-card a:after, .home .character-card h3 a:after { content: ''; position: absolute; inset: 0; border-radius: 18px; }
.home .task-card:hover, .home .task-card:focus-within { border-color: #6fb4c7; transform: translateY(-3px); box-shadow: inset 0 2px 0 #ffffff10, 0 18px 38px #09070a65; }
.home .task-card:focus-within, .home .character-card:focus-within { outline: 3px solid #f2bd4e; outline-offset: 4px; }
.home .task-card a:focus-visible, .home .character-card h3 a:focus-visible { outline: none; }
.home .task-card:last-child { grid-column: 1 / -1; display: grid; grid-template-columns: .85fr 1.15fr; align-items: center; gap: 30px; background-image: linear-gradient(110deg, #26303b, #192733); }
.home .task-card:last-child .task-heading { margin: 0; }
.home .content-section[aria-labelledby="pick-a-character-guide"] {
  padding: 38px; border: 1px solid #354758; border-radius: 26px;
  background: radial-gradient(ellipse at 10% 0, #29415370, transparent 55%), #111c29;
  box-shadow: inset 0 1px 0 #ffffff0c, 0 24px 64px #09070a30;
}
.home .content-section[aria-labelledby="pick-a-character-guide"]>h2 { margin-bottom: 18px; }
.home .content-section[aria-labelledby="pick-a-character-guide"]>p { max-width: 92ch; font-size: 15px; color: #aebfce; margin-bottom: 30px; }
.home .character-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.home .character-card { position: relative; padding: 20px !important; --recipe-component-card-standard-backgroundcolor: #192733; border-color: #405365; transition: border-color 160ms ease, transform 160ms ease; }
.home .character-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.home .character-top h3 { margin: 0; font-size: 32px; }
.home .character-top h3 a { color: #f5f6f2; text-decoration: none; }
.home .character-art { flex: 0 0 120px; width: 120px; padding: 0; box-shadow: 0 8px 22px #060b1360; }
.home .character-media { display: block; width: 120px; height: auto; object-fit: contain; outline: 1px solid #526773; outline-offset: 3px; }
.home .character-card p { font-size: 14px; line-height: 1.75; color: #b8c6d2; margin: 0; }
.home .character-card:hover { border-color: #75b6c8; transform: translateY(-3px); }
.home .character-card:hover h3 a { color: #8cebfa; }
.home .character-art:has([hidden]) { display: none; }
.home .content-section[aria-labelledby="about-shape-of-dreams"] {
  display: grid; grid-template-columns: .8fr 1.6fr; gap: 60px; padding: 42px;
  background: radial-gradient(circle at 5% 0, #6849234f, transparent 62%), #221e21;
  border: 1px solid #6c5437; border-radius: 26px; color: #c7c3bd;
  box-shadow: inset 0 1px 0 #f2bd4e18;
}
.home .about-heading h2 { font-size: clamp(32px,3.3vw,44px); max-width: 11ch; margin: 18px 0 0; }
.home .about-icon { display: inline-grid; place-items: center; color: #f2bd4e; width: 48px; height: 48px; border: 1px solid #7b603d; border-radius: 14px; background: #33281e; }
.home .about-copy p { font-size: 15px; line-height: 1.85; max-width: none; }
.home .about-copy p:last-child { margin-bottom: 0; }
.home .content-section[aria-labelledby="shape-of-dreams-faq"] { display: grid; grid-template-columns: 270px 1fr; gap: 60px; align-items: start; }
.home .faq-heading { position: sticky; top: calc(var(--header) + 28px); }
.home .faq-heading h2 { max-width: 10ch; font-size: 44px; line-height: 1.12; margin: 18px 0 0; }
.home .faq-icon { width: 48px; height: 48px; display: grid; place-items: center; color: #8ce4ef; border: 1px solid #435665; background: #192733; border-radius: 14px; }
.home .faq-list { display: grid; gap: 14px; }
.home .faq-item { background: #1b1c26; border: 1px solid #383d4d; border-radius: 16px; padding: 24px 28px; box-shadow: inset 0 1px 0 #ffffff05; }
.home .faq-item h3 { font-size: 25px; margin: 0 0 14px; line-height: 1.25; }
.home .faq-item p { font-size: 15px; line-height: 1.8; color: #bcc2ce; margin: 0; }
.home .content-section[aria-labelledby="official-game-and-community-links"]>h2 { font-size: 32px; max-width: none; margin-bottom: 26px; }
.home .content-section[aria-labelledby="official-game-and-community-links"]>ul { max-width: none; list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; }
.home .resource-card { margin: 0; padding: 24px 20px; border-radius: 14px; background: #19212b; border: 1px solid #35404f; font-size: 14px; color: #aebcca; line-height: 1.8; }
.home .resource-icon { display: block; color: #f2bd4e; margin-bottom: 14px; }
.home .resource-card a { display: block; color: #d8ebf1; font-size: 17px; text-decoration: none; margin-bottom: 5px; line-height: 1.5; }
.home .resource-card a:hover { color: #8cebfa; text-decoration: underline; }
.home .sources { margin-top: 52px; padding-top: 32px; border-top: 1px solid #34404c; }
.home .sources>h2 { font-size: 25px; margin-bottom: 22px; }
.home .sources ul { list-style: none; padding-left: 0; font-size: 12px; max-width: none; column-gap: 48px; }
.home .sources li { padding-left: 15px; position: relative; margin-bottom: 9px; }
.home .sources li:before { content: ''; position: absolute; top: .8em; left: 0; width: 4px; height: 4px; border-radius: 50%; background: #77889a; }
.home .sources a { color: #a8b7c8; }
@media(max-width:1100px) {
  .home .character-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .home .content-section[aria-labelledby="pick-a-character-guide"] { padding: 28px; }
  .home .content-section[aria-labelledby="shape-of-dreams-faq"] { grid-template-columns: 210px 1fr; gap: 32px; }
  .home .faq-heading h2 { font-size: 36px; }
  .home .content-section[aria-labelledby="about-shape-of-dreams"] { gap: 30px; padding: 32px; }
}
@media(max-width:760px) {
  .home .task-heading { grid-template-columns: 42px 1fr; gap: 14px; }
  .home .task-icon-box { width: 42px; height: 42px; }
  .home .task-card { padding: 22px !important; }
  .home .task-card h3 { font-size: 23px; }
  .home .content-section[aria-labelledby="shape-of-dreams-faq"] { grid-template-columns: 1fr; gap: 26px; }
  .home .faq-heading { position: static; display: flex; align-items: center; gap: 18px; }
  .home .faq-heading h2 { max-width: none; margin: 0; font-size: 32px; }
  .home .faq-icon { flex: 0 0 48px; }
  .home .content-section[aria-labelledby="about-shape-of-dreams"] { grid-template-columns: 1fr; gap: 24px; }
  .home .about-heading { display: flex; align-items: center; gap: 18px; }
  .home .about-heading h2 { max-width: none; margin: 0; font-size: 32px; }
  .home .about-icon { flex: 0 0 48px; }
  .home .content-section[aria-labelledby="official-game-and-community-links"]>ul { grid-template-columns: 1fr; gap: 14px; }
  .home .resource-card { display: grid; grid-template-columns: 30px 1fr; gap: 18px; }
  .home .resource-icon { margin: 3px 0 0; }
}
@media(max-width:600px) {
  .home .content-section { margin-top: 52px; padding-top: 0; }
  .home .content-section>h2 { margin-bottom: 24px; font-size: 32px; }
  .home .task-grid { gap: 16px; }
  .home .task-card:last-child { display: block; grid-column: auto; }
  .home .task-card:last-child .task-heading { margin-bottom: 18px; }
  .home .content-section[aria-labelledby="pick-a-character-guide"] { padding: 24px 18px; border-radius: 20px; }
  .home .character-grid { grid-template-columns: 1fr; gap: 16px; }
  .home .character-card { padding: 20px !important; }
  .home .character-top h3 { font-size: 32px; }
  .home .character-art { flex-basis: 120px; width: 120px; }
  .home .content-section[aria-labelledby="about-shape-of-dreams"] { padding: 28px 24px; border-radius: 20px; }
  .home .about-heading { align-items: flex-start; }
  .home .faq-item { padding: 23px 22px; }
  .home .faq-item h3 { font-size: 23px; }
  .home .sources { padding-top: 28px; }
  .home .sources>h2 { font-size: 25px; }
}
@media(max-width:360px) {
  .home .character-top { flex-direction: column-reverse; align-items: flex-start; gap: 20px; }
  .home .character-art { flex-basis: auto; }
  .home .about-heading, .home .faq-heading { display: block; }
  .home .about-heading h2, .home .faq-heading h2 { margin-top: 18px; }
}
@media(prefers-reduced-motion:reduce) {
  .home .task-card:hover,.home .task-card:focus-within,.home .character-card:hover { transform: none; }
}