/* ============================================================
   Mint Mantis — Website 2026
   Static site build from Figma: "Mint Mantis Website 2026"
   Tokens extracted from the Figma variable definitions.
   ============================================================ */

:root {
  /* Backgrounds */
  --bg-page: #0e1f19;
  --bg-surface: #17332a;
  --bg-subtle: #224c3f;
  --bg-overlay: #171717;
  --bg-inverse: #daebe5;

  /* Accents & text */
  --accent-primary: #daebe5;
  --accent-secondary: #a1ccbf;
  --accent-decorative: #c1ddd4;
  --text-heading: #daebe5;
  --text-primary: #c1ddd4;
  --text-muted: #7a9e8e;
  --text-on-inverse: #17332a;
  --focus: #2abf91;
  --border-default: #224c3f;
  --border-strong: #17332a;
  --input-placeholder: #2d6655;

  /* Radii */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-pill: 200px;

  /* Spacing */
  --space-page: 80px;

  /* Type */
  --font-display: 'Syne', sans-serif;
  --font-body: 'Inter', sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 24px;
  color: var(--text-primary);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
}

img { display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font: inherit; border: 0; cursor: pointer; background: none; }

.wrap {
  max-width: 1440px;
  margin: 0 auto;
}

/* ---------- Typography ---------- */

h1, .h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(38px, 4.6vw, 60px);
  line-height: 1.2;
  color: var(--text-heading);
}

h2, .h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(30px, 3.4vw, 48px);
  line-height: 1.33;
  color: var(--text-heading);
}

.h4 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  line-height: 36px;
  color: var(--text-heading);
}

.label {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-secondary);
  font-feature-settings: "lnum" 1, "pnum" 1;
}

.body-lg { font-size: 16px; line-height: 24px; }

/* ---------- Buttons & links ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  padding: 12px 32px;
  background: var(--accent-primary);
  color: var(--bg-overlay);
  font-weight: 500;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  transition: transform .2s ease, box-shadow .2s ease;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .35);
}

.link-underline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--accent-secondary);
  font-weight: 500;
  color: var(--accent-primary);
  transition: opacity .2s ease;
}

.link-underline:hover { opacity: .75; }
.link-underline img { width: 16px; height: 16px; }

.link-underline.on-inverse {
  color: var(--text-on-inverse);
  border-bottom-color: var(--text-on-inverse);
}

/* ---------- Sections ---------- */

.section {
  padding: var(--space-page);
}

/* ============================================================
   HERO (homepage)
   ============================================================ */

.hero {
  position: relative;
  min-height: 702px;
  background: var(--bg-overlay);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 64px var(--space-page);
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: .25;
}

.hero > *:not(.hero-bg) { position: relative; z-index: 1; }

.hero-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
}

.hero-logo {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
}

.hero-logo img { width: 160px; height: auto; }

.hero-logo span {
  font-size: 12px;
  line-height: 16px;
  color: var(--accent-secondary);
}

.hero-bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  margin-top: 48px;
}

.hero-intro {
  max-width: 576px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.hero-intro p { color: var(--accent-decorative); }

.hero-nav {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.hero-nav a {
  display: block;
  padding: 8px 0;
  color: var(--accent-decorative);
  opacity: .88;
  text-align: right;
  transition: opacity .2s ease, color .2s ease;
}

.hero-nav a:hover { opacity: 1; color: var(--accent-primary); }

/* ============================================================
   WHAT WE DO
   ============================================================ */

.section-head {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 64px;
}

.numbered-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 58px;
}

.num-card {
  background: var(--bg-subtle);
  border-radius: var(--radius-md);
  padding: 48px 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.num-card .num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 100px;
  line-height: 1;
  color: var(--text-muted);
}

.num-card h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  line-height: 36px;
  color: var(--text-heading);
  margin-bottom: 8px;
}

/* ============================================================
   FEATURED PROJECT
   ============================================================ */

.featured {
  background: var(--bg-surface);
  display: flex;
  gap: 64px;
  align-items: flex-start;
}

.featured-img {
  width: 711px;
  max-width: 55%;
  height: 400px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

.featured-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
  justify-content: center;
  min-height: 400px;
}

.featured-content .lede { max-width: 392px; }

/* ============================================================
   METHOD (Publishing Paths Have Evolved)
   ============================================================ */

.method-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.method-col {
  padding: 64px 80px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.method-col.now {
  background: linear-gradient(0deg, rgba(23, 51, 42, .5) 0%, #0e1f19 99%);
  border-radius: var(--radius-sm);
}

.method-col .label.now { color: var(--focus); }

.method-col hr {
  border: 0;
  border-top: 1px solid var(--border-default);
  width: 100%;
}

.method-row {
  display: flex;
  gap: 16px;
  align-items: center;
}

.method-row img { width: 32px; height: 32px; flex-shrink: 0; }

.method-row .t { font-weight: 500; color: var(--text-primary); }
.method-row p { color: var(--text-primary); }

.method-col.now .method-row .t,
.method-col.now .method-row p { color: var(--text-heading); }

/* ============================================================
   LIGHT WRAPPER (inverse background sections)
   ============================================================ */

.light { background: var(--bg-inverse); color: var(--text-on-inverse); }
.light h2, .light .h4, .light h3 { color: var(--text-on-inverse); }
.light .label { color: var(--text-on-inverse); }
.light p { color: var(--text-on-inverse); }

/* How it works */

.how {
  display: flex;
  gap: 24px;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
}

.how-head { width: 480px; display: flex; flex-direction: column; gap: 16px; }
.how-head p { max-width: 392px; }

.how-steps {
  flex: 1;
  min-width: 420px;
  display: flex;
  flex-direction: column;
  gap: 64px;
  align-items: flex-end;
}

.how-step {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  width: 720px;
  max-width: 100%;
  padding: 8px 32px;
}

.how-step img { width: 40px; height: 40px; flex-shrink: 0; }

.how-step h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  line-height: 36px;
  margin-bottom: 8px;
}

/* Projects */

.projects-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.project-card {
  background: var(--bg-inverse);
  border-radius: var(--radius-md);
  padding: 16px 16px 32px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.project-card .thumb {
  position: relative;
  height: 240px;
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.project-card .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1; /* full saturation per client note */
}

.project-card .meta {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  justify-content: space-between;
}

.project-card h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  line-height: 36px;
  margin-top: 8px;
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border-radius: var(--radius-pill);
  padding: 8px 16px;
  font-weight: 700;
  font-size: 12px;
  line-height: 16px;
  white-space: nowrap;
  flex-shrink: 0;
}

.tag img { width: 20px; height: 20px; }

.project-card .desc { margin-bottom: 32px; }

/* ============================================================
   CTA BANNERS (photo background, centered)
   ============================================================ */

.cta-banner {
  position: relative;
  min-height: 656px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  padding: 80px 24px;
}

.cta-banner .bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .4;
  z-index: 1; /* image sits above the gradient, as in the Figma stack */
}

.cta-banner .scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(23, 51, 42, .41) 0%, var(--bg-page) 100%);
  z-index: 0;
}

.cta-banner .cta-inner { z-index: 2; }

.cta-banner.dark-scrim { background: #000; }

.cta-banner.dark-scrim .bg { opacity: .2; }

.cta-banner.dark-scrim .scrim {
  background: linear-gradient(180deg, rgba(0, 0, 0, .6) 0%, rgba(0, 0, 0, .8) 100%);
}

.cta-inner {
  position: relative;
  max-width: 768px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.cta-inner .label { color: var(--accent-decorative); }
.cta-inner p { color: var(--accent-decorative); padding: 16px 0 32px; }
.cta-inner .btn { margin-top: 24px; }
.cta-inner.tight .btn { margin-top: 0; }

/* CTA heading emphasis (Drawbridge note: lighter for contrast) */
#start h2 { color: #ffffff; }

/* Featured video embed */
.featured-video { position: relative; overflow: hidden; background: #0a1812; }
.featured-video iframe { width: 100%; height: 100%; border: 0; display: block; border-radius: var(--radius-sm); }

/* ============================================================
   WHO WE WORK WITH
   ============================================================ */

.who-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  max-width: 946px;
  margin: 0 auto 64px;
}

.who-cards {
  display: flex;
  gap: 80px;
  justify-content: center;
  flex-wrap: wrap;
}

.who-card {
  width: 340px;
  padding: 32px;
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.who-card img { width: 80px; height: 80px; object-fit: contain; }

/* ============================================================
   NEWSLETTER
   ============================================================ */

.newsletter {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.newsletter .inner { width: 100%; max-width: 768px; display: flex; flex-direction: column; align-items: center; }
.newsletter h2 { margin-top: 8px; }
.newsletter .blurb { padding-top: 24px; color: var(--accent-decorative); }

.newsletter form {
  display: flex;
  gap: 16px;
  width: 576px;
  max-width: 100%;
  margin-top: 48px;
}

.newsletter input {
  flex: 1;
  min-width: 0;
  height: 50px;
  padding: 13px 25px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--accent-secondary);
  background: var(--border-strong);
  color: var(--accent-decorative);
  font: 400 16px/24px var(--font-body);
  outline: none;
}

.newsletter input::placeholder { color: var(--input-placeholder); }
.newsletter input:focus { border-color: var(--focus); }

.newsletter .btn { height: 48px; }

.newsletter .socials {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 48px;
  flex-wrap: wrap;
  justify-content: center;
}

.newsletter .socials .icons { display: flex; gap: 16px; }
.newsletter .socials img { width: 32px; height: 32px; }

.form-note { margin-top: 16px; font-size: 14px; color: var(--focus); min-height: 20px; }

/* ============================================================
   FOOTER
   ============================================================ */

footer {
  background: var(--bg-page);
  padding: 64px var(--space-page);
}

.footer-top {
  display: flex;
  justify-content: space-between;
  gap: 48px;
  padding-bottom: 64px;
  border-bottom: 1px solid var(--border-strong);
  flex-wrap: wrap;
}

.footer-logo { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.footer-logo img { width: 160px; height: auto; }
.footer-logo span { font-size: 12px; color: var(--accent-secondary); }

.footer-cols {
  display: flex;
  gap: 100px;
  flex-wrap: wrap;
}

.footer-col h4 {
  font: 700 12px/16px var(--font-body);
  color: var(--text-muted);
  margin-bottom: 32px;
}

.footer-col ul { display: flex; flex-direction: column; gap: 12px; }

.footer-col a {
  font-size: 14px;
  line-height: 20px;
  color: var(--accent-decorative);
  transition: color .2s ease;
}

.footer-col a:hover { color: var(--accent-primary); }

.footer-col .group + .group { margin-top: 32px; }

.footer-col .social-icons { display: flex; gap: 16px; }
.footer-col .social-icons img { width: 24px; height: 24px; }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 32px;
  font-size: 12px;
  line-height: 16px;
  color: var(--text-muted);
  flex-wrap: wrap;
  gap: 16px;
}

.footer-bottom .legal { display: flex; gap: 32px; }
.footer-bottom a { color: var(--text-muted); }
.footer-bottom a:hover { color: var(--accent-decorative); }

/* ============================================================
   ABOUT PAGE
   ============================================================ */

/* Navbar */

.navbar {
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 48px;
  position: relative;
  z-index: 20;
}

.navbar .brand { display: flex; flex-direction: column; gap: 2px; }
.navbar .brand img { width: 140px; height: auto; }

.navbar .brand span {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 11px;
  line-height: 16px;
  color: var(--accent-secondary);
  text-align: right;
}

.navbar .actions { display: flex; align-items: center; gap: 16px; }
.navbar .btn { height: 48px; min-width: 200px; padding: 12px 24px; }

.menu-toggle {
  width: 44px;
  height: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.menu-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--text-heading);
  transition: transform .25s ease, opacity .25s ease;
}

.menu-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle.open span:nth-child(2) { opacity: 0; }
.menu-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-menu {
  position: absolute;
  top: 72px;
  right: 48px;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 16px 0;
  min-width: 220px;
  display: none;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .5);
}

.nav-menu.open { display: block; }

.nav-menu a {
  display: block;
  padding: 10px 24px;
  color: var(--accent-decorative);
}

.nav-menu a:hover { background: var(--bg-subtle); color: var(--accent-primary); }

/* Article */

.article-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 80px 100px 40px;
  text-align: center;
}

.article-image { padding: 0 100px; }

.article-image img {
  width: 100%;
  height: 500px;
  object-fit: cover;
  border-radius: var(--radius-md);
}

.article-intro {
  display: flex;
  justify-content: space-between;
  gap: 48px;
  padding: 80px 180px 0;
}

.article-meta { width: 200px; flex-shrink: 0; }
.article-meta .label { color: var(--text-primary); }

.article-meta .h4 { margin-top: 4px; }

.article-content {
  max-width: 740px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.article-content .divider {
  border: 0;
  border-top: 1px solid var(--border-default);
  width: 100%;
}

.article-body {
  display: flex;
  justify-content: flex-end;
  padding: 48px 180px 80px;
}

.article-body .rich { max-width: 740px; display: flex; flex-direction: column; gap: 24px; }

.article-body .rich h3 {
  font: 700 20px/28px var(--font-body);
  color: var(--text-primary);
}

/* Quote banner */

.quote-banner { min-height: 400px; }
.quote-banner .bg { opacity: .3; }

/* Believe grid */

.believe {
  display: flex;
  flex-direction: column;
  gap: 52px;
  align-items: center;
  padding: 80px 0;
}

.believe-row {
  display: flex;
  gap: 52px;
  justify-content: center;
  flex-wrap: wrap;
  padding: 0 24px;
}

.believe-card {
  width: 560px;
  max-width: 100%;
  min-height: 268px;
  background: var(--bg-subtle);
  border-radius: var(--radius-md);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.believe-card img.icon { width: 80px; height: 80px; }

.believe-card h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  line-height: 36px;
  color: var(--text-heading);
  margin-bottom: 8px;
}

.believe-card.photo {
  padding: 0;
  position: relative;
  overflow: hidden;
  box-shadow: 0 20px 25px rgba(0, 0, 0, .1), 0 8px 10px rgba(0, 0, 0, .1);
}

.believe-card.photo img {
  width: 100%;
  height: 100%;
  min-height: 268px;
  object-fit: cover;
  opacity: .6;
}

.believe-card.photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(23, 51, 42, .41) 0%, var(--bg-page) 100%);
}

/* This is different */

.different {
  display: flex;
  gap: 24px;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
}

.different-head { width: 480px; display: flex; flex-direction: column; gap: 24px; }
.different-head p { max-width: 392px; }

.different-list {
  flex: 1;
  min-width: 420px;
  display: flex;
  flex-direction: column;
  gap: 64px;
  align-items: flex-end;
}

.different-row {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  width: 720px;
  max-width: 100%;
  padding: 8px 32px;
}

.different-row .icon-circle {
  position: relative;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

.different-row .icon-circle .ring { width: 40px; height: 40px; }

.different-row .icon-circle .arrow {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 24px;
  height: 24px;
}

.different-row h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  line-height: 36px;
  margin-bottom: 8px;
}

/* Team */

.team {
  display: flex;
  flex-direction: column;
  gap: 64px;
  align-items: center;
  padding: 80px 24px;
}

.team-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
}

.team-head p { max-width: 600px; }

.team-cards { display: flex; flex-direction: column; gap: 32px; }

.team-card {
  background: var(--bg-inverse);
  border-radius: var(--radius-md);
  padding: 16px 32px 16px 16px;
  display: flex;
  gap: 32px;
  align-items: center;
  max-width: 772px;
}

.team-card .photo {
  width: 324px;
  height: 324px;
  object-fit: cover;
  object-position: top;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  background: linear-gradient(180deg, #486862 0%, #8fcec3 100%);
}

.team-card .info {
  width: 368px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.team-card h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  line-height: 36px;
  margin-top: 8px;
}

.team-card .li-link img { width: 40px; height: 40px; }
.team-card .li-link { display: inline-flex; transition: opacity .2s ease; }
.team-card .li-link:hover { opacity: .7; }

/* Partners */

.partners {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
}

.partners .label {
  text-align: center;
  color: #4b5162;
  opacity: .8;
}

.partner-logos {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  justify-content: center;
  align-items: center;
  padding: 20px 0;
  max-width: 1204px;
}

.partner-logos img {
  height: 48px;
  width: auto;
  max-width: 187px;
  object-fit: contain;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1100px) {
  :root { --space-page: 48px; }

  .method-col { padding: 48px 40px; }
  .article-intro, .article-body { padding-left: 80px; padding-right: 80px; }
  .numbered-cards { gap: 24px; }
  .how-steps, .different-list { align-items: stretch; }
  .how-step, .different-row { width: 100%; padding: 8px 0; }
  .footer-cols { gap: 56px; }
}

@media (max-width: 900px) {
  .hero { min-height: 0; padding-top: 48px; padding-bottom: 48px; gap: 56px; }
  .hero-bottom { flex-direction: column; align-items: flex-start; }
  .hero-nav { align-items: flex-start; }
  .hero-nav a { text-align: left; }

  .numbered-cards, .projects-grid { grid-template-columns: 1fr; }
  .num-card { width: 100%; }

  .featured { flex-direction: column; }
  .featured-img { width: 100%; max-width: 100%; }
  .featured-content { min-height: 0; }

  .method-cols { grid-template-columns: 1fr; }

  .how-head, .different-head { width: 100%; }
  .how-steps, .different-list { min-width: 0; }

  .team-card { flex-direction: column; align-items: flex-start; padding: 16px; }
  .team-card .photo { width: 100%; height: 280px; }
  .team-card .info { width: 100%; }

  .article-intro { flex-direction: column; padding: 48px 24px 0; }
  .article-body { padding: 32px 24px 64px; }
  .article-header { padding: 56px 24px 32px; }
  .article-image { padding: 0 24px; }
  .article-image img { height: 320px; }

  .navbar { padding: 0 20px; }
  .navbar .btn { min-width: 0; }
  .nav-menu { right: 20px; }

  .newsletter form { flex-direction: column; align-items: stretch; }

  .footer-top { flex-direction: column; }
  .footer-logo { align-items: flex-start; }

  .cta-banner { min-height: 480px; }
}

@media (max-width: 560px) {
  :root { --space-page: 24px; }
  .navbar .btn { display: none; }
  .who-cards { gap: 24px; }
  .believe-row { gap: 24px; }
}

/* ============================================================
   AUTHORS PAGE (4-week fundraising sprint)
   ============================================================ */

.authors-hero {
  position: relative;
  padding: 96px 80px 112px;
  overflow: hidden;
  background: var(--bg-page);
}

.authors-hero .bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .5;
}

.authors-hero .inner {
  position: relative;
  z-index: 1;
  max-width: 1030px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 24px;
}

.authors-hero .lockup {
  display: flex;
  align-items: center;
  gap: 48px;
  flex-wrap: wrap;
  justify-content: center;
}

.authors-hero .logos { display: flex; align-items: center; gap: 24px; }
.authors-hero .logos .mm { width: 128px; height: auto; }
.authors-hero .logos .pub { width: 128px; height: auto; }

.authors-hero h1 { text-align: center; }

.authors-hero p { color: var(--accent-decorative); max-width: 576px; }

.btn-wide { min-width: 320px; margin-top: 8px; }

/* Stats bar */

.stats-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 24px 80px 56px;
  flex-wrap: wrap;
}

.stats-bar span {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  line-height: 36px;
  color: var(--text-heading);
  padding: 16px 48px;
  border-left: 1px solid var(--border-default);
  white-space: nowrap;
}

.stats-bar span:first-child { border-left: 0; }

/* Is this you */

.isyou-grid {
  display: flex;
  gap: 52px;
  justify-content: center;
  align-items: stretch;
  flex-wrap: wrap;
}

.isyou-photo {
  position: relative;
  width: 436px;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 20px 25px rgba(0, 0, 0, .1), 0 8px 10px rgba(0, 0, 0, .1);
  flex-shrink: 0;
}

.isyou-photo img {
  width: 100%;
  height: 100%;
  min-height: 420px;
  object-fit: cover;
  opacity: .8;
}

.isyou-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(23, 51, 42, .41) 0%, var(--bg-page) 100%);
}

.isyou-cards {
  width: 632px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 52px;
  justify-content: center;
}

.believe-card.full { width: 100%; min-height: 0; }

/* What you build: tabs */

.build { display: flex; gap: 32px; justify-content: space-between; flex-wrap: wrap; }
.build-head { width: 480px; }
.build-tabs { flex: 1; min-width: 420px; max-width: 720px; }

.tab-row { display: flex; }

.tab-btn {
  flex: 1;
  height: 52px;
  background: var(--bg-inverse);
  color: var(--bg-overlay);
  font-weight: 500;
  font-size: 16px;
  border: 0;
  transition: background .2s ease;
}

.tab-btn:first-child { border-radius: var(--radius-md) 0 0 var(--radius-md); }
.tab-btn:last-child { border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.tab-btn.active { background: var(--accent-secondary); }

.tab-track {
  height: 4px;
  background: var(--bg-inverse);
  margin-top: 16px;
  border-radius: 2px;
  overflow: hidden;
}

.tab-progress {
  height: 4px;
  width: 25%;
  background: var(--accent-secondary);
  transition: width .3s ease;
}

.week-panel {
  background: var(--bg-inverse);
  border: 1px solid rgba(23, 51, 42, .12);
  border-radius: var(--radius-md);
  padding: 32px;
  margin-top: 16px;
}

.week-panel h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  line-height: 36px;
  margin-bottom: 8px;
}

.you-build {
  background: #fefbec;
  border-radius: var(--radius-sm);
  padding: 16px 24px;
  margin-top: 24px;
}

.you-build ul { margin-top: 12px; }

.you-build li {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 0;
  border-top: 1px solid rgba(23, 51, 42, .15);
}

.you-build li::before {
  content: "";
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--bg-subtle) url("../assets/img/icons/au-check.svg") center / 18px no-repeat;
}

/* Why cohort-based */

.cohort-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 48px;
}

.cohort-card {
  background: var(--bg-inverse);
  border: 1px solid rgba(23, 51, 42, .12);
  border-radius: var(--radius-md);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  min-height: 276px;
}

.cohort-card > img, .cohort-card .conn-icon { width: 80px; height: 80px; }

.cohort-card .conn-icon { position: relative; display: block; }
.cohort-card .conn-icon .a { position: absolute; left: 20%; right: 6%; top: 37%; bottom: 12%; width: 74%; height: 51%; }
.cohort-card .conn-icon .b { position: absolute; left: 6%; right: 25%; top: 12%; bottom: 37%; width: 69%; height: 51%; }

.cohort-card h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  line-height: 36px;
  margin-bottom: 8px;
}

/* A note on AI */

.ai-note { display: flex; gap: 32px; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; }
.ai-head { width: 480px; }

.ai-card {
  background: #fefbec;
  border-radius: var(--radius-sm);
  padding: 16px 64px;
  width: 600px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.ai-card hr { border: 0; border-top: 1px solid rgba(23, 51, 42, .15); }

.ai-row { display: flex; align-items: center; gap: 16px; }
.ai-row img { width: 32px; height: 32px; flex-shrink: 0; }

@media (max-width: 1100px) {
  .cohort-cards { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .build-head, .ai-head { width: 100%; }
}

@media (max-width: 900px) {
  .authors-hero { padding: 64px 24px 80px; }
  .stats-bar { padding: 16px 24px 40px; }
  .stats-bar span { border-left: 0; padding: 8px 16px; font-size: 20px; }
  .isyou-photo { width: 100%; }
  .isyou-photo img { min-height: 280px; }
  .isyou-cards { gap: 24px; }
  .cohort-cards { grid-template-columns: 1fr; }
  .build-tabs { min-width: 0; }
  .ai-card { padding: 16px 24px; }
}

/* ============================================================
   LEGAL PAGE (privacy / terms)
   ============================================================ */

.legal-body {
  max-width: 760px;
  margin: 0 auto;
  padding: 24px 24px 96px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.legal-body .updated { color: var(--text-muted); font-size: 14px; }

.legal-body h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  line-height: 36px;
  color: var(--text-heading);
  margin-top: 24px;
}

.legal-body p { color: var(--text-primary); }
.legal-body a { color: var(--accent-secondary); text-decoration: underline; }

.legal-body .disclaimer {
  margin-top: 24px;
  padding: 20px 24px;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  font-size: 14px;
  color: var(--text-muted);
}

/* ============================================================
   2026 POLISH: responsive, accessibility, mobile refinements
   ============================================================ */

/* Prevent images from overflowing their container on small screens
   (the single most common cause of horizontal scroll on mobile). */
img { max-width: 100%; }

/* Hero headline: stacked on desktop, natural wrap on phones so the
   words never collide or break awkwardly. */
.hero-top h1 .ln { display: block; }

@media (max-width: 560px) {
  .hero-top h1 .ln { display: inline; }
}

/* Comfortable tap targets and clear keyboard focus for accessibility. */
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px;
}

a, button, input { -webkit-tap-highlight-color: rgba(42, 191, 145, 0.25); }

.hero-nav a,
.footer-col a,
.legal a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* Dropdown menu links must stack as a full-width vertical list. */
.nav-menu a {
  display: flex;
  width: 100%;
  align-items: center;
  min-height: 44px;
}

/* Homepage hero hamburger: hidden on desktop (hero shows inline nav),
   revealed only on phones. The dropdown is anchored to the hero. */
.hero .hero-menu-toggle { display: none; }
.hero .hero-nav-menu {
  position: absolute;
  top: 64px;
  right: 24px;
  z-index: 30;
}

/* ----- Phone layout (<= 700px) ----- */
@media (max-width: 700px) {
  /* Never allow sideways scrolling on phones. */
  html, body { overflow-x: hidden; }

  /* Homepage nav becomes a hamburger top-right; hide the inline list. */
  .hero .hero-menu-toggle {
    display: flex;
    position: absolute;
    top: 28px;
    right: 24px;
    z-index: 31;
  }
  .hero .hero-nav { display: none; }

  /* Project card title + tag wrap so the tag pill keeps its full text. */
  .project-card .meta { flex-wrap: wrap; gap: 12px; }

  /* HERO: the desktop version pins the logo top-right and forces a
     702px tall "spread", which on a phone pushes the logo off-screen
     and leaves a large empty gap. On phones we make it a compact,
     top-aligned stack: logo, then headline, then intro + CTA + nav,
     each separated by even spacing. */
  .hero {
    min-height: auto;
    justify-content: flex-start;
    padding: 36px 24px 56px;
  }
  .hero-top {
    flex-direction: column-reverse;   /* logo sits above the headline */
    align-items: flex-start;
    gap: 28px;
  }
  .hero-top h1 {
    font-size: clamp(32px, 8.6vw, 42px);
    line-height: 1.14;
  }
  .hero-logo { align-items: flex-start; }
  .hero-logo img { width: 124px; }
  .hero-bottom { margin-top: 40px; gap: 28px; }
  .hero-intro { gap: 24px; }

  /* Easy-to-tap newsletter field + button. */
  .newsletter input,
  .newsletter .btn { width: 100%; min-height: 52px; }
  .stats-bar { gap: 12px 20px; }
}

/* Respect users who prefer reduced motion. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}