/* ===========================================================================
   Base — the primitives every FTS page shares.

   Split out of home.css when the second template arrived: the wrap, the section
   rhythm, the kicker and the display H2 are the site's grammar, not the
   homepage's. Loaded at priority 22, so a page stylesheet (25) can still
   override and the chrome (26) still wins on its own components.
   =========================================================================== */

.fts-home,
.fts-page {
	margin: 0;
	background: #fff;
	color: var(--fts-navy-deep);
	font-family: var(--fts-font);
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

/* `:where()` contributes ZERO specificity, so this whole rule weighs the same as
   a bare `img` selector and ANY single component class beats it.

   Written as a plain descendant selector it is (0,1,1), which outranks a
   one-class component rule and silently wins. That has now caused the same bug
   twice: the header emblem rendered at its natural 390px, making a 64px bar
   413px tall; and the programme card image ignored `height: 100%` inside its
   absolutely-positioned frame and grew to 486px inside a 224px box, covering the
   badges and the title. Keep the :where(). */
:where(.fts-home, .fts-page) img { max-width: 100%; height: auto; }

.fts-wrap {
	width: min(100% - clamp(2.5rem, 8vw, 6rem), 78rem);
	margin-inline: auto;
}

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

.fts-kick {
	margin: 0 0 0.6rem;
	font-family: var(--fts-font-cond);
	font-weight: 600;
	font-size: clamp(0.76rem, 1.4vw, 0.85rem);
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--fts-blue);
}

.fts-kick--light { color: var(--fts-mist); }
.fts-kick span { margin-inline: 0.3em; opacity: 0.6; }

.fts-h2 {
	margin: 0;
	font-family: var(--fts-font-cond);
	font-weight: 700;
	font-size: clamp(2.1rem, 6vw, 3.4rem);
	line-height: 0.95;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	color: var(--fts-navy);
	text-wrap: balance;
}

.fts-h2--light { color: #fff; }

/* Keyword-bearing second line inside a display H2.
   "Redbird MCX" is a product name that means nothing to someone searching for a
   flight simulator in Singapore, but the display line has to keep its punch — so
   the qualifier drops to body type on its own line instead of swelling the
   headline into a paragraph set in condensed uppercase. */
.fts-h2__sub {
	display: block;
	margin-top: 0.6rem;
	font-family: var(--fts-font);
	/* Navy at 600, not slate at 500: at body colour and body weight this line read
	   as the paragraph's first sentence rather than as part of the heading, and the
	   only thing separating them was the gap. It has to belong to the H2 above it. */
	font-weight: 600;
	font-size: clamp(0.95rem, 1.5vw, 1.08rem);
	line-height: 1.35;
	letter-spacing: 0;
	text-transform: none;
	color: var(--fts-navy);
	text-wrap: balance;
}

.fts-h2--light .fts-h2__sub { color: var(--fts-mist); }

.fts-sec { padding-block: clamp(2.5rem, 6vw, 4.25rem); }

/* --- Buttons -------------------------------------------------------------- */

.fts-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.95em 1.7em;
	border-radius: 999px;
	font-weight: 600;
	font-size: clamp(0.95rem, 1.7vw, 1rem);
	text-decoration: none;
	transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1),
	            box-shadow 180ms cubic-bezier(0.22, 1, 0.36, 1),
	            background-color 180ms ease;
}

.fts-btn--light { background: #fff; color: var(--fts-navy); box-shadow: 0 12px 30px -14px rgba(4, 12, 30, 0.9); }
.fts-btn--light:hover, .fts-btn--light:focus-visible { transform: translateY(-2px); box-shadow: 0 18px 36px -16px rgba(4, 12, 30, 0.95); }
.fts-btn--navy { background: var(--fts-navy); color: #fff; border-radius: 999px; }
.fts-btn--navy:hover, .fts-btn--navy:focus-visible { background: var(--fts-blue); transform: translateY(-2px); }

/* --- Tick list ------------------------------------------------------------ */

/* The ✓ is ornament and lives in CSS, so it never reaches a screen reader as a
   word in the middle of every line. */
.fts-ticks {
	margin: 1.1rem 0 1.25rem;
	padding: 1.1rem 0 0;
	border-top: 1px solid var(--fts-line);
	list-style: none;
	display: grid;
	gap: 0.4rem;
}

/* Scoped to the homepage's navy stage card, NOT to a bare .is-feature. Written
   loose, these light-on-dark overrides reached the pathway page's feature row —
   which sits on white — and rendered its text at 1.49:1 and its ticks at 1:1,
   i.e. white on white. A surface modifier has to name its surface. */
.fts-stage.is-feature .fts-ticks { border-top-color: rgba(255, 255, 255, 0.22); }

.fts-ticks li {
	position: relative;
	padding-left: 1.35em;
	font-size: 0.88rem;
	line-height: 1.5;
	color: var(--fts-slate);
}

.fts-stage.is-feature .fts-ticks li { color: var(--fts-mist); }

.fts-ticks li::before {
	content: "✓";
	position: absolute;
	left: 0;
	color: var(--fts-blue);
	font-weight: 700;
}

.fts-stage.is-feature .fts-ticks li::before { color: #fff; }

/* --- Section head --------------------------------------------------------- */

.fts-sec__head {
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	justify-content: space-between;
	gap: 1.25rem 2rem;
	margin-bottom: clamp(1.35rem, 3vw, 2rem);
}

.fts-sec__intro {
	/*
	 * 46ch forced this to three lines inside a 1248px row that had 659px of empty
	 * space beside it. 66ch sits inside the comfortable 65-75ch reading measure
	 * and lets the line break where the width actually runs out.
	 */
	max-width: 66ch;
	margin: 0.85rem 0 0;
	text-wrap: pretty;
	font-size: clamp(0.98rem, 1.6vw, 1.05rem);
	line-height: 1.6;
	color: var(--fts-slate);
}

/* --- Closing band --------------------------------------------------------- */

/* Every page ends on one of these, so it lives here rather than in whichever
   page happened to need it first. */

.fts-band {
	padding-block: clamp(3rem, 7vw, 4.5rem);
	background: var(--fts-navy);
	color: var(--fts-mist);
	text-align: center;
}

.fts-band__h {
	margin: 0 0 0.6rem;
	font-family: var(--fts-font-cond);
	font-weight: 800;
	font-size: clamp(2rem, 5vw, 2.9rem);
	line-height: 1;
	text-transform: uppercase;
	color: #fff;
	text-wrap: balance;
}

.fts-band__sub {
	margin: 0 0 clamp(1.4rem, 3vw, 1.85rem);
	font-size: clamp(0.98rem, 1.8vw, 1.05rem);
	line-height: 1.6;
	text-wrap: pretty;
}


/* --- Tinted section ------------------------------------------------------- */

.fts-sec--paper { background: var(--fts-paper); }

/* --- Inline link + arrow -------------------------------------------------- */

.fts-link {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	font-weight: 600;
	font-size: 0.95rem;
	color: var(--fts-navy);
	text-decoration: underline;
	text-underline-offset: 0.3em;
	text-decoration-color: rgba(22, 48, 94, 0.3);
	white-space: nowrap;
	/* 44px hit area without moving the baseline. */
	padding-block: 0.6rem;
	margin-block: -0.6rem;
	transition: color 160ms ease, text-decoration-color 160ms ease;
}

.fts-link:hover,
.fts-link:focus-visible { color: var(--fts-blue); text-decoration-color: currentColor; }
.fts-arw { flex: none; transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1); }
a:hover > .fts-arw, a:focus-visible > .fts-arw { transform: translateX(3px); }

/* --- Two-column split ----------------------------------------------------- */

/* Generic: an image or a block of argument beside another. Used by more than one
   page, so it lives here. */

.fts-split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	gap: clamp(1.6rem, 4vw, 3rem);
	align-items: center;
}

.fts-split__shot {
	position: relative;
	border-radius: 0.9rem;
	overflow: hidden;
	background: var(--fts-paper);
	box-shadow: 0 22px 50px -28px rgba(22, 48, 94, 0.7);
}

.fts-split__shot img {
	display: block;
	width: 100%;
	height: auto;
}

.fts-split__lede {
	margin: 0 0 1rem;
	font-size: clamp(0.98rem, 1.8vw, 1.06rem);
	line-height: 1.7;
	color: var(--fts-slate);
	text-wrap: pretty;
}


@media (max-width: 60rem) {
	.fts-split { grid-template-columns: 1fr; }
	/* Photograph first where there is one: it is what the section argues about. */
	.fts-split__shot { order: -1; }
}

/* --- Plain block ---------------------------------------------------------- */

/* A block of prose at a reading measure, with no card, border or icon. Used
   wherever the page has to say one straight thing — the pathway's FAA notice,
   the about page's instructor statement. Lives here because the moment it was
   used by a second page, the first page's stylesheet stopped being the right
   home: about/ rendered this at 1054px wide because pathway.css was not loaded.

   /* No card, no border, no icon. This block exists to say one plain thing before
   anyone reads a price, and dressing it up as a callout would make it look like
   marketing rather than a straight answer. Its weight comes from being alone on
   a tinted band at a reading measure. */
.fts-plain {
	max-width: 62ch;
}

.fts-plain__p {
	margin: 1rem 0 0;
	font-size: clamp(1rem, 1.9vw, 1.1rem);
	line-height: 1.72;
	color: var(--fts-slate);
	text-wrap: pretty;
}

.fts-plain__cta { margin: 1.5rem 0 0; }