/* Generated by scripts/site_art.py — icons and decorations for the marketing pages. */
:root { --art-ink: #1d1d1f; --art-accent: #0071e3; }
.ic-technology { --ic: url("data:image/svg+xml,"); --ic-ink: url("data:image/svg+xml,"); --ic-accent: url("data:image/svg+xml,"); }
.ic-hospitality { --ic: url("data:image/svg+xml,"); --ic-ink: url("data:image/svg+xml,"); --ic-accent: url("data:image/svg+xml,"); }
.ic-retail { --ic: url("data:image/svg+xml,"); --ic-ink: url("data:image/svg+xml,"); --ic-accent: url("data:image/svg+xml,"); }
.ic-financial-services { --ic: url("data:image/svg+xml,"); --ic-ink: url("data:image/svg+xml,"); --ic-accent: url("data:image/svg+xml,"); }
.ic-manufacturing { --ic: url("data:image/svg+xml,"); --ic-ink: url("data:image/svg+xml,"); --ic-accent: url("data:image/svg+xml,"); }
.ic-logistics { --ic: url("data:image/svg+xml,"); --ic-ink: url("data:image/svg+xml,"); --ic-accent: url("data:image/svg+xml,"); }
.ic-professional-services { --ic: url("data:image/svg+xml,"); --ic-ink: url("data:image/svg+xml,"); --ic-accent: url("data:image/svg+xml,"); }
.ic-healthcare-administration { --ic: url("data:image/svg+xml,"); --ic-ink: url("data:image/svg+xml,"); --ic-accent: url("data:image/svg+xml,"); }
.ic-education { --ic: url("data:image/svg+xml,"); --ic-ink: url("data:image/svg+xml,"); --ic-accent: url("data:image/svg+xml,"); }
.ic-support-triage { --ic: url("data:image/svg+xml,"); --ic-ink: url("data:image/svg+xml,"); --ic-accent: url("data:image/svg+xml,"); }
.ic-release-sign-off { --ic: url("data:image/svg+xml,"); --ic-ink: url("data:image/svg+xml,"); --ic-accent: url("data:image/svg+xml,"); }
.ic-incident-response { --ic: url("data:image/svg+xml,"); --ic-ink: url("data:image/svg+xml,"); --ic-accent: url("data:image/svg+xml,"); }
.ic-customer-onboarding { --ic: url("data:image/svg+xml,"); --ic-ink: url("data:image/svg+xml,"); --ic-accent: url("data:image/svg+xml,"); }
.ic-employee-onboarding { --ic: url("data:image/svg+xml,"); --ic-ink: url("data:image/svg+xml,"); --ic-accent: url("data:image/svg+xml,"); }
.ic-complaints-handling { --ic: url("data:image/svg+xml,"); --ic-ink: url("data:image/svg+xml,"); --ic-accent: url("data:image/svg+xml,"); }
.ic-returns-and-claims { --ic: url("data:image/svg+xml,"); --ic-ink: url("data:image/svg+xml,"); --ic-accent: url("data:image/svg+xml,"); }
.ic-delivery-exceptions { --ic: url("data:image/svg+xml,"); --ic-ink: url("data:image/svg+xml,"); --ic-accent: url("data:image/svg+xml,"); }
.ic-shift-handover { --ic: url("data:image/svg+xml,"); --ic-ink: url("data:image/svg+xml,"); --ic-accent: url("data:image/svg+xml,"); }
.ic-purchase-approvals { --ic: url("data:image/svg+xml,"); --ic-ink: url("data:image/svg+xml,"); --ic-accent: url("data:image/svg+xml,"); }
.ic-change-control { --ic: url("data:image/svg+xml,"); --ic-ink: url("data:image/svg+xml,"); --ic-accent: url("data:image/svg+xml,"); }
.ic-access-and-offboarding { --ic: url("data:image/svg+xml,"); --ic-ink: url("data:image/svg+xml,"); --ic-accent: url("data:image/svg+xml,"); }
.ic-pain { --ic: url("data:image/svg+xml,"); --ic-ink: url("data:image/svg+xml,"); --ic-accent: url("data:image/svg+xml,"); }
.ic-role { --ic: url("data:image/svg+xml,"); --ic-ink: url("data:image/svg+xml,"); --ic-accent: url("data:image/svg+xml,"); }
.ic-metric { --ic: url("data:image/svg+xml,"); --ic-ink: url("data:image/svg+xml,"); --ic-accent: url("data:image/svg+xml,"); }
.ic-eye { --ic: url("data:image/svg+xml,"); --ic-ink: url("data:image/svg+xml,"); --ic-accent: url("data:image/svg+xml,"); }
.ic-pen { --ic: url("data:image/svg+xml,"); --ic-ink: url("data:image/svg+xml,"); --ic-accent: url("data:image/svg+xml,"); }
.ic-arrow { --ic: url("data:image/svg+xml,"); --ic-ink: url("data:image/svg+xml,"); --ic-accent: url("data:image/svg+xml,"); }
.ic-doc { --ic: url("data:image/svg+xml,"); --ic-ink: url("data:image/svg+xml,"); --ic-accent: url("data:image/svg+xml,"); }
.ic-chat { --ic: url("data:image/svg+xml,"); --ic-ink: url("data:image/svg+xml,"); --ic-accent: url("data:image/svg+xml,"); }
.ic-loop { --ic: url("data:image/svg+xml,"); --ic-ink: url("data:image/svg+xml,"); --ic-accent: url("data:image/svg+xml,"); }
.ic-plug { --ic: url("data:image/svg+xml,"); --ic-ink: url("data:image/svg+xml,"); --ic-accent: url("data:image/svg+xml,"); }
.ic-spark { --ic: url("data:image/svg+xml,"); --ic-ink: url("data:image/svg+xml,"); --ic-accent: url("data:image/svg+xml,"); }
.ic-lock { --ic: url("data:image/svg+xml,"); --ic-ink: url("data:image/svg+xml,"); --ic-accent: url("data:image/svg+xml,"); }
.topic-technology { --hue: 212; }
.topic-hospitality { --hue: 28; }
.topic-retail { --hue: 340; }
.topic-financial-services { --hue: 160; }
.topic-manufacturing { --hue: 200; }
.topic-logistics { --hue: 40; }
.topic-professional-services { --hue: 260; }
.topic-healthcare-administration { --hue: 185; }
.topic-education { --hue: 300; }
.topic-support-triage { --hue: 212; }
.topic-release-sign-off { --hue: 150; }
.topic-incident-response { --hue: 10; }
.topic-customer-onboarding { --hue: 230; }
.topic-employee-onboarding { --hue: 275; }
.topic-complaints-handling { --hue: 330; }
.topic-returns-and-claims { --hue: 20; }
.topic-delivery-exceptions { --hue: 45; }
.topic-shift-handover { --hue: 190; }
.topic-purchase-approvals { --hue: 140; }
.topic-change-control { --hue: 255; }
.topic-access-and-offboarding { --hue: 350; }
.tool-freshdesk { --tc: #25c16f; --mono: "Fd"; }
.tool-zendesk { --tc: #03363d; --mono: "Zd"; --logo: url(/logos/zendesk.svg); }
.tool-intercom { --tc: #1f8ded; --mono: "Ic"; --logo: url(/logos/intercom.svg); }
.tool-servicenow { --tc: #62d84e; --mono: "Sn"; }
.tool-custify { --tc: #6c5ce7; --mono: "Cu"; }
.tool-salesforce { --tc: #00a1e0; --mono: "Sf"; }
.tool-hubspot { --tc: #ff7a59; --mono: "Hs"; --logo: url(/logos/hubspot.svg); }
.tool-jira-confluence { --tc: #0052cc; --mono: "Ji"; --logo: url(/logos/jira-confluence.svg); }
.tool-linear { --tc: #5e6ad2; --mono: "Li"; --logo: url(/logos/linear.svg); }
.tool-clickup { --tc: #7b68ee; --mono: "Cu"; --logo: url(/logos/clickup.svg); }
.tool-asana { --tc: #f06a6a; --mono: "As"; --logo: url(/logos/asana.svg); }
.tool-monday { --tc: #ff3d57; --mono: "Mo"; }
.tool-trello { --tc: #0079bf; --mono: "Tr"; --logo: url(/logos/trello.svg); }
.tool-google-docs { --tc: #4285f4; --mono: "Gd"; --logo: url(/logos/google-docs.svg); }
.tool-notion { --tc: #1f1f1f; --mono: "No"; --logo: url(/logos/notion.svg); }
.tool-slack { --tc: #4a154b; --mono: "Sl"; }
.tool-microsoft-teams { --tc: #6264a7; --mono: "Tm"; }
.tool-granola { --tc: #d97706; --mono: "Gr"; }
.tool-github { --tc: #24292f; --mono: "Gh"; --logo: url(/logos/github.svg); }
.tool-gitlab { --tc: #fc6d26; --mono: "Gl"; --logo: url(/logos/gitlab.svg); }
.tool-figma { --tc: #f24e1e; --mono: "Fg"; --logo: url(/logos/figma.svg); }
/* Hero: a soft tinted glow behind the demo, an icon pill in the eyebrow */
.pp-hero { --hue: 212; position: relative; }
.pp-hero::before { content: ""; position: absolute; inset: -40px -10% auto auto; width: 56%; height: 120%; background: radial-gradient(closest-side, hsl(var(--hue) 90% 60% / 0.16), transparent 70%); z-index: -1; pointer-events: none; }
.pp-hero .eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 999px; background: hsl(var(--hue) 80% 96%); color: hsl(var(--hue) 70% 32%); border: 1px solid hsl(var(--hue) 60% 88%); text-transform: none; letter-spacing: 0; font-size: 12.5px; }
.pp-hero .eyebrow::before { content: ""; width: 24px; height: 24px; border-radius: 50%; background: hsl(var(--hue) 75% 48%) var(--ic) center / 14px no-repeat; flex-shrink: 0; }
.pp-demo { position: relative; }
.pp-demo .ticket-card { border-left: 3px solid hsl(var(--hue) 75% 52%); }
.pp-demo .answer-card { position: relative; }
.pp-demo .answer-card::before { content: ""; position: absolute; top: -8px; left: 28px; width: 16px; height: 16px; background: var(--surface); transform: rotate(45deg); box-shadow: -2px -2px 3px rgba(0,0,0,0.04); }
.pp-demo .a-step { position: relative; padding-left: 0; }
.pp-demo .a-step small::before { content: "→ "; }
/* Reveal: cards slide in as the demo answers; sections fade in on scroll */
@media (prefers-reduced-motion: no-preference) {
.pp-demo > * { opacity: 0; transform: translateY(10px); animation: art-in 0.5s ease-out forwards; }
.pp-demo .ticket-card { animation-delay: 0.1s; }
.pp-demo .answer-card { animation-delay: 0.6s; }
.pp-demo .flowline span { opacity: 0; animation: art-in 0.35s ease-out forwards; }
.pp-demo .flowline span:nth-child(2) { animation-delay: 0.9s; } .pp-demo .flowline span:nth-child(3) { animation-delay: 1.05s; } .pp-demo .flowline span:nth-child(4) { animation-delay: 1.2s; }
.pp-demo .a-step, .pp-demo .heads, .pp-demo .quote { opacity: 0; animation: art-in 0.45s ease-out forwards; }
.pp-demo .a-step { animation-delay: 1.5s; } .pp-demo .heads { animation-delay: 1.8s; } .pp-demo .quote { animation-delay: 2.0s; }
.reveal-on { opacity: 0; transform: translateY(14px); transition: opacity 0.5s ease-out, transform 0.5s ease-out; }
.reveal-on.in { opacity: 1; transform: none; }
}
@keyframes art-in { to { opacity: 1; transform: none; } }
/* Cards with icons */
.pp-pains li, .pp-roles li, .pp-measures li { position: relative; padding-left: 58px; }
.pp-pains li::before, .pp-roles li::before, .pp-measures li::before { content: ""; position: absolute; left: 18px; top: 18px; width: 28px; height: 28px; border-radius: 9px; background-position: center; background-size: 16px; background-repeat: no-repeat; }
.pp-pains li::before { background-color: #ff9f0a; background-image: var(--pain); }
.pp-roles li::before { background-color: hsl(var(--hue, 212) 75% 48%); background-image: var(--role); }
.pp-measures li::before { background-color: #34c759; background-image: var(--metric); }
.pp .fits li { position: relative; padding-left: 20px; border-left: 3px solid hsl(var(--hue, 212) 75% 60%); }
/* Today → With Ovenbird */
.pp-shift li.pair .now { position: relative; padding-left: 26px; }
.pp-shift li.pair .now::before { content: ""; position: absolute; left: 0; top: 18px; width: 16px; height: 16px; background: var(--arrow) center / 16px no-repeat; }
.pp-shift li.pair .now { background: linear-gradient(90deg, hsl(var(--hue, 212) 80% 97%), transparent 60%); border-radius: 10px; margin: -6px 0 -6px -8px; padding: 6px 8px 6px 34px; }
.pp-shift li.pair .now::before { left: 10px; top: 24px; }
/* How it works: an illustration per step */
.pp-how .loop li { padding-left: 24px; }
.pp-how .loop li::before { content: ""; display: block; width: 100%; height: 64px; margin: 0 0 12px; border-radius: 12px; background: hsl(var(--hue, 212) 80% 96%) var(--step) center / 36px no-repeat; }
.pp-how .loop li:nth-child(1) { --step: var(--doc); } .pp-how .loop li:nth-child(2) { --step: var(--chat); } .pp-how .loop li:nth-child(3) { --step: var(--loop); }
.pp-how .loop .n { display: none; }
/* Index cards */
.sol-grid a { position: relative; padding-left: 64px; min-height: 76px; }
.sol-grid a::before { content: ""; position: absolute; left: 16px; top: 16px; width: 34px; height: 34px; border-radius: 10px; background: hsl(var(--hue, 212) 75% 48%) var(--ic) center / 18px no-repeat; }
.sol-grid a[data-mono]::before { background: var(--tc, #555); }
.sol-grid a[data-mono]::after { content: var(--mono, attr(data-mono)); position: absolute; left: 16px; top: 16px; width: 34px; height: 34px; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 13px; letter-spacing: -0.02em; }
/* Integration pages: monogram tile + flow */
.int-hero { --tc: #555; }
.int-flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 10px; background: var(--surface); border-radius: 20px; padding: 26px 22px; box-shadow: var(--shadow); }
.int-flow .node { display: grid; justify-items: center; gap: 8px; text-align: center; font-size: 13px; color: var(--muted); }
.int-flow .node b { color: var(--text); font-size: 14px; }
.int-flow .tile { width: 56px; height: 56px; border-radius: 16px; background: var(--tc); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 18px; letter-spacing: -0.02em; box-shadow: 0 8px 20px color-mix(in srgb, var(--tc) 35%, transparent); }
.int-flow .tile:not(.nu)::before { content: var(--mono, ""); }
/* Brand marks (src/web/public/logos/.svg) replace the monogram where present */
.has-logo .int-flow .tile:not(.nu), .has-logo .tile-sm { background: #fff var(--logo) center / 55% no-repeat; box-shadow: 0 0 0 1px var(--border), 0 8px 20px rgba(0, 0, 0, 0.08); }
.has-logo .int-flow .tile:not(.nu)::before, .has-logo .tile-sm::before { content: none; }
.sol-grid a.has-logo::before { background: #fff var(--logo) center / 20px no-repeat; box-shadow: 0 0 0 1px var(--border); }
.sol-grid a.has-logo::after { content: none; }
.int-flow .tile.nu { background: url(/brand/mark.svg) center / cover no-repeat; font-size: 0; }
.int-hero .eyebrow::before { display: none; }
.int-hero .eyebrow { background: var(--surface); color: var(--text); border-color: var(--border); }
.tile-sm { width: 22px; height: 22px; border-radius: 7px; background: var(--tc, #555); color: #fff; display: inline-grid; place-items: center; font-size: 10px; font-weight: 700; }
.tile-sm::before { content: var(--mono, ""); }
.int-why li::before { background-color: var(--tc, #0071e3); background-image: var(--metric); }
.int-rw h3 { display: flex; align-items: center; gap: 10px; font-size: 18px; margin: 0 0 8px; }
.int-rw h3::before { content: ""; width: 28px; height: 28px; border-radius: 9px; background: var(--art-accent) var(--eye) center / 16px no-repeat; flex-shrink: 0; }
.int-rw .w h3::before { background-color: #34c759; background-image: var(--pen); }
.int-rw { margin-top: 14px; }
.int-sec { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.int-sec li { background: var(--surface); border-radius: 16px; padding: 18px 20px 18px 58px; box-shadow: var(--shadow); display: grid; gap: 6px; align-content: start; position: relative; font-size: 14px; line-height: 1.5; color: var(--muted); }
.int-sec li b { color: var(--text); font-size: 15.5px; }
.int-sec li::before { content: ""; position: absolute; left: 18px; top: 18px; width: 28px; height: 28px; border-radius: 9px; background: var(--art-ink) var(--lock) center / 15px no-repeat; }
.int-sec li:first-child::before { background-color: var(--tc, #0071e3); background-image: var(--plug); }
.pp-cta .muted { margin: 16px 0 0; font-size: 13.5px; }
@media (max-width: 900px) { .int-sec { grid-template-columns: 1fr; } }
.int-flow .edge { display: grid; justify-items: center; gap: 4px; font-size: 11.5px; color: var(--faint); text-transform: uppercase; letter-spacing: 0.05em; }
.int-flow .edge::before { content: ""; width: 48px; height: 18px; background: var(--arrow) center / 18px no-repeat; opacity: 0.55; }
.int-flow .edge.back::before { transform: scaleX(-1); }
@media (prefers-reduced-motion: no-preference) {
.int-flow .edge::before { animation: art-slide 1.6s ease-in-out infinite; }
.int-flow .edge.back::before { animation-name: art-slide-back; }
}
@keyframes art-slide { 0%, 100% { transform: translateX(-4px); } 50% { transform: translateX(4px); } }
@keyframes art-slide-back { 0%, 100% { transform: scaleX(-1) translateX(-4px); } 50% { transform: scaleX(-1) translateX(4px); } }
.int-rw { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.int-rw > div { background: var(--surface); border-radius: 16px; padding: 18px 20px 12px; box-shadow: var(--shadow); }
.int-rw h2 { display: flex; align-items: center; gap: 10px; font-size: 18px; margin: 0 0 8px; }
.int-rw h2::before { content: ""; width: 28px; height: 28px; border-radius: 9px; background: var(--art-accent) var(--eye) center / 16px no-repeat; flex-shrink: 0; }
.int-rw .w h2::before { background-color: #34c759; background-image: var(--pen); }
.int-rw ul { margin: 0; padding-left: 18px; font-size: 15px; line-height: 1.55; }
.int-rw li { margin: 4px 0; }
@media (max-width: 600px) {
.pp { padding: 12px 18px 56px; }
.pp-hero { padding: 12px 0 28px; gap: 24px; }
.pp-hero::before { inset: -20px -60px auto -60px; width: auto; height: 60%; }
.pp-section { padding: 30px 0 4px; margin-top: 22px; }
.pp-section h2 { font-size: 23px; margin-bottom: 14px; }
.pp-shift li.pair .now { margin: 0; padding: 8px 10px 8px 34px; }
.pp-shift li.pair .now::before { left: 10px; top: 26px; }
.pp-cta { padding: 36px 18px; margin-top: 28px; }
.pp-cta h2 { font-size: 24px; }
}
/* Why Ovenbird */
.story-hero .eyebrow { background: #e8f1fc; color: #0a3a73; border-color: #cfe3fa; }
.story-hero .eyebrow::before { background: url(/brand/mark.svg) center / cover no-repeat; }
.story-art { margin: 0; }
.story-art img { width: 100%; height: auto; border-radius: 28px; box-shadow: var(--shadow); }
.story-facts li::before { background: url(/brand/mark.svg) center / cover no-repeat; }
.story-mark-row { display: flex; gap: 22px; align-items: center; background: var(--surface); border-radius: 20px; padding: 22px; box-shadow: var(--shadow); }
.story-mark-row img { width: 96px; height: 96px; border-radius: 22px; flex-shrink: 0; }
.story-mark-row p { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.55; }
.story-sources { margin: 0; padding-left: 18px; font-size: 13.5px; color: var(--muted); }
.home-story { display: grid; grid-template-columns: 1fr 1.1fr; gap: 40px; align-items: center; }
.home-story img { width: 100%; height: auto; border-radius: 24px; box-shadow: var(--shadow); }
.home-story ul { list-style: none; padding: 0; margin: 14px 0 20px; display: grid; gap: 8px; }
.home-story li { padding-left: 26px; position: relative; color: var(--muted); }
.home-story li::before { content: ""; position: absolute; left: 0; top: 5px; width: 14px; height: 14px; border-radius: 4px; background: url(/brand/mark.svg) center / cover; }
.home-story li b { color: var(--text); }
@media (max-width: 900px) { .home-story { grid-template-columns: 1fr; } .story-mark-row { flex-direction: column; align-items: flex-start; } }
@media (max-width: 760px) { .int-flow { grid-template-columns: 1fr; } .int-flow .edge::before { transform: rotate(90deg); } .int-flow .edge.back::before { transform: rotate(90deg) scaleX(-1); } .int-rw { grid-template-columns: 1fr; } }
:root { --pain: url("data:image/svg+xml,"); --role: url("data:image/svg+xml,"); --metric: url("data:image/svg+xml,"); --eye: url("data:image/svg+xml,"); --pen: url("data:image/svg+xml,"); --arrow: url("data:image/svg+xml,"); --doc: url("data:image/svg+xml,"); --chat: url("data:image/svg+xml,"); --loop: url("data:image/svg+xml,"); --plug: url("data:image/svg+xml,"); --lock: url("data:image/svg+xml,"); }