:root {
--background: #ffffff;
--foreground: #111418;
--card: #ffffff;
--muted: #eef0f3;
--muted-foreground: #596170;
--border: #e2e5ea;
--ring: #26303d;
--destructive: #b42318;
--success: #2f6b3f;
--honey-soft: #fbefd9;
--honey-mid: #e9a23b;
--honey-strong: #7a4a0e;
--honey-on: #1a1206;
--sage-soft: #e4f3df;
--sage-mid: #96d67f;
--sage-strong: #35761e;
--sage-on: #15181c;
--peach-soft: #f9e4d9;
--peach-mid: #f1a780;
--peach-strong: #783b1c;
--peach-on: #15181c;
--mint-soft: #dcf6ee;
--mint-mid: #78e2c3;
--mint-strong: #1c785d;
--mint-on: #15181c;
--sky-soft: #dbe9f7;
--sky-mid: #8cbded;
--sky-strong: #1c4b78;
--sky-on: #15181c;
--lilac-soft: #e6dbf7;
--lilac-mid: #ba98ec;
--lilac-strong: #411c78;
--lilac-on: #15181c;
--ink-soft: #e9ebef;
--ink-mid: #26303d;
--ink-strong: #26303d;
--ink-on: #ffffff;
--night: #000000;
--night-foreground: #ffffff;
--night-muted: #a6abb2;
--night-field: rgba(255, 255, 255, 0.1);
--night-border: rgba(255, 255, 255, 0.12);
--night-error: #f2877d;
--honey-glow: rgba(233, 162, 59, 0.22);
--radius-lg: 14px;
--radius-2xl: 25.2px;
--radius-3xl: 30.8px;
--radius-full: 9999px;
--device-rim-a: #4a5360;
--device-rim-b: #1f252d;
--device-rim-c: #6b7684;
--device-bezel: #050506;
--device-island: #000000;
--device-shine: rgba(255, 255, 255, 0.35);
--device-shadow: rgba(17, 20, 24, 0.28);
}
@media (prefers-color-scheme: dark) {
:root {
--background: #121417;
--foreground: #eceef1;
--card: #1a1d21;
--muted: #23272c;
--muted-foreground: #a6abb2;
--border: #2c3137;
--ring: #e9ebef;
--destructive: #f2877d;
--success: #8fc79c;
--honey-soft: #3b2f1c;
--honey-mid: #e9a23b;
--honey-strong: #f2cf93;
--honey-on: #1a1206;
--sage-soft: #2f3c31;
--sage-mid: #96d67f;
--sage-strong: #bfe8b0;
--sage-on: #15181c;
--peach-soft: #3f3431;
--peach-mid: #f1a780;
--peach-strong: #e8c3b0;
--peach-on: #15181c;
--mint-soft: #2a3e3d;
--mint-mid: #78e2c3;
--mint-strong: #b0e8d8;
--mint-on: #15181c;
--sky-soft: #2d3844;
--sky-mid: #8cbded;
--sky-strong: #b0cce8;
--sky-on: #15181c;
--lilac-soft: #353244;
--lilac-mid: #ba98ec;
--lilac-strong: #c7b0e8;
--lilac-on: #15181c;
--ink-soft: #262a31;
--ink-mid: #e9ebef;
--ink-strong: #e9ebef;
--ink-on: #15181c;
}
}
@font-face {
font-family: Figtree;
src: url("/fonts/figtree-var.woff2") format("woff2");
font-weight: 300 900;
font-display: swap;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
scroll-padding-top: 88px;
}
body {
margin: 0;
background: var(--background);
color: var(--foreground);
font-family: Figtree, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
font-size: 17px;
line-height: 1.55;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
}
:root {
--glow-a: color-mix(in srgb, var(--honey-soft) 90%, transparent);
--glow-b: color-mix(in srgb, var(--honey-soft) 55%, transparent);
--grain-opacity: 0.02;
}
@media (prefers-color-scheme: dark) {
:root {
--glow-a: color-mix(in srgb, var(--honey-mid) 11%, transparent);
--glow-b: color-mix(in srgb, var(--honey-mid) 6%, transparent);
--grain-opacity: 0.03;
}
}
body::before,
body::after {
content: "";
position: fixed;
inset: 0;
z-index: -1;
pointer-events: none;
}
body::before {
background:
radial-gradient(ellipse 70vmax 60vmax at 85% 18%, var(--glow-a), transparent 70%),
radial-gradient(ellipse 60vmax 50vmax at 8% 95%, var(--glow-b), transparent 70%);
}
body::after {
opacity: var(--grain-opacity);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.6 -0.4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
background-size: 220px 220px;
}
@media (prefers-color-scheme: light) {
body::after {
filter: invert(1);
}
}
img,
picture,
svg {
display: block;
max-width: 100%;
}
img {
height: auto;
}
a {
color: inherit;
}
h1,
h2,
h3 {
margin: 0;
letter-spacing: -0.025em;
line-height: 1.15;
text-wrap: balance;
}
p {
margin: 0;
text-wrap: pretty;
}
.visually-hidden,
.trap {
position: absolute !important;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
.skip {
position: absolute;
left: 16px;
top: -64px;
z-index: 100;
padding: 8px 16px;
border-radius: var(--radius-full);
background: var(--foreground);
color: var(--background);
}
.skip:focus {
top: 12px;
}
:focus-visible {
outline: 3px solid var(--ring);
outline-offset: 3px;
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 48px;
padding: 12px 24px;
border: 0;
border-radius: var(--radius-full);
font: inherit;
font-weight: 700;
font-size: 16px;
line-height: 1.2;
text-decoration: none;
cursor: pointer;
white-space: nowrap;
transition: transform 0.15s ease, filter 0.15s ease;
}
.btn:active {
transform: scale(0.97);
}
.btn-honey {
background: var(--honey-mid);
color: var(--honey-on);
}
.btn-honey:hover {
filter: brightness(1.05);
}
.btn-ghost {
background: transparent;
color: inherit;
box-shadow: inset 0 0 0 2px currentColor;
}
.btn-small {
min-height: 40px;
padding: 8px 18px;
font-size: 15px;
}
.nav {
position: sticky;
top: 0;
z-index: 50;
transition: background-color 0.25s ease, box-shadow 0.25s ease;
}
.nav[data-scrolled] {
background: color-mix(in srgb, var(--background) 86%, transparent);
box-shadow: 0 1px 0 var(--border);
backdrop-filter: saturate(1.4) blur(16px);
-webkit-backdrop-filter: saturate(1.4) blur(16px);
}
.nav-inner {
display: flex;
align-items: center;
gap: 16px;
max-width: 1160px;
margin: 0 auto;
padding: 12px 16px;
}
.brand {
display: inline-flex;
align-items: center;
gap: 10px;
font-weight: 800;
font-size: 20px;
letter-spacing: -0.02em;
text-decoration: none;
margin-right: auto;
}
.brand img {
width: 32px;
height: 32px;
border-radius: 8px;
}
.nav-links {
display: none;
gap: 4px;
}
.nav-links a,
.lang-switch a {
padding: 8px 12px;
border-radius: var(--radius-full);
color: var(--muted-foreground);
text-decoration: none;
font-weight: 600;
font-size: 15px;
}
.nav-links a:hover,
.lang-switch a:hover {
color: var(--foreground);
background: var(--muted);
}
.lang-switch {
display: flex;
gap: 2px;
}
.lang-switch a {
padding: 8px 8px;
}
.lang-switch a[aria-current] {
color: var(--foreground);
}
.nav-cta .short {
display: none;
}
@media (max-width: 719px) {
.nav-cta .long {
display: none;
}
.nav-cta .short {
display: inline;
}
.nav-cta {
padding: 8px 14px;
}
.brand span {
font-size: 18px;
}
.nav-inner {
gap: 8px;
}
}
@media (min-width: 960px) {
.nav-links {
display: flex;
}
}
.hero {
display: grid;
gap: 40px;
max-width: 1160px;
margin: 0 auto;
padding: 24px 16px 64px;
}
.hero h1 {
font-size: clamp(38px, 9vw, 64px);
font-weight: 800;
letter-spacing: -0.035em;
line-height: 1.04;
}
.lead {
margin-top: 20px;
font-size: clamp(18px, 2.2vw, 21px);
color: var(--muted-foreground);
max-width: 34em;
}
.facts {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 20px 0 0;
padding: 0;
list-style: none;
color: var(--muted-foreground);
font-size: 15px;
font-weight: 600;
}
.facts li {
padding: 6px 14px;
border-radius: var(--radius-full);
background: var(--honey-soft);
color: var(--honey-strong);
}
.hero-visual {
position: relative;
display: grid;
justify-items: center;
padding-top: 128px;
}
.hero-bee {
position: absolute;
top: 26px;
left: 50%;
z-index: 2;
width: 160px;
margin-left: 24px;
}
.bee {
width: 160px;
height: 160px;
animation: float 3.4s ease-in-out infinite;
}
@keyframes float {
50% {
transform: translateY(-8px);
}
}
@media (min-width: 960px) {
.hero {
grid-template-columns: 1.1fr 0.9fr;
align-items: center;
gap: 48px;
padding-top: 32px;
padding-bottom: 96px;
}
.hero-text {
align-self: start;
padding-top: 48px;
}
}
.waitlist {
margin-top: 28px;
max-width: 520px;
}
.waitlist-row {
display: flex;
flex-wrap: wrap;
gap: 8px;
padding: 6px;
border-radius: var(--radius-full);
background: var(--muted);
}
.waitlist input[type="email"] {
flex: 1 1 200px;
min-width: 0;
min-height: 48px;
padding: 0 18px;
border: 0;
border-radius: var(--radius-full);
background: transparent;
color: inherit;
font: inherit;
font-size: 17px;
}
.waitlist input[type="email"]::placeholder {
color: var(--muted-foreground);
}
.waitlist input[type="email"]:focus-visible {
outline-offset: 0;
}
.waitlist .btn {
flex: 1 0 auto;
}
.waitlist-note {
margin-top: 12px;
font-size: 14px;
color: var(--muted-foreground);
}
.waitlist-status {
margin-top: 8px;
font-weight: 600;
font-size: 15px;
min-height: 1.5em;
}
.waitlist-status[data-state="ok"] {
color: var(--success);
}
.waitlist-status[data-state="error"] {
color: var(--destructive);
}
.waitlist[data-done] .waitlist-row {
display: none;
}
@media (max-width: 440px) {
.waitlist-row {
border-radius: var(--radius-2xl);
}
}
.section {
max-width: 1160px;
margin: 0 auto;
padding: 72px 16px;
}
.section-head {
max-width: 640px;
margin-bottom: 36px;
}
.section h2,
.stage h2 {
font-size: clamp(30px, 5vw, 44px);
font-weight: 800;
}
.section-head p {
margin-top: 14px;
font-size: 19px;
color: var(--muted-foreground);
}
.tone-honey { --tone-soft: var(--honey-soft); --tone-strong: var(--honey-strong); --tone-mid: var(--honey-mid); }
.tone-sage { --tone-soft: var(--sage-soft); --tone-strong: var(--sage-strong); --tone-mid: var(--sage-mid); }
.tone-peach { --tone-soft: var(--peach-soft); --tone-strong: var(--peach-strong); --tone-mid: var(--peach-mid); }
.tone-mint { --tone-soft: var(--mint-soft); --tone-strong: var(--mint-strong); --tone-mid: var(--mint-mid); }
.tone-sky { --tone-soft: var(--sky-soft); --tone-strong: var(--sky-strong); --tone-mid: var(--sky-mid); }
.tone-lilac { --tone-soft: var(--lilac-soft); --tone-strong: var(--lilac-strong); --tone-mid: var(--lilac-mid); }
.tone-ink { --tone-soft: var(--ink-soft); --tone-strong: var(--ink-strong); --tone-mid: var(--ink-mid); }
.step-list {
display: grid;
gap: 16px;
margin: 0;
padding: 0;
list-style: none;
}
@media (min-width: 860px) {
.step-list {
grid-template-columns: repeat(3, 1fr);
}
}
.step h3,
.privacy-list h3 {
font-size: 21px;
font-weight: 800;
}
.step p,
.privacy-list p {
margin-top: 10px;
color: var(--muted-foreground);
}
.honest {
margin-top: 24px;
font-size: 15px;
color: var(--muted-foreground);
}
.kids-inner {
display: grid;
gap: 32px;
align-items: center;
padding: 40px 24px;
border-radius: var(--radius-3xl);
background: var(--peach-soft);
}
.kids .lead {
color: var(--peach-strong);
font-weight: 600;
}
.kids-bee {
justify-self: center;
width: min(280px, 64vw);
}
@media (min-width: 860px) {
.kids-inner {
grid-template-columns: 1.3fr 0.7fr;
padding: 56px;
}
}
.check-list {
display: grid;
gap: 12px;
margin: 24px 0 0;
padding: 0;
list-style: none;
}
.check-list li {
position: relative;
padding-left: 34px;
}
.check-list li::before {
content: "";
position: absolute;
left: 0;
top: 3px;
width: 22px;
height: 22px;
border-radius: var(--radius-full);
background: var(--honey-mid);
}
.check-list li::after {
content: "";
position: absolute;
left: 8px;
top: 8px;
width: 6px;
height: 10px;
border: solid var(--honey-on);
border-width: 0 2.5px 2.5px 0;
transform: rotate(45deg);
}
.privacy-list {
display: grid;
gap: 16px;
margin: 0;
padding: 0;
list-style: none;
}
@media (min-width: 860px) {
.privacy-list {
grid-template-columns: repeat(3, 1fr);
}
}
.privacy-list li {
padding: 28px;
border-radius: var(--radius-3xl);
background: var(--ink-soft);
}
.price-grid {
display: grid;
gap: 16px;
}
@media (min-width: 860px) {
.price-grid {
grid-template-columns: 1.1fr 0.9fr;
}
}
.price-card,
.timeline {
padding: 32px;
border-radius: var(--radius-3xl);
}
.price-card {
background: var(--honey-soft);
}
.price-plan {
font-weight: 700;
color: var(--honey-strong);
}
.price-amount {
margin-top: 8px;
font-size: clamp(30px, 5vw, 40px);
font-weight: 800;
letter-spacing: -0.03em;
line-height: 1.1;
}
.price-badge {
display: inline-block;
margin-top: 12px;
padding: 4px 12px;
border-radius: var(--radius-full);
background: var(--honey-mid);
color: var(--honey-on);
font-weight: 700;
font-size: 14px;
}
.price-monthly {
margin-top: 12px;
color: var(--honey-strong);
}
.price-note {
margin-top: 20px;
font-size: 14px;
color: var(--honey-strong);
}
.timeline {
border: 1px solid var(--border);
}
.timeline h3 {
font-size: 21px;
font-weight: 800;
}
.timeline ol {
position: relative;
display: grid;
gap: 22px;
margin: 24px 0 0;
padding: 0 0 0 28px;
list-style: none;
}
.timeline ol::before {
content: "";
position: absolute;
left: 7px;
top: 8px;
bottom: 8px;
width: 2px;
background: var(--border);
}
.timeline li {
position: relative;
display: grid;
gap: 2px;
}
.timeline li::before {
content: "";
position: absolute;
z-index: 1;
left: -28px;
top: 5px;
width: 16px;
height: 16px;
border-radius: var(--radius-full);
background: var(--background);
box-shadow: inset 0 0 0 3px var(--honey-mid);
}
.timeline li:first-child::before {
background: var(--honey-mid);
}
.when {
font-weight: 800;
}
.faq-list {
max-width: 760px;
border-top: 1px solid var(--border);
}
.faq details {
border-bottom: 1px solid var(--border);
}
.faq summary {
position: relative;
padding: 20px 44px 20px 0;
font-weight: 700;
font-size: 18px;
cursor: pointer;
list-style: none;
}
.faq summary::-webkit-details-marker {
display: none;
}
.faq summary::after {
content: "+";
position: absolute;
right: 4px;
top: 50%;
transform: translateY(-50%);
font-size: 26px;
font-weight: 400;
color: var(--muted-foreground);
transition: transform 0.2s ease;
}
.faq details[open] summary::after {
transform: translateY(-50%) rotate(45deg);
}
.faq details p {
padding: 0 0 22px;
color: var(--muted-foreground);
max-width: 44em;
}
.stage {
position: relative;
overflow: hidden;
margin-top: 40px;
padding: 88px 16px 96px;
background: var(--night);
color: var(--night-foreground);
text-align: center;
}
.stage::before {
content: "";
position: absolute;
left: 50%;
top: 40px;
width: 520px;
height: 520px;
transform: translateX(-50%);
background: radial-gradient(circle, var(--honey-glow), transparent 68%);
pointer-events: none;
}
.stage-inner {
position: relative;
display: grid;
justify-items: center;
max-width: 620px;
margin: 0 auto;
}
.stage-icon img {
width: 160px;
height: 160px;
border-radius: 36px;
box-shadow: 0 0 0 1px var(--night-border);
}
.stage h2 {
margin-top: 32px;
}
.stage p {
margin-top: 14px;
color: var(--night-muted);
font-size: 19px;
}
.stage .waitlist {
width: 100%;
text-align: left;
}
.stage .waitlist-row {
background: var(--night-field);
}
.stage .waitlist input[type="email"]::placeholder,
.stage .waitlist-note {
color: var(--night-muted);
}
.stage .waitlist-note,
.stage .waitlist-status {
text-align: center;
}
.stage .waitlist-status[data-state="ok"] {
color: var(--night-foreground);
}
.stage .waitlist-status[data-state="error"] {
color: var(--night-error);
}
.stage :focus-visible {
outline-color: var(--honey-mid);
}
.store {
display: grid;
gap: 20px;
justify-items: center;
margin-top: 28px;
}
.hero .store {
justify-items: start;
}
.store-buttons {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
}
.store-badge {
display: block;
border-radius: 10px;
transition: transform 0.2s ease;
}
.store-badge img {
display: block;
width: auto;
height: 48px;
}
.store-badge:hover {
transform: translateY(-2px);
}
.store-qr-btn {
display: none;
place-items: center;
width: 48px;
height: 48px;
padding: 0;
border: 1px solid #a6a6a6;
border-radius: 10px;
background: #000;
color: #fff;
cursor: pointer;
transition: transform 0.2s ease;
}
.store-qr-btn svg {
width: 24px;
height: 24px;
}
.store-qr-btn:hover {
transform: translateY(-2px);
}
@media (min-width: 960px) and (hover: hover) {
.store-qr-btn {
display: grid;
}
}
.qr-dialog {
width: min(360px, calc(100vw - 32px));
padding: 36px 28px 28px;
border: 1px solid var(--border);
border-radius: var(--radius-3xl);
background: var(--card);
color: var(--foreground);
text-align: center;
box-shadow: 0 30px 60px -20px rgba(17, 20, 24, 0.45);
}
.qr-dialog::backdrop {
background: rgba(17, 20, 24, 0.45);
backdrop-filter: blur(6px);
}
.qr-dialog[open] {
display: grid;
justify-items: center;
}
.qr-icon {
width: 64px;
height: 64px;
border-radius: 15px;
}
.qr-dialog h2 {
margin-top: 16px;
font-size: 24px;
line-height: 1.2;
}
.qr-dialog p {
margin-top: 8px;
color: var(--muted-foreground);
font-size: 16px;
}
.qr {
width: 200px;
margin-top: 22px;
padding: 14px;
border-radius: var(--radius-2xl);
background: #fff;
color: #000;
box-shadow: 0 0 0 1px var(--border);
}
.qr svg {
display: block;
width: 100%;
height: auto;
}
.qr-close {
position: absolute;
top: 12px;
right: 12px;
display: grid;
place-items: center;
width: 36px;
height: 36px;
padding: 0;
border: 0;
border-radius: var(--radius-full);
background: var(--muted);
color: var(--foreground);
font: inherit;
font-size: 22px;
line-height: 1;
cursor: pointer;
}
@media (prefers-reduced-motion: no-preference) {
.qr-dialog[open] {
animation: qr-in 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes qr-in {
from {
opacity: 0;
transform: translateY(12px) scale(0.97);
}
}
}
@media (prefers-reduced-motion: reduce) {
.store-badge,
.store-qr-btn {
transition: none;
}
}
html[data-platform="ios"] [data-platform="android"],
html[data-platform="android"] [data-platform="ios"] {
display: none;
}
.footer {
border-top: 1px solid var(--border);
}
.footer-inner {
display: grid;
gap: 16px;
max-width: 1160px;
margin: 0 auto;
padding: 32px 16px 48px;
font-size: 15px;
color: var(--muted-foreground);
}
.footer-links {
display: flex;
flex-wrap: wrap;
gap: 4px 20px;
}
.footer-links a {
text-decoration: none;
padding: 6px 0;
}
.footer-links a:hover {
color: var(--foreground);
text-decoration: underline;
}
.lang-switch-footer {
margin-left: -8px;
}
@media (min-width: 860px) {
.footer-inner {
grid-template-columns: auto 1fr auto;
align-items: center;
}
.footer-links {
justify-content: center;
}
}
.simple {
max-width: 640px;
margin: 0 auto;
padding: 48px 16px 96px;
}
.simple h1 {
font-size: clamp(32px, 6vw, 44px);
font-weight: 800;
margin-bottom: 20px;
}
.simple p {
margin-top: 8px;
font-size: 18px;
}
.simple .btn {
margin-top: 24px;
}
.simple-bee {
width: 140px;
height: 140px;
margin-bottom: 16px;
}
@media (prefers-reduced-motion: no-preference) {
html[data-js] [data-reveal] {
opacity: 0;
transform: translateY(16px);
transition: opacity 0.6s ease, transform 0.6s ease;
transition-delay: calc(var(--i, 0) * 110ms);
}
html[data-js] [data-reveal][data-visible] {
opacity: 1;
transform: none;
}
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
.bee {
animation: none;
}
.btn,
.nav,
.faq summary::after {
transition: none;
}
}
.iphone {
--w: 320px;
position: relative;
width: var(--w);
aspect-ratio: 1470 / 3000;
filter: drop-shadow(0 30px 40px var(--device-shadow));
}
.iphone-screen {
position: absolute;
left: 5.102%;
top: 2.2%;
width: 89.796%;
height: 95.6%;
overflow: hidden;
border-radius: 12%/5.6%;
background: var(--background);
}
.iphone-screen picture,
.iphone-screen img {
width: 100%;
height: 100%;
object-fit: cover;
}
.iphone-frame,
.iphone-frame img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
.iphone-hero {
--w: min(300px, 70vw);
}
@media (min-width: 960px) {
.iphone-hero {
--w: 320px;
}
}
.pillar-list {
display: grid;
gap: 16px;
margin: 0;
padding: 0;
list-style: none;
counter-reset: none;
}
@media (min-width: 860px) {
.pillar-list {
grid-template-columns: repeat(3, 1fr);
}
}
.pillar {
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 28px;
overflow: hidden;
padding: 30px 24px 28px;
border: 1px solid var(--border);
border-radius: var(--radius-3xl);
background: linear-gradient(180deg, var(--card) 35%, var(--pillar-tone));
box-shadow: 0 1px 2px rgba(17, 20, 24, 0.04), 0 12px 32px -12px rgba(17, 20, 24, 0.12);
}
.pillar-ordnen {
--pillar-tone: var(--sage-soft);
}
.pillar-erinnern {
--pillar-tone: var(--peach-soft);
}
.pillar-teilen {
--pillar-tone: var(--lilac-soft);
}
.pillar-text {
padding: 0 4px;
}
.pillar-kicker {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 15px;
font-weight: 700;
color: var(--honey-strong);
}
.pillar-kicker svg {
width: 20px;
height: 20px;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.pillar h3 {
margin-top: 10px;
font-size: clamp(24px, 2.4vw, 27px);
line-height: 1.15;
font-weight: 800;
letter-spacing: -0.02em;
}
.pillar-text p:last-child {
margin-top: 10px;
color: var(--muted-foreground);
font-size: 16px;
}
.pillar-proof {
position: relative;
}
.pillar-shot img {
width: 100%;
height: auto;
border-radius: 22px;
box-shadow: 0 18px 40px -16px rgba(17, 20, 24, 0.28);
}
.pillar-toast {
display: flex;
width: fit-content;
margin: 14px auto 0;
position: relative;
align-items: center;
gap: 10px;
padding: 8px 16px 8px 8px;
border-radius: var(--radius-full);
background: var(--card);
box-shadow: 0 10px 24px -8px rgba(17, 20, 24, 0.3);
font-size: 14px;
font-weight: 600;
white-space: nowrap;
}
.pillar-toast .avatar {
width: 30px;
height: 30px;
font-size: 16px;
box-shadow: inset 0 0 0 2px var(--tone-mid);
}
.pillar-notifs {
display: grid;
gap: 10px;
}
.notif {
display: grid;
grid-template-columns: 38px 1fr auto;
gap: 10px;
align-items: start;
padding: 12px 14px;
border-radius: 20px;
background: color-mix(in srgb, var(--card) 90%, transparent);
box-shadow: 0 14px 30px -14px rgba(17, 20, 24, 0.3);
font-size: 14px;
line-height: 1.35;
}
.notif img {
width: 38px;
height: 38px;
border-radius: 9px;
}
.notif b {
display: block;
}
.notif small {
color: var(--muted-foreground);
font-size: 12px;
}
.step-list {
display: grid;
gap: 16px;
margin: 0;
padding: 0;
list-style: none;
}
@media (min-width: 860px) {
.step-list {
grid-template-columns: repeat(3, 1fr);
}
}
.step {
display: flex;
flex-direction: column;
overflow: hidden;
border: 1px solid var(--border);
border-radius: var(--radius-3xl);
background: var(--card);
}
.step-visual {
display: grid;
place-items: center;
height: 232px;
overflow: hidden;
padding: 24px;
background: var(--honey-soft);
}
.step-shot picture {
width: 100%;
height: 100%;
}
.step-shot img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: top;
border-radius: var(--radius-2xl);
box-shadow: 0 16px 30px -18px var(--device-shadow);
}
.step-family {
gap: 14px;
}
.family-name {
font-weight: 800;
color: var(--honey-strong);
}
.step-family ul {
display: flex;
justify-content: center;
gap: 10px;
margin: 0;
padding: 0;
list-style: none;
}
.step-family li {
display: grid;
justify-items: center;
gap: 6px;
font-size: 14px;
font-weight: 600;
}
.avatar {
display: grid;
place-items: center;
width: 46px;
height: 46px;
border-radius: var(--radius-full);
background: var(--tone-soft);
box-shadow: inset 0 0 0 3px var(--tone-mid);
font-size: 26px;
}
.avatar-add {
background: var(--card);
box-shadow: inset 0 0 0 2px var(--honey-mid);
color: var(--honey-strong);
font-weight: 800;
}
.step-body {
padding: 24px 28px 30px;
}
.step-number {
display: grid;
place-items: center;
width: 36px;
height: 36px;
margin-bottom: 16px;
border-radius: var(--radius-full);
background: var(--honey-mid);
color: var(--honey-on);
font-weight: 800;
}
.features-grid {
display: grid;
gap: 32px;
align-items: start;
}
.features-device {
display: grid;
justify-items: center;
}
.iphone-features {
--w: min(290px, 72vw);
}
.iphone-features .iphone-screen {
display: grid;
}
.app-shot {
grid-area: 1 / 1;
opacity: 0;
transition: opacity 0.35s ease;
}
.app-shot[data-active] {
opacity: 1;
}
.feature-cards {
display: grid;
gap: 12px;
}
.feature-card {
display: grid;
gap: 6px;
padding: 20px 22px;
border: 1px solid var(--border);
border-radius: var(--radius-2xl);
background: var(--card);
color: inherit;
font: inherit;
text-align: left;
cursor: pointer;
transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.feature-card:hover {
background: var(--muted);
}
.feature-card[aria-selected="true"] {
border-color: var(--honey-mid);
box-shadow: 0 0 0 2px var(--honey-mid);
background: var(--honey-soft);
}
.feature-title {
font-size: 19px;
font-weight: 800;
letter-spacing: -0.015em;
}
.feature-text {
font-size: 15px;
line-height: 1.5;
color: var(--muted-foreground);
}
.feature-card[aria-selected="true"] .feature-text {
color: var(--honey-strong);
}
@media (min-width: 640px) {
.feature-cards {
grid-template-columns: 1fr 1fr;
}
}
@media (min-width: 960px) {
.features-grid {
grid-template-columns: 1.35fr 1fr;
gap: 56px;
}
.features-device {
order: 2;
position: sticky;
top: 96px;
}
.feature-cards {
order: 1;
}
.iphone-features {
--w: 300px;
}
}
@media (prefers-reduced-motion: reduce) {
.app-shot,
.feature-card {
transition: none;
}
}
.h1-line {
display: block;
}
.step-type {
display: flex;
flex-direction: column;
justify-content: flex-end;
gap: 10px;
place-items: stretch;
}
.type-rows {
display: grid;
gap: 8px;
}
.type-row,
.type-input {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 10px 12px;
border-radius: 16px;
background: var(--card);
box-shadow: 0 1px 2px rgba(17, 20, 24, 0.06);
font-size: 13px;
line-height: 1.3;
}
.type-row p {
display: grid;
color: var(--muted-foreground);
font-size: 12px;
}
.type-row b {
color: var(--foreground);
font-size: 14px;
}
.type-row small {
font-size: 12px;
}
.step:has(.step-type) {
container-type: inline-size;
}
@container (max-width: 330px) {
.step-type {
gap: 8px;
}
.type-rows {
gap: 6px;
}
.type-row {
flex-direction: column;
align-items: flex-start;
gap: 3px;
padding: 6px 12px;
}
.type-input {
padding: 6px 6px 6px 12px;
font-size: 14px;
}
.type-row small {
display: none;
}
}
.type-target {
padding: 4px 10px;
border-radius: var(--radius-full);
background: var(--tone-soft);
color: var(--tone-strong);
font-size: 12px;
font-weight: 700;
white-space: nowrap;
}
.tone-sky {
--tone-soft: var(--sky-soft);
--tone-strong: var(--sky-strong);
--tone-mid: var(--sky-mid);
}
.tone-sage {
--tone-soft: var(--sage-soft);
--tone-strong: var(--sage-strong);
--tone-mid: var(--sage-mid);
}
.type-input {
padding: 8px 8px 8px 14px;
font-size: 15px;
}
.type-text {
flex: 1;
min-height: 2.6em;
line-height: 1.3;
}
.type-send {
display: grid;
flex: none;
place-items: center;
width: 32px;
height: 32px;
border-radius: 10px;
background: var(--honey-mid);
color: #1a1206;
font-weight: 800;
}
.privacy-lock {
width: 44px;
height: 44px;
margin-bottom: 14px;
fill: none;
stroke: var(--honey-strong);
stroke-width: 3;
stroke-linecap: round;
stroke-linejoin: round;
}
.privacy-lock circle {
fill: var(--honey-strong);
stroke: none;
}
@media (prefers-reduced-motion: no-preference) {
@supports (animation-timeline: scroll()) {
.iphone-hero {
animation: hero-tilt linear both;
animation-duration: auto;
animation-timeline: scroll(root);
animation-range: 0 640px;
transform-origin: 50% 30%;
}
.hero-bee {
animation: hero-bee-lag linear both;
animation-duration: auto;
animation-timeline: scroll(root);
animation-range: 0 640px;
}
.timeline ol::after {
content: "";
position: absolute;
left: 7px;
top: 8px;
bottom: 8px;
width: 2px;
background: var(--honey-mid);
transform-origin: top;
animation: fill-down linear both;
animation-duration: auto;
animation-timeline: view();
animation-range: entry 40% cover 60%;
}
.stage {
view-timeline: --stage block;
}
.stage::before {
animation: glow-up linear both;
animation-duration: auto;
animation-timeline: --stage;
animation-range: entry 0% cover 45%;
}
}
@keyframes hero-tilt {
to {
transform: perspective(1400px) rotateX(16deg) scale(0.9);
}
}
@keyframes hero-bee-lag {
to {
transform: translateY(72px);
}
}
@keyframes fill-down {
from {
transform: scaleY(0);
}
to {
transform: scaleY(1);
}
}
@keyframes glow-up {
from {
opacity: 0.25;
transform: translateX(-50%) scale(0.8);
}
to {
opacity: 1;
transform: translateX(-50%) scale(1.15);
}
}
html[data-js] .step:not([data-visible]) .step-family li {
opacity: 0;
transform: scale(0.6);
}
html[data-js] .step[data-visible] .step-family li {
animation: pop-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
animation-delay: calc(0.25s + var(--i, 0) * 0.14s);
}
@keyframes pop-in {
from {
opacity: 0;
transform: scale(0.6);
}
to {
opacity: 1;
transform: none;
}
}
html[data-js] [data-typing]:not([data-typed]) .type-row {
opacity: 0;
transform: translateY(10px);
}
html[data-js] [data-typing] .type-row {
transition: opacity 0.35s ease, transform 0.35s ease;
transition-delay: calc(var(--i, 0) * 160ms);
}
html[data-js] [data-typing][data-typing-active] .type-text::after {
content: "";
display: inline-block;
width: 2px;
height: 1.1em;
margin-left: 1px;
vertical-align: -0.15em;
background: var(--honey-mid);
animation: caret 0.9s steps(1) infinite;
}
@keyframes caret {
50% {
opacity: 0;
}
}
html[data-js] .app-shot {
opacity: 1;
transform: translateX(100%);
transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}
html[data-js] .app-shot[data-before] {
transform: translateX(-100%);
}
html[data-js] .app-shot[data-active] {
transform: none;
}
html[data-js] .app-shot[data-still] {
transition: none;
}
html[data-js] .privacy .lock-shackle {
transform: translateY(-7px) rotate(-12deg);
transform-box: fill-box;
transform-origin: 100% 100%;
transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
html[data-js] .privacy[data-centered] .lock-shackle {
transform: none;
}
:root {
interpolate-size: allow-keywords;
}
.faq details::details-content {
block-size: 0;
overflow: hidden;
transition: block-size 0.3s ease, content-visibility 0.3s allow-discrete;
}
.faq details[open]::details-content {
block-size: auto;
}
}
:is(.pillar-list, .check-list, .step-family ul, .type-rows) > :nth-child(2) {
--i: 1;
}
:is(.pillar-list, .check-list, .step-family ul, .type-rows) > :nth-child(3) {
--i: 2;
}
:is(.pillar-list, .check-list, .step-family ul, .type-rows) > :nth-child(4) {
--i: 3;
}
:is(.pillar-list, .check-list, .step-family ul, .type-rows) > :nth-child(5) {
--i: 4;
}
:is(.pillar-list, .check-list, .step-family ul, .type-rows) > :nth-child(6) {
--i: 5;
}