/*
Theme Name: Kadence Apprivado
Theme URI: https://apprivado.com/
Description: A privacy-first child theme for Apprivado, built on Kadence.
Author: Apprivado
Template: kadence
Version: 1.1.1
Text Domain: kadence-apprivado
*/

:root {
	--paper: #f4f5ef;
	--white: #ffffff;
	--ink: #1d2924;
	--muted: #626d66;
	--green: #245c46;
	--green-light: #dce8df;
	--coral: #e5674e;
	--line: #cbd2ca;
	--display: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, serif;
	--body: "Avenir Next", Avenir, "Segoe UI", sans-serif;
	--angle: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--body);
	font-size: 16px;
	line-height: 1.65;
}

body,
button,
input,
textarea {
	font-family: var(--body);
}

* {
	box-sizing: border-box;
}

a {
	color: inherit;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
}

a:hover {
	color: var(--green);
}

button,
input,
textarea {
	font-size: inherit;
}

:focus-visible {
	outline: 3px solid var(--coral);
	outline-offset: 4px;
}

.skip-link {
	position: absolute;
	z-index: 20;
	top: 12px;
	left: 12px;
	padding: 10px 14px;
	transform: translateY(-160%);
	background: var(--ink);
	color: var(--white);
}

.skip-link:focus {
	transform: translateY(0);
}

.site-header {
	position: relative;
	z-index: 5;
	border-bottom: 1px solid var(--line);
	background: var(--paper);
}

.header-inner,
.footer-inner {
	width: min(1180px, calc(100% - 48px));
	margin: 0 auto;
}

.header-inner {
	min-height: 84px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
}

.brand {
	color: var(--ink);
	font-size: 22px;
	font-weight: 750;
	letter-spacing: 0;
	text-decoration: none;
}

.brand-mark {
	color: var(--coral);
}

.primary-nav {
	display: flex;
	align-items: center;
	gap: 30px;
}

.primary-nav a {
	font-size: 14px;
	font-weight: 650;
	text-decoration: none;
}

.primary-nav .nav-cta {
	padding: 10px 16px;
	background: var(--green);
	color: var(--white);
	clip-path: var(--angle);
}

.primary-nav .nav-cta:hover {
	background: var(--ink);
	color: var(--white);
}

.site-main {
	min-height: 62vh;
}

.site-main :is(
	.hero-grid, .actions, .product-preview, .preview-card, .preview-topline,
	.preview-label, .preview-controls, .preview-modes, .principles, .principle,
	.product-band, .store-callout, .store-badges, .store-badge, .sound-intro,
	.sound-visual, .sound-visual-inner, .variation-list, .screenshot-grid,
	.app-screenshot, .screenshot-placeholder, .noise-grid, .noise-card,
	.feature-grid, .feature, .contact-layout, .contact-aside
) > .wp-block-group__inner-container {
	display: contents;
}

.editor-styles-wrapper :is(.hero h1, .page-heading, .section-heading) {
	margin: 0;
	font-family: var(--display);
	font-weight: 500;
	letter-spacing: 0;
	line-height: 1.04;
}

.editor-styles-wrapper .hero h1 {
	font-size: 68px;
}

.editor-styles-wrapper .page-heading {
	font-size: 58px;
}

.editor-styles-wrapper .section-heading {
	font-size: 46px;
}

.editor-styles-wrapper :is(.hero-copy, .page-lede, .section-intro) {
	margin-left: 0;
	margin-right: 0;
}

.editor-styles-wrapper :is(.principle, .feature) h3 {
	font-family: var(--display);
	font-size: 23px;
	font-weight: 500;
	line-height: 1.15;
}

.editor-styles-wrapper .noise-card h3 {
	font-family: var(--display);
	font-size: 25px;
	font-weight: 500;
}

.editor-styles-wrapper :is(
	.hero-grid, .principles, .product-band, .store-callout, .sound-intro,
	.screenshot-grid, .noise-grid, .feature-grid, .contact-layout
) > .wp-block-group__inner-container {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: inherit;
	align-items: inherit;
	gap: inherit;
}

.editor-styles-wrapper :is(
	.actions, .preview-topline, .preview-label, .preview-controls, .preview-modes,
	.store-badges, .store-badge, .variation-list
) > .wp-block-group__inner-container {
	display: flex;
	flex: 1;
	flex-wrap: inherit;
	align-items: inherit;
	justify-content: inherit;
	gap: inherit;
}

.container {
	width: min(1180px, calc(100% - 48px));
	margin: 0 auto;
}

.hero {
	padding: 76px 0 84px;
	overflow: hidden;
}

.hero-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(360px, 0.88fr);
	align-items: center;
	gap: 72px;
}

.eyebrow {
	margin: 0 0 18px;
	color: var(--green);
	font-size: 12px;
	font-weight: 750;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.hero h1,
.page-heading,
.section-heading {
	margin: 0;
	font-family: var(--display);
	font-weight: 500;
	letter-spacing: 0;
	line-height: 1.04;
}

.hero h1 {
	max-width: 580px;
	font-size: 68px;
}

.hero h1 em {
	color: var(--green);
	font-weight: 500;
}

.hero-copy {
	max-width: 510px;
	margin: 24px 0 30px;
	color: var(--muted);
	font-size: 18px;
}

.actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 18px;
}

.button {
	min-height: 48px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 11px 18px;
	border: 0;
	background: var(--green);
	color: var(--white);
	clip-path: var(--angle);
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	transition: background-color 160ms ease, transform 160ms ease;
}

.button:hover {
	transform: translateY(-2px);
	background: var(--ink);
	color: var(--white);
}

.text-link {
	font-size: 14px;
	font-weight: 700;
}

.product-preview {
	position: relative;
	min-height: 430px;
	display: grid;
	place-items: center;
	padding: 38px;
	background: var(--green-light);
	clip-path: polygon(0 0, calc(100% - 32px) 0, 100% 32px, 100% 100%, 32px 100%, 0 calc(100% - 32px));
	animation: rise-in 650ms both;
}

.preview-card {
	width: min(100%, 365px);
	padding: 24px;
	background: var(--white);
	box-shadow: 12px 12px 0 rgba(29, 41, 36, 0.1);
	clip-path: var(--angle);
}

.preview-topline,
.preview-label,
.preview-controls,
.preview-modes {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.preview-topline {
	padding-bottom: 18px;
	border-bottom: 1px solid var(--line);
}

.preview-brand {
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.08em;
}

.preview-status {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--coral);
}

.preview-label {
	align-items: flex-start;
	margin: 22px 0 8px;
}

.preview-label span,
.preview-label strong {
	display: block;
}

.preview-label span {
	color: var(--muted);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
}

.preview-label strong {
	margin-top: 5px;
	font-family: var(--display);
	font-size: 28px;
	font-weight: 500;
}

.waveform {
	height: 74px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	margin: 20px 0;
}

.waveform span {
	width: 4px;
	max-height: 100%;
	background: var(--green);
}

.waveform span:nth-child(3n) {
	background: var(--coral);
}

.preview-controls {
	justify-content: flex-start;
	gap: 12px;
}

.preview-play {
	width: 42px;
	aspect-ratio: 1;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--green);
	color: var(--white);
	font-size: 12px;
}

.preview-controls small {
	color: var(--muted);
	font-size: 11px;
}

.preview-modes {
	justify-content: flex-start;
	gap: 8px;
	margin-top: 22px;
	padding-top: 16px;
	border-top: 1px solid var(--line);
}

.mode-tag {
	padding: 5px 9px;
	background: var(--paper);
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
}

.mode-tag.active {
	background: var(--green);
	color: var(--white);
}

.section {
	padding: 82px 0;
}

.section-paper {
	background: var(--white);
}

.section-heading {
	max-width: 670px;
	font-size: 46px;
}

.section-intro {
	max-width: 650px;
	margin: 18px 0 0;
	color: var(--muted);
}

.principles {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
	margin-top: 38px;
}

.principle {
	min-height: 190px;
	padding: 25px;
	background: var(--paper);
	clip-path: var(--angle);
}

.principle-number {
	color: var(--coral);
	font-size: 12px;
	font-weight: 800;
}

.principle p.principle-number {
	color: var(--coral);
	font-size: 12px;
}

.principle h3,
.feature h3 {
	margin: 17px 0 8px;
	font-family: var(--display);
	font-size: 23px;
	font-weight: 500;
	line-height: 1.15;
}

.principle p,
.feature p {
	margin: 0;
	color: var(--muted);
	font-size: 14px;
}

.product-band {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: 36px;
	padding: 34px 38px;
	background: var(--green);
	color: var(--white);
	clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 24px 100%, 0 calc(100% - 24px));
}

.product-band .eyebrow {
	color: #c6ddce;
}

.product-band h2 {
	margin: 0;
	font-family: var(--display);
	font-size: 36px;
	font-weight: 500;
	line-height: 1.12;
}

.product-band p {
	max-width: 600px;
	margin: 12px 0 0;
	color: #e0ebe3;
}

.product-band .button {
	background: var(--coral);
}

.store-callout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 28px;
}

.store-callout .section-heading {
	font-size: 34px;
}

.store-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.store-badge {
	min-width: 165px;
	min-height: 58px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 10px 14px;
	border: 1px solid var(--line);
	background: var(--white);
	color: var(--ink);
	clip-path: var(--angle);
}

.store-badge strong,
.store-badge > p:first-child,
.store-badge > .wp-block-group__inner-container > p:first-child {
	font-size: 13px;
	font-weight: 700;
}

.store-badge span,
.store-badge > p:last-child,
.store-badge > .wp-block-group__inner-container > p:last-child {
	color: var(--muted);
	font-size: 11px;
}

.store-badge > p,
.store-badge > .wp-block-group__inner-container > p,
.preview-topline > p,
.preview-topline > .wp-block-group__inner-container > p,
.preview-label p,
.preview-controls > p,
.preview-controls > .wp-block-group__inner-container > p,
.preview-modes > p,
.preview-modes > .wp-block-group__inner-container > p {
	margin: 0;
}

.preview-label .wp-block-group > p:first-child,
.preview-label .wp-block-group > .wp-block-group__inner-container > p:first-child {
	color: var(--muted);
	font-size: 11px;
	font-weight: 700;
}

.preview-label .wp-block-group > p:last-child,
.preview-label .wp-block-group > .wp-block-group__inner-container > p:last-child {
	margin-top: 5px;
	font-family: var(--display);
	font-size: 28px;
	line-height: 1.2;
}

.page-hero {
	padding: 72px 0 56px;
}

.page-heading {
	max-width: 790px;
	font-size: 58px;
}

.page-lede {
	max-width: 680px;
	margin: 20px 0 0;
	color: var(--muted);
	font-size: 18px;
}

.legal-page {
	max-width: 860px;
	padding-bottom: 88px;
}

.legal-copy {
	max-width: 760px;
}

.legal-copy h2 {
	margin: 34px 0 10px;
	font-family: var(--display);
	font-size: 25px;
	font-weight: 500;
	line-height: 1.2;
}

.legal-copy p,
.legal-copy li {
	color: var(--muted);
}

.legal-copy ul {
	padding-left: 22px;
}

.contact-layout {
	display: grid;
	grid-template-columns: 0.8fr 1.2fr;
	gap: 70px;
	padding-bottom: 88px;
}

.contact-aside {
	padding: 28px;
	background: var(--green-light);
	clip-path: var(--angle);
}

.contact-aside h2 {
	margin: 0 0 14px;
	font-family: var(--display);
	font-size: 27px;
	font-weight: 500;
}

.contact-aside p {
	color: var(--muted);
}

.contact-aside a {
	font-weight: 700;
}

.contact-form {
	display: grid;
	gap: 18px;
}

.form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
}

.contact-form label {
	display: grid;
	gap: 7px;
	font-size: 13px;
	font-weight: 700;
}

.contact-form input,
.contact-form textarea {
	width: 100%;
	min-height: 48px;
	padding: 12px;
	border: 1px solid var(--line);
	border-radius: 0;
	background: var(--white);
	color: var(--ink);
}

.contact-form textarea {
	min-height: 150px;
	resize: vertical;
}

.contact-form .button {
	justify-self: start;
	cursor: pointer;
}

.form-notice {
	padding: 12px 15px;
	border-left: 4px solid var(--green);
	background: var(--green-light);
}

.form-notice.error {
	border-color: var(--coral);
	background: #fae7e1;
}

.honeypot {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	clip-path: inset(50%);
}

.sound-intro {
	display: grid;
	grid-template-columns: 1fr 0.9fr;
	align-items: center;
	gap: 66px;
	padding-bottom: 76px;
}

.sound-visual {
	min-height: 310px;
	display: grid;
	place-items: center;
	padding: 28px;
	background: var(--green-light);
	clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 28px 100%, 0 calc(100% - 28px));
}

.sound-visual-inner {
	width: min(100%, 390px);
	padding: 26px;
	background: var(--white);
	clip-path: var(--angle);
}

.sound-visual-inner .waveform {
	height: 96px;
}

.sound-visual-inner .waveform span {
	width: 5px;
}

.noise-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	margin-top: 32px;
}

.screenshot-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 18px;
	margin-top: 32px;
}

.app-screenshot {
	margin: 0;
	padding: 10px;
	background: var(--green-light);
	clip-path: var(--angle);
}

.screenshot-placeholder {
	aspect-ratio: 9 / 17;
	display: grid;
	place-items: center;
	border: 1px dashed var(--line);
	background: var(--paper);
	color: var(--muted);
	font-family: var(--display);
	font-size: 30px;
}

.app-screenshot figcaption,
.app-screenshot > p,
.app-screenshot > .wp-block-group__inner-container > p {
	padding: 10px 2px 2px;
	font-size: 12px;
	font-weight: 700;
}

.app-screenshot > p,
.app-screenshot > .wp-block-group__inner-container > p,
.screenshot-placeholder > p,
.screenshot-placeholder > .wp-block-group__inner-container > p {
	margin: 0;
}

.app-screenshot img {
	width: 100%;
	height: auto;
}

.noise-card {
	padding: 23px;
	border-top: 3px solid var(--green);
	background: var(--paper);
	clip-path: var(--angle);
}

.noise-card:nth-child(2) {
	border-color: var(--coral);
}

.noise-card:nth-child(3) {
	border-color: var(--ink);
}

.noise-card h3 {
	margin: 0 0 8px;
	font-family: var(--display);
	font-size: 25px;
	font-weight: 500;
}

.noise-card p {
	margin: 0;
	color: var(--muted);
	font-size: 14px;
}

.variation-list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 25px;
}

.variation-list span,
.variation-list > p,
.variation-list > .wp-block-group__inner-container > p {
	padding: 8px 12px;
	border: 1px solid var(--line);
	font-size: 13px;
	font-weight: 700;
}

.variation-list > p,
.variation-list > .wp-block-group__inner-container > p {
	margin: 0;
}

.site-main p.button {
	min-height: 0;
	padding: 0;
	background: transparent;
	clip-path: none;
}

.feature-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 30px;
	margin-top: 32px;
}

.feature {
	padding: 24px 0;
	border-top: 1px solid var(--line);
}

.site-footer {
	padding: 30px 0;
	border-top: 1px solid var(--line);
}

.scroll-top {
	position: fixed;
	z-index: 10;
	right: 24px;
	bottom: 24px;
	width: 48px;
	height: 48px;
	display: grid;
	place-items: center;
	border: 0;
	background: var(--coral);
	color: var(--white);
	clip-path: var(--angle);
	cursor: pointer;
	transition: background-color 160ms ease, transform 160ms ease;
}

.scroll-top:hover {
	transform: translateY(-2px);
	background: var(--ink);
}

.scroll-top[hidden] {
	display: none;
}

.scroll-top svg {
	width: 22px;
	height: 22px;
	fill: none;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 2;
}

.footer-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}

.footer-inner p {
	margin: 0;
	color: var(--muted);
	font-size: 12px;
}

.footer-links {
	display: flex;
	gap: 20px;
	font-size: 13px;
}

@keyframes rise-in {
	from { opacity: 0; transform: translateY(12px); }
	to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 800px) {
	.hero {
		padding: 55px 0 65px;
	}

	.hero-grid,
	.sound-intro {
		grid-template-columns: 1fr;
		gap: 38px;
	}

	.hero h1 {
		font-size: 56px;
	}

	.editor-styles-wrapper .hero h1 {
		font-size: 56px;
	}

	.product-preview {
		min-height: 370px;
	}

	.principles,
	.noise-grid,
	.screenshot-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.principles {
		grid-template-columns: 1fr;
	}

	.contact-layout {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	.store-callout {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 560px) {
	.header-inner,
	.footer-inner,
	.container {
		width: min(100% - 32px, 1180px);
	}

	.header-inner {
		min-height: 74px;
		align-items: flex-start;
		flex-direction: column;
		justify-content: center;
		gap: 9px;
	}

	.primary-nav {
		width: 100%;
		justify-content: space-between;
		gap: 10px;
	}

	.primary-nav a {
		font-size: 12px;
	}

	.primary-nav .nav-cta {
		padding: 7px 10px;
	}

	.hero h1,
	.page-heading {
		font-size: 44px;
	}

	.editor-styles-wrapper :is(.hero h1, .page-heading) {
		font-size: 44px;
	}

	.hero-copy,
	.page-lede {
		font-size: 16px;
	}

	.product-preview {
		min-height: 330px;
		padding: 22px;
	}

	.preview-card {
		padding: 19px;
	}

	.section {
		padding: 58px 0;
	}

	.section-heading {
		font-size: 36px;
	}

	.editor-styles-wrapper .section-heading {
		font-size: 36px;
	}

	.product-band {
		grid-template-columns: 1fr;
		padding: 27px 22px;
	}

	.product-band h2 {
		font-size: 30px;
	}

	.page-hero {
		padding: 52px 0 38px;
	}

	.form-row,
	.feature-grid {
		grid-template-columns: 1fr;
	}

	.noise-grid,
	.screenshot-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.footer-inner {
		align-items: flex-start;
		flex-direction: column;
	}

	.scroll-top {
		right: 16px;
		bottom: 16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}