/* Discovery is the default palette and can be explicitly restored inside a branded theme. */
:root,
.ui-theme[data-theme="discovery"],
.ui-theme[data-purpose="interface"] {
  --interface-accent-dark-ink: #000;
  --interface-accent-light-ink: #fff;
  --danger: #a13a35;
  --warning: #946c23;
  --danger-soft: #fbedeb;
  --background: #f7f9f8;
  --surface: #fff;
  --ink: #182e29;
  --muted: #6c7b76;
  --border: #dfe6e2;
  --accent: #1a725e;
  --accent-soft: #e8f2ed;
  --on-strong: #fff;
  --badge-background: #fafcfb;
  --preview-background: #edf3ee;
  --preview-border: #d4e2d9;
  --on-strong-muted: #b9d0c7;
  --connector: #95afa1;
  --notice-border: #d2e6da;
  --notice-foreground: #4e7161;
}

.ui-theme {
  --dialog-backdrop: color-mix(in srgb, var(--ink) 45%, transparent);
  color: var(--ink);
  background: var(--background);
  /* Recompute derived tokens at the theme boundary instead of inheriting
     root-computed aliases, so sidebars and shadows follow runtime colors. */
  --sidebar-background: var(--background);
  --sidebar-border: var(--border);
  --sidebar-active: var(--accent-soft);
  --sidebar-active-foreground: var(--accent);
  --overlay-surface: var(--surface);
  --shell-shadow: 0 1px 3px color-mix(in srgb, var(--ink) 5%, transparent);
  --select-shadow: 0 4px 12px color-mix(in srgb, var(--ink) 12%, transparent);
}

.ui-theme[data-purpose="interface"][data-theme="custom"][data-appearance="light"] {
  --accent-soft: color-mix(in srgb, var(--accent) 10%, var(--background));
}

.ui-theme input[type="checkbox"],
.ui-theme input[type="radio"] {
  accent-color: var(--accent);
}

.ui-theme[data-appearance="dark"] {
  color-scheme: dark;
  --dialog-backdrop: hsl(240 4% 2% / 45%);
  /* Light foreground-derived shadows look like a glow on dark surfaces. */
  --shell-shadow: none;
  --select-shadow: none;
  --view-toggle-shadow: none;
  --background: hsl(240 4% 10%);
  --surface: hsl(240 4% 8%);
  --overlay-surface: var(--surface);
  --ink: #ededed;
  --muted: #a3a3a3;
  --border: hsl(240 4% 19%);
  --sidebar-border: hsl(240 4% 16%);
  /* Keep the brand accent on text, icons, borders and focus rings;
     neutral surface tokens prevent the dark UI from becoming green. */
  --accent: #82cdb1;
  --accent-soft: hsl(240 4% 19%);
  --sidebar-active: color-mix(in srgb, var(--accent) 14%, var(--sidebar-background));
  --sidebar-active-foreground: var(--accent);
  --danger: #f19c95;
  --danger-soft: #472b29;
  --warning: #e6c17b;
  --on-strong: hsl(240 4% 10%);
  --badge-background: hsl(240 4% 11.5%);
  --preview-background: hsl(240 4% 11.5%);
  --preview-border: hsl(240 4% 19%);
  --on-strong-muted: #bfbfbf;
  --connector: #737373;
  --notice-border: #404040;
  --notice-foreground: #d4d4d4;
}
.ui-theme[data-theme="custom"][data-appearance="dark"] {
  --accent: color-mix(in srgb, var(--brand-dark-accent, #1a725e) 65%, var(--ink));
}
.ui-theme[data-appearance="light"] { color-scheme: light; }

:root, .ui-theme {
  --toast-error-surface: #fff;
  --toast-error-foreground: #182e29;
  --toast-error-border: #dfe6e2;
  --toast-error-hover: #f7f9f8;
  --http-get: #176744;
  --http-get-soft: #e5f5ec;
  --http-post: #2059ac;
  --http-post-soft: #e7efff;
  --http-put: #8b570a;
  --http-put-soft: #fff1d6;
  --http-patch: #7540a4;
  --http-patch-soft: #f2e9fb;
  --http-delete: #ac333f;
  --http-delete-soft: #fde9ec;
  --http-head: #146775;
  --http-head-soft: #e0f4f7;
  --http-options: #536176;
  --http-options-soft: #edf0f5;
  --code-background: #f6f8fc;
  --code-foreground: #263348;
  --code-comment: #64748b;
  --code-keyword: #8e3baa;
  --code-string: #12674c;
  --code-function: #245fba;
  --code-property: #a33b55;
  --code-number: #98500f;
}
.ui-theme[data-appearance="dark"] {
  --toast-error-surface: hsl(240 4% 8%);
  --toast-error-foreground: #ededed;
  --toast-error-border: hsl(240 4% 19%);
  --toast-error-hover: hsl(240 4% 10%);
  --http-get: #83dfac;
  --http-get-soft: #193b2b;
  --http-post: #8fbaff;
  --http-post-soft: #1e3253;
  --http-put: #f3c577;
  --http-put-soft: #43341c;
  --http-patch: #d1a6fa;
  --http-patch-soft: #39264d;
  --http-delete: #ff9ba9;
  --http-delete-soft: #492630;
  --http-head: #86d9e6;
  --http-head-soft: #183b43;
  --http-options: #bdcadf;
  --http-options-soft: #2c3441;
  --code-background: #252a33;
  --code-foreground: #dbe6f5;
  --code-comment: #91a1b8;
  --code-keyword: #d4a5ff;
  --code-string: #8bd5ae;
  --code-function: #91bdff;
  --code-property: #f3a5b7;
  --code-number: #f2bf87;
}

/* Button states follow each theme boundary, including validated brand palettes. */
:root, .ui-theme {
  --color-picker-black: #000000;
  --color-picker-white: #ffffff;
  --button-outline-background: var(--surface);
  --button-outline-border: var(--border);
  --button-outline-hover-background: var(--surface);
  --button-outline-hover-border: var(--accent);
  --button-primary-background: var(--accent);
  --button-primary-hover-background: color-mix(in srgb, var(--accent) 85%, #000);
}

/* Self-contained website design palettes; revisions freeze these semantic tokens. */
.website[data-template="conversion-canvas"] {
  color-scheme: light;
  --background: #faf9f6;
  --surface: #ffffff;
  --ink: #1c2823;
  --muted: #5a6962;
  --border: #e2e6df;
  --accent: #2d6a4f;
  --accent-soft: #edf4ee;
  --on-strong: #ffffff;
}
.website[data-template="guide-spotlight"] {
  color-scheme: dark;
  --background: #0e0e0f;
  --surface: #181819;
  --ink: #f1efeb;
  --muted: #a5a3a0;
  --border: #303031;
  --accent: #ff9a62;
  --accent-soft: #25201e;
  --on-strong: #0e0e0f;
}

/* Reusable acquisition design palettes. Runtime brand values map through semantic tokens. */
.source-layout[data-layout="conversion-canvas"] {
  --on-strong: white;
  --background: #FAFAF7;
  --ref-bg: var(--background, #FAFAF7);
  --surface: #FFFFFF;
  --ref-bg-card: var(--surface, #FFFFFF);
  --ref-bg-warm: #F5F2EC;
  --ink: #0A0A0A;
  --ref-ink: var(--ink, #0A0A0A);
  --muted: #6B6B6B;
  --ref-ink-mid: var(--muted, #6B6B6B);
  --ref-ink-soft: #9C9C9C;
  --ref-ink-faint: #C7C4BE;
  --border: #E8E5DF;
  --ref-line: var(--border, #E8E5DF);
  --ref-line-soft: #F0EDE7;
  --accent: #2D6A4F;
  --ref-green: var(--accent, #2D6A4F);
  --ref-green-dark: #1B4332;
  --ref-green-soft: #D8F3DC;
  --accent-soft: #EDF7F0;
  --ref-green-wash: var(--accent-soft, #EDF7F0);
  --ref-orange: #F4A261;
  --ref-orange-dark: #E76F51;
  --ref-gold: #D4A574;
  --ref-error: #DC2626;
  --ref-error-soft: #FEE2E2;
  --reference-color-conversion-canvas-1: white;
  --reference-color-conversion-canvas-2: color-mix(in srgb, var(--background) 88%, transparent);
  --reference-color-conversion-canvas-3: rgba(0,0,0,0.03);
  --reference-color-conversion-canvas-4: color-mix(in srgb, var(--accent) 8%, transparent);
  --reference-color-conversion-canvas-5: color-mix(in srgb, var(--accent) 25%, transparent);
  --reference-color-conversion-canvas-6: color-mix(in srgb, var(--accent) 20%, transparent);
  --reference-color-conversion-canvas-7: color-mix(in srgb, var(--accent) 35%, transparent);
  --reference-color-conversion-canvas-8: color-mix(in srgb, var(--accent) 8%, transparent);
  --reference-color-conversion-canvas-9: #1B4332;
  --reference-color-conversion-canvas-10: #14352B;
  --reference-color-conversion-canvas-11: rgba(27, 67, 50, 0.25);
  --reference-color-conversion-canvas-12: rgba(27, 67, 50, 0.15);
  --reference-color-conversion-canvas-13: #E8B07C;
  --reference-color-conversion-canvas-14: rgba(232, 176, 124, 0.08);
  --reference-color-conversion-canvas-15: rgba(232, 176, 124, 0.12);
  --reference-color-conversion-canvas-16: rgba(255,255,255,0.78);
  --reference-color-conversion-canvas-17: rgba(255,255,255,0.08);
  --reference-color-conversion-canvas-18: rgba(255,255,255,0.15);
  --reference-color-conversion-canvas-19: rgba(255,255,255,0.5);
  --reference-color-conversion-canvas-20: rgba(255,255,255,0.12);
  --reference-color-conversion-canvas-21: rgba(232, 176, 124, 0.15);
  --reference-color-conversion-canvas-22: #FCA5A5;
  --reference-color-conversion-canvas-23: rgba(220, 38, 38, 0.15);
  --reference-color-conversion-canvas-24: rgba(232, 176, 124, 0.25);
  --reference-color-conversion-canvas-25: #D49862;
  --reference-color-conversion-canvas-26: rgba(232, 176, 124, 0.35);
  --reference-color-conversion-canvas-27: rgba(255,255,255,0.7);
  --reference-color-conversion-canvas-28: rgba(255,255,255,0.75);
  --reference-color-conversion-canvas-29: rgba(232, 176, 124, 0.45);
  --reference-color-conversion-canvas-30: rgba(232, 176, 124, 0);
  --reference-color-conversion-canvas-31: rgba(255,255,255,0.65);
  --reference-color-conversion-canvas-32: rgba(255,255,255,0.55);
  --reference-color-conversion-canvas-33: rgba(255,255,255,0.06);
  --reference-color-conversion-canvas-34: rgba(232, 176, 124, 0.4);
  --reference-color-conversion-canvas-35: rgba(232, 176, 124, 0.2);
  --reference-color-conversion-canvas-36: rgba(255,255,255,0.3);
  --reference-color-conversion-canvas-37: rgba(255,255,255,0.4);
  --reference-color-conversion-canvas-38: rgba(255,255,255,0.1);
  --reference-color-conversion-canvas-39: rgba(255,255,255,0.04);
  --reference-color-conversion-canvas-40: rgba(255,255,255,0.2);
  --reference-color-conversion-canvas-41: rgba(0,0,0,0.7);
  --reference-color-conversion-canvas-42: rgba(255,255,255,0.6);
  --reference-color-conversion-canvas-43: rgba(27, 67, 50, 0.35);
  --reference-color-conversion-canvas-44: rgba(10,10,10,0.7);
  --reference-color-conversion-canvas-45: rgba(0,0,0,0.08);
  --reference-color-conversion-canvas-46: color-mix(in srgb, var(--accent) 10%, transparent);
  --reference-color-conversion-canvas-47: rgba(0,0,0,0.04);
  --reference-color-conversion-canvas-48: #6FCF87;
}
.source-layout[data-layout="guide-spotlight"] {
  --background: #0E0E0F;
  --ref-bg: var(--background, #0E0E0F);
  --surface: #161618;
  --ref-bg-elevated: var(--surface, #161618);
  --ref-bg-subtle: #1C1C1F;
  --ref-bg-overlay: color-mix(in srgb, var(--accent) 4%, transparent);
  --ink: #F5F5F4;
  --ref-text: var(--ink, #F5F5F4);
  --muted: #A8A8A8;
  --ref-text-muted: var(--muted, #A8A8A8);
  --ref-text-fade: #6B6B6B;
  --border: #2A2A2C;
  --ref-line: var(--border, #2A2A2C);
  --ref-line-strong: #3A3A3D;
  --accent: #FFB347;
  --ref-accent: var(--accent, #FFB347);
  --ref-accent-glow: color-mix(in srgb, var(--accent) 15%, transparent);
  --accent-soft: color-mix(in srgb, var(--accent) 8%, transparent);
  --ref-accent-soft: var(--accent-soft, color-mix(in srgb, var(--accent) 8%, transparent));
  --ref-cyan: #7DD3FC;
  --ref-max-w: 720px;
  --ref-max-w-wide: 1080px;
  --reference-color-guide-spotlight-1: rgba(168, 168, 168, 0.4);
  --reference-color-guide-spotlight-2: rgba(14, 14, 15, 0.7);
  --reference-color-guide-spotlight-3: #FF8C42;
  --reference-color-guide-spotlight-4: #1F1A12;
  --reference-color-guide-spotlight-5: white;
}

:root {
  --field-error-ring-width: 3px;

  /* Shared corner geometry: surfaces and controls use one global radius. */
  --radius: 0.5rem;
  --radius-small: calc(var(--radius) * 0.75);
  --avatar-upload-size: 4.5rem;
  --description-font-size: 0.8125rem;
  --description-font-weight: 400;
  --description-line-height: 1.5;
  --tooltip-max-width: 16rem;
  --page-title-size: 1.375rem;
  --page-title-tracking: -0.025em;
  --page-title-gap: 0.375rem;
  --page-heading-spacing: 1.25rem;
  --sidebar-width: 14rem;
  --sidebar-collapsed-width: 3rem;
  --sidebar-background: var(--background);
  --sidebar-border: var(--border);
  --sidebar-border-width: 1px;
  --sidebar-rail-padding: 0.375rem;
  --sidebar-nav-icon-size: 1.125rem;
  --sidebar-header-separator-height: 1rem;
  --sidebar-active: var(--accent-soft);
  --shell-header-height: 3rem;
  --shell-gap: 0.75rem;
  --shell-content-padding: 1.5rem;
  --shell-content-padding-inline: 1rem;
  --shell-mobile-padding: 1rem;
  --shell-mobile-padding-inline: 0.75rem;
  --sidebar-padding: 0.75rem;
  --sidebar-section-gap: 0.5rem;
  --sidebar-nav-gap: 0.25rem;
  --sidebar-item-padding-block: 0.5rem;
  --sidebar-item-height: 2.5rem;
  --sidebar-font-size: 0.75rem;
  --sidebar-caption-size: 0.625rem;
  --sidebar-toggle-icon-size: 1rem;
  --account-avatar-size: 2rem;
  --account-avatar-radius: var(--radius);
  --sidebar-scope-exit-ms: 150ms;
  --sidebar-scope-enter-ms: 220ms;
  --sidebar-scope-offset: -0.75rem;
  --sidebar-scope-exit-easing: cubic-bezier(0.4, 0, 1, 1);
  --sidebar-scope-enter-easing: cubic-bezier(0.22, 1, 0.36, 1);
  --form-save-motion: 300ms;
  --save-button-width: 8rem;
  --search-filter-width: 8rem;
  --search-list-height: 24rem;
  --sidebar-width-ms: 240ms;
  --interaction-feedback-ms: 120ms;
  --announcement-hover-motion: 240ms ease-in-out;
  --sidebar-hover-transition: var(--interaction-feedback-ms) ease-in-out;
  --sidebar-hover-properties: background-color var(--sidebar-hover-transition), color var(--sidebar-hover-transition);
  --sidebar-transition: var(--sidebar-width-ms) cubic-bezier(0.22, 1, 0.36, 1);
  --sidebar-content-exit-ms: 88ms;
  --sidebar-enter-after-exit-ms: 20ms;
  --sidebar-waterfall-stagger-ms: 34ms;
  --sidebar-waterfall-item-ms: 130ms;
  --sidebar-rail-stagger-ms: 22ms;
  --sidebar-rail-item-ms: 105ms;
  --sidebar-content-offset: -0.75rem;
  --sidebar-rail-offset: -0.5rem;
  --sidebar-enter-easing: cubic-bezier(0.22, 1, 0.36, 1);
  --sidebar-exit-easing: cubic-bezier(0.4, 0, 0.85, 1);
  --shell-radius: var(--radius);
  --shell-shadow: 0 1px 3px color-mix(in srgb, var(--ink) 5%, transparent);
  --view-toggle-shadow: 0 1px 2px color-mix(in srgb, var(--ink) 12%, transparent);
  --control-height: 2.25rem;
  --control-font-size: 0.875rem;
  --control-padding: 0.625rem;
  --control-radius: var(--radius);
  --select-height: var(--control-height);
  --select-font-size: var(--control-font-size);
  --select-padding: var(--control-padding);
  --select-gap: 0.5rem;
  --select-radius: var(--control-radius);
  --select-item-radius: var(--radius-small);
  --select-list-padding: 0.25rem;
  --select-option-height: 2rem;
  --select-option-end-padding: 2rem;
  --select-list-height: 18rem;
  --select-popup-chrome-height: 4.5rem;
  --select-shadow: 0 4px 12px color-mix(in srgb, var(--ink) 12%, transparent);
  --dialog-backdrop: color-mix(in srgb, var(--ink) 45%, transparent);
  --layer-overlay: 50;
  --layer-dialog: 60;
  --layer-popover: 70;
  --breadcrumb-switcher-width: 15rem;
  --breadcrumb-switch-size: 1.25rem;
  --breadcrumb-switch-icon-size: 0.75rem;
  --breadcrumb-switcher-option-height: 1.75rem;
  --breadcrumb-entity-width: 12rem;
  --breadcrumb-text-padding: 0.125rem;
  --breadcrumb-line-height: 1.5;
  --breadcrumb-gap: 0.5rem;
  --sheet-width: 36rem;
  --sheet-transition: 180ms;
  --entity-grid-min: 17rem;
  --entity-grid-gap: 1rem;
  --entity-card-transition: 220ms cubic-bezier(0.22, 1, 0.36, 1);
  --role-card-icon-size: 2.5rem;
  --integration-logo-size: 2rem;
  --role-scope-width: 24rem;
  --provisioning-notice-width: 60ch;
  --dialog-resize-duration: 300ms;
  --dialog-width: 40rem;
  --dialog-wide-width: 64rem;
  --dialog-edge: 1rem;
  --dialog-padding: 1.5rem;
  --dialog-footer-padding: 1rem;
  --dialog-title-size: 1.25rem;
  --menu-width: 12rem;
  --menu-max-width: 22rem;
  --menu-enter-ms: 180ms;
  --menu-exit-ms: 120ms;
  --menu-motion-offset: 0.25rem;
  --menu-motion-scale: 0.97;
  --menu-enter-easing: cubic-bezier(0.22, 1, 0.36, 1);
  --menu-exit-easing: cubic-bezier(0.4, 0, 1, 1);
  --table-section-gap: 1.75rem;
  --table-font-size: 0.8125rem;
  --table-title-size: 1rem;
  --table-heading-gap: 0.5rem;
  --table-toolbar-padding: 0.75rem;
  --table-search-width: 17rem;
  --table-filter-width: 8rem;
  --table-tool-size: 2rem;
  --table-max-height: 60svh;
  --table-header-height: 2.5rem;
  --table-row-height: 2.75rem;
  --table-compact-padding: 0.625rem;
  --table-cell-padding: 1rem;
  --table-check-width: 2.5rem;
  --table-check-size: 0.9375rem;
  --table-action-width: 3rem;
  --table-badge-block: 0.125rem;
  --table-dot-size: 0.375rem;
  --table-tags-width: 24rem;
  --table-empty-height: 12rem;
  --table-empty-width: 24rem;
  --table-skeleton-width: 7rem;
  --table-skeleton-height: 1rem;
  --table-focus-width: 0.1875rem;
  --button-font-size: 0.8125rem;
  --button-line-height: 1.125rem;
  --button-padding-block: 0.375rem;
  --button-padding-inline: 0.75rem;
  --button-gap: 0.375rem;
  --button-resize-ms: 220ms;
  --button-resize-easing: ease-in-out;
  --button-transition: 220ms ease-in-out;
  font-family: "DM Sans", sans-serif;
  color: var(--ink);
  background: var(--background);
  font-synthesis: none;
}

:root {
  --layer-toast: 80;
  --toast-width: min(356px, calc(100vw - 2rem));
  --toast-padding: 1rem;
  --toast-gap: 0.625rem;
  --toast-text-gap: 0.25rem;
  --toast-icon-size: 1rem;
  --toast-close-size: 1.75rem;
  --toast-close-inset: 0.5rem;
}

:root {
  --language-select-compact-width: 7.5rem;
  --docs-max-width: 100rem;
  --docs-article-width: 58rem;
  --docs-sidebar-width: 16rem;
  --docs-toc-width: 12rem;
  --docs-header-height: 4.25rem;
  --docs-title-size: clamp(2rem, 3vw, 2.75rem);
  --docs-content-gap: 3rem;
  --docs-section-gap: 2.5rem;
  --docs-prose-size: 0.9375rem;
  --docs-code-size: 0.8125rem;
  --docs-line-height: 1.8;
  --docs-anchor-offset: 6rem;
}

:root {
  --accordion-motion: 240ms;
  --accordion-easing: cubic-bezier(0.22, 1, 0.36, 1);
  --http-method-width: 4.5rem;
}

:root { --color-motion: 160ms; --toc-motion: 240ms; --motion-easing: cubic-bezier(0.22, 1, 0.36, 1); --docs-toc-indicator-width: 2px; }

:root { --mcp-consent-width: 42rem; }

:root {
  --checkbox-size: 1.05rem;
  --checkbox-mark-size: 0.7rem;
  --checkbox-radius: 0.4rem;
  --checkbox-border-width: 1.5px;
  --checkbox-focus-width: 2px;
  --checkbox-fill-motion: 150ms;
  --checkbox-draw-motion: 220ms;
  --checkbox-opacity-motion: 80ms;
  --checkbox-draw-easing: cubic-bezier(0.65, 0, 0.35, 1);
}

* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
a {
  color: inherit;
  text-decoration: none;
}
button,
input,
select {
  font: inherit;
}
button,
a {
  -webkit-tap-highlight-color: transparent;
}
a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 4px;
}
h1,
h2,
h3,
p {
  margin: 0;
}
h1,
h2,
h3 {
  font-family: "Manrope", sans-serif;
}
p {
  color: var(--muted);
  line-height: 1.65;
}
h3 {
  font-size: 16px;
  letter-spacing: -0.3px;
}
h2 {
  font-size: 21px;
  letter-spacing: -0.6px;
}

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

:where(a, button, input, select, textarea, [role="button"]) { transition: color var(--color-motion) ease, background-color var(--color-motion) ease, border-color var(--color-motion) ease, box-shadow var(--color-motion) ease; }
@media (prefers-reduced-motion: reduce) { :where(a, button, input, select, textarea, [role="button"]) { transition: none; } }

/* Penvik inherits the platform palette, typography and shared corner geometry. */
.penvik-site { --penvik-width: 72rem; --penvik-gutter: clamp(1.25rem, 5vw, 5rem); --penvik-section: clamp(4rem, 8vw, 7rem); --penvik-gap: 1.5rem; --penvik-small: .8125rem; --penvik-heading: clamp(2.25rem, 4.5vw, 3.75rem); --penvik-rule: 1px solid var(--border); background: var(--background); color: var(--ink); }
.penvik-wrap { width: min(var(--penvik-width), calc(100% - var(--penvik-gutter) * 2)); margin-inline: auto; }
.penvik-header, .penvik-header nav, .penvik-footer, .penvik-preview-top, .penvik-preview-bottom { display: flex; align-items: center; justify-content: space-between; gap: var(--penvik-gap); }
.penvik-header { min-height: 6.5rem; border-bottom: var(--penvik-rule); }
.penvik-wordmark { display: inline-flex; align-items: center; gap: .5rem; font-size: 1.75rem; font-weight: 700; letter-spacing: -.07em; }
.penvik-symbol { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; background: var(--accent); color: var(--on-strong); border-radius: var(--radius); font-size: 1.5rem; }
.penvik-brand-dot, .penvik-link { color: var(--accent); }
.penvik-header nav, .penvik-footer { font-size: var(--penvik-small); }
.penvik-header a:hover, .penvik-footer a:hover { color: var(--accent); }
.penvik-hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: 4rem; align-items: center; padding-block: var(--penvik-section); }
.penvik-eyebrow { display: flex; align-items: center; gap: .5rem; font-size: .6875rem; letter-spacing: .13em; text-transform: uppercase; font-weight: 700; color: var(--accent); }
.penvik-status { width: .375rem; height: .375rem; flex-shrink: 0; border-radius: 50%; background: var(--accent); }
.penvik-hero h1 { font-size: clamp(2.75rem, 5.3vw, 4.75rem); letter-spacing: -.065em; line-height: 1.08; margin-block: 1.5rem; }
.penvik-hero h1 em { font-style: normal; color: var(--accent); }
.penvik-intro { max-width: 33rem; font-size: 1rem; }
.penvik-button { display: inline-flex; align-items: center; justify-content: space-between; gap: 2rem; background: var(--ink); color: var(--on-strong); border: 1px solid transparent; border-radius: var(--radius); padding: 1rem 1.25rem; font-size: var(--penvik-small); font-weight: 600; margin-top: 2rem; }
.penvik-button:hover { background: var(--accent); }
.penvik-launch { margin-top: 1rem; font-size: .6875rem; }
.penvik-preview { background: var(--accent-soft); border: var(--penvik-rule); border-radius: var(--radius); transform: rotate(-2deg); overflow: hidden; box-shadow: 0 1.5rem 4rem color-mix(in srgb, var(--ink) 7%, transparent); }
.penvik-preview-top { padding: 1.25rem 1.5rem; border-bottom: var(--penvik-rule); }
.penvik-mini-logo { font-weight: 700; letter-spacing: -.06em; }
.penvik-preview-label { font-size: .625rem; color: var(--muted); border: var(--penvik-rule); border-radius: var(--radius-small); padding: .25rem .5rem; }
.penvik-preview-body { padding: 2.5rem 1.75rem; }
.penvik-preview h2 { font-size: 2rem; line-height: 1.15; letter-spacing: -.055em; margin: 1rem 0 2rem; }
.penvik-preview-option { display: flex; gap: 1rem; align-items: center; padding: 1.25rem 1rem; background: var(--surface); border: var(--penvik-rule); border-radius: var(--radius); margin-top: .75rem; }
.penvik-preview-option > span:last-child { margin-left: auto; }
.penvik-preview-option strong { font-size: .8125rem; }
.penvik-preview-option p { font-size: .6875rem; }
.penvik-option-icon { color: var(--accent); font-size: 1.5rem; }
.penvik-preview-note { display: flex; align-items: center; gap: .5rem; margin-top: 1.5rem; font-size: .6875rem; color: var(--muted); }
.penvik-preview-bottom { padding: 1rem 1.5rem; background: var(--ink); color: var(--on-strong); font-size: .625rem; }
.penvik-preview-bottom > span:last-child { font-size: 1.5rem; }
.penvik-about { background: var(--surface); border-block: var(--penvik-rule); padding-block: var(--penvik-section); }
.penvik-about-grid { display: grid; grid-template-columns: 1fr 2fr; gap: 3rem; align-items: start; }
.penvik-about h2, .penvik-section-heading h2, .penvik-contact h2 { font-size: var(--penvik-heading); line-height: 1.12; letter-spacing: -.055em; }
.penvik-about p:not(.penvik-eyebrow) { margin-top: 1.5rem; max-width: 38rem; }
.penvik-process { padding-block: var(--penvik-section); }
.penvik-section-heading h2 { margin-top: 1rem; }
.penvik-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; margin-top: 3rem; }
.penvik-steps article { border-top: var(--penvik-rule); padding-top: 1.25rem; }
.penvik-step-number { color: var(--accent); font-size: var(--penvik-small); }
.penvik-steps h3 { margin-block: 1.5rem .75rem; font-size: 1.125rem; }
.penvik-steps p { font-size: .875rem; }
.penvik-development-note { margin-top: 3rem; font-size: .75rem; max-width: 49rem; }
.penvik-contact { display: flex; justify-content: space-between; align-items: center; gap: 3rem; background: var(--accent-soft); padding: clamp(1.5rem, 5vw, 4rem); border-radius: var(--radius); }
.penvik-contact h2 { margin-block: 1.25rem; }
.penvik-contact p:not(.penvik-eyebrow) { max-width: 32rem; font-size: .875rem; }
.penvik-contact .penvik-button { flex-shrink: 0; }
.penvik-information { padding-block: 3rem; }
.penvik-information > section { border-bottom: var(--penvik-rule); padding-block: 1.25rem; font-size: var(--penvik-small); }
.penvik-information section p { margin-top: 1rem; max-width: 54rem; }
.penvik-footer { padding-block: 2rem; border-top: var(--penvik-rule); }
.penvik-footer p, .penvik-footer > a:last-child { font-size: .6875rem; }
.penvik-skip { position: absolute; left: 1rem; top: -5rem; padding: 1rem; background: var(--surface); z-index: 1; }
.penvik-skip:focus { top: 1rem; }
@media (max-width: 800px) { .penvik-hero { grid-template-columns: 1fr; gap: 3rem; } .penvik-preview { max-width: 32rem; transform: none; } .penvik-about-grid { grid-template-columns: 1fr; gap: 1.5rem; } .penvik-contact { flex-direction: column; align-items: flex-start; gap: 0; } }
@media (max-width: 560px) { .penvik-header { min-height: 5rem; } .penvik-header nav { gap: 1rem; } .penvik-header nav a:not(:last-child) { display: none; } .penvik-steps { grid-template-columns: 1fr; gap: 2rem; } .penvik-footer { flex-wrap: wrap; } .penvik-footer > a:last-child { flex-basis: 100%; } .penvik-preview-body { padding: 2rem 1rem; } }

.penvik-information h3 { font-size: var(--penvik-small); }