/*
 * Nook marketing site — shared styles.
 * Page layouts keep their design values inline (they are 1:1 with docs/marketing/new-business-page);
 * this file only holds what inline styles cannot express: hover states, media queries,
 * stateful controls, article typography and the cookie banner.
 */

html { scroll-behavior: smooth; }
body { margin: 0; background: #f7f1e8; font-family: Geist, system-ui, sans-serif; color: #3b302b; }
a { color: #8b5e3c; text-decoration: none; }
a:hover { color: #8b5e3c; text-decoration: underline; }
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }
button { font-family: inherit; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ---- Hover states (replace the design tool's `style-hover`) ---- */
.hv-card, .hv-lift, .hv-btn-primary, .hv-btn-secondary, .hv-link-dark { transition: background-color .15s ease, box-shadow .2s ease, transform .2s ease, color .15s ease; }
.hv-card:hover { box-shadow: 0 0 0 1px rgba(59, 48, 43, 0.1), 0 16px 34px rgba(59, 48, 43, 0.1) !important; transform: translateY(-3px); color: #3b302b !important; text-decoration: none !important; }
.hv-lift:hover { transform: translateY(-3px); color: #3b302b !important; text-decoration: none !important; }
.hv-btn-primary:hover { background: #f2ad00 !important; color: #2e2018 !important; text-decoration: none !important; }
.hv-btn-secondary:hover { background: #f2ebe0 !important; color: #3b302b !important; text-decoration: none !important; }
.hv-link-dark:hover { color: #3b302b !important; }
@media (prefers-reduced-motion: reduce) {
  .hv-card, .hv-lift, .hv-btn-primary, .hv-btn-secondary, .hv-link-dark { transition: none; }
  .hv-card:hover, .hv-lift:hover { transform: none; }
}

/* ---- Header ---- */
.nk-nav-desk { display: flex; }
.nk-bar-mob, .nk-menu-mob { display: none; }
@media (max-width: 760px) {
  .nk-nav-desk { display: none; }
  .nk-bar-mob { display: flex; }
  .nk-menu-mob[data-open="true"] { display: flex; }
}

/* ---- Pill-shaped toggle chips (tour tabs, device tabs) ---- */
.nk-chip { min-height: 44px; padding: 11px 18px 12px; border-radius: 999px; border: 1px solid #e5ddd2; background: transparent; cursor: pointer; font-family: Geist, system-ui, sans-serif; font-size: 15px; font-weight: 500; color: #7a6a5c; text-decoration: none; display: inline-flex; align-items: center; box-sizing: border-box; }
.nk-chip[aria-selected="true"], .nk-chip[aria-current="page"] { background: #fffdf9; border-color: rgba(59, 48, 43, 0.22); color: #3b302b; }
.nk-chip:hover { text-decoration: none; color: #3b302b; }

/* ---- Legal pages: sticky table of contents only when there is room beside the text ---- */
.legal-toc { position: static; }
@media (min-width: 900px) { .legal-toc { position: sticky; } }

/* ---- Demo launcher spinner ---- */
@keyframes nk-spin { to { transform: rotate(360deg); } }
[data-spin] { animation: nk-spin .9s linear infinite; }
@media (prefers-reduced-motion: reduce) { [data-spin] { animation: none; } }

/* ---- Blog article body (HTML rendered from markdown) ---- */
.nk-article { display: flex; flex-direction: column; gap: 22px; font-size: 18px; line-height: 1.7; color: #3b302b; }
.nk-article > * { margin: 0; }
.nk-article p { text-wrap: pretty; }
.nk-article h2 { margin: 24px 0 0; font-weight: 800; letter-spacing: -0.03em; color: #2e2018; font-size: clamp(26px, 3vw, 32px); line-height: 1.15; text-wrap: balance; }
.nk-article h3 { margin: 12px 0 0; font-weight: 800; letter-spacing: -0.03em; color: #2e2018; font-size: clamp(21px, 2.4vw, 24px); line-height: 1.2; }
.nk-article a { color: #8b5e3c; text-decoration: underline; text-underline-offset: 3px; }
.nk-article ul, .nk-article ol { padding: 0 0 0 22px; display: flex; flex-direction: column; gap: 10px; line-height: 1.6; }
.nk-article li { padding-left: 4px; }
.nk-article strong { color: #2e2018; font-weight: 600; }
.nk-article blockquote { padding: 18px 22px; background: #f2ebe0; border-radius: 22px; color: #3b302b; }
.nk-article blockquote > * { margin: 0; }
.nk-article img { max-width: 100%; height: auto; border-radius: 22px; box-shadow: 0 0 0 1px rgba(59, 48, 43, 0.06); }
.nk-article hr { border: 0; border-top: 1px solid #e5ddd2; width: 100%; }
.nk-article table { width: 100%; border-collapse: collapse; font-size: 16px; line-height: 1.5; background: #fffdf9; border-radius: 22px; box-shadow: 0 0 0 1px rgba(59, 48, 43, 0.06); display: block; overflow-x: auto; }
.nk-article th, .nk-article td { padding: 12px 16px; text-align: left; border-bottom: 1px solid #e5ddd2; }
.nk-article code { background: #ede5d8; padding: 2px 6px; border-radius: 6px; font-size: .9em; }
.nk-article pre { background: #2e2018; color: #f7f1e8; padding: 18px 20px; border-radius: 16px; overflow-x: auto; font-size: 15px; line-height: 1.55; }
.nk-article pre code { background: none; padding: 0; color: inherit; }

/* ---- Cookie banner ---- */
#cookie-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; padding: 16px; display: none; }
#cookie-banner[data-open="true"] { display: block; }
#cookie-banner .cookie-card { max-width: 760px; margin: 0 auto; background: #fffdf9; color: #3b302b; border-radius: 22px; padding: 20px 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px; box-shadow: 0 0 0 1px rgba(59, 48, 43, 0.06), 0 20px 50px rgba(59, 48, 43, 0.18); }
#cookie-banner p { margin: 0; flex: 1 1 280px; font-size: 14px; line-height: 1.55; color: #7a6a5c; }
#cookie-banner .cookie-actions { display: flex; gap: 10px; flex: none; }
#cookie-banner button { font-family: inherit; font-size: 13px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; padding: 13px 20px; border-radius: 999px; cursor: pointer; }
#cookie-decline { background: transparent; border: 1.5px solid #3b302b; color: #3b302b; }
#cookie-decline:hover { background: #f2ebe0; }
#cookie-accept { background: #ffb900; border: 1.5px solid #ffb900; color: #2e2018; }
#cookie-accept:hover { background: #f2ad00; border-color: #f2ad00; }

/* ---- Rows of decorative props/cats: shrink the images on narrow screens instead of overflowing the edges ---- */
.nk-props { max-width: 100%; }
.nk-props > img { min-width: 0; flex-shrink: 1; }