/* ==========================================================================
   OneHub Design System — Drop-in stylesheet (v1)
   Single file: tokens + base + typography + components.
   Pair with: ./fonts/*.woff2  and  ./assets/logo-*.svg
   ========================================================================== */

/* -------- Fonts -------- */
@font-face {
  font-family: 'FK Grotesk Neue';
  src: url('./fonts/FKGroteskNeue-Black.woff2') format('woff2');
  font-weight: 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'FK Grotesk Neue';
  src: url('./fonts/FKGroteskNeue-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'SVN-Circular';
  src: url('./fonts/SVN-Circular-Book.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'SVN-Circular';
  src: url('./fonts/SVN-Circular-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'SVN-Circular';
  src: url('./fonts/SVN-Circular-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'SVN-Circular';
  src: url('./fonts/SVN-Circular-Black.woff2') format('woff2');
  font-weight: 900; font-style: normal; font-display: swap;
}

/* ==========================================================================
   Tokens
   ========================================================================== */
:root {
  /* Brand */
  --oh-blue:        #0246FF;
  --oh-cyan:        #02D8FF;
  --oh-blue-deep:   #062173;
  --oh-blue-004:    #0044FD;
  --oh-cyan-025:    #25D8FD;
  --oh-gradient:        linear-gradient(90deg, #00DAFF 0%, #0043FF 100%);
  --oh-gradient-diag:   linear-gradient(135deg, #00DAFF 0%, #0043FF 100%);
  --oh-gradient-vert:   linear-gradient(180deg, #07D8FD 0%, #0044FD 100%);
  --oh-blue-50:   #EBF0FF;
  --oh-blue-100:  #C5D4FF;
  --oh-blue-200:  #B1C1FB;
  --oh-blue-300:  #879DF7;
  --oh-blue-400:  #6E80AB;

  /* Neutral */
  --oh-black:     #0F0F0F;
  --oh-gray-900:  #1A1A1A;
  --oh-gray-700:  #4A4A4A;
  --oh-gray-500:  #717171;
  --oh-gray-300:  #B8B8B8;
  --oh-gray-200:  #D9D9D9;
  --oh-gray-100:  #F5F5F5;
  --oh-gray-50:   #FAFAFA;
  --oh-white:     #FFFFFF;

  /* Semantic state */
  --oh-danger:    #C62828;
  --oh-success:   #00A886;
  --oh-success-deep: #006655;

  /* Foreground */
  --fg-1: var(--oh-black);
  --fg-2: var(--oh-gray-900);
  --fg-3: var(--oh-gray-700);
  --fg-4: var(--oh-gray-500);
  --fg-5: var(--oh-gray-300);
  --fg-brand: var(--oh-blue);
  --fg-brand-deep: var(--oh-blue-deep);
  --fg-on-brand: var(--oh-white);

  /* Background */
  --bg-1: var(--oh-white);
  --bg-2: var(--oh-gray-100);
  --bg-3: var(--oh-gray-50);
  --bg-brand-soft: var(--oh-blue-50);
  --bg-brand: var(--oh-blue);
  --bg-brand-gradient: var(--oh-gradient);

  /* Border */
  --border-1: var(--oh-gray-200);
  --border-2: var(--oh-gray-300);
  --border-brand: var(--oh-cyan);
  --border-brand-soft: var(--oh-blue-100);

  /* Type stacks */
  --font-display: 'FK Grotesk Neue', 'SVN-Circular', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body:    'SVN-Circular', 'FK Grotesk Neue', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Type scale */
  --text-hero:    clamp(56px, 7vw, 96px);
  --text-h1:      48px;
  --text-h2:      32px;
  --text-h3:      24px;
  --text-h4:      20px;
  --text-h5:      16px;
  --text-body:    16px;
  --text-body-sm: 14px;
  --text-caption: 12px;
  --text-micro:   10px;

  --lh-tight: 1.1;
  --lh-snug:  1.2;
  --lh-normal:1.4;
  --lh-loose: 1.6;

  --tracking-tight:  -0.015em;
  --tracking-snug:   -0.010em;
  --tracking-normal: 0;

  /* Spacing (4px base) */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10:40px;
  --space-12:48px; --space-14:56px; --space-16:64px; --space-20:80px; --space-24:96px;

  /* Radii */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(15,15,15,.04);
  --shadow-sm: 0 2px 8px rgba(15,15,15,.06);
  --shadow-md: 0 8px 24px rgba(6,33,115,.08);
  --shadow-lg: 0 24px 48px rgba(6,33,115,.12);
  --shadow-offset:      -2px 2px 0 0 rgba(0,0,0,.35);
  --shadow-offset-soft: -2px 2px 0 0 rgba(6,33,115,.15);

  /* Motion */
  --ease-standard: cubic-bezier(0.2, 0.0, 0.0, 1.0);
  --ease-out:      cubic-bezier(0.0, 0.0, 0.2, 1.0);
  --ease-in:       cubic-bezier(0.4, 0.0, 1.0, 1.0);
  --dur-fast: 150ms;
  --dur-med:  240ms;
  --dur-slow: 400ms;

  /* Layout */
  --container-max:     1200px;
  --container-narrow:   960px;
  --container-reading:  720px;
}

/* ==========================================================================
   Base reset
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-body);
  line-height: var(--lh-normal);
  color: var(--fg-2);
  background: var(--bg-1);
  margin: 0;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--oh-blue); text-decoration: none; transition: color var(--dur-fast) var(--ease-standard); }
a:hover { color: var(--oh-blue-deep); }
a:focus-visible { outline: 2px solid var(--oh-cyan); outline-offset: 2px; }
hr { border: 0; height: 1px; background: var(--border-1); margin: var(--space-8) 0; }
::selection { background: var(--oh-blue-50); color: var(--oh-blue-deep); }

/* ==========================================================================
   Typography classes
   ========================================================================== */
.oh-hero {
  font-family: var(--font-display);
  font-weight: 900; font-size: var(--text-hero);
  line-height: var(--lh-tight); letter-spacing: var(--tracking-tight);
  color: var(--fg-1); margin: 0;
}
.oh-h1 {
  font-family: var(--font-display); font-weight: 900;
  font-size: var(--text-h1); line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight); color: var(--fg-1); margin: 0;
}
.oh-h2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--text-h2); line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug); color: var(--fg-1); margin: 0;
}
.oh-h3 {
  font-family: var(--font-body); font-weight: 700;
  font-size: var(--text-h3); line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight); color: var(--fg-brand-deep); margin: 0;
}
.oh-h4 {
  font-family: var(--font-body); font-weight: 700;
  font-size: var(--text-h4); line-height: var(--lh-snug);
  color: var(--fg-brand-deep); margin: 0;
}
.oh-h5 {
  font-family: var(--font-body); font-weight: 700;
  font-size: var(--text-h5); line-height: var(--lh-snug);
  color: var(--fg-1); margin: 0;
}
.oh-body {
  font-family: var(--font-body); font-weight: 400;
  font-size: var(--text-body); line-height: var(--lh-normal); color: var(--fg-2);
}
.oh-body-emphasis { font-weight: 500; color: var(--fg-1); }
.oh-label {
  font-family: var(--font-body); font-weight: 500;
  font-size: var(--text-body-sm); line-height: var(--lh-snug); color: var(--fg-2);
}
.oh-caption {
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--text-caption); line-height: var(--lh-snug); color: var(--fg-4);
}
.oh-micro {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--text-micro); line-height: var(--lh-tight); color: var(--fg-brand-deep);
}
.oh-eyebrow {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--text-caption); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--fg-brand);
}

/* Utilities */
.oh-gradient-text {
  background: var(--oh-gradient);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.oh-bar { width: 48px; height: 2px; background: var(--oh-blue); border: 0; margin: 12px 0; }
.oh-footer-bar { height: 12px; background: var(--oh-gradient); }

/* ==========================================================================
   Layout
   ========================================================================== */
.oh-container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-6);
}
.oh-container-narrow  { max-width: var(--container-narrow); margin: 0 auto; padding: 0 var(--space-6); }
.oh-container-reading { max-width: var(--container-reading); margin: 0 auto; padding: 0 var(--space-6); }

.oh-section { padding: var(--space-14) 0; }
.oh-section-tight  { padding: var(--space-10) 0; }
.oh-section-tinted { background: var(--bg-2); }
.oh-section-soft   { background: var(--bg-brand-soft); }
.oh-section-brand  { background: var(--oh-blue); color: #fff; }
.oh-section-gradient {
  background: var(--oh-gradient); color: #fff;
  position: relative; overflow: hidden;
}
.oh-section-gradient .oh-h1,
.oh-section-gradient .oh-h2,
.oh-section-gradient .oh-h3,
.oh-section-gradient .oh-hero { color: #fff; }

/* Section header convention: number + title + bar + body */
.oh-section-head { margin-bottom: var(--space-6); }
.oh-section-head .oh-bar { margin-top: var(--space-3); }

/* Grid helpers */
.oh-grid { display: grid; gap: var(--space-4); }
.oh-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.oh-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.oh-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 768px) {
  .oh-grid-2, .oh-grid-3, .oh-grid-4 { grid-template-columns: 1fr; }
}

/* Stack */
.oh-stack > * + * { margin-top: var(--space-4); }
.oh-stack-lg > * + * { margin-top: var(--space-8); }

/* ==========================================================================
   Header (top bar with logo)
   ========================================================================== */
.oh-header {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--border-1);
  background: var(--bg-1);
}
.oh-header img { height: 32px; }
.oh-header nav { margin-left: auto; display: flex; gap: var(--space-6); }
.oh-header nav a {
  font-family: var(--font-body); font-weight: 500;
  font-size: var(--text-body-sm); color: var(--fg-2);
}
.oh-header nav a:hover { color: var(--oh-blue); }

/* ==========================================================================
   Hero (full-bleed gradient cover)
   ========================================================================== */
.oh-hero-block {
  position: relative;
  background: var(--oh-gradient);
  color: #fff;
  padding: var(--space-20) var(--space-6);
  overflow: hidden;
}
.oh-hero-block .oh-hero,
.oh-hero-block .oh-h1,
.oh-hero-block .oh-h2 { color: #fff; }
.oh-hero-block .oh-eyebrow { color: rgba(255,255,255,.85); }
.oh-hero-block .oh-body { color: rgba(255,255,255,.92); max-width: 640px; }

/* ==========================================================================
   Cards
   ========================================================================== */
.oh-card {
  background: #fff;
  border-radius: var(--radius-md);
  padding: var(--space-5);
  box-shadow: var(--shadow-md);
  transition: transform var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard);
}
.oh-card-lg { padding: var(--space-8); border-radius: var(--radius-lg); }
.oh-card-flat { box-shadow: none; border: 1px solid var(--border-1); }
.oh-card-tint { background: var(--bg-brand-soft); }
.oh-card-brand {
  background: var(--oh-blue); color: #fff;
}
.oh-card-brand .oh-h3, .oh-card-brand .oh-h4 { color: #fff; }
.oh-card-gradient {
  background: var(--oh-gradient); color: #fff;
}
.oh-card-gradient .oh-h3, .oh-card-gradient .oh-h4 { color: #fff; }
.oh-card-offset { box-shadow: var(--shadow-offset); }
.oh-card-hover:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }

/* ==========================================================================
   Buttons
   ========================================================================== */
.oh-btn {
  font-family: var(--font-body); font-weight: 500;
  font-size: var(--text-body-sm);
  border-radius: var(--radius-md);
  padding: 10px 20px;
  cursor: pointer; border: 0;
  display: inline-flex; align-items: center; gap: 8px;
  transition: all var(--dur-fast) var(--ease-standard);
  background: var(--oh-blue); color: #fff;
}
.oh-btn:hover { background: var(--oh-blue-004); }
.oh-btn:active { transform: scale(.98); }
.oh-btn-gradient { background: var(--oh-gradient); color: #fff; }
.oh-btn-secondary {
  background: #fff; color: var(--oh-blue);
  border: 1px solid var(--oh-blue);
}
.oh-btn-secondary:hover { background: var(--oh-blue-50); }
.oh-btn-ghost {
  background: transparent; color: var(--fg-2);
  border: 1px solid var(--oh-gray-300);
}
.oh-btn-ghost:hover { background: var(--oh-gray-100); }
.oh-btn-disabled, .oh-btn:disabled {
  background: var(--oh-gray-100); color: var(--oh-gray-300); cursor: not-allowed;
}
.oh-btn-sm { padding: 6px 14px; font-size: 12px; border-radius: 8px; }
.oh-btn-lg { padding: 14px 28px; font-size: 16px; }

/* ==========================================================================
   Badges & tags
   ========================================================================== */
.oh-badge {
  display: inline-block;
  font-family: var(--font-body); font-weight: 500;
  font-size: 11px; padding: 2px 8px;
  border-radius: var(--radius-sm);
  background: var(--oh-blue-50); color: var(--oh-blue);
}
.oh-badge-brand { background: var(--oh-blue); color: #fff; }
.oh-badge-cyan  { background: var(--oh-cyan); color: var(--oh-blue-deep); }
.oh-badge-success { background: #E1F5EE; color: var(--oh-success-deep); }
.oh-badge-danger  { background: #FDECEC; color: var(--oh-danger); }
.oh-badge-neutral { background: var(--oh-gray-100); color: var(--fg-3); }

/* ==========================================================================
   Section title with gem (signature OneHub pattern)
   ========================================================================== */
.oh-section-title {
  display: flex; align-items: center; gap: var(--space-3);
}
.oh-gem {
  width: 20px; height: 15px;
  fill: var(--oh-cyan); flex-shrink: 0;
}

/* ==========================================================================
   Stepper (numbered process steps)
   ========================================================================== */
.oh-stepper {
  display: grid; gap: var(--space-3);
  border-radius: var(--radius-sm);
}
.oh-stepper-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.oh-stepper-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 768px) {
  .oh-stepper-cols-2, .oh-stepper-cols-3 { grid-template-columns: 1fr; }
}
.oh-step {
  display: flex; gap: var(--space-3);
  padding: var(--space-4);
  background: #fff;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-1);
}
.oh-step-num {
  flex-shrink: 0;
  width: 24px; height: 24px;
  border-radius: var(--radius-full);
  background: var(--oh-blue); color: #fff;
  font-family: var(--font-display); font-weight: 700;
  font-size: 11px;
  display: flex; align-items: center; justify-content: center;
}
.oh-step-title {
  font-family: var(--font-body); font-weight: 700;
  font-size: var(--text-body-sm); color: var(--fg-brand-deep);
  margin: 0 0 var(--space-1);
}
.oh-step-body {
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--text-caption); color: var(--fg-3);
  margin: 0; line-height: var(--lh-normal);
}

/* ==========================================================================
   SOP-style "process output" callout
   ========================================================================== */
.oh-process-output {
  border-left: 3px solid var(--oh-blue);
  padding: var(--space-3) var(--space-5);
  background: var(--bg-brand-soft);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.oh-process-output strong { color: var(--oh-blue-deep); }

/* ==========================================================================
   Forms
   ========================================================================== */
.oh-input, .oh-textarea, .oh-select {
  font-family: var(--font-body); font-size: var(--text-body-sm);
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--border-2);
  border-radius: var(--radius-md);
  background: #fff;
  color: var(--fg-2);
  transition: border-color var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard);
}
.oh-input:focus, .oh-textarea:focus, .oh-select:focus {
  outline: 0;
  border-color: var(--oh-blue);
  box-shadow: 0 0 0 3px var(--oh-blue-50);
}
.oh-textarea { min-height: 120px; resize: vertical; }
.oh-field { display: flex; flex-direction: column; gap: var(--space-2); }
.oh-field-label {
  font-family: var(--font-body); font-weight: 500;
  font-size: var(--text-body-sm); color: var(--fg-2);
}
.oh-field-help {
  font-family: var(--font-display); font-size: var(--text-caption); color: var(--fg-4);
}

/* ==========================================================================
   Tables
   ========================================================================== */
.oh-table {
  width: 100%; border-collapse: collapse;
  font-family: var(--font-body); font-size: var(--text-body-sm);
}
.oh-table th, .oh-table td {
  text-align: left; padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-1);
}
.oh-table thead th {
  font-weight: 700; color: var(--fg-brand-deep);
  background: var(--bg-2);
  border-bottom: 1px solid var(--border-2);
}
.oh-table tbody tr:hover { background: var(--bg-3); }

/* ==========================================================================
   Lists
   ========================================================================== */
.oh-list { list-style: none; padding: 0; margin: 0; }
.oh-list > li {
  position: relative; padding-left: var(--space-6); margin-bottom: var(--space-3);
  font-family: var(--font-body); font-size: var(--text-body); color: var(--fg-2);
}
.oh-list > li::before {
  content: ''; position: absolute; left: 0; top: 0.55em;
  width: 8px; height: 8px;
  background: var(--oh-cyan);
  clip-path: polygon(50% 0, 100% 38%, 81% 100%, 19% 100%, 0 38%);
}

/* ==========================================================================
   Footer
   ========================================================================== */
.oh-footer {
  background: var(--oh-blue-deep); color: #fff;
  padding: var(--space-12) var(--space-6) var(--space-8);
}
.oh-footer h5 { color: #fff; margin-bottom: var(--space-3); }
.oh-footer .oh-body { color: rgba(255,255,255,.78); }
.oh-footer a { color: rgba(255,255,255,.92); }
.oh-footer a:hover { color: var(--oh-cyan); }
.oh-footer .oh-footer-bar { margin-top: var(--space-10); }

/* Contact line — ALL CAPS labels */
.oh-contact-line {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--text-caption); letter-spacing: 0.04em;
}
.oh-contact-line .label { text-transform: uppercase; color: var(--oh-cyan); margin-right: 6px; }

/* ==========================================================================
   A4 page (paginated, editable, exportable)
   --------------------------------------------------------------------------
   Use .oh-doc as the deck container; each .oh-a4 child is one A4 page.
   Pages render at exact A4 size (210×297mm). Print rules paginate cleanly
   for a one-click PDF export via the browser's print dialog.
   ========================================================================== */
.oh-doc {
  background: #E5E7EB;
  min-height: 100vh;
  padding: 24mm 0 32mm;
  display: flex; flex-direction: column; align-items: center;
  gap: 16mm;
}

.oh-a4 {
  width: 210mm;
  min-height: 297mm;
  height: 297mm;            /* fixed for predictable export */
  background: #fff;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(6, 33, 115, 0.15);
  page-break-after: always;
  break-after: page;
  /* Inner content padding — generous margin so footer bar + logo don't overlap content */
  padding: 22mm 18mm 24mm;
}
.oh-a4:last-child { page-break-after: auto; break-after: auto; }

.oh-a4 > .oh-footer-bar {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 4mm;
}
.oh-a4-logo {
  position: absolute; top: 10mm; left: 18mm;
  height: 8mm;
}
.oh-a4-page-num {
  position: absolute; bottom: 8mm; right: 18mm;
  font-family: var(--font-display); font-weight: 700;
  font-size: 9pt; color: var(--fg-4); letter-spacing: 0.08em;
}

/* A cover page (full-bleed gradient, no inner padding) */
.oh-a4-cover {
  padding: 0;
  background: var(--oh-gradient);
  color: #fff;
}
.oh-a4-cover .oh-cover-inner {
  padding: 32mm 18mm;
  height: 100%;
  display: flex; flex-direction: column; justify-content: space-between;
  position: relative; z-index: 1;
}
.oh-a4-cover .oh-a4-page-num { color: rgba(255,255,255,.7); }

/* ==========================================================================
   Editing toolbar — visible on screen, hidden in print
   ========================================================================== */
.oh-toolbar {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 24px;
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border-1);
  font-family: var(--font-body); font-size: 13px;
}
.oh-toolbar .oh-toolbar-title {
  font-weight: 700; color: var(--fg-brand-deep);
}
.oh-toolbar .oh-toolbar-spacer { flex: 1; }
.oh-toolbar .oh-toolbar-status {
  font-size: 12px; color: var(--fg-4);
  font-family: var(--font-display);
}
.oh-toolbar button {
  font-family: var(--font-body); font-weight: 500; font-size: 13px;
  padding: 8px 14px; border-radius: 8px;
  border: 1px solid var(--border-2); background: #fff; color: var(--fg-2);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-standard);
  display: inline-flex; align-items: center; gap: 6px;
}
.oh-toolbar button:hover { background: var(--oh-gray-100); }
.oh-toolbar button.primary {
  background: var(--oh-blue); border-color: var(--oh-blue); color: #fff;
}
.oh-toolbar button.primary:hover { background: var(--oh-blue-004); }
.oh-toolbar button.gradient {
  background: var(--oh-gradient); border-color: transparent; color: #fff;
}

/* When editing mode is on, show focus rings on contenteditable */
.editable {
  outline: 0;
  border-radius: 4px;
  transition: background var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard);
}
.oh-doc.is-editing .editable:hover {
  background: rgba(2, 70, 255, 0.04);
  box-shadow: 0 0 0 2px rgba(2, 70, 255, 0.15);
}
.oh-doc.is-editing .editable:focus {
  background: rgba(2, 70, 255, 0.06);
  box-shadow: 0 0 0 2px var(--oh-blue);
}
/* When NOT editing, contenteditable should not show pointer caret */
.oh-doc:not(.is-editing) .editable { pointer-events: none; user-select: none; }
.oh-doc:not(.is-editing) [contenteditable="true"] { -webkit-user-modify: read-only; }

/* ==========================================================================
   Print rules — clean PDF export
   ========================================================================== */
@media print {
  html, body { background: #fff !important; margin: 0; padding: 0; }
  .oh-toolbar, .oh-doc-toolbar, .no-print { display: none !important; }
  .oh-doc { background: #fff !important; padding: 0 !important; gap: 0 !important; }
  .oh-a4 {
    box-shadow: none !important;
    margin: 0 !important;
    page-break-after: always;
    break-after: page;
  }
  .oh-a4:last-child { page-break-after: auto; break-after: auto; }
  /* Force backgrounds & gradients to print */
  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
  @page { size: A4; margin: 0; }
}

/* ==========================================================================
   Decorative watermark
   ========================================================================== */
.oh-watermark {
  position: absolute;
  opacity: 0.08;
  pointer-events: none;
  z-index: 0;
}
.oh-watermark.tr { top: -60px; right: -60px; width: 320px; }
.oh-watermark.bl { bottom: -60px; left: -60px; width: 280px; }

/* Ensure content sits above watermarks */
.oh-section-gradient > .oh-container,
.oh-hero-block > .oh-container { position: relative; z-index: 1; }