: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;
}
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: 48px;
padding-bottom: 96px;
}
}
.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;
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 {
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;
gap: 12px;
}
.store-qr {
display: none;
margin: 0;
}
.qr {
width: 132px;
padding: 10px;
border-radius: var(--radius-lg);
background: var(--night-foreground);
}
.store-qr figcaption {
margin-top: 8px;
font-size: 13px;
color: var(--muted-foreground);
}
@media (min-width: 960px) and (hover: hover) {
.store-qr {
display: block;
}
}
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;
}
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 {
padding: 32px 28px;
border-radius: var(--radius-3xl);
background: var(--muted);
}
.pillar-icon {
display: grid;
place-items: center;
width: 48px;
height: 48px;
border-radius: var(--radius-lg);
background: var(--honey-soft);
color: var(--honey-strong);
}
.pillar-icon svg {
width: 24px;
height: 24px;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.pillar h3 {
margin-top: 20px;
font-size: clamp(28px, 3.2vw, 34px);
font-weight: 800;
}
.pillar-claim {
margin-top: 8px;
font-size: 19px;
font-weight: 600;
color: var(--honey-strong);
}
.pillar ul {
display: grid;
gap: 10px;
margin: 22px 0 0;
padding: 18px 0 0;
border-top: 1px solid var(--border);
list-style: none;
color: var(--muted-foreground);
font-size: 16px;
}
.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;
}