Studio voor elk idee
van ontwerp tot website

Begin met Studio Bekijk de editor ↗

Ontwerp

Granola

Publiceren

Huidige pagina

Home

Body

div

Main content

div

Section

div

Section

div

Section

div

Section

div

Pagina’s

Lagen

Assets

Link

Er staat al een link in (a).

Link naar

Plaatsing

Kolomspan

Rijspan

Type

Afmetingen

Toevoegen…

Min Max

Verhouding

Auto

Breedte

Auto

Hoogte

Layout

Richting

Uitlijning

granola-32, 32px

Wrap

Gap

granola-0, 0px

Padding

Stijlen

Dekking

Agent

Stijl

Instellingen

Desktop

1440 px

New

Granola for Apple Watch

The AI notepad for back-to-back meetings

Download for free

Available for macOS, Windows, iOS, Android

Notes, actions and memory.

Without a meeting bot.

Effortless notes, enhanced instantly.

Uses your computer audio,

so doesn’t invite a bot

Private by default

, easy to share if you choose

Works with

Zoom

Google Meet

Teams

and every other meeting app.

Enterprise

Pricing

Blog

Careers

Features

Download

Vraag AI

Home

div

Main content

div

Section

div

50 %

Ontwerp

Granola

Publiceren

Huidige pagina

Home

Body

div

Main content

div

Section

div

The AI notepad for back-to-back meetings

div

Section

div

Section

div

Section

Pagina’s

Lagen

Assets

Link

Geen

Link naar

Plaatsing

Type

Afmetingen

|→

|≡

▣

Meegroeien

W ≥

W ≤

H ≥

H ≤

Min en max

Breedte

Auto

Hoogte

Stijlen

Dekking

Nee

Zichtbaar

Hoekradius

Toevoegen…

Vulling

Rand

Bewerken…

Dikte

Agent

Stijl

Instellingen

Desktop

1440 px

New

Granola for Apple Watch

The AI notepad for back-to-back meetings

Download for free

Available for macOS, Windows, iOS, Android

Notes, actions and memory.

Without a meeting bot.

Effortless notes, enhanced instantly.

Uses your computer audio,

so doesn’t invite a bot

Private by default

, easy to share if you choose

Works with

Zoom

Google Meet

Teams

and every other meeting app.

Enterprise

Pricing

Blog

Careers

Features

Download

Vraag AI

Home

div

Main content

div

Section

div

The AI notepad for back-to-back meetings

50 %

Pauzeer animaties

Canvas

Auto-layout

Componenten

CMS

Breakpoints

Publiceren

Ontwerp

Granola

Publiceren

Huidige pagina

Home

Body

div

Main content

div

Section

div

Section

div

Section

div

Section

div

Pagina’s

Lagen

Assets

Link

Er staat al een link in (a).

Link naar

Plaatsing

Kolomspan

Rijspan

Type

Afmetingen

Toevoegen…

Min Max

Verhouding

Auto

Breedte

Auto

Hoogte

Layout

Richting

Uitlijning

granola-32, 32px

Wrap

Gap

granola-0, 0px

Padding

Stijlen

Dekking

Agent

Stijl

Instellingen

Desktop

1440 px

New

Granola for Apple Watch

The AI notepad for back-to-back meetings

Download for free

Available for macOS, Windows, iOS, Android

Notes, actions and memory.

Without a meeting bot.

Effortless notes, enhanced instantly.

Uses your computer audio,

so doesn’t invite a bot

Private by default

, easy to share if you choose

Works with

Zoom

Google Meet

Teams

and every other meeting app.

Enterprise

Pricing

Blog

Careers

Features

Download

Vraag AI

Home

div

Main content

div

Section

div

50 %

Ontwerp

Granola

Publiceren

Huidige pagina

Home

Body

div

Main content

div

Section

div

The AI notepad for back-to-back meetings

div

Section

div

Section

div

Section

Pagina’s

Lagen

Assets

Link

Geen

Link naar

Plaatsing

Type

Afmetingen

|→

|≡

▣

Meegroeien

W ≥

W ≤

H ≥

H ≤

Min en max

Breedte

Auto

Hoogte

Stijlen

Dekking

Nee

Zichtbaar

Hoekradius

Toevoegen…

Vulling

Rand

Bewerken…

Dikte

Agent

Stijl

Instellingen

Desktop

1440 px

New

Granola for Apple Watch

The AI notepad for back-to-back meetings

Download for free

Available for macOS, Windows, iOS, Android

Notes, actions and memory.

Without a meeting bot.

Effortless notes, enhanced instantly.

Uses your computer audio,

so doesn’t invite a bot

Private by default

, easy to share if you choose

Works with

Zoom

Google Meet

Teams

and every other meeting app.

Enterprise

Pricing

Blog

Careers

Features

Download

Vraag AI

Home

div

Main content

div

Section

div

The AI notepad for back-to-back meetings

50 %

Ontwerp direct op je canvas.

Van een eerste opzet tot een eigen stijl. Geef je pagina vorm met visuele tools, herbruikbare onderdelen en controle over elk detail.

Ontdek de mogelijkheden ↗

Er is hier geen canvas

CMS

Studio demo

Publiceren

Collections

Studio Journal

Collection

Een collection is een verzameling berichten met dezelfde velden. Een entry is één bericht.

Naam

titel

Veld voor URL-naam

(geen)

Detailpagina

Maak detailpagina

Velden

Tekst

Datum

Een detailpagina levert bij publiceren één statische pagina per entry. Gebruik

{{ veld }} in de paginatitel om die per entry te vullen.

Agent

Velden

Van idee naar je eerste website

gereed

studio-journal-0

15-09-2026

22-09-2026

Inspiratie

22-09-2026

Ontwerpen met auto-layout

gereed

studio-journal-1

15-09-2026

22-09-2026

Handleiding

22-09-2026

Je content op één plek

gereed

studio-journal-2

15-09-2026

22-09-2026

Inspiratie

22-09-2026

Een eigen stijl met variabelen

gereed

studio-journal-3

15-09-2026

22-09-2026

Handleiding

22-09-2026

Responsive op ieder scherm

gereed

studio-journal-4

15-09-2026

22-09-2026

Inspiratie

22-09-2026

Publiceer waar jij wilt

gereed

studio-journal-5

15-09-2026

22-09-2026

Handleiding

22-09-2026

Titel

Status

Slug

Aangemaakt

Bijgewerkt

Categorie

Datum

6 entries

Collections

Formulieren

Geef je content de ruimte.

Maak collecties voor je artikelen en andere inhoud. Ontwerp de pagina één keer en laat je CMS de juiste content op de juiste plek tonen.

Ontdek de mogelijkheden ↗

Ontwerp

Granola

Publiceren

Huidige pagina

Home

Body

div

Main content

div

Section

div

Section

div

Section

div

Section

div

Pagina’s

Lagen

Assets

Link

Er staat al een link in (a).

Link naar

Plaatsing

Kolomspan

Rijspan

Type

Afmetingen

Toevoegen…

Min Max

Verhouding

Auto

Breedte

Auto

Hoogte

Layout

Richting

Uitlijning

granola-32, 32px

Wrap

Gap

granola-0, 0px

Padding

Stijlen

Dekking

Agent

Stijl

Instellingen

Desktop

1440 px

New

Granola for Apple Watch

The AI notepad for back-to-back meetings

Download for free

Available for macOS, Windows, iOS, Android

Notes, actions and memory.

Without a meeting bot.

Effortless notes, enhanced instantly.

Uses your computer audio,

so doesn’t invite a bot

Private by default

, easy to share if you choose

Works with

Zoom

Google Meet

Teams

and every other meeting app.

Enterprise

Pricing

Blog

Careers

Features

Download

Vraag AI

Home

div

Main content

div

Section

div

50 %

Ontwerp

Granola

Publiceren

Huidige pagina

Home

Body

div

Main content

div

Section

div

The AI notepad for back-to-back meetings

div

Section

div

Section

div

Section

Pagina’s

Lagen

Assets

Link

Geen

Link naar

Plaatsing

Type

Afmetingen

|→

|≡

▣

Meegroeien

W ≥

W ≤

H ≥

H ≤

Min en max

Breedte

Auto

Hoogte

Stijlen

Dekking

Nee

Zichtbaar

Hoekradius

Toevoegen…

Vulling

Rand

Bewerken…

Dikte

Agent

Stijl

Instellingen

Desktop

1440 px

New

Granola for Apple Watch

The AI notepad for back-to-back meetings

Download for free

Available for macOS, Windows, iOS, Android

Notes, actions and memory.

Without a meeting bot.

Effortless notes, enhanced instantly.

Uses your computer audio,

so doesn’t invite a bot

Private by default

, easy to share if you choose

Works with

Zoom

Google Meet

Teams

and every other meeting app.

Enterprise

Pricing

Blog

Careers

Features

Download

Vraag AI

Home

div

Main content

div

Section

div

The AI notepad for back-to-back meetings

50 %

<!doctype html>
<html lang="nl">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Granola</title>
<meta property="og:type" content="website" />
<meta property="og:title" content="Granola" />
<meta name="twitter:card" content="summary" />
<style>

:root {
--color-bg: #ffffff;
--color-surface: #f4f4f5;
--color-text: #18181b;
--color-muted: #71717a;
--color-brand: #2563eb;
--color-brand-contrast: #ffffff;
--color-border: #e4e4e7;
--space-3xs: clamp(0.25rem, 0.23rem + 0.1vw, 0.31rem);
--space-2xs: clamp(0.5rem, 0.46rem + 0.2vw, 0.63rem);
--space-xs: clamp(0.75rem, 0.69rem + 0.3vw, 0.94rem);
--space-s: clamp(1rem, 0.91rem + 0.4vw, 1.25rem);
--space-m: clamp(1.5rem, 1.37rem + 0.6vw, 1.88rem);
--space-l: clamp(2rem, 1.83rem + 0.8vw, 2.5rem);
--space-xl: clamp(3rem, 2.74rem + 1.2vw, 3.75rem);
--space-2xl: clamp(4rem, 3.65rem + 1.6vw, 5rem);
--space-3xl: clamp(6rem, 5.48rem + 2.4vw, 7.5rem);
--space-granola-0: 0px;
--space-granola-40: 40px;
--space-granola-16: 16px;
--space-granola-8: 8px;
--space-granola-n8d5: -8.5px;
--space-granola-n16: -16px;
--space-granola-1: 1px;
--space-granola-4: 4px;
--space-granola-12: 12px;
--space-granola-2: 2px;
--space-granola-6: 6px;
--space-granola-24: 24px;
--space-granola-10: 10px;
--space-granola-48: 48px;
--space-granola-n8: -8px;
--space-granola-120: 120px;
--space-granola-96: 96px;
--space-granola-32: 32px;
--space-granola-9: 9px;
--space-granola-n40: -40px;
--space-granola-6d5: 6.5px;
--space-granola-15d5: 15.5px;
--space-granola-64: 64px;
--space-granola-28: 28px;
--space-granola-15: 15px;
--space-granola-3: 3px;
--space-granola-20: 20px;
--space-granola-160: 160px;
--space-granola-18: 18px;
--space-granola-14: 14px;
--space-granola-112: 112px;
--space-granola-80: 80px;
--space-granola-n1: -1px;
--space-granola-1d5772: 1.5772px;
--space-granola-0d96: 0.96px;
--space-granola-36: 36px;
--space-granola-56: 56px;
--space-granola-52: 52px;
--space-granola-128: 128px;
--space-granola-124: 124px;
--space-granola-n216: -216px;
--space-granola-n192: -192px;
--space-granola-n153d6: -153.6px;
--space-granola-n135: -135px;
--space-granola-n115d2: -115.2px;
--space-granola-n58d5: -58.5px;
--space-granola-22: 22px;
--text-xs: clamp(0.75rem, 0.73rem + 0.1vw, 0.81rem);
--text-s: clamp(0.88rem, 0.84rem + 0.18vw, 0.98rem);
--text-m: clamp(1rem, 0.95rem + 0.24vw, 1.13rem);
--text-l: clamp(1.25rem, 1.16rem + 0.44vw, 1.5rem);
--text-xl: clamp(1.56rem, 1.4rem + 0.8vw, 2rem);
--text-2xl: clamp(1.95rem, 1.68rem + 1.35vw, 2.67rem);
--text-3xl: clamp(2.44rem, 2rem + 2.2vw, 3.55rem);
--text-granola-16: 16px;
--text-granola-14: 14px;
--text-granola-13: 13px;
--text-granola-12: 12px;
--text-granola-68: 68px;
--text-granola-110: 110px;
--text-granola-72: 72px;
--text-granola-48: 48px;
--text-granola-20: 20px;
--text-granola-36: 36px;
--text-granola-10: 10px;
--text-granola-160: 160px;
--text-granola-24: 24px;
--text-granola-17: 17px;
--text-granola-120: 120px;
--text-granola-60: 60px;
--text-granola-108: 108px;
--text-granola-96: 96px;
--text-granola-76d8: 76.8px;
--text-granola-39d43: 39.43px;
--text-granola-32: 32px;
--text-granola-22: 22px;
--text-granola-88: 88px;
--text-granola-30: 30px;
--radius-s: 4px;
--radius-m: 10px;
--radius-l: 20px;
--radius-full: 999px;
--shadow-s: 0 1px 2px rgb(0 0 0 / 0.06);
--shadow-m: 0 8px 24px rgb(0 0 0 / 0.08);
--font-body: melange, sans-serif;
--font-heading: quadrant, serif;
--font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
}

*, *::before, *::after {
box-sizing: border-box;
}
* {
margin: 0;
}
html {
-webkit-text-size-adjust: 100%;
}
body {
font-family: var(--font-body);
font-size: var(--text-m);
line-height: 1.5;
color: var(--color-text);
background: var(--color-bg);
}
img, picture, video, canvas, svg {
display: block;
max-width: 100%;
}
img {
width: auto;
height: auto;
}
h1, h2, h3, h4 {
font-family: var(--font-heading);
line-height: 1.15;
text-wrap: balance;
}
p {
text-wrap: pretty;
}
a {
color: inherit;
}
:focus-visible {
outline: 2px solid currentColor;
outline-offset: 2px;
}

.s1 {
display: flex;
flex-direction: column;
width: 100%;
height: auto;
min-height: 100dvh;
}
.navigation {
gap: var(--space-granola-0, 0px);
padding-top: var(--space-granola-0, 0px);
padding-right: var(--space-granola-0, 0px);
padding-bottom: var(--space-granola-0, 0px);
padding-left: var(--space-granola-0, 0px);
position: relative;
background: transparent;
border: 0px solid transparent;
border-radius: 0px 0px 0px 0px;
display: block;
font-family: melange;
color: rgb(41, 41, 41);
font-size: var(--text-granola-16, 16px);
font-weight: 400;
line-height: 1.5;
letter-spacing: normal;
}
.s2 {
gap: var(--space-granola-0, 0px);
padding-top: var(--space-granola-0, 0px);
padding-right: var(--space-granola-40, 40px);
padding-bottom: var(--space-granola-0, 0px);
padding-left: var(--space-granola-40, 40px);
position: relative;
width: 100%;
min-width: 0px;
max-width: 1280px;
background: transparent;
border: 0px solid transparent;
border-radius: 0px 0px 0px 0px;
display: block;
font-family: melange;
color: rgb(41, 41, 41);
font-size: var(--text-granola-16, 16px);
font-weight: 400;
line-height: 1.5;
letter-spacing: normal;
}
.nav {
display: flex;
flex-direction: row;
gap: var(--space-granola-0, 0px);
justify-content: flex-start;
align-items: center;
padding-top: var(--space-granola-0, 0px);
padding-right: var(--space-granola-8, 8px);
padding-bottom: var(--space-granola-0, 0px);
padding-left: var(--space-granola-8, 8px);
width: calc(100% + 17px);
min-width: 0px;
max-width: none;
height: 56px;
min-height: 0px;
max-height: none;
background: transparent;
border: 1px solid rgba(0, 0, 0, 0);
border-radius: 9999px 9999px 9999px 9999px;
font-family: melange;
color: rgb(41, 41, 41);
font-size: var(--text-granola-16, 16px);
font-weight: 400;
line-height: 1.5;
letter-spacing: normal;
}
.s3 {
display: flex;
flex-direction: row;
gap: var(--space-granola-1, 1px);
justify-content: flex-start;
align-items: center;
padding-top: var(--space-granola-8, 8px);
padding-right: var(--space-granola-0, 0px);
padding-bottom: var(--space-granola-8, 8px);
padding-left: var(--space-granola-0, 0px);
width: 100%;
flex-shrink: 0;
min-width: 0px;
max-width: none;
background: transparent;
border: 0px solid transparent;
border-radius: 0px 0px 0px 0px;
font-family: melange;
color: rgb(41, 41, 41);
font-size: var(--text-granola-16, 16px);
font-weight: 400;
line-height: 1.5;
letter-spacing: normal;
}
.s4 {
display: flex;
flex-direction: row;
gap: var(--space-granola-0, 0px);
justify-content: flex-start;
align-items: center;
padding-top: var(--space-granola-0, 0px);
padding-right: var(--space-granola-0, 0px);
padding-bottom: var(--space-granola-0, 0px);
padding-left: var(--space-granola-0, 0px);
background: transparent;
border: 0px solid transparent;
border-radius: 0px 0px 0px 0px;
font-family: melange;
color: rgb(41, 41, 41);
font-size: var(--text-granola-16, 16px);
font-weight: 400;
line-height: 1.5;
letter-spacing: normal;
}
.granola-home {
gap: var(--space-granola-0, 0px);
padding-top: var(--space-granola-0, 0px);
padding-right: var(--space-granola-0, 0px);
padding-bottom: var(--space-granola-0, 0px);
padding-left: var(--space-granola-4, 4px);
position: relative;
background: transparent;
border: 0px solid transparent;
border-radius: 0px 0px 0px 0px;
display: inline;
font-family: melange;
color: rgb(41, 41, 41);
font-size: var(--text-granola-16, 16px);
font-weight: 400;
line-height: 1.5;
letter-spacing: normal;
text-decoration: none;
}
.s5 {
gap: var(--space-granola-0, 0px);
padding-top: var(--space-granola-0, 0px);
padding-right: var(--space-granola-0, 0px);
padding-bottom: var(--space-granola-0, 0px);
padding-left: var(--space-granola-0, 0px);
position: relative;
background: transparent;
border: 0px solid transparent;
border-radius: 0px 0px 0px 0px;
display: block;
font-family: melange;
color: rgb(41, 41, 41);
font-size: var(--text-granola-16, 16px);
font-weight: 400;
line-height: 1.5;
letter-spacing: normal;
}
.de41e1d214b70b8ca349197f-svg {
gap: var(--space-granola-0, 0px);
padding-top: var(--space-granola-0, 0px);
padding-right: var(--space-granola-0, 0px);
padding-bottom: var(--space-granola-0, 0px);
padding-left: var(--space-granola-0, 0px);
position: relative;
height: 28px;
min-height: 0px;
max-height: none;
background: transparent;
border: 0px solid transparent;
border-radius: 0px 0px 0px 0px;
display: block;
font-family: melange;
color: rgb(41, 41, 41);
font-size: var(--text-granola-16, 16px);
font-weight: 400;
line-height: 1.5;
letter-spacing: normal;
object-fit: cover;
}
.s6 {
display: flex;
flex-direction: row;
gap: var(--space-granola-0, 0px);
justify-content: center;
align-items: center;
padding-top: var(--space-granola-0, 0px);
padding-right: var(--space-granola-0, 0px);
padding-bottom: var(--space-granola-0, 0px);
padding-left: var(--space-granola-0, 0px);
background: transparent;
border: 0px solid transparent;
border-radius: 0px 0px 0px 0px;
font-family: melange;
color: rgb(41, 41, 41);
font-size: var(--text-granola-16, 16px);
font-weight: 400;
line-height: 1.5;
letter-spacing: normal;
}
.features-menu {
gap: var(--space-granola-0, 0px);
padding-top: var(--space-granola-0, 0px);
padding-right: var(--space-granola-0, 0px);
padding-bottom: var(--space-granola-0, 0px);
padding-left: var(--space-granola-0, 0px);
position: relative;
background: transparent;
border: 0px solid transparent;
border-radius: 0px 0px 0px 0px;
display: block;
font-family: melange;
color: rgb(41, 41, 41);
font-size: var(--text-granola-16, 16px);
font-weight: 400;
line-height: 1.5;
letter-spacing: normal;
}
.s7 {
display: flex;
flex-direction: row;
gap: var(--space-granola-0, 0px);
justify-content: flex-start;
align-items: center;
padding-top: var(--space-granola-6, 6px);
padding-right: var(--space-granola-12, 12px);
padding-bottom: var(--space-granola-6, 6px);
padding-left: var(--space-granola-12, 12px);
background: transparent;
border: 1px solid rgba(0, 0, 0, 0);
border-radius: 3.35544e+07px 3.35544e+07px 3.35544e+07px 3.35544e+07px;
font-family: melange;
color: rgb(41, 41, 41);
font-size: var(--text-granola-14, 14px);
font-weight: 400;
line-height: 24px;
letter-spacing: 0.14px;
}
.blog-2 {
border: 0px solid transparent;
border-radius: 0px 0px 0px 0px;
display: inline;
font-family: melange;
color: rgb(41, 41, 41);
font-size: var(--text-granola-14, 14px);
font-weight: 400;
line-height: 24px;
letter-spacing: 0.14px;
}
.s8 {
gap: var(--space-granola-0, 0px);
padding-top: var(--space-granola-24, 24px);
padding-right: var(--space-granola-0, 0px);
padding-bottom: var(--space-granola-0, 0px);
padding-left: var(--space-granola-0, 0px);
position: relative;
width: 600px;
min-width: 0px;
background: transparent;
border: 0px solid transparent;
border-radius: 0px 0px 0px 0px;
opacity: 0;
display: block;
font-family: melange;
color: rgb(41, 41, 41);
font-size: var(--text-granola-16, 16px);
font-weight: 400;
line-height: 1.5;
letter-spacing: normal;
}
.s9 {
gap: var(--space-granola-0, 0px);
padding-top: var(--space-granola-8, 8px);
padding-right: var(--space-granola-8, 8px);
padding-bottom: var(--space-granola-8, 8px);
padding-left: var(--space-granola-8, 8px);
position: relative;
background: rgb(255, 255, 255);
border: 1px solid rgb(213, 213, 210);
border-radius: 8px 8px 8px 8px;
display: block;
font-family: melange;
color: rgb(41, 41, 41);
font-size: var(--text-granola-16, 16px);
font-weight: 400;
line-height: 1.5;
letter-spacing: normal;
}
.s10 {
display: flex;
flex-direction: row;
gap: var(--space-granola-0, 0px);
justify-content: flex-start;
align-items: stretch;
padding-top: var(--space-granola-0, 0px);
padding-right: var(--space-granola-0, 0px);
padding-bottom: var(--space-granola-0, 0px);
padding-left: var(--space-granola-0, 0px);
background: transparent;
border: 0px solid transparent;
border-radius: 0px 0px 0px 0px;
font-family: melange;
color: rgb(41, 41, 41);
font-size: var(--text-granola-16, 16px);
font-weight: 400;
line-height: 1.5;
letter-spacing: normal;
}
.s11 {
gap: var(--space-granola-0, 0px);
padding-top: var(--space-granola-0, 0px);
padding-right: var(--space-granola-0, 0px);
padding-bottom: var(--space-granola-0, 0px);
padding-left: var(--space-granola-0, 0px);
position: relative;
background: transparent;
border: 0px solid transparent;
border-radius: 0px 0px 0px 0px;
display: block;
font-family: melange;
color: rgb(41, 41, 41);
font-size: var(--text-granola-16, 16px);
font-weight: 400;
line-height: 1.5;
letter-spacing: normal;
}
.a-2 {
display: flex;
flex-direction: row;
gap: var(--space-granola-16, 16px);
justify-content: space-between;
align-items: center;
padding-top: var(--space-granola-10, 10px);
padding-right: var(--space-granola-48, 48px);
padding-bottom: var(--space-granola-10, 10px);
padding-left: var(--space-granola-16, 16px);
background: transparent;
border: 0px solid transparent;
border-radius: 8px 8px 8px 8px;
font-family: melange;
color: rgb(41, 41, 41);
font-size: var(--text-granola-14, 14px);
font-weight: 400;
line-height: 18px;
letter-spacing: 0.14px;
text-decoration: none;
}
.s12 {
width: 100%;
max-width: 4px;
min-width: 0px;
height: 24px;
min-height: 0px;
max-height: none;
border: 0px solid transparent;
border-radius: 3.35544e+07px 3.35544e+07px 3.35544e+07px 3.35544e+07px;
display: block;
font-family: melange;
color: rgb(41, 41, 41);
font-size: var(--text-granola-14, 14px);
font-weight: 400;
line-height: 18px;
letter-spacing: 0.14px;
}
.chat-icon {
width: 44px;
flex-shrink: 0;
min-width: 0px;
max-width: 100%;
height: 44px;
min-height: 0px;
max-height: none;
border: 0px solid transparent;
border-radius: 6px 6px 6px 6px;
display: block;
font-family: melange;
color: rgb(41, 41, 41);
font-size: var(--text-granola-14, 14px);
font-weight: 400;
line-height: 18px;
letter-spacing: 0.14px;
object-fit: cover;
}
.s13 {
gap: var(--space-granola-0, 0px);
padding-top: var(--space-granola-0, 0px);
padding-right: var(--space-granola-0, 0px);
padding-bottom: var(--space-granola-0, 0px);
padding-left: var(--space-granola-0, 0px);
position: relative;
background: transparent;
border: 0px solid transparent;
border-radius: 0px 0px 0px 0px;
display: block;
font-family: melange;
color: rgb(41, 41, 41);
font-size: var(--text-granola-14, 14px);
font-weight: 400;
line-height: 18px;
letter-spacing: 0.14px;
}
.chat {
border: 0px solid transparent;
border-radius: 0px 0px 0px 0px;
display: block;
font-family: melange;
color: rgb(41, 41, 41);
font-size: var(--text-granola-14, 14px);
font-weight: 500;
line-height: 18px;
letter-spacing: 0.14px;
}
.learn-more {
border: 0px solid transparent;
border-radius: 0px 0px 0px 0px;
display: block;
font-family: melange;
color: rgb(114, 114, 110);
font-size: var(--text-granola-13, 13px);
font-weight: 400;
line-height: 16px;
letter-spacing: 0.13px;
}
.button {
display: flex;
flex-direction: row;
gap: var(--space-granola-16, 16px);
justify-content: space-between;
align-items: center;
padding-top: var(--space-granola-10, 10px);
padding-right: var(--space-granola-48, 48px);
padding-bottom: var(--space-granola-10, 10px);
padding-left: var(--space-granola-16, 16px);
width: 100%;
min-width: 0px;
max-width: none;
background: transparent;
border: 0px solid transparent;
border-radius: 8px 8px 8px 8px;
font-family: melange;
color: rgb(41, 41, 41);
font-size: var(--text-granola-14, 14px);
font-weight: 400;
line-height: 18px;
letter-spacing: 0.14px;
}
.granola-for-mobile-icon {
width: 44px;
flex-shrink: 0;
min-width: 0px;
max-width: 100%;
height: 44px;
min-height: 0px;
max-height: none;
border: 0px solid transparent;
border-radius: 6px 6px 6px 6px;
display: block;
font-family: melange;
color: rgb(41, 41, 41);
font-size: var(--text-granola-14, 14px);
font-weight: 400;
line-height: 18px;
letter-spacing: 0.14px;
object-fit: cover;
}
.s14 {
gap: var(--space-granola-0, 0px);
padding-top: var(--space-granola-0, 0px);
padding-right: var(--space-granola-0, 0px);
padding-bottom: var(--space-granola-0, 0px);
padding-left: var(--space-granola-0, 0px);
position: relative;
background: transparent;
border: 0px solid transparent;
border-radius: 0px 0px 0px 0px;
display: block;
font-family: melange;
color: rgb(41, 41, 41);
font-size: var(--text-granola-14, 14px);
font-weight: 400;
line-height: 18px;
letter-spacing: 0.14px;
}
.s15 {
border: 0px solid transparent;
border-radius: 0px 0px 0px 0px;
display: block;
font-family: melange;
color: rgb(41, 41, 41);
font-size: var(--text-granola-14, 14px);
font-weight: 500;
line-height: 18px;
letter-spacing: 0.14px;
}
.s16 {
border: 0px solid transparent;
border-radius: 0px 0px 0px 0px;
display: block;
font-family: melange;
color: rgb(114, 114, 110);
font-size: var(--text-granola-13, 13px);
font-weight: 400;
line-height: 16px;
letter-spacing: 0.13px;
}
.s17 {
display: flex;
flex-direction: row;
gap: var(--space-granola-0, 0px);
justify-content: flex-start;
align-items: stretch;
padding-top: var(--space-granola-0, 0px);
padding-right: var(--space-granola-0, 0px);
padding-bottom: var(--space-granola-0, 0px);
padding-left: var(--space-granola-0, 0px);
background: transparent;
border: 0px solid transparent;
border-radius: 0px 0px 0px 0px;
font-family: melange;
color: rgb(41, 41, 41);
font-size: var(--text-granola-16, 16px);
font-weight: 400;
line-height: 1.5;
letter-spacing: normal;
}
.a-8 {
gap: var(--space-granola-0, 0px);
padding-top: var(--space-granola-12, 12px);
padding-right: var(--space-granola-12, 12px);
padding-bottom: var(--space-granola-12, 12px);
padding-left: var(--space-granola-12, 12px);
position: relative;
background: rgb(255, 255, 255);
border: 0px solid transparent;
border-radius: 8px 8px 8px 8px;
display: inline;
font-family: melange;
color: rgb(41, 41, 41);
font-size: var(--text-granola-16, 16px);
font-weight: 400;
line-height: 1.5;
letter-spacing: normal;
text-decoration: none;
}
.s18 {
gap: var(--space-granola-0, 0px);
padding-top: var(--space-granola-0, 0px);
padding-right: var(--space-granola-0, 0px);
padding-bottom: var(--space-granola-0, 0px);
padding-left: var(--space-granola-0, 0px);
position: relative;
background: transparent;
border: 0px solid transparent;
border-radius: 0px 0px 0px 0px;
display: block;
font-family: melange;
color: rgb(41, 41, 41);
font-size: var(--text-granola-16, 16px);
font-weight: 400;
line-height: 1.5;
letter-spacing: normal;
}
.granola-for-apple-watch {
width: 100%;
min-width: 0px;
max-width: 100%;
border: 0px solid transparent;
border-radius: 6px 6px 6px 6px;
aspect-ratio: auto 768 / 402;
display: block;
box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.03) 0px 0px 36px 0px;
font-family: melange;
color: rgba(0, 0, 0, 0);
font-size: var(--text-granola-16, 16px);
font-weight: 400;
line-height: 1.5;
letter-spacing: normal;
object-fit: cover;
}
.s19 {
display: flex;
flex-direction: column;
gap: var(--space-granola-4, 4px);
justify-content: flex-start;
align-items: stretch;
padding-top: var(--space-granola-0, 0px);
padding-right: var(--space-granola-0, 0px);
padding-bottom: var(--space-granola-0, 0px);
padding-left: var(--space-granola-0, 0px);
background: transparent;
border: 0px solid transparent;
border-radius: 0px 0px 0px 0px;
font-family: melange;
color: rgb(41, 41, 41);
font-size: var(--text-granola-16, 16px);
font-weight: 400;
line-height: 1.5;
letter-spacing: normal;
}
.s20 {
border: 0px solid transparent;
border-radius: 0px 0px 0px 0px;
display: block;
font-family: melange;
color: rgb(41, 41, 41);
font-size: var(--text-granola-14, 14px);
font-weight: 500;
line-height: 1.25;
letter-spacing: 0.14px;
}
.a {
display: flex;
flex-direction: row;
gap: var(--space-granola-0, 0px);
justify-content: flex-start;
align-items: center;
padding-top: var(--space-granola-6, 6px);
padding-right: var(--space-granola-12, 12px);
padding-bottom: var(--space-granola-6, 6px);
padding-left: var(--space-granola-12, 12px);
background: transparent;
border: 1px solid rgba(0, 0, 0, 0);
border-radius: 3.35544e+07px 3.35544e+07px 3.35544e+07px 3.35544e+07px;
font-family: melange;
color: rgb(41, 41, 41);
font-size: var(--text-granola-14, 14px);
font-weight: 400;
line-height: 24px;
letter-spacing: 0.14px;
text-decoration: none;
}
.s21 {
display: flex;
flex-direction: row;
gap: var(--space-granola-0, 0px);
justify-content: flex-end;
align-items: center;
padding-top: var(--space-granola-0, 0px);
padding-right: var(--space-granola-0, 0px);
padding-bottom: var(--space-granola-0, 0px);
padding-left: var(--space-granola-0, 0px);
background: transparent;
border: 0px solid transparent;
border-radius: 0px 0px 0px 0px;
font-family: melange;
color: rgb(41, 41, 41);
font-size: var(--text-granola-16, 16px);
font-weight: 400;
line-height: 1.5;
letter-spacing: normal;
}
.a-4 {
display: flex;
flex-direction: row;
gap: var(--space-granola-0, 0px);
justify-content: flex-start;
align-items: center;
padding-top: var(--space-granola-0, 0px);
padding-right: var(--space-granola-12, 12px);
padding-bottom: var(--space-granola-0, 0px);
padding-left: var(--space-granola-12, 12px);
height: 40px;
min-height: 0px;
max-height: none;
background: rgba(98, 90, 34, 0.06);
border: 1px solid rgba(0, 0, 0, 0);
border-radius: 3.35544e+07px 3.35544e+07px 3.35544e+07px 3.35544e+07px;
font-family: melange;
color: rgb(41, 41, 41);
font-size: var(--text-granola-14, 14px);
font-weight: 400;
line-height: 24px;
letter-spacing: 0.14px;
text-decoration: none;
}
.s22 {
display: flex;
flex-direction: row;
gap: var(--space-granola-0, 0px);
justify-content: flex-start;
align-items: center;
padding-top: var(--space-granola-0, 0px);
padding-right: var(--space-granola-0, 0px);
padding-bottom: var(--space-granola-0, 0px);
padding-left: var(--space-granola-0, 0px);
background: transparent;
border: 0px solid transparent;
border-radius: 0px 0px 0px 0px;
font-family: melange;
color: rgb(41, 41, 41);
font-size: var(--text-granola-14, 14px);
font-weight: 400;
line-height: 24px;
letter-spacing: 0.14px;
}
.dbea75685469fcd268243d7f-svg {
gap: var(--space-granola-0, 0px);
padding-top: var(--space-granola-0, 0px);
padding-right: var(--space-granola-0, 0px);
padding-bottom: var(--space-granola-0, 0px);
padding-left: var(--space-granola-0, 0px);
position: relative;
width: 16px;
max-width: 100%;
flex-shrink: 0;
min-width: 0px;
height: 16px;
min-height: 0px;
max-height: none;
background: transparent;
border: 0px solid transparent;
border-radius: 0px 0px 0px 0px;
display: block;
font-family: melange;
color: rgb(41, 41, 41);
font-size: var(--text-granola-14, 14px);
font-weight: 400;
line-height: 24px;
letter-spacing: 0.14px;
object-fit: cover;
}
.download {
border: 0px solid transparent;
border-radius: 0px 0px 0px 0px;
display: inline;
font-family: melange;
color: rgb(41, 41, 41);
font-size: var(--text-granola-14, 14px);
font-weight: 400;
line-height: 24px;
letter-spacing: 0.14px;
}
.open-menu {
gap: var(--space-granola-0, 0px);
padding-top: var(--space-granola-8, 8px);
padding-right: var(--space-granola-8, 8px);
padding-bottom: var(--space-granola-8, 8px);
padding-left: var(--space-granola-8, 8px);
position: relative;
background: transparent;
border: 0px solid transparent;
border-radius: 0px 0px 0px 0px;
display: none;
font-family: melange;
color: rgb(41, 41, 41);
font-size: var(--text-granola-16, 16px);
font-weight: 400;
line-height: 1.5;
letter-spacing: normal;
}
.af9d180728022ce90e0888cc-svg {
gap: var(--space-granola-0, 0px);
padding-top: var(--space-granola-0, 0px);
padding-right: var(--space-granola-0, 0px);
padding-bottom: var(--space-granola-0, 0px);
padding-left: var(--space-granola-0, 0px);
position: relative;
width: 24px;
min-width: 0px;
height: 24px;
min-height: 0px;
max-height: none;
background: transparent;
border: 0px solid transparent;
border-radius: 0px 0px 0px 0px;
display: block;
font-family: melange;
color: rgb(41, 41, 41);
font-size: var(--text-granola-16, 16px);
font-weight: 400;
line-height: 1.5;
letter-spacing: normal;
object-fit: cover;
}
.navigation-links {
display: flex;
flex-direction: column;
gap: var(--space-granola-8, 8px);
align-self: stretch;
background: #fff;
}
.blog {
font-family: melange;
color: #292929;
font-size: var(--text-granola-16, 16px);
line-height: 1.5;
}
.s23 {
gap: var(--space-granola-0, 0px);
padding-top: var(--space-granola-0, 0px);
padding-right: var(--space-granola-0, 0px);
padding-bottom: var(--space-granola-0, 0px);
padding-left: var(--space-granola-0, 0px);
position: relative;
height: 260px;
flex-shrink: 0;
min-height: 0px;
max-height: none;
background: rgb(178, 194, 72);
border: 0px solid transparent;
border-radius: 0px 0px 0px 0px;
display: block;
font-family: melange;
color: rgb(41, 41, 41);
font-size: var(--text-granola-16, 16px);
font-weight: 400;
line-height: 1.5;
letter-spacing: normal;
}
.footer {
width: 100%;
min-width: 0px;
max-width: 100%;
height: 100%;
min-height: 0px;
max-height: none;
border: 0px solid transparent;
border-radius: 0px 0px 0px 0px;
opacity: 0;
display: block;
font-family: melange;
color: rgba(0, 0, 0, 0);
font-size: var(--text-granola-16, 16px);
font-weight: 400;
line-height: 1.5;
letter-spacing: normal;
object-fit: cover;
}
.s24 {
gap: var(--space-granola-0, 0px);
padding-top: var(--space-granola-0, 0px);
padding-right: var(--space-granola-0, 0px);
padding-bottom: var(--space-granola-0, 0px);
padding-left: var(--space-granola-0, 0px);
position: relative;
height: auto;
flex-shrink: 0;
min-height: 1000px;
max-height: none;
background: rgb(255, 255, 255);
border: 0px solid transparent;
border-radius: 0px 0px 0px 0px;
display: block;
font-family: melange;
color: rgb(41, 41, 41);
font-size: var(--text-granola-16, 16px);
font-weight: 400;
line-height: 1.5;
letter-spacing: normal;
}
.main-content {
gap: var(--space-granola-0, 0px);
padding-top: var(--space-granola-0, 0px);
padding-right: var(--space-granola-0, 0px);
padding-bottom: var(--space-granola-0, 0px);
padding-left: var(--space-granola-0, 0px);
position: relative;
width: 100%;
min-width: 0px;
max-width: none;
background: transparent;
border: 0px solid transparent;
border-radius: 0px 0px 0px 0px;
display: block;
font-family: melange;
color: rgb(41, 41, 41);
font-size: var(--text-granola-16, 16px);
font-weight: 400;
line-height: 1.5;
letter-spacing: normal;
}
.s25 {
display: flex;
flex-direction: column;
gap: var(--space-granola-0, 0px);
justify-content: flex-start;
align-items: center;
padding-top: var(--space-granola-0, 0px);
padding-right: var(--space-granola-0, 0px);
padding-bottom: var(--space-granola-0, 0px);
padding-left: var(--space-granola-0, 0px);
width: 100%;
min-width: 0px;
max-width: none;
background: transparent;
border: 0px solid transparent;
border-radius: 0px 0px 0px 0px;
font-family: melange;
color: rgb(14, 15, 12);
font-size: var(--text-granola-16, 16px);
font-weight: 400;
line-height: 1.5;
letter-spacing: normal;
}
.s26 {
display: grid;
grid-template-columns: repeat(1, minmax(0, 1fr));
gap: var(--space-granola-0, 0px);
padding-top: var(--space-granola-0, 0px);
padding-right: var(--space-granola-0, 0px);
padding-bottom: var(--space-granola-0, 0px);
padding-left: var(--space-granola-0, 0px);
width: 100%;
min-width: 0px;
max-width: none;
height: auto;
flex-shrink: 0;
min-height: 200vh;
max-height: none;
background: transparent;
border: 0px solid transparent;
border-radius: 0px 0px 0px 0px;
font-family: melange;
color: rgb(14, 15, 12);
font-size: var(--text-granola-16, 16px);
font-weight: 400;
line-height: 1.5;
letter-spacing: normal;
}
.s27 {
gap: var(--space-granola-0, 0px);
padding-top: var(--space-granola-0, 0px);
padding-right: var(--space-granola-0, 0px);
padding-bottom: var(--space-granola-0, 0px);
padding-left: var(--space-granola-0, 0px);
position: relative;
background: transparent;
border: 0px solid transparent;
border-radius: 0px 0px 0px 0px;
display: block;
font-family: melange;
color: rgb(14, 15, 12);
font-size: var(--text-granola-16, 16px);
font-weight: 400;
line-height: 1.5;
letter-spacing: normal;
}
.section {
gap: var(--space-granola-0, 0px);
padding-top: var(--space-granola-0, 0px);
padding-right: var(--space-granola-0, 0px);
padding-bottom: var(--space-granola-0, 0px);
padding-left: var(--space-granola-0, 0px);
position: relative;
background: transparent;
border: 0px solid transparent;
border-radius: 0px 0px 0px 0px;
display: block;
font-family: melange;
color: rgb(14, 15, 12);
font-size: var(--text-granola-16, 16px);
font-weight: 400;
line-height: 1.5;
letter-spacing: normal;
}
.section-6 {
display: flex;
flex-direction: column;
gap: var(--space-granola-0, 0px);
justify-content: center;
align-items: flex-start;
padding-top: var(--space-granola-120, 120px);
padding-right: var(--space-granola-40, 40px);
padding-bottom: var(--space-granola-0, 0px);
padding-left: var(--space-granola-40, 40px);
width: 100%;
min-width: 0px;
max-width: 1280px;
height: auto;
min-height: 1000px;
max-height: none;
background: transparent;
border: 0px solid transparent;
border-radius: 0px 0px 0px 0px;
font-family: melange;
color: rgb(14, 15, 12);
font-size: var(--text-granola-16, 16px);
font-weight: 400;
line-height: 1.5;
letter-spacing: normal;
}
.s28 {
display: grid;
grid-template-columns: repeat(1, minmax(0, 1fr));
gap: var(--space-granola-32, 32px);
padding-top: var(--space-granola-0, 0px);
padding-right: var(--space-granola-0, 0px);
padding-bottom: var(--space-granola-0, 0px);
padding-left: var(--space-granola-0, 0px);
width: 100%;
min-width: 0px;
max-width: none;
background: transparent;
border: 0px solid transparent;
border-radius: 0px 0px 0px 0px;
font-family: melange;
color: rgb(14, 15, 12);
font-size: var(--text-granola-16, 16px);
font-weight: 400;
line-height: 1.5;
letter-spacing: normal;
}
.s29 {
display: flex;
flex-direction: column;
gap: var(--space-granola-32, 32px);
justify-content: flex-start;
align-items: flex-start;
padding-top: var(--space-granola-0, 0px);
padding-right: var(--space-granola-0, 0px);
padding-bottom: var(--space-granola-0, 0px);
padding-left: var(--space-granola-0, 0px);
background: transparent;
border: 0px solid transparent;
border-radius: 0px 0px 0px 0px;
font-family: melange;
color: rgb(14, 15, 12);
font-size: var(--text-granola-16, 16px);
font-weight: 400;
line-height: 1.5;
letter-spacing: normal;
}
.a-7 {
display: flex;
flex-direction: row;
gap: var(--space-granola-8, 8px);
justify-content: flex-start;
align-items: center;
padding-top: var(--space-granola-6, 6px);
padding-right: var(--space-granola-12, 12px);
padding-bottom: var(--space-granola-6, 6px);
padding-left: var(--space-granola-6, 6px);
background: rgb(247, 247, 242);
border: 0px solid transparent;
border-radius: 3.35544e+07px 3.35544e+07px 3.35544e+07px 3.35544e+07px;
font-family: melange;
color: rgb(14, 15, 12);
font-size: var(--text-granola-16, 16px);
font-weight: 400;
line-height: 1.5;
letter-spacing: normal;
text-decoration: none;
}
.new {
border: 0px solid transparent;
border-radius: 10px 10px 10px 10px;
display: inline;
font-family: melange;
color: rgb(41, 41, 41);
font-size: var(--text-granola-12, 12px);
font-weight: 500;
line-height: 16px;
letter-spacing: 0.24px;
}
.s30 {
border: 0px solid transparent;
border-radius: 0px 0px 0px 0px;
display: inline;
font-family: melange;
color: rgb(41, 41, 41);
font-size: var(--text-granola-13, 13px);
font-weight: 500;
line-height: 16px;
letter-spacing: 0.13px;
}
.bf2a21a95c5261c50fe1e0a7-svg {
gap: var(--space-granola-0, 0px);
padding-top: var(--space-granola-0, 0px);
padding-right: var(--space-granola-0, 0px);
padding-bottom: var(--space-granola-0, 0px);
padding-left: var(--space-granola-0, 0px);
position: relative;
width: 16px;
max-width: 100%;
flex-shrink: 0;
min-width: 0px;
height: 16px;
min-height: 0px;
max-height: none;
background: transparent;
border: 0px solid transparent;
border-radius: 0px 0px 0px 0px;
display: block;
font-family: melange;
color: rgb(114, 114, 110);
font-size: var(--text-granola-16, 16px);
font-weight: 400;
line-height: 1.5;
letter-spacing: normal;
object-fit: cover;
}
.s31 {
width: auto;
min-width: 0px;
max-width: 10ch;
border: 0px solid transparent;
border-radius: 0px 0px 0px 0px;
display: block;
font-family: quadrant;
color: rgb(41, 41, 41);
font-size: clamp(var(--text-granola-68, 68px),6vw,var(--text-granola-110, 110px));
font-weight: 400;
line-height: 0.93;
letter-spacing: -1.728px;
}
.s32 {
gap: var(--space-granola-0, 0px);
padding-top: var(--space-granola-0, 0px);
padding-right: var(--space-granola-0, 0px);
padding-bottom: var(--space-granola-0, 0px);
padding-left: var(--space-granola-0, 0px);
position: relative;
background: transparent;
border: 0px solid transparent;
border-radius: 0px 0px 0px 0px;
display: block;
font-family: melange;
color: rgb(14, 15, 12);
font-size: var(--text-granola-20, 20px);
font-weight: 400;
line-height: 1.4;
letter-spacing: normal;
}
.s33 {
border: 0px solid transparent;
border-radius: 0px 0px 0px 0px;
display: block;
font-family: melange;
color: rgb(14, 15, 12);
font-size: var(--text-granola-20, 20px);
font-weight: 400;
line-height: 1.4;
letter-spacing: normal;
}
.s34 {
display: flex;
flex-direction: column;
gap: var(--space-granola-24, 24px);
justify-content: flex-start;
align-items: flex-start;
padding-top: var(--space-granola-0, 0px);
padding-right: var(--space-granola-0, 0px);
padding-bottom: var(--space-granola-0, 0px);
padding-left: var(--space-granola-0, 0px);
background: transparent;
border: 0px solid transparent;
border-radius: 0px 0px 0px 0px;
font-family: melange;
color: rgb(14, 15, 12);
font-size: var(--text-granola-16, 16px);
font-weight: 400;
line-height: 1.5;
letter-spacing: normal;
}
.s35 {
display: flex;
flex-direction: column;
gap: var(--space-granola-12, 12px);
justify-content: flex-start;
align-items: flex-start;
padding-top: var(--space-granola-0, 0px);
padding-right: var(--space-granola-0, 0px);
padding-bottom: var(--space-granola-0, 0px);
padding-left: var(--space-granola-0, 0px);
background: transparent;
border: 0px solid transparent;
border-radius: 0px 0px 0px 0px;
font-family: melange;
color: rgb(14, 15, 12);
font-size: var(--text-granola-16, 16px);
font-weight: 400;
line-height: 1.5;
letter-spacing: normal;
}
.a-5 {
display: flex;
flex-direction: row;
gap: var(--space-granola-4, 4px);
justify-content: center;
align-items: center;
padding-top: var(--space-granola-9, 9px);
padding-right: var(--space-granola-24, 24px);
padding-bottom: var(--space-granola-9, 9px);
padding-left: var(--space-granola-24, 24px);
height: 56px;
flex-shrink: 0;
min-height: 0px;
max-height: none;
background: rgb(91, 111, 0);
border: 0px solid transparent;
border-radius: 3.35544e+07px 3.35544e+07px 3.35544e+07px 3.35544e+07px;
font-family: melange;
color: rgb(252, 252, 248);
font-size: var(--text-granola-16, 16px);
font-weight: 430;
line-height: 18px;
letter-spacing: 0.16px;
text-decoration: none;
}
.today {
border: 0px solid transparent;
border-radius: 0px 0px 0px 0px;
display: inline;
}
.d2d6eaa3baadf6225c0cf69d-svg {
gap: var(--space-granola-0, 0px);
padding-top: var(--space-granola-0, 0px);
padding-right: var(--space-granola-0, 0px);
padding-bottom: var(--space-granola-0, 0px);
padding-left: var(--space-granola-0, 0px);
position: relative;
width: 16px;
max-width: 100%;
flex-shrink: 0;
min-width: 0px;
height: 16px;
min-height: 0px;
max-height: none;
background: transparent;
border: 0px solid transparent;
border-radius: 0px 0px 0px 0px;
display: block;
font-family: melange;
color: rgb(252, 252, 248);
font-size: var(--text-granola-16, 16px);
font-weight: 430;
line-height: 18px;
letter-spacing: 0.16px;
object-fit: cover;
}
.p-3 {
display: flex;
flex-direction: row;
gap: var(--space-granola-8, 8px);
justify-content: flex-start;
align-items: center;
padding-top: var(--space-granola-0, 0px);
padding-right: var(--space-granola-0, 0px);
padding-bottom: var(--space-granola-0, 0px);
padding-left: var(--space-granola-0, 0px);
background: transparent;
border: 0px solid transparent;
border-radius: 0px 0px 0px 0px;
font-family: melange;
color: rgb(114, 114, 110);
font-size: var(--text-granola-13, 13px);
font-weight: 400;
line-height: 16px;
letter-spacing: 0.13px;
}
.c-72e74f0b7318c26c91d660cf-svg {
gap: var(--space-granola-0, 0px);
padding-top: var(--space-granola-0, 0px);
padding-right: var(--space-granola-0, 0px);
padding-bottom: var(--space-granola-0, 0px);
padding-left: var(--space-granola-0, 0px);
position: relative;
width: 24px;
max-width: 100%;
flex-shrink: 0;
min-width: 0px;
height: 24px;
min-height: 0px;
max-height: none;
background: transparent;
border: 0px solid transparent;
border-radius: 0px 0px 0px 0px;
display: block;
font-family: melange;
color: rgb(114, 114, 110);
font-size: var(--text-granola-13, 13px);
font-weight: 400;
line-height: 16px;
letter-spacing: 0.13px;
object-fit: cover;
}
.s36 {
border: 0px solid transparent;
border-radius: 0px 0px 0px 0px;
display: inline;
font-family: melange;
color: rgb(114, 114, 110);
font-size: var(--text-granola-13, 13px);
font-weight: 400;
line-height: 16px;
letter-spacing: 0.13px;
}
.s37 {
gap: var(--space-granola-0, 0px);
padding-top: var(--space-granola-0, 0px);
padding-right: var(--space-granola-0, 0px);
padding-bottom: var(--space-granola-0, 0px);
padding-left: var(--space-granola-0, 0px);
position: relative;
background: transparent;
border: 0px solid transparent;
border-radius: 0px 0px 0px 0px;
display: block;
font-family: melange;
color: rgb(14, 15, 12);
font-size: var(--text-granola-16, 16px);
font-weight: 400;
line-height: 1.5;
letter-spacing: normal;
}
.section-3 {
display: flex;
flex-direction: column;
gap: var(--space-granola-0, 0px);
justify-content: center;
align-items: center;
padding-top: var(--space-granola-0, 0px);
padding-right: var(--space-granola-0, 0px);
padding-bottom: var(--space-granola-0, 0px);
padding-left: var(--space-granola-0, 0px);
width: 100%;
min-width: 0px;
max-width: 1280px;
height: 1000px;
min-height: 0px;
max-height: none;
background: transparent;
border: 0px solid transparent;
border-radius: 0px 0px 0px 0px;
font-family: melange;
color: rgb(14, 15, 12);
font-size: var(--text-granola-16, 16px);
font-weight: 400;
line-height: 1.5;
letter-spacing: normal;
}
.s38 {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-granola-0, 0px);
padding-top: var(--space-granola-0, 0px);
padding-right: var(--space-granola-0, 0px);
padding-bottom: var(--space-granola-0, 0px);
padding-left: var(--space-granola-0, 0px);
width: 100%;
min-width: 0px;
max-width: none;
height: 100%;
flex-shrink: 0;
min-height: 0px;
max-height: none;
background: transparent;
border: 0px solid transparent;
border-radius: 0px 0px 0px 0px;
font-family: melange;
color: rgb(14, 15, 12);
font-size: var(--text-granola-16, 16px);
font-weight: 400;
line-height: 1.5;
letter-spacing: normal;
}
.s39 {
width: 100%;
max-width: 1px;
min-width: 0px;
border: 0px solid transparent;
border-radius: 0px 0px 0px 0px;
display: block;
font-family: melange;
color: rgb(14, 15, 12);
font-size: var(--text-granola-16, 16px);
font-weight: 400;
line-height: 1.5;
letter-spacing: normal;
}
.s40 {
width: 100%;
max-width: 1px;
min-width: 0px;
border: 0px solid transparent;
border-radius: 0px 0px 0px 0px;
display: block;
font-family: melange;
color: rgb(14, 15, 12);
font-size: var(--text-granola-16, 16px);
font-weight: 400;
line-height: 1.5;
letter-spacing: normal;
}
.s41 {
width: auto;
min-width: 0px;
max-width: 24ch;
border: 0px solid transparent;
border-radius: 0px 0px 0px 0px;
display: block;
font-family: quadrant;
color: rgb(14, 15, 12);
font-size: var(--text-granola-48, 48px);
font-weight: 400;
line-height: 1;
letter-spacing: normal;
}
.s42 {
gap: var(--space-granola-0, 0px);
padding-top: var(--space-granola-0, 0px);
padding-right: var(--space-granola-0, 0px);
padding-bottom: var(--space-granola-0, 0px);
padding-left: var(--space-granola-0, 0px);
position: relative;
background: transparent;
border: 0px solid transparent;
border-radius: 0px 0px 0px 0px;
display: block;
font-family: melange;
color: rgb(14, 15, 12);
font-size: var(--text-granola-16, 16px);
font-weight: 400;
line-height: 1.5;
letter-spacing: normal;
}
.s43 {
border: 0px solid transparent;
border-radius: 0px 0px 0px 0px;
display: block;
font-family: melange;
color: rgb(14, 15, 12);
font-size: var(--text-granola-16, 16px);
font-weight: 400;
line-height: 1.5;
letter-spacing: normal;
}
.s44 {
gap: var(--space-granola-0, 0px);
padding-top: var(--space-granola-0, 0px);
padding-right: var(--space-granola-0, 0px);
padding-bottom: var(--space-granola-0, 0px);
padding-left: var(--space-granola-40, 40px);
position: relative;
background: transparent;
border: 0px solid transparent;
border-radius: 0px 0px 0px 0px;
display: block;
font-family: melange;
color: rgb(41, 41, 41);
font-size: var(--text-granola-14, 14px);
font-weight: 400;
line-height: 1.35;
letter-spacing: 0.14px;
}
.p {
display: flex;
flex-direction: row;
gap: var(--space-granola-12, 12px);
justify-content: flex-start;
align-items: center;
padding-top: var(--space-granola-0, 0px);
padding-right: var(--space-granola-0, 0px);
padding-bottom: var(--space-granola-0, 0px);
padding-left: var(--space-granola-0, 0px);
height: auto;
min-height: 80px;
max-height: none;
background: transparent;
border: 0px solid transparent;
border-radius: 0px 0px 0px 0px;
font-family: melange;
color: rgb(41, 41, 41);
font-size: var(--text-granola-14, 14px);
font-weight: 400;
line-height: 1.35;
letter-spacing: 0.14px;
}
.b20a66aa84c6bd6ac8c540ae-svg {
gap: var(--space-granola-0, 0px);
padding-top: var(--space-granola-0, 0px);
padding-right: var(--space-granola-0, 0px);
padding-bottom: var(--space-granola-0, 0px);
padding-left: var(--space-granola-0, 0px);
position: relative;
width: 0px;
max-width: 100%;
flex-shrink: 0;
min-width: 0px;
height: 0px;
min-height: 0px;
max-height: none;
background: transparent;
border: 0px solid transparent;
border-radius: 0px 0px 0px 0px;
display: block;
font-family: melange;
color: rgb(41, 41, 41);
font-size: var(--text-granola-14, 14px);
font-weight: 400;
line-height: 1.35;
letter-spacing: 0.14px;
object-fit: cover;
}
.lock-svg {
width: 50px;
flex-shrink: 0;
min-width: 0px;
max-width: 100%;
height: 50px;
min-height: 0px;
max-height: none;
border: 0px solid transparent;
border-radius: 0px 0px 0px 0px;
aspect-ratio: auto 50 / 50;
display: block;
font-family: melange;
color: rgba(0, 0, 0, 0);
font-size: var(--text-granola-14, 14px);
font-weight: 400;
line-height: 1.35;
letter-spacing: 0.14px;
object-fit: contain;
}
.span-12 {
gap: var(--space-granola-0, 0px);
padding-top: var(--space-granola-0, 0px);
padding-right: var(--space-granola-0, 0px);
padding-bottom: var(--space-granola-0, 0px);
padding-left: var(--space-granola-0, 0px);
position: relative;
background: transparent;
border: 0px solid transparent;
border-radius: 0px 0px 0px 0px;
display: inline;
font-family: melange;
color: rgb(41, 41, 41);
font-size: var(--text-granola-14, 14px);
font-weight: 400;
line-height: 1.35;
letter-spacing: 0.14px;
}
.google-meet {
border: 0px solid transparent;
border-radius: 0px 0px 0px 0px;
display: inline;
font-family: melange;
color: rgb(41, 41, 41);
font-size: var(--text-granola-14, 14px);
font-weight: 600;
line-height: 1.35;
letter-spacing: 0.14px;
}
.s45 {
display: flex;
flex-direction: row;
gap: var(--space-granola-0, 0px);
justify-content: center;
align-items: center;
padding-top: var(--space-granola-0, 0px);
padding-right: var(--space-granola-0, 0px);
padding-bottom: var(--space-granola-0, 0px);
padding-left: var(--space-granola-0, 0px);
background: transparent;
border: 0px solid transparent;
border-radius: 0px 0px 0px 0px;
font-family: melange;
color: rgb(14, 15, 12);
font-size: var(--text-granola-16, 16px);
font-weight: 400;
line-height: 1.5;
letter-spacing: normal;
}
.s46 {
width: 100%;
flex-shrink: 0;
min-width: 0px;
max-width: 384px;
border: 0px solid transparent;
border-radius: 0px 0px 0px 0px;
aspect-ratio: 4 / 6;
display: block;
font-family: melange;
color: rgb(14, 15, 12);
font-size: var(--text-granola-16, 16px);
font-weight: 400;
line-height: 1.5;
letter-spacing: normal;
}
.section-4 {
display: flex;
flex-direction: column;
gap: var(--space-granola-0, 0px);
justify-content: center;
align-items: center;
padding-top: var(--space-granola-0, 0px);
padding-right: var(--space-granola-0, 0px);
padding-bottom: var(--space-granola-0, 0px);
padding-left: var(--space-granola-0, 0px);
width: 100%;
min-width: 0px;
max-width: none;
height: 1000px;
min-height: 0px;
max-height: none;
background: transparent;
border: 0px solid transparent;
border-radius: 0px 0px 0px 0px;
font-family: melange;
color: rgb(14, 15, 12);
font-size: var(--text-granola-16, 16px);
font-weight: 400;
line-height: 1.5;
letter-spacing: normal;
}
.s47 {
display: flex;
flex-direction: row;
gap: var(--space-granola-0, 0px);
justify-content: center;
align-items: center;
padding-top: var(--space-granola-40, 40px);
padding-right: var(--space-granola-0, 0px);
padding-bottom: var(--space-granola-0, 0px);
padding-left: var(--space-granola-0, 0px);
width: 100%;
min-width: 0px;
max-width: 1440px;
height: 100%;
flex-shrink: 0;
min-height: 0px;
max-height: none;
background: transparent;
border: 0px solid transparent;
border-radius: 0px 0px 0px 0px;
font-family: melange;
color: rgb(14, 15, 12);
font-size: var(--text-granola-16, 16px);
font-weight: 400;
line-height: 1.5;
letter-spacing: normal;
}
.s48 {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-granola-0, 0px);
padding-top: var(--space-granola-0, 0px);
padding-right: var(--space-granola-40, 40px);
padding-bottom: var(--space-granola-0, 0px);
padding-left: var(--space-granola-40, 40px);
width: 100%;
flex-shrink: 0;
min-width: 0px;
max-width: 1280px;
height: 100%;
min-height: 0px;
max-height: none;
background: transparent;
border: 0px solid transparent;
border-radius: 0px 0px 0px 0px;
font-family: melange;
color: rgb(14, 15, 12);
font-size: var(--text-granola-16, 16px);
font-weight: 400;
line-height: 1.5;
letter-spacing: normal;
}
.s49 {
border: 0px solid transparent;
border-radius: 0px 0px 0px 0px;
display: block;
font-family: melange;
color: rgb(14, 15, 12);
font-size: var(--text-granola-16, 16px);
font-weight: 400;
line-height: 1.5;
letter-spacing: normal;
}
.s50 {
display: flex;
flex-direction: column;
gap: var(--space-granola-0, 0px);
align-items: center;
padding-top: var(--space-granola-0, 0px);
padding-right: var(--space-granola-0, 0px);
padding-bottom: var(--space-granola-0, 0px);
padding-left: var(--space-granola-0, 0px);
width: 100%;
min-width: 0px;
max-width: none;
background: transparent;
border: 0px solid transparent;
border-radius: 0px 0px 0px 0px;
font-family: melange;
color: rgb(14, 15, 12);
font-size: var(--text-granola-16, 16px);
font-weight: 400;
line-height: 1.5;
letter-spacing: normal;
}
.s51 {
display: grid;
grid-template-columns: repeat(1, minmax(0, 1fr));
gap: var(--space-granola-0, 0px);
padding-top: var(--space-granola-0, 0px);
padding-right: var(--space-granola-0, 0px);
padding-bottom: var(--space-granola-0, 0px);
padding-left: var(--space-granola-0, 0px);
width: 30vw;
min-width: 0px;
max-width: 384px;
height: auto;
flex-shrink: 0;
min-height: 0px;
max-height: 750px;
background: transparent;
border: 0px solid transparent;
border-radius: 0px 0px 0px 0px;
aspect-ratio: 4 / 6;
font-family: melange;
color: rgb(14, 15, 12);
font-size: var(--text-granola-16, 16px);
font-weight: 400;
line-height: 1.5;
letter-spacing: normal;
}
.s52 {
gap: var(--space-granola-0, 0px);
padding-top: var(--space-granola-0, 0px);
padding-right: var(--space-granola-0, 0px);
padding-bottom: var(--space-granola-0, 0px);
padding-left: var(--space-granola-0, 0px);
position: relative;
background: transparent;
border: 0px solid transparent;
border-radius: 0px 0px 0px 0px;
display: block;
font-family: melange;
color: rgb(14, 15, 12);
font-size: var(--text-granola-16, 16px);
font-weight: 400;
line-height: 1.5;
letter-spacing: normal;
}
.s53 {
display: grid;
grid-template-columns: repeat(1, minmax(0, 1fr));
gap: var(--space-granola-0, 0px);
padding-top: var(--space-granola-0, 0px);
padding-right: var(--space-granola-0, 0px);
padding-bottom: var(--space-granola-0, 0px);
padding-left: var(--space-granola-0, 0px);
width: 100%;
min-width: 0px;
max-width: none;
background: transparent;
border: 0px solid transparent;
border-radius: 0px 0px 0px 0px;
font-family: melange;
color: rgb(14, 15, 12);
font-size: var(--text-granola-16, 16px);
font-weight: 400;
line-height: 1.5;
letter-spacing: normal;
}
.grey-jpg {
width: 100%;
min-width: 0px;
max-width: 100%;
height: 100%;
min-height: 0px;
max-height: none;
border: 0px solid transparent;
border-radius: 4px 4px 4px 4px;
aspect-ratio: auto 576 / 1024;
display: block;
font-family: melange;
color: rgba(0, 0, 0, 0);
font-size: var(--text-granola-16, 16px);
font-weight: 400;
line-height: 1.5;
letter-spacing: normal;
object-fit: cover;
}
.s54 {
display: grid;
grid-template-columns: repeat(1, minmax(0, 1fr));
gap: var(--space-granola-0, 0px);
padding-top: var(--space-granola-0, 0px);
padding-right: var(--space-granola-0, 0px);
padding-bottom: var(--space-granola-0, 0px);
padding-left: var(--space-granola-0, 0px);
width: 115%;
min-width: 0px;
max-width: none;
background: transparent;
border: 0px solid transparent;
border-radius: 0px 0px 0px 0px;
font-family: melange;
color: rgb(14, 15, 12);
font-size: var(--text-granola-16, 16px);
font-weight: 400;
line-height: 1.5;
letter-spacing: normal;
}
.explosion-jpg {
width: 100%;
min-width: 0px;
max-width: 100%;
height: 100%;
min-height: 0px;
max-height: none;
border: 0px solid transparent;
border-radius: 4px 4px 4px 4px;
aspect-ratio: auto 819 / 1024;
display: block;
font-family: melange;
color: rgba(0, 0, 0, 0);
font-size: var(--text-granola-16, 16px);
font-weight: 400;
line-height: 1.5;
letter-spacing: normal;
object-fit: cover;
}
.s55 {
display: grid;
grid-template-columns: repeat(1, minmax(0, 1fr));
gap: var(--space-granola-0, 0px);
padding-top: var(--space-granola-0, 0px);
padding-right: var(--space-granola-0, 0px);
padding-bottom: var(--space-granola-0, 0px);
padding-left: var(--space-granola-0, 0px);
width: 82%;
min-width: 0px;
max-width: none;
background: transparent;
border: 0px solid transparent;
border-radius: 0px 0px 0px 0px;
font-family: melange;
color: rgb(14, 15, 12);
font-size: var(--text-granola-16, 16px);
font-weight: 400;
line-height: 1.5;
letter-spacing: normal;
}
.green-poster-jpg {
width: 100%;
min-width: 0px;
max-width: 100%;
height: 100%;
min-height: 0px;
max-height: none;
border: 0px solid transparent;
border-radius: 4px 4px 4px 4px;
aspect-ratio: auto 563 / 1024;
display: block;
font-family: melange;
color: rgba(0, 0, 0, 0);
font-size: var(--text-granola-16, 16px);
font-weight: 400;
line-height: 1.5;
letter-spacing: normal;
object-fit: cover;
}
.s56 {
gap: var(--space-granola-0, 0px);
padding-top: var(--space-granola-0, 0px);
padding-right: var(--space-granola-0, 0px);
padding-bottom: var(--space-granola-0, 0px);
padding-left: var(--space-granola-0, 0px);
position: relative;
background: transparent;
border: 0px solid transparent;
border-radius: 0px 0px 0px 0px;
display: none;
font-family: melange;
color: rgb(14, 15, 12);
font-size: var(--text-granola-16, 16px);
font-weight: 400;
line-height: 1.5;
letter-spacing: normal;
}
.s57 {
display: grid;
grid-template-columns: repeat(1, minmax(0, 1fr));
gap: var(--space-granola-0, 0px);
padding-top: var(--space-granola-0, 0px);
padding-right: var(--space-granola-0, 0px);
padding-bottom: var(--space-granola-0, 0px);
padding-left: var(--space-granola-0, 0px);
width: 60%;
min-width: 0px;
max-width: none;
background: transparent;
border: 0px solid transparent;
border-radius: 0px 0px 0px 0px;
font-family: melange;
color: rgb(14, 15, 12);
font-size: var(--text-granola-16, 16px);
font-weight: 400;
line-height: 1.5;
letter-spacing: normal;
}
.s58 {
display: grid;
grid-template-columns: repeat(1, minmax(0, 1fr));
gap: var(--space-granola-0, 0px);
padding-top: var(--space-granola-0, 0px);
padding-right: var(--space-granola-0, 0px);
padding-bottom: var(--space-granola-0, 0px);
padding-left: var(--space-granola-0, 0px);
width: 80%;
min-width: 0px;
max-width: none;
background: transparent;
border: 0px solid transparent;
border-radius: 0px 0px 0px 0px;
font-family: melange;
color: rgb(14, 15, 12);
font-size: var(--text-granola-16, 16px);
font-weight: 400;
line-height: 1.5;
letter-spacing: normal;
}
.s59 {
display: grid;
grid-template-columns: repeat(1, minmax(0, 1fr));
gap: var(--space-granola-0, 0px);
padding-top: var(--space-granola-0, 0px);
padding-right: var(--space-granola-0, 0px);
padding-bottom: var(--space-granola-0, 0px);
padding-left: var(--space-granola-0, 0px);
width: 60%;
min-width: 0px;
max-width: none;
background: transparent;
border: 0px solid transparent;
border-radius: 0px 0px 0px 0px;
font-family: melange;
color: rgb(14, 15, 12);
font-size: var(--text-granola-16, 16px);
font-weight: 400;
line-height: 1.5;
letter-spacing: normal;
}
.s60 {
display: flex;
flex-direction: column;
gap: var(--space-granola-0, 0px);
justify-content: flex-start;
align-items: stretch;
padding-top: var(--space-granola-0, 0px);
padding-right: var(--space-granola-0, 0px);
padding-bottom: var(--space-granola-0, 0px);
padding-left: var(--space-granola-0, 0px);
width: 100%;
min-width: 0px;
max-width: none;
height: 100%;
min-height: 0px;
max-height: none;
background: rgb(247, 247, 242);
border: 1px solid rgba(71, 67, 42, 0.2);
border-radius: 12px 12px 12px 12px;
box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.1) 0px 8px 10px -6px;
font-family: melange;
color: rgb(14, 15, 12);
font-size: var(--text-granola-16, 16px);
font-weight: 400;
line-height: 1.5;
letter-spacing: normal;
}
.s61 {
display: flex;
flex-direction: row;
gap: var(--space-granola-6d5, 6.5px);
justify-content: flex-start;
align-items: center;
padding-top: var(--space-granola-0, 0px);
padding-right: var(--space-granola-0, 0px);
padding-bottom: var(--space-granola-0, 0px);
padding-left: var(--space-granola-15d5, 15.5px);
height: 44px;
flex-shrink: 0;
min-height: 0px;
max-height: none;
background: rgb(247, 247, 242);
border: 0px solid transparent;
border-radius: 0px 0px 0px 0px;
font-family: melange;
color: rgb(14, 15, 12);
font-size: var(--text-granola-16, 16px);
font-weight: 400;
line-height: 1.5;
letter-spacing: normal;
}
.span-40 {
width: 100%;
max-width: 10px;
min-width: 0px;
height: 10px;
min-height: 0px;
max-height: none;
border: 1px solid oklab(0 0 0 / 0.1);
border-radius: 3.35544e+07px 3.35544e+07px 3.35544e+07px 3.35544e+07px;
display: inline;
font-family: melange;
color: rgb(14, 15, 12);
font-size: var(--text-granola-16, 16px);
font-weight: 400;
line-height: 1.5;
letter-spacing: normal;
}
.span-39 {
width: 100%;
max-width: 10px;
min-width: 0px;
height: 10px;
min-height: 0px;
max-height: none;
border: 1px solid oklab(0 0 0 / 0.1);
border-radius: 3.35544e+07px 3.35544e+07px 3.35544e+07px 3.35544e+07px;
display: inline;
font-family: melange;
color: rgb(14, 15, 12);
font-size: var(--text-granola-16, 16px);
font-weight: 400;
line-height: 1.5;
letter-spacing: normal;
}
.span-38 {
width: 100%;
max-width: 10px;
min-width: 0px;
height: 10px;
min-height: 0px;
max-height: none;
border: 1px solid oklab(0 0 0 / 0.1);
border-radius: 3.35544e+07px 3.35544e+07px 3.35544e+07px 3.35544e+07px;
display: inline;
font-family: melange;
color: rgb(14, 15, 12);
font-size: var(--text-granola-16, 16px);
font-weight: 400;
line-height: 1.5;
letter-spacing: normal;
}
.s62 {
display: flex;
flex-direction: column;
gap: var(--space-granola-0, 0px);
justify-content: flex-start;
align-items: stretch;
padding-top: var(--space-granola-0, 0px);
padding-right: var(--space-granola-8, 8px);
padding-bottom: var(--space-granola-64, 64px);
padding-left: var(--space-granola-8, 8px);
background: transparent;
border: 0px solid transparent;
border-radius: 0px 0px 0px 0px;
font-family: melange;
color: rgb(14, 15, 12);
font-size: var(--text-granola-16, 16px);
font-weight: 400;
line-height: 1.5;
letter-spacing: normal;
}
.q3-gtm-sync {
border: 0px solid transparent;
border-radius: 0px 0px 0px 0px;
display: block;
font-family: quadrant;
color: rgb(41, 41, 41);
font-size: var(--text-granola-20, 20px);
font-weight: 400;
line-height: 1.4;
letter-spacing: normal;
}
.s63 {
display: flex;
flex-direction: row;
gap: var(--space-granola-8, 8px);
justify-content: flex-start;
align-items: flex-start;
flex-wrap: wrap;
padding-top: var(--space-granola-4, 4px);
padding-right: var(--space-granola-0, 0px);
padding-bottom: var(--space-granola-4, 4px);
padding-left: var(--space-granola-0, 0px);
background: transparent;
border: 0px solid transparent;
border-radius: 0px 0px 0px 0px;
font-family: melange;
color: rgb(14, 15, 12);
font-size: var(--text-granola-16, 16px);
font-weight: 400;
line-height: 1.5;
letter-spacing: normal;
}
.s64 {
display: flex;
flex-direction: row;
gap: var(--space-granola-8, 8px);
justify-content: flex-start;
align-items: center;
padding-top: var(--space-granola-0, 0px);
padding-right: var(--space-granola-8, 8px);
padding-bottom: var(--space-granola-0, 0px);
padding-left: var(--space-granola-8, 8px);
height: auto;
min-height: 24px;
max-height: none;
background: transparent;
border: 1px solid rgba(71, 67, 42, 0.2);
border-radius: 3.35544e+07px 3.35544e+07px 3.35544e+07px 3.35544e+07px;
font-family: melange;
color: rgb(114, 114, 110);
font-size: var(--text-granola-10, 10px);
font-weight: 430;
line-height: 1.5;
letter-spacing: normal;
}
.span-32 {
display: flex;
flex-direction: row;
gap: var(--space-granola-4, 4px);
justify-content: flex-start;
align-items: center;
padding-top: var(--space-granola-0, 0px);
padding-right: var(--space-granola-0, 0px);
padding-bottom: var(--space-granola-0, 0px);
padding-left: var(--space-granola-0, 0px);
background: transparent;
border: 0px solid transparent;
border-radius: 0px 0px 0px 0px;
font-family: melange;
color: rgb(114, 114, 110);
font-size: var(--text-granola-10, 10px);
font-weight: 430;
line-height: 1.5;
letter-spacing: normal;
}
.c-2 {
gap: var(--space-granola-0, 0px);
padding-top: var(--space-granola-0, 0px);
padding-right: var(--space-granola-0, 0px);
padding-bottom: var(--space-granola-0, 0px);
padding-left: var(--space-granola-0, 0px);
position: relative;
width: 14px;
max-width: 100%;
flex-shrink: 0;
min-width: 0px;
height: 14px;
min-height: 0px;
max-height: none;
background: transparent;
border: 0px solid transparent;
border-radius: 0px 0px 0px 0px;
display: block;
font-family: melange;
color: rgb(114, 114, 110);
font-size: var(--text-granola-10, 10px);
font-weight: 430;
line-height: 1.5;
letter-spacing: normal;
object-fit: cover;
}
.s65 {
display: flex;
flex-direction: row;
gap: var(--space-granola-0, 0px);
justify-content: center;
align-items: center;
padding-top: var(--space-granola-0, 0px);
padding-right: var(--space-granola-0, 0px);
padding-bottom: var(--space-granola-0, 0px);
padding-left: var(--space-granola-0, 0px);
width: 100%;
max-width: 24px;
min-width: 0px;
height: 24px;
min-height: 0px;
max-height: none;
background: transparent;
border: 1px solid rgba(71, 67, 42, 0.2);
border-radius: 3.35544e+07px 3.35544e+07px 3.35544e+07px 3.35544e+07px;
font-family: melange;
color: rgb(14, 15, 12);
font-size: var(--text-granola-16, 16px);
font-weight: 400;
line-height: 1.5;
letter-spacing: normal;
}
.c4176b871054049b4f6dc082-svg {
gap: var(--space-granola-0, 0px);
padding-top: var(--space-granola-0, 0px);
padding-right: var(--space-granola-0, 0px);
padding-bottom: var(--space-granola-0, 0px);
padding-left: var(--space-granola-0, 0px);
position: relative;
width: 14px;
max-width: 100%;
flex-shrink: 0;
min-width: 0px;
height: 14px;
min-height: 0px;
max-height: none;
background: transparent;
border: 0px solid transparent;
border-radius: 0px 0px 0px 0px;
display: block;
font-family: melange;
color: rgb(172, 173, 168);
font-size: var(--text-granola-16, 16px);
font-weight: 400;
line-height: 1.5;
letter-spacing: normal;
object-fit: cover;
}
.s66 {
gap: var(--space-granola-0, 0px);
padding-top: var(--space-granola-0, 0px);
padding-right: var(--space-granola-0, 0px);
padding-bottom: var(--space-granola-0, 0px);
padding-left: var(--space-granola-0, 0px);
position: relative;
height: auto;
flex-shrink: 0;
min-height: 0px;
max-height: none;
background: transparent;
border: 0px solid transparent;
border-radius: 0px 0px 0px 0px;
display: block;
font-family: melange;
color: rgb(14, 15, 12);
font-size: var(--text-granola-16, 16px);
font-weight: 400;
line-height: 1.5;
letter-spacing: normal;
}
.s67 {
display: grid;
grid-template-columns: repeat(1, minmax(0, 1fr));
gap: var(--space-granola-0, 0px);
padding-top: var(--space-granola-0, 0px);
padding-right: var(--space-granola-0, 0px);
padding-bottom: var(--space-granola-0, 0px);
padding-left: var(--space-granola-0, 0px);
height: auto;
min-height: 0px;
max-height: none;
background: transparent;
border: 0px solid transparent;
border-radius: 0px 0px 0px 0px;
font-family: melange;
color: rgb(14, 15, 12);
font-size: var(--text-granola-16, 16px);
font-weight: 400;
line-height: 1.5;
letter-spacing: normal;
}
.s68 {
gap: var(--space-granola-0, 0px);
padding-top: var(--space-granola-0, 0px);
padding-right: var(--space-granola-16, 16px);
padding-bottom: var(--space-granola-0, 0px);
padding-left: var(--space-granola-16, 16px);
position: relative;
height: auto;
min-height: 0px;
max-height: none;
background: transparent;
border: 0px solid transparent;
border-radius: 0px 0px 0px 0px;
display: block;
font-family: melange;
color: rgb(14, 15, 12);
font-size: var(--text-granola-16, 16px);
font-weight: 400;
line-height: 1.5;
letter-spacing: normal;
}
.s69 {
display: flex;
flex-direction: column;
gap: var(--space-granola-8, 8px);
justify-content: flex-start;
align-items: stretch;
padding-top: var(--space-granola-0, 0px);
padding-right: var(--space-granola-0, 0px);
padding-bottom: var(--space-granola-24, 24px);
padding-left: var(--space-granola-0, 0px);
background: transparent;
border: 0px solid transparent;
border-radius: 0px 0px 0px 0px;
font-family: melange;
color: rgb(41, 41, 41);
font-size: var(--text-granola-10, 10px);
font-weight: 400;
line-height: 1.625;
letter-spacing: normal;
}
.deal-stalls-sales-input {
height: auto;
flex-shrink: 0;
min-height: 11px;
max-height: none;
border: 0px solid transparent;
border-radius: 0px 0px 0px 0px;
display: block;
font-family: melange;
color: rgb(41, 41, 41);
font-size: var(--text-granola-10, 10px);
font-weight: 400;
line-height: 1.625;
letter-spacing: normal;
}
.p-4 {
gap: var(--space-granola-0, 0px);
padding-top: var(--space-granola-0, 0px);
padding-right: var(--space-granola-0, 0px);
padding-bottom: var(--space-granola-0, 0px);
padding-left: var(--space-granola-0, 0px);
position: relative;
height: auto;
flex-shrink: 0;
min-height: 11px;
max-height: none;
background: transparent;
border: 0px solid transparent;
border-radius: 0px 0px 0px 0px;
display: block;
font-family: melange;
color: rgb(41, 41, 41);
font-size: var(--text-granola-10, 10px);
font-weight: 400;
line-height: 1.625;
letter-spacing: normal;
}
.span-52 {
width: 1px;
min-width: 0px;
height: 10px;
min-height: 0px;
max-height: none;
border: 0px solid transparent;
border-radius: 0px 0px 0px 0px;
opacity: 0.643021;
display: inline;
font-family: melange;
color: rgb(41, 41, 41);
font-size: var(--text-granola-10, 10px);
font-weight: 400;
line-height: 1.625;
letter-spacing: normal;
}
.s70 {
gap: var(--space-granola-0, 0px);
padding-top: var(--space-granola-0, 0px);
padding-right: var(--space-granola-16, 16px);
padding-bottom: var(--space-granola-0, 0px);
padding-left: var(--space-granola-16, 16px);
position: relative;
height: auto;
min-height: 0px;
max-height: none;
background: transparent;
border: 0px solid transparent;
border-radius: 0px 0px 0px 0px;
display: block;
font-family: melange;
color: rgb(14, 15, 12);
font-size: var(--text-granola-16, 16px);
font-weight: 400;
line-height: 1.5;
letter-spacing: normal;
}
.s71 {
gap: var(--space-granola-0, 0px);
padding-top: var(--space-granola-0, 0px);
padding-right: var(--space-granola-0, 0px);
padding-bottom: var(--space-granola-24, 24px);
padding-left: var(--space-granola-0, 0px);
position: relative;
background: transparent;
border: 0px solid transparent;
border-radius: 0px 0px 0px 0px;
display: block;
font-family: melange;
color: rgb(14, 15, 12);
font-size: var(--text-granola-16, 16px);
font-weight: 400;
line-height: 1.5;
letter-spacing: normal;
}
.s72 {
display: flex;
flex-direction: column;
gap: var(--space-granola-0, 0px);
justify-content: flex-start;
align-items: stretch;
padding-top: var(--space-granola-0, 0px);
padding-right: var(--space-granola-0, 0px);
padding-bottom: var(--space-granola-0, 0px);
padding-left: var(--space-granola-0, 0px);
background: rgb(247, 247, 242);
border: 0px solid transparent;
border-radius: 0px 0px 0px 0px;
font-family: melange;
color: rgb(14, 15, 12);
font-size: var(--text-granola-10, 10px);
font-weight: 400;
line-height: 1.5;
letter-spacing: normal;
}
.s73 {
border: 0px solid transparent;
border-radius: 0px 0px 0px 0px;
display: block;
font-family: melange;
color: rgba(0, 0, 0, 0);
font-size: var(--text-granola-10, 10px);
font-weight: 600;
line-height: 1.5;
letter-spacing: normal;
}
.s74 {
border: 0px solid transparent;
border-radius: 0px 0px 0px 0px;
display: block;
font-family: melange;
color: rgba(0, 0, 0, 0);
font-size: var(--text-granola-10, 10px);
font-weight: 400;
line-height: 1.5;
letter-spacing: normal;
}
.s75 {
border: 0px solid transparent;
border-radius: 0px 0px 0px 0px;
display: block;
font-family: melange;
color: rgba(0, 0, 0, 0);
font-size: var(--text-granola-10, 10px);
font-weight: 400;
line-height: 1.5;
letter-spacing: normal;
}
.s76 {
border: 0px solid transparent;
border-radius: 0px 0px 0px 0px;
display: block;
font-family: melange;
color: rgba(0, 0, 0, 0);
font-size: var(--text-granola-10, 10px);
font-weight: 600;
line-height: 1.5;
letter-spacing: normal;
}
.s77 {
border: 0px solid transparent;
border-radius: 0px 0px 0px 0px;
display: block;
font-family: melange;
color: rgba(0, 0, 0, 0);
font-size: var(--text-granola-10, 10px);
font-weight: 400;
line-height: 1.5;
letter-spacing: normal;
}
.s78 {
border: 0px solid transparent;
border-radius: 0px 0px 0px 0px;
display: block;
font-family: melange;
color: rgba(0, 0, 0, 0);
font-size: var(--text-granola-10, 10px);
font-weight: 400;
line-height: 1.5;
letter-spacing: normal;
}
.s79 {
border: 0px solid transparent;
border-radius: 0px 0px 0px 0px;
display: block;
font-family: melange;
color: rgba(0, 0, 0, 0);
font-size: var(--text-granola-10, 10px);
font-weight: 400;
line-height: 1.5;
letter-spacing: normal;
}
.s80 {
border: 0px solid transparent;
border-radius: 0px 0px 0px 0px;
display: block;
font-family: melange;
color: rgba(0, 0, 0, 0);
font-size: var(--text-granola-10, 10px);
font-weight: 400;
line-height: 1.5;
letter-spacing: normal;
}
.s81 {
border: 0px solid transparent;
border-radius: 0px 0px 0px 0px;
display: block;
font-family: melange;
color: rgba(0, 0, 0, 0);
font-size: var(--text-granola-10, 10px);
font-weight: 600;
line-height: 1.5;
letter-spacing: normal;
}
.s82 {
border: 0px solid transparent;
border-radius: 0px 0px 0px 0px;
display: block;
font-family: melange;
color: rgba(0, 0, 0, 0);
font-size: var(--text-granola-10, 10px);
font-weight: 400;
line-height: 1.5;
letter-spacing: normal;
}
.s83 {
border: 0px solid transparent;
border-radius: 0px 0px 0px 0px;
display: block;
font-family: melange;
color: rgba(0, 0, 0, 0);
font-size: var(--text-granola-10, 10px);
font-weight: 400;
line-height: 1.5;
letter-spacing: normal;
}
.next-steps-4 {
border: 0px solid transparent;
border-radius: 0px 0px 0px 0px;
display: block;
font-family: melange;
color: rgba(0, 0, 0, 0);
font-size: var(--text-granola-10, 10px);
font-weight: 600;
line-height: 1.5;
letter-spacing: normal;
}
.s84 {
border: 0px solid transparent;
border-radius: 0px 0px 0px 0px;
display: block;
font-family: melange;
color: rgba(0, 0, 0, 0);
font-size: var(--text-granola-10, 10px);
font-weight: 400;
line-height: 1.5;
letter-spacing: normal;
}
.s85 {
border: 0px solid transparent;
border-radius: 0px 0px 0px 0px;
display: block;
font-family: melange;
color: rgba(0, 0, 0, 0);
font-size: var(--text-granola-10, 10px);
font-weight: 400;
line-height: 1.5;
letter-spacing: normal;
}
.s86 {
border: 0px solid transparent;
border-radius: 0px 0px 0px 0px;
display: block;
font-family: melange;
color: rgba(0, 0, 0, 0);
font-size: var(--text-granola-10, 10px);
font-weight: 400;
line-height: 1.5;
letter-spacing: normal;
}
.s87 {
gap: var(--space-granola-0, 0px);
padding-top: var(--space-granola-0, 0px);
padding-right: var(--space-granola-0, 0px);
padding-bottom: var(--space-granola-0, 0px);
padding-left: var(--space-granola-0, 0px);
position: relative;
background: transparent;
border: 0px solid transparent;
border-radius: 0px 0px 0px 0px;
display: block;
font-family: melange;
color: rgb(14, 15, 12);
font-size: var(--text-granola-16, 16px);
font-weight: 400;
line-height: 1.5;
letter-spacing: normal;
}
.s88 {
display: flex;
flex-direction: row;
gap: var(--space-granola-8, 8px);
justify-content: flex-start;
align-items: center;
padding-top: var(--space-granola-6, 6px);
padding-right: var(--space-granola-12, 12px);
padding-bottom: var(--space-granola-6, 6px);
padding-left: var(--space-granola-12, 12px);
width: 100%;
min-width: 0px;
max-width: none;
background: rgb(255, 255, 255);
border: 1px solid rgba(71, 67, 42, 0.2);
border-radius: 3.35544e+07px 3.35544e+07px 3.35544e+07px 3.35544e+07px;
opacity: 0.0934;
box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.1) 0px 2px 4px -2px;
font-family: melange;
color: rgb(14, 15, 12);
font-size: var(--text-granola-16, 16px);
font-weight: 400;
line-height: 1.5;
letter-spacing: normal;
}
.span-41 {
width: 100%;
max-width: 12px;
min-width: 0px;
height: 12px;
min-height: 0px;
max-height: none;
border-radius: 3.35544e+07px 3.35544e+07px 3.35544e+07px 3.35544e+07px;
display: inline;
font-family: melange;
color: rgb(14, 15, 12);
font-size: var(--text-granola-16, 16px);
font-weight: 400;
line-height: 1.5;
letter-spacing: normal;
}
.s89 {
border: 0px solid transparent;
border-radius: 0px 0px 0px 0px;
display: inline;
font-family: melange;
color: rgb(114, 114, 110);
font-size: var(--text-granola-10, 10px);
font-weight: 500;
line-height: 1.5;
letter-spacing: normal;
}
.s90 {
display: grid;
grid-template-columns: repeat(1, minmax(0, 1fr));
gap: var(--space-granola-0, 0px);
padding-top: var(--space-granola-0, 0px);
padding-right: var(--space-granola-0, 0px);
padding-bottom: var(--space-granola-0, 0px);
padding-left: var(--space-granola-0, 0px);
background: transparent;
border: 0px solid transparent;
border-radius: 0px 0px 0px 0px;
font-family: melange;
color: rgb(14, 15, 12);
font-size: var(--text-granola-16, 16px);
font-weight: 400;
line-height: 1.5;
letter-spacing: normal;
}
.s91 {
gap: var(--space-granola-0, 0px);
padding-top: var(--space-granola-0, 0px);
padding-right: var(--space-granola-0, 0px);
padding-bottom: var(--space-granola-0, 0px);
padding-left: var(--space-granola-0, 0px);
position: relative;
background: transparent;
border: 0px solid transparent;
border-radius: 0px 0px 0px 0px;
opacity: 0;
display: block;
font-family: melange;
color: rgb(14, 15, 12);
font-size: var(--text-granola-16, 16px);
font-weight: 400;
line-height: 1.5;
letter-spacing: normal;
}
.s92 {
display: flex;
flex-direction: row;
gap: var(--space-granola-12, 12px);
justify-content: flex-start;
align-items: center;
padding-top: var(--space-granola-0, 0px);
padding-right: var(--space-granola-16, 16px);
padding-bottom: var(--space-granola-0, 0px);
padding-left: var(--space-granola-16, 16px);
height: 40px;
min-height: 0px;
max-height: none;
background: rgb(255, 255, 255);
border: 1px solid rgba(71, 67, 42, 0.2);
border-radius: 3.35544e+07px 3.35544e+07px 3.35544e+07px 3.35544e+07px;
box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.1) 0px 2px 4px -2px;
font-family: melange;
color: rgb(14, 15, 12);
font-size: var(--text-granola-16, 16px);
font-weight: 400;
line-height: 1.5;
letter-spacing: normal;
}
.s93 {
display: flex;
flex-direction: row;
gap: var(--space-granola-4, 4px);
justify-content: flex-start;
align-items: center;
padding-top: var(--space-granola-0, 0px);
padding-right: var(--space-granola-0, 0px);
padding-bottom: var(--space-granola-0, 0px);
padding-left: var(--space-granola-0, 0px);
background: transparent;
border: 0px solid transparent;
border-radius: 0px 0px 0px 0px;
font-family: melange;
color: rgb(14, 15, 12);
font-size: var(--text-granola-16, 16px);
font-weight: 400;
line-height: 1.5;
letter-spacing: normal;
}
.span-8 {
gap: var(--space-granola-0, 0px);
padding-top: var(--space-granola-0, 0px);
padding-right: var(--space-granola-0, 0px);
padding-bottom: var(--space-granola-0, 0px);
padding-left: var(--space-granola-0, 0px);
position: relative;
width: 100%;
max-width: 4px;
min-width: 0px;
height: 20px;
min-height: 0px;
max-height: none;
background: transparent;
border: 0px solid transparent;
border-radius: 0px 0px 0px 0px;
display: inline;
font-family: melange;
color: rgb(14, 15, 12);
font-size: var(--text-granola-16, 16px);
font-weight: 400;
line-height: 1.5;
letter-spacing: normal;
}
.span {
display: flex;
flex-direction: row;
gap: var(--space-granola-0, 0px);
justify-content: center;
align-items: center;
padding-top: var(--space-granola-0, 0px);
padding-right: var(--space-granola-0, 0px);
padding-bottom: var(--space-granola-0, 0px);
padding-left: var(--space-granola-0, 0px);
background: transparent;
border: 0px solid transparent;
border-radius: 0px 0px 0px 0px;
font-family: melange;
color: rgb(14, 15, 12);
font-size: var(--text-granola-16, 16px);
font-weight: 400;
line-height: 1.5;
letter-spacing: normal;
}
.span-45 {
width: 100%;
max-width: 4px;
min-width: 0px;
height: 12px;
min-height: 0px;
max-height: none;
border: 0px solid transparent;
border-radius: 3.35544e+07px 3.35544e+07px 3.35544e+07px 3.35544e+07px;
display: inline;
font-family: melange;
color: rgb(14, 15, 12);
font-size: var(--text-granola-16, 16px);
font-weight: 400;
line-height: 1.5;
letter-spacing: normal;
}
.span-46 {
width: 100%;
max-width: 4px;
min-width: 0px;
height: 12px;
min-height: 0px;
max-height: none;
border: 0px solid transparent;
border-radius: 3.35544e+07px 3.35544e+07px 3.35544e+07px 3.35544e+07px;
display: inline;
font-family: melange;
color: rgb(14, 15, 12);
font-size: var(--text-granola-16, 16px);
font-weight: 400;
line-height: 1.5;
letter-spacing: normal;
}
.span-9 {
gap: var(--space-granola-0, 0px);
padding-top: var(--space-granola-0, 0px);
padding-right: var(--space-granola-0, 0px);
padding-bottom: var(--space-granola-0, 0px);
padding-left: var(--space-granola-0, 0px);
position: relative;
width: 100%;
max-width: 4px;
min-width: 0px;
height: 28px;
min-height: 0px;
max-height: none;
background: transparent;
border: 0px solid transparent;
border-radius: 0px 0px 0px 0px;
display: inline;
font-family: melange;
color: rgb(14, 15, 12);
font-size: var(--text-granola-16, 16px);
font-weight: 400;
line-height: 1.5;
letter-spacing: normal;
}
.span-49 {
width: 100%;
max-width: 4px;
min-width: 0px;
height: 18px;
min-height: 0px;
max-height: none;
border: 0px solid transparent;
border-radius: 3.35544e+07px 3.35544e+07px 3.35544e+07px 3.35544e+07px;
display: inline;
font-family: melange;
color: rgb(14, 15, 12);
font-size: var(--text-granola-16, 16px);
font-weight: 400;
line-height: 1.5;
letter-spacing: normal;
}
.span-50 {
width: 100%;
max-width: 4px;
min-width: 0px;
height: 18px;
min-height: 0px;
max-height: none;
border: 0px solid transparent;
border-radius: 3.35544e+07px 3.35544e+07px 3.35544e+07px 3.35544e+07px;
display: inline;
font-family: melange;
color: rgb(14, 15, 12);
font-size: var(--text-granola-16, 16px);
font-weight: 400;
line-height: 1.5;
letter-spacing: normal;
}
.span-7 {
gap: var(--space-granola-0, 0px);
padding-top: var(--space-granola-0, 0px);
padding-right: var(--space-granola-0, 0px);
padding-bottom: var(--space-granola-0, 0px);
padding-left: var(--space-granola-0, 0px);
position: relative;
width: 100%;
max-width: 4px;
min-width: 0px;
height: 18px;
min-height: 0px;
max-height: none;
background: transparent;
border: 0px solid transparent;
border-radius: 0px 0px 0px 0px;

HTML

CSS

153900 regels · 4634.7 kB

Van ontwerp naar je website.

Publiceer als statische HTML en CSS. Je pagina’s worden een zelfstandige website, klaar om te delen.

Ontdek de mogelijkheden ↗

Maak een hero met een kop, korte introduct…

Maak een hero met een kop, korte introductie en knop.

Ik stel een hero voor met een duidelijke kop, korte tekst en één primaire knop. Je kunt elk element daarna op het canvas aanpassen.

Scope

Sectie of element van een site nabouwen

Home

Voorbeeldsite…

Nog geen API-key

Wijzig

Agent

Stijl

Instellingen

Maak een collectie voor mijn artikelen met…

Maak een collectie voor mijn artikelen met titel, categorie en datum.

Ik stel de collectie Artikelen voor met die drie velden. Koppel de velden aan je ontwerp om de inhoud per artikel te tonen.

Scope

Sectie of element van een site nabouwen

Home

Voorbeeldsite…

Nog geen API-key

Wijzig

Agent

Stijl

Instellingen

Hoe maak ik van dit ontwerp een zelfstandi…

Hoe maak ik van dit ontwerp een zelfstandige website?

Via Publiceren exporteer je de site als statische HTML en CSS. Controleer de pagina’s en download daarna je websitebestanden.

Scope

Sectie of element van een site nabouwen

Home

Voorbeeldsite…

Nog geen API-key

Wijzig

Agent

Stijl

Instellingen

Voorbeeldgesprek

Ontwerp

Granola

Publiceren

Huidige pagina

Home

Body

div

Main content

div

Section

div

The AI notepad for back-to-back meetings

div

Section

div

Section

div

Section

Pagina’s

Lagen

Assets

Mobile

6 lokale aanpassingen · structuur geldt overal

Herstel

Link

Geen

Link naar

Plaatsing

Type

Afmetingen

|→

|≡

▣

Meegroeien

W ≥

W ≤

H ≥

H ≤

Min en max

Breedte

Auto

Hoogte

Stijlen

Dekking

Nee

Zichtbaar

Hoekradius

Toevoegen…

Vulling

Rand

Bewerken…

Agent

Stijl

Instellingen

Desktop

1440 px

Compact

768 px

Mobile

Vraag AI

Home

div

Main content

div

Section

div

The AI notepad for back-to-back meetings

25 %

Jouw werkwijze. Jouw Studio.

Begin met een template, een leeg canvas of AI. Elk onderdeel blijft van jou om verder te ontwerpen.

Ontdek de mogelijkheden ↗

HTML

CSS

153900 regels · 4634.7 kB

Ontwerp

Granola

Publiceren

Huidige pagina

Home

Body

div

Main content

div

Section

div

Section

div

Section

div

Section

div

Pagina’s

Lagen

Assets

Link

Er staat al een link in (a).

Link naar

Plaatsing

Kolomspan

Rijspan

Type

Afmetingen

Toevoegen…

Min Max

Verhouding

Auto

Breedte

Auto

Hoogte

Layout

Richting

Uitlijning

granola-32, 32px

Wrap

Gap

granola-0, 0px

Padding

Stijlen

Dekking

Agent

Stijl

Instellingen

Desktop

1440 px

New

Granola for Apple Watch

The AI notepad for back-to-back meetings

Download for free

Available for macOS, Windows, iOS, Android

Notes, actions and memory.

Without a meeting bot.

Effortless notes, enhanced instantly.

Uses your computer audio,

so doesn’t invite a bot

Private by default

, easy to share if you choose

Works with

Zoom

Google Meet

Teams

and every other meeting app.

Enterprise

Pricing

Blog

Careers

Features

Download

Vraag AI

Home

div

Main content

div

Section

div

50 %

Ontwerp

Granola

Publiceren

Huidige pagina

Home

Body

div

Main content

div

Section

div

The AI notepad for back-to-back meetings

div

Section

div

Section

div

Section

Pagina’s

Lagen

Assets

Link

Geen

Link naar

Plaatsing

Type

Afmetingen

|→

|≡

▣

Meegroeien

W ≥

W ≤

H ≥

H ≤

Min en max

Breedte

Auto

Hoogte

Stijlen

Dekking

Nee

Zichtbaar

Hoekradius

Toevoegen…

Vulling

Rand

Bewerken…

Dikte

Agent

Stijl

Instellingen

Desktop

1440 px

New

Granola for Apple Watch

The AI notepad for back-to-back meetings

Download for free

Available for macOS, Windows, iOS, Android

Notes, actions and memory.

Without a meeting bot.

Effortless notes, enhanced instantly.

Uses your computer audio,

so doesn’t invite a bot

Private by default

, easy to share if you choose

Works with

Zoom

Google Meet

Teams

and every other meeting app.

Enterprise

Pricing

Blog

Careers

Features

Download

Vraag AI

Home

div

Main content

div

Section

div

The AI notepad for back-to-back meetings

50 %

Ontwerpen

Ontwerp op een vrij canvas.
Geef elk detail je eigen stijl.

Er is hier geen canvas

CMS

Studio demo

Publiceren

Collections

Studio Journal

Collection

Een collection is een verzameling berichten met dezelfde velden. Een entry is één bericht.

Naam

titel

Veld voor URL-naam

(geen)

Detailpagina

Maak detailpagina

Velden

Tekst

Datum

Een detailpagina levert bij publiceren één statische pagina per entry. Gebruik

{{ veld }} in de paginatitel om die per entry te vullen.

Agent

Velden

Van idee naar je eerste website

gereed

studio-journal-0

15-09-2026

22-09-2026

Inspiratie

22-09-2026

Ontwerpen met auto-layout

gereed

studio-journal-1

15-09-2026

22-09-2026

Handleiding

22-09-2026

Je content op één plek

gereed

studio-journal-2

15-09-2026

22-09-2026

Inspiratie

22-09-2026

Een eigen stijl met variabelen

gereed

studio-journal-3

15-09-2026

22-09-2026

Handleiding

22-09-2026

Responsive op ieder scherm

gereed

studio-journal-4

15-09-2026

22-09-2026

Inspiratie

22-09-2026

Publiceer waar jij wilt

gereed

studio-journal-5

15-09-2026

22-09-2026

Handleiding

22-09-2026

Titel

Status

Slug

Aangemaakt

Bijgewerkt

Categorie

Datum

6 entries

Collections

Formulieren

CMS

Beheer je content centraal.
Breng collecties tot leven.

Publiceren

1 pagina · 12.6 kB

Publiceren

WordPress

SEO

Code

Analyse

Versies

Pagina

Pad

Niet indexeren

Zoekresultaat

Titel

Desktop pagebuilder met ingebouwd CMS en statische output.

Omschrijving

OG-beeld

SEO

Kies je titels en beschrijvingen.
Maak elke pagina vindbaar.

Componenten

Hero

Afbeeldingen

Iconen

Pagina’s

Lagen

Assets

Componenten

Maak onderdelen één keer.
Gebruik ze op al je pagina’s.

4 ×

1 ×

0 ×

6 ×

1 ×

0 ×

5 ×

Variabelen

Bewaar je kleuren centraal.
Pas je stijl overal tegelijk aan.

Publiceren

1 pagina · 12.6 kB

Publiceren

WordPress

SEO

Code

Analyse

Versies

1 Bestemming

2 Controle

3 Publiceren

Bestemming

ZIP-download

Doel

Stap 1 van 3: Bestemming

Geavanceerde instellingen

Controleer publicatie

Terug

Publiceren

Publiceer als HTML en CSS.
Kies zelf je eigen hosting.

Bestanden · 4 · 12.6 kB

styles.css

8.5 kB

index.html

3.9 kB

sitemap.xml

0.1 kB

robots.txt

0.0 kB

Eigen bestanden

Houd je bestanden bij de hand.
Gebruik ze in je hele project.

Publiceren

1 pagina · 12.6 kB

Publiceren

WordPress

SEO

Code

Analyse

Versies

Maak eerst een A/B-variant van een pagina. Daarna kun je hier de geaggregeerde resultaten vergelijken.

Analytics

Bekijk hoe je site wordt gebruikt.
Leer welke pagina’s werken.

Ontwerp

Granola

Publiceren

Huidige pagina

Home

Body

div

Main content

div

Section

div

The AI notepad for back-to-back meetings

div

Section

div

Section

div

Section

Pagina’s

Lagen

Assets

Mobile

6 lokale aanpassingen · structuur geldt overal

Herstel

Link

Geen

Link naar

Plaatsing

Type

Afmetingen

|→

|≡

▣

Meegroeien

W ≥

W ≤

H ≥

H ≤

Min en max

Breedte

Auto

Hoogte

Stijlen

Dekking

Nee

Zichtbaar

Hoekradius

Toevoegen…

Vulling

Rand

Bewerken…

Agent

Stijl

Instellingen

Desktop

1440 px

Compact

768 px

Mobile

Vraag AI

Home

div

Main content

div

Section

div

The AI notepad for back-to-back meetings

25 %

Breakpoints

Ontwerp voor elk scherm.
Verfijn desktop, tablet en mobiel.

Een eigen portfolio

Laat je werk spreken.

Ontdek Studio ↗

Een nieuwe landingpage

Geef je idee een thuis.

Ontdek Studio ↗

Er is hier geen canvas

CMS

Studio demo

Publiceren

Collections

Studio Journal

Collection

Een collection is een verzameling berichten met dezelfde velden. Een entry is één bericht.

Naam

titel

Veld voor URL-naam

(geen)

Detailpagina

Maak detailpagina

Velden

Tekst

Datum

Een detailpagina levert bij publiceren één statische pagina per entry. Gebruik

{{ veld }} in de paginatitel om die per entry te vullen.

Agent

Velden

Van idee naar je eerste website

gereed

studio-journal-0

15-09-2026

22-09-2026

Inspiratie

22-09-2026

Ontwerpen met auto-layout

gereed

studio-journal-1

15-09-2026

22-09-2026

Handleiding

22-09-2026

Je content op één plek

gereed

studio-journal-2

15-09-2026

22-09-2026

Inspiratie

22-09-2026

Een eigen stijl met variabelen

gereed

studio-journal-3

15-09-2026

22-09-2026

Handleiding

22-09-2026

Responsive op ieder scherm

gereed

studio-journal-4

15-09-2026

22-09-2026

Inspiratie

22-09-2026

Publiceer waar jij wilt

gereed

studio-journal-5

15-09-2026

22-09-2026

Handleiding

22-09-2026

Titel

Status

Slug

Aangemaakt

Bijgewerkt

Categorie

Datum

6 entries

Collections

Formulieren

Een blog met inhoud

Maak ruimte voor je verhaal.

Ontdek Studio ↗

Een site voor je studio

Ontwerp in je eigen stijl.

Ontdek Studio ↗

Een plek voor je product

Laat zien wat je maakt.

Ontdek Studio ↗

Je volgende campagne

Van eerste opzet naar live.

Ontdek Studio ↗

Een nieuwe collectie

Content die met je meegroeit.

Ontdek Studio ↗

Nieuw project

Wat wil je maken?

Website

Websites, CMS en vrij ontwerp.

Campagne

Een landingspagina met een duidelijke actie.

Projectnaam

Begin met

Square Online

Restaurantwebsite met online bestellen, afbeeldingen en veelgestelde vragen.

Granola

Productwebsite met interactieve notities, klantverhalen en integraties.

Heidi Coding

ReflexAI

Annuleren

Maak project

Een frisse start

Bouw vanuit een template.

Ontdek Studio ↗

Nieuw project

Wat wil je maken?

Website

Websites, CMS en vrij ontwerp.

Campagne

Een landingspagina met een duidelijke actie.

Projectnaam

Begin met

Square Online

Restaurantwebsite met online bestellen, afbeeldingen en veelgestelde vragen.

Granola

Productwebsite met interactieve notities, klantverhalen en integraties.

Heidi Coding

ReflexAI

Annuleren

Maak project

Nieuw project

Wat wil je maken?

Website

Websites, CMS en vrij ontwerp.

Campagne

Een landingspagina met een duidelijke actie.

Projectnaam

Begin met

Square Online

Restaurantwebsite met online bestellen, afbeeldingen en veelgestelde vragen.

Granola

Productwebsite met interactieve notities, klantverhalen en integraties.

Heidi Coding

ReflexAI

Annuleren

Maak project

Nieuw project

Wat wil je maken?

Website

Websites, CMS en vrij ontwerp.

Campagne

Een landingspagina met een duidelijke actie.

Projectnaam

Begin met

Square Online

Restaurantwebsite met online bestellen, afbeeldingen en veelgestelde vragen.

Granola

Productwebsite met interactieve notities, klantverhalen en integraties.

Heidi Coding

ReflexAI

Annuleren

Maak project

Jouw idee begint hier

Begin met Studio

Van eerste idee naar je eigen website.

Ontwerp op je canvas. Beheer je content. Publiceer je werk.

Begin met Studio ↗

Maak het met Studio

Nieuw gesprek

Nieuw: bouw een bronsectie na, herschrijf alle copy of maak een visual in je projectstijl.

Een hero met kop, tekst en knop

Pas de hele copy aan op mijn doelgroep en zorg dat de stijlen matchen

Maak een hero-visual in onze projectkleuren

Zelf een sectie toevoegen

Scope

Pagina: Home

Sectie of element van een site nabouwen

Home

Voorbeeldsite…

Vraag iets, of plak een Figma-link

Nog geen API-key

Wijzig

Agent

Stijl

Instellingen

Studio voor elk idee
van ontwerp tot website

Tools voor elke stap, van idee tot publicatie

Ontwerp direct op je canvas.

Geef je content de ruimte.

Van ontwerp naar je website.

Jouw werkwijze. Jouw Studio.

Alles voor
je website

Ontwerpen

CMS

SEO

Componenten

Variabelen

Publiceren

Eigen bestanden

Analytics

Breakpoints

Voor alles wat je wilt maken

Een eigen portfolio

Een nieuwe landingpage

Een blog met inhoud

Een site voor je studio

Een plek voor je product

Je volgende campagne

Een nieuwe collectie

Een frisse start

Gebouwd op ideeën waar je mee verder kunt

Jouw idee begint hier

Studio voor elk ideevan ontwerp tot website

Tools voor elke stap, van idee tot publicatie

Ontwerp direct op je canvas.

Geef je content de ruimte.

Van ontwerp naar je website.

Jouw werkwijze. Jouw Studio.

Alles voorje website

Ontwerpen

CMS

SEO

Componenten

Variabelen

Publiceren

Eigen bestanden

Analytics

Breakpoints

Voor alles wat je wilt maken

Een eigen portfolio

Een nieuwe landingpage

Een blog met inhoud

Een site voor je studio

Een plek voor je product

Je volgende campagne

Een nieuwe collectie

Een frisse start

Gebouwd op ideeën waar je mee verder kunt

Jouw idee begint hier

Studio voor elk idee
van ontwerp tot website

Alles voor
je website