/* Shared footer and Gift Smarts. Deliberately scoped to these surfaces. */
.site-footer { padding: 56px 0 24px; background: #f8f6fc; }
.footer-intro { display: flex; align-items: center; gap: 30px; padding-bottom: 34px; border-bottom: 1px solid var(--line); }
.footer-intro .footer-brand { flex-shrink: 0; }
.footer-intro .footer-brand img { width: 166px; }
.footer-intro p { max-width: 290px; color: #5f566e; font-size: .95rem; }
.footer-start { margin-left: auto; font-weight: 650; color: #6330ae; }
.site-footer .footer-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 32px; padding-top: 32px; }
.footer-col h2 { margin: 0 0 14px; font-size: 1rem; font-weight: 650; letter-spacing: 0; }
.site-footer .footer-col { margin: 0; min-width: 0; }
.site-footer .footer-col a { font-size: .88rem; color: #5f566e; margin: 0; padding: 5px 0; line-height: 1.6; }
.site-footer a:hover { color: #6330ae; text-decoration: underline; text-underline-offset: 4px; }
.site-footer .footer-bottom { align-items: center; margin-top: 32px; color: #62596e; }
.footer-bottom > div { display: flex; gap: 24px; }
.site-footer .footer-bottom a { color: inherit; font-weight: 450; }
.guides-hub, .guide-detail { background: #fff; }
.guides-hub h1, .guides-hub h2, .guides-hub h3, .guide-detail h1, .guide-detail h2 { text-wrap: balance; letter-spacing: -.03em; }
.guides-hub p, .guide-detail p { text-wrap: pretty; }
.guide-label { display: block; color: #6835a0; font-size: .9rem; font-weight: 650; }
.guides-hero { padding: 120px 0 0; background: #fff; }
.guides-hero .breadcrumbs { margin-bottom: 28px; }
.hub-intro { display: grid; grid-template-columns: 1.35fr 1fr; gap: 48px; align-items: end; margin-bottom: 36px; }
.guides-hero h1 { margin-top: 12px; font-size: clamp(2.65rem, 4.5vw, 4.2rem); line-height: 1.06; letter-spacing: -.035em; }
.guides-hero h1 span { color: #a32d7c; }
.hub-intro > p { max-width: 390px; color: #62586f; padding-bottom: 5px; font-size: 1.05rem; }
.hub-feature { display: grid; grid-template-columns: 1.12fr 1fr; border-radius: 16px; overflow: hidden; background: #f3edfc; }
.hub-feature-art { min-height: 340px; }
.hub-feature-art img { width: 100%; height: 100%; object-fit: cover; }
.hub-feature-copy { padding: clamp(28px, 4vw, 56px); align-self: center; }
.hub-feature-copy h2 { margin: 14px 0; font-size: clamp(2rem, 3.2vw, 3.2rem); line-height: 1.08; }
.hub-feature-copy p { color: #5e526f; max-width: 34ch; }
.guide-read { display: inline-flex; align-items: center; gap: 24px; margin-top: 24px; color: #6731ae; font-size: .95rem; font-weight: 650; }
.guide-read > span { transition: transform 180ms ease-out; }
.hub-feature:hover .guide-read > span, .hub-story:hover .guide-read > span { transform: translate(3px, -3px); }
.hub-feature:hover h2, .hub-story:hover h3, .hub-resource-links a:hover h3 { color: #6731ae; }
.hub-jumps { display: flex; align-items: center; flex-wrap: wrap; gap: 16px 30px; padding: 26px 0; border-bottom: 1px solid var(--line); font-size: .9rem; }
.hub-jumps > span { color: #62586f; margin-right: auto; }
.hub-jumps a { color: #62319d; padding: 8px 0; font-weight: 550; }
.hub-library { padding: 68px 0; }
.hub-section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin-bottom: 32px; }
.hub-section-heading h2, .hub-resource-group h2 { font-size: clamp(1.8rem, 2.8vw, 2.5rem); line-height: 1.15; }
.hub-section-heading p, .hub-resource-group p { color: #62586f; }
.hub-stories { display: grid; grid-template-columns: 1fr 1fr; gap: 36px 48px; }
.hub-story { display: grid; grid-template-columns: 155px 1fr; gap: 24px; padding-top: 24px; border-top: 1px solid var(--line); align-items: start; }
.hub-story > img { width: 155px; height: 170px; object-fit: cover; border-radius: 12px; background: #f4effc; }
.story-topic { color: #6c427e; font-size: .82rem; }
.hub-story h3 { margin: 7px 0 8px; font-size: 1.45rem; line-height: 1.17; }
.hub-story p { font-size: .93rem; color: #62586f; }
.hub-story .guide-read { margin-top: 16px; }
.hub-resources { background: #fbf9fe; padding: 12px 0 56px; }
.hub-resource-group { display: grid; grid-template-columns: .85fr 1.4fr; gap: 72px; padding: 48px 0; border-bottom: 1px solid var(--line); scroll-margin-top: 96px; }
.hub-resource-group > div > p { margin-top: 12px; }
.hub-resource-links a { display: flex; gap: 24px; align-items: center; justify-content: space-between; padding: 20px 0; border-bottom: 1px solid var(--line); }
.hub-resource-links a:first-child { padding-top: 0; }
.hub-resource-links a:last-child { padding-bottom: 0; border: 0; }
.hub-resource-links h3 { font-size: 1.12rem; font-weight: 600; letter-spacing: -.015em; }
.hub-resource-links p { margin-top: 5px; font-size: .9rem; }
.hub-resource-links a > span { color: #6731ae; }
.hub-sister { display: flex; gap: 32px; align-items: center; justify-content: space-between; padding-top: 36px; }
.hub-sister h2 { font-size: 1.3rem; }
.hub-sister p { color: #62586f; font-size: .92rem; margin-top: 6px; }
.hub-sister > a { color: #6731ae; font-weight: 600; }
.guide-detail .guide-page-hero { padding: 116px 0 48px; background: #f8f5fc; border-bottom: 1px solid var(--line); }
.guide-detail .guide-hero-inner { max-width: 1320px; display: grid; grid-template-columns: 1.2fr .85fr; align-items: center; gap: clamp(32px, 5vw, 72px); }
.guide-detail .breadcrumbs { flex-wrap: wrap; row-gap: 6px; font-size: .8rem; margin-bottom: 28px; }
.guide-detail .guide-hero-copy > .guide-label { margin-top: 0; font-size: .87rem; color: #6835a0; }
.guide-detail .guide-page-hero h1 { font-size: clamp(2.35rem, 3.75vw, 3.7rem); line-height: 1.08; margin-top: 14px; letter-spacing: -.035em; }
.guide-detail .guide-page-hero h1 span { color: #a32d7c; }
.guide-detail .guide-deck { margin-top: 20px; font-size: 1.1rem; color: #5e526f; max-width: 48ch; line-height: 1.6; }
.guide-meta { display: flex; flex-wrap: wrap; gap: 10px 20px; font-size: .8rem; color: #62586f; margin-top: 24px; }
.guide-hero-art { margin: 0; }
.guide-hero-art img { width: 100%; aspect-ratio: 1.3; object-fit: cover; border-radius: 16px; background: #f0e8fc; }
.guide-hero-art figcaption { padding-top: 12px; font-size: .82rem; color: #62586f; max-width: 48ch; }
.guide-detail .guide-article { padding: 56px 0 80px; }
.guide-detail .guide-layout { grid-template-columns: minmax(0, 760px) minmax(240px, 290px); gap: clamp(40px, 6vw, 90px); justify-content: space-between; }
.guide-prose { min-width: 0; font-size: 1.08rem; }
.guide-detail .guide-prose section { padding-bottom: 0; margin-bottom: 44px; border: 0; }
.guide-detail .guide-prose h2 { font-size: clamp(1.6rem, 2.2vw, 2.1rem); line-height: 1.18; letter-spacing: -.025em; scroll-margin-top: 105px; }
.guide-detail .guide-prose h3 { font-size: 1.2rem; line-height: 1.3; margin-top: 24px; }
.guide-detail .guide-prose p, .guide-detail .guide-prose li { line-height: 1.78; color: #554c60; max-width: 70ch; }
.guide-answer { padding: 24px 28px; background: #f1eafa; border-radius: 12px; margin-bottom: 44px; }
.guide-answer > strong { font-size: .9rem; color: #603797; }
.guide-answer p { margin-top: 8px; }
.guide-aside { display: flex; flex-direction: column; gap: 24px; position: static; padding: 0 4px 8px; }
.guide-hero-art img[src$="lego-porsche.webp"] { object-fit: contain; padding: 16px; }
.guide-toc h2 { font-size: .95rem; font-weight: 650; margin-bottom: 12px; }
.guide-toc a { display: block; padding: 7px 0; font-size: .86rem; line-height: 1.45; color: #62586f; }
.guide-toc a:hover, .guide-toc a:focus-visible { color: #6835a0; text-decoration: underline; text-underline-offset: 3px; }
.guide-detail .guide-takeaway { border: 0; border-radius: 12px; background: #f6f2fa; padding: 22px; }
.takeaway-label { color: #6835a0; font-size: .8rem; font-weight: 550; }
.guide-detail .guide-takeaway strong { font-size: 1.05rem; line-height: 1.4; }
.guide-detail .guide-takeaway p { color: #62586f; line-height: 1.65; }
.guide-try { display: flex; justify-content: space-between; gap: 12px; padding: 14px 18px; border-radius: 8px; background: #6330ae; color: white; font-size: .9rem; font-weight: 550; }
.guide-detail .guide-next { margin: 0; font-size: .9rem; }
.guide-detail .guide-callout, .guide-detail .question-quotes p { border: 0; border-radius: 12px; padding: 22px 24px; background: #fff0f6; }
.guide-detail .copyable-guide-prompt { padding: 26px; border-radius: 12px; background: #f7f3fc; border-color: #d9c7ee; }
.guide-detail .copyable-guide-prompt .copy-button { margin-top: 20px; }
.guide-detail .porsche-guide { border-radius: 12px; background: #f5effa; }
.guide-detail .porsche-guide .annotation { position: static; grid-column: 1 / -1; text-align: center; }
.guide-detail .timing-steps { grid-template-columns: 1fr; gap: 6px; }
.guide-detail .timing-steps > b { transform: rotate(90deg); justify-self: center; }
.guide-detail .timing-steps > div { border: 0; background: #f5effb; border-radius: 8px; padding: 16px 20px; }
.guide-detail .guide-example-row { align-items: stretch; }
.guide-detail .guide-example-row > b { align-self: center; }
.guide-detail .guide-example-row > div { border-radius: 12px; }
.guide-detail a:focus-visible, .guides-hub a:focus-visible, .site-footer a:focus-visible { outline: 3px solid #713dc4; outline-offset: 5px; }
@media (max-width: 1000px) {
  .hub-intro { grid-template-columns: 1fr; gap: 18px; }
  .hub-intro > p { max-width: 55ch; }
  .hub-stories { gap: 28px; }
  .hub-story { grid-template-columns: 110px 1fr; gap: 18px; }
  .hub-story > img { width: 110px; height: 140px; }
  .guide-detail .guide-layout { grid-template-columns: minmax(0, 1fr) 240px; gap: 32px; }
  .guide-detail .guide-hero-inner { gap: 28px; grid-template-columns: 1.2fr .8fr; }
  .footer-intro { flex-wrap: wrap; }
  .footer-intro p { flex: 1; }
}
@media (max-width: 760px) {
  .guides-hub .wrap, .guide-detail .wrap { width: calc(100% - 36px); }
  .guides-hero { padding-top: 104px; }
  .guides-hero h1 { font-size: clamp(2.4rem, 8.8vw, 3.6rem); }
  .hub-feature { grid-template-columns: 1fr; }
  .hub-feature-art { min-height: 0; }
  .hub-feature-art img { aspect-ratio: 1.75; }
  .hub-feature-copy { padding: 28px; }
  .hub-feature-copy h2 { font-size: 2.3rem; }
  .hub-jumps { gap: 8px 22px; }
  .hub-jumps > span { flex-basis: 100%; }
  .hub-library { padding: 44px 0; }
  .hub-section-heading { display: block; }
  .hub-section-heading p { margin-top: 10px; }
  .hub-stories { grid-template-columns: 1fr; }
  .hub-story { grid-template-columns: 100px minmax(0, 1fr); gap: 18px; }
  .hub-story > img { width: 100px; height: 125px; }
  .hub-story h3 { font-size: 1.3rem; }
  .hub-story p { font-size: .88rem; }
  .hub-resource-group { grid-template-columns: 1fr; gap: 28px; padding: 36px 0; }
  .hub-sister { display: grid; gap: 18px; }
  .guide-detail .guide-page-hero { padding: 102px 0 32px; }
  .guide-detail .guide-hero-inner { grid-template-columns: 1fr; gap: 28px; }
  .guide-detail .guide-page-hero h1 { font-size: clamp(2.25rem, 9vw, 3.3rem); }
  .guide-hero-art img { aspect-ratio: 1.9; }
  .guide-detail .guide-layout { display: flex; flex-direction: column; gap: 30px; }
  .guide-detail .guide-aside { position: static; max-height: none; overflow: visible; width: 100%; order: -1; display: block; padding: 0; }
  .guide-toc { padding: 18px 22px; border: 1px solid var(--line); border-radius: 12px; }
  .guide-toc a { padding: 8px 0; }
  .guide-detail .guide-aside .guide-takeaway, .guide-detail .guide-aside .guide-next { display: none; }
  .guide-try { margin-top: 16px; }
  .guide-detail .guide-article { padding-top: 28px; }
  .guide-prose { font-size: 1rem; width: 100%; }
  .guide-answer { padding: 22px; margin-bottom: 36px; }
  .guide-detail .guide-example-row { grid-template-columns: 1fr; }
  .guide-example-row > b { justify-self: center; }
  .guide-detail .copyable-guide-prompt { padding: 20px; }
  .site-footer .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 24px; }
  .footer-intro { display: grid; gap: 16px; }
  .footer-start { margin: 0; }
  .site-footer .footer-bottom { display: flex; flex-wrap: wrap; gap: 16px 24px; }
  .footer-bottom > span:nth-child(2) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .guide-read > span { transition: none; }
  .hub-feature:hover .guide-read > span, .hub-story:hover .guide-read > span { transform: none; }
}