@font-face {
  font-family: "Familjen Grotesk";
  src: url("/assets/fonts/familjen-grotesk-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

@font-face {
  font-family: "Public Sans";
  src: url("/assets/fonts/public-sans-latin.woff2") format("woff2");
  font-weight: 300 900;
  font-display: swap;
}

:root {
  font-family: "Public Sans", sans-serif;
  color: oklch(0.21 0.025 252);
  background: oklch(0.965 0.012 82);
  --paper: oklch(0.965 0.012 82);
  --bright: oklch(0.985 0.007 82);
  --ink: oklch(0.21 0.025 252);
  --muted: oklch(0.43 0.025 252);
  --line: oklch(0.82 0.02 82);
  --blue: oklch(0.45 0.19 250);
  --blue-deep: oklch(0.31 0.15 255);
  --cyan: oklch(0.78 0.145 195);
  --coral: oklch(0.7 0.19 35);
  --coral-light: oklch(0.9 0.065 38);
  --yellow: oklch(0.85 0.16 85);
  --yellow-light: oklch(0.94 0.065 85);
  --light-ink: oklch(0.97 0.01 85);
  --display: "Familjen Grotesk", sans-serif;
  --content: min(88vw, 1160px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; overflow-x: clip; background: var(--paper); -webkit-font-smoothing: antialiased; }
img { display: block; width: auto; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
p, h1, h2, h3 { margin-top: 0; }
h1, h2, h3, strong { font-family: var(--display); }
p { text-wrap: pretty; }
:focus-visible { outline: 3px solid var(--coral); outline-offset: 4px; }

.skip-link { position: fixed; top: .75rem; left: .75rem; z-index: 100; padding: .75rem 1rem; border-radius: .6rem; background: var(--yellow); font-weight: 800; transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }

.guide-header { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; min-height: 72px; padding: 0 4vw; border-bottom: 1px solid var(--line); background: var(--bright); }
.guide-brand { display: flex; align-items: center; gap: .7rem; font-family: var(--display); font-size: 1.2rem; font-weight: 700; }
.guide-brand img, .guide-footer img, .integration-cta > img, .hub-download > img { border-radius: 22%; box-shadow: 0 9px 22px oklch(0.18 0.09 255 / .18); }
.guide-header nav, .guide-footer nav { display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.5rem); font-size: .88rem; font-weight: 700; }
.guide-header-cta { min-height: 44px; padding: .75rem 1rem; border-radius: .75rem; background: var(--ink); color: var(--light-ink); }

.article-hero, .hub-hero { padding: clamp(4.5rem, 10vw, 9rem) max(6vw, calc((100vw - 1160px) / 2)); background: var(--blue-deep); color: var(--light-ink); }
.breadcrumbs { display: flex; gap: .6rem; margin-bottom: 3.2rem; color: oklch(0.82 0.045 235); font-size: .82rem; font-weight: 700; }
.breadcrumbs a { border-bottom: 1px solid currentColor; }
.article-eyebrow, .section-label, .hub-hero > p { margin-bottom: 1rem; color: var(--cyan); font-family: var(--display); font-size: .8rem; font-weight: 700; }
.article-hero h1, .hub-hero h1 { max-width: 17ch; margin-bottom: 1.4rem; font-size: clamp(3.25rem, 7vw, 7.4rem); letter-spacing: -.06em; line-height: .94; text-wrap: balance; }
.article-description { max-width: 68ch; margin-bottom: 0; color: oklch(0.88 0.03 240); font-size: clamp(1.05rem, 1.6vw, 1.3rem); line-height: 1.7; }

.quick-answer { display: grid; grid-template-columns: .45fr 1fr; gap: clamp(2rem, 8vw, 8rem); padding: clamp(3rem, 6vw, 5rem) max(6vw, calc((100vw - 1160px) / 2)); background: var(--yellow); }
.quick-answer h2, .method-title, .app-integration h2, .article-faq h2, .hub-download h2 { margin-bottom: 0; font-size: clamp(2rem, 4vw, 4.2rem); letter-spacing: -.045em; line-height: 1; }
.quick-answer .section-label { color: var(--blue-deep); }
.quick-answer > p { max-width: 68ch; margin-bottom: 0; font-size: clamp(1.05rem, 1.5vw, 1.25rem); line-height: 1.75; }

.article-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .48fr); align-items: start; gap: clamp(3rem, 9vw, 8rem); width: var(--content); margin: 0 auto; padding: clamp(5rem, 10vw, 10rem) 0; }
.article-copy > p { max-width: 70ch; color: var(--muted); font-size: 1.04rem; line-height: 1.82; }
.article-copy > p + p { margin-top: 1.4rem; }
.method-title { margin: clamp(4rem, 7vw, 6rem) 0 2.5rem; }
.method-list { margin: 0; padding: 0; border-top: 2px solid var(--ink); list-style: none; }
.method-list li { display: grid; grid-template-columns: 46px 1fr; gap: 1rem; padding: 2rem 0; border-bottom: 1px solid var(--line); }
.method-list li > span { padding-top: .25rem; color: var(--blue); font-family: var(--display); font-size: .82rem; font-weight: 700; }
.method-list h2 { margin-bottom: .6rem; font-size: clamp(1.35rem, 2.2vw, 2rem); letter-spacing: -.03em; }
.method-list p { margin-bottom: 0; color: var(--muted); line-height: 1.75; }
.article-visual { position: sticky; top: 110px; margin: 0; }
.article-visual img { width: min(100%, 260px); margin: 0 auto; border-radius: 1.8rem; box-shadow: 0 0 0 4px var(--ink), 0 22px 48px oklch(0.2 0.07 255 / .2); transform: rotate(2deg); }
.article-visual p { max-width: 38ch; margin: 1.2rem auto 0; color: var(--muted); font-size: .75rem; line-height: 1.5; }

.app-integration { display: grid; grid-template-columns: 1fr minmax(280px, .55fr); gap: clamp(3rem, 8vw, 8rem); padding: clamp(5rem, 9vw, 9rem) max(6vw, calc((100vw - 1160px) / 2)); background: var(--coral-light); }
.integration-copy .section-label { color: var(--blue); }
.integration-copy h2 { max-width: 14ch; margin-bottom: 2rem; }
.integration-copy p { max-width: 68ch; color: var(--muted); line-height: 1.75; }
.integration-copy ul { display: grid; gap: .7rem; margin: 2rem 0 0; padding: 0; list-style: none; }
.integration-copy li { display: flex; gap: .65rem; font-weight: 700; }
.integration-copy li::before { color: var(--blue); content: "✓"; }
.integration-cta { align-self: center; padding: clamp(2rem, 4vw, 3.5rem); border-radius: 1.5rem; background: var(--blue-deep); color: var(--light-ink); }
.integration-cta > img { width: 90px; margin-bottom: 1.5rem; transform: rotate(-4deg); }
.integration-cta h3 { margin-bottom: 1rem; font-size: clamp(1.7rem, 3vw, 2.8rem); letter-spacing: -.04em; line-height: 1; }
.integration-cta p { color: oklch(0.87 0.03 240); line-height: 1.65; }
.integration-cta a { display: inline-block; width: min(210px, 100%); margin-top: .6rem; }

.article-faq { padding: clamp(5rem, 9vw, 8rem) max(6vw, calc((100vw - 960px) / 2)); background: var(--bright); }
.article-faq .section-label { color: var(--blue); }
.article-faq h2 { margin-bottom: 3rem; }
.article-faq > div { border-top: 2px solid var(--ink); }
.article-faq details { border-bottom: 1px solid var(--line); }
.article-faq summary { min-height: 82px; padding: 1.5rem 2.5rem 1.5rem 0; cursor: pointer; font-family: var(--display); font-size: 1.15rem; font-weight: 700; }
.article-faq details p { max-width: 68ch; margin: 0; padding: 0 0 1.7rem; color: var(--muted); line-height: 1.75; }
.article-next { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: 2rem max(6vw, calc((100vw - 1160px) / 2)); background: var(--yellow-light); }
.article-next p { margin-bottom: 0; color: var(--muted); font-size: .8rem; font-weight: 700; }
.article-next a { font-family: var(--display); font-size: 1.15rem; font-weight: 700; }

.guide-footer { display: grid; grid-template-columns: 1fr auto; align-items: start; gap: 3rem; padding: 4rem max(5vw, calc((100vw - 1160px) / 2)); background: var(--ink); color: var(--light-ink); }
.guide-footer > div { display: flex; align-items: center; gap: .8rem; }
.guide-footer p { margin-bottom: 0; color: oklch(0.75 0.03 240); font-size: .8rem; line-height: 1.5; }
.guide-footer strong { color: var(--light-ink); font-size: 1.1rem; }
.guide-footer small { grid-column: 1 / -1; padding-top: 2rem; border-top: 1px solid oklch(0.42 0.03 252); color: oklch(0.65 0.03 240); line-height: 1.6; }

.hub-hero { display: grid; grid-template-columns: 1fr .7fr; align-items: end; gap: 3rem; }
.hub-hero > p { grid-column: 1 / -1; }
.hub-hero h1 { max-width: 13ch; margin-bottom: 0; }
.hub-hero div p { max-width: 52ch; margin-bottom: .4rem; color: oklch(0.88 0.03 240); font-size: 1.08rem; line-height: 1.75; }
.hub-list { width: var(--content); margin: 0 auto; padding: clamp(5rem, 9vw, 9rem) 0; border-top: 2px solid var(--ink); }
.hub-guide { display: grid; grid-template-columns: 48px minmax(0, 1fr) 32px; align-items: center; gap: 1rem; padding: clamp(1.5rem, 3vw, 2.5rem) 0; border-bottom: 1px solid var(--line); }
.hub-guide > span, .hub-guide small { color: var(--muted); font-size: .76rem; font-weight: 700; }
.hub-guide h2 { margin: .5rem 0 .7rem; font-size: clamp(1.45rem, 2.5vw, 2.4rem); letter-spacing: -.035em; }
.hub-guide p { max-width: 72ch; margin-bottom: 0; color: var(--muted); line-height: 1.65; }
.hub-guide b { color: var(--blue); font-size: 1.6rem; }
.hub-download { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 2.5rem; padding: clamp(3.5rem, 6vw, 6rem) max(6vw, calc((100vw - 1160px) / 2)); background: var(--cyan); }
.hub-download > img { width: 112px; }
.hub-download h2 { max-width: 17ch; margin-bottom: .65rem; }
.hub-download p { margin-bottom: 0; }
.hub-download > a { width: 210px; }

.not-found { display: grid; min-height: 70vh; place-content: center; padding: 4rem 1.25rem; background: var(--blue-deep); color: var(--light-ink); text-align: center; }
.not-found > p:first-child { color: var(--yellow); font-family: var(--display); font-weight: 700; }
.not-found h1 { margin-bottom: 1rem; font-size: clamp(3.5rem, 9vw, 8rem); letter-spacing: -.06em; }
.not-found a { width: fit-content; margin: 1rem auto 0; padding: .9rem 1.2rem; border-radius: .8rem; background: var(--yellow); color: var(--ink); font-weight: 800; }

@media (max-width: 800px) {
  .quick-answer, .article-layout, .app-integration, .hub-hero { grid-template-columns: 1fr; }
  .article-visual { position: static; width: min(58vw, 250px); margin: 0 auto; }
  .hub-hero > p { grid-column: 1; }
  .hub-download { grid-template-columns: auto 1fr; }
  .hub-download > a { grid-column: 1 / -1; }
}

@media (max-width: 600px) {
  .guide-header { padding: 0 1rem; }
  .guide-header nav > a:not(.guide-header-cta) { display: none; }
  .article-hero, .hub-hero { padding: 4.5rem 1.25rem; }
  .article-hero h1, .hub-hero h1 { font-size: clamp(3rem, 15vw, 5rem); }
  .quick-answer, .app-integration, .article-faq, .hub-download { padding: 4rem 1.25rem; }
  .article-layout, .hub-list { width: calc(100% - 2.5rem); }
  .method-list li { grid-template-columns: 38px 1fr; }
  .article-next { align-items: flex-start; flex-direction: column; padding: 2rem 1.25rem; }
  .guide-footer { grid-template-columns: 1fr; padding: 3.5rem 1.25rem; }
  .guide-footer small { grid-column: 1; }
  .hub-guide { grid-template-columns: 36px 1fr 24px; }
  .hub-download { grid-template-columns: 1fr; }
  .hub-download > a { grid-column: 1; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}