/*
 * Telescope Finder — layout and components.
 *
 * Tokens live on :root (the page is standalone; nothing else styles it).
 * No url() anywhere: Autoptimize is opted out on this page, but the rule
 * costs nothing and keeps the file relocatable. Illustration styling is in
 * tf-art.css.
 */
:root {
	--tf-bg: #070d21;
	--tf-bg-2: #0b1430;
	--tf-panel: #111c3d;
	--tf-panel-2: #16234b;
	--tf-line: rgba(180, 196, 255, .14);
	--tf-line-strong: rgba(180, 196, 255, .3);
	--tf-text: #eef2ff;
	--tf-dim: #a9b4d6;
	--tf-faint: #6f7ba3;
	--tf-gold: #f5c561;
	--tf-gold-dim: #c9963a;
	--tf-blue: #6fa8ff;
	--tf-blue-deep: #0f2350;  /* CTA ink: 10:1 against --tf-gold */
	--tf-good: #7fd4a8;
	--tf-warn: #ff9d6b;
	--tf-radius: 14px;
	--tf-font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
	--tf-font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	--tf-ease: cubic-bezier(.2, .7, .2, 1);
	--tf-gutter: 16px;
	--tf-max: 1100px;
	color-scheme: dark;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body.tf-body {
	margin: 0;
	background: var(--tf-bg);
	color: var(--tf-text);
	font-family: var(--tf-font-body);
	font-size: 17px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}
body.tf-body a { color: var(--tf-blue); }
body.tf-body a:hover { color: var(--tf-text); }
.tf-sr {
	position: absolute !important;
	width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
:focus-visible { outline: 3px solid var(--tf-gold); outline-offset: 3px; border-radius: 6px; }

/* ------------------------------------------------------------ app shell */

.tf-app {
	position: relative;
	min-height: 100vh;
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	isolation: isolate;
	background: radial-gradient(120% 70% at 50% -10%, #1a2a5e 0%, var(--tf-bg-2) 45%, var(--tf-bg) 100%);
}
body.tf-ads .tf-app { padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px)); }

.tf-sky {
	position: absolute; inset: 0; z-index: 0;
	pointer-events: none;
}

.tf-masthead {
	position: relative; z-index: 2;
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
	padding: 14px var(--tf-gutter) 0;
	max-width: var(--tf-max); width: 100%; margin: 0 auto;
}
.tf-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--tf-dim); font-size: 14px; }
.tf-logo img { height: 34px; width: auto; display: block; }
.tf-logo-back { border: 1px solid var(--tf-line); border-radius: 999px; padding: 4px 10px; }
.tf-logo:hover .tf-logo-back { border-color: var(--tf-line-strong); color: var(--tf-text); }

/* persistent telescope */
.tf-scope-dock {
	position: absolute; z-index: 1;
	top: 64px; right: var(--tf-gutter);
	width: 200px; height: 200px;
	transform-origin: top right;
	transform: scale(.48);
	transition: transform .6s var(--tf-ease), opacity .6s var(--tf-ease);
	pointer-events: none;
}
.tf-scope-dock svg { width: 100%; height: 100%; display: block; overflow: visible; }
.tf-app[data-tf-screen="intro"] .tf-scope-dock { transform: scale(.62); }
.tf-app[data-tf-screen="results"] .tf-scope-dock { transform: scale(.55); }
@media (min-width: 900px) {
	.tf-scope-dock { top: 84px; right: 6%; width: 260px; height: 260px; transform: scale(.55); }
	.tf-app[data-tf-screen="intro"] .tf-scope-dock { top: 22%; right: 8%; transform: scale(1.35); }
	.tf-app[data-tf-screen="results"] .tf-scope-dock { transform: scale(.6); }
}

.tf-stage {
	position: relative; z-index: 1;
	flex: 1 1 auto;
	width: 100%; max-width: var(--tf-max);
	margin: 0 auto;
	padding: 24px var(--tf-gutter) 40px;
	contain: layout;
}
/*
 * A leaving screen is taken out of flow, so the stage would otherwise snap to
 * the incoming screen's height in a single frame. Between a tall question and a
 * short interstitial that is a 400px jump, which reads as the card popping in
 * rather than crossfading. js/tf-ui.js sets an explicit height across the
 * transition and this animates it.
 */
.tf-stage.is-morphing { transition: height .32s var(--tf-ease); }

/* screens and transitions */
.tf-screen {
	opacity: 0;
	transform: translateX(24px);
	transition: opacity .32s var(--tf-ease), transform .32s var(--tf-ease);
	contain: layout paint;
}
.tf-screen.is-entering-back { transform: translateX(-24px); }
.tf-screen.is-active { opacity: 1; transform: none; }
.tf-screen.is-leaving, .tf-screen.is-leaving-back {
	position: absolute; inset: 24px var(--tf-gutter) auto;
	opacity: 0; pointer-events: none;
	transform: translateX(-24px);
	will-change: transform, opacity;
}
.tf-screen.is-leaving-back { transform: translateX(24px); }

/* ------------------------------------------------------------ type */

.tf-eyebrow {
	margin: 0 0 8px;
	font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
	color: var(--tf-gold);
}
.tf-h3 { font-family: var(--tf-font-display); font-weight: 600; font-size: 24px; margin: 36px 0 12px; }

/* buttons */
.tf-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 48px; padding: 10px 22px;
	border-radius: 999px; border: 1px solid var(--tf-line-strong);
	background: transparent; color: var(--tf-text);
	font: inherit; font-weight: 600; font-size: 16px;
	cursor: pointer; text-decoration: none;
	transition: transform .18s var(--tf-ease), background-color .18s, border-color .18s, opacity .18s;
}
.tf-btn:hover { background: var(--tf-panel-2); border-color: var(--tf-line-strong); color: var(--tf-text); }
.tf-btn:active { transform: scale(.98); }
.tf-btn--primary { background: var(--tf-gold); border-color: var(--tf-gold); color: var(--tf-blue-deep); }
.tf-btn--primary:hover { background: #ffd47a; border-color: #ffd47a; color: var(--tf-blue-deep); }
/* `body.tf-body a` outweighs .tf-btn--primary, so an anchor styled as a primary
   button -- the Amazon CTA -- picked up --tf-blue on gold. Say it again, louder. */
body.tf-body a.tf-btn--primary,
body.tf-body a.tf-btn--primary:hover { color: var(--tf-blue-deep); }
.tf-btn--ghost { color: var(--tf-dim); }
.tf-btn--link { border-color: transparent; color: var(--tf-dim); text-decoration: underline; text-underline-offset: 4px; }
.tf-btn--link:hover { background: transparent; color: var(--tf-text); }
.tf-btn[disabled] { opacity: .4; cursor: not-allowed; transform: none; }

/* ------------------------------------------------------------ intro */

.tf-hero {
	display: grid; gap: 24px;
	padding: 24px 0 8px;
	min-height: calc(100vh - 140px);
	min-height: calc(100dvh - 140px);
	align-content: center;
}
.tf-hero-copy { max-width: 620px; padding-right: 96px; }
.tf-hero-title {
	font-family: var(--tf-font-display);
	font-weight: 700; font-size: clamp(2.2rem, 7vw, 4.2rem);
	line-height: 1.05; letter-spacing: -.01em;
	margin: 0 0 18px;
}
.tf-hero-title em { font-style: italic; color: var(--tf-gold); }
.tf-hero-promise { font-size: clamp(1.05rem, 2.2vw, 1.3rem); color: var(--tf-dim); margin: 0 0 22px; max-width: 34em; }
.tf-hero-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0 0 26px; padding: 0; list-style: none; color: var(--tf-faint); font-size: 14px; }
.tf-hero-meta li::before { content: '\2726'; color: var(--tf-gold); margin-right: 8px; font-size: 11px; }
.tf-hero-actions { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; }
.tf-hero-noscript { margin-top: 20px; color: var(--tf-warn); }
@media (min-width: 900px) {
	.tf-hero { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
	.tf-hero-copy { padding-right: 0; }
}

/* ------------------------------------------------------------ question */

.tf-q { max-width: 980px; margin: 0 auto; }
.tf-q-head { margin-bottom: 20px; padding-right: 110px; }
.tf-progress { width: min(320px, 100%); height: 40px; margin: 0 0 8px; }
.tf-progress svg { width: 100%; height: 100%; display: block; overflow: visible; }
.tf-q-step { margin: 0 0 6px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--tf-faint); }
.tf-q-title {
	font-family: var(--tf-font-display); font-weight: 700;
	font-size: clamp(1.6rem, 4.6vw, 2.5rem); line-height: 1.12;
	margin: 0 0 10px;
}
.tf-q-title:focus { outline: none; }
.tf-q-lead { margin: 0; color: var(--tf-dim); max-width: 44em; }
@media (min-width: 900px) { .tf-q-head { padding-right: 200px; } }

.tf-q-body { display: grid; gap: 22px; }
@media (min-width: 900px) {
	.tf-q-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px; align-items: start; }
}

.tf-lesson {
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: var(--tf-radius);
	background: linear-gradient(180deg, rgba(17, 28, 61, .6), rgba(11, 20, 48, .3));
	border: 1px solid var(--tf-line);
	overflow: hidden;
}
.tf-lesson svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.tf-lesson--small { max-width: 420px; margin: 8px 0 12px; }
.tf-lesson-points { margin: 14px 0 0; padding: 0 0 0 18px; color: var(--tf-dim); font-size: 15px; }
.tf-lesson-points li { margin: 0 0 6px; }
.tf-lesson-points li::marker { color: var(--tf-gold); }

.tf-options { margin: 0; padding: 0; border: 0; display: grid; gap: 10px; }
.tf-option {
	position: relative;
	display: flex; align-items: flex-start; gap: 12px;
	padding: 14px 16px;
	border-radius: var(--tf-radius);
	border: 1px solid var(--tf-line);
	background: rgba(17, 28, 61, .55);
	cursor: pointer;
	transition: border-color .18s, background-color .18s, transform .18s var(--tf-ease), box-shadow .18s;
}
.tf-option:hover { border-color: var(--tf-line-strong); background: rgba(22, 35, 75, .75); }
.tf-option input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.tf-option:has(input:focus-visible) { outline: 3px solid var(--tf-gold); outline-offset: 2px; }
.tf-option-mark {
	flex: 0 0 auto;
	width: 24px; height: 24px; margin-top: 1px;
	border-radius: 50%; border: 2px solid var(--tf-line-strong);
	color: #1a1405; display: grid; place-items: center;
	transition: background-color .18s, border-color .18s, transform .18s var(--tf-ease);
}
.tf-option-mark svg { width: 16px; height: 16px; }
.tf-option-tick { stroke-dasharray: 20; stroke-dashoffset: 20; transition: stroke-dashoffset .24s var(--tf-ease) .05s; }
.tf-option-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tf-option-label { font-weight: 600; }
.tf-option-sub { font-size: 14px; color: var(--tf-faint); }
.tf-option.is-checked {
	border-color: var(--tf-gold);
	background: rgba(245, 197, 97, .09);
	box-shadow: 0 0 0 1px rgba(245, 197, 97, .35), 0 10px 30px -18px rgba(245, 197, 97, .6);
	animation: tf-pop .18s var(--tf-ease);
}
.tf-option.is-checked .tf-option-mark { background: var(--tf-gold); border-color: var(--tf-gold); }
.tf-option.is-checked .tf-option-tick { stroke-dashoffset: 0; }
@keyframes tf-pop { from { transform: scale(.98); } to { transform: scale(1); } }

.tf-options--compact { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.tf-options--compact .tf-option { padding: 10px 12px; }
.tf-options--compact .tf-option-sub { display: none; }

.tf-reaction {
	min-height: 1.6em;
	margin: 12px 0 0;
	padding: 0 0 0 14px;
	border-left: 3px solid var(--tf-gold);
	color: var(--tf-text);
	font-size: 15px;
	opacity: 0; transform: translateY(4px);
	transition: opacity .28s var(--tf-ease), transform .28s var(--tf-ease);
}
.tf-reaction:empty { border-color: transparent; }
.tf-reaction.is-on { opacity: 1; transform: none; }

.tf-design { margin: 18px 0 0; border-top: 1px solid var(--tf-line); padding-top: 12px; }
.tf-design summary { cursor: pointer; font-weight: 600; color: var(--tf-dim); padding: 6px 0; }
.tf-design summary:hover { color: var(--tf-text); }
.tf-design-hint { font-weight: 400; color: var(--tf-faint); }
.tf-design-lead { margin: 8px 0 0; font-size: 15px; }

.tf-q-nav { display: flex; align-items: center; gap: 8px; margin-top: 22px; }
.tf-q-nav [data-tf-next] { margin-left: auto; min-width: 140px; }
.tf-q-nav--center { justify-content: center; }
.tf-q-nav--center [data-tf-got-it] { margin-left: 0; }

/* ------------------------------------------------------------ interstitial */

.tf-inter { max-width: 620px; margin: 0 auto; text-align: center; padding: 20px 0; }
.tf-inter-title { font-family: var(--tf-font-display); font-weight: 700; font-size: clamp(1.6rem, 4.6vw, 2.4rem); line-height: 1.12; margin: 0 0 18px; }
.tf-inter-title:focus { outline: none; }
.tf-lesson--inter { margin: 0 auto 18px; max-width: 560px; }
.tf-inter-text { color: var(--tf-dim); margin: 0; }

/* ------------------------------------------------------------ results */

.tf-results { max-width: 980px; margin: 0 auto; }
.tf-results-head { padding-right: 110px; margin-bottom: 22px; }
.tf-results-title { font-family: var(--tf-font-display); font-weight: 700; font-size: clamp(1.7rem, 5vw, 2.8rem); line-height: 1.1; margin: 0 0 10px; }
.tf-results-title:focus { outline: none; }
.tf-results-lead { color: var(--tf-dim); margin: 0 0 12px; max-width: 46em; }
.tf-note { margin: 0 0 12px; padding: 10px 14px; border-radius: 10px; background: rgba(255, 157, 107, .1); border: 1px solid rgba(255, 157, 107, .35); color: var(--tf-text); font-size: 15px; }
.tf-disclosure { margin: 0; font-size: 13px; color: var(--tf-faint); }
@media (min-width: 900px) { .tf-results-head { padding-right: 220px; } }

.tf-cards { display: grid; gap: 16px; }
@media (min-width: 900px) {
	.tf-cards { grid-template-columns: 1fr 1fr; }
	.tf-card--top { grid-column: 1 / -1; }
}
.tf-card {
	background: var(--tf-panel);
	border: 1px solid var(--tf-line);
	border-radius: var(--tf-radius);
	padding: 18px;
	animation: tf-rise .5s var(--tf-ease) both;
}
.tf-card[data-tf-rank="2"] { animation-delay: .08s; }
.tf-card[data-tf-rank="3"] { animation-delay: .16s; }
.tf-card[data-tf-rank="4"] { animation-delay: .24s; }
@keyframes tf-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.tf-card--top { border-color: rgba(245, 197, 97, .5); box-shadow: 0 20px 60px -30px rgba(245, 197, 97, .45); }
.tf-card--stretch { border-style: dashed; border-color: var(--tf-gold-dim); }
.tf-card-head { margin-bottom: 12px; }
.tf-card-name { font-family: var(--tf-font-display); font-weight: 700; font-size: clamp(1.3rem, 3vw, 1.7rem); margin: 0 0 8px; line-height: 1.15; }
.tf-card-meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; font-size: 13px; }
.tf-card-meta > span { display: inline-block; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--tf-line); color: var(--tf-dim); }
.tf-card-pct { border-color: var(--tf-gold) !important; color: var(--tf-gold) !important; }
.tf-card-stretch-note { margin: 10px 0 0; font-size: 14px; color: var(--tf-dim); }
.tf-card-body { display: grid; gap: 14px; }
@media (min-width: 640px) { .tf-card-body { grid-template-columns: 200px minmax(0, 1fr); } .tf-card--top .tf-card-body { grid-template-columns: 260px minmax(0, 1fr); } }
.tf-card-media { aspect-ratio: 4 / 3; border-radius: 10px; background: #fff; overflow: hidden; display: grid; place-items: center; }
.tf-card-img { width: 100%; height: 100%; object-fit: contain; display: block; }
.tf-card-text h4 { margin: 0 0 6px; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--tf-faint); }
.tf-card-text ul { margin: 0 0 12px; padding: 0 0 0 18px; font-size: 15px; }
.tf-card-text li { margin: 0 0 4px; }
.tf-why li::marker { color: var(--tf-good); }
.tf-but li::marker { color: var(--tf-warn); }
.tf-specs {
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px;
	margin: 14px 0 0; padding: 12px 0 0; border-top: 1px solid var(--tf-line);
	font-size: 14px;
}
@media (min-width: 640px) { .tf-specs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tf-spec dt { color: var(--tf-faint); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.tf-spec dd { margin: 0; }
.tf-card-see { margin: 12px 0 0; font-size: 15px; }
.tf-card-see p { margin: 0; }
.tf-card-cta { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 10px; }

.tf-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 16px; }
.tf-compare { border-collapse: collapse; width: 100%; font-size: 14px; min-width: 520px; }
.tf-compare th, .tf-compare td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--tf-line); vertical-align: top; }
.tf-compare thead th { color: var(--tf-gold); font-family: var(--tf-font-display); font-weight: 600; }
.tf-compare tbody th { color: var(--tf-faint); font-weight: 500; }

.tf-how { margin: 24px 0 0; border: 1px solid var(--tf-line); border-radius: var(--tf-radius); padding: 4px 16px; }
.tf-how summary { cursor: pointer; font-weight: 600; padding: 10px 0; }
.tf-how p { color: var(--tf-dim); font-size: 15px; }
.tf-results-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0 0; }

/* ------------------------------------------------------------ article */

.tf-article {
	position: relative; z-index: 1;
	max-width: 760px; margin: 0 auto;
	padding: 56px var(--tf-gutter) 40px;
	content-visibility: auto;
	contain-intrinsic-size: auto 2400px;
	font-size: 17px; line-height: 1.65;
}
.tf-article h2 { font-family: var(--tf-font-display); font-weight: 700; font-size: 28px; line-height: 1.15; margin: 40px 0 12px; }
.tf-article h3 { font-family: var(--tf-font-display); font-weight: 600; font-size: 21px; margin: 28px 0 8px; }
.tf-article p, .tf-article li { color: #d8deF5; }
.tf-article strong { color: var(--tf-text); }
.tf-article ul, .tf-article ol { padding-left: 22px; }
.tf-article a { color: var(--tf-blue); text-decoration: underline; text-underline-offset: 3px; }
.tf-article .tf-table { border-collapse: collapse; width: 100%; font-size: 14px; min-width: 560px; }
.tf-article .tf-table th, .tf-article .tf-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--tf-line); vertical-align: top; }
.tf-article .tf-table thead th { color: var(--tf-gold); }
.tf-article img { max-width: 100%; height: auto; }

.tf-credits {
	max-width: 760px; margin: 0 auto; padding: 24px var(--tf-gutter) 48px;
	color: var(--tf-faint); font-size: 14px;
	border-top: 1px solid var(--tf-line);
}
.tf-credits a { color: var(--tf-dim); }

/* ------------------------------------------------------------ motion off */

@media (prefers-reduced-motion: reduce) {
	.tf-app *, .tf-app *::before, .tf-app *::after {
		animation: none !important;
		transition: none !important;
	}
	html { scroll-behavior: auto; }
}