/*
Theme Name:   Layerly (Layerly)
Template:     layerly-base
Version:      1.0.0
Layerly Site: staging-layerly-io
Description:  Per-site theme for Layerly. Holds ONLY this site's own CSS, bespoke sections and page templates. The framework lives in the parent.
*/

/* ═══ Tokens (read from the live layerly.io design, 2026-10-30) ═══ */
:root {
	--color-1: #71EFA3;   /* brand green — buttons, accents */
	--color-2: #2C2E45;   /* body text */
	--color-3: #FFFFFF;   /* page background */
	--color-4: #F8F8FC;   /* surface / footer */
	--color-5: #E1E2F2;   /* border */
	--color-6: #1E224F;   /* navy — headings, button text */
	--color-7: #EEEFF8;   /* tint — secondary buttons, hovers */

	--color-primary:    var(--color-1);
	--color-text:       var(--color-2);
	--color-text-muted: rgba(44, 46, 69, .7);
	--color-bg:         var(--color-3);
	--color-surface:    var(--color-4);
	--color-border:     var(--color-5);
	--color-accent:     var(--color-6);
	--color-highlight:  var(--color-7);

	--font-1: 'sculpin', sans-serif;      /* display — big headings */
	--font-2: 'basic-sans', sans-serif;   /* body, nav, buttons */
	--font-3: 'basic-sans', sans-serif;

	--mobile-menu-bg: var(--color-6);
	--mobile-menu-fg: #FFFFFF;
}

html body {
	font-family: var(--font-2);
	font-size: 18px;
	line-height: 1.4;
	color: var(--color-2);
	background: var(--color-3);
}
h1, h2, h3, h4, h5, h6 { color: var(--color-6); }
h1, h2, h3 { font-family: var(--font-1); font-weight: 800; }

/* ═══ Buttons (shell) ═══ */
.ly-btn {
	display: inline-flex; align-items: center; justify-content: center;
	padding: 15px 25px; border-radius: 7px; border: 0;
	font: 700 18px/18px var(--font-2); color: var(--color-6); text-decoration: none;
	transition: all .1s ease-out;
}
.ly-btn:hover, .ly-btn:focus-visible { background: var(--color-6); color: #fff; box-shadow: none; }
.ly-btn--primary { background: var(--color-1); }
.ly-btn--tint    { background: var(--color-7); }

/* ═══ Header ═══ */
.ly-header { position: relative; z-index: 60; background: transparent; }
.ly-header__inner { display: flex; align-items: center; height: 108px; padding-inline: 60px; }
.ly-header__logo { display: block; flex: none; width: 130px; line-height: 0; }
.ly-header__logo-img { display: block; width: 130px; height: auto; }
.ly-header__nav { margin-left: 30px; }
.ly-nav { display: flex; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ly-nav > li { position: relative; }
.ly-nav > li > a { display: block; padding: 10px 15px; font: 700 18px/20px var(--font-2); color: var(--color-2); text-decoration: none; }
.ly-nav .sub-menu {
	position: absolute; top: 100%; left: 0; z-index: 70; min-width: 260px; margin: 0; padding: 6px; list-style: none;
	background: #fff; border-radius: 10px; box-shadow: 0 10px 30px rgba(30, 34, 79, .12);
	opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
.ly-nav > li:hover > .sub-menu, .ly-nav > li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; }
.ly-nav .sub-menu a { display: block; margin: 4px; padding: 10px; border-radius: 7px; font: 700 18px/20px var(--font-2); color: var(--color-6); text-decoration: none; }
.ly-nav .sub-menu a:hover, .ly-nav .sub-menu a:focus-visible { background: var(--color-4); color: var(--color-1); }
.ly-header__actions { display: flex; align-items: center; gap: 30px; margin-left: auto; }
.ly-header__link { font: 700 18px/18px var(--font-2); color: var(--color-6); text-decoration: none; }
.ly-header [data-mobile-menu-toggle] { display: none; margin-left: 20px; color: var(--color-6); }
.ly-drawer { display: none; }

@media (max-width: 1024px) {
	.ly-header__inner { padding-inline: 30px; height: 91px; }
	.ly-header__nav { display: none; }
	.ly-header [data-mobile-menu-toggle] { display: inline-flex; position: relative; z-index: 1002; width: 70px; height: 61px; align-items: center; justify-content: center; margin-left: 15px; }
}
@media (max-width: 640px) { .ly-header__link { display: none; } }

/* ═══ Footer ═══ */
.ly-footer { background: var(--color-4); padding: 103px 60px 110px; }
.ly-footer__logo { display: block; width: 130px; line-height: 0; }
.ly-footer__logo-img { display: block; width: 130px; height: auto; }
/* Fluid desktop grid (F1): the old fixed tracks (396 + 78 + 3 x 275 + 1fr + 20 = 1319px) plus 2 x 60px padding pinned the
   layout to 1440px and pushed the page to 1379px wide at 1280 and 1366. The same numbers are now proportions (fr), so at
   1440px every column sits exactly where it did, and between 1201px and 1439px the columns shrink with the viewport. */
.ly-footer__grid { display: grid; grid-template-columns: minmax(0, 474fr) repeat(3, minmax(0, 275fr)) minmax(0, 1fr) 20px; margin-top: 60px; align-items: start; }
.ly-footer__intro { grid-column: 1; max-width: 396px; }
.ly-footer__col--1 { grid-column: 2; }
.ly-footer__col--2 { grid-column: 3; }
.ly-footer__col--3 { grid-column: 4; }
.ly-footer__social { grid-column: 6; display: flex; flex-direction: column; gap: 25px; margin: 8px 0 0; padding: 0; list-style: none; }
.ly-footer__social a { display: block; width: 20px; height: 20px; color: var(--color-6); }
.ly-footer__social svg { display: block; width: 20px; height: 20px; }
.ly-footer__heading { margin: 8px 0 16px; font: 700 36px/36px var(--font-2); letter-spacing: -1.08px; color: var(--color-6); }
.ly-footer__tagline { margin: 0 0 15px; font-size: 18px; line-height: 25.2px; color: var(--color-2); }
.ly-footer__buttons { display: flex; gap: 15px; }
.ly-footer__list { margin: 0; padding: 0; list-style: none; }
.ly-footer__list a { display: block; padding: 10px 0; font: 400 16px/20px var(--font-2); color: var(--color-2); text-decoration: none; }
.ly-footer__list li:first-child a { font-weight: 700; font-size: 18px; }
.ly-footer__list .menu-item-8226 { display: none; }  /* "Account" duplicates "Login" — hidden in the footer, as on the previous site */
.ly-footer__bottom { display: flex; flex-wrap: wrap; align-items: center; gap: 0 14px; margin-top: 60px; font-size: 12px; color: var(--color-2); }
.ly-footer__bottom p { margin: 0; font-size: 12px; }
.ly-footer__bottom a { color: var(--color-2); text-decoration: none; }
.ly-footer__legal { display: flex; gap: 14px; margin: 0; padding: 0; list-style: none; }

@media (max-width: 1200px) {
	.ly-footer { padding-inline: 24px; }
	.ly-footer__grid { grid-template-columns: repeat(3, 1fr) 20px; gap: 40px 24px; }
	.ly-footer__intro { grid-column: 1 / -1; max-width: none; }
	.ly-footer__col--1 { grid-column: 1; }
	.ly-footer__col--2 { grid-column: 2; }
	.ly-footer__col--3 { grid-column: 3; }
	.ly-footer__social { grid-column: 4; }
}
@media (max-width: 640px) {
	.ly-footer { padding-top: 60px; padding-bottom: 60px; }
	.ly-footer__grid { grid-template-columns: 1fr 1fr; }
	.ly-footer__col--1, .ly-footer__col--2, .ly-footer__col--3 { grid-column: auto; }
	.ly-footer__social { grid-column: 1 / -1; flex-direction: row; margin-top: 0; }
	.ly-footer__heading { font-size: 30px; line-height: 32px; }
}

/* ═══ Home page ═══ */
:root { --wrap: 1200px; }
.ly-s { position: relative; }
.ly-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; }
.ly-head { max-width: 1000px; margin-inline: auto; padding: 30px 0; display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; }
.ly-head h2, .ly-faq__in h2 { margin: 0; font: 800 60px/60px var(--font-1); color: var(--color-6); }
.ly-head p { margin: 0 0 14.4px; font-size: 18px; line-height: 25.2px; }
.ly-cta .ly-head, .ly-final .ly-head { gap: 15px; }
.ly-cta .ly-head { max-width: 800px; }
.ly-final .ly-head { max-width: var(--wrap); }

.ly-hero { padding: 2vw 30px 3vw; }
.ly-hero__in { max-width: 900px; margin-inline: auto; padding: 30px 0; display: flex; flex-direction: column; align-items: center; text-align: center; }
.ly-hero h1 { margin: 0 0 16px; font: 800 80px/80px var(--font-1); color: var(--color-6); }
.ly-hero p { margin: 0 0 20px; font-size: 18px; line-height: 25.2px; }

.ly-marquee { --gap: 30px; position: relative; overflow: hidden; }
.ly-marquee__track { display: flex; gap: var(--gap); width: max-content; animation: ly-marquee var(--dur, 90s) linear infinite; animation-direction: var(--dir, normal); }
@keyframes ly-marquee { from { transform: translateX(0); } to { transform: translateX(calc(-50% - var(--gap) / 2)); } }
@media (prefers-reduced-motion: reduce) { .ly-marquee__track { animation: none; } }
.ly-devices { height: 500px; overflow: hidden; }
.ly-devices .ly-marquee { height: 500px; }
.ly-devices img { flex: none; height: 500px; object-fit: cover; object-position: 50% 0; border-radius: 10px; }
.ly-img-wide { width: 700px; }
.ly-img-narrow { width: 200px; }

.ly-quote { padding: 30px; }
.ly-quote__pill { max-width: var(--wrap); margin: 0 auto; padding: 10px; display: flex; align-items: center; justify-content: center; gap: 20px; background: var(--color-4); border-radius: 10px; }
.ly-quote__pill p { margin: 0; font-size: 18px; line-height: 18px; }
.ly-quote__who { display: flex; align-items: center; gap: 15px; }
.ly-quote__who img { width: 42px; height: 42px; border-radius: 99px; object-fit: cover; }
.ly-quote__who p { line-height: 25px; }

.ly-intro, .ly-best { padding: 6vw 30px; }
.ly-ticks { display: flex; flex-wrap: wrap; justify-content: center; gap: 30px; margin: 0; padding: 0; list-style: none; max-width: 1030px; }
.ly-ticks li { display: flex; align-items: center; gap: 7.5px; }
.ly-ticks svg { flex: none; width: 30px; height: 30px; }
.ly-ticks span { padding-left: 5px; font-size: 18px; line-height: 25px; }

.ly-features { padding: 2vw 30px 6vw; }
.ly-features__in { max-width: var(--wrap); margin-inline: auto; padding: 30px 0; display: flex; flex-direction: column; gap: 120px; }
.ly-feature { display: grid; grid-template-columns: 1fr 1fr; column-gap: 60px; height: 760px; background: var(--color-7); border-radius: 20px; overflow: hidden; }
.ly-feature__text { align-self: center; display: flex; flex-direction: column; justify-content: center; width: 500px; max-width: 100%; justify-self: end; }
.ly-feature--left .ly-feature__text { justify-self: start; order: 2; }
.ly-feature--left .ly-feature__img { order: 1; }
.ly-feature__img { align-self: end; height: 700px; background-repeat: no-repeat; background-size: 130% auto; border-radius: 20px 20px 0 0; }
.ly-feature h3 { margin: 8px 0 16px; font: 700 46px/46px var(--font-2); letter-spacing: -1.4px; color: var(--color-6); }
.ly-feature p { margin: 0 0 14.4px; font-size: 18px; line-height: 25.2px; }
.ly-feature ul { margin: 0; padding: 0; list-style: none; }
.ly-feature li { margin: 0 0 9px; padding-left: 40px; min-height: 30px; font-size: 18px; line-height: 25.2px; background: var(--ly-check) 0 0 / 30px 30px no-repeat; }

.ly-grid { position: relative; padding: 30px; }
.ly-grid::before { content: ""; position: absolute; inset: 0; z-index: 10; pointer-events: none; background: linear-gradient(to top, #F8F8FC 0%, rgba(255, 255, 255, 0) 100%); }  /* same overlay as live: clear at the top, lavender at the bottom */
.ly-grid__wrap { max-width: var(--wrap); margin-inline: auto; }
.ly-grid__in { max-width: var(--wrap); margin-inline: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; align-items: stretch; }
.ly-person { margin: 0; padding: 0 30px; background: var(--color-7); border-radius: 10px; }
.ly-person__in { display: flex; flex-direction: column; gap: 15px; padding: 30px 0; }
.ly-person__quote { margin: 0; font-size: 18px; line-height: 25.2px; }
.ly-person__who { display: flex; align-items: flex-start; gap: 10px; }
.ly-person__who span { display: block; font: 400 16px/22.4px var(--font-2); }
.ly-person__who b { display: block; font-weight: 700; }
.ly-person__img { flex: none; width: 42px; height: 42px; border-radius: 99px; object-fit: cover; }

.ly-carousel-s { padding: 0 30px; background: var(--color-4); }
@media (min-width: 1367px) { .ly-carousel-s { display: none; } }
.ly-carousel { max-width: var(--wrap); margin-inline: auto; padding: 30px 0; }
.ly-carousel__track { display: flex; gap: 30px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.ly-carousel__track::-webkit-scrollbar { display: none; }
.ly-carousel__slide { flex: 0 0 calc((100% - 60px) / 3); scroll-snap-align: start; }
.ly-carousel__slide .ly-person { height: 100%; }
.ly-carousel__dots { display: flex; justify-content: center; gap: 8px; margin-top: 20px; }
.ly-carousel__dots button { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 99px; background: var(--color-5); cursor: pointer; }
.ly-carousel__dots button[aria-current="true"] { background: var(--color-6); }

.ly-cta { padding: 0 30px 6vw; background: var(--color-4); }
.ly-final { padding: 6vw 30px; background: var(--color-4); }
.ly-love-head { padding: 2vw 30px; background: var(--color-4); }
.ly-love { padding: 2vw 30px; background: var(--color-4); }
.ly-love__in { max-width: var(--wrap); margin-inline: auto; padding: 30px 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.ly-love__card { padding: 60px; background: var(--color-7); border-radius: 20px; }
.ly-love__card > div { display: flex; flex-direction: column; gap: 10px; }
.ly-love__card svg { width: 40px; height: 40px; }
.ly-love__card span { display: block; padding-bottom: 9px; font: 700 36px/36px var(--font-2); letter-spacing: -1.1px; color: var(--color-6); }
.ly-love__card p { margin: 0; font-size: 18px; line-height: 25px; }

.ly-gallery { padding: 2vw 30px 6vw; background: var(--color-4); overflow-x: clip; display: flex; flex-direction: column; gap: 30px; }
.ly-gallery__row { height: 500px; }
.ly-gallery__row img { flex: none; height: 500px; object-fit: cover; object-position: 50% 0; }
.ly-gallery__title { position: absolute; z-index: 2; top: 0; left: 50%; transform: translateX(-50%); width: 500px; height: 500px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: var(--color-4); }
.ly-gallery__title h5 { margin: 0 0 16px; font: 700 28px/28px var(--font-2); letter-spacing: -.8px; color: var(--color-6); }
.ly-gallery__title h2 { margin: 0 0 16px; font: 800 72px/72px var(--font-1); color: var(--color-6); }

.ly-faq { padding: 6vw 30px; background: var(--color-4); }
.ly-faq__in { max-width: 800px; margin-inline: auto; padding: 30px 0; display: flex; flex-direction: column; gap: 60px; }
.ly-faq__in h2 { text-align: center; margin: 0 0 16px; }
.ly-faq__intro { margin: 0 0 14.4px; text-align: center; font-size: 18px; line-height: 25.2px; }
.ly-faq__head .ly-faq__intro { margin-bottom: 14.4px; }
.ly-faq__list { display: flex; flex-direction: column; gap: 15px; }
.ly-faq__item { background: var(--color-7); border-radius: 10px; }
.ly-faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 20px 30px; list-style: none; cursor: pointer; }
.ly-faq__item summary::-webkit-details-marker { display: none; }
.ly-faq__item h5 { margin: 0; font: 700 21.6px/22px var(--font-2); letter-spacing: -.6px; color: var(--color-6); }
.ly-faq__item svg { flex: none; width: 20px; height: 20px; fill: var(--color-6); }
.ly-faq__item .ly-faq__minus, .ly-faq__item[open] .ly-faq__plus { display: none; }
.ly-faq__item[open] .ly-faq__minus { display: block; }
.ly-faq__answer { padding: 0 30px 20px; }
.ly-faq__answer p { margin: 0 0 12px; font-size: 18px; line-height: 25px; }
.ly-faq__card { display: flex; align-items: center; gap: 30px; padding: 60px; background: var(--color-7); border-radius: 10px; }
.ly-faq__card img { flex: none; width: 150px; height: 150px; border-radius: 999px; object-fit: cover; }
.ly-faq__card h4 { margin: 0 0 16px; font: 700 36px/36px var(--font-2); letter-spacing: -1.1px; color: var(--color-6); }
.ly-faq__card p { margin: 0 0 15px; font-size: 18px; line-height: 25px; }


/* ═══ Home page — tablet (up to 1024px) ═══ the whole page scales down; cards stay two across */
@media (max-width: 1024px) {
	.ly-hero, .ly-quote, .ly-intro, .ly-best, .ly-features, .ly-grid, .ly-carousel-s, .ly-cta, .ly-gallery, .ly-love-head, .ly-love, .ly-final, .ly-faq { padding-inline: 20px; }
	.ly-hero__in { padding: 20px 49px 20px 50px; }
	.ly-hero h1 { font-size: 32px; line-height: 32px; }
	.ly-hero p, .ly-head p, .ly-feature p, .ly-feature li, .ly-ticks span, .ly-person__quote, .ly-quote__pill p, .ly-faq__intro, .ly-faq__answer p, .ly-love__card p, .ly-faq__card p { font-size: 16px; line-height: 22.4px; }
	.ly-quote__pill p { line-height: 16px; }
	.ly-head h2, .ly-faq__in h2 { font-size: 30px; line-height: 30px; }
	.ly-head { padding: 20px 0; }
	.ly-devices, .ly-devices .ly-marquee, .ly-devices img { height: 200px; }
	.ly-marquee { --gap: 15px; }
	.ly-img-wide { width: 300px; }
	.ly-img-narrow { width: 100px; }
	.ly-quote { padding-block: 20px; }
	.ly-quote__pill { flex-wrap: wrap; gap: 10px; }
	.ly-quote__who img { width: 41px; height: 41px; }
	.ly-ticks { max-width: 758px; }
	.ly-ticks span { padding-left: 5px; }
	.ly-features__in { padding: 20px 0; gap: 60px; }
	.ly-feature { grid-template-columns: 1fr 47.9%; column-gap: 30px; height: 430px; }
	.ly-feature--left { grid-template-columns: 47.9% 1fr; }
	.ly-feature__text { width: auto; justify-self: stretch; padding-left: 30px; }
	.ly-feature--left .ly-feature__text { padding-left: 0; padding-right: 30px; }
	.ly-feature__img { height: 400px; background-size: 150% auto; }
	.ly-feature h3 { font-size: 28px; line-height: 28px; }
	.ly-feature li { margin-bottom: 8px; }
	.ly-grid { padding-block: 20px; }
	.ly-grid__in { grid-template-columns: repeat(2, 1fr); align-items: start; }
	.ly-person { padding: 0 20px; }
	.ly-person__in { padding: 20px 0; }
	.ly-person__who b { line-height: 16px; }
	.ly-person__quote { line-height: 22.4px; }
	.ly-carousel-s { display: none; }
	.ly-faq__in { gap: 30px; padding: 20px 0; }
	.ly-faq__item h5 { font-size: 19.2px; line-height: 19.2px; }
	.ly-faq__card { padding: 30px; }
	.ly-faq__card h4 { font-size: 28px; line-height: 28px; }
	.ly-love__in { padding: 20px 0; display: flex; flex-wrap: wrap; }
	.ly-love__card { flex: 1 1 349px; }
	.ly-header__actions { gap: 15px; }
	.ly-love__card { padding: 30px; }
	.ly-love__card span { font-size: 24px; line-height: 24px; padding-bottom: 6px; }
	.ly-gallery { gap: 30px; }
	.ly-gallery__row, .ly-gallery__row img { height: 200px; }
	.ly-gallery__title { width: 300px; height: 200px; }
	.ly-gallery__title h5 { font-size: 20px; line-height: 20px; }
	.ly-gallery__title h2 { font-size: 40px; line-height: 40px; }
}

/* ═══ Home page — phone (up to 767px) ═══ */
@media (max-width: 767px) {
	.ly-header__actions { display: none; }
	.ly-header [data-mobile-menu-toggle] { margin-left: auto; flex: none; }
	.ly-carousel { padding: 20px 0; }
	.ly-carousel__dots { margin-top: 30px; gap: 13.5px; }
	.ly-carousel__dots button { width: 7px; height: 7px; }
	.ly-love__card svg { height: auto; }
	.ly-hero__in { padding: 20px 0; }
	.ly-quote__pill { flex-direction: column; text-align: left; align-items: flex-start; }
	.ly-quote__who { flex-direction: column; align-items: flex-start; gap: 5px; }
	.ly-quote__who img { width: 30px; height: 30px; }
	.ly-ticks { flex-direction: column; align-items: center; gap: 0; }
	.ly-ticks li { margin: 0 15px; }
	.ly-features__in { gap: 30px; }
	.ly-feature { display: flex; flex-direction: column; height: auto; padding: 30px 0 0 30px; }
	.ly-feature--left { padding: 30px 30px 0 0; }
	.ly-feature:not(.ly-feature--left) .ly-feature__text { padding-right: 30px; }
	.ly-feature__text, .ly-feature--left .ly-feature__text { padding: 0 0 32px; margin: 0; justify-self: auto; }
	.ly-feature--left .ly-feature__text { margin-left: 30px; order: 1; }
	.ly-feature__img, .ly-feature--left .ly-feature__img { order: 2; margin-top: auto; height: 400px; background-size: 160% auto; align-self: stretch; }
	.ly-grid { display: none; }
	.ly-carousel-s { display: block; }
	.ly-carousel__slide { flex-basis: 100%; }
	.ly-carousel__track { gap: 30px; }
	.ly-person { padding: 0 20px; }
	.ly-person__who { flex-direction: column; gap: 5px; }
	.ly-person__img { width: 30px; height: 30px; }
	.ly-love__card { flex-basis: 100%; }
	.ly-gallery__title { width: 250px; }
	.ly-faq__card { flex-direction: column; text-align: center; }
}

/* ═══ Mobile menu (tablet and phone): bold green, big numbered type ═══ */
@media (max-width: 1024px) {
	.ly-header .ly-drawer {
		display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0; padding: 0;
		position: fixed; inset: 0; z-index: 1001; overflow-y: auto;
		background: var(--color-1); color: var(--color-6);
		transform: none; opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s;
	}
	.ly-header .ly-drawer.is-open { opacity: 1; visibility: visible; }
	.ly-drawer__top { flex: none; display: flex; align-items: center; height: 91px; padding: 0 30px; }
	.ly-drawer__logo { display: block; line-height: 0; }
	.ly-drawer__logo-img { display: block; width: 130px; height: auto; }
	.ly-drawer__nav { padding: 8px 30px 24px; counter-reset: ly-nav; }
	.ly-header .ly-drawer ul { display: block; margin: 0; padding: 0; list-style: none; width: 100%; align-items: stretch; }
	.ly-drawer__list { display: flex !important; flex-direction: column; align-items: stretch !important; gap: 0; }
	.ly-drawer__list > li { counter-increment: ly-nav; position: relative; padding-top: 20px; opacity: 0; transform: translateY(14px); }
	.ly-drawer__list > li::before { content: counter(ly-nav, decimal-leading-zero); display: block; margin-bottom: 4px; font: 700 12px/1 var(--font-2); letter-spacing: .6px; opacity: .65; }
	.ly-drawer.is-open .ly-drawer__list > li { animation: ly-drawer-in .5s cubic-bezier(.2, .7, .2, 1) forwards; }
	.ly-drawer.is-open .ly-drawer__list > li:nth-child(1) { animation-delay: .05s; }
	.ly-drawer.is-open .ly-drawer__list > li:nth-child(2) { animation-delay: .11s; }
	.ly-drawer.is-open .ly-drawer__list > li:nth-child(3) { animation-delay: .17s; }
	.ly-drawer.is-open .ly-drawer__list > li:nth-child(4) { animation-delay: .23s; }
	.ly-drawer.is-open .ly-drawer__list > li:nth-child(5) { animation-delay: .29s; }
	@keyframes ly-drawer-in { to { opacity: 1; transform: none; } }
	.ly-header .ly-drawer__list > li > a { display: block; padding: 0; font: 800 clamp(40px, 12vw, 64px)/1 var(--font-1); letter-spacing: -1.4px; color: var(--color-6); text-decoration: none; }
	.ly-header .ly-drawer__list > li > a:hover, .ly-header .ly-drawer__list > li > a:focus-visible { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; }
	.ly-header .ly-drawer .sub-menu { display: flex !important; flex-direction: row !important; flex-wrap: wrap; align-items: center !important; justify-content: flex-start !important; width: auto !important; gap: 0 4px; position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; min-width: 0; max-height: none; margin: 6px 0 0; padding: 0; background: transparent; border-radius: 0; overflow: visible; }
	.ly-header .ly-drawer .sub-menu > li { list-style: none; display: flex; align-items: center; }
	.ly-header .ly-drawer .sub-menu > li:not(:last-child)::after { content: "/"; margin: 0 10px 0 6px; font: 700 16px/1 var(--font-2); opacity: .45; }
	.ly-header .ly-drawer .sub-menu a { display: block; margin: 0; padding: 6px 0; border-radius: 0; font: 700 18px/1.4 var(--font-2); letter-spacing: -.2px; color: var(--color-6); text-decoration: none; }
	.ly-header .ly-drawer .sub-menu a:hover, .ly-header .ly-drawer .sub-menu a:focus-visible { background: transparent; text-decoration: underline; text-underline-offset: 4px; }
	.ly-drawer__foot { margin-top: auto; padding: 8px 30px calc(env(safe-area-inset-bottom) + 88px); }
	.ly-header .ly-drawer .ly-drawer__foot .ly-btn { width: 100%; padding: 20px 25px; font-size: 20px; line-height: 20px; border-radius: 12px; background: var(--color-6); color: #fff; }
	.ly-drawer__note { margin: 12px 0 0; text-align: center; font-size: 14px; line-height: 1.4; color: var(--color-6); }
	.ly-header [data-mobile-menu-toggle][aria-expanded="true"] { color: var(--color-6); }
}
@media (prefers-reduced-motion: reduce) {
	.ly-drawer.is-open .ly-drawer__list > li { animation: none; opacity: 1; transform: none; }
}

/* ═══ Inner pages ═══ */
.ly-hero--page { padding-bottom: 3vw; }
.ly-hero--tight { padding-bottom: 2vw; }
.ly-hero--page p:last-child { margin: 0; }
.ly-fcards-s { padding: 2vw 30px 6vw; }
.ly-fcards { max-width: var(--wrap); margin-inline: auto; padding: 30px 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; align-items: start; }
.ly-fcard { display: block; padding: 60px; background: var(--color-7); border-radius: 20px; color: var(--color-2); text-decoration: none; transition: background-color .4s ease, color .4s ease; }
.ly-fcard svg { display: block; width: 40px; height: 40px; margin-bottom: 22px; }
.ly-fcard h3 { margin: 0 0 15px; font: 700 36px/36px var(--font-2); letter-spacing: -1.1px; color: var(--color-6); }
.ly-fcard p { margin: 0 0 19px; font-size: 18px; line-height: 25.2px; }
.ly-fcard__link { display: block; padding-bottom: 3px; font: 700 18px/18px var(--font-2); color: var(--color-6); }
.ly-fcard:nth-child(6) { min-height: 349px; }

@media (max-width: 1024px) {
	.ly-fcards-s { padding-inline: 20px; }
	.ly-fcards { padding: 20px 0; grid-template-columns: repeat(2, 1fr); }
	.ly-fcard { padding: 30px; }
	.ly-fcard:nth-child(6) { min-height: 0; }
	.ly-fcard h3 { font-size: 32px; line-height: 32px; letter-spacing: -1px; }
	.ly-fcard p { font-size: 16px; line-height: 22.4px; margin-bottom: 15px; }
}
@media (max-width: 767px) {
	.ly-fcards { grid-template-columns: 1fr; }
}

/* Feature pages */
.ly-love--page { padding: 0 30px 6vw; }
.ly-features--flat { padding: 0 30px; }
.ly-quotes { padding: 6vw 30px; }
.ly-carousel--quotes { max-width: var(--wrap); padding: 30px 0 0; }
.ly-carousel--quotes .ly-carousel__slide { flex: 0 0 100%; }
.ly-carousel--quotes .ly-carousel__track { gap: 0; }
.ly-carousel--quotes .ly-carousel__dots { margin-top: 27px; }
.ly-qslide { display: flex; flex-direction: column; align-items: center; gap: 30px; padding: 30px; text-align: center; }
.ly-qslide__text { margin: 0; font: 700 46px/46px var(--font-2); letter-spacing: -1.4px; color: var(--color-6); }
.ly-qslide__who { display: flex; align-items: center; gap: 15px; text-align: left; }
.ly-qslide__who img { width: 42px; height: 42px; border-radius: 99px; object-fit: cover; }
.ly-qslide__who span { display: block; font-size: 18px; line-height: 25.2px; }
.ly-qslide__who b { display: block; font-weight: 700; }
.ly-bul { padding: 0 30px 6vw; }
.ly-bul__in { max-width: var(--wrap); margin-inline: auto; padding: 30px 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 60px; }
.ly-bul__item { display: flex; flex-direction: column; gap: 10px; }
.ly-bul__item svg { width: 40px; height: 40px; }
.ly-bul__item span { display: block; padding-bottom: 9px; font: 700 36px/36px var(--font-2); letter-spacing: -1.1px; color: var(--color-6); }
.ly-bul__item p { margin: 0; font-size: 18px; line-height: 25.2px; }
.ly-final--flat .ly-head p { margin-bottom: 0; }

/* Feature pages — tablet and phone */
@media (max-width: 1024px) {
	.ly-love--page, .ly-features--flat, .ly-quotes, .ly-bul { padding-inline: 20px; }
	.ly-carousel--quotes { padding: 20px 0 0; }
	.ly-qslide { padding: 20px; gap: 20px; }
	.ly-qslide__text { font-size: 28px; line-height: 28px; letter-spacing: -.8px; }
	.ly-qslide__who span { font-size: 16px; line-height: 22.4px; }
	.ly-bul__in { padding: 20px 0; grid-template-columns: repeat(2, 1fr); gap: 60px; }
	.ly-bul__item span { font-size: 24px; line-height: 24px; padding-bottom: 6px; }
	.ly-bul__item p { font-size: 16px; line-height: 22.4px; }
}
@media (max-width: 767px) {
	.ly-bul__in { grid-template-columns: 1fr; }
}

@media (max-width: 1024px) {
	.ly-carousel--quotes .ly-carousel__slide { flex: 0 0 50%; }
	.ly-love__card span { padding-bottom: 8px; }
	.ly-bul__item span { padding-bottom: 8px; }
}
@media (max-width: 767px) {
	.ly-carousel--quotes .ly-carousel__slide { flex-basis: 100%; }
}

/* ═══ Hover and focus: copied from the live site ═══ */
.ly-nav > li > a, .ly-nav .sub-menu a, .ly-header__link, .ly-footer a, .ly-footer__social a { transition: color .4s ease, background-color .4s ease, fill .4s ease; }
.ly-nav > li > a:hover, .ly-nav > li > a:focus-visible, .ly-nav > li:hover > a { background: var(--color-4); color: var(--color-1); border-radius: 7px; }
.ly-header__link:hover, .ly-header__link:focus-visible { color: var(--color-1); }
.ly-footer__list a:hover, .ly-footer__list a:focus-visible, .ly-footer__bottom a:hover, .ly-footer__bottom a:focus-visible, .ly-footer__social a:hover, .ly-footer__social a:focus-visible { color: var(--color-1); }
.ly-footer__social a:hover svg, .ly-footer__social a:focus-visible svg { fill: var(--color-1); }
.ly-faq__item summary { border-radius: 10px; transition: background-color .3s ease; }
.ly-faq__item:not([open]) summary:hover, .ly-faq__item summary:focus-visible { background: var(--color-5); }
.ly-faq__answer a, .ly-head p a, .ly-feature p a { transition: color .4s ease; }
.ly-faq__answer a:hover, .ly-head p a:hover, .ly-feature p a:hover { color: var(--color-1); }
a:focus-visible, button:focus-visible, summary:focus-visible { box-shadow: 0 0 0 4px #fff; outline: 2px solid #000; }
.ly-header .ly-drawer .ly-drawer__foot .ly-btn:hover, .ly-header .ly-drawer .ly-drawer__foot .ly-btn:focus-visible { background: var(--color-4); color: var(--color-6); }

/* New pages: the section behind the three cards has no background (the cards keep theirs) */
.ly-love--page { background: transparent; }

.ly-fcard h3, .ly-fcard p, .ly-fcard__link { transition: color .4s ease; }
.ly-fcard:hover, .ly-fcard:focus-visible { background: var(--color-6); }
.ly-fcard:hover h3, .ly-fcard:hover p, .ly-fcard:focus-visible h3, .ly-fcard:focus-visible p { color: #fff; }
.ly-fcard:hover .ly-fcard__link, .ly-fcard:focus-visible .ly-fcard__link { color: var(--color-1); }

/* Why Layerly, Giving, FAQs */
.ly-hero--paras .ly-hero__in { max-width: 1000px; padding-bottom: 74px; }
.ly-hero--paras h1 { margin-bottom: 56px; }
.ly-hero--page.ly-hero--paras p, .ly-hero--page.ly-hero--paras p:last-child { max-width: 600px; margin: 0 0 14.4px; text-align: center; }
.ly-hero--paras { padding-bottom: 0; }
.ly-hero--narrow .ly-hero__in { max-width: 600px; }
.ly-hero--narrow { padding-bottom: 2vw; }
.ly-hero--page.ly-hero--narrow p:last-child { margin-bottom: 14.4px; }
.ly-steps { padding: 0 30px; }
.ly-steps__in { max-width: var(--wrap); margin-inline: auto; padding: 30px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; }
.ly-steps__card { display: flex; flex-direction: column; gap: 0; padding: 60px; background: var(--color-4); border-radius: 20px; }
.ly-steps__card svg {
  width: 70px;
  height: 70px;
  margin-bottom: 30px;
  fill: var(--color-1);
}
.ly-steps__card h5 { margin: 0 0 8px; font: 700 28px/28px var(--font-2); color: var(--color-6); }
.ly-steps__card h3 { margin: 0 0 16px; font: 700 46px/46px var(--font-2); letter-spacing: -1.4px; color: var(--color-6); }
.ly-steps__card ul { margin: 0; padding: 0; list-style: none; }
.ly-steps__card li { margin: 0 0 9px; padding-left: 40px; min-height: 30px; font-size: 18px; line-height: 25.2px; background: var(--ly-check) 0 0 / 30px 30px no-repeat; }
.ly-steps__card li a { color: var(--color-2); text-decoration: underline; text-underline-offset: 3px; }
.ly-split { padding: 7vw 30px; }
.ly-split--text { padding-top: 3vw; }
.ly-split__in { max-width: 1000px; margin-inline: auto; padding: 30px 0; display: flex; align-items: center; gap: 60px; }
.ly-split__left { flex: 1 1 0; display: flex; flex-direction: column; gap: 15px; }
.ly-split__left h2 { margin: 0 0 16px; font: 800 60px/60px var(--font-1); color: var(--color-6); }
.ly-split__left h3 { margin: 0 0 16px; font: 700 46px/46px var(--font-2); letter-spacing: -1.4px; color: var(--color-6); }
.ly-split__left p { margin: 0 0 14.4px; font-size: 18px; line-height: 25.2px; }
.ly-split__left > div { align-self: flex-start; }
.ly-split__card { flex: 1 1 0; display: flex; flex-direction: column; gap: 15px; padding: 60px; background: var(--color-4); border-radius: 10px; }
.ly-split__card img { width: 100px; height: 100px; margin-bottom: 8px; border-radius: 999px; object-fit: cover; }
.ly-split__card h4 { margin: 0 0 1px; font: 700 36px/36px var(--font-2); letter-spacing: -1.1px; color: var(--color-6); }
.ly-split__card p { margin: 0 0 14.4px; font-size: 18px; line-height: 25.2px; }
.ly-split__card .ly-btn { width: 100%; }
.ly-how { padding: 3vw 30px; }
.ly-how__in { max-width: var(--wrap); margin-inline: auto; padding: 30px 0; display: grid; grid-template-columns: 32.25% 1fr; gap: 50px; align-items: center; }
.ly-how__text h2 { margin: 0 0 16px; font: 800 60px/60px var(--font-1); color: var(--color-6); }
.ly-how__text p { margin: 0 0 14.4px; font-size: 18px; line-height: 25.2px; }
.ly-how__items { display: grid; grid-template-columns: 1fr 1fr; gap: 79px; padding-right: 30px; }
.ly-how__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  text-align: center;
  background: var(--color-7);
  border-radius: 20px;
  padding: 40px 30px;
}
.ly-how__item svg {
  width: 40px;
  height: 40px;
  color: var(--color-1);
}
.ly-how__item span { display: block; padding-bottom: 9px; font: 700 36px/36px var(--font-2); letter-spacing: -1.1px; color: var(--color-6); }
.ly-how__item p { margin: 0; font-size: 18px; line-height: 25.2px; }
.ly-faqs { padding: 0 30px; }
.ly-faqs__in { max-width: 800px; margin-inline: auto; padding: 30px 0; display: flex; flex-direction: column; gap: 30px; }
.ly-faqs__in h2 { margin: 80px 0 25px; font: 800 60px/60px var(--font-1); color: var(--color-6); }
.ly-tog__item {
  background: var(--color-7);
  border-radius: 10px;
  margin-bottom: 15px;
}
.ly-tog__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  list-style: none;
  cursor: pointer;
  padding: 20px 30px;
  font: 700 21.6px/22px var(--font-2);
  letter-spacing: -.6px;
  color: var(--color-6);
  border-radius: 10px;
  transition: background-color .3s ease;
}
.ly-tog__item summary::-webkit-details-marker { display: none; }
.ly-tog__item svg {
  flex: none;
  width: 20px;
  height: 20px;
  fill: var(--color-6);
}
.ly-tog__item .ly-tog__minus, .ly-tog__item[open] .ly-tog__plus { display: none; }
.ly-tog__item[open] .ly-tog__minus { display: block; }
.ly-tog__a {
  padding: 0 30px 20px;
}
.ly-tog__a p {
  margin: 0 0 12px;
  font-size: 18px;
  line-height: 25px;
}
.ly-tog__a a { color: var(--color-2); text-decoration: underline; text-underline-offset: 3px; transition: color .4s ease; }
.ly-tog__a a:hover { color: var(--color-1); }

.ly-final--tall { padding: 10vw 30px; }
.ly-final--tall .ly-head { gap: 30px; }
.ly-final--tall .ly-head h2 { margin-bottom: 16px; }

/* Why Layerly, Giving, FAQs: tablet and phone (estimated from the other pages; not yet measured against live) */
@media (max-width: 1024px) {
	.ly-steps, .ly-split, .ly-how, .ly-faqs { padding-inline: 20px; }
	.ly-steps__in { grid-template-columns: 1fr; gap: 30px; padding: 20px 0; }
	.ly-steps__card { padding: 30px; }
	.ly-steps__card h5 { font-size: 20px; line-height: 20px; }
	.ly-steps__card h3 { font-size: 28px; line-height: 28px; letter-spacing: -.8px; }
	.ly-steps__card li { font-size: 16px; line-height: 22.4px; }
	.ly-split__in { flex-direction: column; align-items: stretch; gap: 30px; padding: 20px 0; }
	.ly-split__left { align-items: center; text-align: center; }
	.ly-split__left > div { align-self: center; }
	.ly-split__left h2 { font-size: 30px; line-height: 30px; }
	.ly-split__left h3 { font-size: 28px; line-height: 28px; }
	.ly-split__left p, .ly-split__card p, .ly-how__text p, .ly-how__item p, .ly-tog__a p { font-size: 16px; line-height: 22.4px; }
	.ly-split__card { padding: 30px; }
	.ly-split__card h4 { font-size: 24px; line-height: 24px; }
	.ly-how__in { grid-template-columns: 1fr; gap: 30px; padding: 20px 0; }
	.ly-how__text h2, .ly-faqs__in h2 { font-size: 30px; line-height: 30px; }
	.ly-how__items { grid-template-columns: 1fr 1fr; gap: 30px; padding-right: 0; }
	.ly-how__item span { font-size: 24px; line-height: 24px; padding-bottom: 6px; }
	.ly-faqs__in { padding: 20px 0; }
	.ly-faqs__in h2 { margin: 40px 0 15px; }
	.ly-tog__item summary {
  font-size: 19.2px;
  line-height: 22px;
  padding: 16px 20px;
}
	.ly-hero--paras .ly-hero__in { padding-bottom: 30px; }
	.ly-hero--paras h1 { margin-bottom: 30px; }
	.ly-final--tall { padding-inline: 20px; }
}
@media (max-width: 767px) {
	.ly-how__items { grid-template-columns: 1fr; }
}

/* Referral program */
.ly-hero--ref .ly-hero__in { max-width: 700px; gap: 20px; }
.ly-hero--ref .ly-hero__in p { margin: 0; text-align: center; }
.ly-hero--ref h1 { margin-bottom: -4px; }
.ly-note { margin: 0; text-align: center; font-size: 18px; line-height: 25.2px; }
.ly-note a { color: var(--color-2); text-decoration: underline; text-underline-offset: 3px; transition: color .4s ease; }
.ly-note a:hover { color: var(--color-1); }
.ly-love--ref { padding: 2vw 30px; background: transparent; }
.ly-love--ref .ly-love__card { background: var(--color-7); min-height: 327px; }
.ly-step { display: block; font: 700 16px/22.4px var(--font-2); letter-spacing: 0; font-style: normal; }
.ly-love--ref .ly-love__card svg { margin-bottom: 8px; }
.ly-love--ref .ly-love__card p { margin-top: -4px; }
.ly-heading { padding: 6vw 30px 2vw; }
.ly-heading h2 { max-width: 800px; margin: 0 auto 16px; padding: 30px 0; text-align: center; font: 800 60px/60px var(--font-1); color: var(--color-6); }
.ly-earn { padding: 0 30px; }
.ly-earn__in { max-width: var(--wrap); margin-inline: auto; padding: 30px 0; display: flex; justify-content: center; gap: 60px; }
.ly-earn__col { width: 360px; display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center; }
.ly-earn__col img { width: 60px; height: 60px; margin-bottom: 13px; }
.ly-earn__col span { display: block; height: 27px; font: 700 21.6px/27px var(--font-2); color: var(--color-6); }
.ly-earn__n { margin: 6px 0 8px; font: 800 99px/99px var(--font-1); color: var(--color-6); }
.ly-earn__col small { font-size: 18px; line-height: 22px; margin-top: 1px; }
.ly-smallnote { padding: 2vw 30px 6vw; }
.ly-smallnote p { max-width: 800px; margin: 0 auto; padding: 30px 0 44.4px; text-align: center; font-size: 12px; line-height: 16.8px; }
.ly-final--ref .ly-head { max-width: 700px; gap: 20px; }
.ly-final--ref .ly-head h2 { margin-bottom: -4px; }
.ly-final--ref .ly-head p { margin: 0; }
.ly-feature ul + p, .ly-feature p + ul { margin-top: 0; }
.ly-faq__answer ul { margin: 0 0 12px; padding-left: 24px; }
.ly-faq__answer li { font-size: 18px; line-height: 25.2px; }
@media (max-width: 1024px) {
	.ly-love--ref, .ly-heading, .ly-earn, .ly-smallnote { padding-inline: 20px; }
	.ly-heading h2 { font-size: 30px; line-height: 30px; }
	.ly-earn__in { flex-wrap: wrap; gap: 30px; }
	.ly-earn__n { font-size: 60px; line-height: 60px; }
	.ly-love--ref .ly-love__card { min-height: 0; }
	.ly-hero--ref .ly-hero__in { max-width: none; }
}

/* Portfolio page */
.ly-port { padding: 30px 30px 6%; }
.ly-port__in { max-width: none; margin-inline: auto; display: flex; flex-direction: column; gap: 60px; }
.ly-port__filter { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; }
.ly-port__filter a { padding: 8px; border-radius: 7px; font-size: 18px; line-height: 21.6px; color: var(--color-2); text-decoration: none; transition: background .3s; }
.ly-port__filter a[aria-pressed="true"], .ly-port__filter a:hover { background: var(--color-4); }
.ly-port__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.ly-pcard { position: relative; display: block; aspect-ratio: 3 / 2; border-radius: 10px; overflow: hidden; background-size: cover; background-position: 50% 0; }
.ly-pcard__in { position: absolute; inset: 0; box-sizing: border-box; padding: 35px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: #fff; background: rgba(30, 34, 79, 0); opacity: 0; transition: opacity .3s ease, background-color .3s ease; }
.ly-pcard:hover .ly-pcard__in, .ly-pcard:focus-visible .ly-pcard__in { opacity: 1; background: rgba(30, 34, 79, .8); }
.ly-pcard__title { margin-bottom: 5px; font: 700 36px/36px var(--font-2); }
.ly-pcard__desc { margin-bottom: 15px; font-size: 18px; line-height: 25.2px; }
.ly-pcard .ly-btn:hover { background: var(--color-6); color: #fff; }
.ly-port__pages { text-align: center; }
.ly-port__pages .page-numbers { color: var(--color-2); text-decoration: none; }
.ly-port__pages .page-numbers:not(:first-child) { margin-left: 7.5px; }
.ly-port__pages .page-numbers:not(:last-child) { margin-right: 7.5px; }
.ly-port__pages a.page-numbers:hover, .ly-port__pages .page-numbers.current { color: var(--color-1); }
@media (max-width: 1024px) {
	.ly-port { padding: 20px 20px 6%; }
	.ly-port__in { gap: 30px; }
	.ly-port__filter a { font-size: 16px; line-height: normal; }
	.ly-port__grid { grid-template-columns: repeat(2, 1fr); }
	.ly-pcard { aspect-ratio: auto; height: 280px; }
	.ly-pcard__title { font-size: 24px; line-height: 24px; }
	.ly-pcard__desc { font-size: 16px; line-height: 22.4px; }
	.ly-port__pages { margin-top: 30px; font-size: 16px; line-height: 22.4px; }
}
@media (max-width: 767px) {
	.ly-port__grid { grid-template-columns: 1fr; }
	.ly-pcard__title { font-size: 19.2px; line-height: 19.2px; }
	.ly-pcard__desc { margin-bottom: 10px; }
}

/* Legal documents (privacy, terms, acceptable use, refund, referral terms, thank you) */
.ly-legal { padding-inline: 50px; }
.ly-legal__in > * + .wp-block-spacer { margin-top: 0; }
.ly-legal h1 { margin: 0 0 16px; font: 800 80px/80px var(--font-1); color: var(--color-6); }
.ly-legal h2, .ly-legal h3, .ly-legal h4, .ly-legal h5 { margin: 8px 0 16px; font-family: var(--font-2); font-weight: 700; color: var(--color-6); letter-spacing: -.03em; }
.ly-legal h2 { font-size: 60px; line-height: 60px; }
.ly-legal h3 { font-size: 46px; line-height: 46px; }
.ly-legal h4 { font-size: 36px; line-height: 36px; }
.ly-legal h5 { font-size: 24px; line-height: 28.8px; }
.ly-legal p { margin: 0 0 14.4px; font-size: 18px; line-height: 25.2px; }
.ly-legal ul, .ly-legal ol { margin: 0; padding-left: 40px; font-size: 18px; line-height: 25.2px; }
.ly-legal li { margin: 0; }
.ly-legal a { color: var(--color-6); }
.ly-legal a:hover { color: var(--color-1); }
.ly-legal .has-text-align-center { text-align: center; }
.ly-legal .wp-block-group p { margin: 0; }
.ly-legal .wp-block-buttons { margin-top: 27px; }
.ly-legal--narrow .ly-legal__in { max-width: 800px; margin-inline: auto; padding: 30px 0; }
.ly-legal--narrow ul { padding-left: 0; }
.ly-legal--narrow li { margin-bottom: 9px; padding-left: 40px; }
.ly-legal--narrow li:nth-child(n+3) { min-height: 30px; }
.ly-legal .wp-block-group__inner-container > *, .ly-legal .wp-block-group > * { max-width: none; }
.ly-legal .wp-block-button__link { padding: 15px 25px; font-size: 18px; line-height: 18px; font-weight: 700; border-radius: 7px; background: var(--color-1); color: var(--color-6); transition: all .1s ease-out; }
.ly-legal .wp-block-button__link:hover, .ly-legal .wp-block-button__link:focus-visible { background: var(--color-6); color: #fff; }
.ly-legal--narrow h3 { margin: 0 0 46px; }
@media (max-width: 1024px) {
	.ly-legal { padding-inline: 30px; }
	.ly-legal h1 { font-size: 32px; line-height: 32px; }
	.ly-legal h2 { font-size: 30px; line-height: 30px; }
	.ly-legal h3 { font-size: 28px; line-height: 28px; }
	.ly-legal h4 { font-size: 24px; line-height: 24px; }
	.ly-legal h5 { font-size: 20px; line-height: 24px; }
	.ly-legal p, .ly-legal ul, .ly-legal ol { font-size: 16px; line-height: 22.4px; }
}
@media (max-width: 1024px) {
	.ly-legal--narrow { padding-inline: 20px; }
	.ly-legal--narrow .ly-legal__in { padding: 20px 0; }
}

/* Pricing page */
.ly-plans { padding: 0 30px; }
.ly-plans__in { max-width: 1380px; margin-inline: auto; padding: 30px 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; align-items: stretch; }
.ly-plans__col { display: flex; flex-direction: column; justify-content: space-between; }
.ly-plans__toggle { display: flex; justify-content: flex-end; align-items: center; gap: 10px; height: 36px; }
.ly-plans__badge { padding: 9px; border-radius: 7px; background: #FFFADE; font-size: 15px; line-height: 15px; }
.ly-ptoggle { position: relative; display: flex; align-items: center; width: 160px; height: 36px; box-sizing: border-box; border-radius: 7px; background: var(--color-7); font-size: 15px; user-select: none; }
.ly-ptoggle button { position: relative; z-index: 1; flex: 1; padding: 0; border: 0; background: none; font: inherit; line-height: 25.2px; color: var(--color-2); text-align: center; cursor: pointer; }
.ly-ptoggle__pill { position: absolute; top: 4px; left: 4px; width: 74px; height: 28px; border-radius: 7px; background: #fff; color: #fff; display: flex; align-items: center; justify-content: center; transition: left .3s; pointer-events: none; }
[data-ly-plans][data-period="monthly"] .ly-ptoggle__pill { left: 80px; }
.ly-plan { position: relative; display: flex; flex-direction: column; box-sizing: border-box; padding: 50px; border-radius: 20px; background: var(--color-7); }
.ly-plan--pro { background: transparent; border: 3px solid var(--color-1); }
.ly-plan--studio { background: var(--color-5); }
.ly-plan__head h4 { margin: 8px 0 7px; font: 700 36px/36px var(--font-2); letter-spacing: -1.08px; color: var(--color-6); }
.ly-plan--studio .ly-plan__head h4 { margin-bottom: 16px; }
.ly-plan__head p { margin: 0 0 25px; font-size: 18px; line-height: 25.2px; }
.ly-plan__price { font: 800 70px/70px var(--font-1); color: var(--color-6); }
.ly-plan__per { margin: 10px 0 0; font-size: 16px; line-height: 16px; }
.ly-plan__list { flex: 1; padding: 20px 0; }
.ly-plan--studio .ly-plan__list { padding-top: 0; }
.ly-plan__list p { margin: 0 0 14.4px; }
.ly-plan__list ul, .ly-compare ul { margin: 0; padding: 0; list-style: none; }
.ly-plan__list li { min-height: 30px; margin: 0 0 9px; padding-left: 40px; background: url("assets/checkmark.svg") 0 0 / 30px 30px no-repeat; }
.ly-plan__list li a { color: var(--color-6); }
.ly-plan__buy .ly-btn, .ly-plan__buy .sc-button { width: 100%; box-sizing: border-box; }
.ly-plan__buy .sc-form-wrapper, .ly-plan__buy .sc-form { display: block; }
[data-ly-plans][data-period="yearly"] .is-monthly, [data-ly-plans][data-period="monthly"] .is-yearly { display: none; }
[data-ly-plans][data-period="monthly"] .ly-plan__commit { display: none; }
.ly-tip { position: relative; display: inline-block; cursor: default; }
.ly-tip__text { position: absolute; left: 0; bottom: 100%; z-index: 5; width: 200px; box-sizing: border-box; padding: 10px 15px; border-radius: 7px; background: var(--color-2); color: #fff; font-size: 15px; line-height: 18px; visibility: hidden; }
.ly-tip:hover .ly-tip__text { visibility: visible; }
.ly-call { padding: 2vw 30px 6vw; }
.ly-call__card { max-width: 1200px; margin-inline: auto; margin-block: 30px; box-sizing: border-box; padding: 60px; border-radius: 10px; background: var(--color-7); display: flex; justify-content: space-between; gap: 15px; }
.ly-call__who { display: flex; gap: 30px; }
.ly-call__who img { width: 100px; height: 100px; border-radius: 999px; object-fit: cover; }
.ly-call__who h4 { margin: 8px 0 16px; font: 700 36px/36px var(--font-2); letter-spacing: -1.08px; color: var(--color-6); }
.ly-call__who p { margin: 0 0 14.4px; max-width: 454px; }
.ly-start { padding: 6vw 30px; background: var(--color-4); }
.ly-start__in { display: flex; flex-direction: column; gap: 60px; max-width: 1400px; margin-inline: auto; }
.ly-start h2 { margin: 0; text-align: center; font: 800 60px/60px var(--font-1); color: var(--color-6); }
.ly-start__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
.ly-start__card { box-sizing: border-box; padding: 40px; border-radius: 20px; background: var(--color-7); }
.ly-start__card svg { width: 40px; height: 40px; }
.ly-start__card h4 { margin: 8px 0 16px; font: 700 36px/36px var(--font-2); letter-spacing: -1.08px; color: var(--color-6); }
.ly-start__card p { margin: 0 0 14.4px; }
.ly-start__note { margin: 0; text-align: center; }
.ly-addons { padding: 6vw 30px; background: var(--color-4); }
.ly-addons__in { max-width: 1200px; margin-inline: auto; padding: 30px 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 60px 30px; }
.ly-addons__head { width: 900px; max-width: 100%; text-align: center; }
.ly-addons__head h2 { margin: 0 0 16px; font: 800 60px/60px var(--font-1); color: var(--color-6); }
.ly-addons__grid { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.ly-addon { position: relative; box-sizing: border-box; padding: 30px; border-radius: 20px; background: var(--color-7); display: flex; flex-direction: column; gap: 15px; }
.ly-addon img { width: 60px; height: 60px; object-fit: contain; }
.ly-addon h4 { margin: 0; font: 700 36px/36px var(--font-2); letter-spacing: -1.08px; color: var(--color-6); }
.ly-addon p { margin: 0; }
.ly-addon__more { color: var(--color-6); font-weight: 700; }
.ly-addon__add { position: absolute; top: 30px; right: 30px; }
.ly-addons__more { display: flex; align-items: center; justify-content: center; gap: 30px; width: 100%; }
.ly-addons__more h4 { margin: 0; font: 700 36px/36px var(--font-2); letter-spacing: -1.08px; color: var(--color-6); }
.ly-shots-head { padding: 6vw 30px 2vw; background: var(--color-4); text-align: center; }
.ly-gallery--page { padding: 30px; }
.ly-shots-more { padding: 2vw 30px 6vw; background: var(--color-4); display: flex; align-items: center; justify-content: center; gap: 30px; }
.ly-shots-more h4 { margin: 0; font: 700 36px/36px var(--font-2); letter-spacing: -1.08px; color: var(--color-6); }
.ly-compare { padding: 6vw 30px; background: var(--color-4); }
.ly-compare__in { max-width: 1200px; margin-inline: auto; }
.ly-compare h2 { margin: 0 0 16px; text-align: center; font: 800 60px/60px var(--font-1); color: var(--color-6); }
.ly-compare__table { width: 100%; margin: 20px 0; border-collapse: collapse; table-layout: fixed; }
.ly-compare th { padding: 14px; text-align: left; font: 700 28px/normal var(--font-2); color: var(--color-6); border-bottom: 2px solid var(--color-5); }
.ly-compare td { padding: 14px; border-bottom: 1px solid var(--color-5); color: var(--color-2); word-wrap: break-word; }
.ly-compare__sec td { padding: 14px 0; border: 0; font: 700 28px/1.2em var(--font-2); color: var(--color-6); }
.ly-check { display: block; min-height: 30px; padding-left: 40px; background: url("assets/checkmark.svg") 0 0 / 30px no-repeat; }

.ly-plan__buy .sc-button, .ly-addon__add .sc-button { display: inline-block; padding: 15px 25px; border: 0; border-radius: 7px; background: var(--color-1); color: var(--color-6); font: 700 18px/18px var(--font-2, inherit); text-align: center; cursor: pointer; transition: all .1s ease-out; }
.ly-plan__buy .sc-button:hover, .ly-plan__buy .sc-button:focus-visible { background: var(--color-6); color: #fff; }
.ly-plan__buy .ly-btn { display: block; text-align: center; }
.ly-addon__add .sc-button, .ly-addon__quick { padding: 15px; border-radius: 99px; background: var(--color-5); color: var(--color-6); font: 700 18px/16px var(--font-2, inherit); text-decoration: none; }

.ly-hero--wide .ly-hero__in { max-width: 1200px; }
.ly-hero--wide p, .ly-hero--page.ly-hero--wide p:last-child { margin-bottom: 14.4px; }
.ly-love--price { padding: 2vw 30px; }
.ly-bul--price { padding: 0 30px; }
.ly-bul--price .ly-bul__item span { padding-bottom: 8px; }
.ly-subhead { padding: 0 30px; }
.ly-subhead__in { max-width: 1200px; margin-inline: auto; padding: 30px 0; text-align: center; }
.ly-subhead h4 { margin: 8px 0 16px; font: 700 36px/36px var(--font-2); letter-spacing: -1.08px; color: var(--color-6); }
.ly-pquote { padding: 28.8px 30px; }
.ly-pquote__in { max-width: 900px; margin-inline: auto; padding: 30px 0; display: flex; flex-direction: column; align-items: center; gap: 30px; text-align: center; }
.ly-pquote h3 { margin: 0; font: 700 46px/46px var(--font-2); letter-spacing: -1.38px; color: var(--color-6); }
.ly-pquote__who { display: flex; align-items: center; gap: 14px; text-align: left; }
.ly-pquote__who img { width: 37px; height: 37px; border-radius: 99px; object-fit: cover; }
.ly-pquote__who p { margin: 0; }
.ly-start__card > svg { margin-bottom: 21px; }
.ly-start__note { margin-bottom: 14.4px; }
.ly-shots-head { padding: 86.4px 30px 28.8px; }
.ly-shots-head .ly-head { max-width: 819px; padding: 0; margin-inline: auto; }
.ly-shots-head h2 { margin: 0 0 16px; }

.ly-shots-head .ly-head { gap: 0; }
.ly-start .ly-start__note { margin-bottom: 14.4px; }
.ly-final--flat.ly-final--notefirst .ly-head p { margin: 0 0 14.4px; }
.ly-addons__head p { margin: 0 0 14.4px; }
.ly-addon p { margin: 0 0 14.4px; }
.ly-addon__quick, .ly-addon__add .sc-button { display: inline-block; line-height: 18px; }
.ly-compare h2 { max-width: 819px; margin: 0 auto 16px; }
.ly-compare__wrap { margin-top: 60px; }
.ly-compare__table { font-size: 16.2px; line-height: 25.2px; }
.ly-compare th { line-height: 42px; }
.ly-compare td { line-height: 24.3px; }
.ly-compare__in { padding: 30px 0; }
.ly-compare .ly-compare__sec td { font-size: 28px; line-height: 33.6px; }
.ly-check { min-height: 26px; }
.ly-compare__wrap { margin-top: 0; padding-top: 60px; }
.ly-compare .ly-compare__sec td { padding-block: 14.5px; }
.ly-compare__wrap { padding-bottom: 8px; }

/* Pricing page: tablet and below */
@media (max-width: 1024px) {
	.ly-plans, .ly-call, .ly-start, .ly-addons, .ly-compare, .ly-pquote, .ly-subhead, .ly-shots-head, .ly-shots-more, .ly-love--price, .ly-bul--price { padding-inline: 20px; }
	.ly-plans__in { grid-template-columns: repeat(2, 1fr); }
	.ly-plan--studio { grid-column: 1 / -1; }
	.ly-plan { padding: 30px; }
	.ly-plan__head h4 { margin-bottom: 4.8px; font-size: 24px; line-height: 24px; }
	.ly-plans__in { padding: 20px 0; }
	.ly-plan--studio { display: grid; grid-template-columns: 1fr 1fr; column-gap: 30px; }
	.ly-plan--studio .ly-plan__list { grid-column: 2; grid-row: 1; }
	.ly-plan--studio .ly-plan__head { grid-column: 1; grid-row: 1; }
	.ly-plan--studio .ly-plan__buy { grid-column: 1 / -1; grid-row: 2; }
	.ly-plan__head p, .ly-plan__list p { margin-bottom: 14.4px; font-size: 16px; line-height: 22.4px; }
	.ly-plan__list li { min-height: 24px; margin-bottom: 14px; font-size: 16px; line-height: 22.4px; }
	.ly-love--price .ly-love__in { grid-template-columns: repeat(2, 1fr); }
	.ly-love--price .ly-love__card { padding: 30px; }
	.ly-love--price .ly-love__card span, .ly-subhead h4, .ly-start__card h4, .ly-addon h4, .ly-call__who h4, .ly-shots-more h4, .ly-addons__more h4 { font-size: 24px; line-height: 24px; }
	.ly-call__card { padding: 30px; }
	.ly-call__who { flex-direction: column; gap: 30px; }
	.ly-call__who > div { max-width: 281px; }
	.ly-plan__head { padding-bottom: 10px; }
	.ly-start__grid { grid-template-columns: repeat(2, 1fr); }
	.ly-start__card { padding: 30px; display: flex; flex-direction: column; gap: 15px; }
	.ly-start__card > svg { margin-bottom: 6px; }
	.ly-start h2, .ly-addons__head h2, .ly-compare h2 { font-size: 30px; line-height: 30px; }
	.ly-pquote h3 { font-size: 28px; line-height: 28px; letter-spacing: -.8px; }
	.ly-addons__grid { grid-template-columns: repeat(2, 1fr); }
	.ly-addon { padding: 20px; }
	.ly-compare__wrap { overflow-x: auto; }
	.ly-compare__table { font-size: 14.4px; }
	.ly-compare th { padding: 10px; font-size: 18px; line-height: 19.8px; }
	.ly-compare td { padding: 10px; font-size: 16px; line-height: 19.2px; }
	.ly-compare .ly-compare__sec td { padding: 8px 0; font-size: 20px; line-height: 24px; }
}

/* Pricing page: letter-spacing and vw paddings to follow live at every width */
.ly-plan__head h4, .ly-start__card h4, .ly-addon h4, .ly-call__who h4, .ly-subhead h4, .ly-shots-more h4, .ly-addons__more h4, .ly-love--price .ly-love__card span, .ly-bul--price .ly-bul__item span { letter-spacing: -.03em; }
.ly-pquote h3 { letter-spacing: -.03em; }
.ly-pquote { padding: 2vw 30px; }
.ly-shots-head { padding: 6vw 30px 2vw; }
.ly-shots-head .ly-head { width: fit-content; }
@media (max-width: 1024px) {
	.ly-pquote { padding: 2vw 20px; }
	.ly-pquote__in { padding: 20px 0; }
	.ly-pquote__who img { width: 36px; height: 36px; }
	.ly-pquote__who p:first-child { line-height: 16px; }
	.ly-subhead__in { padding: 20px 0; }
	.ly-shots-head { padding: 6vw 20px 2vw; }
	.ly-shots-head h2 { font-size: 30px; line-height: 30px; }
}
@media (max-width: 1024px) {
	.ly-start__card p, .ly-addon p, .ly-addon__more, .ly-call__who p, .ly-addons__head p, .ly-start__note, .ly-pquote__who p, .ly-shots-head p, .ly-start__step { font-size: 16px; line-height: 22.4px; }
	.ly-pquote__who p:first-child { line-height: 16px; }
}

@media (max-width: 1024px) {
	.ly-call { padding: 2vw 20px 6vw; }
	.ly-call__card { margin-block: 20px; }
}
@media (max-width: 1024px) {
	.ly-compare__table { table-layout: auto; }
	.ly-compare__in { padding: 20px 0; }
}
@media (max-width: 1024px) {
	.ly-addons__in { padding: 20px 0; }
	.ly-compare .ly-tip { display: inline; }
	.ly-check { min-height: 22px; }
}
@media (max-width: 1024px) {
	.ly-gallery--page { padding: 20px; }
	.ly-check { min-height: 21px; }
}

/* Pricing page: phone */
@media (max-width: 767px) {
	.ly-plans__in { grid-template-columns: 1fr; }
	.ly-plans__col { gap: 30px; }
	.ly-ptoggle { flex: none; }
	.ly-plan--studio { display: flex; }
	.ly-love--price .ly-love__in, .ly-start__grid, .ly-addons__grid { grid-template-columns: 1fr; }
	.ly-call__card { flex-direction: column; }
}
@media (max-width: 767px) {
	.ly-pquote__who { flex-direction: column; gap: 0; text-align: center; }
	.ly-call__who > div { max-width: 193px; }
	.ly-bul--price .ly-bul__in { gap: 30px; }
	.ly-compare td { padding-block: 10.5px; }
	.ly-addons__more { flex-wrap: wrap; row-gap: 60px; }
	.ly-shots-more { flex-wrap: wrap; row-gap: 60px; }
}

/* Starter / Pro plan pages */
.ly-planhero { padding: 0 30px; }
.ly-planhero__in { max-width: 1000px; margin-inline: auto; padding: 30px 0; display: flex; gap: 30px; }
.ly-planhero__text { flex: 0 0 485px; box-sizing: border-box; padding: 50px; border-radius: 20px; background: var(--color-7); align-self: stretch; }
.ly-planhero__text h1 { margin: 0; font: 700 54px/54px var(--font-2); letter-spacing: -.03em; color: var(--color-6); }
.ly-planhero__text p { margin: 0 0 14.4px; }
.ly-planhero__text p:first-child { margin: 0; }
.ly-planhero__text .ly-planhero__note { margin: 30px 0 0; }
.ly-planhero__plan { flex: 1; display: flex; flex-direction: column; gap: 30px; }
.ly-planhero .ly-plan { background: transparent; border: 3px solid var(--color-1); }
.ly-planhero .ly-plan__list { flex: 0 0 auto; padding: 20px 0; }
.ly-planhero .ly-plan__buy { margin-top: 0; }

.ly-quotes--plan { padding: 0 30px; }
.ly-quotes--plan .ly-carousel { max-width: 1200px; margin-inline: auto; padding: 30px 0; }
.ly-quotes--plan .ly-carousel__dots { margin-top: 0; gap: 0; }
/* Plan-page dots: the button is the 24 x 24 tap target (WCAG 2.2 AA 2.5.8); the visible 7px dot is its ::before.
   #8285A0 has no matching :root token (the palette is --color-1..7), so the value is kept. */
.ly-quotes--plan .ly-carousel__dots button { width: 24px; height: 24px; background: none; }
.ly-quotes--plan .ly-carousel__dots button::before { width: 7px; height: 7px; background: #8285A0; }
.ly-quotes--plan .ly-carousel__dots button[aria-current="true"] { background: none; }
.ly-quotes--plan .ly-carousel__dots button[aria-current="true"]::before { background: var(--color-6); }
@media (max-width: 1024px) {
	.ly-planhero, .ly-quotes--plan { padding-inline: 20px; }
	.ly-planhero__in { max-width: none; padding: 20px 0; }
	.ly-planhero__text { flex: 1 1 0; padding: 30px; }
	.ly-planhero__plan { flex: 1 1 0; }
	.ly-planhero__text h1 { font-size: 48px; line-height: 48px; }
	.ly-planhero__text p { font-size: 16px; line-height: 22.4px; }
	.ly-planhero__text p:first-child { margin: 0 0 30px; }
	.ly-quotes--plan .ly-carousel { padding: 20px 0; }
}
@media (max-width: 1024px) {
	.ly-planhero__text, .ly-planhero__plan { flex: 0 0 calc(50% - 15px); min-width: 0; }
	.ly-quotes--plan .ly-carousel__dots { margin-top: 13px; }
}

@media (max-width: 767px) {
	.ly-bul--plan .ly-bul__in { gap: 30px; }
	.ly-addons--six .ly-addons__grid { row-gap: 39.2px; }
	.ly-planhero__in { flex-direction: column; }
	.ly-planhero__text, .ly-planhero__plan { flex: 0 0 auto; width: 100%; }
}

/* Content links: navy with an underline that swaps to green on hover (copied from layerly.io) */
.ly-s p a:not(.ly-btn), .ly-s li a:not(.ly-btn):not(.ly-addon__more), .ly-legal p a, .ly-legal li a {
	color: var(--color-6); text-decoration: none; background-repeat: no-repeat;
	background-image: linear-gradient(var(--color-6), var(--color-6)), linear-gradient(var(--color-6), var(--color-6)), linear-gradient(var(--color-1), var(--color-1));
	background-size: 0 1px, 100% 1px, 0 1px;
	background-position: 100% 100%, 100% 100%, 0 100%;
	transition: background-size .2s, background-position .2s, color .2s;
}
.ly-s p a:not(.ly-btn):hover, .ly-s li a:not(.ly-btn):not(.ly-addon__more):hover, .ly-legal p a:hover, .ly-legal li a:hover {
	color: var(--color-1); background-size: 0 1px, 0 1px, 100% 1px; background-position: 100% 100%, 100% 100%, 0 100%;
}
.ly-addon { transition: background-color .3s; }
.ly-addon:hover { background: var(--color-6); }
.ly-addon:hover h4, .ly-addon:hover p { color: #fff; }
.ly-addon .ly-addon__more { color: var(--color-1); text-decoration: none; }

/* Add-ons and merchandise catalogs */
.ly-catalog { padding: 0 30px 6vw; }
.ly-catalog__in { max-width: 1200px; margin-inline: auto; padding: 30px 0; display: flex; flex-direction: column; gap: 30px; }
.ly-catalog__filter a { font-size: 16px; line-height: 19px; }
.ly-catalog__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; align-items: start; grid-auto-rows: 1fr; }
.ly-catalog .ly-port__pages { margin-top: 60px; }
.ly-catalog--merch .ly-addon img { width: 100%; height: auto; }
.ly-addon__price { margin: 0; font-size: 18px; line-height: 22px; }
@media (max-width: 1024px) { .ly-catalog { padding-inline: 20px; } .ly-catalog__in { padding: 20px 0; } .ly-catalog__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px) { .ly-catalog__grid { grid-template-columns: 1fr; } }
.ly-addon .ly-addon__price { margin: 0; }

.ly-hero--flush .ly-hero__in { padding-inline: 0; }
@media (max-width: 1024px) { .ly-addon .ly-addon__price { font-size: 16px; line-height: 22.4px; } }

@media (max-width: 1024px) { .ly-addon .ly-addon__price { line-height: 16px; } .ly-hero--merch h1 { margin-bottom: 38px !important; } }
@media (max-width: 767px) { .ly-hero--merch h1 { margin-bottom: 61px !important; } }

/* Single product pages */
.ly-prod { padding: 2vw 30px; }
.ly-prod__in { max-width: 1200px; margin-inline: auto; padding: 30px 0; display: flex; align-items: center; gap: 60px; }
.ly-prod__card { flex: 0 0 573px; box-sizing: border-box; padding: 60px; border-radius: 20px; background: var(--color-4); display: flex; flex-direction: column; gap: 10px; }
.ly-prod__icon { width: 60px; height: 60px; object-fit: contain; }
.ly-prod__card h1 { margin: 0; font: 800 36px/36px var(--font-1); color: var(--color-6); }
.ly-prod__card p { margin: 0 0 14.4px; }
.ly-prod__card .ly-prod__price { margin: 0; min-height: 25px; display: flex; align-items: baseline; gap: 6px; }
.ly-prod__price strong { font: 700 24px/25.2px var(--font-2); color: var(--color-6); }
.ly-prod__price span { font-size: 14px; }
.ly-prod__price--big { font: 400 27px/25.2px var(--font-2); color: var(--color-6); }
.ly-prod__opt { display: flex; flex-direction: column; gap: 4.5px; }
.ly-prod__label { font-size: 18px; line-height: 18px; font-weight: 500; }
.ly-prod__select { height: 48px; padding: 0 12px; border: 1px solid #DCE0E6; border-radius: 7px; background: #fff; font: inherit; color: var(--color-2); }
.ly-prod__pills { display: flex; flex-wrap: wrap; gap: 10px; }
.ly-pill input { position: absolute; opacity: 0; pointer-events: none; }
.ly-pill span { display: inline-block; padding: 8px 16px; border: 1px solid #DCE0E6; border-radius: 7px; background: #fff; cursor: pointer; transition: background .1s ease-out; }
.ly-pill input:checked + span { background: var(--color-1); border-color: var(--color-1); color: var(--color-6); font-weight: 700; }
.ly-pill input:focus-visible + span { outline: 2px solid var(--color-6); outline-offset: 2px; }
.ly-qty { display: flex; width: 100px; height: 36px; border: 1px solid #DCE0E6; border-radius: 2.7px; background: #fff; }
.ly-qty button { width: 32px; border: 0; background: none; color: #374151; font-size: 16px; cursor: pointer; }
.ly-qty input { width: 34px; padding: 0; border: 0; border-radius: 4px; background: none; text-align: center; font-size: 15.75px; appearance: textfield; -moz-appearance: textfield; }
.ly-prod__btn { display: block; width: 100%; box-sizing: border-box; text-align: center; }
.ly-prod__btn--buy { background: var(--color-6); color: #fff; }
.ly-prod__btn--buy:hover, .ly-prod__btn--buy:focus-visible { background: var(--color-1); color: var(--color-6); }
.ly-prod__desc { flex: 1; min-width: 0; }
.ly-prod__desc h2 { margin: 0 0 16px; font: 800 36px/36px var(--font-1); color: var(--color-6); }
.ly-prod__desc ul { margin: 0; padding: 0; list-style: none; }
.ly-prod__desc li { min-height: 30px; margin: 0 0 9px; padding-left: 40px; background: url("assets/checkmark.svg") 0 0 / 30px 30px no-repeat; }
.ly-prod__body { padding: 2vw 30px 6vw; }
.ly-prod__body-in { max-width: 1200px; margin-inline: auto; padding: 30px 0; }
.ly-prod__body-in .wp-block-columns { display: flex; align-items: center; gap: 60px; margin: 0 0 31.5px; }
.ly-prod__body-in .wp-block-column { flex: 0 1 auto; min-width: 0; }
.ly-prod__body-in img { max-width: 100%; height: auto; }
.ly-prod__body-in h2 { margin: 0 0 16px; font: 800 36px/36px var(--font-1); color: var(--color-6); }
.ly-prod--merch .ly-prod__in { align-items: flex-start; }
.ly-prod__media { flex: 0 0 567px; }
.ly-prod__main { display: block; width: 567px; height: 567px; object-fit: cover; }
.ly-prod__thumbs { display: flex; gap: 14px; margin-top: 79px; }
.ly-prod__thumb { padding: 0; border: 0; background: none; cursor: pointer; }
.ly-prod__thumb img { display: block; width: 150px; height: 150px; object-fit: cover; }
.ly-prod__text p { margin: 0 0 14.4px; }
.ly-prod__text ul { margin: 0 0 14.4px; padding-left: 40px; }
.ly-prod__spacer { height: calc(60px + 8vw); }
.ly-addons--related .ly-addons__in { padding-top: 30px; }
@media (max-width: 1024px) {
	.ly-prod { padding-inline: 20px; }
	.ly-prod__in { padding: 20px 0; gap: 30px; }
	.ly-prod__card { flex: 0 0 350px; padding: 30px; }
	.ly-prod--merch .ly-prod__card, .ly-prod--merch .ly-prod__media { flex: 1 1 0; min-width: 0; }
	.ly-prod__main { width: 100%; height: auto; aspect-ratio: 1; }
	.ly-prod__thumbs { gap: 10px; margin-top: 30px; }
	.ly-prod__thumb img { width: 80px; height: 80px; }
	.ly-prod__card h1, .ly-prod__desc h2, .ly-prod__body-in h2 { font-size: 30px; line-height: 30px; }
	.ly-prod__body { padding-inline: 20px; }
	.ly-prod__body-in { padding: 20px 0; }
	.ly-prod__card p, .ly-prod__text p { font-size: 16px; line-height: 22.4px; }
}
.ly-prod__card .ly-prod__opt { padding-top: 3.5px; }
.ly-prod__card .ly-prod__opt:first-of-type { margin-top: 10px; }
.ly-prod__card .ly-prod__opt:last-of-type { min-height: 75px; box-sizing: border-box; }
.ly-prod__card .ly-prod__btn:first-of-type { margin-top: 10px; }
@media (min-width: 1025px) { .ly-prod__body-in .wp-block-columns { flex-wrap: nowrap !important; } .ly-prod__body-in .wp-block-columns > .wp-block-column { flex: 0 1 auto !important; } }
@media (min-width: 1025px) {
	.ly-prod__body-in .wp-block-columns:nth-of-type(1) > .wp-block-column:has(> .wp-block-image) { flex: 0 0 350px !important; }
	.ly-prod__body-in .wp-block-columns:nth-of-type(3) > .wp-block-column:has(> .wp-block-image) { flex: 0 0 392px !important; }
	.ly-prod__body-in .wp-block-columns > .wp-block-column:not(:has(> .wp-block-image)) { flex: 1 1 0 !important; }
}
.ly-prod__body-in ul { margin: 0 0 14.4px; padding: 0; list-style: none; }
.ly-prod__body-in li { min-height: 30px; margin: 0 0 9px; padding-left: 40px; background: url("assets/checkmark.svg") 0 0 / 30px 30px no-repeat; }
.ly-prod__body-in li:last-child { margin-bottom: 0; }
.ly-prod__body-in figure.wp-block-image { margin: 0 0 6px; }

.ly-prod__thumbs { margin-top: 116px; }
.ly-prod--merch .ly-prod__card .ly-prod__opt:not(:last-of-type) { min-height: 116px; box-sizing: border-box; }
.ly-addons--merch .ly-addon img { width: 100%; height: auto; }
.ly-addons--merch .ly-addons__grid { align-items: start; }
.ly-prod--merch .ly-prod__card .ly-prod__price { margin-top: 11px; }

@media (max-width: 767px) {
	.ly-prod__in { flex-direction: column; align-items: stretch; }
	.ly-prod__card, .ly-prod--merch .ly-prod__card, .ly-prod--merch .ly-prod__media { flex: 0 0 auto; }
}

@media (min-width: 768px) and (max-width: 1024px) {
	.ly-prod__body-in .wp-block-columns { flex-wrap: nowrap !important; gap: 60px; }
	.ly-prod__body-in .wp-block-columns:nth-of-type(1) > .wp-block-column:has(> .wp-block-image) { flex: 0 0 222px !important; }
	.ly-prod__body-in .wp-block-columns:nth-of-type(3) > .wp-block-column:has(> .wp-block-image) { flex: 0 0 248px !important; }
	.ly-prod__body-in .wp-block-columns > .wp-block-column:not(:has(> .wp-block-image)) { flex: 1 1 0 !important; }
}
@media (max-width: 767px) {
	.ly-prod__body-in .wp-block-columns { flex-direction: column; gap: 30px; }
}
.ly-prod__card, .ly-prod__desc { min-width: 0; }
.ly-prod__select { max-width: 100%; box-sizing: border-box; width: 100%; }
@media (max-width: 1024px) {
	.ly-prod__spacer { height: 101px; }
	.ly-prod__body-in p, .ly-prod__body-in li, .ly-prod__desc p, .ly-prod__desc li { font-size: 16px; line-height: 22.4px; }
	.ly-prod__body-in li, .ly-prod__desc li { min-height: 24px; margin-bottom: 14px; background-size: 24px 24px; padding-left: 34px; }
	.ly-prod__body-in li:last-child { margin-bottom: 0; }
}
@media (max-width: 1024px) {
	.ly-prod__body-in li { margin-bottom: 19px; }
	.ly-prod__body-in li:last-child { margin-bottom: 0; }
	.ly-prod__card .ly-prod__opt:last-of-type { min-height: 58px; }
}
@media (max-width: 767px) { .ly-prod__spacer { height: 70px; } }

/* Blog archive */
.ly-blog { padding: 2vw 30px 6vw; }
.ly-blog__in { max-width: 1260px; margin-inline: auto; padding: 30px 0; display: flex; flex-direction: column; gap: 30px; }
.ly-bcard a { display: block; box-sizing: border-box; padding: 30px; border-radius: 20px; background: var(--color-4); color: var(--color-6); text-decoration: none; }
.ly-bcard:not(.ly-bcard--feature) a { display: flex; align-items: center; gap: 40px; width: 1060px; max-width: 100%; margin-inline: auto; }
.ly-bcard__img { display: block; object-fit: cover; border-radius: 20px; }
.ly-bcard:not(.ly-bcard--feature) .ly-bcard__img { flex: 0 0 480px; width: 480px; height: 300px; }
.ly-bcard--feature .ly-bcard__img { width: 100%; height: 550px; margin-bottom: 30px; }
.ly-bcard--feature .ly-bcard__text { display: flex; gap: 40px; width: 1000px; max-width: 100%; margin-inline: auto; }
.ly-bcard__text { flex: 1; min-width: 0; }
.ly-bcard--feature .ly-bcard__text > * { flex: 1 1 0; min-width: 0; }
.ly-bcard h4 { margin: 0; font: 700 36px/36px var(--font-2); letter-spacing: -.03em; color: var(--color-6); }
.ly-bcard p { margin: 0 0 14.4px; color: var(--color-2); }
.ly-bcard:not(.ly-bcard--feature) h4 { margin-bottom: 10px; }
.ly-blog .ly-port__pages { margin-top: 0; }
.ly-subscribe { padding: 6vw 30px; background: var(--color-4); text-align: center; }
.ly-subscribe h2 { margin: 0 0 16px; font: 800 60px/60px var(--font-1); color: var(--color-6); }
.ly-subscribe p { margin: 0 0 14.4px; }
/* Newsletter form: rendered by the Layerly forms bridge (template-parts/subscribe.php), so its markup is the bridge's .form / .field / .form__* classes. */
.ly-subscribe .form { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 15px; width: 600px; max-width: 100%; margin: 30px auto 0; text-align: left; }
.ly-subscribe .form__fields { order: 1; flex: 1 1 280px; min-width: 0; display: block; }
.ly-subscribe .field { margin: 0; }
.ly-subscribe .field__input { display: block; width: 100%; min-width: 0; box-sizing: border-box; height: 59px; padding: 15px; border: 2px solid var(--color-7); border-radius: 7px; background: #fff; font: inherit; color: #1F2124; }
.ly-subscribe .form__submit { order: 2; flex: none; height: 58px; padding: 20px 25px; box-sizing: border-box; cursor: pointer; border: 0; border-radius: 7px; background: var(--color-1); color: var(--color-6); font: 700 18px/18px var(--font-2); transition: all .1s ease-out; }
.ly-subscribe .form__submit:hover, .ly-subscribe .form__submit:focus-visible { background: var(--color-6); color: #fff; }
.ly-subscribe .form__submit:disabled { opacity: .6; cursor: progress; }
.ly-subscribe .field__label--sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }   /* the label stays for screen readers, hidden from sight even if the bridge stylesheet is late */
.ly-subscribe .form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }   /* honeypot: hidden even if the bridge stylesheet is late */
.ly-subscribe .form__turnstile { order: 8; flex: 0 0 100%; }
.ly-subscribe .form__turnstile:empty { display: none; }
.ly-subscribe .form__status { order: 9; flex: 0 0 100%; margin: 0; min-height: 22px; text-align: center; font-size: 16px; line-height: 22.4px; color: var(--color-2); }
.ly-subscribe .form__status:empty { min-height: 0; }
.ly-subscribe .form__status.is-success { color: var(--color-6); font-weight: 700; }
.ly-subscribe .form__status.is-error { color: #b3261e; }
.ly-subscribe .ly-subscribe__consent { margin: 0; font-size: 14px; line-height: 20px; color: var(--color-text-muted); }
.ly-subscribe .ly-subscribe__consent a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 1024px) {
	.ly-blog, .ly-subscribe { padding-inline: 20px; }
	.ly-blog__in { padding: 20px 0; }
	.ly-bcard h4 { font-size: 24px; line-height: 24px; }
	.ly-bcard p { font-size: 16px; line-height: 22.4px; }
	.ly-subscribe h2 { font-size: 30px; line-height: 30px; }
}
@media (max-width: 767px) {
	.ly-bcard:not(.ly-bcard--feature) a { flex-direction: column; align-items: stretch; gap: 30px; }
	.ly-bcard:not(.ly-bcard--feature) .ly-bcard__img { flex: 0 0 auto; width: 100%; }
	.ly-bcard--feature .ly-bcard__text { flex-direction: column; gap: 15px; }
	.ly-bcard--feature .ly-bcard__img { height: auto; aspect-ratio: 1200 / 550; }
}

.ly-subscribe__in { max-width: 1200px; margin-inline: auto; padding: 30px 0; display: flex; flex-direction: column; align-items: center; gap: 15px; }
.ly-subscribe .ly-subscribe__in h2 { margin: 0; }
.ly-subscribe .ly-subscribe__in p { margin: 0; }
.ly-subscribe .form { margin: 15px 0 0; }
.ly-bcard:not(.ly-bcard--feature) .ly-bcard__img { flex: 0 1 480px; width: auto; min-width: 0; }
@media (max-width: 1024px) { .ly-bcard--feature .ly-bcard__img { height: auto; aspect-ratio: 1200 / 550; } .ly-bcard--feature .ly-bcard__text { width: 100%; } }
@media (max-width: 767px) { .ly-bcard:not(.ly-bcard--feature) .ly-bcard__img { flex: 0 0 auto; width: 100%; } }
@media (min-width: 768px) and (max-width: 1024px) { .ly-bcard:not(.ly-bcard--feature) .ly-bcard__img { flex: 1.1 1 0; } .ly-bcard:not(.ly-bcard--feature) .ly-bcard__text { flex: 1 1 0; } }
@media (max-width: 1024px) {
	.ly-bcard a { padding: 20px; }
	.ly-bcard--feature a { padding: 20px 20px 21px; }
	.ly-subscribe__in { padding: 20px 0; }
}
@media (max-width: 767px) {
	.ly-blog { padding-inline: 10px; }
	.ly-subscribe .form { flex-direction: column; align-items: stretch; }
	.ly-subscribe .form__fields, .ly-subscribe .form__submit { flex: none; width: 100%; }
}
@media (max-width: 767px) { .ly-bcard--feature .ly-bcard__text { gap: 30px; } }
.ly-bcard a { transition: background-color .3s; }
.ly-bcard a:hover, .ly-bcard a:focus-visible { background: var(--color-7); }

/* Single blog post */
.ly-post-head { padding: 2vw 30px; }
.ly-post-head__in { max-width: 1200px; margin-inline: auto; padding: 30px 0; display: flex; flex-direction: column; align-items: center; gap: 30px; text-align: center; }
.ly-post-back { display: inline-flex; align-items: center; gap: 5px; font: 700 18px/18px var(--font-2); color: var(--color-6); text-decoration: none; transition: color .1s ease-out; }
.ly-post-back:hover, .ly-post-back:focus-visible { color: var(--color-1); }
.ly-post-head h1 { margin: 0; padding-top: 36px; font: 800 72px/72px var(--font-1); color: var(--color-6); }
.ly-post-date { margin: 0; }
.ly-post-body { padding: 2vw 30px 6vw; }
.ly-post-body__in { max-width: 1200px; margin-inline: auto; padding: 30px 0; }
.ly-post-hero { padding-bottom: 60px; }
.ly-post-hero img { display: block; width: 100%; height: auto; border-radius: 10px; }
.ly-post-content { max-width: 1000px; margin-inline: auto; }
.ly-post-content > p, .ly-post-content > ul, .ly-post-content > ol, .ly-post-content > h2, .ly-post-content > h3, .ly-post-content > h4, .ly-post-content > h5, .ly-post-content > blockquote { max-width: 800px; margin-inline: auto; }
.ly-post-content p { margin-block: 0 14.4px; }
.ly-post-content h3 { margin: 8px auto 16px; font: 700 46px/46px var(--font-2); letter-spacing: -.03em; color: var(--color-6); }
.ly-post-content h4 { margin: 8px auto 16px; font: 700 36px/36px var(--font-2); letter-spacing: -.03em; color: var(--color-6); }
.ly-post-content h5 { margin: 8px auto 16px; font: 700 28px/28px var(--font-2); letter-spacing: -.03em; color: var(--color-6); }
.ly-post-content ul, .ly-post-content ol { margin-bottom: 18px; padding-left: 40px; }
.ly-post-content figure { margin: 0 0 18px; }
.ly-post-content figure img { max-width: 100%; height: auto; }
.ly-post-content .wp-block-buttons { display: flex; justify-content: center; gap: 15px; margin: 0; }
@media (max-width: 1024px) {
	.ly-post-head, .ly-post-body { padding-inline: 20px; }
	.ly-post-head__in, .ly-post-body__in { padding: 20px 0; }
	.ly-post-head h1 { font-size: 32px; line-height: 32px; padding-top: 0; }
	.ly-post-hero { padding-bottom: 30px; }
	.ly-post-content p, .ly-post-content li { font-size: 16px; line-height: 22.4px; }
	.ly-post-content h3 { font-size: 28px; line-height: 28px; }
	.ly-post-content h4 { font-size: 24px; line-height: 24px; }
	.ly-post-content h5 { font-size: 20px; line-height: 24px; }
}
.ly-post-back { min-height: 25px; }
.ly-post-content { margin-top: 10px; }
.ly-post-content figure img { display: block; margin-bottom: 59.5px; }
@media (max-width: 1024px) { .ly-post-head h1 { font-size: 48px; line-height: 48px; padding-top: 21px; } }
@media (max-width: 767px) { .ly-post-head h1 { font-size: 32px; line-height: 32px; } }

/* Form pages (contact, support): the Layerly Forms component styled like the live Elementor form */
.ly-formhero { padding: 2vw 30px 6vw; }
.ly-formhero__in { max-width: 600px; margin-inline: auto; padding: 30px 0; display: flex; flex-direction: column; gap: 30px; }
.ly-formhero__head { text-align: center; }
.ly-formhero__head h1 { margin: 0 0 16px; font: 800 80px/80px var(--font-1); color: var(--color-6); }
.ly-formhero__head p { margin: 0 0 14.4px; }
.ly-formhero .form__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin: 0; }
.ly-formhero .form__fields > .field:nth-child(1), .ly-formhero .form__fields > .field:nth-child(4), .ly-formhero .form__fields > .field--textarea { grid-column: 1 / -1; }
.ly-formhero .field { margin: 0; }
.ly-formhero .field__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ly-formhero .field__input { box-sizing: border-box; width: 100%; padding: 15px; border: 2px solid var(--color-7); border-radius: 7px; background: #fff; color: #1F2124; font: 400 18px/25.2px var(--font-body, inherit); }
.ly-formhero textarea.field__input { height: 135px; }
.ly-formhero .field__input:focus-visible { outline: 2px solid var(--color-6); outline-offset: 1px; }
.ly-formhero .form__submit, .ly-formhero button[type="submit"] { box-sizing: border-box; height: 40px; margin-top: 60px; padding: 0 25px; border: 0; border-radius: 7px; background: var(--color-1); color: var(--color-6); font: 700 18px/18px var(--font-2); cursor: pointer; transition: all .1s ease-out; }
.ly-formhero .form__submit:hover, .ly-formhero button[type="submit"]:hover, .ly-formhero button[type="submit"]:focus-visible { background: var(--color-6); color: #fff; }
@media (max-width: 1024px) { .ly-formhero { padding-inline: 20px; } .ly-formhero__in { padding: 20px 0; } .ly-formhero__head h1 { font-size: 32px; line-height: 32px; } }
@media (max-width: 767px) { .ly-formhero .form__fields { grid-template-columns: 1fr; } }

/* Support form: SureForms-style fields (labels above, 44px inputs) */
.ly-formsec { padding: 0 30px 6vw; }
.ly-formsec__in { max-width: 600px; margin-inline: auto; padding: 30px 0; }
.ly-formsec .form__fields { display: flex; flex-direction: column; gap: 18px; margin: 0; }
.ly-formsec .field { margin: 0; display: flex; flex-direction: column; gap: 4px; }
.ly-formsec .field__label { font: 500 16px/24px var(--font-body, inherit); color: var(--color-6); }
.ly-formsec .field__req { color: #c33; margin-left: 2px; }
.ly-formsec .field__input { box-sizing: border-box; width: 100%; padding: 10px 12px; border: 1px solid var(--color-5); border-radius: 6px; background: var(--color-4); color: var(--color-2); font: 400 16px/24px var(--font-body, inherit); }
.ly-formsec select.field__input { height: 46px; }
.ly-formsec textarea.field__input { min-height: 120px; }
.ly-formsec .field__input:focus-visible { outline: 2px solid var(--color-6); outline-offset: 1px; }
.ly-formsec button[type="submit"] { box-sizing: border-box; height: 46px; margin-top: 30px; padding: 10px 14px; border: 1px solid var(--color-1); border-radius: 7px; background: var(--color-1); color: var(--color-6); font: 700 18px/24px var(--font-2); cursor: pointer; transition: all .1s ease-out; }
.ly-formsec button[type="submit"]:hover, .ly-formsec button[type="submit"]:focus-visible { background: var(--color-6); border-color: var(--color-6); color: #fff; }
@media (max-width: 1024px) { .ly-formsec { padding-inline: 20px; } }
.ly-hero.ly-hero--page.ly-hero--nobottom { padding-bottom: 0; }

.ly-cal { padding: 0 30px 6vw; }
.ly-cal__in { max-width: 1200px; margin-inline: auto; padding: 30px 0; }
.ly-cal__embed { width: 100%; min-height: 571px; overflow: scroll; }
@media (max-width: 1024px) { .ly-cal { padding-inline: 20px; } .ly-cal__in { padding: 20px 0; } }
.ly-final--space .ly-head h2 { margin-bottom: 40px; }
.ly-hero--flush h1 { width: 100%; }

/* Start page: plan advisor */
.ly-bare__head { display: flex; justify-content: center; padding: 30px; }
.ly-bare__head img { display: block; height: 28px; width: auto; }
.ly-adv { padding: 0 30px 6vw; }
.ly-adv__in { max-width: 600px; margin-inline: auto; padding-top: 30px; }
.ly-adv__progress { height: 6px; border-radius: 99px; background: var(--color-7); overflow: hidden; }
.ly-adv__progress span { display: block; height: 100%; background: var(--color-1); transition: width .3s ease; }
.ly-adv__count { margin: 12px 0 30px; font-size: 14px; line-height: 18px; color: var(--color-text-muted); }
.ly-adv__q { margin: 0; padding: 0; border: 0; min-width: 0; }
.ly-adv__q legend { padding: 0; margin: 0 0 10px; font: 700 28px/32px var(--font-2); letter-spacing: -.03em; color: var(--color-6); }
.ly-adv__hint { margin: 0 0 14px; font-size: 16px; }
.ly-adv__opts { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.ly-adv__opt { display: flex; align-items: center; justify-content: space-between; gap: 15px; width: 100%; box-sizing: border-box; padding: 14px 16px; border: 2px solid var(--color-7); border-radius: 7px; background: var(--color-4); color: var(--color-2); font: 400 18px/25.2px var(--font-body, inherit); text-align: left; cursor: pointer; transition: background .1s ease-out, border-color .1s ease-out; }
.ly-adv__opt:hover, .ly-adv__opt:focus-visible { background: var(--color-7); }
.ly-adv__opt i { flex: none; width: 20px; height: 20px; border: 2px solid var(--color-5); border-radius: 99px; background: #fff; }
.ly-adv__opt[role="checkbox"] i { border-radius: 5px; }
.ly-adv__opt.is-on { border-color: var(--color-1); background: #fff; }
.ly-adv__opt.is-on i { border-color: var(--color-1); background: var(--color-1) url("assets/checkmark.svg") center / 18px no-repeat; }
.ly-adv__text { width: 100%; box-sizing: border-box; margin-top: 18px; padding: 15px; border: 2px solid var(--color-7); border-radius: 7px; background: #fff; font: 400 18px/25.2px var(--font-body, inherit); }
.ly-adv__nav { display: flex; justify-content: space-between; align-items: center; margin-top: 30px; }
.ly-adv__back, .ly-adv__restart { padding: 0; border: 0; background: none; color: var(--color-6); font: 700 18px/18px var(--font-2); text-decoration: underline; cursor: pointer; }
.ly-adv__next[disabled] { opacity: .4; cursor: not-allowed; }
.ly-adv__card { padding: 40px; border: 3px solid var(--color-1); border-radius: 20px; }
.ly-adv__card--studio { border-color: var(--color-5); background: var(--color-5); }
.ly-adv__eyebrow { margin: 0 0 4px; font-weight: 700; }
.ly-adv__card h2 { margin: 0 0 8px; font: 800 54px/54px var(--font-1); color: var(--color-6); }
.ly-adv__card h3 { margin: 24px 0 10px; font: 700 22px/28px var(--font-2); letter-spacing: -.02em; color: var(--color-6); }
.ly-adv__toggle { display: inline-flex; gap: 4px; margin: 16px 0 8px; padding: 4px; border-radius: 7px; background: var(--color-7); }
.ly-adv__toggle button { padding: 4px 14px; border: 0; border-radius: 7px; background: none; font: 400 15px/25px var(--font-body, inherit); cursor: pointer; }
.ly-adv__toggle button[aria-pressed="true"] { background: #fff; }
.ly-adv__price strong { font: 800 70px/70px var(--font-1); color: var(--color-6); }
.ly-adv__price span { margin-left: 8px; font-size: 16px; }
.ly-adv__price em { font-style: normal; }
.ly-adv__reasons { margin: 0; padding: 0; list-style: none; }
.ly-adv__reasons li { min-height: 30px; margin: 0 0 9px; padding-left: 40px; background: url("assets/checkmark.svg") 0 0 / 30px 30px no-repeat; }
.ly-adv__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.ly-adv__chips a { padding: 6px 12px; border-radius: 99px; background: var(--color-7); color: var(--color-6); font-size: 15px; text-decoration: none; }
.ly-adv__ctas { display: flex; flex-wrap: wrap; gap: 15px; margin-top: 30px; }
.ly-adv__fine { margin: 20px 0 0; font-size: 16px; }
.ly-adv__fine .ly-adv__restart { font: 400 16px/22px var(--font-body, inherit); }
.ly-adv__lead { margin-top: 40px; padding: 30px; border-radius: 20px; background: var(--color-4); }
.ly-adv__lead h3 { margin: 0 0 8px; font: 700 28px/32px var(--font-2); letter-spacing: -.03em; color: var(--color-6); }
.ly-adv__lead p { margin: 0 0 20px; }
.ly-adv__lead .field { margin: 0 0 12px; }
.ly-adv__lead .field:has(input[name="quiz_summary"]) { display: none; }
.ly-adv__lead .field__input { width: 100%; box-sizing: border-box; padding: 12px 14px; border: 2px solid var(--color-7); border-radius: 7px; background: #fff; font: 400 16px/22px var(--font-body, inherit); }
@media (max-width: 1024px) { .ly-adv { padding-inline: 20px; } }
@media (max-width: 767px) { .ly-adv__card { padding: 24px; } .ly-adv__card h2 { font-size: 40px; line-height: 40px; } .ly-adv__price strong { font-size: 54px; line-height: 54px; } .ly-adv__q legend { font-size: 24px; line-height: 28px; } }

.ly-footer__bottom { display: block; }
.ly-footer__legal { display: flex; flex-wrap: wrap; gap: 0 10px; margin: 0; padding: 0; list-style: none; font-size: 12px; line-height: 25.2px; }
.ly-footer__legal a { color: #333; }

.ly-header__cart { display: inline-flex; align-items: center; color: var(--color-6); }
.ly-header__cart .sc-cart-icon, .ly-header__cart a { color: inherit; line-height: 1; }
.ly-header__cart svg { width: 22px; height: 21px; }

/* SureCart checkout: live carries this padding inline (2 columns, 60px; 30px on small screens) */
.checkout-padding{padding:60px}
@media (max-width:768px){.checkout-padding{padding:30px}}


/* Layerly — FAQs accordion (.ly-tog) restyle to match .ly-faq__item card style — allow_shadowed: the item-level bg/radius are intentionally the base look behind the transparent summary, same layering as shipped .ly-faq__item. — 2026-11-04T11:33:57.592Z */
.ly-tog__item:not([open]) summary:hover, .ly-tog__item summary:focus-visible {
  background: var(--color-5);
}

@media (max-width: 1024px) {
  .ly-tog__a {
    padding: 0 20px 16px;
  }
}


/* Layerly — Pricing page 'Plus everything else' grid: small PRO badge (media library pro.svg, #10291) overlapping bottom-right of the icon on Pro-only items, matching production layerly.io/pricing styling. — 2026-11-04T14:02:13.638Z */
.ly-bul__icon {
  position: relative;
  display: inline-flex;
  width: 40px;
  height: 40px;
}

.ly-bul__badge {
  position: absolute;
  right: -14px;
  bottom: -6px;
  width: 34px;
  height: 14px;
}

/* ═══ Mobile menu: scroll lock, chat stacking (tablet and phone) ═══
   The parent only locks the page behind the menu at 768px and below; this drawer is in use up to 1024px, so on a tablet the
   page used to scroll underneath it. menu.js mirrors the open state onto <html> (.ly-menu-open) as well as <body>. */
@media (max-width: 1024px) {
	html.ly-menu-open, html.ly-menu-open body, body.mobile-menu-open { overflow: hidden; }
	html.ly-menu-open { scrollbar-gutter: stable; }   /* no sideways jump on a desktop browser narrowed to tablet width */
	.ly-header .ly-drawer { overscroll-behavior: contain; }
	/* The menu is a full-screen layer. The chat launcher (fixed, and a higher z-index than the header that holds the drawer) used to float on
	   top of it and cover the foot of the menu; while the menu is open the chat steps out of the way and comes back when it closes. */
	html.ly-menu-open #layerly-chat, body.mobile-menu-open #layerly-chat { display: none; }
}

/* ═══ Tap targets (WCAG 2.2 AA 2.5.8: at least 24 x 24 CSS px) ═══ */
/* Testimonial dots were 10px (7px on phones). The visible dot is unchanged; the button around it is now 24 x 24. */
.ly-carousel__dots { gap: 0; margin-top: 13px; }
.ly-carousel__dots button { position: relative; width: 24px; height: 24px; background: none; }
.ly-carousel__dots button::before { content: ""; position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; transform: translate(-50%, -50%); border-radius: 99px; background: var(--color-5); }
.ly-carousel__dots button[aria-current="true"] { background: none; }
.ly-carousel__dots button[aria-current="true"]::before { background: var(--color-6); }
.ly-carousel--quotes .ly-carousel__dots { margin-top: 16px; }
@media (max-width: 767px) {
	.ly-carousel__dots { gap: 0; margin-top: 21px; }
	.ly-carousel__dots button { width: 24px; height: 24px; }
	.ly-carousel__dots button::before { width: 7px; height: 7px; }
}
/* Footer legal links were 14px tall (a 12px inline link). Same size and look, 26px tall to tap. */
.ly-footer__legal a { display: inline-block; padding-block: 6px; line-height: 14px; }
.ly-footer__legal span { display: inline-block; line-height: 26px; }


/* ═══ Tablet type and layout, matched to layerly.io (F6/F7) ═══
   The tablet rules above were written from the phone sizes ("estimated, not yet measured against live"). Measured on live at
   1024px (qa-layerly-io/live/*-1024.png): the hero heading is 60px, section headings 40px, card headings 36px and body text 18px,
   where this theme had 32 / 30 / 28 / 16; live's 768px values are the small ones, which the rules above already match.
   So between 768px and 1024px every size below slides smoothly from the 768 value to the 1024 value with clamp()
   (the vw terms are those two points joined by a line), and the card grids use live's layouts. Phones (767px and below) are untouched. */
@media (min-width: 768px) and (max-width: 1024px) {
	:root {
		--ly-t-h1: clamp(32px, 10.9375vw - 52px, 60px);        /* 32 at 768 -> 60 at 1024 */
		--ly-t-h2: clamp(30px, 3.90625vw, 40px);               /* 30 -> 40 */
		--ly-t-h3: clamp(28px, 3.125vw + 4px, 36px);           /* 28 -> 36 */
		--ly-t-h4: clamp(24px, 2.34375vw + 6px, 30px);         /* 24 -> 30 */
		--ly-t-p:  clamp(16px, .78125vw + 10px, 18px);         /* 16 -> 18, line-height 1.4 (22.4 -> 25.2) */
	}
	.ly-hero h1, .ly-formhero__head h1 { font-size: var(--ly-t-h1); line-height: var(--ly-t-h1); }
	.ly-head h2, .ly-faq__in h2, .ly-split__left h2, .ly-how__text h2, .ly-faqs__in h2, .ly-heading h2, .ly-start h2, .ly-addons__head h2, .ly-compare h2, .ly-shots-head h2 { font-size: var(--ly-t-h2); line-height: var(--ly-t-h2); }
	.ly-feature h3, .ly-steps__card h3, .ly-split__left h3, .ly-pquote h3 { font-size: var(--ly-t-h3); line-height: var(--ly-t-h3); }
	.ly-love__card span, .ly-bul__item span, .ly-split__card h4, .ly-how__item span, .ly-plan__head h4, .ly-love--price .ly-love__card span, .ly-subhead h4, .ly-start__card h4, .ly-addon h4, .ly-call__who h4, .ly-shots-more h4, .ly-addons__more h4 { font-size: var(--ly-t-h4); line-height: var(--ly-t-h4); }
	.ly-faq__card h4 { font-size: clamp(28px, .78125vw + 22px, 30px); line-height: 1.07; }
	.ly-faq__item h5 { font-size: clamp(19.2px, .9375vw + 12px, 21.6px); line-height: 1.02; }
	.ly-hero p, .ly-head p, .ly-feature p, .ly-feature li, .ly-ticks span, .ly-person__quote, .ly-quote__pill p, .ly-faq__intro, .ly-faq__answer p, .ly-love__card p, .ly-faq__card p, .ly-fcard p, .ly-qslide__who span,
	.ly-bul__item p, .ly-steps__card li, .ly-split__left p, .ly-split__card p, .ly-how__text p, .ly-how__item p, .ly-tog__a p, .ly-plan__head p, .ly-plan__list p, .ly-plan__list li, .ly-start__card p, .ly-addon p,
	.ly-call__who p, .ly-addons__head p, .ly-start__note, .ly-pquote__who p, .ly-shots-head p, .ly-planhero__text p, .ly-prod__card p, .ly-prod__text p { font-size: var(--ly-t-p); line-height: 1.4; }

	/* Home: the sample-site strip and gallery grow with the page (200px / 300px / 100px at 768, 400 / 500 / 150 at 1024) */
	.ly-devices, .ly-devices .ly-marquee, .ly-devices img, .ly-gallery__row, .ly-gallery__row img { height: clamp(200px, 78.125vw - 400px, 400px); }
	.ly-img-wide { width: clamp(300px, 78.125vw - 300px, 500px); }
	.ly-img-narrow { width: clamp(100px, 19.53125vw - 50px, 150px); }
	.ly-marquee { --gap: clamp(15px, 2.34375vw - 3px, 21px); }
	.ly-gallery__title { width: clamp(300px, 78.125vw - 300px, 500px); height: clamp(200px, 78.125vw - 400px, 400px); }
	.ly-gallery__title h2 { font-size: clamp(40px, 6.25vw - 8px, 56px); line-height: 1; }
	.ly-gallery__title h5 { font-size: clamp(20px, 1.5625vw + 8px, 24px); line-height: 1; }
	/* Home: the quote strip stacks (quote centred, person underneath), as on live */
	.ly-quote__pill { flex-direction: column; align-items: flex-start; gap: 10px; }
	.ly-quote__pill > p { align-self: center; text-align: center; }

	/* Why Layerly / Giving / FAQs / Start pages: cards two across, call-to-action split side by side, as on live */
	.ly-steps__in { grid-template-columns: 1fr 1fr; gap: 30px; }
	.ly-steps__card { padding: 30px; }
	.ly-steps__card svg { width: clamp(60px, 3.90625vw + 30px, 70px); height: clamp(60px, 3.90625vw + 30px, 70px); margin-bottom: clamp(20px, 3.90625vw - 10px, 30px); }
	.ly-steps__card h5 { font-size: clamp(20px, 1.5625vw + 8px, 24px); line-height: 1; }
	.ly-split__in { flex-direction: row; align-items: center; gap: 30px; padding: 20px 0; }
	.ly-split__left { align-items: flex-start; text-align: left; }
	.ly-split__left > div { align-self: flex-start; }
	.ly-split__card { padding: 30px; }
}

/* ═══ FAQs page: plain rows, as on live (F7) ═══
   layerly.io's /faqs/ list has no tinted card behind each question (the home page and the plan pages do, and keep theirs):
   bold question, a plus sign at the right edge, centred group headings. Same at every width; 18px at desktop, 16px at 1024 and below. */
.ly-faqs__in h2 { text-align: center; }
.ly-tog__item { background: none; border-radius: 0; margin-bottom: 0; }
.ly-tog__item summary { padding: 20px 0; font-size: 18px; line-height: 23px; letter-spacing: -.3px; border-radius: 0; }
.ly-tog__item:not([open]) summary:hover, .ly-tog__item summary:focus-visible { background: none; color: var(--color-1); }
.ly-tog__a { padding: 0 0 20px; }
@media (max-width: 1024px) {
	.ly-tog__item summary { padding: 20px 0; font-size: 16px; line-height: 21px; letter-spacing: -.2px; }
}

/* Footer above 1440px: the content stays at its 1440 layout width (1320px) and centres, so the columns do not keep growing on wide screens.
   Identical at 1440 and below. (Live's footer was not measured at 1680 or 1920: no saved capture exists.) */
.ly-footer__inner { max-width: 1320px; margin-inline: auto; }