/* oyaka.com: layers on top of the design pages. Desktop is the design exactly; below 1000px the
   layout reflows for tablets and phones, where most ad clicks land. */
/* Fonts served from oyaka.com itself (IBM Plex, SIL Open Font License: /fonts/LICENSE-IBM-Plex.txt).
   Preloaded in each page's head, so text appears in the right font without a visible swap. */
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/plex-sans-400.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/plex-sans-500.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/plex-sans-600.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/plex-sans-700.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/plex-mono-400.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/plex-mono-500.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/plex-mono-600.woff2") format("woff2"); }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* Sharp text: consistent anti-aliasing, kerning and ligatures on every browser. */
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-kerning: normal; }
/* Tilted text renders soft on many screens, so the receipt sits straight. */
.oy-page [style*="rotate(1.5deg)"] { transform: none !important; }
body { margin: 0; }
.oy-page { box-sizing: border-box; overflow-x: hidden; }
.oy-page img, .oy-page svg { max-width: 100%; }
.oy-header { position: relative; }
.oy-trap { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.oy-demo-msg { margin: 0; font-size: 14px; }
.oy-demo-msg.ok { color: #0A4F4B; font-weight: 600; } .oy-demo-msg.err { color: #A3261B; }

/* Product menu */
#oy-product-panel { position: absolute; top: 76px; left: 50%; transform: translateX(-50%); z-index: 40; width: min(1200px, calc(100vw - 32px)); box-sizing: border-box; }
#oy-product-panel[hidden] { display: none !important; }

/* "Watch it work": the reveal waits until the section is on screen */
#watch .oy-in { animation-play-state: paused; }
#watch.oy-play .oy-in { animation-play-state: running; }

/* Cookie banner (only when a Google Ads ID is configured) */
.oy-consent { position: fixed; left: 16px; right: 16px; bottom: 16px; max-width: 560px; margin-left: auto; z-index: 60; background: #FFFFFF;
  border: 1px solid #CDD5D3; border-radius: 14px; padding: 16px 18px; box-shadow: 0 16px 40px rgba(15,26,28,.15); font: 14px/1.5 'IBM Plex Sans', system-ui, sans-serif; color: #0F1A1C; }
.oy-consent p { margin: 0 0 12px; }
.oy-consent button { font: inherit; font-weight: 700; min-height: 42px; padding: 0 18px; border-radius: 8px; cursor: pointer; margin-right: 8px; }
.oy-consent .yes { background: #0E6B66; color: #FFFFFF; border: 0; } .oy-consent .no { background: #FFFFFF; color: #0F1A1C; border: 1px solid #9AA6A5; }

@media (max-width: 1000px) {
  .oy-page [style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) !important; }
  .oy-page [style*="grid-template-columns"] > *, .oy-page [style*="display: flex"] > * { min-width: 0; }
  .oy-page [style*="display: flex"]:not(.oy-header):not(.oy-nav) { flex-wrap: wrap; }
  .oy-page [style*="white-space: nowrap"] { white-space: normal !important; }
  .oy-page [style*="flex-shrink: 0"] { flex-shrink: 1 !important; max-width: 100%; }
  .oy-page [style*="transform: rotate"] { transform: none !important; }
  .oy-page h1, .oy-page h2, .oy-page p, .oy-page span, .oy-page a { overflow-wrap: anywhere; }
  .oy-page .oy-tagline span { overflow-wrap: normal; }
  .oy-page .oy-tagline { flex: 0 0 auto !important; height: auto !important; flex-wrap: nowrap !important; }
  .oy-page :has(> .oy-tagline) { flex-wrap: nowrap !important; }   /* stacked columns must not wrap: it stretches the tagline's bar */   /* the tagline sizes itself to fit (clamp), never breaks mid-word */
  .oy-page header, .oy-page section, .oy-page footer, .oy-page main { padding-left: 20px !important; padding-right: 20px !important; }
  .oy-page [style*="margin: 0 96px"], .oy-page [style*="margin: 72px 96px"], .oy-page [style*="margin: 0 96px 112px"] { margin-left: 16px !important; margin-right: 16px !important; }
  .oy-page [style*="padding: 64px"] { padding: 28px 20px !important; }
  .oy-page [style*="gap: 72px"], .oy-page [style*="gap: 64px"], .oy-page [style*="gap: 56px"] { gap: 32px !important; }
  .oy-page [style*="max-width"], .oy-page [style*="width: "] { max-width: 100% !important; }
  .oy-page [style*="justify-content: space-between"] { flex-wrap: wrap; gap: 16px; }
  .oy-page h1 { font-size: 40px !important; line-height: 1.08 !important; }
  .oy-page h2 { font-size: 30px !important; line-height: 1.15 !important; }
  .oy-page p { font-size: 17px; }
  .oy-page table { display: block; overflow-x: auto; }
  /* header: logo and the free-report button; everything else is in the footer */
  .oy-nav > a:not(.oy-cta), .oy-nav > span { display: none !important; }
  .oy-header a:not(.oy-logo):not(.oy-cta), .oy-header [aria-hidden="true"][style*="width: 1px"] { display: none !important; }
  .oy-nav .oy-cta { min-height: 42px !important; padding: 0 14px !important; font-size: 14px !important; }
  #oy-product-panel { top: 64px; }
  .oy-page [style*="font-size: 76px"] { font-size: 40px !important; }
  .oy-page [style*="font-size: 48px"], .oy-page [style*="font-size: 44px"] { font-size: 30px !important; }
  .oy-page [style*="min-height: 52px"], .oy-page [style*="min-height: 56px"] { white-space: normal !important; }
}
/* Tablets: the headline stays clearly larger than the tagline */
@media (min-width: 600px) and (max-width: 1000px) {
  .oy-page [style*="font-size: 76px"] { font-size: 56px !important; }
}
/* Small laptops (1001-1240px): slimmer margins and a tighter menu so everything fits */
@media (min-width: 1001px) and (max-width: 1240px) {
  .oy-page header, .oy-page section, .oy-page footer { padding-left: 40px !important; padding-right: 40px !important; }
  .oy-page [style*="margin: 0 96px"], .oy-page [style*="margin: 72px 96px"] { margin-left: 40px !important; margin-right: 40px !important; }
  .oy-nav { gap: 18px !important; }
  .oy-page [style*="gap: 72px"] { gap: 40px !important; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }