/*
 * Good Footing — layout. Colours, space, radius and shadows come from tokens.css only.
 * Accessible by default: visible focus, no bare outline:none, motion only via transform/opacity.
 */

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

html {
	scroll-padding-top: 6rem; /* the sticky header must not cover a focused anchor */
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--gf-bg);
	color: var(--gf-text);
	font-family: var(--gf-font-body);
	font-size: var(--gf-text-base);
	line-height: var(--gf-leading);
	overflow-wrap: anywhere;
}

h1, h2, h3 { font-family: var(--gf-font-title); line-height: 1.2; text-wrap: balance; margin: 0 0 var(--gf-space-3); }
p { margin: 0 0 var(--gf-space-3); }
a { color: var(--gf-accent); text-underline-offset: 3px; touch-action: manipulation; }
a:hover { text-decoration-thickness: 2px; }
img { max-width: 100%; height: auto; }

:focus-visible { outline: 3px solid var(--gf-accent); outline-offset: 3px; border-radius: 4px; }

.gf-container { width: 100%; max-width: var(--gf-maxw); margin-inline: auto; padding-inline: var(--gf-space-4); }
.gf-prose { max-width: var(--gf-maxw-prose); }
.gf-section { padding-block: var(--gf-space-7); }
.gf-section__title { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); }
.gf-eyebrow { text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.85rem; font-weight: 700; color: var(--gf-accent); }

.gf-skip {
	position: absolute; left: var(--gf-space-3); top: 0.5rem; z-index: 100;
	transform: translateY(-150%); padding: 0.6rem 1rem; border-radius: var(--gf-radius-sm);
	background: var(--gf-primary); color: var(--gf-on-strong); text-decoration: none;
	transition: transform 0.15s ease;
}
.gf-skip:focus { transform: translateY(0); }

.gf-icon { width: 1.35rem; height: 1.35rem; display: block; }

/* ---- Header ---- */
.gf-header {
	position: sticky; top: 0; z-index: 50;
	background: color-mix(in srgb, var(--gf-bg) 88%, transparent);
	backdrop-filter: saturate(1.2) blur(8px);
	border-bottom: 1px solid var(--gf-border);
}
.gf-header__inner { display: flex; align-items: center; gap: var(--gf-space-3); min-height: 4rem; }
.gf-header__brand { display: inline-flex; align-items: center; gap: 0.55rem; color: var(--gf-text); text-decoration: none; flex: 0 0 auto; }
.gf-header__mark { border-radius: 8px; }
.gf-brand { font-family: var(--gf-font-title); font-weight: 700; font-size: 1.25rem; white-space: nowrap; }
.gf-header__actions { display: flex; align-items: center; gap: var(--gf-space-2); margin-inline-start: auto; }

/* Phones: the desktop nav and the header badge move into a no-JS <details> menu. */
.gf-nav { display: none; }
.gf-header .gf-badge--header { display: none; }
.gf-menu { position: relative; }
.gf-menu > summary { list-style: none; cursor: pointer; }
.gf-menu > summary::-webkit-details-marker { display: none; }
.gf-menu__panel {
	position: absolute; right: 0; top: calc(100% + 0.6rem); z-index: 60;
	display: grid; gap: var(--gf-space-3); min-width: 14rem; padding: var(--gf-space-4);
	background: var(--gf-surface); border: 1px solid var(--gf-border);
	border-radius: var(--gf-radius-md); box-shadow: var(--gf-shadow-md);
}
.gf-nav__list { list-style: none; display: flex; gap: var(--gf-space-4); margin: 0; padding: 0; }
.gf-menu__panel .gf-nav__list { flex-direction: column; gap: var(--gf-space-3); }
.gf-nav__list a { color: var(--gf-text); text-decoration: none; font-weight: 600; }
.gf-nav__list a:hover { text-decoration: underline; }

@media (min-width: 48rem) {
	.gf-nav { display: block; margin-inline-start: var(--gf-space-2); }
	.gf-header .gf-badge--header { display: inline-flex; }
	.gf-menu { display: none; }
}

/* ---- Buttons, badges, toggles ---- */
.gf-badge {
	display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
	min-height: 3rem; padding: 0.6rem 1.2rem; border-radius: var(--gf-radius-pill);
	background: var(--gf-primary); color: var(--gf-on-strong); font-weight: 600;
	text-decoration: none; border: 1px solid transparent; touch-action: manipulation;
}
.gf-badge--soon { background: transparent; color: var(--gf-text); border-color: var(--gf-border); font-weight: 600; }
.gf-link { font-weight: 600; }

.gf-icon-button {
	display: inline-flex; align-items: center; justify-content: center;
	width: 3rem; height: 3rem; border-radius: var(--gf-radius-pill);
	background: var(--gf-surface); color: var(--gf-text); border: 1px solid var(--gf-border);
	cursor: pointer; touch-action: manipulation;
}
.gf-theme-toggle .gf-icon { display: none; }
:root[data-theme="light"] .gf-theme-toggle .gf-icon:nth-of-type(1),
:root:not([data-theme]) .gf-theme-toggle .gf-icon:nth-of-type(1) { display: block; }
:root[data-theme="dark"] .gf-theme-toggle .gf-icon:nth-of-type(2) { display: block; }
@media (prefers-color-scheme: dark) {
	:root:not([data-theme]) .gf-theme-toggle .gf-icon:nth-of-type(1) { display: none; }
	:root:not([data-theme]) .gf-theme-toggle .gf-icon:nth-of-type(2) { display: block; }
}

/* ---- Hero ---- */
.gf-hero { padding-block: var(--gf-space-7) var(--gf-space-6); }
.gf-hero__inner { display: grid; gap: var(--gf-space-6); align-items: center; }
.gf-hero__title { font-size: clamp(2.1rem, 1.4rem + 3vw, 3.6rem); margin-bottom: var(--gf-space-3); }
.gf-hero__pitch { font-size: 1.25rem; color: var(--gf-text-muted); max-width: 34rem; }
.gf-hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gf-space-4); }

.gf-phone { position: relative; width: min(100%, 18rem); margin-inline: auto; padding: 10px; border-radius: 2.4rem; background: #1c1a17; box-shadow: var(--gf-shadow-md); }
.gf-phone__screen { position: relative; overflow: hidden; border-radius: 1.8rem; aspect-ratio: 1320 / 2868; background: var(--gf-surface); }
.gf-phone__screen img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.6s ease; }
.gf-phone__screen img.is-active { opacity: 1; }

/* ---- Features ---- */
.gf-features__grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--gf-space-4); }
.gf-card {
	background: var(--gf-surface); border: 1px solid var(--gf-border); border-radius: var(--gf-radius-md);
	padding: var(--gf-space-4); box-shadow: var(--gf-shadow-sm);
}
.gf-card__icon {
	display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem;
	border-radius: var(--gf-radius-pill); background: color-mix(in srgb, var(--gf-sun) 24%, transparent);
	color: var(--gf-accent); margin-bottom: var(--gf-space-3);
}
.gf-card__title { font-size: 1.25rem; }
.gf-card__body { margin: 0; color: var(--gf-text-muted); }

/* ---- Pages, posts, 404 ---- */
.gf-page__title { font-size: clamp(1.8rem, 1.3rem + 2vw, 2.8rem); }
.gf-post-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--gf-space-5); }
.gf-post-list__title { font-size: 1.4rem; margin-bottom: var(--gf-space-1); }
.gf-404 { padding-block: var(--gf-space-8); }
.gf-404__code { font-family: var(--gf-font-title); font-size: clamp(4rem, 12vw, 9rem); line-height: 1; color: var(--gf-sun); margin: 0; font-variant-numeric: tabular-nums; }

/* ---- Footer ---- */
.gf-footer { margin-top: var(--gf-space-7); padding-block: var(--gf-space-5); border-top: 1px solid var(--gf-border); background: var(--gf-surface); }
.gf-footer { padding-bottom: max(var(--gf-space-5), env(safe-area-inset-bottom)); }
.gf-footer__inner { display: grid; gap: var(--gf-space-3); }
.gf-footer__tagline { margin: 0; color: var(--gf-text-muted); }
.gf-footer__links { list-style: none; display: flex; flex-wrap: wrap; gap: var(--gf-space-4); margin: 0; padding: 0; }
.gf-footer__links a { color: var(--gf-text); font-weight: 600; text-decoration: none; }
.gf-footer__links a:hover { text-decoration: underline; }
.gf-footer__note { margin: 0; color: var(--gf-text-muted); font-size: 0.95rem; }

/* ---- Wider screens ---- */
@media (min-width: 48rem) {
	.gf-hero__inner { grid-template-columns: 1.1fr 0.9fr; gap: var(--gf-space-7); }
	.gf-features__grid { grid-template-columns: repeat(3, 1fr); }
	.gf-footer__inner { grid-template-columns: 1.2fr auto; align-items: center; }
	.gf-footer__note { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
	* { scroll-behavior: auto !important; }
	.gf-skip { transition: none; }
}

/* ---- Homepage sections (Task 3) ---- */
.gf-section__lead { font-size: 1.2rem; color: var(--gf-text-muted); max-width: 46ch; }
.gf-section__more { margin-top: var(--gf-space-3); }

.gf-list { list-style: none; margin: var(--gf-space-4) 0 0; padding: 0; display: grid; gap: var(--gf-space-3); max-width: 46rem; }
.gf-list__item { display: grid; grid-template-columns: 1.35rem 1fr; gap: var(--gf-space-2); align-items: start; }
.gf-list__item .gf-icon { color: var(--gf-secondary); margin-top: 0.28rem; }

.gf-note {
	margin-top: var(--gf-space-4); padding: var(--gf-space-3) var(--gf-space-4);
	border-left: 4px solid var(--gf-sun); background: color-mix(in srgb, var(--gf-sun) 14%, transparent);
	border-radius: 0 var(--gf-radius-sm) var(--gf-radius-sm) 0; color: var(--gf-text); font-weight: 600; max-width: 46rem;
}

.gf-gallery { display: flex; gap: var(--gf-space-4); overflow-x: auto; padding-bottom: var(--gf-space-2); }

.gf-plans { display: grid; gap: var(--gf-space-4); margin-top: var(--gf-space-4); }
.gf-plan { background: var(--gf-surface); border: 1px solid var(--gf-border); border-radius: var(--gf-radius-md); padding: var(--gf-space-4); box-shadow: var(--gf-shadow-sm); }
.gf-plan--pro { border-color: var(--gf-secondary); border-width: 2px; }
.gf-plan__title { font-size: 1.3rem; }
.gf-plan__body { margin: 0; color: var(--gf-text-muted); }

.gf-faq { border-bottom: 1px solid var(--gf-border); }
.gf-faq__q { cursor: pointer; padding: var(--gf-space-3) 0; font-weight: 600; font-family: var(--gf-font-title); font-size: 1.15rem; }
.gf-faq__a { margin: 0 0 var(--gf-space-3); color: var(--gf-text-muted); }

.gf-cta { background: var(--gf-surface); border-top: 1px solid var(--gf-border); border-bottom: 1px solid var(--gf-border); }
.gf-cta__inner { text-align: center; }
.gf-cta__inner .gf-section__lead { margin-inline: auto; margin-bottom: var(--gf-space-4); }
.gf-cta__title { margin-bottom: var(--gf-space-2); }

@media (min-width: 48rem) {
	.gf-plans { grid-template-columns: 1fr 1fr; align-items: start; }
}

/* Answer capsule under the hero (Task 4: the definition an assistant can lift). */
.gf-hero__capsule { margin-top: var(--gf-space-5); color: var(--gf-text-muted); max-width: 44ch; font-size: 1rem; }

/* App-screens gallery (Task 5): scroll-snap track, captions with the [accent] word. */
.gf-gallery { list-style: none; margin: var(--gf-space-4) 0 0; padding: 0 0 var(--gf-space-3); scroll-snap-type: x mandatory; scroll-padding-inline: var(--gf-space-4); }
.gf-gallery__item { flex: 0 0 auto; width: min(74vw, 15rem); scroll-snap-align: start; text-align: center; }
.gf-phone--gallery { width: 100%; }
.gf-gallery__title { font-family: var(--gf-font-title); font-size: 1.15rem; font-weight: 700; margin: var(--gf-space-3) 0 0.25rem; }
.gf-gallery__subtitle { margin: 0; color: var(--gf-text-muted); font-size: 0.95rem; }
.gf-accent-word { color: var(--gf-accent); }

/* Very small phones (320 px): tighten the header so the row never overflows. */
@media (max-width: 23rem) {
	.gf-container { padding-inline: var(--gf-space-3); }
	.gf-header__inner { gap: var(--gf-space-1); }
	.gf-header__mark { width: 26px; height: 26px; }
	.gf-brand { font-size: 1.05rem; }
	.gf-header__actions { gap: var(--gf-space-1); }
	.gf-icon-button { width: 2.75rem; height: 2.75rem; }
}

/* Blog: listing meta and the post's back link. */
.gf-post-list__meta { margin: 0 0 var(--gf-space-2); color: var(--gf-text-muted); font-size: 0.95rem; }
.gf-post__header { margin-bottom: var(--gf-space-4); }
.gf-post__back { margin-top: var(--gf-space-5); }