/* growleadlive.com
   v2, 2026-08-13. Rebuilt mobile first after the v1 layout only worked on desktop.
   Every rule below is the phone layout. Breakpoints only ADD desktop behaviour.
   Type: Red Hat Display for headings, Red Hat Text for body.
   Navy #042e86 is 12:1 on white (AAA). Orange #c2410c is 5.2:1 with white (AA).

   v3, 2026-08-15. Polish pass against the make-interfaces-feel-better skill
   (vendored from WatermelonCorp/watermelon-platform, MIT, see
   Skills/make-interfaces-feel-better/). Nothing structural changed: no colour
   was altered, no breakpoint moved, no layout rule touched. What changed is
   depth, motion, focus and typography detail. The four that matter most:
     - keyboard focus was invisible everywhere except the resources search box
     - card and link edges became shadows, so they survive a tinted background
     - filter pills and phone nav links were under the 40px tap minimum
     - one transition existed site-wide, so every hover snapped
   Every added transition names its properties. `transition: all` is never
   used, and the reduced-motion block at the foot switches all of it off. */

:root {
  --navy: #042e86;
  --navy-dark: #021d56;
  --navy-tint: #f2f5fb;
  --navy-tint-2: #dee7f7;
  --accent: #c2410c;
  --accent-dark: #9a3412;
  --ink: #16181d;
  --grey: #5b6472;
  --grey-light: #aebbd6;
  --border: #dbe1ec;
  --white: #ffffff;
  --max: 1060px;
  --radius: 12px;

  /* v3 polish tokens, 2026-08-15.
     Radii are concentric: a container is inner radius plus the padding
     between them. Cards pad by ~18px, so an 8px inner element sits inside
     a 16px container. --radius stays 12px for standalone buttons and inputs,
     which have no parent surface to be concentric with.
     Shadows replace borders on anything that reads as elevated. A shadow is
     transparent so it works on white, on the navy tint and over a photo;
     a solid --border only ever looked right on white. Dividers stay borders. */
  --radius-card: 16px;
  --radius-sm: 8px;
  --shadow-border:
    0px 0px 0px 1px rgba(0, 0, 0, 0.06),
    0px 1px 2px -1px rgba(0, 0, 0, 0.06),
    0px 2px 4px 0px rgba(0, 0, 0, 0.04);
  --shadow-border-hover:
    0px 0px 0px 1px rgba(0, 0, 0, 0.08),
    0px 1px 2px -1px rgba(0, 0, 0, 0.08),
    0px 2px 4px 0px rgba(0, 0, 0, 0.06);
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --speed: 150ms;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: hidden;
  /* smoothing belongs on the root, not on body. On body it was inherited by
     most things but not by elements that escape the body flow. */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  overflow-x: hidden;
  font-family: "Red Hat Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--white);
}

h1, h2, h3, .wordmark, .stat-num, .price, .big {
  font-family: "Red Hat Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--navy);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 0.55em;
  overflow-wrap: break-word;
  /* balance evens out the line lengths so a heading never drops one orphan
     word onto its own line. Browsers cap it at 6 lines, and no heading here
     is close to that. */
  text-wrap: balance;
}

h1 { font-size: 1.75rem; font-weight: 800; }
h2 { font-size: 1.3rem;  font-weight: 700; margin-top: 0; }
h3 { font-size: 1.05rem; font-weight: 700; }

p { margin: 0 0 0.9rem; }
p:last-child { margin-bottom: 0; }

/* pretty stops a single word dangling on the last line. Unlike balance it has
   no line limit, so it is safe on the long StreetMBA reading pages. */
p, li, figcaption, blockquote, .lede, .hero-sub, .stat-lab, .meta {
  text-wrap: pretty;
}

a {
  color: var(--navy); text-underline-offset: 2px;
  transition-property: color;
  transition-duration: var(--speed);
  transition-timing-function: var(--ease);
}
a:hover { color: var(--accent); }

/* A pure black hairline at 10%, never a tinted near-black. A tinted outline
   picks up whatever surface is behind it and reads as dirt on the photo edge.
   outline rather than border so it adds nothing to the layout box. */
img {
  max-width: 100%; height: auto; display: block;
  outline: 1px solid rgba(0, 0, 0, 0.1);
  outline-offset: -1px;
}

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 1.15rem; }
.narrow { max-width: 660px; }

/* ---------- header ---------- */

.site-header { border-bottom: 1px solid var(--border); background: var(--white); }
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 54px;
}
.wordmark {
  font-size: 1.0625rem; font-weight: 800; margin: 0;
  text-decoration: none; color: var(--navy); letter-spacing: -0.03em; white-space: nowrap;
}
.wordmark span { color: var(--accent); }

.nav { list-style: none; margin: 0; padding: 0; }
.nav-desktop { display: none; }

/* phone nav: pill row that scrolls sideways, never wraps or overflows the page */
.nav-mobile { border-bottom: 1px solid var(--border); overflow-x: auto; -webkit-overflow-scrolling: touch; }
.nav-mobile::-webkit-scrollbar { display: none; }
.nav-mobile ul {
  display: flex; gap: 0.35rem; list-style: none; margin: 0;
  padding: 0.55rem 1.15rem; white-space: nowrap; width: max-content; min-width: 100%;
}
.nav-mobile a {
  display: flex; align-items: center; padding: 0.4rem 0.75rem; border-radius: 100px;
  text-decoration: none; font-size: 0.8125rem; font-weight: 500;
  color: var(--grey); background: var(--navy-tint);
  /* same 40px floor as the filter pills. The row scrolls sideways and the
     nav bar is only 0.55rem taller than the link, so the extra tap height
     is bought here rather than by growing the bar. */
  min-height: 40px;
}
.nav-mobile a:active { scale: 0.96; }
.nav-mobile a[aria-current="page"] { background: var(--navy); color: var(--white); }

@media (min-width: 760px) {
  .site-header { position: sticky; top: 0; z-index: 50; }
  .nav-desktop { display: flex; gap: 1.1rem; font-size: 0.9375rem; }
  .nav-desktop a { text-decoration: none; color: var(--grey); font-weight: 500; white-space: nowrap; }
  .nav-desktop a:hover, .nav-desktop a[aria-current="page"] { color: var(--navy); }
  .nav-mobile { display: none; }
}

/* ---------- sections ---------- */

section { padding: 2rem 0; }
section.tint { background: var(--navy-tint); }
section.navy { background: var(--navy); }

/* navy sections: force every text colour, including .stat-num which is
   otherwise navy-on-navy. This was the v1 bug. */
section.navy,
section.navy p,
section.navy li,
section.navy h1,
section.navy h2,
section.navy h3,
section.navy .stat-num,
section.navy .price,
section.navy .big { color: var(--white); }
section.navy .stat-lab,
section.navy .meta { color: var(--grey-light); }
section.navy a:not(.btn) { color: var(--white); }
section.navy .eyebrow { color: var(--navy-tint-2); }

.eyebrow {
  font-family: "Red Hat Display", sans-serif;
  font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--accent); margin: 0 0 0.5rem;
}
.lede { font-size: 1.0625rem; }

@media (min-width: 760px) {
  section { padding: 3rem 0; }
  h1 { font-size: 2.5rem; }
  h2 { font-size: 1.75rem; }
  h3 { font-size: 1.15rem; }
  .lede { font-size: 1.1875rem; }
}

/* ---------- hero ---------- */

.hero { padding: 1.75rem 0 2rem; }
.hero-photo { width: 190px; border-radius: var(--radius); margin: 0 0 1.25rem; }
.hero h1 { margin-bottom: 0.7rem; }
.hero-sub { color: var(--ink); margin-bottom: 1.25rem; }

@media (min-width: 760px) {
  .hero { padding: 3.5rem 0 3rem; }
  .hero .wrap { display: grid; grid-template-columns: 1fr 280px; gap: 3rem; align-items: center; }
  .hero-photo { width: 100%; margin: 0; grid-column: 2; grid-row: 1; }
  .hero-text { grid-column: 1; grid-row: 1; }
}

/* ---------- buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; text-align: center;
  min-height: 48px; padding: 0.7rem 1.25rem;
  font-family: "Red Hat Display", sans-serif; font-weight: 700; font-size: 0.9375rem;
  border-radius: var(--radius); text-decoration: none; border: 2px solid transparent;
  cursor: pointer;
  /* was `transition: background 0.15s`, which left the ghost button's colour
     change and the border snapping while the background faded. Named
     properties only, never `all`: `all` makes the browser watch every
     property and animates things nobody asked for. */
  transition-property: background-color, border-color, color, scale;
  transition-duration: var(--speed);
  transition-timing-function: var(--ease);
}
/* 0.96 exactly. Below 0.95 the press reads as a bounce rather than a press.
   A transition rather than a keyframe, so releasing mid-press reverses
   smoothly instead of restarting. */
.btn:active { scale: 0.96; }
.btn-primary { background: var(--navy); color: var(--white); }
.btn-primary:hover { background: var(--navy-dark); color: var(--white); }
.btn-buy { background: var(--accent); color: var(--white); }
.btn-buy:hover { background: var(--accent-dark); color: var(--white); }
.btn-ghost { border-color: var(--navy); color: var(--navy); }
.btn-ghost:hover { background: var(--navy); color: var(--white); }
section.navy .btn-ghost { border-color: var(--white); color: var(--white); }
section.navy .btn-ghost:hover { background: var(--white); color: var(--navy); }

/* buttons go full width on a phone, inline once there's room */
.btn-row { display: flex; flex-direction: column; gap: 0.6rem; }
.btn-row .btn { width: 100%; }
@media (min-width: 520px) {
  .btn-row { flex-direction: row; flex-wrap: wrap; }
  .btn-row .btn { width: auto; }
}

/* ---------- cards ---------- */

.cards { display: grid; gap: 0.9rem; }
@media (min-width: 620px) { .cards-2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 760px) { .cards-3 { grid-template-columns: repeat(3, 1fr); } }

/* A card is an elevated surface, so its edge is a shadow, not a border. The
   first shadow layer is the 1px ring the border used to be; the other two
   give it lift. Radius goes 12 to 16 so the card reads as the outer surface
   and the 8px children sit concentrically inside it. */
.card {
  box-shadow: var(--shadow-border); border-radius: var(--radius-card);
  padding: 1.15rem; background: var(--white);
  display: flex; flex-direction: column;
  transition-property: box-shadow;
  transition-duration: var(--speed);
  transition-timing-function: var(--ease);
}
.card h3 { margin-bottom: 0.4rem; }
.card p { color: var(--grey); font-size: 0.9375rem; flex: 1; }
.card .btn { margin-top: 0.9rem; width: 100%; border-radius: var(--radius-sm); }
.card img { border-radius: var(--radius-sm); margin-bottom: 0.9rem; max-height: 200px; object-fit: cover; width: 100%; }
.card h3 .tag { vertical-align: middle; margin-left: 0.3rem; }
/* the one-line promise at the top of a product card */
.card-hook { color: var(--ink) !important; font-weight: 700; flex: 0 0 auto !important; margin-bottom: 0.5rem; }
/* price must not stretch, or it pushes the button away from the card foot */
.card .price { flex: 0 0 auto; margin-top: 0.5rem; }

/* ---------- brands worked with ---------- */

.brandlist { display: flex; flex-wrap: wrap; gap: 0.45rem; list-style: none; padding: 0; margin: 0; }
.brandlist li {
  font-family: "Red Hat Display", sans-serif; font-weight: 700; font-size: 0.875rem;
  color: var(--navy); background: var(--navy-tint);
  border: 1px solid var(--border); border-radius: 100px;
  padding: 0.35rem 0.8rem; white-space: nowrap;
}
section.navy .brandlist li { color: var(--white); background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.25); }
section.tint .brandlist li { background: var(--white); }
a.card { text-decoration: none; }
/* the hover used to swap the border to navy, which snapped because nothing
   transitioned it. A deeper shadow lifts instead, and it fades. */
a.card:hover { box-shadow: var(--shadow-border-hover); }
a.card:active { scale: 0.99; }

/* offers */
.offer {
  box-shadow: var(--shadow-border); border-radius: var(--radius-card);
  padding: 1.15rem; margin-bottom: 0.9rem; background: var(--white);
}
.offer:last-child { margin-bottom: 0; }
/* the featured ring stays a hard navy line: it carries meaning, so it should
   not read as elevation. Written as a shadow so it composes with the base. */
.offer.featured { box-shadow: 0 0 0 2px var(--navy), var(--shadow-border); }
.offer .btn { border-radius: var(--radius-sm); }
.offer-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 0.75rem; margin-bottom: 0.5rem; }
.offer h3 { margin: 0; }
.offer p { font-size: 0.9375rem; color: var(--grey); margin: 0 0 1rem; }
.offer .btn { width: 100%; }
@media (min-width: 520px) { .offer .btn { width: auto; } }

.price { font-size: 1.125rem; font-weight: 800; color: var(--ink); margin: 0; }
.price s { color: var(--grey); font-weight: 500; font-size: 0.875rem; margin-left: 0.3rem; }
.meta { font-size: 0.8125rem; color: var(--grey); }
.tag {
  display: inline-block; font-size: 0.625rem; font-weight: 700; letter-spacing: 0.07em;
  text-transform: uppercase; padding: 0.2rem 0.45rem; border-radius: 4px;
  background: var(--navy-tint-2); color: var(--navy);
}

/* ---------- link in bio ---------- */

.links-page { max-width: 500px; margin: 0 auto; padding: 1.5rem 1.15rem 3rem; }
.links-head { text-align: center; margin-bottom: 1.5rem; }
.links-head img { width: 92px; height: 92px; border-radius: 50%; margin: 0 auto 0.75rem; object-fit: cover; }
.links-head h1 { font-size: 1.3rem; margin-bottom: 0.2rem; }
.links-head p { color: var(--grey); font-size: 0.875rem; }
/* The link-in-bio rows are the most tapped surface on the site: Instagram
   traffic lands here on a phone and never sees the homepage. They get the
   shadow, the lift on hover and the press feedback. */
.link-item {
  display: block; min-height: 64px; padding: 0.9rem 1.1rem; margin-bottom: 0.7rem;
  box-shadow: var(--shadow-border); border-radius: var(--radius-card);
  text-decoration: none; background: var(--white);
  transition-property: box-shadow, background-color, scale;
  transition-duration: var(--speed);
  transition-timing-function: var(--ease);
}
.link-item:hover { box-shadow: var(--shadow-border-hover); background: var(--navy-tint); }
.link-item:active { scale: 0.98; }
.link-item .t { font-family: "Red Hat Display", sans-serif; font-weight: 700; color: var(--navy); display: block; }
.link-item .d { font-size: 0.8125rem; color: var(--grey); display: block; }
.link-item.pinned { box-shadow: 0 0 0 2px var(--accent), var(--shadow-border); }
.link-item.pinned:hover { box-shadow: 0 0 0 2px var(--accent), var(--shadow-border-hover); }
.link-item.pinned .t { color: var(--accent); }

/* ---------- tables ---------- */

.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
th, td { text-align: left; padding: 0.6rem 0.7rem; border-bottom: 1px solid var(--border); }
th {
  font-family: "Red Hat Display", sans-serif; font-weight: 700; color: var(--navy);
  font-size: 0.75rem; letter-spacing: 0.04em; text-transform: uppercase;
}
/* equal-width digits so a numeric column stays aligned down the page, and so
   nothing shifts when the resources table is re-sorted */
td.num, th.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
table.compact th, table.compact td { padding: 0.4rem 0.5rem; font-size: 0.875rem; }
/* the first cell of each demographic row is a row header for screen readers,
   but it reads as a label rather than a column heading, so it keeps body
   styling instead of the uppercase treatment on th above */
table.compact th[scope="row"] {
  font-family: inherit; font-weight: 400; color: inherit;
  letter-spacing: normal; text-transform: none;
}

/* every wide table becomes stacked cards on a phone */
@media (max-width: 600px) {
  table.stack thead { display: none; }
  table.stack tr {
    display: block; border: 1px solid var(--border); border-radius: var(--radius);
    padding: 0.6rem 0.9rem; margin-bottom: 0.7rem;
  }
  table.stack td {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 1rem; border: 0; padding: 0.3rem 0; text-align: right;
  }
  table.stack td::before {
    content: attr(data-label);
    font-family: "Red Hat Display", sans-serif; font-weight: 700;
    color: var(--navy); font-size: 0.75rem; text-transform: uppercase;
    letter-spacing: 0.04em; text-align: left; flex: 0 0 auto;
  }
}

/* ---------- resources: search, filter pills, sorting ---------- */

.filterbar { margin-bottom: 1.1rem; }

.search-input {
  width: 100%; min-height: 48px; padding: 0.65rem 0.9rem;
  font-family: inherit; font-size: 1rem; color: var(--ink);
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--white); -webkit-appearance: none; appearance: none;
}
.search-input:focus { outline: 2px solid var(--navy); outline-offset: 1px; border-color: var(--navy); }
.search-input::placeholder { color: var(--grey); }

/* ---------- forms ---------- */

/* Every form on the site is a Tally embed, so this is the only form styling
   there is. Tally draws its own controls inside the iframe and we cannot
   reach into it, which is the trade for having no backend.

   Deliberately no min-height. The iframe's own height attribute already
   reserves the space before it loads, and Tally's dynamicHeight then sets the
   real height on the element. A min-height here does nothing extra when the
   guess is too low and leaves a slab of dead white card when it is too high,
   because the container cannot shrink back below it. The container follows
   the iframe, and the only number that matters is the height attribute in
   the HTML. */
.form-embed {
  margin-top: 1.1rem; border-radius: var(--radius-card);
  overflow: hidden; background: var(--white);
}
.form-embed iframe { display: block; width: 100%; border: 0; }

/* pills scroll sideways on a phone rather than wrapping into four rows */
.pills {
  display: flex; gap: 0.35rem; margin: 0.7rem 0 0;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  white-space: nowrap; padding-bottom: 0.2rem;
}
.pills::-webkit-scrollbar { display: none; }
.pill {
  flex: 0 0 auto; font-family: "Red Hat Display", sans-serif;
  font-size: 0.8125rem; font-weight: 700; color: var(--grey);
  background: var(--navy-tint); border: 1px solid var(--border);
  border-radius: 100px; padding: 0.4rem 0.8rem; cursor: pointer;
  /* the visible pill is about 34px tall, under the 40px minimum. The gap
     between pills is 0.35rem, so a 40px pseudo-element extends the tap
     target vertically without ever colliding with its neighbour. */
  position: relative; min-height: 34px;
  transition-property: background-color, border-color, color, scale;
  transition-duration: var(--speed);
  transition-timing-function: var(--ease);
}
.pill::after {
  content: ""; position: absolute; left: 0; right: 0;
  top: 50%; transform: translateY(-50%); height: 40px;
}
.pill:hover { color: var(--navy); }
.pill:active { scale: 0.96; }
.pill.is-on { background: var(--navy); border-color: var(--navy); color: var(--white); }

/* the select is a phone-only control: above 600px the table header sorts */
.sortbar { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.7rem; }
.sortbar label {
  font-family: "Red Hat Display", sans-serif; font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--navy);
}
.sortbar select {
  font-family: inherit; font-size: 0.875rem; color: var(--ink);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 0.4rem 0.6rem; background: var(--white); min-height: 40px;
}
@media (min-width: 601px) { .sortbar { display: none; } }

/* this count is rewritten on every keystroke in the search box. Without
   tabular figures the line reflows as the number changes width. */
#res-count { margin: 0.7rem 0 0; font-variant-numeric: tabular-nums; }

th.sortable {
  cursor: pointer; user-select: none;
  transition-property: color;
  transition-duration: var(--speed);
  transition-timing-function: var(--ease);
}
th.sortable:hover { color: var(--accent); }
th.sortable::after { content: " \2195"; opacity: 0.35; font-size: 0.8em; }
th.sortable[aria-sort="ascending"]::after { content: " \2191"; opacity: 1; }
th.sortable[aria-sort="descending"]::after { content: " \2193"; opacity: 1; }

/* a resource that lives in two places, e.g. an app on both stores. Wrapped in
   one span so the stacked card layout treats the cell as a single flex item. */
.dual-wrap { display: block; }
.dual { display: block; margin-top: 0.15rem; }
.dual a { font-size: 0.8125rem; font-weight: 500; margin-right: 0.75rem; }

.empty { color: var(--grey); font-size: 0.9375rem; padding: 1.5rem 0; }

/* table.stack sets tr to display:block below 600px, which beats the hidden
   attribute on specificity. Without this, filtered-out rows stay visible on
   a phone and the filter looks broken. */
[hidden] { display: none !important; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* hidden until it takes keyboard focus, then it drops in over the header.
   Without it a keyboard user tabs 12 nav links on every page load before
   reaching content. z-index clears the sticky header at 760px and up. */
.skip-link {
  position: absolute; left: 0.75rem; top: -100%;
  z-index: 100; padding: 0.6rem 1rem;
  background: var(--navy); color: #fff;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  font-weight: 700; text-decoration: none;
}
.skip-link:focus-visible { top: 0; }

/* ---------- stats ---------- */

.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.1rem 0.9rem; }
@media (min-width: 760px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat-num { font-size: 1.5rem; font-weight: 800; margin: 0 0 0.1rem; }
.stat-lab { font-size: 0.75rem; color: var(--grey); line-height: 1.35; margin: 0; }
@media (min-width: 760px) { .stat-num { font-size: 2rem; } .stat-lab { font-size: 0.8125rem; } }

/* ---------- photos ---------- */

.strip { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
@media (min-width: 620px) { .strip { grid-template-columns: repeat(3, 1fr); } }
.strip img { border-radius: 8px; aspect-ratio: 1 / 1; object-fit: cover; width: 100%; }
@media (min-width: 620px) { .strip img { aspect-ratio: 4 / 3; } }

/* capped so a portrait photo can never eat the whole screen.
   The class goes on the <img> itself, so these are element-qualified on purpose.
   A descendant selector here matches nothing and silently drops the crop. */
.figure { margin: 0 0 1.25rem; }
img.figure {
  border-radius: var(--radius); width: 100%; display: block;
  height: 300px; object-fit: cover; object-position: center 25%;
}
figure.figure img {
  border-radius: var(--radius); width: 100%; display: block;
  height: 300px; object-fit: cover; object-position: center 25%;
}
.figure figcaption { font-size: 0.8125rem; color: var(--grey); margin-top: 0.45rem; }
@media (min-width: 760px) {
  img.figure, figure.figure img { height: 420px; }
}

/* ---------- quotes and lists ---------- */

.quote { border-left: 3px solid var(--navy); padding: 0.1rem 0 0.1rem 1rem; margin: 0 0 1.1rem; }
.quote p { font-size: 0.9375rem; margin-bottom: 0.4rem; }
.quote cite { font-style: normal; font-size: 0.8125rem; color: var(--grey); }

.plain { list-style: none; padding: 0; margin: 0 0 1rem; }
.plain li { padding-left: 1.25rem; position: relative; margin-bottom: 0.5rem; font-size: 0.9375rem; }
.plain li::before {
  content: ""; position: absolute; left: 0; top: 0.6em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
}
.plain.no li::before { background: var(--grey); }
section.navy .plain li::before { background: var(--white); }

/* ---------- long-form reading (StreetMBA free days) ---------- */

.reading p { margin-bottom: 1.05rem; }
.reading h2 { margin-top: 2.25rem; }
.reading h2:first-child { margin-top: 0; }
.reading ul { padding-left: 1.15rem; margin: 0 0 1.05rem; }
.reading li { margin-bottom: 0.5rem; }
.reading .eq {
  font-family: "Red Hat Display", sans-serif; font-weight: 800; font-size: 1.15rem;
  color: var(--navy); text-align: center; margin: 1.4rem 0; letter-spacing: -0.01em;
}
/* debit and credit pairs, and any line that should read as a ledger entry */
.reading .entry {
  border-left: 3px solid var(--navy-tint-2); padding: 0.15rem 0 0.15rem 0.9rem;
  margin: 0 0 1.05rem; font-size: 0.9375rem;
}
.reading .entry span { display: block; }
.reading-nav { font-size: 0.8125rem; color: var(--grey); margin-bottom: 0.4rem; }
.reading-nav a { color: var(--grey); }

/* the 24 module list */
.modules { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.75rem; }
@media (min-width: 700px) { .modules { grid-template-columns: repeat(2, 1fr); gap: 0.75rem 2rem; } }
.modules li { border-top: 1px solid var(--border); padding-top: 0.6rem; }
.modules .m-name {
  font-family: "Red Hat Display", sans-serif; font-weight: 700; color: var(--navy);
  display: block; font-size: 0.9375rem;
}
.modules .m-desc { display: block; font-size: 0.8125rem; color: var(--grey); line-height: 1.45; }
.modules li.done .m-name::after {
  content: "Done"; font-size: 0.5625rem; font-weight: 700; letter-spacing: 0.07em;
  text-transform: uppercase; background: var(--navy-tint-2); color: var(--navy);
  padding: 0.15rem 0.35rem; border-radius: 4px; margin-left: 0.4rem; vertical-align: middle;
}
.modules li.now .m-name::after {
  content: "In progress"; font-size: 0.5625rem; font-weight: 700; letter-spacing: 0.07em;
  text-transform: uppercase; background: var(--accent); color: var(--white);
  padding: 0.15rem 0.35rem; border-radius: 4px; margin-left: 0.4rem; vertical-align: middle;
}

/* ---------- footer ---------- */

.site-footer {
  border-top: 1px solid var(--border); margin-top: 2rem;
  padding: 1.75rem 0 2rem; font-size: 0.875rem; color: var(--grey);
}
.site-footer a { color: var(--navy); }
.footer-links {
  display: flex; flex-wrap: wrap; gap: 0.6rem 1rem;
  list-style: none; padding: 0; margin: 0 0 1rem;
}
.disclaimer { font-size: 0.75rem; margin: 0; }

/* ---------- focus ---------- */

/* Before v3 the only focus style on the site was on the resources search box.
   Every link, button and filter pill fell back to the browser default, which
   Safari draws faintly and which disappears entirely against the navy
   sections. :focus-visible rather than :focus, so a mouse click does not
   leave a ring behind but a Tab key does. */
a:focus-visible,
.btn:focus-visible,
.pill:focus-visible,
.link-item:focus-visible,
.nav-mobile a:focus-visible,
th.sortable:focus-visible,
.sortbar select:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
/* navy on navy is invisible, so the ring inverts inside dark sections */
section.navy a:focus-visible,
section.navy .btn:focus-visible {
  outline-color: var(--white);
}
/* the accent ring reads better against the orange pinned row */
.link-item.pinned:focus-visible { outline-color: var(--accent); }

/* ---------- hero entrance ---------- */

/* Split into four chunks and staggered rather than fading the whole block in
   as one lump. A keyframe, not a transition, because this runs once and is
   never interrupted.
   The whole thing sits inside no-preference on purpose. If the initial
   opacity: 0 lived outside the query, anyone with reduced motion on, or any
   browser that skipped the animation, would get a blank hero. Here the
   default state is simply visible. */
@media (prefers-reduced-motion: no-preference) {
  .hero-photo,
  .hero h1,
  .hero-sub,
  .hero .btn-row {
    animation: heroIn 420ms var(--ease) both;
  }
  /* No will-change here on purpose. It is only worth paying for a compositor
     layer once you have actually seen a first-frame stutter, and four
     elements animating once on load is not that. Add it to .hero-photo alone
     if Safari ever judders. */
  .hero-photo    { animation-delay: 0ms; }
  .hero h1       { animation-delay: 60ms; }
  .hero-sub      { animation-delay: 160ms; }
  .hero .btn-row { animation-delay: 260ms; }

  @keyframes heroIn {
    from { opacity: 0; transform: translateY(12px); filter: blur(4px); }
    to   { opacity: 1; transform: translateY(0);    filter: blur(0); }
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* transition alone was not enough once v3 added press scaling and the hero
     keyframe. All three have to be named or motion still gets through. */
  * {
    transition: none !important;
    animation: none !important;
    scale: none !important;
  }
}

/* FAQ blocks. Question is an h3, answer the p straight after it.
   The extra top margin is what separates one pair from the next;
   without it the questions and answers read as one wall of text. */
.faq h3 { margin-top: 1.6rem; }
.faq h3:first-of-type { margin-top: 0; }
.faq p { margin-bottom: 0; }