/* Shared landing-page styles for why-extra, clean-up-gmail,
   gmail-ai-assistant, ai-email-organizer, and get — served as one cacheable
   file and linked from each page's <head>. Page-specific rules live in each
   page's small inline <style> block, not here. */

/* Display face for headings, mirroring src/features/legal/legal.css. */
@font-face {
	font-family: "ES Rebond";
	src: url("/framer-assets/fonts/QUecpWp8V2fMxLOCOTwkfc2vk.woff2")
		format("woff2");
	font-weight: 600;
	font-display: swap;
}

:root {
	/* Brand palette pulled from extra.email + the App Store listing. */
	--purple: #8c49ff;
	--purple-press: #4800c3;
	--ink: #161617;
	--muted: #6b6870;
	--line: #ededf0;
	--surface: #ffffff;
	/* Warm brand wash + pastel category accents (shopping / travel /
	   finance / family), mirroring the homepage's category tiles. */
	--coral: #f99ea0;
	--peach: #ffcc92;
	--mint: #b9f0d7;
	--lilac: #ecc9ff;
	--font: "InterVariable", "Inter", -apple-system, BlinkMacSystemFont, system-ui,
		"Segoe UI", sans-serif;
}

* {
	box-sizing: border-box;
	-webkit-tap-highlight-color: transparent;
}

html,
body {
	margin: 0;
	padding: 0;
}

body {
	font-family: var(--font);
	font-feature-settings: "cv11", "ss01";
	color: var(--ink);
	background: var(--surface);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	line-height: 1.5;
	/* Warm ambient brand wash confined to the top band, fading to white. */
	background-image: linear-gradient(
		180deg,
		#fff3ec 0%,
		#fbeaf3 46%,
		#ffffff 100%
	);
	background-repeat: no-repeat;
	background-size: 100% 720px;
}

a {
	color: inherit;
}

/* Headings use the ES Rebond display face (weight 600 is the only cut
   loaded), matching the site's owned pages. */
h1,
h2,
.feature h3 {
	font-family: "ES Rebond", var(--font);
	font-weight: 600;
	letter-spacing: -0.025em;
}

.wrap {
	max-width: 1040px;
	margin: 0 auto;
	padding: 22px 22px 56px;
}

/* Shared site nav, mirrors src/features/legal/legal.css (.legal-nav). */
.site-nav {
	position: sticky;
	top: 0;
	z-index: 10;
	background: rgba(255, 255, 255, 0.85);
	backdrop-filter: saturate(1.5) blur(16px);
	-webkit-backdrop-filter: saturate(1.5) blur(16px);
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
	transition: transform 0.3s ease;
	will-change: transform;
}

/* Slide the sticky nav out of view when scrolling down; JS toggles
   this and removes it again on scroll up / near the top. */
.site-nav.nav-hidden {
	transform: translateY(-100%);
}

.site-nav-inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 16px 32px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.site-nav-logo {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	text-decoration: none;
}

.site-nav-logo img {
	height: 28px;
	width: auto;
	display: block;
}

/* Brand lockup mirroring the main extra.email nav: Extra + muted
   "by BuildForever" company attribution. */
.site-nav-wordmark {
	font-family: "ES Rebond", var(--font);
	font-weight: 600;
	font-size: 18px;
	letter-spacing: -0.02em;
	line-height: 1;
	color: var(--ink);
	white-space: nowrap;
}

.site-nav-wordmark span {
	font-weight: 500;
	color: var(--muted);
}

/* Nav "Get the app" pill: the primary tracked download CTA in the nav
   for cold paid traffic. Purple to match the hero .cta. On mobile this
   replaces the sign-in pill (which moves to desktop-only + the footer). */
.site-nav-getapp {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 18px;
	border-radius: 999px;
	font-size: 15px;
	font-weight: 600;
	color: #fff;
	background: var(--purple);
	text-decoration: none;
	white-space: nowrap;
	box-shadow: 0 8px 20px rgb(140 73 255 / 28%);
	transition: transform 0.12s ease, background 0.12s ease;
}

.site-nav-getapp:active {
	transform: scale(0.985);
	background: var(--purple-press);
}

.site-nav-actions {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

/* Sign-in demoted to a quiet desktop-only text link beside the nav CTA.
   Hidden on mobile (paid traffic is cold — don't imply invite gating). */
.site-nav-signin-link {
	display: none;
	font-size: 14px;
	font-weight: 600;
	color: var(--muted);
	text-decoration: none;
	white-space: nowrap;
}

.site-nav-signin-link:hover {
	color: var(--ink);
}

/* Closing conversion band: a soft brand-wash panel that repeats the
   install + web choices once the page has made its case. Shown on
   all breakpoints; mobile keeps the App Store CTA as the only
   button, matching the hero. */
.cta-band {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	margin: 72px 0 0;
	padding: 44px 22px 38px;
	text-align: center;
	border-radius: 28px;
	border: 1px solid rgba(22, 22, 23, 0.06);
	background: linear-gradient(160deg, #fff3ec 0%, #fbeaf3 56%, #f4ecff 100%);
	box-shadow: 0 18px 44px rgb(60 20 110 / 8%);
}

.cta-band h2 {
	margin: 0;
}

.cta-band .cta-sub {
	margin: -4px 0 6px;
	font-size: 16px;
	color: var(--muted);
	max-width: 44ch;
}

.cta-band .cta-row {
	justify-content: center;
}

.cta-band .cta-note {
	margin: 0;
}

/* Sticky mobile download bar: appears after the user scrolls past the
   hero CTA, giving a persistent one-tap App Store handoff. Respects the
   home-indicator safe area (viewport-fit=cover is set). Desktop hides it. */
.sticky-cta {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 20;
	padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
	background: rgba(255, 255, 255, 0.9);
	backdrop-filter: saturate(1.6) blur(18px);
	-webkit-backdrop-filter: saturate(1.6) blur(18px);
	border-top: 1px solid rgba(0, 0, 0, 0.08);
	box-shadow: 0 -8px 30px rgb(60 20 110 / 10%);
	transform: translateY(140%);
	/* visibility keeps the concealed bar (and its focusable link) out of
	   the tab order / a11y tree, matching aria-hidden. The 0.28s delay
	   lets the slide-out finish before it hides. */
	visibility: hidden;
	transition: transform 0.28s ease, visibility 0s linear 0.28s;
	will-change: transform;
}

.sticky-cta.sticky-visible {
	transform: translateY(0);
	visibility: visible;
	transition: transform 0.28s ease, visibility 0s;
}

.sticky-cta .cta {
	display: flex;
	width: 100%;
	min-height: 52px;
}

/* Reserve room for the sticky bar (12+52+12px + border + safe area) so
   it never occludes the footer at full scroll. Reset on desktop where
   the bar is hidden. */
body {
	padding-bottom: calc(80px + env(safe-area-inset-bottom));
}

/* Hero */
.hero {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;
	align-items: center;
	margin-top: 40px;
}

/* Brand + headline on one line (wraps to two on narrow screens). */
.hero-head {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 6px 10px;
	margin: 0 0 18px;
}

.hero-head h1 {
	margin: 0;
	/* Let the headline shrink and wrap instead of overflowing the
	   copy column on narrow screens (flex items default to
	   min-width: auto). */
	min-width: 0;
}

/* Extra wordmark sitting inline before the headline. */
.hero-brand {
	display: inline-flex;
	align-items: center;
	margin: 0;
	flex: none;
}

/* Match the headline exactly so "Extra" and the tagline read as one
   headline-sized lockup. */
.hero-brand span {
	font-family: "ES Rebond", var(--font);
	font-weight: 700;
	font-size: clamp(36px, 7vw, 58px);
	line-height: 1.02;
	letter-spacing: -0.035em;
	color: var(--ink);
}

h1 {
	font-size: clamp(36px, 7vw, 58px);
	line-height: 1.02;
	letter-spacing: -0.035em;
	font-weight: 700;
	margin: 0 0 18px;
	max-width: 100%;
	overflow-wrap: break-word;
}

.lede {
	font-size: clamp(17px, 3.6vw, 20px);
	color: var(--muted);
	margin: 0 0 28px;
	max-width: 36ch;
}

.cta-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
}

.cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 54px;
	padding: 0 24px;
	border-radius: 999px;
	background: var(--purple);
	color: #fff;
	font-size: 16.5px;
	font-weight: 600;
	text-decoration: none;
	border: none;
	cursor: pointer;
	box-shadow: 0 12px 30px rgb(140 73 255 / 30%);
	transition: transform 0.12s ease, background 0.12s ease;
}

.cta:active {
	transform: scale(0.985);
	background: var(--purple-press);
}

.cta.secondary {
	background: #fff;
	color: var(--ink);
	border: 1px solid var(--line);
	box-shadow: 0 12px 26px rgb(60 20 110 / 10%);
}

.cta.secondary:active {
	background: #f7f4fb;
}

/* Desktop pointer polish: primary actions lift subtly on hover.
   Gated on hover-capable pointers so mobile is untouched. The
   :active rules are re-asserted after :hover so the press state
   still wins while the pointer is down. */
@media (hover: hover) {
	.cta:hover,
	.site-nav-getapp:hover {
		transform: translateY(-1px);
		background: #9457ff;
	}
	.cta.secondary:hover {
		background: #fff;
		border-color: rgb(132 78 244 / 30%);
	}
	.cta:active,
	.site-nav-getapp:active {
		transform: scale(0.985);
		background: var(--purple-press);
	}
	.cta.secondary:active {
		background: #f7f4fb;
	}
}

/* Visible keyboard focus on every interactive element. */
:is(a, button):focus-visible {
	outline: 3px solid rgb(140 73 255 / 45%);
	outline-offset: 2px;
}

/* Gentle scroll-reveal: content fades and rises in as it enters the
   viewport. The .reveal class is applied by JS only when
   IntersectionObserver exists, so nothing is ever hidden without it;
   reduced-motion users get static content. */
@media (prefers-reduced-motion: no-preference) {
	.reveal {
		opacity: 0;
		transform: translateY(14px);
		transition: opacity 0.55s ease, transform 0.55s ease;
	}
	.reveal.reveal-in {
		opacity: 1;
		transform: none;
	}
}

.dlicon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: rgb(255 255 255 / 18%);
	flex: none;
}

.dlicon svg {
	width: auto;
	height: 16px;
	fill: currentColor;
}

/* App Store badge-style download CTA: larger Apple logo + two-line
   "Download on the / App Store" lockup. */
.cta.appstore {
	gap: 12px;
}
.cta.appstore .dlicon {
	width: auto;
	height: auto;
	background: none;
}
.cta.appstore .dlicon svg {
	height: 30px;
}
.appstore-lockup {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	line-height: 1;
	gap: 2px;
}
.appstore-lockup .al-top {
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.02em;
}
.appstore-lockup .al-store {
	font-size: 20px;
	font-weight: 600;
	letter-spacing: -0.01em;
}

.gicon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: #fff;
	flex: none;
}

.cta-alt {
	font-size: 15px;
	font-weight: 600;
	color: var(--purple);
	text-decoration: none;
}

.cta-note {
	margin: 16px 0 0;
	font-size: 13.5px;
	color: var(--muted);
}

/* Mobile-first: demote "Try on the web" to a plain purple text link
   under the CTA note so app install stays the single clear action
   for paid iPhone traffic. Promoted back to a button on desktop. */
.cta-weblink {
	display: inline-block;
	margin: 10px 0 0;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--purple);
	text-decoration: none;
}
.cta-weblink:hover {
	text-decoration: underline;
}
.hero-copy > .cta-note,
.hero-copy > .cta-weblink {
	display: none;
}
/* Hide the secondary "Try on the web" button on small screens; mobile
   keeps the app install CTA as the only hero action. */
.cta.web-cta {
	display: none;
}

/* Platform-adaptive CTAs (html.plat-ios / html.plat-web, set in
   <head>): iOS devices keep the App Store buttons and labels below;
   Android and desktop web swap primary actions to Continue with Google
   into the web app, with scoped desktop exceptions for scan-to-install
   App Store choices. */
.weblabel-web,
.note-web,
#web_nav {
	display: none;
}

.plat-web .cta.appstore,
.plat-web #download_nav,
.plat-web .site-nav-signin-link,
.plat-web .weblabel-ios,
.plat-web .note-ios {
	display: none;
}

.plat-web .cta.web-cta,
.plat-web #web_nav {
	display: inline-flex;
}

.plat-web .weblabel-web,
.plat-web .note-web {
	display: inline;
}

/* Desktop scan-to-install QR: on plat-web desktops, it sits in the
   hero CTA row next to the Google and App Store buttons. Rendered
   from the same tracked App Store campaign URL as download_hero. */
.qr-row {
	display: none;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	padding: 6px;
	border: 1px solid rgba(22, 22, 23, 0.1);
	border-radius: 16px;
	background: rgb(255 255 255 / 86%);
	box-shadow: 0 12px 24px rgb(60 20 110 / 10%);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}

.qr-row .qr-code {
	width: 52px;
	height: 52px;
	flex: none;
	padding: 3px;
	border-radius: 9px;
	background: #fff;
}

.qr-row .qr-code svg {
	width: 100%;
	height: 100%;
	display: block;
}

.qr-row .qr-code path {
	fill: #18121f;
}

/* Compact credibility cards for mobile: small icon-led proof items
   replace the taller desktop 2×2 grid above the fold. */
.credibility-strip {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
	margin-top: 18px;
}
.credibility-chip {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
	min-height: 48px;
	padding: 7px 8px;
	border: 1px solid rgba(22, 22, 23, 0.08);
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.68);
	text-decoration: none;
	box-shadow: 0 10px 22px rgb(60 20 110 / 7%);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}
.credibility-chip:hover {
	border-color: rgb(132 78 244 / 24%);
}
.credibility-chip-icon {
	width: 24px;
	height: 24px;
	border-radius: 6px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	overflow: hidden;
	background: #fff;
	box-shadow: inset 0 0 0 1px rgb(22 22 23 / 8%);
	color: var(--ink);
	font-size: 15px;
	line-height: 1;
}
.credibility-chip-icon.logo-wide {
	width: 34px;
	padding: 2px;
}
.credibility-chip-icon img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
}
.credibility-chip-icon.logo-wide img {
	object-fit: contain;
}
.credibility-chip-copy {
	min-width: 0;
}
.credibility-chip-copy strong {
	display: block;
	font-size: 12px;
	line-height: 1.08;
	color: var(--ink);
}
.credibility-chip-copy span {
	display: block;
	margin-top: 2px;
	font-size: 10.5px;
	line-height: 1.12;
	color: var(--muted);
}
.credibility-strip-sep {
	display: none;
}

/* The 2×2 credibility card grid is desktop-only; mobile uses the
   compact strip above. */
.credibility-row {
	display: none;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	margin-top: 22px;
	max-width: 100%;
}

.credibility-item {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 74px;
	padding: 12px 14px;
	border: 1px solid rgba(22, 22, 23, 0.08);
	border-radius: 18px;
	background: rgba(255, 255, 255, 0.72);
	text-decoration: none;
	box-shadow: 0 12px 28px rgb(60 20 110 / 8%);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}

.credibility-thumb {
	width: 44px;
	height: 44px;
	border-radius: 13px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	font-size: 15px;
	font-weight: 800;
	letter-spacing: -0.03em;
	color: #fff;
	background: var(--ink);
	box-shadow: inset 0 0 0 1px rgb(255 255 255 / 18%);
	overflow: hidden;
}

.credibility-thumb img {
	width: 100%;
	height: 100%;
	display: block;
	border-radius: inherit;
	object-fit: cover;
}

.credibility-thumb.emoji {
	background: #fff;
	font-size: 28px;
	line-height: 1;
}

.credibility-copy {
	min-width: 0;
}

.credibility-item strong {
	display: block;
	font-size: 19px;
	line-height: 1.08;
	letter-spacing: -0.01em;
	color: var(--ink);
}

.credibility-copy span {
	display: block;
	margin-top: 5px;
	font-size: 12.5px;
	line-height: 1.25;
	color: var(--muted);
}

.hero-media {
	position: relative;
}

.hero-copy,
.hero-media {
	min-width: 0;
}

.hero-media {
	display: flex;
	justify-content: center;
	/* Mobile-first: crop the hero screenshot to a fold peek so its
	   top edge lands just at the fold as a scroll cue rather than
	   pushing the whole shot below the first screen. Desktop clears
	   this cap and shows the full image. */
	max-height: 320px;
	overflow: hidden;
	margin-top: 8px;
	border-radius: 32px 32px 0 0;
	-webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
	mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
}

.hero-img {
	width: auto;
	max-width: 100%;
	max-height: 560px;
	height: auto;
	display: block;
	border-radius: 32px;
	border: 0;
	box-shadow: none;
	background: transparent;
	align-self: flex-start;
}

/* Category pills, echo the App Store "smart categories" framing. */
.pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 26px 0 0;
}

.pill {
	font-size: 13.5px;
	font-weight: 600;
	padding: 7px 14px;
	border-radius: 999px;
	border: 1px solid var(--line);
	background: #fff;
}

.pill.shop {
	background: #fff4ea;
	border-color: #ffe1c4;
}
.pill.travel {
	background: #eefaf3;
	border-color: #cdedda;
}
.pill.finance {
	background: #f4ecff;
	border-color: #e4d4ff;
}
.pill.family {
	background: #fdecf2;
	border-color: #f7cfdd;
}

/* Sections */
.section-head {
	margin: 92px 0 28px;
	max-width: 30ch;
}

h2 {
	font-size: clamp(26px, 5vw, 36px);
	letter-spacing: -0.03em;
	line-height: 1.08;
	font-weight: 700;
	margin: 0 0 12px;
}

.section-head p {
	font-size: 17px;
	color: var(--muted);
	margin: 0;
}

.features {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
}

.feature {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 22px;
	padding: 24px;
	box-shadow: 0 1px 0 rgb(20 0 50 / 3%);
}

.tile {
	width: 40px;
	height: 40px;
	border-radius: 12px;
	margin-bottom: 16px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--purple);
	background: #f1e8ff;
	border: 1px solid #e4d4ff;
}

.tile svg {
	width: 21px;
	height: 21px;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	fill: none;
}

.feature-title {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 12px;
}

.feature-title .tile {
	width: 36px;
	height: 36px;
	border-radius: 11px;
	margin-bottom: 0;
	flex: none;
}

.feature .feature-title h3 {
	margin: 0;
}

.feature h3 {
	margin: 0 0 6px;
	font-size: 18px;
	font-weight: 650;
	letter-spacing: -0.01em;
}

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

/* Features paired with current Today card exports. On desktop the
   content boxes sit beside a scaled-down one-column card stack. */
.feature-split {
	display: grid;
	grid-template-columns: 1fr;
	gap: 36px;
	align-items: start;
	margin-top: 56px;
}

.feature-shots {
	display: grid;
	grid-template-columns: 1fr;
	gap: 10px;
	align-items: start;
	max-width: 300px;
	margin: 4px auto 0;
}

.feature-shots img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 22px;
	border: 0;
	box-shadow: none;
	background: transparent;
}

.cleanup-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: 28px;
	align-items: start;
}

.cleanup-testimonials {
	margin-top: 10px;
}

.cleanup-testimonials .section-head {
	margin: 0 0 18px;
	max-width: none;
}

.cleanup-testimonials h2 {
	font-size: clamp(24px, 4vw, 30px);
}

.cleanup-testimonials .quotes {
	gap: 12px;
}

.cleanup-testimonials .quote {
	padding: 18px;
}

.cleanup-testimonials .stars {
	margin-bottom: 10px;
}

.cleanup-testimonials .quote blockquote {
	font-size: 14.5px;
	line-height: 1.45;
}

.cleanup-feed {
	display: grid;
	grid-template-columns: 1fr;
	gap: 8px;
	align-items: start;
	width: min(100%, 300px);
	margin: 0 auto;
}

.cleanup-feed img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 22px;
}

.assistant-shots {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
	margin: 28px auto 0;
	max-width: 360px;
}

.assistant-shots img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 30px;
	box-shadow: 0 22px 58px rgb(60 20 110 / 12%);
}

.assistant {
	margin-top: 32px;
}

.assistant-life {
	margin-top: 44px;
}

.assistant-life .section-head {
	margin: 0 0 18px;
	max-width: none;
}

.assistant-life .pills {
	margin-top: 0;
}

.category-feed-showcase {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
	justify-items: center;
	margin-top: 34px;
}

.category-feed-showcase img {
	width: min(100%, 260px);
	height: 520px;
	display: block;
	border-radius: 30px;
	object-fit: cover;
	object-position: top center;
}

/* Testimonials: real, verifiable App Store reviews. Shown as visible
   content only; intentionally NOT marked up as Review/AggregateRating
   JSON-LD, since self-serving first-party review markup is ineligible
   for star rich results and risks a Google manual action. */
.quotes {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
}

.quote {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 22px;
	padding: 24px;
	box-shadow: 0 1px 0 rgb(20 0 50 / 3%);
	display: flex;
	flex-direction: column;
}

.stars {
	color: #ffb020;
	font-size: 15px;
	letter-spacing: 2px;
	margin-bottom: 14px;
}

.quote blockquote {
	margin: 0 0 16px;
	font-size: 16px;
	line-height: 1.5;
	color: var(--ink);
}

.quote figcaption {
	margin-top: auto;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--ink);
}

.quote figcaption span {
	font-weight: 400;
	color: var(--muted);
}

/* Shared site footer, mirrors src/features/legal/legal.css. */
.site-footer {
	margin-top: 72px;
	background: #0b0b1c;
	color: rgba(255, 255, 255, 0.8);
}

.site-footer-inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 64px 32px 48px;
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 48px;
}

.site-footer-brand img {
	height: 32px;
	width: 32px;
	opacity: 0.9;
}

.site-footer-columns {
	display: grid;
	grid-template-columns: repeat(4, minmax(110px, auto));
	gap: 40px;
}

.site-footer-columns h4 {
	font-family: var(--font);
	font-size: 13px;
	font-weight: 400;
	color: rgba(255, 255, 255, 0.4);
	margin: 0 0 12px;
}

.site-footer-columns a {
	display: block;
	font-size: 13px;
	color: rgba(255, 255, 255, 0.8);
	text-decoration: none;
	margin-bottom: 6px;
}

.site-footer-columns a:hover {
	color: #fff;
}

.site-footer-copyright {
	grid-column: 1 / -1;
	padding-top: 32px;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	font-size: 12px;
	color: rgba(255, 255, 255, 0.4);
}

@media (max-width: 720px) {
	.site-nav-inner {
		padding: 14px 20px;
	}
	/* Keep the mobile nav compact: show just the Extra wordmark so the
	   lockup and the sign-in pill each stay on one line. The full
	   "by BuildForever" attribution remains on wider screens + footer. */
	.site-nav-wordmark span {
		display: none;
	}
	.site-footer-inner {
		grid-template-columns: 1fr;
		gap: 32px;
		padding: 48px 20px 32px;
	}
	.site-footer-columns {
		grid-template-columns: repeat(2, 1fr);
		gap: 24px;
	}
	/* Tighten section rhythm on mobile: the 92px section-head margin
	   (plus feature-split's extra 56px) left too much empty space above
	   sections like "Stay ahead without living in your inbox". The nested
	   testimonial / assistant-life sub-heads keep their flush spacing via
	   higher specificity. */
	.section-head {
		margin-top: 56px;
	}
	.feature-split {
		margin-top: 0;
	}
	/* One thumb-sized action: hero and closer download buttons go
	   full-width on phones, matching the sticky bar. */
	.cta-row {
		width: 100%;
	}
	.cta-row .cta {
		flex: 1 1 100%;
	}
}

/* At tablet/desktop widths the sticky bottom bar is unnecessary (the
   nav CTA + mid-page CTAs stay in view), and sign-in returns as a
   quiet text link beside the nav "Get the app" button. */
@media (min-width: 720px) {
	.sticky-cta {
		display: none;
	}
	body {
		padding-bottom: 0;
	}
	.site-nav-signin-link {
		display: inline-flex;
	}
	.cta-band .cta.web-cta {
		display: inline-flex;
	}
}

/* Desktop */
@media (min-width: 900px) {
	.hero {
		grid-template-columns: minmax(0, 1fr) minmax(220px, 260px);
		gap: 44px;
		margin-top: 56px;
	}
	.hero-copy {
		order: 1;
	}
	.hero-media {
		order: 2;
		justify-content: flex-start;
		/* Clear the mobile fold-peek crop: show the full screenshot in
		   the side column. */
		max-height: none;
		overflow: visible;
		margin-top: 0;
		border-radius: 0;
		-webkit-mask-image: none;
		mask-image: none;
	}
	/* Desktop restores the co-equal "Try on the web" hero button and
	   the richer 2×2 credibility card grid;
	   the mobile-only strip and text link are hidden. */
	.cta.web-cta {
		display: inline-flex;
	}
	.hero-copy > .cta-note {
		display: block;
	}
	.cta-weblink,
	.credibility-strip {
		display: none;
	}
	.credibility-row {
		display: grid;
	}
	.plat-web .qr-row.qr-ready {
		display: inline-flex;
	}
	.plat-web .hero .cta-row #download_hero {
		display: inline-flex;
		order: 2;
	}
	.plat-web .cta-band .cta-row .cta.appstore {
		display: inline-flex;
		order: 2;
	}
	.plat-web #web_hero {
		order: 1;
	}
	.plat-web #web_bottom {
		order: 1;
	}
	.plat-web .qr-row {
		order: 3;
	}
	h1,
	.hero-brand span {
		font-size: clamp(36px, 5vw, 52px);
	}
	/* On desktop the 30ch cap squishes section intros into a narrow
	   column; give them a comfortable measure. Mobile keeps 30ch. */
	.section-head {
		max-width: 60ch;
	}
	.lede {
		max-width: 44ch;
	}
	.features {
		grid-template-columns: repeat(2, 1fr);
		gap: 18px;
	}
	/* Three-card rows (e.g. the trust section) split evenly instead
	   of leaving a 2+1 hole in the two-column grid. */
	.features.features-trio {
		grid-template-columns: repeat(3, 1fr);
	}
	.quotes {
		grid-template-columns: repeat(3, 1fr);
		gap: 18px;
	}
	.feature-split {
		grid-template-columns: minmax(0, 1fr) minmax(220px, 260px);
		gap: 44px;
		align-items: start;
		margin-top: 56px;
	}
	.feature-split .section-head {
		margin-top: 0;
	}
	.feature-split .features {
		grid-template-columns: 1fr;
	}
	.feature-shots {
		margin: 0;
		max-width: 260px;
	}
	.cleanup-layout {
		grid-template-columns: minmax(0, 1fr) minmax(220px, 260px);
		gap: 44px;
		align-items: start;
	}
	.cleanup-layout > .section-head {
		margin: 48px 0 0;
	}
	.cleanup-feed {
		grid-column: 2;
		grid-row: 1 / span 2;
		width: 100%;
		max-width: 260px;
		margin: -72px 0 0;
	}
	.cleanup-testimonials {
		grid-column: 1;
		grid-row: 2;
		margin-top: 34px;
	}
	.cleanup-testimonials .quotes {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}
	.assistant-shots {
		grid-template-columns: 1fr;
		max-width: 260px;
		margin: 0;
	}
	.assistant .features {
		grid-template-columns: 1fr;
		gap: 14px;
	}
	.assistant-layout {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(220px, 260px);
		gap: 44px;
		align-items: start;
	}
	.assistant-layout .section-head {
		margin-top: 0;
	}
	.category-feed-showcase {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		justify-content: start;
		gap: 14px;
		margin-top: 38px;
		width: 100%;
		max-width: 642px;
	}
	.category-feed-showcase img {
		width: 100%;
		height: 318px;
		max-width: none;
	}
}

@media (min-width: 1180px) {
	h1 {
		white-space: nowrap;
	}
}
