# Zunas Brand Guidelines Version 1, October 2026. Zunas is a team of AI agents for natural lead nurture, calls, appointment booking and confirmations, warm transfers, contract follow-up and payments. Build the team around the desired outcome. The mascot is named Zunas. Light and dark appearance is controlled from the footer. The choice persists between visits. Brand asset and palette specimens keep their original colours in either mode. ## Assets - /brand/zebra-dark-square.png - /brand/zebra-dark-tall.png - /brand/zebra-dark-wide.png - /brand/zebra-dark.svg - /brand/zebra-grey-band-square.png - /brand/zebra-grey-band-tall.png - /brand/zebra-grey-band-wide.png - /brand/zebra-grey-band.svg - /brand/zebra-grey-square.png - /brand/zebra-grey-tall.png - /brand/zebra-grey-wide.png - /brand/zebra-grey.svg - /brand/zebra-lavender-square.png - /brand/zebra-lavender-strong-square.png - /brand/zebra-lavender-strong-tall.png - /brand/zebra-lavender-strong-wide.png - /brand/zebra-lavender-strong.svg - /brand/zebra-lavender-tall.png - /brand/zebra-lavender-wide.png - /brand/zebra-lavender.svg - /brand/zebra-print-brand-strong.svg - /brand/zebra-print-brand.svg - /brand/zebra-print-ink.svg - /brand/zebra-print-white.svg - /brand/zunas-facebook-cover-pixel-world.png - /brand/zunas-facebook-cover-space.png - /brand/zunas-facebook-cover-v2.png - /brand/zunas-facebook-cover.png - /brand/zunas-logo-blue.png - /brand/zunas-logo-blue.svg - /brand/zunas-logo-ink.png - /brand/zunas-logo-ink.svg - /brand/zunas-logo-lavender.svg - /brand/zunas-logo-white.png - /brand/zunas-logo-white.svg - /brand/zunas-mark-blue.png - /brand/zunas-mark-blue.svg - /brand/zunas-mark-box.png - /brand/zunas-mark-box.svg - /brand/zunas-mark-ink.png - /brand/zunas-mark-ink.svg - /brand/zunas-mark-lavender.png - /brand/zunas-mark-lavender.svg - /brand/zunas-mark-solid-blue.png - /brand/zunas-mark-solid-blue.svg - /brand/zunas-mark-white.png - /brand/zunas-mark-white.svg ## Reference specimens Logo Colour Typography Zebra print Zunas Components Get brand kit Brand guidelines · v1 · October 2026 Everything you need to build like Zunas. The logo, the colours, the type, the zebra print, Zunas and the motion rules, one page for people, one file for AI. See the brand ↓ Get the brand LLM file Prefer to paste? Copy the LLM file to clipboard 01 · Logo ## The Zunas mark and serif logotype. One unit. The full logo leads. The standalone face is the mark for avatars, favicons and tight spaces. Never retype “Zunas” in a live font, always place these files. Logo · Zunas Blue On cream and white SVG↓ PNG↓ Logo · White On ink, the dark zebra, solid purple SVG↓ PNG↓ Logo · Ink On light, when purple would be a second accent SVG↓ PNG↓ The mark Zunas standalone, avatars, favicons, small placements. Mark · Zunas Blue On light SVG↓ PNG↓ Mark · White On ink or purple SVG↓ PNG↓ Mark · Ink On light SVG↓ PNG↓ Box logo App icon · avatar on any ground SVG↓ PNG↓ Solid backgroundThe Zunas mark on edge-to-edge blue. Mark · Full blue backgroundSquare · solid Zunas Blue · 1024px PNG SVG↓ PNG↓ Clear space: keep about 25% of the mark’s height free on all sides. Scale in whole steps so the pixels stay crisp. SVG preferred, PNG for tools that need it. Never stretch, outline, add shadows or recolour outside these variants. Never place the white versions on light grounds. In the site nav the logo is 24px tall, Zunas Blue on cream. Facebook coverZunas swarm · a pixel world of leads. Facebook page coverPixel world · lead network · PNG Download PNG↓ 02 · Colour ## Cream ground, ink type, one purple. Flat fields, hairline borders, no gradients. Purple marks the point, once per element. Terracotta lives only inside data. Tap any swatch to copy its value. Grounds Cream #FAF9F5 page background White #FFFFFF bands, windows, cards Panel #F6F5F0 hero + guarantee panels Card #FCFBF8 button card, header rows Cream 2 #EDEBE3 soft button, backdrop panels Grey band #F3F2ED bolder grey zebra ground Lavender ground #EEEEFB ZUNAS column, lavender bands Dark #161514 the dark zebra container Ink & text Ink #1F1E1D headlines, dark buttons Lede #55534E ledes and subs Body #5E5D59 15px body copy Label #8B8984 mono labels, captions Ghost #9A9891 the grey half of a lockup Hairline rgba(31,30,29,.11) every border Accent Zunas Blue #5150F6 THE accent, once per element Lavender #A5A4FA Zunas, sparklines, accents on dark Data only Miss #D0603F ✕ marks inside tables Miss text #B5533A a “never tracked” label Miss fill rgba(217,119,87,.16) a tinted cell 03 · Type ## A Book serif, a quiet sans, a mono for labels. P22 Mackinac carries every headline and figure, Book for the hero, Medium everywhere else. Inter does the reading. Geist Mono does the labels, kickers and window URLs. P22 Mackinac · Book 400 · hero Every lead.A next step. P22 Mackinac · Medium 500 · sections Your AI team. Your desired outcome. The explanation continues in the grey serif lede, Medium at 24px, ghost grey. Inter · 400 · ledes and body AI agents that nurture your leads, make calls, book and confirm appointments, handle warm transfers, and follow through on contracts and payments. Body copy is Inter at 15px with a 1.6 line-height, colour #5E5D59, max-width 470. Emphasis is ink on a grey line, or purple, never bold. Buttons are Inter 15px at weight 400. Geist Mono · 10.5px · uppercase · .1em Lead nurture Appointment confirmed app.zunas.com/leads Hero H1 P22 Mackinac Book 400 50-64px · lh 1.06-1.12 · ls −0.012em Section H2 P22 Mackinac Medium 500 44-56px · lh 1.1 · purple second sentence Card titles P22 Mackinac Medium 500 19-20px · lh 1.3 Big figures P22 Mackinac Medium 500 36-96px · ls −0.015 to −0.03em Grey serif lede P22 Mackinac Medium 500 22-26px · lh 1.28 · #9A9891 Lede Inter 400 16.5-18.5px · lh 1.55 · #55534E Body Inter 400 15px · lh 1.6 · #5E5D59 · max 470 Buttons Inter 400 15px · lh 1, never Medium Nav Inter 400 12px · rgba(31,30,29,.78) Mono labels Geist Mono 400 10.5px · uppercase · ls .1em · #8B8984 P22 Mackinac Book 400 + Medium 500 · serif headlines /brand/mackinac-book.woff2 · /brand/mackinac-medium.woff2 Inter 400 + 500 · Google Fonts fonts.googleapis.com/css2?family=Inter:wght@400;500 Geist Mono 400 + 500 · Google Fonts fonts.googleapis.com/css2?family=Geist+Mono:wght@400;500 04 · The zebra print ## The site’s one texture, in five colourways. Seventeen organic stripes, rotated −18°, at 5-11% opacity. Always clipped by the band or box it fills. Text that must sit on it goes in a white card. Download the backgrounds ready-made, or the transparent print and set your own ground. Lavender Agent team · workflow and outcome panels #EEEEFB ground · #5150F6 at 0.09 PNG wide↓ PNG tall↓ PNG square↓ SVG↓ Lavender strong Agent builder · outcome workflow bands #EEEEFB ground · #5150F6 at 0.11 PNG wide↓ PNG tall↓ PNG square↓ SVG↓ Grey Lead nurture · activity and conversation bands #FAF9F5 ground · #1F1E1D at 0.05 PNG wide↓ PNG tall↓ PNG square↓ SVG↓ Grey band A bolder grey band, masked off the text column #F3F2ED ground · #1F1E1D at 0.05 PNG wide↓ PNG tall↓ PNG square↓ SVG↓ Dark The dark hero container only, white type on it #161514 ground · #FFFFFF at 0.07 PNG wide↓ PNG tall↓ PNG square↓ SVG↓ The print alone Transparent stripes for your own ground, set the fill and opacity yourself viewBox 0 0 800 600 · slice · rotate(−18°) SVG · brand↓ SVG · ink↓ SVG · white↓ Sizes: wide 2400×1500, tall 1200×2400 (phones), square 1600×1600. The SVGs scale to any box. In code: the parent gets position: relative; overflow: hidden , the print is absolute inset: 0 , content sits at z-index: 1 . Never two zebra bands of the same colour in a row; a white band always separates a lavender band from a grey one. Never above .11. The full SVG path data is in the LLM file (Appendix A). Use the original paths. 05 · Zunas ## The mascot is Zunas. The same silhouette as the logo mark. Lavender body, transparent eyes. Always use the original artwork, never redraw it, crisp edges, no smoothing, no badges, no shadows. Lavender The default, on light grounds SVG↓ PNG↓ White On solid purple or ink SVG↓ PNG↓ Zunas Blue The logo mark colourway SVG↓ PNG↓ Ink On light, next to ink type SVG↓ PNG↓ Preserve the reverse orientation and transparent eye cutouts. Use the supplied assets at their original aspect ratio. Use Zunas at 56-120px in product moments. Keep the original silhouette and transparent eyes at every size. Motion is quiet and purposeful. Use a gentle bob while an agent is working, and a clear completed state when it finishes. Respect reduced motion. The drawn Zunas for the line-icon family: preserve the original silhouette. Never invent a new Zunas. 06 · Components ## Windows, pills, cards. Used as-is. Every element below is a named class in the site’s code, with its CSS in the LLM file. Buttons are ink or soft. Product lives in white windows. Text on a print lives in a white card. Buttons Build your AI team See how it works ↓ Learn more Button card · the hero Build your AI team See how it works↓ Chips Lead nurture Appointments Warm transfers Contracts + payments Window app.zunas.com/activity Lead replied Nurturing Discovery call Confirmed Contract follow-up In progress One AI team. Every next step covered. Black pill ›Tell Zunas your goal. Build the AI team to get there. 01 Dark card, the process steps INK ground, lavender mono number, white serif title, 14.5px sub at 62% white. Three in a row. “ A customer quote goes here, set in the brand serif. Example customer 07 · Product & agents ## A team of AI agents. Built for the follow-through. Zunas nurtures leads through natural conversations, calls, appointments, warm transfers, contracts and payments. The product windows show the conversation, the next action and the outcome. Select a workflow below to explore the examples. app.zunas.com/team 01 · Lead nurture A conversation. A next step. Personal follow-up, with the context carried forward. AI team active Your lead queue ML Morgan Lee New enquiry · follow-up agent Replied TR Taylor Reed Requested a call · calling agent Calling JE Jordan Ellis Discovery call · booking agent Booked Each agent knows the conversation and the goal. Morgan Lee · conversation Hi Morgan, following up on your enquiry. What would you like to get sorted first? I’d like to talk through the options. Is tomorrow morning available? Absolutely. Would 10:00 work for a quick call with the team? ↗ Next step: book the appointment 02 · Appointments Booked. Confirmed. Ready. The follow-through keeps going after the booking. AI team active Tomorrow 10:00 Discovery call Confirmed Morgan Lee Discovery call with your team ✓ Appointment booked ✓ Confirmation sent ✓ Lead confirmed attendance Next step: a reminder before the call 03 · Warm transfers Bring your team into the conversation. Your agent calls, gets the context, and makes the handoff. AI team active ↗ Live conversation · Taylor Reed Ready for a warm transfer. Interested in the service. Asked to speak with your team. Available now. Calling agent → Context + conversation → Your team Handoff ready 04 · Outcome builder Start with the outcome. Build your team around the result you want. AI team active Your agent workflow 01 Nurture the lead Follow up with context ↓ 02 Make the call Continue the conversation ↓ 03 Book + confirm Set up the appointment ↓ 04 Get the contract signed Follow through on the signature ↓ 05 Collect payment Follow up on the payment ↓ Desired outcome Signed contract.First payment. Choose the goal, shape the conversation, and define the handoff. Zunas handles the follow-through. Team Nurture · Calling · Booking · Follow-up Outcome Contract signed + payment received Illustrative product workflow zunas · lead nurture › Lead nurture Appointments Warm transfers Contracts + payments Conversation Context first Show the lead’s message, the agent’s response and a clear next action. Agent activity Quiet status Use mono labels and lavender states for calls, follow-ups, bookings and handoffs. Outcome builder One clear goal Connect the team’s steps to the chosen outcome. Keep setup simple and readable. 08 · Motion ## Every action moves the lead forward. Motion shows the team working toward a goal: a reply, a call, an appointment, a handoff, a signature or a payment. Keep it calm, readable and contained in the product window. app.zunas.com/team 01 · Nurture A natural follow-up. The agent picks up the conversation with the lead’s context. ✓ Lead replied app.zunas.com/team 02 · Call Continue the conversation. Zunas calls the lead and moves toward the next step. ✓ Call completed app.zunas.com/team 03 · Book + confirm Make the appointment happen. Book the time, confirm attendance, and send a reminder. ✓ Appointment confirmed app.zunas.com/team 04 · Warm transfer A handoff with context. Bring your team in when the lead is ready for a conversation. ✓ Transfer ready app.zunas.com/team 05 · Contract Follow through on the signature. The follow-up agent keeps the contract moving. ✓ Contract signed app.zunas.com/team 06 · Payment Reach the desired outcome. Follow up on payment and record the completed outcome. ✓ Payment received Scene 01 Nurture: A natural follow-up. 6 s Scene 02 Call: Continue the conversation. 6 s Scene 03 Book + confirm: Make the appointment happen. 6 s Scene 04 Warm transfer: A handoff with context. 6 s Scene 05 Contract: Follow through on the signature. 6 s Scene 06 Payment: Reach the desired outcome. 6 s Loop Soft crossfades. Reduced motion shows a finished frame. 36 s 09 · For AI ## The brand LLM file. One markdown file with the colour tokens, typography, logo assets, the full zebra SVG, component CSS and motion timings. Everything needed to build consistently with Zunas. Download zunas-brand.md Open in the browser Copy to clipboard /brand/zunas-brand.md Your AI team for lead nurture. Identity Logo & mark Colour palette Typography Expression Zebra print Zunas Motion Resources Components Product & agents Brand LLM file ↓ Appearance ☀ Light ☾ Dark © 2026 Zunas. All rights reserved. Back to top ↑ ## Live demonstration behaviour All report data is illustrative. Console prompts type at 22ms per character, then hold for 6.5 seconds. Selecting a tab pins that view. The hero cycles through six scenes every 6 seconds. Reduced motion shows a completed frame. Colour swatches copy exact values. Brand buttons copy or download this file. ## Appendix A: Zebra SVG ```svg ``` ## Appendix B: Component CSS ```css @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500&family=Geist+Mono:wght@400;500&display=swap'); @font-face { font-family: 'P22 Mackinac'; src: url('/brand/mackinac-book.woff2') format('woff2'); font-weight: 400; font-display: swap } @font-face { font-family: 'P22 Mackinac'; src: url('/brand/mackinac-medium.woff2') format('woff2'); font-weight: 500; font-display: block } .ncl { width: 100%; min-height: 0; background: var(--p-page); font-family: 'Inter', 'Styrene B', 'Helvetica Neue', sans-serif; color: var(--p-ink); box-sizing: border-box; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility } .ncl *,.ncl *:before,.ncl *:after { box-sizing: border-box } .ncl a.ncl-btn-dark,.ncl a.ncl-btn-soft,.ncl a.cx-btn-dark,.ncl a.cx-btn-soft,.ncl a.pcx-btn { text-decoration: none; cursor: pointer } .ncl-nav { height: 56px; position: relative; z-index: 60 } .ncl-nav a { text-decoration: none } .ncl-navin { max-width: 1180px; height: 100%; margin: 0 auto; padding: 0 32px; display: flex; align-items: center; justify-content: space-between } .ncl-logo { height: 20px; width: auto; display: block } .ncl-navr { display: flex; align-items: center; gap: 20px } .ncl-link { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 400; color: rgb(var(--p-ink-rgb) / .78); white-space: nowrap; background: none; border: 0; padding: 0; margin: 0; font-family: inherit; cursor: pointer; transition: color .15s ease } .ncl-link:hover { color: var(--p-ink) } .ncl-burger { display: none; width: 40px; height: 40px; margin-right: -9px; background: none; border: 0; padding: 0; cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 6px } .ncl-burger i { display: block; width: 22px; height: 1.6px; background: var(--p-ink); border-radius: 2px } .ncl-nav.is-dark .ncl-link { color: rgba(255,255,255,.78) } .ncl-nav.is-dark .ncl-link:hover { color: var(--p-surface) } .ncl-nav.is-dark .ncl-cta-dark { background: var(--p-surface); color: var(--p-ink) } .ncl-nav.is-dark .ncl-cta-dark:hover { background: var(--p-lav-ground) } .ncl-nav.is-dark .ncl-burger i { background: var(--p-surface) } @keyframes swaPulse { 0% { opacity: .7; transform: scale(.6) } 100% { opacity: 0; transform: scale(3.4) } } @keyframes swaScan { from { transform: translateY(0) } to { transform: translateY(62px); opacity: 0 } } @keyframes swwMarq { from { transform: translateX(0) } to { transform: translateX(calc(-50% - 8px)) } } @keyframes swwIn { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } } .ncl-logo { height: 24px } .bx-foot .ncl-logo { height: 20px } .br-in { max-width: 1180px; margin: 0 auto } .br-hero { padding: 64px 32px 88px; text-align: center } .br-h1 { font-size: 60px; line-height: 1.08; margin-top: 18px } .br-h1 b { font-weight: 400; color: var(--p-accent) } .br-lede0 { max-width: 620px; margin: 20px auto 0 } .br-btns { margin-top: 32px } .br-btns .ncl-btn-dark i { font-style: normal; font-size: 12px; opacity: .7 } .br-copy { display: inline-block; margin-top: 18px; background: none; border: 0; padding: 0; font-family: inherit; font-size: 13px; color: var(--p-muted); text-decoration: underline; text-underline-offset: 3px; cursor: pointer } .br-copy:hover { color: var(--p-ink) } .br-sec { padding: 96px 32px 104px } .br-sec.is-white { background: var(--p-surface); border-top: 1px solid rgb(var(--p-ink-rgb) / .11); border-bottom: 1px solid rgb(var(--p-ink-rgb) / .11) } .br-sec.is-white + .br-sec.is-white { border-top: 0 } .br-head { max-width: 720px } .br-head .hs-k { color: var(--p-accent) } .br-h2 { font-size: 44px; text-wrap: balance } .br-lede { max-width: 640px } .br-sub { display: flex; align-items: baseline; gap: 12px; margin: 44px 0 16px } .br-sub b { font-family: 'P22 Mackinac', 'P22 Mackinack', Georgia, serif; font-weight: 500; font-size: 19px; color: var(--p-ink) } .br-sub span { font-size: 13.5px; color: var(--p-muted) } .br-grid3,.br-grid4 { display: grid; gap: 16px; margin-top: 36px } .br-grid3 { grid-template-columns: repeat(3,1fr) } .br-grid4 { grid-template-columns: repeat(4,1fr); margin-top: 0 } .br-tile { background: var(--p-surface); border: 1px solid rgb(var(--p-ink-rgb) / .11); border-radius: 16px; overflow: hidden } .br-sec.is-white .br-tile { background: var(--p-card) } .br-tile-art { height: 168px; display: flex; align-items: center; justify-content: center; background: var(--p-page); border-bottom: 1px solid rgb(var(--p-ink-rgb) / .06) } .br-tile-art img { height: 44px; width: auto; display: block } .br-tile-art.is-ink { background: var(--p-ink) } .br-tile-art.is-brand { background: var(--p-accent) } .br-tile-art.is-mark img { height: 76px } .br-tile-art.is-mark img.is-box { height: 72px; border-radius: 14px } .br-tile-art.is-sven .br-sven { width: 78px; height: 90px; display: block } .br-tile-cap { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px 14px 18px } .br-tile-cap b { display: block; font-size: 13.5px; font-weight: 500; color: var(--p-ink) } .br-tile-cap span { display: block; font-size: 12px; color: var(--p-muted); margin-top: 2px; line-height: 1.4 } .br-tile-cap code { display: block; margin-top: 6px; font-family: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace; font-size: 10.5px; color: var(--p-muted) } .br-tile-cap.is-col { flex-direction: column; align-items: flex-start; padding: 16px 18px 18px } .br-dls { display: flex; flex-wrap: wrap; gap: 6px; flex: none } .br-dl { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 400; color: var(--p-ink); background: var(--p-surface); border: 1px solid rgb(var(--p-ink-rgb) / .18); border-radius: 999px; padding: 6px 11px; text-decoration: none; white-space: nowrap; transition: background .15s ease,border-color .15s ease } .br-dl i { font-style: normal; font-size: 11px; color: rgb(var(--p-ink-rgb) / .5) } .br-dl:hover { background: var(--p-lav-ground); border-color: rgb(var(--p-accent-rgb) / .35) } .br-rules { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 40px } .br-rules li { position: relative; padding-left: 18px; font-size: 14px; line-height: 1.55; color: var(--p-lede) } .br-rules li::before { content: ""; position: absolute; left: 0; top: 8px; width: 7px; height: 7px; border-radius: 2px; background: var(--p-accent) } .br-rules code { font-family: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace; font-size: 12px; color: var(--p-ink) } .br-cgroup { margin-top: 8px } .br-cgroup .br-sub { margin: 36px 0 14px } .br-swatches { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px } .br-sw { display: flex; flex-direction: column; text-align: left; background: var(--p-surface); border: 1px solid rgb(var(--p-ink-rgb) / .11); border-radius: 14px; padding: 0; overflow: hidden; cursor: pointer; font-family: inherit; transition: border-color .15s ease } .br-sw:hover { border-color: rgb(var(--p-accent-rgb) / .45) } .br-sw-c { display: block; height: 76px; border-bottom: 1px solid rgb(var(--p-ink-rgb) / .06) } .br-sw-t { display: block; padding: 11px 14px 12px } .br-sw-t b { display: block; font-size: 13.5px; font-weight: 500; color: var(--p-ink) } .br-sw-t code { display: block; font-family: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace; font-size: 11.5px; color: var(--p-accent); margin-top: 3px } .br-sw-t small { display: block; font-size: 11.5px; color: var(--p-muted); margin-top: 3px; line-height: 1.4 } .br-tgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 36px } .br-tcard { background: var(--p-surface); border: 1px solid rgb(var(--p-ink-rgb) / .11); border-radius: 18px; padding: 28px 30px 30px } .br-mt { margin-top: 26px } .br-t-h1 { font-family: 'P22 Mackinac', 'P22 Mackinack', Georgia, serif; font-weight: 400; font-size: 46px; line-height: 1.08; letter-spacing: -0.012em; color: var(--p-ink); margin-top: 12px } .br-t-h1 b { font-weight: 400; color: var(--p-accent) } .br-t-h2 { font-family: 'P22 Mackinac', 'P22 Mackinack', Georgia, serif; font-weight: 500; font-size: 32px; line-height: 1.12; letter-spacing: -0.012em; color: var(--p-ink); margin-top: 10px } .br-t-h2 b { font-weight: 500; color: var(--p-accent) } .br-t-gl { font-family: 'P22 Mackinac', 'P22 Mackinack', Georgia, serif; font-weight: 500; font-size: 22px; line-height: 1.3; color: var(--p-ghost); margin-top: 12px; text-wrap: pretty } .br-t-lede { font-size: 18px; line-height: 1.55; color: var(--p-lede); margin-top: 12px; text-wrap: balance } .br-t-body { font-size: 15px; line-height: 1.6; letter-spacing: -0.01em; color: var(--p-body); margin-top: 14px; max-width: 470px } .br-t-mono { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 12px; align-items: center } .br-t-url { font-family: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace; font-size: 12px; color: var(--p-lede) } .br-table { margin-top: 28px; background: var(--p-surface); border: 1px solid rgb(var(--p-ink-rgb) / .11); border-radius: 14px; overflow: hidden } .br-trow { display: grid; grid-template-columns: 1.1fr 1.3fr 2fr; gap: 16px; padding: 12px 18px; font-size: 13.5px; color: var(--p-lede) } .br-trow + .br-trow { border-top: 1px solid rgb(var(--p-ink-rgb) / .06) } .br-trow span:first-child { color: var(--p-ink) } .br-trow span:last-child { font-family: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace; font-size: 12px; color: var(--p-lede) } .br-table.is-motion .br-trow { grid-template-columns: .7fr 3fr .6fr } .br-table.is-motion .br-trow span:last-child { text-align: right; color: var(--p-accent) } .br-trow.is-sum { background: var(--p-card) } .br-trow.is-sum span:first-child { font-family: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--p-muted); align-self: center } .br-fonts { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-top: 16px } .br-font { background: var(--p-surface); border: 1px solid rgb(var(--p-ink-rgb) / .11); border-radius: 14px; padding: 16px 18px } .br-font b { display: block; font-family: 'P22 Mackinac', 'P22 Mackinack', Georgia, serif; font-weight: 500; font-size: 18px; color: var(--p-ink) } .br-font span { display: block; font-size: 12.5px; color: var(--p-muted); margin-top: 4px } .br-font code { display: block; font-family: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace; font-size: 11px; color: var(--p-lede); margin-top: 10px; word-break: break-all; line-height: 1.5 } .br-zgrid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-top: 36px } .br-ztile { background: var(--p-card); border: 1px solid rgb(var(--p-ink-rgb) / .11); border-radius: 16px; overflow: hidden } .br-zt { position: relative; overflow: hidden; height: 200px; border-bottom: 1px solid rgb(var(--p-ink-rgb) / .06) } .br-zt > .eo-zp { z-index: 0 } .br-zt.is-checker { background-color: var(--p-surface); background-image: linear-gradient(45deg,var(--p-band) 25%,transparent 25%,transparent 75%,var(--p-band) 75%),linear-gradient(45deg,var(--p-band) 25%,transparent 25%,transparent 75%,var(--p-band) 75%); background-size: 18px 18px; background-position: 0 0,9px 9px } .br-comps { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 36px } .br-comp { background: var(--p-card); border: 1px solid rgb(var(--p-ink-rgb) / .11); border-radius: 18px; padding: 26px 28px 30px; position: relative; overflow: hidden } .br-comp .hs-k { margin-bottom: 12px } .br-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px } .br-row .ncl-btn-soft i { font-style: normal; font-size: 12px; opacity: .6 } .br-card { margin: 0 } .br-chips { justify-content: flex-start } .br-win { max-width: none } .br-pill { display: inline-flex; margin: 0 } .br-comp.is-dark { background: var(--p-ink); border-color: var(--p-ink); padding: 0 } .br-pc { border-radius: 18px; height: 100%; padding: 30px 32px 34px } .br-comp.is-lav { background: var(--p-lav-ground); border-color: rgb(var(--p-accent-rgb) / .14); display: flex; align-items: center; justify-content: center; padding: 32px } .br-comp.is-lav > .eo-zp { z-index: 0 } .br-quote { position: relative; z-index: 1; max-width: 460px; padding: 26px 30px 24px } .br-quote .rs-splice-q { font-size: 21px } .br-quote .rs-splice-mark { font-size: 40px; margin-bottom: 8px } .br-quote .rs-splice-who { margin-top: 16px } .br-quote .rs-splice-who img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover } .br-quote .rs-splice-who b { font-size: 13.5px; font-weight: 500; color: var(--p-ink) } .br-motion { margin-top: 36px } .br-motion .cx-panel { max-width: 720px; margin: 0 auto } .br-dash { max-width: 760px; margin: 36px auto 0 } .br-term { margin-top: 18px } .br-term .bx-console { text-align: center } .br-term .bx-term { margin-top: 0; text-align: left; box-shadow: 0 26px 60px -30px rgb(var(--p-ink-rgb) / .5) } .br-term .is-below .bx-tabs { margin-top: 16px; background: var(--p-surface); border: 1px solid rgb(var(--p-ink-rgb) / .11) } .br-term .is-below .bx-tab.is-on { background: var(--p-lav-ground); box-shadow: none; color: var(--p-accent) } .br-anat .br-trow { grid-template-columns: .8fr 1fr 2.8fr } .br-anat .br-trow span:nth-child(2) { font-family: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace; font-size: 12px; color: var(--p-accent) } .br-anat .br-trow span:last-child { font-family: inherit; font-size: 13.5px; color: var(--p-lede) } .br-ai { position: relative; overflow: hidden; background: var(--p-lav-ground); border: 1px solid rgb(var(--p-accent-rgb) / .14); border-radius: 24px; padding: 56px 48px 52px } .br-ai > .eo-zp { z-index: 0 } .br-ai-in { position: relative; z-index: 1; max-width: 720px } .br-ai-in .eo-lede { max-width: 640px } .br-ai .br-btns { justify-content: flex-start; flex-wrap: wrap } .br-btn { font-family: inherit; cursor: pointer; border: 0; font-size: 15px; font-weight: 400; line-height: 1; padding: 13px 22px; border-radius: 7px } .br-url { display: block; margin-top: 18px; font-family: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace; font-size: 12px; color: var(--p-lede) } @keyframes sw-bob { 0%,100% { transform: translateY(0) } 50% { transform: translateY(6px) } } .rs-splice-card { max-width: 760px; margin: 0 auto; background: var(--p-surface); border: 1px solid rgb(var(--p-ink-rgb) / .11); border-radius: 22px; padding: 34px 44px 32px; box-shadow: 0 6px 18px rgb(var(--p-ink-rgb) / .05) } .rs-splice-mark { display: block; font-family: 'P22 Mackinac', 'P22 Mackinack', Georgia, serif; font-weight: 500; font-size: 48px; line-height: .55; color: var(--p-accent); margin-bottom: 14px } .rs-splice-q { margin: 0 auto; max-width: 620px; font-family: 'P22 Mackinac', 'P22 Mackinack', Georgia, serif; font-weight: 500; font-size: 25px; line-height: 1.3; letter-spacing: -0.012em; color: var(--p-ink); text-wrap: balance } .rs-splice-who { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 22px 0 0 } .rs-splice-who img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: var(--p-lav-ground); border: 2px solid var(--p-surface); box-shadow: 0 0 0 1px rgb(var(--p-ink-rgb) / .11); flex: none } .rs-splice-who span { text-align: left; line-height: 1.25 } .rs-splice-who b { display: block; font-size: 14.5px; font-weight: 500; color: var(--p-ink) } .rs-splice-who small { display: block; font-size: 12.5px; color: var(--p-muted); margin-top: 2px } @media (max-width:760px) { .ncl-navr { display: none } .ncl-burger { display: flex } .ncl-navin { padding: 0 20px } } @keyframes nclMobIn { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } } @media (prefers-reduced-motion:reduce) { .ncl-link { transition: none } } .ncl-cta-dark { background: var(--p-ink); color: var(--p-surface); font-size: 12.5px; font-weight: 400; line-height: 1; padding: 8px 11px; border-radius: 6px; white-space: nowrap; margin-left: -12px } .ncl-h1 { font-family: 'P22 Mackinac', 'P22 Mackinack', Georgia, serif; font-weight: 400; letter-spacing: -0.01em; color: var(--p-ink) } .ncl-h1 b { font-weight: 400; color: var(--p-accent) } .ncl-btns { display: flex; align-items: center; justify-content: center; gap: 12px } .ncl-btn-dark { display: inline-flex; align-items: center; gap: 9px; background: var(--p-ink); color: var(--p-surface); font-size: 15px; font-weight: 400; line-height: 1; padding: 13px 22px; border-radius: 7px; white-space: nowrap } .ncl-btn-dark i { font-style: normal; color: var(--p-lavender); font-size: 12px } .ncl-btn-soft { display: inline-flex; align-items: center; gap: 9px; background: #EAE8E0; color: rgb(var(--p-ink-rgb) / .9); font-size: 15px; font-weight: 400; line-height: 1; padding: 13px 20px; border-radius: 7px; white-space: nowrap } .ncl-btn-soft i { font-style: normal; font-size: 12px; color: rgb(var(--p-ink-rgb) / .5) } .c1-chips { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 14px } .c1-chip { background: var(--p-surface); border: 1px solid rgb(var(--p-ink-rgb) / .11); border-radius: 10px; padding: 9px 15px; font-size: 13px; font-weight: 400; color: rgb(var(--p-ink-rgb) / .75); white-space: nowrap } .c1-winbar { position: relative; display: flex; align-items: center; gap: 7px; padding: 13px 18px; border-bottom: 1px solid rgb(var(--p-ink-rgb) / .11) } .c1-windot { width: 9px; height: 9px; border-radius: 50%; background: var(--p-soft) } .c1-winurl { position: absolute; left: 50%; transform: translateX(-50%); font-family: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace; font-size: 11.5px; color: var(--p-body) } .cx-card { margin: 30px auto 0; max-width: 336px; background: var(--p-card); border: 1px solid rgb(var(--p-ink-rgb) / .14); border-radius: 16px; padding: 18px; box-shadow: 0 12px 34px -26px rgb(var(--p-ink-rgb) / .35) } .cx-btn-dark { display: block; text-align: center; background: var(--p-ink); color: var(--p-surface); font-size: 15px; font-weight: 400; line-height: 1; padding: 13px 16px; border-radius: 7px } .cx-btn-soft { display: block; text-align: center; margin-top: 10px; background: var(--p-surface); border: 1px solid rgb(var(--p-ink-rgb) / .18); color: rgb(var(--p-ink-rgb) / .9); font-size: 15px; font-weight: 400; line-height: 1; padding: 12px 16px; border-radius: 7px } .cx-btn-soft i { font-style: normal; font-size: 12px; color: rgb(var(--p-ink-rgb) / .5); margin-left: 6px } .cx-panel { position: relative; min-height: 600px; border: 1px solid rgb(var(--p-ink-rgb) / .12); border-radius: 14px; background: var(--p-panel); display: flex; align-items: center; justify-content: center; padding: 40px } .cx-win { width: 100%; max-width: 480px; background: var(--p-surface); border: 1px solid rgb(var(--p-ink-rgb) / .11); border-radius: 12px; box-shadow: 0 26px 60px -30px rgb(var(--p-ink-rgb) / .4); overflow: hidden; text-align: left } .cx-cap { padding: 12px 18px 14px; font-size: 12.5px; color: var(--p-lede); border-top: 1px solid rgb(var(--p-ink-rgb) / .11) } .cx-cap b { color: var(--p-accent); font-weight: 400 } .pcx-btn { display: inline-flex; align-items: center; font-size: 13px; font-weight: 400; line-height: 1; color: var(--p-ink); background: var(--p-soft); border-radius: 6px; padding: 9px 13px; white-space: nowrap } .pcx-btn i { font-style: normal; color: var(--p-accent) } .bx-tabs { display: inline-flex; gap: 2px; background: var(--p-soft); border-radius: 8px; padding: 3px } .bx-tab { font-size: 11.5px; color: var(--p-lede); padding: 5px 10px; border-radius: 6px; white-space: nowrap } .bx-tab.is-on { background: var(--p-surface); color: var(--p-ink); box-shadow: 0 1px 2px rgb(var(--p-ink-rgb) / .08) } .bx-term { margin-top: 12px; background: var(--p-ink); border-radius: 10px; overflow: hidden; box-shadow: 0 24px 50px -30px rgb(var(--p-ink-rgb) / .5) } .bx-termbar { display: flex; gap: 6px; padding: 12px 14px; border-bottom: 1px solid rgba(255,255,255,.08) } .bx-termbar i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.18) } .bx-code { padding: 18px 20px 22px; font-family: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace; font-size: 12px; line-height: 1.75; color: rgba(245,244,239,.86); white-space: pre } .bx-code .d { color: rgba(245,244,239,.5) } .bx-code .h { color: var(--p-surface) } .bx-foot { max-width: 1180px; margin: 96px auto 0; padding: 40px 32px 36px; border-top: 1px solid rgb(var(--p-ink-rgb) / .11); text-align: left } .bx-fgrid { display: grid; grid-template-columns: 1.6fr repeat(4,1fr); gap: 32px } .bx-tag { font-size: 13.5px; line-height: 1.5; color: var(--p-lede); margin-top: 14px; max-width: 220px } .bx-fh { font-size: 12.5px; font-weight: 400; color: var(--p-ink); margin-bottom: 12px } .bx-fl { font-size: 13px; color: var(--p-lede); line-height: 2 } .bx-fl a { display: block; color: var(--p-lede); text-decoration: none; transition: color .15s ease } .bx-fl a:hover { color: var(--p-ink) } .bx-fbot a { color: var(--p-lede); text-decoration: none; transition: color .15s ease } .bx-fbot a:hover { color: var(--p-ink) } .bx-fbot { display: flex; justify-content: space-between; align-items: center; margin-top: 40px; padding-top: 18px; border-top: 1px solid rgb(var(--p-ink-rgb) / .11); font-size: 12px; color: var(--p-lede) } .bx-fbot span + span,.bx-fbot a + a { margin-left: 18px } .hs-k { font-family: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--p-muted) } .hseq { overflow: hidden } .hseq .hs-scene { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 40px; opacity: 0; transform: translateY(14px) scale(.985); transition: opacity .55s ease,transform .55s ease; pointer-events: none } .hseq .hs-scene.is-on { opacity: 1; transform: none; transition-delay: .18s } .hseq .cx-win { transition: transform .9s cubic-bezier(.2,.7,.2,1) } @keyframes hsPop { 0% { opacity: 0; transform: translateY(-50%) scale(0) rotate(-60deg) } 55% { opacity: 1; transform: translateY(-50%) scale(1.45) rotate(6deg) } 100% { opacity: 1; transform: translateY(-50%) scale(1) rotate(0) } } @keyframes hsFlashX { 0% { background: rgba(217,119,87,0); color: var(--p-lede) } 35% { background: rgba(217,119,87,.42); color: #8F3A22 } 100% { background: rgba(217,119,87,.16); color: #B5533A } } @keyframes hsFlashV { 0% { box-shadow: 0 0 0 0 rgb(var(--p-accent-rgb) / 0) } 35% { box-shadow: 0 0 0 4px rgb(var(--p-accent-rgb) / .28); background: #DCDBFB } 100% { box-shadow: 0 0 0 0 rgb(var(--p-accent-rgb) / 0) } } @keyframes hsPopI { 0% { opacity: 0; transform: scale(0) rotate(-60deg) } 55% { opacity: 1; transform: scale(1.45) rotate(6deg) } 100% { opacity: 1; transform: scale(1) rotate(0) } } .hs-lav { background: var(--p-lav-ground); border-color: rgb(var(--p-accent-rgb) / .14) } .hs-lav > .eo-zp { z-index: 0 } .hs-lav .hs-scene { z-index: 1 } @media (prefers-reduced-motion:reduce) { .hseq * { transition: none !important } } @keyframes hsDot { 0%,100% { transform: translateY(0); opacity: .5 } 50% { transform: translateY(-3px); opacity: 1 } } @keyframes hsCaret { 50% { opacity: 0 } } .bx-console { text-align: left } .bx-live .bx-tab { cursor: pointer; transition: background .25s ease,color .25s ease } .bx-tab:hover { color: var(--p-ink) } .bx-termbar { position: relative } .bx-termtitle { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); text-align: center; font-family: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace; font-size: 10.5px; letter-spacing: .06em; color: rgba(245,244,239,.4); pointer-events: none } .bx-code2 { white-space: normal; min-height: 372px } .bx-ln { min-height: 21px } .bx-prompt { margin-bottom: 12px } .bx-caret { display: inline-block; width: 7px; height: 13px; background: var(--p-lavender); vertical-align: -2px; margin-left: 2px; animation: hsCaret 1s steps(1) infinite } @keyframes bxSpin { to { transform: rotate(360deg) } } @keyframes bxIn { from { opacity: 0; transform: translateY(4px) } to { opacity: 1; transform: none } } @keyframes bxGrow { from { transform: scaleX(0) } to { transform: scaleX(1) } } @media (prefers-reduced-motion:reduce) { .bx-caret { animation: none !important } } .eo-h2 { font-family: 'P22 Mackinac', 'P22 Mackinack', Georgia, serif; font-weight: 500; font-size: 44px; line-height: 1.1; letter-spacing: -0.012em; color: var(--p-ink); margin-top: 14px } .eo-h2 b { font-weight: 500; color: var(--p-accent) } .eo-lede { font-size: 17px; line-height: 1.6; color: var(--p-lede); margin-top: 16px; max-width: 480px } .eo-pc { position: relative; border: 1px solid rgb(var(--p-ink-rgb) / .11); border-radius: 16px; background: var(--p-card); padding: 26px 26px 28px } .eo-pc-n { font-family: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace; font-size: 10.5px; letter-spacing: .1em; color: var(--p-accent); margin-top: 18px } .eo-pc-t { font-family: 'P22 Mackinac', 'P22 Mackinack', Georgia, serif; font-weight: 500; font-size: 20px; line-height: 1.3; letter-spacing: -0.01em; color: var(--p-ink); margin-top: 8px; text-wrap: balance } .eo-pc-s { font-size: 14.5px; line-height: 1.55; color: var(--p-body); margin-top: 6px } .eo-pc.is-dark { background: var(--p-ink); border-color: var(--p-ink) } .eo-pc.is-dark .eo-pc-n { color: var(--p-lavender) } .eo-pc.is-dark .eo-pc-t { color: var(--p-surface) } .eo-pc.is-dark .eo-pc-s { color: rgba(255,255,255,.62) } .eo-dz-lede { font-family: 'P22 Mackinac', 'P22 Mackinack', Georgia, serif; font-weight: 500; font-size: 26px; line-height: 1.28; letter-spacing: -0.01em; color: var(--p-ghost); margin-top: 16px; text-wrap: pretty } .eo-mx-pill { display: inline-flex; align-items: center; gap: 10px; margin-top: 22px; background: var(--p-ink); color: var(--p-surface); border-radius: 999px; padding: 12px 22px; font-size: 15px; font-weight: 500; letter-spacing: -0.005em } .eo-mx-pill i { font-style: normal; font-family: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace; font-size: 15px; color: var(--p-lavender) } .bx-code2.is-fixed { height: 340px; min-height: 0; overflow: hidden; scroll-behavior: smooth } @keyframes vtwType { to { width: 100% } } @keyframes vtwIn { to { opacity: 1 } } @keyframes wjiDrift { from { transform: translate3d(-1.3%,-.9%,0) scale(1.02) } to { transform: translate3d(1.3%,.9%,0) scale(1.05) } } @keyframes ahPvIn { from { transform: translateX(100%) } to { transform: none } } @keyframes ahIn { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } } .mcp-body { position: relative; overflow: hidden } .mcp-panes { display: flex; width: 300%; transition: transform .75s cubic-bezier(.2,.7,.2,1) } .mcp-panes > .mcp-pane { width: 33.3333%; flex: none } @keyframes mcpPop { from { opacity: 0; transform: scale(.82) } 60% { transform: scale(1.04) } to { opacity: 1; transform: none } } @keyframes mcpFlash { 0% { box-shadow: 0 0 0 0 rgb(var(--p-accent-rgb) / .0) } 25% { box-shadow: 0 0 0 4px rgb(var(--p-accent-rgb) / .28); border-color: var(--p-accent) } 100% { box-shadow: 0 0 0 0 rgb(var(--p-accent-rgb) / 0) } } @keyframes mcpFlashTxt { 0% { color: var(--p-accent) } 100% { color: inherit } } @keyframes mcpDraw { to { stroke-dashoffset: 0 } } @keyframes mcpCell { to { opacity: 1; transform: none } } @media (prefers-reduced-motion:reduce) { .mcp-panes { transition: none !important } } .eo-lede b { font-weight: 400; color: var(--p-ink) } .eo-zp { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none } .eo-zpanel { overflow: hidden } @media (max-width:760px) { .ncl { overflow-x: clip } .cx-card { max-width: none; margin-top: 22px } .cx-panel { min-height: 0; height: 440px; padding: 0 } .hseq .hs-scene { padding: 14px } .hseq .hs-scene > .cx-win { zoom: .68 } .c1-chips { gap: 6px } .c1-chip { padding: 8px 12px; font-size: 12.5px } .bx-tabs { display: flex; flex-wrap: wrap; justify-content: center } .bx-tab { font-size: 11px; padding: 5px 9px } .bx-console,.bx-term { min-width: 0; max-width: 100% } .bx-code { font-size: 11px; padding: 14px 14px 18px } .bx-code2 { height: 320px; min-height: 0; overflow: hidden; scroll-behavior: smooth } .ncl-btns { flex-direction: column; align-items: stretch } .ncl-btns .ncl-btn-dark,.ncl-btns .ncl-btn-soft { justify-content: center } .bx-foot { margin-top: 56px; padding: 32px 20px 28px } .bx-fgrid { grid-template-columns: 1fr 1fr; gap: 26px 20px } .bx-fgrid > div:first-child { grid-column: 1 / -1 } .bx-tag { max-width: 300px } .bx-fh { margin-bottom: 8px } .bx-fl { font-size: 13.5px; line-height: 1.95 } .bx-fbot { flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 32px } .bx-fbot span:first-child,.bx-fbot a:first-child { margin-left: 0 } } @media (max-width:760px) { .eo-h2 { font-size: 30px } .eo-lede { font-size: 15px } .eo-pc { padding: 22px 20px 22px } .eo-dz-lede { font-size: 20px } .eo-mx-pill { white-space: normal; text-align: left; font-size: 13.5px; padding: 10px 16px; max-width: 100% } } @media (max-width:760px) { .c1-winurl { font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 70% } } @media (max-width:760px) { .rs-splice-card { padding: 26px 22px 24px; border-radius: 18px } .rs-splice-mark { font-size: 40px; margin-bottom: 10px } .rs-splice-q { font-size: 21px } .rs-splice-who { margin-top: 18px } .rs-splice-who img { width: 38px; height: 38px } } @media (max-width:760px) { .ncl-logo { height: 22px } .br-hero { padding: 40px 20px 64px } .br-h1 { font-size: 40px; text-wrap: balance } .br-h1 br { display: none } .br-lede0 { font-size: 20px } .br-sec { padding: 64px 20px 72px } .br-h2 { font-size: 32px } .br-grid3,.br-grid4,.br-tgrid,.br-comps,.br-zgrid,.br-fonts { grid-template-columns: 1fr } .br-swatches { grid-template-columns: 1fr 1fr } .br-rules { grid-template-columns: 1fr } .br-tile-cap { flex-direction: column; align-items: flex-start } .br-tile-art { height: 140px } .br-t-h1 { font-size: 36px } .br-t-h2 { font-size: 27px } .br-tcard { padding: 22px 20px 24px } .br-trow,.br-table.is-motion .br-trow { grid-template-columns: 1fr; gap: 3px; padding: 12px 16px } .br-table.is-motion .br-trow span:last-child { text-align: left } .br-anat .br-trow { grid-template-columns: 1fr } .br-dash { margin-top: 28px } .br-comp { padding: 22px 20px 24px } .br-comp.is-dark { padding: 0 } .br-comp.is-lav { padding: 22px 16px } .br-ai { padding: 32px 22px 34px; border-radius: 20px } .br-ai .br-btns { flex-direction: column; align-items: stretch } .br-btn { text-align: center } } @keyframes fblPop { 0% { transform: scale(.82); opacity: .25 } 55% { transform: scale(1.08); opacity: 1 } 100% { transform: scale(1); opacity: 1 } } @keyframes fblRing { 0% { box-shadow: 0 0 0 0 rgba(238,255,65,.95) } 100% { box-shadow: 0 0 0 16px rgba(238,255,65,0) } } @keyframes pxPulse { 0%,100% { opacity: 1; transform: scale(1) } 50% { opacity: .35; transform: scale(.7) } } html { scroll-behavior: smooth; background: var(--p-page) } body { margin: 0 } .ncl h1,.ncl h2 { margin-bottom: 0 } .ncl button { cursor: pointer } .ncl-logo { width: auto } .br-tile-art.is-sven img.br-sven { width: auto; height: 90px } .br-tile-art.is-mark img { max-width: 90px; object-fit: contain } .br-tile-art img { max-width: 80%; object-fit: contain } .ncl a:focus-visible,.ncl button:focus-visible { outline: 2px solid var(--p-accent); outline-offset: 5px } .brand-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); padding: 12px 20px; border-radius: 10px; background: var(--p-ink); color: white; font: 13px Inter,sans-serif; z-index: 100; box-shadow: 0 4px 24px #0002 } .brand-toast:empty { display: none } @media(max-width:809px) { .ncl-nav.is-open .ncl-navr { display: flex; position: absolute; top: 56px; left: 0; right: 0; background: var(--p-page); padding: 24px 32px; flex-direction: column; align-items: flex-start; border-bottom: 1px solid #1f1e1d1c } } @media(prefers-reduced-motion:reduce) { html { scroll-behavior: auto } .ncl * { animation: none!important; transition: none!important } } /* Selected dashboard panes keep the window at its original width. */ .br-dash .mcp-panes { width: 100%; } .br-dash .mcp-panes > .mcp-pane { width: 100%; } .br-dash .mcp-body { min-height: 340px; } .br-motion .hs-scene[aria-hidden="true"] { visibility: hidden; } /* Theme tokens preserve the original light palette and use lavender on dark. */ :root { --p-page:#FAF9F5; --p-surface:#FFFFFF; --p-card:#FCFBF8; --p-panel:#F6F5F0; --p-soft:#EDEBE3; --p-band:#F3F2ED; --p-lav-ground:#EEEEFB; --p-ink:#1F1E1D; --p-dark:#161514; --p-lede:#55534E; --p-body:#5E5D59; --p-muted:#8B8984; --p-ghost:#9A9891; --p-accent:#5150F6; --p-lavender:#A5A4FA; --p-ink-rgb:31 30 29; --p-accent-rgb:81 80 246; color-scheme:light; } html[data-theme="dark"] { --p-page:#161514; --p-surface:#201F1E; --p-card:#252423; --p-panel:#222120; --p-soft:#32302E; --p-band:#292725; --p-lav-ground:#29273F; --p-ink:#F5F3EE; --p-dark:#111110; --p-lede:#C5C2BA; --p-body:#BDBAB3; --p-muted:#AAA69E; --p-ghost:#B2AEA6; --p-accent:#A5A4FA; --p-lavender:#A5A4FA; --p-ink-rgb:245 243 238; --p-accent-rgb:165 164 250; --background:#161514; --foreground:#F5F3EE; color-scheme:dark; } html,body { background:var(--p-page); color:var(--p-ink); } /* Identity and texture specimens keep their specified brand colours in both themes. */ .br-tile-art { background:#FAF9F5; } .br-tile-art.is-ink { background:#1F1E1D; } .br-tile-art.is-brand { background:#5150F6; } .ncl-btn-dark,.ncl-cta-dark,.cx-btn-dark { background:#1F1E1D; color:#FFFFFF; } html[data-theme="dark"] .ncl-btn-dark,html[data-theme="dark"] .ncl-cta-dark,html[data-theme="dark"] .cx-btn-dark { background:#A5A4FA; color:#161514; } html[data-theme="dark"] .ncl-logo { filter:brightness(0) invert(1); } .br-comp.is-dark,.eo-pc.is-dark,.eo-mx-pill,.bx-term { background:#1F1E1D; color:#FFFFFF; } .eo-pc.is-dark .eo-pc-t,.eo-mx-pill { color:#FFFFFF; } .bx-code,.bx-code .bx-prompt,.bx-code .h { color:#FAF9F5; } .br-term .bx-code { min-height:220px; height:260px; } .bx-termtitle { color:#A5A4FA; } .bx-termbar i { background:rgba(255,255,255,.25); } .br-motion .hs-scene[aria-hidden="true"] { visibility:hidden; } .zunas-status { display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border-radius:6px;background:var(--p-lav-ground);color:var(--p-accent);font:10px/1.4 'Geist Mono',monospace;white-space:nowrap; } .zunas-mini-row { display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 18px;border-bottom:1px solid rgb(var(--p-ink-rgb)/.08);font-size:12px; } .zunas-product-window { width:100%;overflow:hidden; } .zunas-product-window .mcp-panes { width:100%;display:block; } .zunas-product-window .mcp-pane { width:100%;min-height:400px; } .zunas-app-head { display:flex;justify-content:space-between;align-items:center;gap:20px;padding:24px 26px;border-bottom:1px solid rgb(var(--p-ink-rgb)/.1); } .zunas-app-head h3 { font:500 26px/1.2 'P22 Mackinac',Georgia,serif;letter-spacing:-.015em;margin:8px 0;color:var(--p-ink); } .zunas-app-head p { font:12px/1.5 Inter,sans-serif;color:var(--p-muted);margin:0; } .zunas-workspace { display:grid;grid-template-columns:1fr 1fr; } .zunas-queue { padding:24px;border-right:1px solid rgb(var(--p-ink-rgb)/.1); } .zunas-lead { display:flex;align-items:center;gap:10px;padding:19px 0;border-bottom:1px solid rgb(var(--p-ink-rgb)/.08); } .zunas-avatar { width:32px;height:32px;display:grid;place-items:center;background:var(--p-panel);border:1px solid rgb(var(--p-ink-rgb)/.1);border-radius:50%;font:10px 'Geist Mono',monospace;flex-shrink:0; } .zunas-lead>div { flex:1;min-width:0; } .zunas-lead b { display:block;font:500 12px/1.4 Inter,sans-serif; } .zunas-lead small { display:block;font:10px/1.5 Inter,sans-serif;color:var(--p-muted);margin-top:3px; } .zunas-queue-note { font:11px/1.6 Inter,sans-serif;color:var(--p-muted);margin-top:18px;max-width:230px; } .zunas-conversation { padding:24px;display:flex;flex-direction:column;gap:14px; } .zunas-bubble { padding:12px 14px;border-radius:10px;font:12px/1.6 Inter,sans-serif;max-width:92%; } .zunas-bubble.is-agent { background:var(--p-lav-ground);align-self:flex-start; } .zunas-bubble.is-lead { background:var(--p-panel);align-self:flex-end; } .zunas-event { font:10px/1.5 'Geist Mono',monospace;color:var(--p-accent);margin-top:8px; } .zunas-specimen-label { padding:11px 24px;background:var(--p-card);border-top:1px solid rgb(var(--p-ink-rgb)/.08);font:9px/1.5 'Geist Mono',monospace;text-transform:uppercase;letter-spacing:.08em;color:var(--p-muted); } .zunas-appointments { display:grid;grid-template-columns:220px 1fr;gap:32px;padding:32px; } .zunas-date { display:flex;flex-direction:column;align-items:flex-start;gap:15px;background:var(--p-lav-ground);border:1px solid rgb(var(--p-accent-rgb)/.16);padding:26px;border-radius:12px;font-size:13px; } .zunas-date strong { font:400 42px/1.1 'P22 Mackinac',Georgia,serif; } .zunas-appointment-detail h4 { font:500 23px 'P22 Mackinac',Georgia,serif;margin:6px 0; } .zunas-appointment-detail p { color:var(--p-muted);font-size:12px;margin:8px 0 24px; } .zunas-check { font:12px/1.5 Inter,sans-serif;padding:9px 0;border-bottom:1px solid rgb(var(--p-ink-rgb)/.08); } .zunas-transfer { text-align:center;padding:28px 32px; } .zunas-call-symbol { display:grid;place-items:center;margin:0 auto 16px;width:48px;height:48px;border-radius:50%;background:var(--p-lav-ground);color:var(--p-accent);font-size:26px; } .zunas-transfer h4,.zunas-goal h4 { font:500 28px/1.2 'P22 Mackinac',Georgia,serif;margin:14px 0; } .zunas-transfer p { max-width:380px;margin:0 auto;color:var(--p-body);font:12px/1.6 Inter,sans-serif; } .zunas-handoff { display:flex;justify-content:center;gap:12px;align-items:center;margin:25px 0;font:10px 'Geist Mono',monospace; } .zunas-handoff span { background:var(--p-panel);padding:10px;border-radius:6px; } .zunas-handoff i { color:var(--p-accent);font-style:normal; } .zunas-flow { padding:24px;border-right:1px solid rgb(var(--p-ink-rgb)/.1); } .zunas-flow-step { display:flex;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid rgb(var(--p-ink-rgb)/.08); } .zunas-flow-step>span { font:11px 'Geist Mono',monospace;color:var(--p-accent); } .zunas-flow-step>div { flex:1; } .zunas-flow-step b { display:block;font:500 12px Inter,sans-serif; } .zunas-flow-step small { display:block;font:10px Inter,sans-serif;color:var(--p-muted);margin-top:5px; } .zunas-flow-step i { font-style:normal;color:var(--p-muted); } .zunas-goal { padding:24px;background:var(--p-card); } .zunas-goal p { font:12px/1.6 Inter,sans-serif;color:var(--p-body); } .zunas-goal-field { border-top:1px solid rgb(var(--p-ink-rgb)/.1);padding:14px 0; } .zunas-goal-field span { display:block;font:9px 'Geist Mono',monospace;text-transform:uppercase;color:var(--p-muted);margin-bottom:7px; } .zunas-goal-field b { font:400 11px/1.6 Inter,sans-serif; } .bx-tab { border:0;font-family:inherit;cursor:pointer;color:var(--p-body);background:transparent; } .zunas-motion-stage { height:430px;min-height:430px; } .zunas-motion-window { width:100%;max-width:560px; } .zunas-motion-content { padding:34px; } .zunas-motion-content h3 { font:500 34px/1.15 'P22 Mackinac',Georgia,serif;letter-spacing:-.015em;margin:16px 0; } .zunas-motion-content p { font:14px/1.6 Inter,sans-serif;color:var(--p-body);max-width:380px;margin-bottom:20px; } .zunas-progress { display:flex;gap:6px;margin-top:30px; } .zunas-progress i { height:4px;flex:1;background:var(--p-soft);border-radius:2px; } .zunas-progress i.is-done { background:var(--p-accent); } .zunas-theme-row { display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid rgb(var(--p-ink-rgb)/.11);padding:26px 0; } .zunas-theme-switch { display:flex;gap:4px;background:var(--p-soft);padding:4px;border-radius:999px; } .zunas-theme-switch button { display:flex;align-items:center;gap:7px;border:0;background:transparent;color:var(--p-lede);font:12px Inter,sans-serif;padding:9px 15px;border-radius:999px; } .zunas-theme-switch button[aria-pressed="true"] { background:var(--p-surface);color:var(--p-ink);box-shadow:0 1px 4px #0001; } @media(max-width:700px) { .zunas-app-head { padding:20px;align-items:flex-start;flex-direction:column;gap:12px; } .zunas-app-head h3 { font-size:24px; } .zunas-workspace { grid-template-columns:1fr; } .zunas-queue,.zunas-flow { border-right:0;border-bottom:1px solid rgb(var(--p-ink-rgb)/.1);padding:20px; } .zunas-conversation,.zunas-goal { padding:20px; } .zunas-appointments { grid-template-columns:1fr;padding:20px;gap:20px; } .zunas-date { padding:20px; } .zunas-handoff { flex-wrap:wrap;gap:8px; } .zunas-handoff span { padding:8px; } .zunas-transfer { padding:26px 20px; } .br-term .bx-tabs { flex-wrap:wrap; } .br-term .bx-tab { flex:1 1 40%;font-size:10px; } .zunas-motion-stage { height:430px; } .hseq .zunas-outcome-scene { padding:20px; } .zunas-motion-content { padding:24px; } .zunas-motion-content h3 { font-size:28px; } } .zunas-product-window { max-width:none; } #dash .br-dash { max-width:900px; } .zunas-motion-window { max-width:560px; } html[data-theme="dark"] .br-ai>.eo-zp,html[data-theme="dark"] .zunas-motion-stage>.eo-zp { filter:brightness(2); } html[data-theme="dark"] .br-term .bx-term,html[data-theme="dark"] .cx-win { box-shadow:0 26px 60px -30px rgba(0,0,0,.6); } html[data-theme="dark"] .ncl-btn-soft { background:var(--p-soft);color:var(--p-ink); } html[data-theme="dark"] .ncl-btn-soft:hover { background:var(--p-band); } .br-social-cover { background:#161514; } .br-social-cover img { display:block;width:100%;height:auto; } ```