/* DrinkTick — shared stylesheet
   Brand blue #208AEF is sampled from the app's splash colour and the marketing
   screenshots' background, so phone crops sit on .phone-card seamlessly. */

:root {
	--brand: #208aef;
	--brand-ink: #1a72c7;
	--brand-soft: #e8f2fe;

	--ink: #0d2440;
	--body: #465a73;
	--muted: #75879e;

	--bg: #ffffff;
	--surface: #f5f8fc;
	--line: #e3eaf3;

	--radius: 18px;
	--radius-lg: 28px;
	--shadow: 0 1px 2px rgba(13, 36, 64, 0.04), 0 8px 24px rgba(13, 36, 64, 0.06);
	--shadow-lg: 0 24px 60px rgba(13, 36, 64, 0.12);

	--wrap: 1120px;
	--font: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto,
		"Helvetica Neue", Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
	:root {
		--brand: #3d9bf5;
		--brand-ink: #62b0f8;
		--brand-soft: #12283f;

		--ink: #eaf1fa;
		--body: #a8bbd2;
		--muted: #7e93ad;

		--bg: #0a1220;
		--surface: #101c2e;
		--line: #1e3048;

		--shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.25);
		--shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.45);
	}
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

body {
	margin: 0;
	font-family: var(--font);
	background: var(--bg);
	color: var(--body);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
	color: var(--ink);
	line-height: 1.15;
	letter-spacing: -0.02em;
	margin: 0 0 0.5em;
	font-weight: 800;
}

p {
	margin: 0 0 1em;
}

a {
	color: var(--brand);
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

:focus-visible {
	outline: 3px solid var(--brand);
	outline-offset: 3px;
	border-radius: 6px;
}

.wrap {
	max-width: var(--wrap);
	margin: 0 auto;
	padding: 0 24px;
}

.skip {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--brand);
	color: #fff;
	padding: 12px 20px;
	z-index: 100;
	border-radius: 0 0 12px 0;
}

.skip:focus {
	left: 0;
}

/* ── Header ─────────────────────────────────────────────── */
.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: color-mix(in srgb, var(--bg) 85%, transparent);
	backdrop-filter: saturate(180%) blur(14px);
	border-bottom: 1px solid var(--line);
}

.site-header .wrap {
	display: flex;
	align-items: center;
	gap: 20px;
	height: 68px;
}

.logo {
	display: flex;
	align-items: center;
	gap: 10px;
	font-weight: 800;
	font-size: 19px;
	color: var(--ink);
	letter-spacing: -0.03em;
	margin-right: auto;
}

.logo:hover {
	text-decoration: none;
}

.logo svg {
	width: 32px;
	height: 32px;
	flex: none;
}

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

.nav a {
	color: var(--body);
	font-weight: 600;
	font-size: 15px;
}

.nav a:hover {
	color: var(--brand);
	text-decoration: none;
}

@media (max-width: 780px) {
	.nav {
		display: none;
	}
}

/* The header CTA sits beside the wordmark on one line. At narrow widths the full
   "Get it on Google Play" label pushes the row past the viewport, which widens the
   whole page and clips every section — so swap in a shorter label instead. */
.cta-short {
	display: none;
}

@media (max-width: 560px) {
	.cta-long {
		display: none;
	}
	.cta-short {
		display: inline;
	}
	.site-header .wrap {
		gap: 12px;
		padding: 0 16px;
	}
	.site-header .btn {
		padding: 11px 16px;
		font-size: 14px;
	}
	.logo {
		font-size: 17px;
	}
}

/* ── Buttons ────────────────────────────────────────────── */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 13px 22px;
	border-radius: 999px;
	font-weight: 700;
	font-size: 15px;
	border: 1px solid transparent;
	cursor: pointer;
	transition: transform 0.15s ease, box-shadow 0.15s ease,
		background-color 0.15s ease;
	white-space: nowrap;
}

.btn:hover {
	text-decoration: none;
	transform: translateY(-1px);
}

.btn svg {
	width: 18px;
	height: 18px;
	flex: none;
}

.btn-primary {
	background: var(--brand);
	color: #fff;
	box-shadow: 0 8px 20px rgba(32, 138, 239, 0.28);
}

.btn-primary:hover {
	background: var(--brand-ink);
}

.btn-ghost {
	background: transparent;
	color: var(--ink);
	border-color: var(--line);
}

.btn-ghost:hover {
	border-color: var(--brand);
	color: var(--brand);
}

.btn-onblue {
	background: #fff;
	color: #0d2440;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.16);
}

.btn-onblue:hover {
	background: #f2f7ff;
}

.btn-lg {
	padding: 16px 28px;
	font-size: 16px;
}

/* ── Hero ───────────────────────────────────────────────── */
.hero {
	padding: 76px 0 40px;
	overflow: hidden;
}

.hero-grid {
	display: grid;
	grid-template-columns: 1fr 420px;
	gap: 56px;
	align-items: center;
}

.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--brand-soft);
	color: var(--brand);
	font-weight: 700;
	font-size: 13px;
	padding: 7px 14px;
	border-radius: 999px;
	letter-spacing: 0.01em;
	margin-bottom: 22px;
}

.eyebrow svg {
	width: 15px;
	height: 15px;
}

.hero h1 {
	font-size: clamp(2.4rem, 5.2vw, 3.6rem);
	margin-bottom: 20px;
}

.hero h1 .accent {
	color: var(--brand);
	display: block;
}

.hero-sub {
	font-size: 1.16rem;
	max-width: 30em;
	margin-bottom: 30px;
}

.hero-cta {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	margin-bottom: 22px;
}

.hero-note {
	font-size: 0.86rem;
	color: var(--muted);
	margin: 0;
}

/* Phone crops carry a #208AEF background, so the card colour must match it
   exactly — any drift shows as a halo around the bezel corners. */
.phone-card {
	background: #208aef;
	border-radius: var(--radius-lg);
	padding: 30px 30px 0;
	box-shadow: var(--shadow-lg);
	overflow: hidden;
	display: flex;
	justify-content: center;
}

.phone-card img {
	width: 100%;
	max-width: 300px;
	margin-bottom: -2px;
}

@media (max-width: 900px) {
	.hero {
		padding-top: 48px;
	}
	.hero-grid {
		grid-template-columns: 1fr;
		gap: 40px;
	}
	.hero-visual {
		max-width: 340px;
		margin: 0 auto;
	}
}

/* ── Trust strip ────────────────────────────────────────── */
.trust {
	padding: 28px 0 8px;
}

.trust-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	padding: 28px;
}

.trust-item {
	display: flex;
	gap: 14px;
	align-items: flex-start;
}

.trust-item svg {
	width: 22px;
	height: 22px;
	color: var(--brand);
	flex: none;
	margin-top: 3px;
}

.trust-item strong {
	display: block;
	color: var(--ink);
	font-size: 15px;
	margin-bottom: 2px;
}

.trust-item span {
	font-size: 14px;
	color: var(--muted);
	line-height: 1.5;
}

@media (max-width: 780px) {
	.trust-grid {
		grid-template-columns: 1fr;
		padding: 22px;
	}
}

/* ── Sections ───────────────────────────────────────────── */
.section {
	padding: 88px 0;
}

.section-head {
	max-width: 40em;
	margin: 0 auto 56px;
	text-align: center;
}

.section-head h2 {
	font-size: clamp(1.9rem, 3.6vw, 2.6rem);
}

.section-head p {
	font-size: 1.08rem;
	margin: 0;
}

.section-alt {
	background: var(--surface);
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
}

/* ── Feature rows ───────────────────────────────────────── */
.feature {
	display: grid;
	grid-template-columns: 1fr 400px;
	gap: 64px;
	align-items: center;
	margin-bottom: 88px;
}

.feature:last-child {
	margin-bottom: 0;
}

/* Zig-zag the phone from side to side. Counted within .features so the rows keep
   alternating regardless of what else sits in the section. */
.features .feature:nth-child(odd) .feature-media {
	order: -1;
}

.feature h3 {
	font-size: clamp(1.5rem, 2.6vw, 2rem);
	margin-bottom: 14px;
}

.feature p {
	font-size: 1.05rem;
}

/* Marks a feature the free tier doesn't get. Mirrors the app's own PRO/crown
   language — if a claim here isn't true on the free plan, it needs one of these. */
.pro-tag {
	display: inline-block;
	vertical-align: middle;
	background: var(--brand);
	color: #fff;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 3px 9px;
	border-radius: 999px;
	margin-left: 9px;
	position: relative;
	top: -2px;
	white-space: nowrap;
}

.feature-list {
	list-style: none;
	padding: 0;
	margin: 22px 0 0;
	display: grid;
	gap: 10px;
}

.feature-list .pro-tag {
	font-size: 10px;
	padding: 2px 7px;
	margin-left: 6px;
	top: -1px;
}

.feature-list li {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	font-size: 0.98rem;
}

.feature-list svg {
	width: 19px;
	height: 19px;
	color: var(--brand);
	flex: none;
	margin-top: 4px;
}

@media (max-width: 900px) {
	.feature {
		grid-template-columns: 1fr;
		gap: 36px;
		margin-bottom: 64px;
	}
	/* Stacked: text always leads, phone follows. */
	.features .feature:nth-child(odd) .feature-media {
		order: 0;
	}
	.feature-media {
		max-width: 330px;
		margin: 0 auto;
	}
}

/* ── Pro / pricing ──────────────────────────────────────── */
.pro-features {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
	margin-bottom: 64px;
}

.pro-card {
	background: var(--bg);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 26px;
	box-shadow: var(--shadow);
}

.pro-card .icon {
	width: 44px;
	height: 44px;
	border-radius: 13px;
	background: var(--brand-soft);
	color: var(--brand);
	display: grid;
	place-items: center;
	margin-bottom: 16px;
}

.pro-card .icon svg {
	width: 22px;
	height: 22px;
}

.pro-card h3 {
	font-size: 1.08rem;
	margin-bottom: 6px;
	font-weight: 700;
}

.pro-card p {
	margin: 0;
	font-size: 0.94rem;
	color: var(--muted);
	line-height: 1.55;
}

@media (max-width: 900px) {
	.pro-features {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 620px) {
	.pro-features {
		grid-template-columns: 1fr;
	}
}

.plans {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
	max-width: 880px;
	margin: 0 auto;
	align-items: start;
}

.plan {
	background: var(--bg);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	padding: 30px 26px;
	text-align: center;
	position: relative;
	box-shadow: var(--shadow);
}

.plan-featured {
	border-color: var(--brand);
	border-width: 2px;
	box-shadow: 0 16px 44px rgba(32, 138, 239, 0.18);
}

.plan-badge {
	position: absolute;
	top: -12px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--brand);
	color: #fff;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.09em;
	padding: 5px 14px;
	border-radius: 999px;
	white-space: nowrap;
}

.plan h3 {
	font-size: 1.02rem;
	font-weight: 700;
	margin-bottom: 12px;
	color: var(--muted);
	text-transform: uppercase;
	letter-spacing: 0.07em;
}

.plan .price {
	font-size: 2.5rem;
	font-weight: 800;
	color: var(--ink);
	letter-spacing: -0.03em;
	line-height: 1.1;
}

.plan .period {
	font-size: 0.95rem;
	color: var(--muted);
	font-weight: 600;
}

.plan .plan-note {
	font-size: 0.88rem;
	color: var(--muted);
	margin: 10px 0 0;
}

.price-disclaimer {
	text-align: center;
	font-size: 0.86rem;
	color: var(--muted);
	margin: 30px auto 0;
	max-width: 40em;
}

@media (max-width: 780px) {
	.plans {
		grid-template-columns: 1fr;
		max-width: 400px;
	}
}

/* ── FAQ ────────────────────────────────────────────────── */
.faq {
	max-width: 780px;
	margin: 0 auto;
}

.faq details {
	background: var(--bg);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	margin-bottom: 12px;
	overflow: hidden;
}

.faq summary {
	padding: 20px 24px;
	font-weight: 700;
	color: var(--ink);
	cursor: pointer;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	font-size: 1.02rem;
}

.faq summary::-webkit-details-marker {
	display: none;
}

.faq summary::after {
	content: "+";
	font-size: 1.5rem;
	font-weight: 400;
	color: var(--brand);
	flex: none;
	line-height: 1;
	transition: transform 0.2s ease;
}

.faq details[open] summary::after {
	transform: rotate(45deg);
}

.faq .faq-body {
	padding: 0 24px 20px;
}

.faq .faq-body p:last-child {
	margin-bottom: 0;
}

/* ── CTA band ───────────────────────────────────────────── */
.cta-band {
	background: linear-gradient(135deg, #208aef 0%, #1668bd 100%);
	border-radius: var(--radius-lg);
	padding: 68px 40px;
	text-align: center;
	color: #fff;
	box-shadow: var(--shadow-lg);
}

.cta-band h2 {
	color: #fff;
	font-size: clamp(1.8rem, 3.4vw, 2.5rem);
	margin-bottom: 14px;
}

.cta-band p {
	color: rgba(255, 255, 255, 0.9);
	font-size: 1.1rem;
	max-width: 32em;
	margin: 0 auto 30px;
}

/* ── Footer ─────────────────────────────────────────────── */
.site-footer {
	border-top: 1px solid var(--line);
	padding: 52px 0 40px;
	margin-top: 88px;
}

.footer-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 28px;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 36px;
}

.footer-tagline {
	font-size: 0.94rem;
	color: var(--muted);
	max-width: 24em;
	margin: 12px 0 0;
}

.footer-links {
	display: flex;
	gap: 40px;
	flex-wrap: wrap;
}

.footer-col h4 {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.09em;
	color: var(--muted);
	margin-bottom: 12px;
	font-weight: 700;
}

.footer-col ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 9px;
}

.footer-col a {
	color: var(--body);
	font-size: 0.94rem;
}

.footer-col a:hover {
	color: var(--brand);
}

.footer-bottom {
	border-top: 1px solid var(--line);
	padding-top: 26px;
	display: flex;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	font-size: 0.88rem;
	color: var(--muted);
}

.footer-bottom p {
	margin: 0;
}

/* ── Legal pages ────────────────────────────────────────── */
.legal {
	max-width: 760px;
	margin: 0 auto;
	padding: 64px 24px 0;
}

.legal-head {
	border-bottom: 1px solid var(--line);
	padding-bottom: 32px;
	margin-bottom: 40px;
}

.legal-head h1 {
	font-size: clamp(2.1rem, 4.5vw, 2.9rem);
	margin-bottom: 12px;
}

.legal-meta {
	font-size: 0.9rem;
	color: var(--muted);
	margin: 0;
}

.legal-summary {
	background: var(--brand-soft);
	border: 1px solid color-mix(in srgb, var(--brand) 22%, transparent);
	border-radius: var(--radius);
	padding: 24px 26px;
	margin-bottom: 44px;
}

.legal-summary h2 {
	font-size: 1.05rem;
	margin-bottom: 10px;
	display: flex;
	align-items: center;
	gap: 9px;
}

.legal-summary h2 svg {
	width: 19px;
	height: 19px;
	color: var(--brand);
	flex: none;
}

.legal-summary p:last-child {
	margin-bottom: 0;
}

.legal h2 {
	font-size: 1.35rem;
	margin-top: 48px;
	margin-bottom: 14px;
	scroll-margin-top: 88px;
}

.legal h3 {
	font-size: 1.06rem;
	margin-top: 30px;
	margin-bottom: 8px;
	font-weight: 700;
}

.legal ul {
	padding-left: 22px;
	margin: 0 0 1em;
}

.legal li {
	margin-bottom: 8px;
}

.legal table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 1.4em;
	font-size: 0.94rem;
}

.legal th,
.legal td {
	border: 1px solid var(--line);
	padding: 11px 14px;
	text-align: left;
	vertical-align: top;
}

.legal th {
	background: var(--surface);
	color: var(--ink);
	font-weight: 700;
}

.legal-scroll {
	overflow-x: auto;
}

.callout {
	border-left: 3px solid var(--brand);
	background: var(--surface);
	padding: 18px 22px;
	border-radius: 0 var(--radius) var(--radius) 0;
	margin: 0 0 1.4em;
}

.callout p:last-child {
	margin-bottom: 0;
}

.legal-toc {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 22px 26px;
	margin-bottom: 44px;
}

.legal-toc h2 {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.09em;
	color: var(--muted);
	margin: 0 0 12px;
}

.legal-toc ol {
	margin: 0;
	padding-left: 20px;
	columns: 2;
	gap: 24px;
}

.legal-toc li {
	margin-bottom: 7px;
	break-inside: avoid;
}

@media (max-width: 620px) {
	.legal-toc ol {
		columns: 1;
	}
}

/* ── 404 ────────────────────────────────────────────────── */
.notfound {
	min-height: 62vh;
	display: grid;
	place-items: center;
	text-align: center;
	padding: 80px 24px;
}

.notfound .code {
	font-size: 4.5rem;
	font-weight: 800;
	color: var(--brand);
	line-height: 1;
	margin-bottom: 10px;
	letter-spacing: -0.04em;
}