@import url('https://fonts.googleapis.com/css2?family=Major+Mono+Display&family=Courier+Prime:wght@400;700&family=Funnel+Display:wght@300;400;500;600;700&display=swap');

:root {
  /* --- Brand palette --- */
  --grey: #e4e2dd;
  --lavender: #dadde6;
  --yellow: #ffd45c;
  --blue: #1e3a5f;
  --dark-blue: #091d58;
  --black: #000000;

  --base: #f5f8f3;
  --base-2: #e8eee4;
  --contrast: #43554f;
  --contrast-2: #8a431f;

  /* --- Roles --- */
  --ink: #16223a;
  --muted: #5f6b74;
  --kicker: #ffd77e;
  --shadow-card: 0 12px 30px rgba(0, 0, 0, 0.18);
  --shadow-lift: 0 20px 44px rgba(0, 0, 0, 0.26);

  /* --- Type families --- */
  --font-display: 'Major Mono Display', ui-monospace, monospace;   /* main title */
  --font-body: 'Funnel Display', ui-sans-serif, system-ui, -apple-system, sans-serif; /* subtitles, reading */
  --font-mono: 'Courier Prime', ui-monospace, 'Courier New', monospace; /* program titles, pills */

  /* --- Type scale (only four sizes across the page) --- */
  --fs-xl: clamp(24px, 5.4vw, 30px); /* hero title + featured card title */
  --fs-lg: 17px;                     /* link-card titles */
  --fs-md: 15px;                     /* all reading text + testimonials */
  --fs-sm: 11px;                     /* kickers, pills, CTAs, footer */

  font-family: var(--font-body);
  color: #fff;
}

* { box-sizing: border-box; }

html { background: var(--dark-blue); }

/* --- Page-spanning gradient --- */
body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  background-color: var(--lavender);
  background-repeat: no-repeat;
  background-image:
    radial-gradient(120% 38% at 50% 0%, rgba(255, 212, 92, 0.10), transparent 55%),
    linear-gradient(
      179deg,
      var(--dark-blue) 0px,
      #14285c 120px,
      var(--blue) 250px,
      #4a628a 380px,
      #8b99bd 470px,
      var(--lavender) 540px
    );
}

a { color: inherit; }

.page-shell {
  width: min(100%, 440px);
  min-height: 100vh;
  margin: 0 auto;
  padding: 8px 20px 52px;
  position: relative;
}

/* --- Hero (sits directly on the page gradient) --- */
.hero {
  padding: 6px 6px 30px;
  text-align: center;
  color: #fff;
}

.hero-inner {
  max-width: 400px;
  margin: 0 auto;
  animation: hero-rise 640ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.hero-photo {
  display: block;
  width: min(100%, 400px);
  height: auto;
  /* the asset has transparent gutters top & bottom — crop them in */
  margin: -60px auto -46px;
  filter: drop-shadow(0 16px 30px rgba(0, 0, 0, 0.24));
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 60%, rgba(0, 0, 0, 0.4) 78%, transparent 89%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 60%, rgba(0, 0, 0, 0.4) 78%, transparent 89%);
}

.hero-title {
  margin: 0 0 10px;
  color: var(--dark-blue);
  font-family: var(--font-display);
  /* Major Mono Display is a wide monospace. Pushed larger and faux-bolded (the face
     only ships weight 400, so font-weight:700 lets the browser synthesise bold and a
     text-stroke thickens the strokes) so the hero mark reads bold, not faint. */
  font-size: clamp(21px, 6.4vw, 28px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.005em;
  text-wrap: balance;
  -webkit-text-stroke: 0.6px var(--dark-blue);
}

.hero-title-link {
  color: inherit;
  text-decoration: none;
  transition: opacity 160ms ease;
}

.hero-title-link:hover,
.hero-title-link:focus-visible { opacity: 0.86; }

.hero-descriptor {
  max-width: 300px;
  margin: 0 auto;
  color: var(--dark-blue);
  font-size: var(--fs-md);
  line-height: 1.45;
}

@keyframes hero-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

h1, h2, p { margin-top: 0; }

.section-kicker {
  margin-bottom: 10px;
  color: var(--dark-blue);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.25;
  text-transform: uppercase;
}

/* --- Featured card: the single bright focal point --- */
.featured-section {
  margin-top: 6px;
}

.featured-section .section-kicker {
  margin: 0 4px 10px;
}

.featured-card {
  display: block;
  position: relative;
  min-height: 172px;
  padding: 22px 22px 20px;
  border-radius: 26px;
  background: linear-gradient(160deg, #16306a 0%, var(--dark-blue) 58%, #050f38 100%);
  color: var(--lavender);
  text-decoration: none;
  box-shadow: var(--shadow-lift);
  transition: transform 200ms ease, box-shadow 200ms ease;
}

.featured-card:hover,
.featured-card:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 26px 56px rgba(0, 0, 0, 0.34);
}

.featured-topline {
  position: absolute;
  top: 22px;
  right: 22px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  z-index: 2;
}

/* Star icon removed from the featured card (beats the later .feature-icon grid rule) */
.featured-topline .feature-icon { display: none; }

.feature-icon,
.link-icon {
  display: grid;
  place-items: center;
  border-radius: 12px;
  line-height: 1;
  overflow: hidden;
}

/* An icon can be an uploaded image instead of a glyph (see iconMarkup in app.js).
   No box behind it — the icon fills the slot so it reads clearly. */
.link-icon-img {
  width: 100%;
  height: 100%;
  object-fit: contain;   /* letterbox any aspect ratio inside the square slot */
}

.feature-icon {
  width: 36px;
  height: 36px;
  background: rgba(9, 29, 88, 0.12);
  color: var(--dark-blue);
  font-size: var(--fs-lg);
}

.badge {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  padding: 5px 10px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.badge-light { background: var(--yellow); color: var(--dark-blue); }
.badge[hidden] { display: none; }

.featured-card h2 {
  /* badge is floated top-right; reserve room so long titles wrap clear of it */
  margin: 0 0 8px;
  padding-right: 116px;
  font-family: var(--font-mono);
  font-size: var(--fs-xl);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.03em;
}

.featured-card p {
  max-width: 510px;
  margin-bottom: 15px;
  color: rgba(218, 221, 230, 0.82);
  font-size: var(--fs-md);
  line-height: 1.42;
}

.card-action {
  color: var(--dark-blue);
  font-size: var(--fs-sm);
  font-weight: 700;
}

.featured-card .card-action { color: var(--lavender); }

.card-action::after { content: '  ↗'; }

/* --- Or, start here --- */
.starting-point { margin-top: 30px; }

.starting-point .section-kicker { margin: 0 4px 10px; }

.link-list { display: grid; gap: 10px; }

.link-card {
  display: block;
  padding: 14px 16px 13px;
  border: 1.5px solid var(--dark-blue);
  border-radius: 20px;
  background: transparent;
  color: var(--dark-blue);
  text-decoration: none;
  transition: transform 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.link-card:hover,
.link-card:focus-visible {
  transform: translateY(-2px);
  background: rgba(9, 29, 88, 0.06);
  box-shadow: var(--shadow-card);
}

.link-card-head {
  display: flex;
  align-items: center;
  gap: 11px;
}

.link-icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  background: transparent;
  color: var(--dark-blue);
  font-size: var(--fs-lg);
  /* The all-caps title has empty descent space below its baseline, so centering
     the icon on the full line box drops it ~2px below the caps' optical middle.
     Nudge it up to sit visually centred against the title text. */
  margin-top: -2px;
}

.link-card-head h3 {
  margin: 0;
  flex: 1;
  min-width: 0;
  color: var(--dark-blue);
  font-family: var(--font-mono);
  font-size: var(--fs-lg);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.03em;
}

.link-card-head .badge {
  flex-shrink: 0;
  background: rgba(9, 29, 88, 0.10);
  color: var(--dark-blue);
}

.link-card p {
  max-width: 525px;
  margin: 9px 0 9px;
  color: rgba(9, 29, 88, 0.72);
  font-size: var(--fs-md);
  line-height: 1.42;
}

/* Non-primary (secondary) CTAs get a yellow highlight so they still draw the eye
   on the light cards; the featured card keeps its lavender-on-navy CTA. */
.link-card .card-action {
  display: inline-block;
  color: var(--dark-blue);
  background: var(--yellow);
  padding: 4px 10px;
  border-radius: 6px;
}

/* --- Rotating testimonials --- */
.testimonials { margin: 34px 4px 0; }

.testimonials .section-kicker { margin: 0 0 12px; }

.testimonials-track { display: grid; }

.testimonial {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
  border-radius: 20px;
  background: linear-gradient(160deg, #16306a 0%, var(--dark-blue) 58%, #050f38 100%);
  box-shadow: var(--shadow-card);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 700ms ease, transform 700ms ease;
  pointer-events: none;
}

.testimonial.is-active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.testimonial blockquote {
  margin: 0;
  color: #fff;
  font-family: var(--font-body);
  font-size: var(--fs-md);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.01em;
}

.testimonial figcaption {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: var(--fs-sm);
  line-height: 1.4;
}

.testimonial-photo {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: var(--lavender);
}

.testimonial-person strong { display: block; color: #fff; }
.testimonial-person span { display: block; color: rgba(255, 255, 255, 0.6); }

.testimonial-dots {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin-top: 14px;
}

.testimonial-dots .dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(9, 29, 88, 0.25);
  cursor: pointer;
  transition: background 200ms ease, transform 200ms ease;
}

.testimonial-dots .dot.is-active {
  background: var(--dark-blue);
  transform: scale(1.25);
}

/* --- Video testimonial (replaces the carousel on some variants) --- */
.testimonial-video:not([hidden]) {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.testimonial-video-el {
  width: 100%;
  max-width: 300px;          /* 9:16 portrait, comfortable in the narrow column */
  aspect-ratio: 9 / 16;
  border-radius: 20px;
  background: #050f38;
  box-shadow: var(--shadow-card);
  object-fit: cover;
  display: block;
}

.testimonial-video-caption {
  text-align: center;
  font-size: var(--fs-sm);
  line-height: 1.4;
}

.testimonial-video-caption strong { display: block; color: #fff; }
.testimonial-video-caption span { display: block; color: rgba(255, 255, 255, 0.6); }

/* --- Footer --- */
.footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 16px;
  margin: 32px 4px 0;
  color: rgba(9, 29, 88, 0.65);
  font-size: var(--fs-sm);
  line-height: 1.45;
}

.footer p,
.footer a { white-space: nowrap; }

.footer p { margin: 0; }
.footer a { color: var(--dark-blue); font-weight: 700; text-decoration: none; }
.footer a:hover, .footer a:focus-visible { text-decoration: underline; }

@media (max-width: 410px) {
  .page-shell { padding-inline: 16px; }
  .footer { flex-direction: column; gap: 5px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-inner { animation: none; }
  * { transition-duration: 0.01ms !important; }
}