/*--------------------------------------------------------------
# APCCAS 2027 Custom Styles
--------------------------------------------------------------*/

/* Header layout */
.header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* The header menu must stay on a single row.
   The menu grew from 6 to 8 top-level items (Submission became a dropdown,
   which added a third arrow, plus the new Registration and Sponsor entries).
   Measured with Raleway 600 (the actual web font), the old spacing needed
   970px of nav width, and the logo block took another 146px, so the total
   was exactly 1140px -- the full container width, with zero slack. Any
   rounding or font fallback pushed the last item (Contact) onto a second
   row, and squeezed the logo into three wrapped lines.

   Fix (desktop only, >=1200px; below that the template switches to the
   mobile menu at 991px and tightens the padding on its own):
     - nav font 15px -> 14px
     - link padding 8px -> 5px
     - item margin 8px -> 4px
     - dropdown arrow reserve 30px -> 20px
     - logo sub-label 10px -> 9px, letter-spacing 1.2px -> 0.9px, and
       forced onto one line with white-space: nowrap
   That brings the total to about 967px, leaving ~170px of slack. */
@media (min-width: 992px) {
  #header .nav-menu > li {
    margin-left: 4px;
  }

  #header .nav-menu a {
    padding: 8px 5px;
    font-size: 14px;
  }

  /* The arrow glyph is absolutely positioned; only the reserved padding
     needs shrinking */
  #header .nav-menu .sf-with-ul {
    padding-right: 20px;
  }

  #header .nav-menu .sf-with-ul:after {
    right: 5px;
  }
}

/*--------------------------------------------------------------
# Header / nav -- dark circuit theme to match the hero banner
--------------------------------------------------------------*/
#header,
#header.header-scrolled,
#header.header-fixed {
  background: linear-gradient(100deg, #050d24 0%, #0a1c3d 55%, #0d2a52 100%);
  box-shadow: 0 6px 24px rgba(5, 13, 36, 0.28);
}

#header {
  border-bottom: 1px solid rgba(56, 189, 248, 0.16);
}

/* Accent underline that echoes the hero's bottom strip */
#header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--apccas-accent), #38bdf8 45%, rgba(56, 189, 248, 0));
}

@media (max-width: 991px) {
  #header,
  #header.header-scrolled,
  #header.header-fixed {
    background: rgba(5, 13, 36, 0.98);
  }
}

/* Text-based logo (no conference logo bitmap available yet) */
/* The logo is a two-line stack: the conference name on top and the IEEE
   society line underneath. Both lines must stay on one line each --
   without nowrap the sub-label wrapped into "IEEE CIRCUITS &" / "SYSTEMS"
   and the whole block spilled below the header edge, and the conference
   name itself broke into "APCCAS" / "2027". */
.logo-text {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.1;
  padding: 6px 0;
  white-space: nowrap;
  flex: 0 0 auto;
}

.logo-text .logo-main {
  font-family: "Raleway", sans-serif;
  font-weight: 800;
  font-size: 22px;
  letter-spacing: 0.5px;
  color: #fff;
  white-space: nowrap;
}

.logo-text .logo-main b {
  color: #ffa500;
  font-weight: 800;
}

.logo-text .logo-sub {
  font-family: "Raleway", sans-serif;
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #7fa8cc;
  white-space: nowrap;
}

/* Desktop: tighten the sub-label so the logo block stays narrow enough to
   leave the nav menu room on a single row */
@media (min-width: 992px) {
  .logo-text .logo-main {
    font-size: 21px;
  }

  .logo-text .logo-sub {
    font-size: 9px;
    letter-spacing: 0.9px;
  }
}

/* Top-level nav labels -- light on dark, dropdown parents keep their colour */
.nav-menu a {
  color: #d5e2f5;
  transition: color 0.25s ease;
}

.nav-menu .menu-has-children > a {
  color: #d5e2f5;
}

.nav-menu .menu-active a,
.nav-menu a:hover,
.nav-menu .menu-has-children > a:hover {
  color: #fff;
}

/* Dropdown panel */
.nav-menu ul {
  background: #0a1c3d;
  border: 1px solid rgba(56, 189, 248, 0.2);
  box-shadow: 0 14px 40px rgba(5, 13, 36, 0.45);
}

.nav-menu ul li a {
  color: #cfe0f5;
}

/* Currently active item inside a dropdown (e.g. "Call for Papers" while on
   the Submission page). The template's descendant selector paints every
   descendant of .menu-active white, so this rule has to out-specify it. */
.nav-menu ul li a.menu-active {
  color: #7dd3fc;
  font-weight: 700;
  background: rgba(56, 189, 248, 0.14);
  box-shadow: inset 3px 0 0 #38bdf8;
}

.nav-menu ul li a:hover {
  background: rgba(56, 189, 248, 0.14);
  color: #fff;
}

/* Mobile drawer accents */
#mobile-nav ul li a:hover,
#mobile-nav ul .menu-item-active,
#mobile-nav ul .menu-has-children i.fa-chevron-up {
  color: var(--apccas-accent);
}

/*--------------------------------------------------------------
# Design tokens
--------------------------------------------------------------*/
:root {
  --apccas-ink: #050d24;
  --apccas-navy: #193b67;
  --apccas-navy-2: #0d2a52;
  --apccas-accent: #ffa500;
  --apccas-cyan: #38bdf8;
}

/* Body copy */
#overview p {
  font-size: 16px;
  line-height: 1.85;
  color: #444;
  margin-bottom: 18px;
}

#overview p.lead-para {
  font-size: 18px;
  font-weight: 600;
  color: #193b67;
}

/* Key facts strip */
.key-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin-top: 32px;
}

.key-fact {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: #f8f9fa;
  border-left: 4px solid #ffa500;
  border-radius: 6px;
  padding: 18px 20px;
}

.key-fact-icon {
  font-size: 22px;
  color: #193b67;
  line-height: 1;
  margin-top: 3px;
}

.key-fact-body h4 {
  font-size: 15px;
  font-weight: 700;
  color: #193b67;
  margin: 0 0 4px 0;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.key-fact-body p {
  font-size: 15px;
  line-height: 1.5;
  color: #555;
  margin: 0;
}

/*--------------------------------------------------------------
# key-fact CTA card - CFP download entry
   Reuses the .key-fact look but upgrades it to a clickable card:
   orange gradient fill, heavier left border, whole card clickable,
   lifts on hover.
--------------------------------------------------------------*/
.key-fact-cta {
  background: linear-gradient(100deg, #fff6e8, #fffdf9);
  border-left: 4px solid #ffa500;
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.key-fact-cta:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(255, 165, 0, 0.22);
}

.key-fact-cta .key-fact-icon {
  color: #ffa500;
}

/* Download link inside the card: fills it, enlarging the hit area */
.key-fact-link {
  display: inline-flex;
  align-items: center;
  font-family: "Raleway", sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #e07f00;
  text-decoration: none;
  margin-top: 2px;
  transition: color 0.2s ease;
}

.key-fact-link:hover,
.key-fact-link:focus {
  color: #b26a00;
  text-decoration: none;
}

.key-fact-link i {
  margin-left: 7px;
  font-size: 12px;
  transition: transform 0.2s ease;
}

/* Nudge the arrow right to hint that the card is clickable */
.key-fact-cta:hover .key-fact-link i {
  transform: translateX(4px);
}

/* Visible focus ring for keyboard users (accessibility) */
.key-fact-cta:focus-within {
  outline: 2px solid #ffa500;
  outline-offset: 3px;
}

/*--------------------------------------------------------------
# LOGO section (home)
--------------------------------------------------------------*/
.logo-block {
  margin-bottom: 34px;
}

.logo-block:last-child {
  margin-bottom: 0;
}

.logo-block-title {
  font-size: 17px;
  font-weight: 700;
  color: #193b67;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 18px;
}

.logo-row {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 28px;
}

.logo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 6px;
  padding: 16px 24px;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08);
}

/* Keep the three logos visually equal in height: use height (not max-height)
   so the IEEE / CAS / NIII artwork matches exactly, with width scaling to
   each logo's own proportions */
.logo-item img {
  height: 54px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

/* NIII is a single combined logo (emblem + wordmark), aspect ratio 4.45,
   so at equal height it comes out roughly 240px wide; max-width keeps it
   from bursting out of the card */
.logo-item-full img[src$="logo-niii.png"] {
  height: 54px;
  max-width: 280px;
}

/*--------------------------------------------------------------
# LOGO strip - merged into the conference blurb, no longer its own section
--------------------------------------------------------------*/
.logo-strip {
  margin-top: 52px;
  padding-top: 38px;
  border-top: 1px solid #dde5ec;
}

.logo-strip .logo-block-title {
  font-size: 15px;
  color: #5b6b7a;
  margin-bottom: 14px;
}

/*--------------------------------------------------------------
# News panel (home, right sidebar column)
   A vertical list with timeline styling, so new entries can be appended
   at any time: to publish news, add one <li class="news-row"> to .news-list
--------------------------------------------------------------*/
.news-panel {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.07);
  padding: 20px 22px 16px 22px;
  /* Aligned to the top of the conference blurb on the left, with breathing room */
  margin-top: 0;
  position: sticky;
  top: 100px;
}

.news-panel-head {
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid #dde5ec;
}

.news-panel-head h2 {
  font-size: 19px;
  font-weight: 700;
  color: #193b67;
  margin: 0 0 4px 0;
  line-height: 1;
}

.news-panel-head p {
  font-size: 12px;
  color: #5b6b7a;
  margin: 0;
  line-height: 1.5;
}

.news-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Compact entry: date and label on one line, small body copy, separated by a rule */
.news-row {
  padding: 11px 0;
  border-bottom: 1px dashed #dde5ec;
}

.news-row:last-child {
  border-bottom: 0;
}

.news-row-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 4px;
}

.news-row-date {
  font-size: 11px;
  color: #e57f00;
}

.news-row-date i {
  margin-right: 4px;
}

.news-row-tag {
  display: inline-block;
  font-family: "Raleway", sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: #193b67;
  background: #eaf1f9;
  border-radius: 2px;
  padding: 1px 6px;
}

.news-row-tag-green {
  color: #26855d;
  background: #eaf5ee;
}

.news-row p {
  font-size: 13px;
  line-height: 1.6;
  color: #414b55;
  margin: 0;
}

.news-panel-more {
  margin: 12px 0 0 0;
  padding-top: 10px;
}

.news-panel-more a {
  font-family: "Raleway", sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #26855d;
}

.news-panel-more a i {
  margin-left: 5px;
  font-size: 11px;
}

.news-panel-more a:hover {
  color: #193b67;
}

/*--------------------------------------------------------------
# Important Dates - horizontal timeline (home page)
   Layout: date (above, small grey) -> *====rule====* -> label (below, bold blue)
--------------------------------------------------------------*/
#important-dates {
  padding: 74px 0 78px 0;
}

#important-dates .section-header {
  margin-bottom: 0;
}

.dates-track {
  display: flex;
  position: relative;
  margin: 0 auto;
  max-width: 1140px;
  /* Top padding: room for one line of dates */
  padding: 22px 0 0 0;
}

/* The running rule: absolutely positioned on the track
   y = padding-top(22) + date height(30) + breathing room(10) = 62 */
.dates-track::before {
  content: "";
  position: absolute;
  left: 2%;
  right: 2%;
  top: 62px;
  height: 2px;
  background: #dde5ec;
}

.dates-item {
  flex: 1 1 0;
  position: relative;
  padding: 0 16px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Node dot: sits on the rule.
   Mind the baseline - the .dates-item origin is already pushed down 22px by
   the track's padding-top, so the dot's top must subtract those 22px:
   (62 - 22) - 7 = 33, otherwise the dot sits 20px below the rule. */
.dates-item::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 33px;
  transform: translateX(-50%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #26855d;
  border: 3px solid #fff;
  box-shadow: 0 0 0 2px #26855d;
}

/* Date: above the green dot in small grey type, at a fixed height so every
   entry lines up horizontally. Placeholder copy runs long, so wrapping is
   allowed and the height is generous */
.dates-item-date {
  display: block;
  height: 30px;
  font-size: 14px;
  font-weight: 600;
  color: #5b6b7a;
  white-space: nowrap;
  line-height: 30px;
}

/* Label: below the green dot in bold blue, fixed height (two lines) to stay aligned */
.dates-item-label {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  font-family: "Raleway", sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #193b67;
  line-height: 1.45;
  /* Fixed height: one-line and two-line labels take the same space -> tidy rows */
  height: 46px;
  margin-top: 22px;
}

/*--------------------------------------------------------------
# Important Dates - table form (submission page)
   Same data and palette as the home page timeline: the green dot colour
   #26855d is reused to highlight the date column
--------------------------------------------------------------*/
.dates-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.dates-table {
  width: 100%;
  min-width: 460px;
  border-collapse: collapse;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.07);
}

.dates-table th,
.dates-table td {
  padding: 14px 20px;
  text-align: left;
  border-bottom: 1px solid #dde5ec;
  vertical-align: middle;
}

.dates-table thead th {
  background: #193b67;
  color: #fff;
  font-family: "Raleway", sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  border-bottom: 2px solid #ffa500;
  white-space: nowrap;
}

/* Date column: same colour as the home page timeline dates (#5b6b7a) and
   fixed-width so rows line up. The column sits on the far right, so it is
   right-aligned to form a clear split against the milestone column */
.dates-table .dates-table-th-date,
.dates-table .dates-table-date {
  width: 210px;
  white-space: nowrap;
  text-align: right;
}

.dates-table .dates-table-date {
  font-weight: 700;
  color: #26855d;
  font-size: 15px;
}

.dates-table tbody tr:last-child td {
  border-bottom: 0;
}

.dates-table tbody tr:nth-child(even) {
  background: #fafbfc;
}

.dates-table tbody tr:hover {
  background: #f2f7fc;
}

.dates-table td {
  font-size: 15px;
  color: #414b55;
  line-height: 1.55;
}

/*--------------------------------------------------------------
# Topics list (verbatim text, no re-writing)
   Two-column grid: items flow left-to-right, top-to-bottom;
   cards in the same row share one height and align on both edges.
--------------------------------------------------------------*/
.topics-list {
  list-style: none;
  counter-reset: topic;
  padding: 0;
  margin: 0 auto;
  max-width: 1140px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 24px;
  row-gap: 14px;
  align-items: stretch;
}

.topics-list li {
  counter-increment: topic;
  position: relative;
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 6px;
  border-left: 4px solid #ffa500;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.06);
  padding: 16px 20px 16px 62px;
  font-size: 16px;
  line-height: 1.6;
  color: #333;
}

.topics-list li::before {
  content: counter(topic);
  position: absolute;
  left: 19px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #193b67;
  color: #fff;
  font-family: "Raleway", sans-serif;
  font-weight: 700;
  font-size: 15px;
  line-height: 32px;
  text-align: center;
  flex: 0 0 32px;
}

/*--------------------------------------------------------------
# HOME banner -- redesigned hero
   Layer 1 photo - Layer 2 circuit SVG - Layer 3 gradient - Layer 4 content
--------------------------------------------------------------*/
#intro {
  position: relative;
  background: var(--apccas-ink);
  overflow: hidden;
  min-height: 620px;
  display: flex;
  align-items: center;
  padding: 0;
}

/* Layer 1 -- photo.
   The bitmap is pre-darkened to the nav bar's navy (#0a1c3d) and shown at its
   own aspect ratio -- no brightness filter, otherwise it goes too bright.
   The bitmap's left third is already blended into #0a1c3d, so the empty space
   on the left of the hero reads as one continuous navy field.

   Sizing: `auto 100%` (fill the height, crop the overflow from the LEFT).
   `contain` was used before, but it cannot fill the hero's height on narrow
   viewports -- the picture ended up floating in the middle with bare navy bands
   above and below, and the picture's own bottom edge (bright lake ripples) met
   that flat navy in a hard horizontal line. Filling the height removes the
   bands entirely. The crop always eats into the bitmap's flat navy left
   region (0-1156px), so no artwork is ever cut off; the skyline, stadium and
   Three Pools on the right always stay visible because the image is anchored
   `right`. */
#intro .hero-photo {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #0a1c3d url(../img/apccas-hero-bg-web.jpg) right center / auto 100% no-repeat;
  opacity: 1;
}

/* Layer 2 -- circuit trace artwork
   Moved to the LEFT side (2026-10-22): the photo now occupies the right, so the
   traces decorate the empty blue area behind the headline instead of clashing
   with the chip/city artwork. */
#intro .hero-circuit {
  position: absolute;
  top: 0;
  left: 0;
  width: 55%;
  height: 100%;
  opacity: 0.3;
  pointer-events: none;
}

/* Layer 3 -- readability gradient + dot grid */
#intro .hero-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 1px 1px, rgba(56, 189, 248, 0.14) 1px, transparent 0) 0 0 / 34px 34px,
    linear-gradient(100deg,
      rgba(5, 13, 36, 0.72) 0%,
      rgba(5, 13, 36, 0.6) 34%,
      rgba(5, 13, 36, 0.4) 55%,
      rgba(5, 13, 36, 0.22) 78%,
      rgba(5, 13, 36, 0.14) 100%);
}

/* Layer 4 -- content
   NOTE: #header is position:fixed and 90px tall on desktop, and #intro has no
   top offset (unlike .main-page which uses margin-top:70px). So this top padding
   must clear the header *and* leave a comfortable gap below it -- keep it >= ~150px. */
#intro .hero-inner {
  position: relative;
  z-index: 3;
  width: 100%;
  padding: 120px 0 96px;
}

/* The hero-eyebrow badge strip was removed on 2026-10-10 (it duplicated the
   full conference name below). To bring it back, see the git history or the
   identically named rule on the AICAS site. */

#intro .hero-title {
  font-family: "Raleway", sans-serif;
  font-weight: 800;
  font-size: 82px;
  line-height: 1;
  color: #fff;
  margin: 0 0 20px 0;
  letter-spacing: 2px;
  text-shadow: 0 6px 30px rgba(0, 0, 0, 0.6);
}

#intro .hero-title .hero-year {
  background: linear-gradient(120deg, #ffd28a, #ffa500 55%, #ff7a3d);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

#intro .hero-rule {
  width: 92px;
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--apccas-accent), rgba(255, 165, 0, 0));
  margin-bottom: 22px;
}

#intro .hero-full-name {
  font-family: "Raleway", sans-serif;
  font-weight: 600;
  font-size: 25px;
  line-height: 1.5;
  color: #e8eefb;
  margin: 0 0 18px 0;
  max-width: 660px;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.65);
}

#intro .hero-theme {
  font-size: 20px;
  font-style: italic;
  color: #ffd28a;
  margin: 0 0 30px 0;
  padding-left: 18px;
  border-left: 3px solid var(--apccas-accent);
  line-height: 1.55;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.6);
}

#intro .hero-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 26px;
}

#intro .hero-chip {
  display: inline-flex;
  align-items: center;
  font-family: "Raleway", sans-serif;
  font-weight: 600;
  font-size: 15px;
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(4px);
  border-radius: 100px;
  padding: 9px 20px;
}

#intro .hero-chip i {
  color: var(--apccas-accent);
  margin-right: 8px;
}

/*--------------------------------------------------------------
# hero marquee - IEEE CASS flagship co-location (scrolling light band)
   Now scrolls seamlessly sideways: the font size, colour and baseline are
   fully uniform, so the <b> no longer causes size jumps or vertical
   misalignment. The content is duplicated twice in the HTML and, with
   translateX(-50%), the two halves join up seamlessly.
--------------------------------------------------------------*/
#intro .hero-marquee {
  position: relative;
  overflow: hidden;
  margin: 0 0 20px 0;
  padding: 11px 0;
  border-radius: 100px;
  background: linear-gradient(100deg,
    rgba(255, 165, 0, 0.2) 0%,
    rgba(255, 122, 61, 0.12) 55%,
    rgba(56, 189, 248, 0.16) 100%);
  border: 2px solid rgba(255, 165, 0, 0.8);
  box-shadow: 0 0 0 1px rgba(255, 165, 0, 0.35),
    0 10px 30px rgba(255, 165, 0, 0.22);
}

/* Fade mask on both edges so the text fades in and out instead of cutting hard */
#intro .hero-marquee::before,
#intro .hero-marquee::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 90px;
  z-index: 2;
  pointer-events: none;
}

#intro .hero-marquee::before {
  left: 0;
  background: linear-gradient(90deg, #0a1631, rgba(10, 22, 49, 0));
}

#intro .hero-marquee::after {
  right: 0;
  background: linear-gradient(270deg, #0a1631, rgba(10, 22, 49, 0));
}

#intro .hero-marquee-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: apccas-marquee 26s linear infinite;
}

/* Pause on hover so it can be read */
#intro .hero-marquee:hover .hero-marquee-track {
  animation-play-state: paused;
}

@keyframes apccas-marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* One font size and colour for every fragment; only weight and the star mark the hierarchy */
#intro .hero-marquee-item {
  display: inline-flex;
  align-items: center;
  font-family: "Raleway", sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #ffd28a;
  white-space: nowrap;
  padding: 0 4px;
}

#intro .hero-marquee-item i {
  color: var(--apccas-accent);
  margin-right: 9px;
  font-size: 14px;
}

/* "for the First Time": same size, just white and bold, no longer enlarged,
   so the baseline and height of the surrounding text match exactly.
   IMPORTANT: this element is an inline-flex container, so <b> becomes its
   own flex item and flex drops the whitespace between text nodes - the
   space in the HTML has no effect when rendered, and "Colocated" would run
   into "for". A margin-left puts that space back. */
#intro .hero-marquee-item b {
  color: #ffffff;
  font-weight: 800;
  font-size: inherit;
  letter-spacing: 0.6px;
  margin-left: 0.28em;
}

/* Separator: a small diamond.
   With the whole sentence merged into one item, this only appears between
   the two phrases and at the loop seam, so the spacing has to be generous
   or the two phrases run together with no visible boundary */
#intro .hero-marquee-sep {
  flex: none;
  width: 7px;
  height: 7px;
  margin: 0 34px;
  background: rgba(255, 210, 138, 0.75);
  transform: rotate(45deg);
}

/* Screen readers: hide the duplicated scrolling content and keep one readable
   copy (an .sr-only span is already in the HTML) */
.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;
}

/* Respect the system 'reduce motion' setting: show it still, no scrolling */
@media (prefers-reduced-motion: reduce) {
  #intro .hero-marquee-track {
    animation: none;
  }
}
#intro .hero-coloc {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-family: "Raleway", sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: #eaf4ff;
  background: rgba(56, 189, 248, 0.1);
  border: 1px solid rgba(56, 189, 248, 0.42);
  border-radius: 8px;
  padding: 13px 24px;
  margin: 0;
  text-shadow: none;
}

#intro .hero-coloc i {
  color: var(--apccas-cyan);
  margin-right: 12px;
  font-size: 17px;
}

/* Cross-link to the sister conference's own site */
#intro .hero-coloc a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #ffd28a;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 210, 138, 0.45);
  padding-bottom: 1px;
  transition: color 0.25s ease, border-color 0.25s ease;
}

#intro .hero-coloc a:hover {
  color: #fff;
  border-bottom-color: #fff;
}

#intro .hero-coloc a i {
  margin-right: 0;
  font-size: 12px;
}

/* Bottom accent strip of the hero */
#intro .hero-strip {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 5px;
  background: linear-gradient(90deg, var(--apccas-accent), #38bdf8 45%, rgba(56, 189, 248, 0));
  z-index: 3;
}

/*--------------------------------------------------------------
# INNER page banner -- redesigned
--------------------------------------------------------------*/
.page-banner {
  position: relative;
  overflow: hidden;
  padding: 78px 0 88px;
  background:
    radial-gradient(900px 380px at 88% 10%, rgba(56, 189, 248, 0.22), transparent 70%),
    linear-gradient(115deg, var(--apccas-navy-2) 0%, #0a1f42 55%, #061530 100%);
  color: #fff;
}

.page-banner .pb-circuit {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 46%;
  opacity: 0.42;
  pointer-events: none;
}

.page-banner .container {
  position: relative;
  z-index: 2;
}

.page-banner .pb-eyebrow {
  display: inline-block;
  font-family: "Raleway", sans-serif;
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: #ffd28a;
  margin-bottom: 14px;
}

.page-banner h1 {
  font-family: "Raleway", sans-serif;
  font-size: 44px;
  font-weight: 800;
  letter-spacing: 0.5px;
  margin: 0 0 14px 0;
  color: #fff;
  text-shadow: 0 4px 22px rgba(0, 0, 0, 0.4);
}

.page-banner .pb-rule {
  width: 76px;
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--apccas-accent), rgba(255, 165, 0, 0));
  margin-bottom: 16px;
}

.page-banner p {
  font-size: 17px;
  line-height: 1.7;
  margin: 0;
  max-width: 760px;
  color: #d5e2f5;
}

.page-banner::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--apccas-accent), #38bdf8 45%, rgba(56, 189, 248, 0));
  z-index: 3;
}

/*--------------------------------------------------------------
# Inner page content
--------------------------------------------------------------*/
.page-body {
  padding: 70px 0;
}

.page-body p {
  font-size: 16px;
  line-height: 1.85;
  color: #444;
}

.content-title {
  font-size: 26px;
  font-weight: 700;
  color: #193b67;
  margin: 40px 0 16px 0;
  padding-bottom: 10px;
  border-bottom: 2px solid #ffa500;
}

.content-title:first-child {
  margin-top: 0;
}

.info-card {
  background: #f8f9fa;
  border-left: 4px solid #3498db;
  border-radius: 6px;
  padding: 22px 26px;
  margin: 24px 0;
}

.info-card h4 {
  font-size: 17px;
  font-weight: 700;
  color: #193b67;
  margin: 0 0 8px 0;
}

.info-card p,
.info-card address {
  font-size: 16px;
  line-height: 1.75;
  color: #444;
  margin: 0;
}

.info-card a {
  color: #216874;
  font-weight: 600;
  word-break: break-all;
}

/* Warning / notice card (e.g. double-blind policy) */
.notice-card {
  background: #fff8ec;
  border: 1px solid #ffd699;
  border-left: 4px solid #ffa500;
  border-radius: 6px;
  padding: 22px 26px;
  margin: 24px 0;
}

.notice-card h4 {
  font-size: 17px;
  font-weight: 700;
  color: #b26a00;
  margin: 0 0 8px 0;
}

.notice-card p {
  font-size: 16px;
  line-height: 1.8;
  color: #4b4b4b;
  margin: 0;
}

/* A numbered list inside a notice card (e.g. the formatting notes under
   Paper Formatting): drop the trailing margin so the card hugs its content */
.notice-card .num-list li:last-child {
  margin-bottom: 0;
}

/* Template / download buttons */
.download-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 18px;
}

.download-btn {
  display: inline-flex;
  align-items: center;
  font-family: "Raleway", sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: #193b67;
  background: #fff;
  border: 1px solid #d6dde6;
  border-radius: 6px;
  padding: 14px 22px;
  transition: all 0.2s ease;
}

.download-btn i {
  color: #ffa500;
  margin-right: 10px;
  font-size: 17px;
}

/* When used as an <a>: drop the default link decoration and inherit the
   .download-btn button look. The templates already exist in templates/, so
   these are real links, not "Link soon" placeholders. The hover treatment is
   reused from .download-btn:hover below, so only the underline is removed */
a.download-btn {
  color: #193b67;
  text-decoration: none;
  margin-right: 12px;
}

a.download-btn:hover,
a.download-btn:focus {
  text-decoration: none;
}

/* Template file-format tag -> see .download-btn .dl-tag below (orange pill) */

/* Caption below the download area */
.download-note {
  font-size: 14px;
  color: #5b6b7a;
  margin: 14px 0 0 0;
  line-height: 1.7;
}

.download-note code {
  font-size: 13px;
  color: #193b67;
  background: #f1f4f8;
  border-radius: 3px;
  padding: 1px 5px;
}

.download-btn:hover {
  border-color: #ffa500;
  color: #193b67;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

.download-btn .dl-tag {
  margin-left: 12px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #b26a00;
  background: #fff4e2;
  border: 1px solid #ffd699;
  border-radius: 100px;
  padding: 3px 10px;
}

.check-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.check-list li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 12px;
  font-size: 16px;
  line-height: 1.75;
  color: #444;
}

.check-list li::before {
  content: "\f058";
  position: absolute;
  left: 0;
  top: 0;
  font-family: FontAwesome;
  color: #ffa500;
}

/*--------------------------------------------------------------
# Numbered list
   Used where the source text calls for an ordered list (e.g. the Call for
   Special Sessions proposal requirements). Same typography as .check-list,
   but the marker is an orange circled number instead of a tick.
--------------------------------------------------------------*/
.num-list {
  list-style: none;
  counter-reset: apccas-num;
  padding: 0;
  margin: 0;
}

.num-list li {
  position: relative;
  counter-increment: apccas-num;
  padding-left: 46px;
  margin-bottom: 18px;
  font-size: 16px;
  line-height: 1.75;
  color: #444;
}

.num-list li::before {
  content: counter(apccas-num);
  position: absolute;
  left: 0;
  top: 2px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #ffa500;
  color: #fff;
  font-family: "Raleway", sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 30px;
  text-align: center;
}

.num-list strong {
  color: #193b67;
}

/*--------------------------------------------------------------
# "To be updated soon" placeholder
--------------------------------------------------------------*/
.tbu-wrap {
  text-align: center;
  padding: 40px 20px 20px 20px;
}

.tbu-badge {
  display: inline-block;
  background: #fff4e2;
  color: #b26a00;
  border: 1px solid #ffd699;
  border-radius: 50px;
  padding: 8px 22px;
  font-family: "Raleway", sans-serif;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.4px;
  margin-bottom: 22px;
}

.tbu-icon {
  font-size: 46px;
  color: #c8ced8;
  margin-bottom: 18px;
}

.tbu-title {
  font-size: 26px;
  font-weight: 700;
  color: #193b67;
  margin-bottom: 12px;
}

.tbu-text {
  font-size: 17px;
  color: #6b7280;
  max-width: 560px;
  margin: 0 auto;
}

.tbu-contact {
  margin-top: 22px;
  font-size: 16px;
  color: #444;
}

.tbu-contact a {
  color: #216874;
  font-weight: 600;
}

/*--------------------------------------------------------------
# Contact info cards
--------------------------------------------------------------*/
.contact-block {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.07);
  padding: 28px 26px;
  height: 100%;
  text-align: center;
}

.contact-block i {
  font-size: 30px;
  color: #ffa500;
  margin-bottom: 12px;
  display: block;
}

.contact-block h3 {
  font-size: 18px;
  font-weight: 700;
  color: #193b67;
  margin-bottom: 8px;
}

.contact-block p,
.contact-block address {
  font-size: 16px;
  line-height: 1.7;
  color: #444;
  margin: 0;
}

.contact-block a {
  color: #216874;
  font-weight: 600;
}

/*--------------------------------------------------------------
# Organizing committee list
--------------------------------------------------------------*/
.committee-container {
  max-width: 1000px;
  margin: 0 auto;
}

.committee-section {
  background: #f8f9fa;
  border-left: 4px solid #3498db;
  border-radius: 6px;
  padding: 22px 26px;
  margin-bottom: 20px;
}

.committee-section.chair {
  background: #eef4fb;
  border-left-color: #193b67;
}

.committee-section h3 {
  font-size: 19px;
  font-weight: 700;
  color: #193b67;
  margin: 0 0 12px 0;
}

.committee-section ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.committee-section li {
  font-size: 16px;
  line-height: 1.8;
  color: #444;
  padding: 4px 0;
}

.committee-section li span {
  color: #6b7280;
  font-size: 15px;
}

/*--------------------------------------------------------------
# Speakers page
--------------------------------------------------------------*/
.speakers-note {
  font-size: 17px;
  color: #555;
  margin-bottom: 24px;
}

/*--------------------------------------------------------------
# Responsive tweaks
--------------------------------------------------------------*/
@media (max-width: 1199px) {
  #intro .hero-title {
    font-size: 66px;
  }

  #intro .hero-full-name {
    font-size: 22px;
  }

  /* Two-column topics: tighten the gutter so both cards keep a readable width */
  .topics-list {
    column-gap: 18px;
  }

  .topics-list li {
    font-size: 15.5px;
    padding: 15px 18px 15px 58px;
  }

  .topics-list li::before {
    left: 17px;
  }
}

@media (max-width: 991px) {
  /* Topics collapse back to a single column on tablet and phone */
  .topics-list {
    grid-template-columns: minmax(0, 1fr);
    max-width: 1000px;
  }

  .topics-list li {
    font-size: 16px;
    padding: 16px 20px 16px 62px;
  }

  .topics-list li::before {
    left: 19px;
  }

  .logo-text .logo-main {
    font-size: 19px;
  }

  .logo-text .logo-sub {
    font-size: 9px;
  }

  /* Keep the three logos equal in height, scaled down together on narrow screens */
  .logo-item img {
    height: 42px;
  }

  .logo-item-full img[src$="logo-niii.png"] {
    height: 42px;
    max-width: 100%;
  }

  .logo-row {
    gap: 18px;
  }

  .news-panel {
    padding: 16px 18px 14px 18px;
    position: static;
  }

  .news-panel-head h2 {
    font-size: 18px;
  }

  /* Important Dates switches to a vertical timeline on narrow screens so dates do not wrap */
  #important-dates {
    padding: 56px 0 60px 0;
  }

  .dates-track {
    flex-direction: column;
    padding-top: 0;
    padding-left: 26px;
  }

  .dates-track::before {
    left: 6px;
    right: auto;
    top: 6px;
    bottom: 6px;
    width: 2px;
    height: auto;
  }

  .dates-item {
    padding: 0 0 28px 0;
    align-items: flex-start;
    text-align: left;
  }

  /* In the vertical layout the dot moves onto the left-hand line */
  .dates-item::before {
    left: -26px;
    top: 4px;
    transform: none;
  }

  .dates-item-date {
    height: auto;
    line-height: 1.4;
    white-space: normal;
  }

  .dates-item-label {
    height: auto;
    margin-top: 6px;
  }

  #intro {
    min-height: auto;
  }

  /* Narrow screens cannot fit the image's own aspect ratio, so use cover and
   anchor it on the subject on the right */
  #intro .hero-photo {
    background-position: 82% 50%;
    background-size: cover;
    opacity: 0.85;
  }

  #intro .hero-circuit {
    display: none;
  }

  #intro .hero-overlay {
    background:
      radial-gradient(circle at 1px 1px, rgba(56, 189, 248, 0.14) 1px, transparent 0) 0 0 / 28px 28px,
      linear-gradient(180deg, rgba(5, 13, 36, 0.62), rgba(5, 13, 36, 0.86));
  }

  /* header is 70px tall at this breakpoint -- clear it plus a visible gap */
  #intro .hero-inner {
    padding: 104px 0 78px;
  }

  #intro .hero-title {
    font-size: 48px;
  }

  #intro .hero-full-name {
    font-size: 19px;
  }

  #intro .hero-theme {
    font-size: 17px;
  }

  #intro .hero-br {
    display: none;
  }

  .page-banner {
    padding: 56px 0 62px;
  }

  .page-banner .pb-circuit {
    display: none;
  }

  .page-banner h1 {
    font-size: 30px;
  }

  .page-banner p {
    font-size: 15.5px;
  }

  .page-body {
    padding: 46px 0;
  }
}

@media (max-width: 575px) {
  #intro .hero-title {
    font-size: 38px;
  }

  /* Marquee light band: smaller type and tighter spacing on narrow screens */
  #intro .hero-marquee-item {
    font-size: 13px;
  }

  #intro .hero-marquee-item i {
    margin-right: 7px;
    font-size: 12px;
  }

  #intro .hero-marquee-sep {
    width: 6px;
    height: 6px;
    margin: 0 20px;
  }

  #intro .hero-marquee {
    padding: 9px 0;
  }
}
/*--------------------------------------------------------------
# Sponsor page - sponsorship package table
   Source: AICAS & APCCAS 2027 Sponsorship Prospectus (2026-10-14).
   Five tiers (Bronze/Silver/Gold/Platinum/Diamond) with the benefit matrix
   transcribed verbatim from the prospectus table.
--------------------------------------------------------------*/
.pkg-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 24px 0 8px 0;
}

.pkg-table {
  width: 100%;
  min-width: 860px;
  border-collapse: collapse;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.07);
  font-size: 14px;
}

.pkg-table th,
.pkg-table td {
  padding: 12px 14px;
  text-align: center;
  border-bottom: 1px solid #dde5ec;
  vertical-align: middle;
  color: #444;
}

.pkg-table thead th {
  background: #193b67;
  color: #fff;
  font-family: "Raleway", sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  border-bottom: 2px solid #3498db;
  white-space: nowrap;
}

/* Benefit column: left aligned, widest, holds the longest benefit texts */
.pkg-table .pkg-th-benefit,
.pkg-table .pkg-benefit {
  text-align: left;
  width: 34%;
  min-width: 260px;
  font-weight: 600;
  color: #26333f;
}

/* Tier headers keep the prospectus colour coding */
.pkg-table .pkg-th-tier.pkg-bronze {
  background: #8c5a3b;
  border-bottom-color: #8c5a3b;
}

.pkg-table .pkg-th-tier.pkg-silver {
  background: #7a8794;
  border-bottom-color: #7a8794;
}

.pkg-table .pkg-th-tier.pkg-gold {
  background: #b8860b;
  border-bottom-color: #b8860b;
}

.pkg-table .pkg-th-tier.pkg-platinum {
  background: #4a6c8c;
  border-bottom-color: #4a6c8c;
}

.pkg-table .pkg-th-tier.pkg-diamond {
  background: #193b67;
  border-bottom-color: #193b67;
}

/* Price row: highlighted band directly under the tier header */
.pkg-table .pkg-row-price td {
  background: #f4f8fb;
  border-bottom: 2px solid #dde5ec;
}

.pkg-table .pkg-row-price .pkg-benefit {
  color: #193b67;
}

.pkg-price {
  display: block;
  font-family: "Raleway", sans-serif;
  font-weight: 700;
  font-size: 17px;
  color: #193b67;
}

.pkg-cny {
  display: block;
  font-size: 12px;
  color: #5b6b7a;
  margin-top: 2px;
}

.pkg-table tbody tr:nth-child(even):not(.pkg-row-price) td {
  background: #fafbfc;
}

.pkg-table tbody tr:hover td {
  background: #f2f7fc;
}

.pkg-table tbody tr:last-child td {
  border-bottom: 0;
}

.pkg-yes {
  color: #26855d;
  font-size: 16px;
}

.pkg-no {
  color: #b4c3d1;
}

/* Small print under a benefit, e.g. the industry-session conditions */
.pkg-hint {
  display: block;
  font-size: 12px;
  font-weight: 400;
  color: #5b6b7a;
  margin-top: 4px;
  line-height: 1.5;
}

/*--------------------------------------------------------------
# Registration page - fee table
   Source: the official APCCAS 2027 fee table (Item / Unit Price_USD /
   Unit Price_CNY). Four groups: Regular, Student, AICAS & APCCAS Delegate
   and Tutorial. The CNY column is the indicative conversion of the USD
   price at USD 1 = CNY 7.
   Visually matched to the .pkg-table above so both price tables on the
   site read as the same family.
--------------------------------------------------------------*/
.fee-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 24px 0 8px 0;
}

.fee-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.07);
  font-size: 15px;
}

.fee-table th,
.fee-table td {
  padding: 13px 18px;
  text-align: left;
  border-bottom: 1px solid #dde5ec;
  vertical-align: middle;
  color: #444;
}

.fee-table thead th {
  background: #193b67;
  color: #fff;
  font-family: "Raleway", sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  border-bottom: 2px solid #ffa500;
  white-space: nowrap;
}

/* Group column (Regular / Student / Delegate / Tutorial): the label spans
   all the rows of its group, so it reads as one block per category */
.fee-table .fee-th-group,
.fee-table .fee-group {
  width: 22%;
  min-width: 190px;
  font-weight: 700;
  color: #193b67;
  background: #f4f8fb;
  border-right: 1px solid #dde5ec;
  line-height: 1.5;
}

/* The group column header must stay on the dark band like the other headers
   (the group cell rules above would otherwise tint it light) */
.fee-table thead .fee-th-group {
  background: #193b67;
  color: #fff;
  border-right: 0;
}

/* Likewise the header cells of the other three columns keep white text:
   the body-cell colour rules below would otherwise darken them */
.fee-table thead .fee-th-item,
.fee-table thead .fee-th-price {
  color: #fff;
}

.fee-table .fee-group-hint {
  display: block;
  font-size: 12px;
  font-weight: 400;
  color: #5b6b7a;
  margin-top: 6px;
  line-height: 1.5;
}

/* Membership column */
.fee-table .fee-th-item,
.fee-table .fee-item {
  width: 40%;
  min-width: 200px;
  color: #26333f;
  font-weight: 600;
}

/* Price columns: right aligned so the figures line up on the decimal */
.fee-table .fee-th-price,
.fee-table .fee-price {
  width: 19%;
  text-align: right;
  white-space: nowrap;
}

.fee-table .fee-usd {
  font-family: "Raleway", sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: #193b67;
  text-align: right;
  white-space: nowrap;
}

.fee-table .fee-cny {
  font-weight: 600;
  color: #5b6b7a;
  text-align: right;
  white-space: nowrap;
}

.fee-table tbody tr:nth-child(even) td {
  background: #fafbfc;
}

/* The group cell keeps its own tint in every row, so re-apply it after the
   zebra striping */
.fee-table tbody tr:nth-child(even) .fee-group {
  background: #f4f8fb;
}

.fee-table tbody tr:hover td {
  background: #f2f7fc;
}

.fee-table tbody tr:hover .fee-group {
  background: #eef4fa;
}

.fee-table tbody tr:last-child td {
  border-bottom: 0;
}

/*--------------------------------------------------------------
# "How to apply" steps
--------------------------------------------------------------*/
.step-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 24px 0 8px 0;
}

.step-card {
  background: #f8f9fa;
  border-top: 3px solid #3498db;
  border-radius: 6px;
  padding: 22px 24px;
}

.step-num {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #193b67;
  color: #fff;
  font-family: "Raleway", sans-serif;
  font-weight: 700;
  font-size: 16px;
  text-align: center;
  line-height: 34px;
  margin-bottom: 14px;
}

.step-title {
  font-family: "Raleway", sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: #193b67;
  margin: 0 0 8px 0;
}

.step-text {
  font-size: 15px;
  line-height: 1.7;
  color: #444;
  margin: 0;
}

@media (max-width: 767.98px) {
  .step-grid {
    grid-template-columns: 1fr;
  }
}

/* Narrower desktops (992-1199px): the container is fluid here, so the
   menu needs one more notch of tightening to stay on a single row.
   Measured: at 992px the 14px rule was 5px over for APCCAS. */
@media (min-width: 992px) and (max-width: 1199.98px) {
  #header .nav-menu > li {
    margin-left: 3px;
  }

  #header .nav-menu a {
    padding: 8px 4px;
    font-size: 13px;
  }

  #header .nav-menu .sf-with-ul {
    padding-right: 18px;
  }

  #header .nav-menu .sf-with-ul:after {
    right: 4px;
  }
}