/* HookBook identity, with quieter components and a comfortable reading rhythm. */
.skip-link {z-index: 20}
.site-header {
  position: absolute;
  inset: 20px 24px auto;
  z-index: 10;
  color: var(--footer);
}
.nav-container {
  max-width: 1184px;
  margin: auto;
  padding: 12px 24px;
  min-height: 72px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 28px;
  border: 1px solid #ffffff70;
  border-radius: 40px;
  background: #f9f8fdf5;
  box-shadow: 0 8px 32px #24213c0a;
}
.site-header .wordmark {
  width: fit-content;
  margin: 0;
  font-size: 16px;
  letter-spacing: 3px;
  text-decoration: none;
  white-space: nowrap;
}
.desktop-nav {display: flex; align-items: center; gap: 28px}
.desktop-nav a {
  padding: 11px 0;
  color: #514d68;
  font: 14px/22px var(--body);
  text-decoration: none;
}
.desktop-nav a:hover, .desktop-nav a[aria-current=page] {
  color: var(--footer);
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 1px;
}
.nav-download {
  display: flex;
  justify-self: end;
  align-items: center;
  min-height: 44px;
  border-radius: 9px;
}
.nav-download img {height: 42px; width: auto}
.nav-download:hover {opacity: .85}
.mobile-menu {display: none}
.site-header a:focus-visible, .site-header summary:focus-visible {
  outline: 3px solid var(--claim);
  outline-offset: 5px;
}

/* Homepage glass blends into the purple hero; opaque purple is the fallback. */
body:not(.inner-page) .site-header {color: #fff}
body:not(.inner-page) .nav-container {
  background: #4d496f;
  border-color: #ffffff40;
  box-shadow: 0 8px 32px #24213c18;
}
body:not(.inner-page) .desktop-nav a {color: #fff}
body:not(.inner-page) .site-header .wordmark:focus-visible,
body:not(.inner-page) .desktop-nav a:focus-visible,
body:not(.inner-page) .mobile-menu summary:focus-visible {outline-color: #fff}
@supports ((backdrop-filter: blur(16px)) or (-webkit-backdrop-filter: blur(16px))) {
  body:not(.inner-page) .nav-container {
    background: rgb(54 51 88 / 56%);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
  }
}
@media (prefers-reduced-transparency: reduce) {
  body:not(.inner-page) .nav-container {
    background: #4d496f;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* Keep the homepage composition; use a shared type scale across every route. */
#features, .reading-block, .faq-group {scroll-margin-top: 32px}
.reading-section {background: var(--footer); color: #fff; padding: 80px 32px 64px}
.eyebrow, .reading-category {
  font: 600 12px/1.5 var(--body);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.reading-section > .container > h2 {
  font: 700 36px/1.2 var(--display);
  margin: 12px 0 36px;
}
.reading-section .eyebrow {color: var(--muted); margin: 0}
.reading-links {display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 40px}
.reading-link {display: block; border-top: 1px solid #ffffff30; padding: 24px 0 4px; text-decoration: none}
.reading-link h3 {font: 700 24px/1.25 var(--display); margin: 10px 0 14px}
.reading-link p {font: 16px/1.7 var(--body); color: #e5e2ef; margin: 0 0 24px}
.reading-category {color: #d8d3ec}
.text-link {font: 14px/1.6 var(--body); text-decoration: underline; text-underline-offset: 5px}
.reading-link:hover .text-link {text-decoration-thickness: 2px}
.press {padding-block: 48px 72px}

/* Editorial pages: one calm column instead of a patterned hero and sidebar. */
.inner-page {background: #f9f8fd; color: #343144; font: 17px/1.7 var(--body)}
.inner-page main {padding-top: 132px}
.inner-page .nav-container {background: #fff9; border-color: #dedbe890}
.inner-page a:focus-visible, .inner-page summary:focus-visible {
  outline: 3px solid var(--claim);
  outline-offset: 5px;
}
.inner-page .footer a:focus-visible {outline-color: #fff}
.page-container {max-width: 744px; margin: auto; padding-inline: 32px}
.page-hero {padding: 30px 0 0; color: var(--footer)}
.breadcrumbs {font: 13px/1.6 var(--body); color: #68637c; margin: 0 0 38px}
.breadcrumbs ol {display: flex; flex-wrap: wrap; gap: 12px; margin: 0; padding: 0; list-style: none}
.breadcrumbs li + li {border-left: 1px solid #d1cde0; padding-left: 12px}
.breadcrumbs a {text-decoration: none}
.breadcrumbs a:hover {text-decoration: underline}
.page-hero .eyebrow {color: #625ba3; margin-bottom: 16px}
.page-hero h1 {font: 700 48px/1.12 var(--display); letter-spacing: -.03em; margin: 0 0 24px; max-width: 680px; text-wrap: balance}
.page-dek {font: 19px/1.65 var(--body); color: #575267; margin: 0; max-width: 680px}
.hero-editorial {font: 14px/1.65 var(--body); color: #6b657b; margin: 22px 0 0; max-width: 680px}
.article-layout {max-width: 744px; padding-block: 32px 64px}
.contents {font: 14px/1.65 var(--body); margin: 0 0 46px}
.contents details {border-block: 1px solid #dedbe8; padding: 0}
.contents summary {cursor: pointer; color: #615a7c; font-size: 14px; min-height: 48px; padding: 13px 0}
.contents summary::marker {font-size: 10px}
.contents ol {margin: 0 0 20px; padding: 0; list-style: none; columns: 2; column-gap: 32px}
.contents li {break-inside: avoid; margin: 0}
.contents a {display: block; padding: 6px 0; color: #59516f; text-decoration: none}
.contents a:hover {text-decoration: underline}
.reading-body {min-width: 0; font: 18px/1.7 var(--body)}
.reading-body p {margin: 0 0 24px}
.reading-body h2 {font: 700 28px/1.25 var(--display); color: #454071; letter-spacing: -.3px; margin: 0 0 18px}
.reading-body h3 {font: 700 21px/1.4 var(--display); color: #454071; margin: 32px 0 14px}
.reading-block {padding: 0; margin: 0 0 56px}
.reading-body a, .faq-layout a, .legal-content a, .not-found a {color: #504685}
.reading-body ul {list-style: disc; padding-left: 24px; margin: 24px 0}
.reading-body li {padding-left: 4px; margin-bottom: 12px}
.entry-list {background: none; border: 0; border-radius: 0}
.reading-body .source-links {font: 14px/1.65 var(--body); color: #716b82; margin: -8px 0 24px}
.source-links a {color: #625a7e; text-decoration-color: #b4adce; text-underline-offset: 3px}
.reading-body .contextual-link {font: 16px/1.7 var(--body); margin-top: 24px}
.question-prompts {border-left: 2px solid #c6bedf; padding: 0 0 0 22px; margin: 32px 0}
.question-prompts h3 {font-size: 17px; margin: 0 0 12px}
.question-prompts ul {margin: 0}
.article-question {margin-top: 28px}
.care-note {border-left: 3px solid #985472; padding: 0 0 0 24px; margin: 0 0 56px}
.care-note .eyebrow {color: #754257; margin-bottom: 12px}
.care-note h2 {font-size: 23px; color: #613a50; margin-bottom: 18px}
.care-note > p:not(.eyebrow):not(.source-links) {font-size: 16px; line-height: 1.7}
.care-note .source-links {margin-bottom: 0}
.references {margin-top: 72px}
.references h2 {font-size: 24px}
.references ul {font-size: 14px; line-height: 1.7}
.references p {font-size: 15px}
.article-download {border-top: 1px solid #dedbe8; padding-top: 32px; margin-top: 56px}
.article-download h2 {font-size: 26px; margin-bottom: 12px}
.article-download p {font-size: 16px; margin-bottom: 24px}
.article-related {background: #f9f8fd; color: var(--footer); padding: 0 32px 80px}
.article-related > .container {max-width: 680px; border-top: 1px solid #dedbe8; padding-top: 36px}
.article-related > .container > h2 {font-size: 24px; margin: 0 0 24px}
.article-related .reading-links {grid-template-columns: repeat(2,minmax(0,1fr)); gap: 40px}
.article-related .reading-link {border: 0; padding: 0}
.article-related .reading-category {display: none}
.article-related .reading-link h3 {font-size: 21px; margin-top: 0}
.article-related .reading-link p {font-size: 15px; color: #686078; margin-bottom: 16px}
.article-related .text-link {color: #504685}

/* FAQ disclosures are a continuous list, without a stack of card outlines. */
.faq-layout {padding-block: 38px 80px}
.faq-sections {display: flex; flex-wrap: wrap; gap: 8px 26px; border-bottom: 1px solid #dedbe8; padding: 0 0 28px; margin-bottom: 48px}
.faq-sections a {font: 14px/1.6 var(--body); padding: 6px 0; text-decoration: none}
.faq-sections a:hover {text-decoration: underline}
.faq-group {margin: 0 0 54px}
.faq-group h2 {font: 700 26px/1.3 var(--display); color: #454071; margin: 0 0 18px}
.faq-item {border-bottom: 1px solid #dedbe8; margin: 0; padding: 0}
.faq-item summary {cursor: pointer; font: 600 18px/1.5 var(--body); letter-spacing: 0; color: #454071; padding: 23px 0; min-height: 64px}
.faq-item summary::marker {font-size: 11px; color: #8d86a5}
.faq-item summary:hover {color: #625ba3}
.faq-item > div {padding: 0 0 12px 18px}
.faq-item p {font: 17px/1.7 var(--body); margin: 0 0 20px}
.faq-item .contextual-link {font-size: 15px}
.faq-links {list-style: none; margin: 0 0 20px}
.faq-links li {font-size: 15px; margin-bottom: 10px}

/* Privacy promise and policy use the same readable, local presentation. */
.legal-heading {padding: 30px 0 0; color: #68637c}
.legal-heading .breadcrumbs {margin: 0}
.legal-content {max-width: 744px; margin: auto; padding: 48px 32px 80px; font: 18px/1.7 var(--body); overflow-wrap: anywhere}
.legal-content h1 {font: 700 48px/1.12 var(--display); letter-spacing: -.03em; color: #454071; margin: 0 0 28px}
.legal-content h2 {font: 700 28px/1.25 var(--display); color: #454071; margin: 48px 0 22px}
.legal-content h3 {font: 700 22px/1.4 var(--display); color: #454071; margin: 32px 0 16px}
.legal-content h4 {font: 700 18px/1.4 var(--display); margin: 28px 0 14px}
.legal-content ul {list-style: disc; padding-left: 24px}
.legal-content li {margin-bottom: 16px; padding-left: 4px}
.legal-content p {margin: 0 0 24px}
.not-found {padding-bottom: 96px; min-height: 65vh}
.not-found h1 {font: 700 44px/1.2 var(--display); color: #454071}

/* Footer has distinct groups and a vertical brand/download lockup. */
.footer {font: 14px/1.6 var(--body)}
.footer-inner.container {max-width: 1184px; padding: 56px 32px 48px; grid-template-columns: 1fr 1fr; gap: 60px}
.footer-download {display: flex; flex-direction: column; align-items: flex-start; gap: 24px}
.footer .wordmark {font-size: 17px; letter-spacing: 4px; text-decoration: none}
.footer-download .app-store {margin: 0}
.footer nav {display: grid; grid-template-columns: 1fr 1fr; gap: 40px}
.footer-group h2 {font: 600 14px/1.5 var(--body); letter-spacing: 0; color: #fff; margin: 0 0 14px}
.footer nav a {padding-block: 6px; min-height: 34px; font-size: 14px; line-height: 22px}
.footer nav .support-link {margin-top: 8px}
.copyright {padding: 0 32px 32px}
.copyright .container {max-width: 1120px; border-top: 1px solid #ffffff20; padding-top: 24px}
.product-note {font: 13px/1.65 var(--body); max-width: 660px; margin: 12px 0 0; color: var(--muted)}
summary:focus-visible {outline: 3px solid var(--claim); outline-offset: 5px}

@media (max-width: 991px) {
  .site-header {inset: 16px 20px auto}
  .nav-container {padding-inline: 20px; gap: 20px}
  .desktop-nav {gap: 18px}
  .site-header .wordmark {font-size: 14px; letter-spacing: 2px}
  .nav-download img {height: 38px}
  .page-hero h1 {font-size: 44px}
  .reading-links {gap: 28px}
}
@media (max-width: 767px) {
  .site-header {inset: 12px 16px auto}
  .nav-container {display: flex; min-height: 64px; padding: 8px 16px; gap: 14px; border-radius: 32px}
  .site-header .wordmark {margin-right: auto}
  .desktop-nav {display: none}
  .nav-download {display: none}
  .mobile-menu {display: block; position: relative; flex: none}
  .mobile-menu summary {font: 14px/22px var(--body); min-height: 44px; min-width: 44px; padding: 11px 0; cursor: pointer; list-style: none}
  .mobile-menu summary::-webkit-details-marker {display: none}
  .mobile-menu:not([open]) nav {display: none}
  .mobile-menu nav {position: absolute; top: calc(100% + 12px); right: 0; width: min(280px, calc(100vw - 64px)); max-height: calc(100dvh - 108px); overflow-y: auto; padding: 18px 24px; background: #f9f8fd; border: 1px solid #dedbe8; border-radius: 16px; box-shadow: 0 18px 40px #24213c1a; display: grid; gap: 8px; color: var(--footer)}
  .mobile-menu nav a {font: 16px/24px var(--body); padding: 11px 0; text-decoration: none}
  .mobile-menu nav .app-store {width: fit-content; min-height: 50px; margin: 8px 0 4px; padding: 0}
  .mobile-menu nav .app-store img {width: 150px; height: 50px}
  .inner-page main {padding-top: 102px}
  .page-container {padding-inline: 24px}
  .page-hero {padding-top: 24px}
  .breadcrumbs {margin-bottom: 30px}
  .page-hero h1 {font-size: 38px; line-height: 1.15; letter-spacing: -.025em; margin-bottom: 24px}
  .page-dek {font-size: 18px; line-height: 1.65}
  .hero-editorial {font-size: 13px; line-height: 1.65; margin-top: 18px}
  .article-layout {padding-block: 26px 48px}
  .contents {margin-bottom: 34px}
  .reading-body {font-size: 17px; line-height: 1.7}
  .reading-body h2 {font-size: 26px}
  .reading-block {margin-bottom: 44px}
  .care-note {padding-left: 20px; margin-bottom: 44px}
  .care-note h2 {font-size: 22px}
  .reading-section {padding: 52px 24px}
  .reading-section > .container > h2 {font-size: 29px}
  .reading-links {grid-template-columns: 1fr; gap: 24px}
  .reading-link {padding-top: 22px}
  .reading-link p {max-width: 500px; margin-bottom: 18px}
  .article-related {padding: 0 24px 56px}
  .article-related .reading-links {grid-template-columns: 1fr; gap: 32px}
  .article-related > .container > h2 {font-size: 24px}
  .faq-layout {padding-top: 30px; padding-bottom: 56px}
  .faq-sections {margin-bottom: 36px; padding-bottom: 24px; gap: 4px 20px}
  .faq-group {margin-bottom: 42px}
  .faq-group h2 {font-size: 24px}
  .faq-item summary {font-size: 17px; padding-block: 21px}
  .faq-item p {font-size: 16px}
  .legal-content {padding: 36px 24px 56px; font-size: 17px}
  .legal-content h1 {font-size: 38px}
  .legal-content h2 {font-size: 26px}
  .footer-inner.container {grid-template-columns: 1fr; padding: 48px 24px 36px; gap: 40px; text-align: left}
  .footer-download {align-items: flex-start}
  .footer nav {gap: 24px}
  .footer nav a {margin: 0}
  .copyright {text-align: left; padding-inline: 24px}
  .product-note {margin-inline: 0}
}
@media (max-width: 479px) {
  .site-header {inset-inline: 12px}
  .nav-container {padding-inline: 14px; gap: 12px}
  .site-header .wordmark {font-size: 14px; letter-spacing: 2px}
  .page-hero h1 {font-size: 36px}
  .contents ol {columns: 1}
  .legal-content h1 {font-size: 36px}
  .footer nav {grid-template-columns: 1fr 1fr; gap: 20px}
}

/* Follow the device appearance without changing the original hero artwork. */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --feature: #343653;
    --claim: #4b447d;
    --footer: #242137;
    --muted: #d0ccdf;
  }
  .free-claim {background: #2d2a45}
  .inner-page {background: #191724; color: #e4e0ed}
  .inner-page .nav-container {
    background: #252232f5;
    border-color: #454052;
    box-shadow: 0 8px 32px #0003;
  }
  .inner-page .site-header, .inner-page .desktop-nav a,
  .inner-page .desktop-nav a:hover, .inner-page .desktop-nav a[aria-current=page],
  .page-hero, .reading-body h2, .reading-body h3,
  .faq-group h2, .faq-item summary,
  .legal-content h1, .legal-content h2, .legal-content h3,
  .not-found h1, .article-related {color: #ddd5ff}
  .breadcrumbs, .legal-heading, .page-dek, .hero-editorial,
  .reading-body .source-links, .article-related .reading-link p {color: #bdb6cc}
  .page-hero .eyebrow, .contents summary, .contents a,
  .reading-body a, .faq-layout a, .legal-content a, .not-found a,
  .source-links a, .article-related .text-link,
  .faq-item summary:hover {color: #c4b6ff}
  .contents details, .article-download, .article-related > .container,
  .faq-sections, .faq-item, .breadcrumbs li + li {border-color: #454052}
  .question-prompts {border-color: #8f80b7}
  .care-note {border-color: #bc86a1}
  .care-note .eyebrow, .care-note h2 {color: #e7b5ce}
  .article-related {background: #191724}
  .mobile-menu nav {
    background: #252232;
    border-color: #454052;
    color: #ddd5ff;
    box-shadow: 0 18px 40px #0005;
  }
  .inner-page a:focus-visible, .inner-page summary:focus-visible {
    outline-color: #c4b6ff;
  }
  .skip-link {background: #ddd5ff; color: #242137}
}

/* Product context and real screenshot figures extend the existing composition. */
.journal-figure {margin: 32px 0; text-align: center}
.journal-figure img {width: 230px; max-width: 100%; height: auto}
.journal-figure figcaption {font: 14px/1.65 var(--body); color: #6b657b; max-width: 520px; margin: 20px auto 0; text-align: left}
@media (prefers-color-scheme: dark) {
  .journal-figure figcaption {color: #bdb6cc}
}

/* Attributed review excerpts use the same quiet typography as the reading links. */
.testimonials {background: #403d65; color: #fff; padding: 72px 32px}
.testimonials h2 {font: 700 32px/1.25 var(--display); margin: 0 0 12px}
.testimonials-intro {font: 16px/1.7 var(--body); color: var(--muted); margin: 0 0 32px}
.testimonial-grid {display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 36px}
.testimonial {min-width: 0; margin: 0; padding-top: 20px; border-top: 1px solid #ffffff30}
.testimonial-topic {font: 600 14px/1.6 var(--body); color: var(--muted); margin: 0 0 16px}
.testimonial blockquote {margin: 0 0 24px}
.testimonial blockquote p {font: italic 22px/1.5 var(--body); margin: 0; text-wrap: pretty}
.testimonial figcaption {display: grid; gap: 6px; font: 14px/1.6 var(--body); color: var(--muted)}
.testimonial-author {color: #fff; overflow-wrap: anywhere}
.testimonials-more {display: inline-block; font: 16px/1.6 var(--body); margin-top: 36px; padding-block: 8px}
@media (max-width: 767px) {
  .testimonials {padding: 48px 24px}
  .testimonials h2 {font-size: 28px}
  .testimonial-grid {grid-template-columns: 1fr; gap: 32px}
  .testimonial blockquote p {font-size: 21px}
}

@media (prefers-color-scheme: dark) {
  .testimonials {background: #2d2a45}
}

/* The date range is visible text; the owner confirmed the historical ranking. */
.press {align-items: flex-start; padding-inline: 24px}
.press-item {flex: 1; max-width: 280px; min-width: 0; margin: 0; text-align: center}
.press-item > img {height: 132px; object-fit: contain; vertical-align: top}
.press-caption {display: grid; justify-items: center; gap: 4px; font: 11px/1.5 var(--body); margin-top: 12px}
.press-period {color: var(--muted)}
@media (max-width: 479px) {
  .press {gap: 24px}
  .press-item > img {height: 88px}
}