/* ==========================================================================
   Backtask — marketing site styles (full custom CSS, no Tailwind)
   Modeled on lean single-page app sites (recurrence-app.com): a tall nav over
   a dark photographic hero, a two-column hero with an iPhone, borderless
   feature cards, and a centered footer. Sister site to anytally.com — same
   layout, Backtask's amber brand accent.
   ========================================================================== */

/* ---- Design tokens ----------------------------------------------------- */
:root {
	--bg: #ffffff;
	--bg-soft: #f1f3f6;
	--text: #171717;
	--text-soft: #525252;
	--text-muted: #8a8a8e;
	--border: #e7e9ee;
	--card-bg: #ffffff;
	--accent: #D97706;       /* Backtask amber — the glyph's warm checkmark */
	--accent-2: #FFA826;     /* the lighter glyph amber */
	--accent-ink: #B45309;
	/* The always-dark hero/banner palette (same in light + dark mode) */
	--hero-ink: #ffffff;
	--hero-ink-soft: rgba(255, 255, 255, 0.74);
	--hero-floor: #ffffff;   /* color the hero image fades into at its base */
	--maxw: 1120px;
	--nav-h: 84px;
}
.dark {
	--bg: #1b1b1b;
	--bg-soft: #262626;
	--text: #ffffff;
	--text-soft: rgba(255, 255, 255, 0.70);
	--text-muted: rgba(255, 255, 255, 0.45);
	--border: rgba(255, 255, 255, 0.10);
	--card-bg: #2c2c2c;
	--hero-floor: #1b1b1b;
}

/* ---- Reset & base ------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
	background: var(--bg);
	color: var(--text);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { line-height: 1.15; letter-spacing: -0.02em; }
strong { font-weight: 700; }

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* ---- Entrance animation ------------------------------------------------ */
@keyframes fadeInUp {
	from { opacity: 0; transform: translateY(20px); }
	to { opacity: 1; transform: translateY(0); }
}
.fade-in-up { opacity: 0; animation: fadeInUp 0.7s ease-out forwards; }
.fade-in-up-1 { animation-delay: 0.05s; }
.fade-in-up-2 { animation-delay: 0.18s; }
.fade-in-up-3 { animation-delay: 0.30s; }
.fade-in-up-4 { animation-delay: 0.42s; }
@media (prefers-reduced-motion: reduce) {
	.fade-in-up { opacity: 1; animation: none; }
	html { scroll-behavior: auto; }
}

/* ---- App Store button -------------------------------------------------- */
.btn-appstore {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 11px 22px 11px 16px;
	border-radius: 999px;
	background: #000;
	color: #fff;
	border: none;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
/* Light hero → black Apple pill; dark hero → white pill. */
.dark .btn-appstore { background: #fff; color: #171717; }
.btn-appstore:hover { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(0, 0, 0, 0.32); }
.btn-appstore i { font-size: 30px; line-height: 1; }
.btn-appstore .btn-appstore__sub { font-size: 9px; font-weight: 500; opacity: 0.85; display: block; line-height: 1.1; }
.btn-appstore .btn-appstore__main { font-size: 17px; font-weight: 600; display: block; line-height: 1.1; }
/* On light surfaces (legal pages don't use it, but keep a light-bg variant) */
.btn-appstore--solid { background: #000; color: #fff; }

/* ==========================================================================
   Site navigation — tall, transparent, white, sitting over the dark hero.
   Non-sticky: it scrolls away with the hero (every page leads with a dark
   banner, so the white nav always has dark behind it).
   ========================================================================== */
.site-nav {
	position: absolute;
	top: 0; left: 0; right: 0;
	z-index: 50;
	height: var(--nav-h);
	display: flex;
	align-items: center;
}
.site-nav__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.site-nav__brand { display: inline-flex; align-items: center; gap: 7px; }
.site-nav__brand img { width: 30px; height: 30px; }
.site-nav__brand span {
	font-size: 1.2rem;
	font-weight: 600;
	letter-spacing: -0.02em;
	color: #fff;
}
.site-nav__links { display: inline-flex; align-items: center; gap: 26px; }
.site-nav__link {
	font-size: 0.95rem;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.8);
	transition: color 0.15s ease;
}
.site-nav__link:hover { color: #fff; }
/* Home hero is light in light mode → dark nav text so it pops. Legal pages keep
   the always-dark .subhero banner, so the nav stays white there. */
html:not(.dark) .page-home .site-nav__brand span,
html:not(.dark) .page-home .site-nav__link { color: #1b2a39; }
html:not(.dark) .page-home .site-nav__link:hover { color: #000; }

/* ==========================================================================
   Hero — dark photographic background, two columns (phone + copy).
   ========================================================================== */
.hero {
	position: relative;
	overflow: hidden;
	background: #dbe7f3;        /* light-sky fallback (light mode) */
	color: #1b2a39;            /* dark hero ink (light mode) */
}
.dark .hero { background: #0b1a2e; color: var(--hero-ink); }
.hero__bg {
	position: absolute;
	inset: 0;
	background: url('../../img/hero-bg-light.jpg') center bottom / cover no-repeat;
	z-index: 0;
}
.dark .hero__bg { background-image: url('../../img/hero-bg.jpg'); }
/* Top scrim for nav legibility; the hero image ends abruptly at its bottom edge
   (no fade into the page). Light mode: a soft WHITE scrim keeps the sky bright
   under the dark nav. Dark mode: a dark scrim under the white nav. */
.hero__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.0) 26%);
}
.dark .hero__bg::after {
	background:
		linear-gradient(180deg, rgba(6, 14, 26, 0.55) 0%, rgba(6, 14, 26, 0.10) 24%, rgba(6, 14, 26, 0.0) 48%);
}
.hero__inner {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: center;
	padding-top: calc(var(--nav-h) + 36px);
	padding-bottom: 72px;
	min-height: clamp(640px, 52vw, 820px);
}
.hero__media { align-self: end; perspective: 1800px; display: flex; justify-content: center; }
.hero__copy { align-self: center; max-width: 440px; }

.hero__appicon {
	width: 80px; height: 80px;
	margin-bottom: 22px;
	/* No shadow: a filter: drop-shadow flashes as a square in Safari during the
	   slide crossfade, so the hero icon is presented flat. */
}
.hero__title {
	font-size: 3.4rem;
	font-weight: 800;
	color: #15212e;
	margin-bottom: 10px;
}
.dark .hero__title { color: #fff; }
.hero__tagline {
	font-size: 1.4rem;
	font-weight: 600;
	color: #2f6191;
	letter-spacing: -0.01em;
	margin-bottom: 18px;
}
.dark .hero__tagline { color: #bcdcff; }
.hero__desc {
	font-size: 1.05rem;
	line-height: 1.6;
	color: rgba(20, 30, 40, 0.78);
	margin-bottom: 28px;
}
.dark .hero__desc { color: var(--hero-ink-soft); }

/* ==========================================================================
   iPhone frame wrapping the Backtask app mockup (the app on iPhone).
   ========================================================================== */
.at-phone {
	position: relative;
	width: 330px;
	max-width: 82vw;
	margin: 0 auto;
	aspect-ratio: 1614 / 3322;
	isolation: isolate;
	/* No shadow: a filter: drop-shadow flashes as a square in Safari during the
	   slide crossfade, so the phone is presented flat. */
}
/* Two independent layers. The screenshot lives in a box sized to the frame's
   screen cutout (insets = screen rect L77 T65 R1537 B3256 of the 1614×3322
   frame); overflow:hidden + border-radius round its corners to the screen's
   ~216px corner radius (≈42px at the rendered size). The frame PNG overlays on
   top. NOTE: a positioned box is required here — an absolutely-positioned <img>
   with all four insets keeps its INTRINSIC size (replaced-element rule) and
   spills out of the frame, so the <img> must fill this wrapper instead. */
.at-phone__screen {
	position: absolute;
	/* Screen rect of the frame (L77 T65 R1537 B3256 of 1614×3322), grown ~1px on
	   every side so the screenshot tucks UNDER the bezel — no hairline gap at the
	   frame's inner edge. The frame overlay (z-index 2) clips the overshoot. */
	top: calc(1.96% - 1px);
	left: calc(4.77% - 1px);
	right: calc(4.71% - 1px);
	bottom: calc(1.96% - 1px);
	overflow: hidden;
	border-radius: 42px;
	z-index: 1;
}
.at-phone__shot {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* Hero slideshow: the slides stack in the screen box and crossfade; the active
   one is opacity 1. app/js/slideshow.js toggles .is-active every few seconds.
   Each slide rounds + clips ITSELF (matching .at-phone__screen) so the corners
   stay rounded while the fade promotes the slide to its own composite layer —
   a composited layer ignores an ancestor's border-radius clip but keeps its own. */
.at-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 0.9s ease-in-out;
	border-radius: 42px;
	overflow: hidden;
}
.at-slide.is-active { opacity: 1; }
.at-phone__frame {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 2;
	pointer-events: none;
}

/* ==========================================================================
   Features — borderless cards: icon in a soft circle, title, description.
   ========================================================================== */
.features { padding: 84px 0 28px; }
.features__intro { max-width: 640px; margin: 0 auto 56px; text-align: center; }
.features__intro h2 { font-size: 2.25rem; font-weight: 800; margin-bottom: 14px; }
.features__intro p { font-size: 1.1rem; color: var(--text-soft); }
.features__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 48px 56px;
}
.feature__icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 50px; height: 50px;
	border-radius: 50%;
	/* Each card sets its own category color via --c (Apple system hexes); the
	   glyph is the full color on a soft tint of the same color — echoing the
	   app's colour-coded categories. */
	background: color-mix(in srgb, var(--c, var(--accent)) 14%, transparent);
	color: var(--c, var(--accent));
	font-size: 26px;
	margin-bottom: 16px;
}
.feature__title { font-size: 1.15rem; font-weight: 700; margin-bottom: 7px; }
.feature__desc { font-size: 0.97rem; line-height: 1.6; color: var(--text-soft); }

/* ==========================================================================
   Footer — centered brand, social circles, legal links.
   ========================================================================== */
.site-footer { padding: 72px 0 64px; border-top: 1px solid var(--border); margin-top: 84px; text-align: center; }
.site-footer__brand { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 14px; }
.site-footer__brand img { width: 26px; height: 26px; }
.site-footer__brand span { font-size: 1.05rem; font-weight: 600; letter-spacing: -0.02em; color: var(--text); }
.site-footer__made { font-size: 0.95rem; color: var(--text-soft); margin-bottom: 22px; }
.site-footer__social { display: flex; justify-content: center; gap: 14px; margin-bottom: 24px; }
.social-btn {
	display: inline-flex; align-items: center; justify-content: center;
	width: 42px; height: 42px;
	border-radius: 50%;
	background: var(--bg-soft);
	color: var(--text-soft);
	font-size: 20px;
	transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.social-btn svg { width: 18px; height: 18px; fill: currentColor; }
.social-btn:hover { background: var(--accent); color: #fff; transform: translateY(-2px); }
.site-footer__links { display: flex; justify-content: center; gap: 8px; font-size: 0.9rem; color: var(--text-soft); margin-bottom: 12px; }
.site-footer__links a:hover { color: var(--text); }
.site-footer__links .sep { color: var(--text-muted); }
.site-footer__copy { font-size: 0.82rem; color: var(--text-muted); }
.site-footer__copy a:hover { color: var(--text-soft); }

/* ==========================================================================
   Legal pages — slim dark banner + readable prose.
   ========================================================================== */
.subhero {
	position: relative;
	background: linear-gradient(180deg, #0b1a2e 0%, #0e2238 100%);
	color: #fff;
	text-align: center;
	padding: calc(var(--nav-h) + 40px) 24px 52px;
}
.subhero h1 { font-size: 2.6rem; font-weight: 800; margin-bottom: 10px; }
.subhero p { color: rgba(255, 255, 255, 0.7); font-size: 1.05rem; }

.legal-section { padding: 56px 0 96px; }
.legal { max-width: 760px; margin: 0 auto; padding: 0 24px; color: var(--text-soft); }
.legal > div + div { margin-top: 40px; }
.legal h2 { font-size: 1.25rem; font-weight: 700; color: var(--text); margin-bottom: 12px; }
.legal p { margin-bottom: 12px; }
.legal p:last-child { margin-bottom: 0; }
.legal ul { list-style: disc; margin: 12px 0 0 24px; }
.legal li { margin-bottom: 6px; }
.legal strong { color: var(--text); }

/* Inline content links (legal pages) */
.content-link {
	color: var(--accent);
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-color: rgba(217, 119, 6, 0.4);
	transition: text-decoration-color 0.15s ease, color 0.15s ease;
}
.content-link:hover { text-decoration-color: var(--accent); }
.dark .content-link { color: #FFB454; text-decoration-color: rgba(255, 180, 84, 0.4); }
.dark .content-link:hover { text-decoration-color: #FFB454; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 860px) {
	:root { --nav-h: 72px; }
	.hero__inner {
		grid-template-columns: 1fr;
		text-align: center;
		gap: 8px;
		min-height: 0;
		padding-top: calc(var(--nav-h) + 28px);
	}
	.hero__copy { align-self: auto; max-width: 520px; margin: 0 auto; order: 1; }
	.hero__media { align-self: auto; order: 2; perspective: none; margin-top: 36px; }
	.hero .at-phone { transform: none; }
	.hero__appicon { margin-left: auto; margin-right: auto; }
	.hero__title { font-size: 2.6rem; }
	.hero__tagline { font-size: 1.2rem; }
	.features__grid { grid-template-columns: 1fr; gap: 36px; max-width: 420px; margin: 0 auto; }
	.feature { text-align: center; }
	.feature__icon { margin-left: auto; margin-right: auto; }
	.features__intro h2 { font-size: 1.9rem; }
	.subhero h1 { font-size: 2.1rem; }
}
@media (min-width: 861px) and (max-width: 1024px) {
	.hero__title { font-size: 2.9rem; }
}