.fpg {
    --fpg-ink: #17222c;
    --fpg-muted: #485964;
    --fpg-page: #f7f8f8;
    --fpg-panel: #fff;
    --fpg-soft: #f4f1ea;
    --fpg-line: #dfded8;
    --fpg-accent: #94400c;
    --fpg-hero-bg: #faf2e7;
    --fpg-hero-ink: #17222c;
    --fpg-hero-muted: #394d59;
    --fpg-hero-accent: #91400d;
    --fpg-store-bg: #fffaf4;
    --fpg-store-line: #ab9079;
    max-width: 1240px;
    margin: 24px auto 70px;
    padding: 20px;
    border-radius: 28px;
    background: var(--fpg-page);
    color: var(--fpg-ink);
    font-family: var(--ds-font-body, system-ui, sans-serif);
}
html[data-theme="dark"] .fpg {
    --fpg-ink: #eff5f8;
    --fpg-muted: #b7c6ce;
    --fpg-page: #101b25;
    --fpg-panel: #172633;
    --fpg-soft: #172735;
    --fpg-line: #314557;
    --fpg-accent: #ffb076;
    --fpg-hero-bg: #142431;
    --fpg-hero-ink: #f6f8fa;
    --fpg-hero-muted: #cbdbe4;
    --fpg-hero-accent: #ffc088;
    --fpg-store-bg: #223644;
    --fpg-store-line: #698294;
}
.fpg * { box-sizing: border-box; }
.fpg :is(h1, h2, p, figure) { margin: 0; }
.fpg :is(h1, h2) {
    font-family: var(--ds-font-heading, system-ui, sans-serif);
    letter-spacing: -.04em;
    line-height: 1.06;
    text-wrap: balance;
}
.fpg p { line-height: 1.62; }
.fpg a:focus-visible { outline: 3px solid #f59c55; outline-offset: 4px; }
.fpg-hero {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    overflow: hidden;
    align-items: stretch;
    min-height: 550px;
    border-radius: 28px;
    background: var(--fpg-hero-bg);
    color: var(--fpg-hero-ink);
}
.fpg-hero-copy {
    display: grid;
    align-content: center;
    gap: 19px;
    padding: clamp(28px, 4vw, 52px);
}
.fpg .fpg-hero h1 { color: var(--fpg-hero-ink); font-size: clamp(2.65rem, 5.65vw, 5.1rem); }
.fpg-hero-copy > p:not([class]) { color: var(--fpg-hero-muted); font-size: 1.08rem; max-width: 43ch; }
.fpg-brand { display: flex; align-items: center; gap: 12px; font-size: 1.55rem; font-weight: 850; }
.fpg-brand img { border-radius: 16px; }

.fpg .fpg-kicker { font-size: .87rem; font-weight: 780; letter-spacing: .055em; color: var(--fpg-accent); }
.fpg .fpg-brand span span, .fpg .fpg-hero .fpg-kicker { color: var(--fpg-hero-accent); }
.fpg .fpg-credit { color: var(--fpg-hero-muted); font-size: .82rem; }
.fpg-actions, .fpg-end-actions { display: flex; gap: 12px 20px; align-items: center; flex-wrap: wrap; }
.fpg a.fpg-button, .fpg a.fpg-secondary {
    display: inline-flex;
    align-items: center;
    gap: .75em;
    padding: 12px 18px;
    min-height: 46px;
    border-radius: 12px;
    font-weight: 780;
    text-decoration: none;
}
.fpg a.fpg-button { background: #ffab68; color: #261607; }
.fpg a.fpg-button:hover { background: #ffc28e; }
.fpg a.fpg-hero-link { color: var(--fpg-hero-ink); text-underline-offset: .24em; font-weight: 680; }
.fpg a.fpg-secondary { color: var(--fpg-ink); border: 1px solid var(--fpg-line); background: var(--fpg-panel); }
.fpg .fpg-hero-art { align-self: stretch; position: relative; display: grid; place-items: center; padding: 32px 15%; isolation: isolate; }
.fpg-lake { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: right center; z-index: -2; }
.fpg-hero-art::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg,var(--fpg-hero-bg),transparent 29%); z-index: -1; }
.fpg-phone {
    position: relative;
    width: min(100%, 252px);
    padding: 7px;
    border-radius: 36px;
    border: 1px solid #819099;
    background: #101921;
    box-shadow: 0 18px 40px #09182343, 0 0 0 2px #111a20;
}
.fpg-phone img { display: block; width: 100%; height: auto; border-radius: 28px; }
.fpg-hero .fpg-phone { width: min(90%, 214px); transform: rotate(6deg); }
.fpg-jump { display: flex; flex-wrap: wrap; gap: 10px; margin: 25px 0 12px; }
.fpg-jump a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 8px 15px;
    border: 1px solid var(--fpg-line);
    border-radius: 100px;
    background: var(--fpg-panel);
    color: var(--fpg-ink);
    font-size: .89rem;
    font-weight: 720;
    text-decoration: none;
}
.fpg-jump a:hover, .fpg a.fpg-secondary:hover { border-color: var(--fpg-accent); color: var(--fpg-accent); }
.fpg .fpg-example { color: var(--fpg-muted); font-size: .85rem; margin: 0 0 12px; }
.fpg-feature {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: clamp(30px, 6vw, 82px);
    padding: clamp(32px,5vw,60px) 0;
    border-top: 1px solid var(--fpg-line);
    scroll-margin-top: 115px;
}
.fpg-reverse .fpg-stage { grid-column: 2; grid-row: 1; }
.fpg-reverse .fpg-feature-copy { grid-column: 1; grid-row: 1; }
.fpg-stage {
    display: grid;
    place-items: center;
    padding: 30px 40px;
    background: radial-gradient(ellipse at 50% 25%, #d37a2f22, transparent 70%), var(--fpg-soft);
    border: 1px solid var(--fpg-line);
    border-radius: 25px;
}
.fpg-feature-copy { display: grid; gap: 16px; }
.fpg .fpg-feature h2,.fpg .fpg-end h2 { color: var(--fpg-ink); font-size: clamp(1.9rem, 3.45vw, 3.5rem); }
.fpg-feature-copy > p:not([class]),.fpg-end p { color: var(--fpg-muted); font-size: 1.04rem; max-width: 55ch; }
.fpg .fpg-benefit { padding: 2px 0 2px 15px; border-left: 3px solid #e58b4e; font-weight: 650; max-width: 54ch; }
.fpg-marker {
    position: absolute;
    top: var(--fpg-focus);
    right: 8%;
    width: 84%;
    height: 8%;
    border: 2px solid #e77934;
    border-radius: 13px;
    transform: translateY(-50%);
    pointer-events: none;
}
.fpg-marker > span {
    position: absolute;
    left: 55%;
    bottom: calc(100% + 7px);
    width: max-content;
    max-width: 140px;
    padding: 4px 8px;
    border-radius: 7px;
    background: #ffb47d;
    color: #29180f;
    box-shadow: 0 2px 8px #0003;
    font-size: .73rem;
    font-weight: 750;
}
.fpg-marker > span::after { content: ""; position: absolute; left: 15px; top: 100%; border: 5px solid transparent; border-top-color: #ffb47d; }
.fpg-end {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    align-items: center;
    gap: 25px;
    background: var(--fpg-soft);
    border: 1px solid var(--fpg-line);
    border-radius: 25px;
    padding: clamp(22px, 4vw, 48px);
}
.fpg-end h2 { margin-bottom: 12px; }
.fpg-end-actions { align-items: flex-start; flex-direction: column; }
 .fpg-store-links { display: flex; flex-wrap: wrap; gap: 10px; }
.fpg .fpg-store {
    display: grid;
    gap: 3px;
    min-width: 125px;
    padding: 9px 13px;
    border: 1px solid var(--fpg-store-line);
    border-radius: 11px;
    background: var(--fpg-store-bg);
    color: var(--fpg-hero-ink);
    text-decoration: none;
}
.fpg a.fpg-store:hover { border-color: var(--fpg-hero-accent); }
.fpg .fpg-store > span { color: var(--fpg-hero-muted); font-size: .75rem; }
.fpg .fpg-store strong { font-size: 1rem; }
#fiskepuls-app { scroll-margin-top: 105px; }
@media (max-width: 760px) {
    .fpg { margin-top: 12px; padding: 14px; border-radius: 18px; }
    .fpg-hero, .fpg-feature, .fpg-end { grid-template-columns: minmax(0,1fr); }
    .fpg-hero-copy { padding: 28px 23px; }
    .fpg .fpg-hero-art { padding: 25px 20px; }
    .fpg-hero .fpg-phone { width: min(75%, 205px); }
    .fpg-feature { gap: 24px; }
    .fpg-feature .fpg-feature-copy { grid-column: 1; grid-row: 1; }
    .fpg-feature .fpg-stage { grid-column: 1; grid-row: 2; }
    .fpg-stage { padding: 24px 30px; }
    .fpg-marker > span { left: auto; right: -9%; }
}

/* The guide uses its own spacing inside the site's shared section layout. */
.fpg section.fpg-hero { padding: 0; background: var(--fpg-hero-bg); }
.fpg section.fpg-feature { background: transparent; }
.fpg section.fpg-end { background: var(--fpg-soft); }
.fpg .fpg-store strong { color: var(--fpg-hero-ink); }

html[data-theme="light"] body:has(.fpg) .site-header {
    background: #fbfcfd;
    border-bottom-color: #dce4e8;
}
html[data-theme="light"] body:has(.fpg) .site-header :is(.brand-copy strong,.topnav__link,.kf-theme-toggle) {
    color: #17222c;
}
html[data-theme="light"] body:has(.fpg) .site-header .brand-copy small { color: #405563; }
html[data-theme="dark"] body:has(.fpg) .site-header {
    background: #101c26;
    border-bottom-color: #304351;
}
html[data-theme="dark"] body:has(.fpg) .site-header :is(.brand-copy strong,.topnav__link,.kf-theme-toggle) {
    color: #eff5f8;
}
html[data-theme="dark"] body:has(.fpg) .site-header .brand-copy small { color: #b7c6ce; }