/* CleanWhale / DogOS — discovery, with search before decoration on mobile. */
body.dg { --dg-gutter: 5vw; --dg-yellow: #ffc73b; --dg-muted: #5b6472; }
.dg .dg-skip { position: fixed; top: 10px; left: 10px; transform: translateY(-160%); background: #fff; padding: 12px; z-index: 100; }
.dg .dg-skip:focus { transform: none; }
.dg :is(a, button, input, select, summary):focus-visible { outline: 2px solid var(--dg-blue); outline-offset: 4px; }
.dg .dg-top { border: 0; position: relative; z-index: 20; }
.dg .dg-top-inner { padding: 20px var(--dg-gutter); min-height: 88px; gap: 2vw; }
.dg .dg-logo { gap: 10px; flex: none; }
.dg .dg-logo-whale { height: 40px; }
.dg .dg-logo-lockup { display: grid; gap: 5px; }
.dg .dg-logo-word { font-size: 26px; font-weight: 700; }
.dg .dg-logo-by { font-size: 12px; font-weight: 500; line-height: 1; color: var(--dg-blue); }
.dg .dg-nav { gap: 1.55vw; flex-wrap: nowrap; align-items: center; }
.dg .dg-nav a { font-size: 15px; font-weight: 400; white-space: nowrap; }
.dg .dg-top-cta { background: var(--dg-yellow); color: #000; border-radius: 999px; box-shadow: none; padding: 11px 20px; }
.dg .dg-top-cta:hover { background: #ffea84; color: #000; }
.dg .dg-top-cta .dg-ic { display: none; }
.dg .dg-menu-btn { border: 0; background: #fff; padding: 10px; font: inherit; border-radius: 6px; }
.dg .dg-section { padding: 36px var(--dg-gutter); }
.dg .dg-section-head { margin-bottom: 26px; }
.dg .dg-section-head h2 { margin: 0; font-size: clamp(24px, 2vw, 32px); }
.dg .dg-section-note { color: #000; opacity: .6; font-size: 16px; }
.dg .dg-eyebrow { font-size: 14px; font-weight: 500; color: var(--dg-blue); margin: 0 0 18px; display: flex; gap: 8px; align-items: center; }
.dg .dg-location-dot { width: 7px; height: 7px; background: var(--dg-blue); border-radius: 50%; }
.dg .dg-discovery { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 6vw; margin: 32px var(--dg-gutter) 30px; align-items: start; }
.dg .dg-intro { grid-column: 1; grid-row: 1; padding-top: 12px; }
.dg .dg-intro h1 { font-size: clamp(38px, 4.05vw, 64px); line-height: 1.04; margin: 0 0 20px; }
.dg .dg-intro h1 span { color: var(--dg-blue); }
.dg .dg-intro-text { font-size: 20px; line-height: 1.45; margin: 0 0 24px; }
.dg .dg-discovery-photo { grid-column: 2; grid-row: 1 / 3; margin: 0; position: relative; height: 100%; min-height: 452px; }
.dg .dg-discovery-photo img { display: block; width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; object-position: 56% center; border-radius: var(--dg-r-lg); }
.dg .dg-discovery-photo figcaption { position: absolute; bottom: 20px; left: 20px; right: 20px; padding: 14px 18px; background: #fff; color: #000; border-radius: 6px; font-size: 16px; font-weight: 500; }
.dg .dg-catalog-notice { font-size: 14px; color: #000; opacity: .6; margin: 0 0 14px; }
.dg .dg-discovery-search { grid-column: 1; grid-row: 2; min-width: 0; }
.dg .dg-toggle { margin: 0 0 14px; gap: 8px; }
.dg .dg-toggle label { border-radius: 999px; min-height: 44px; padding: 10px 18px; font-size: 16px; box-shadow: inset 0 0 0 1px var(--dg-line); }
.dg .dg-toggle input:checked + label { background: var(--dg-blue); color: #fff; box-shadow: none; }
.dg .dg-search { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 0; background: transparent; box-shadow: none; border-radius: 0; }
.dg .dg-search-field { display: grid; gap: 3px; min-width: 0; padding: 10px 12px; border: 0; box-shadow: inset 0 0 0 1px var(--dg-line); border-radius: 6px; }
.dg .dg-search-label { opacity: .6; font-size: 14px; font-weight: 400; }
.dg .dg-search-label .dg-ic { display: none; }
.dg .dg-search-field select { min-width: 0; border: 0; border-radius: 0; padding: 0; font-size: 16px; line-height: 1.5; background: #fff; font-weight: 500; }
.dg .dg-search-field:focus-within { box-shadow: inset 0 0 0 2px var(--dg-blue); }
.dg .dg-search-field select:focus-visible { outline-offset: 2px; }
.dg .dg-search-btn { grid-column: 1 / -1; width: 100%; margin: 0; padding: 13px 20px; min-height: 50px; font-size: 16px; }
.dg .dg-ai-inline { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 15px; font-size: 14px; color: #000; }
.dg .dg-ai-inline > span { color: var(--dg-blue); }
.dg .dg-ai-inline:hover > span { text-decoration: underline; }
/* Reused LLM brand vectors. Their original colors belong to the marks. */
.dg .dg-ai-connect { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 14px; margin-top: 10px; }
.dg .dg-ai-connect .dg-ai-inline { margin: 0; align-items: center; min-height: 44px; }
.dg .dg-provider-links { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 20px; margin: 0 0 14px; }
.dg .dg-provider-links:not(.dg-provider-links--compact) { display: grid; grid-template-columns: repeat(3, max-content); justify-content: start; }
.dg .dg-provider-link { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; color: #000; border-radius: 6px; font-size: 16px; }
.dg .dg-provider-link svg { display: block; width: 24px; height: 24px; flex: none; }
.dg .dg-provider-link:hover { color: var(--dg-blue); background: var(--dg-soft); }
.dg .dg-provider-links--compact { margin: 0; gap: 2px; flex-wrap: nowrap; }
.dg .dg-provider-links--compact .dg-provider-link { width: 40px; }
.dg .dg-provider-links--compact svg { width: 22px; height: 22px; }
.dg .dg-ai-mark > svg { display: block; width: 100%; height: 100%; }
.dg .dg-ai-availability { color: var(--dg-muted); opacity: 1; }
.dg .dg-mcp-command { white-space: pre-wrap; overflow-wrap: anywhere; }
.dg .dg-categories { padding-top: 32px; padding-bottom: 36px; }
.dg .dg-cats { gap: 12px; }
.dg .dg-cat { position: relative; display: flex; flex-direction: column; gap: 16px; padding: 18px 14px; border: 0; box-shadow: none; border-radius: var(--dg-r); background: #fff; transition: background .15s; }
.dg .dg-cat:hover { background: var(--dg-soft); color: var(--dg-blue); }
.dg .dg-cat-ic { width: 44px; height: 44px; border-radius: 50%; background: var(--dg-chip-bg); }
.dg .dg-cat-body { gap: 7px; }
.dg .dg-cat-body b { font-size: 18px; line-height: 1.15; }
.dg .dg-cat-body span { font-size: 14px; line-height: 1.4; color: #000; opacity: .6; }
.dg .dg-cat-body em { font-size: 13px; }
.dg .dg-directory { padding-top: 18px; }
.dg .dg-directory-empty { display: flex; justify-content: space-between; align-items: center; gap: 28px; padding: 34px; background: var(--dg-chip-bg); border-radius: var(--dg-r-lg); }
.dg .dg-directory-empty .dg-eyebrow { margin-bottom: 10px; }
.dg .dg-directory-empty h2 { font-size: clamp(24px, 2.1vw, 34px); margin: 0 0 10px; }
.dg .dg-directory-empty p:last-child { margin: 0; font-size: 17px; }
.dg .dg-directory-empty .dg-btn { flex: none; font-size: 16px; min-height: 48px; }
.dg .dg-assistant { display: grid; grid-template-columns: 1fr 1fr; gap: 8vw; align-items: center; padding-top: 48px; padding-bottom: 56px; }
.dg .dg-assistant h2 { font-size: clamp(28px, 2.6vw, 40px); margin: 0 0 16px; }
.dg .dg-assistant-copy > p:not(.dg-eyebrow) { font-size: 17px; line-height: 1.5; margin-bottom: 20px; }
.dg .dg-morelink { display: inline-flex; align-items: center; gap: 14px; min-height: 44px; font-size: 16px; }
.dg .dg-morelink:hover { text-decoration: underline; }
.dg .dg-assistant-example { padding: 28px 0 28px 32px; border-left: 2px solid var(--dg-blue); }
.dg .dg-example-label { color: #000; opacity: .6; font-size: 14px; }
.dg .dg-assistant-example blockquote { font-size: clamp(26px, 2.6vw, 40px); line-height: 1.25; font-weight: 500; margin: 18px 0 24px; }
.dg .dg-example-action { font-size: 16px; display: flex; justify-content: space-between; gap: 14px; }
.dg .dg-example-action:hover { text-decoration: underline; }
.dg .dg-pcard, .dg .dg-panel, .dg .dg-cabinet-form { border: 0; }
.dg .dg-pcard-media { align-self: flex-start; height: 118px; }
.dg .dg-pcard-name { display: block; overflow-wrap: anywhere; }
.dg .dg-pcard-chips .dg-chip { font-size: 14px; }
.dg .dg-price { color: var(--dg-blue); }
.dg .dg-empty { width: 100%; max-width: none; background: var(--dg-soft); }
.dg :is(input, select, textarea) { font-size: 16px; border-radius: 6px; }
.dg .dg-footer { background: var(--dg-soft); border: 0; margin-top: 0; }
.dg .dg-footer-nav { padding: 40px var(--dg-gutter) 28px; gap: 4vw; }
.dg .dg-footer-col h2 { font-size: 16px; }
.dg .dg-footer-col > a:not(.dg-logo) { font-size: 15px; color: var(--dg-blue); opacity: 1; margin-bottom: 7px; }
.dg .dg-footer-brand p { color: #000; opacity: .6; font-size: 15px; }
.dg .dg-footer-bottom { padding: 0 var(--dg-gutter) 28px; }
.dg .dg-footer-bottom p { opacity: 1; color: #5b6472; font-size: 14px; }
.dg .dg-footer-bottom a { color: var(--dg-blue); }
@media (max-width: 1025px) {
  .dg .dg-top-inner { gap: 16px; }
  .dg .dg-top-cta { margin-left: auto; }
  .dg .dg-nav { padding: 16px var(--dg-gutter); box-shadow: 0 0 18px rgba(0, 0, 0, .1); border: 0; }
  .dg .dg-nav.is-open { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 20px; }
  .dg .dg-nav a { min-height: 44px; font-size: 17px; }
  .dg .dg-discovery { column-gap: 4vw; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
  .dg .dg-intro h1 { font-size: 42px; }
  .dg .dg-intro-text { font-size: 18px; }
  .dg .dg-discovery-photo { min-height: 430px; }
  .dg .dg-search { gap: 8px; }
  .dg .dg-search-field { padding: 8px; }
  .dg .dg-search-field select { font-size: 14px; }
  .dg .dg-cat { flex-direction: row; }
  .dg .dg-directory-empty { padding: 28px; }
  .dg .dg-assistant { gap: 5vw; }
}
@media (max-width: 760px) {
  body.dg { --dg-gutter: 20px; }
  .dg .dg-top-inner { padding: 16px var(--dg-gutter); min-height: 76px; gap: 8px; }
  .dg .dg-logo-whale { height: 34px; }
  .dg .dg-logo-word { font-size: 23px; }
  .dg .dg-logo-by { font-size: 12px; }
  .dg .dg-top-cta { padding: 10px 15px; min-height: 44px; font-size: 14px; }
  .dg .dg-menu-btn { width: 40px; height: 44px; flex: none; }
  .dg .dg-discovery { margin: 22px var(--dg-gutter) 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
  .dg .dg-intro { grid-row: auto; grid-column: 1; padding: 0; }
  .dg .dg-eyebrow { font-size: 14px; margin-bottom: 16px; }
  .dg .dg-intro h1 { font-size: clamp(38px, 10.4vw, 52px); margin-bottom: 16px; }
  .dg .dg-intro-text { font-size: 17px; line-height: 1.4; margin-bottom: 24px; }
  .dg .dg-discovery-search { grid-row: 2; grid-column: 1; }
  .dg .dg-searchwrap { padding: 0; box-shadow: none; background: transparent; border-radius: 0; }
  .dg .dg-toggle { margin-bottom: 12px; }
  .dg .dg-toggle label { font-size: 16px; padding: 10px 14px; }
  .dg .dg-search { grid-template-columns: 1fr 1fr; gap: 10px; }
  .dg .dg-search-field { padding: 9px 12px; }
  .dg .dg-search-field:first-child { grid-column: 1 / -1; }
  .dg .dg-search-labeltext { display: inline; }
  .dg .dg-search-field select { font-size: 16px; padding: 0; }
  .dg .dg-search-label { opacity: .6; font-size: 14px; }
  .dg .dg-search-btn { padding: 13px 18px; }
  .dg .dg-ai-inline { font-size: 14px; margin-top: 13px; }
  .dg .dg-ai-connect { align-items: flex-start; flex-direction: column; gap: 0; }
  .dg .dg-discovery-photo { grid-column: 1; grid-row: 3; min-height: 0; height: 192px; margin-top: 26px; }
  .dg .dg-discovery-photo img { object-position: 50% 42%; }
  .dg .dg-discovery-photo figcaption { font-size: 14px; padding: 9px 12px; bottom: 12px; left: 12px; right: auto; }
  .dg .dg-section { padding: 30px var(--dg-gutter); }
  .dg .dg-section-head { margin-bottom: 16px; gap: 8px; }
  .dg .dg-section-head h2 { font-size: 26px; }
  .dg .dg-section-note { font-size: 15px; }
  .dg .dg-cats { grid-template-columns: 1fr 1fr; gap: 16px 12px; }
  .dg .dg-cat { flex-direction: column; gap: 12px; padding: 10px 0; }
  .dg .dg-cat-ic { width: 40px; height: 40px; }
  .dg .dg-cat-ic svg { width: 22px; height: 22px; }
  .dg .dg-cat-body b { font-size: 18px; }
  .dg .dg-cat-body span { display: block; font-size: 14px; }
  .dg .dg-directory { padding-top: 8px; }
  .dg .dg-directory-empty { display: grid; padding: 24px 20px; gap: 22px; }
  .dg .dg-directory-empty h2 { font-size: 28px; }
  .dg .dg-directory-empty p:last-child { font-size: 16px; }
  .dg .dg-assistant { grid-template-columns: 1fr; gap: 28px; padding-top: 12px; }
  .dg .dg-assistant h2 { font-size: 30px; }
  .dg .dg-assistant-copy > p:not(.dg-eyebrow) { font-size: 16px; }
  .dg .dg-assistant-example { padding: 8px 0 8px 20px; }
  .dg .dg-assistant-example blockquote { font-size: 26px; }
  .dg .dg-example-action { font-size: 15px; }
  .dg .dg-footer-nav { grid-template-columns: 1fr 1fr; padding: 30px var(--dg-gutter) 22px; gap: 26px; }
  .dg .dg-footer-brand { grid-column: 1 / -1; }
  .dg .dg-footer-col:not(.dg-footer-brand) { display: block; }
  .dg .dg-footer-col:nth-child(2) { grid-column: 1; grid-row: 2 / 4; }
  .dg .dg-footer-col:nth-child(3) { grid-column: 2; grid-row: 2; }
  .dg .dg-footer-col:last-child { grid-column: 2; grid-row: 3; }
  .dg .dg-footer-col > a:not(.dg-logo) { padding: 4px 0; min-height: 34px; }
  .dg .dg-footer-bottom { padding: 0 var(--dg-gutter) 24px; }
  .dg .dg-footer-bottom p { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .dg .dg-cat { transition: none; }
}