/* Solstar palette and controls, scoped to this studio.
   Jost and Epilogue are the SIL Open Font License families used by that design. */

@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/gallery/fonts/jost-latin-400-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/static/gallery/fonts/jost-latin-500-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/static/gallery/fonts/jost-latin-600-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Epilogue";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/static/gallery/fonts/epilogue-latin-600-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Epilogue";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/static/gallery/fonts/epilogue-latin-700-normal.woff2") format("woff2");
}

html[data-fcf-style="branded"] {
  --sol-theme: #004540;
  --sol-gold: #ffe175;
  --sol-title: #241442;
  --sol-text: #525252;
  --sol-muted: #737373;
  --sol-paper: #f6f8f0;
  --sol-line: #e4e6d8;
  --sol-shadow: 0 4px 25px rgba(0, 0, 0, 0.06);
}

html[data-fcf-style="branded"] body {
  background: var(--sol-paper);
  color: var(--sol-text);
  font-family: "Jost", "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.65;
  letter-spacing: 0;
}

html[data-fcf-style="branded"] :is(h1, h2, h3, [data-fcf-component="page-title"]) {
  color: var(--sol-title);
  font-family: "Epilogue", "Segoe UI", sans-serif;
  font-weight: 700;
  letter-spacing: -0.03em;
}

html[data-fcf-style="branded"] [data-fcf-component="page-title"] {
  color: var(--sol-theme);
}

.eyebrow {
  color: var(--sol-theme);
  font-family: "Jost", sans-serif;
  letter-spacing: 0.08em;
}

.lede,
.card-body p,
.steps p,
.facts dd {
  color: var(--sol-text);
  font-family: "Jost", sans-serif;
}

.rail {
  background: var(--sol-theme);
  border-right: 0;
  color: #ffffff;
}

.mark,
.mark-text,
.top-mark,
.rail-signout button,
.rail-nav a {
  font-family: "Jost", sans-serif;
}

html[data-fcf-style="branded"] [data-fcf-component="navigation"] a,
html[data-fcf-style="branded"] .rail-signout button,
.rail-foot {
  color: #ffffff;
}

html[data-fcf-style="branded"] [data-fcf-component="navigation"] a:hover,
html[data-fcf-style="branded"] .rail-signout button:hover {
  color: var(--sol-gold);
}

.mark-text small,
.rail-foot {
  color: rgba(255, 255, 255, 0.74);
}

.rail .icon-button {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  border-color: transparent;
}

.rail .icon-button:hover {
  background: var(--sol-gold);
  color: var(--sol-theme);
}

.rail-nav a {
  color: #ffffff;
  border-radius: 999px;
}

.rail-nav a:hover {
  background: rgba(255, 225, 117, 0.16);
  color: var(--sol-gold);
}

html[data-fcf-style="branded"] [data-fcf-component="navigation"] a[aria-current="page"],
.rail-nav a[aria-current="page"] {
  background: var(--sol-gold);
  color: var(--sol-theme);
}

.topbar {
  background: rgba(255, 255, 255, 0.94);
  border-bottom: 0;
  box-shadow: var(--sol-shadow);
}

.top-mark {
  color: var(--sol-theme);
  font-weight: 600;
}

html[data-fcf-style="branded"] [data-fcf-component="field"],
.search input,
.toolbar select,
.account-form input,
.account-form select,
.account-form textarea,
.choice-form input,
.choice-form select,
.choice-form textarea,
.decision-form input,
.decision-form select,
.decision-form textarea {
  border-color: #d5d7c8;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: none;
  font-family: "Jost", sans-serif;
}

html[data-fcf-style="branded"] [data-fcf-component="field"]:focus,
.search input:focus {
  border-color: var(--sol-theme);
  outline: 3px solid rgba(0, 69, 64, 0.18);
  outline-offset: 1px;
}

html[data-fcf-style="branded"] [data-fcf-component="button-primary"]:not([data-icon="trash"]),
.search-submit,
.choice-open {
  position: relative;
  z-index: 0;
  isolation: isolate;
  overflow: hidden;
  border-radius: 999px;
  background: var(--sol-theme);
  border-color: transparent;
  color: #ffffff;
  font-family: "Jost", sans-serif;
  font-weight: 600;
  box-shadow: none;
}

.choice-open {
  background: var(--sol-gold);
  color: var(--sol-title);
}

html[data-fcf-style="branded"] [data-fcf-component="button-primary"]:not([data-icon="trash"])::after,
.search-submit::after,
.choice-open::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 210%;
  height: 290%;
  top: 162%;
  left: 50%;
  background: var(--sol-gold);
  border-radius: 80%;
  transform: translateX(-50%) rotate(-8deg);
  transition: top 0.7s ease;
}

.choice-open::after {
  background: #ffffff;
}

html[data-fcf-style="branded"] [data-fcf-component="button-primary"]:not([data-icon="trash"]):hover,
.search-submit:hover {
  color: var(--sol-theme);
  background: var(--sol-theme);
  border-color: transparent;
}

html[data-fcf-style="branded"] [data-fcf-component="button-primary"]:not([data-icon="trash"]):hover::after,
.search-submit:hover::after,
.choice-open:hover::after {
  top: -96%;
}

.choice-open.is-selected {
  background: var(--sol-theme);
  color: #ffffff;
}

.choice-open:hover,
.choice-open.is-selected:hover {
  color: var(--sol-theme);
  background: var(--sol-gold);
}

.text-button,
.saved-open,
.density-button {
  position: relative;
  z-index: 0;
  isolation: isolate;
  overflow: hidden;
  border-radius: 999px;
  background: #ffffff;
  color: var(--sol-theme);
  border-color: var(--sol-theme);
  font-family: "Jost", sans-serif;
  font-weight: 600;
}

.text-button::after,
.saved-open::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 210%;
  height: 290%;
  top: 162%;
  left: 50%;
  background: var(--sol-gold);
  border-radius: 80%;
  transform: translateX(-50%) rotate(-8deg);
  transition: top 0.7s ease;
}

.text-button:hover,
.saved-open:hover {
  color: var(--sol-theme);
  border-color: var(--sol-theme);
  background: #ffffff;
}

.text-button:hover::after,
.saved-open:hover::after {
  top: -96%;
}

.card-quick .text-button {
  background: rgba(0, 69, 64, 0.9);
  color: #ffffff;
  border-color: transparent;
}

.card-quick .text-button::after {
  display: none;
}

.card-quick .text-button:hover {
  background: var(--sol-gold);
  color: var(--sol-theme);
}

.card-quick .text-button[aria-pressed="true"] {
  background: var(--sol-gold);
  color: var(--sol-theme);
}

.steps article,
.overview-card,
.stat,
.callout,
.note-card,
.unavailable-panel,
.milestone-list article,
.account-form,
.decision-form,
.choice-form,
.report,
.empty,
.compare-table-wrap,
.table-wrap,
.choice-banner {
  background: #ffffff;
  border: 0;
  border-radius: 20px;
  box-shadow: var(--sol-shadow);
}

.choice-banner {
  border-left: 4px solid var(--sol-gold);
}

.preferred-tag,
.preferred-flag {
  background: var(--sol-gold);
  color: var(--sol-title);
}

.compare-table thead th,
.records th {
  background: #f7f8f1;
  color: var(--sol-title);
  font-family: "Epilogue", sans-serif;
}

.footer-bar {
  background: var(--sol-theme);
  border-radius: 16px;
  margin: 0 20px 20px;
  padding: 18px 28px;
}

.footer-bar p {
  color: rgba(255, 255, 255, 0.86);
}

main :is(p, li, figcaption, dd) a {
  color: var(--sol-theme);
  font-weight: 600;
  text-decoration: none;
}

main :is(p, li, figcaption, dd) a:hover {
  color: var(--sol-title);
  text-decoration: none;
}

.back-to-top {
  position: fixed;
  z-index: 40;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  width: 50px;
  height: 50px;
  border: 0;
  border-radius: 12px;
  background: var(--sol-theme);
  color: #ffffff;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(12px);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease, background 0.3s ease;
}

.back-to-top::before {
  transform: rotate(-90deg);
}

.back-to-top.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
}

.back-to-top.show::before {
  transform: rotate(-90deg);
}

.back-to-top:hover {
  background: var(--sol-title);
}

@media (prefers-reduced-motion: reduce) {
  html[data-fcf-style="branded"] [data-fcf-component="button-primary"]::after,
  .search-submit::after,
  .choice-open::after,
  .text-button::after,
  .saved-open::after,
  .back-to-top {
    transition: none;
  }
}

@media print {
  .back-to-top, .site-header, .utility-band, .et-menu-toggle { display: none; }
}

/* Solstar header layout. The pill menu replaces the sidebar and does not use Bootstrap's grid. */

.sol-container {
  width: min(1240px, calc(100% - 32px));
  margin-inline: auto;
}

.shell {
  display: block;
  grid-template-columns: none;
  min-height: 0;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  padding: 16px 0 0;
  overflow-anchor: none;
}

html[data-fcf-style="branded"] .site-header[data-fcf-component="header"] {
  background: transparent;
  border: 0;
  box-shadow: none;
}

.site-header:has(.sticky-wrapper.sticky) {
  background: rgba(246, 248, 240, 0.94);
}

.menu-area {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 78px;
  padding: 8px 14px 8px 22px;
  background: #ffffff;
  border-radius: 120px;
  box-shadow: 0 0 60px rgba(0, 0, 0, 0.05);
}

.sticky-wrapper.sticky .menu-area {
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.08);
}

.header-logo {
  flex: 0 1 auto;
  min-width: 0;
  color: var(--sol-theme);
  text-transform: none;
  letter-spacing: 0;
  font-size: 15px;
  font-weight: 600;
}

.header-logo .mark-text small { color: var(--sol-muted); }

.header-button { flex: 0 0 auto; }

.menu-area .choice-open {
  width: auto;
  grid-column: auto;
  white-space: nowrap;
}

.main-menu {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  min-width: 0;
}

.main-menu .rail-nav {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.main-menu .rail-nav li { margin: 0; }

html[data-fcf-style="branded"] .main-menu[data-fcf-component="navigation"] a,
html[data-fcf-style="branded"] .main-menu .rail-signout button {
  color: var(--sol-theme);
  background: transparent;
  border-radius: 999px;
  font-family: "Jost", sans-serif;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
}

.main-menu .rail-nav a {
  min-height: 42px;
  padding: 6px 12px;
}

.main-menu .rail-signout {
  margin: 0;
}

.main-menu .rail-signout button {
  border: 0;
  padding: 8px 12px;
  font: inherit;
  cursor: pointer;
}

html[data-fcf-style="branded"] .main-menu[data-fcf-component="navigation"] a:hover,
.main-menu .rail-signout button:hover {
  background: rgba(255, 225, 117, 0.55);
  color: var(--sol-theme);
  text-decoration: none;
}

html[data-fcf-style="branded"] .main-menu[data-fcf-component="navigation"] a[aria-current="page"] {
  background: var(--sol-gold);
  color: var(--sol-theme);
}

.main-menu .rail-foot,
.drawer-label { display: none; }

.et-menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 0;
  border-radius: 14px;
  background: var(--sol-theme);
  color: #ffffff;
  cursor: pointer;
}

.et-menu-toggle:hover {
  background: var(--sol-title);
}

.burger {
  position: relative;
  display: block;
  width: 18px;
  height: 14px;
}

.burger span {
  position: absolute;
  left: 0;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.burger span:nth-child(1) { top: 0; }
.burger span:nth-child(2) { top: 6px; }
.burger span:nth-child(3) { top: 12px; }

.et-menu-toggle[aria-expanded="true"] {
  background: var(--sol-gold);
  color: var(--sol-theme);
}

.et-menu-toggle[aria-expanded="true"] .burger span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.et-menu-toggle[aria-expanded="true"] .burger span:nth-child(2) {
  opacity: 0;
}

.et-menu-toggle[aria-expanded="true"] .burger span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

.utility-band { padding-bottom: 4px; }

.site-header + .utility-band .topbar,
.utility-bar.topbar {
  position: static;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 12px 4px 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
}

.bar-cta { display: none; }

.site-footer {
  margin: 72px 0 0;
  padding: 0;
  border-radius: 0;
  background: var(--sol-theme);
  color: rgba(255, 255, 255, 0.86);
}

.site-footer .sol-container {
  padding-top: 48px;
  padding-bottom: 28px;
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 32px 72px;
  align-items: start;
}

.footer-logo {
  display: inline-block;
  margin: 0 0 10px;
  color: #ffffff;
  font-family: "Epilogue", sans-serif;
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  text-decoration: none;
}

.footer-logo:hover { color: var(--sol-gold); }

.footer-brand p {
  margin: 0;
  max-width: 34rem;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.6;
}

.footer-nav h2,
html[data-fcf-style="branded"] .site-footer h2 {
  margin: 0 0 12px;
  color: var(--sol-gold);
  font-family: "Jost", "Segoe UI", sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.site-footer ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer li + li { margin-top: 0; }

.footer-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  color: #ffffff;
  font-weight: 500;
  text-decoration: none;
}

.footer-nav a:hover {
  color: var(--sol-gold);
  text-decoration: none;
}

.site-footer .footer-legal {
  margin: 32px 0 0;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 0.88rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.72);
}

.site-footer .footer-legal a {
  color: #ffffff;
  font-weight: 600;
  text-decoration: none;
}

.site-footer .footer-legal a:hover {
  color: var(--sol-gold);
  text-decoration: none;
}

main { padding-top: 28px; }

.viewer-bar { top: 96px; }

.preview-nav {
  margin: 4px 0 22px;
  align-items: center;
}

.preview-nav .back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  color: var(--sol-theme);
  font-family: "Jost", sans-serif;
  font-weight: 600;
  text-decoration: none;
}

.preview-nav .back::before {
  content: "←";
  font-size: 1.05rem;
  line-height: 1;
}

.preview-nav .back:hover { color: var(--sol-title); }

.preview-step {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.preview-step .meta {
  min-width: 4.5rem;
  padding: 0 4px;
  color: var(--sol-muted);
  font-family: "Jost", sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
}

.preview-intro {
  margin: 0 0 22px;
  padding: 0 0 22px;
  border-bottom: 1px solid var(--sol-line);
}

.preview-intro .eyebrow { margin: 0 0 8px; }

.preview-intro h1 {
  margin: 0 0 10px;
  font-size: clamp(2.15rem, 4vw, 3rem);
  line-height: 1.05;
}

.preview-intro .lede {
  margin: 0;
  max-width: 40rem;
  font-size: 1.08rem;
  line-height: 1.6;
}

.preview-intro .preferred-flag { margin-top: 14px; }

@media (max-width: 699px) {
  .preview-nav { align-items: flex-start; }
  .preview-step { flex-wrap: wrap; }
  .preview-intro h1 { font-size: 2.15rem; }
}

.choose-actions {
  margin-left: 0;
  flex-basis: 100%;
  justify-content: flex-start;
}

@media (min-width: 900px) {
  .main-menu [data-icon]::before { display: none; }
  .et-menu-toggle { display: none; }
}

@media (max-width: 1279px) {
  .header-cta { display: none; }
  .bar-cta { display: inline-flex; }
  .main-menu .rail-nav a,
  .main-menu .rail-signout button {
    padding: 6px 8px;
    font-size: 15px;
  }
}

@media (max-width: 1099px) {
  body[data-role="admin"] .header-logo .mark-text { display: none; }
}

@media (max-width: 899px) {
  .menu-area {
    min-height: 68px;
    padding: 8px 12px 8px 14px;
    border-radius: 28px;
  }

  .header-cta { display: none; }

  .bar-cta { display: inline-flex; }

  .et-menu-toggle { display: inline-flex; }

  .drawer-label {
    display: block;
    margin: 0 0 12px;
    color: rgba(255, 255, 255, 0.74);
    font-family: "Epilogue", sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .main-menu {
    position: fixed;
    z-index: 45;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: min(320px, 88vw);
    height: 100vh;
    height: 100dvh;
    margin: 0;
    padding: 96px 16px 28px;
    overflow: auto;
    background: var(--sol-theme);
    box-shadow: 8px 0 32px rgba(0, 0, 0, 0.18);
    transform: translateX(-105%);
    transition: transform 0.2s ease;
  }

  body[data-rail="open"] .main-menu { transform: none; }

  .main-menu .rail-nav {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }

  .main-menu .rail-nav a,
  .main-menu .rail-signout button {
    justify-content: flex-start;
    width: 100%;
    min-height: 48px;
    padding: 8px 14px;
    font-size: 17px;
    text-align: left;
    border-radius: 14px;
  }

  html[data-fcf-style="branded"] .main-menu[data-fcf-component="navigation"] a,
  .main-menu .rail-signout button,
  .main-menu .rail-foot {
    color: #ffffff;
  }

  html[data-fcf-style="branded"] .main-menu[data-fcf-component="navigation"] a:hover,
  .main-menu .rail-signout button:hover {
    background: rgba(255, 225, 117, 0.16);
    color: var(--sol-gold);
  }

  html[data-fcf-style="branded"] .main-menu[data-fcf-component="navigation"] a[aria-current="page"] {
    background: var(--sol-gold);
    color: var(--sol-theme);
  }

  .main-menu .rail-foot {
    display: block;
    margin: 18px 0 0;
    color: rgba(255, 255, 255, 0.74);
  }

  .main-menu .rail-signout button { padding-left: 14px; }

  .scrim { z-index: 40; }

  .viewer-bar { top: 84px; }
}

@media (max-width: 899px) {
  .utility-bar.topbar {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .utility-bar .search,
  .utility-bar .choice-open,
  .utility-bar .saved-open {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
  }

  .utility-bar .search {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .utility-bar .search input {
    grid-column: 1 / -1;
    width: 100%;
  }

  .utility-bar .search .text-button,
  .utility-bar .search .search-submit { width: 100%; }

  .utility-bar .choice-open,
  .utility-bar .saved-open { justify-content: center; }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .site-footer .sol-container {
    padding-top: 36px;
    padding-bottom: 24px;
  }
}

@media (max-width: 420px) {
  .header-logo .mark-text small { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .main-menu, .theme-card, .overview-card { transition: none; }
}

.grid, .overview-list, .note-list, .steps {
  gap: 22px;
  align-items: stretch;
}

.theme-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #ffffff;
  border: 0;
  border-radius: 20px;
  box-shadow: var(--sol-shadow);
  overflow: hidden;
}

.theme-card .card-frame,
.theme-card .card-media,
.overview-card .card-media {
  border-radius: 0;
  box-shadow: none;
}

.theme-card .card-body,
.overview-copy {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  padding: 16px 18px 18px;
}

.theme-card .media-label {
  margin: 0 0 6px;
  padding: 0;
  background: transparent;
  color: var(--sol-theme);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.theme-card .card-body h2 { margin: 0 0 6px; }

.theme-card .card-body p,
.overview-copy p { margin: 0; }

.theme-card .card-quick,
.overview-card .card-actions {
  margin-top: auto;
  padding-top: 16px;
  justify-content: flex-start;
}

.theme-card .card-quick .text-button {
  flex: 0 1 auto;
}

.theme-card .card-choice {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  justify-content: center;
  width: auto;
  min-height: 44px;
  margin-top: 10px;
  padding: 0 18px;
  border: 1px solid var(--sol-theme);
  border-radius: 999px;
  background: #ffffff;
  color: var(--sol-theme);
  font-weight: 600;
  text-decoration: none;
}

.theme-card .card-choice:hover {
  background: var(--sol-gold);
  color: var(--sol-theme);
  text-decoration: none;
}

.overview-card {
  display: grid;
  grid-template-columns: minmax(220px, 42%) minmax(0, 1fr);
  gap: 0;
  padding: 0;
  overflow: hidden;
  align-items: stretch;
}

.overview-card .card-media {
  height: 100%;
  min-height: 220px;
  aspect-ratio: auto;
}

.overview-card .card-media img {
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
}

.overview-copy { padding: 22px 22px 18px; }

.overview-copy h3 { margin: 0 0 8px; }

.overview-card .card-actions { align-items: center; }

.steps article {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 22px 20px 18px;
}

.steps article h2 { margin: 0 0 8px; font-size: 1.15rem; }

.steps article p { margin: 0; }

.steps article p.step-index {
  margin: 0 0 12px;
  color: var(--sol-theme);
  font-family: "Jost", sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
}

.steps article {
  position: relative;
  overflow: hidden;
  border-top: 0;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.steps article::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--sol-gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.steps article.is-in { opacity: 1; transform: none; }

.steps article.is-in::before { transform: scaleX(1); }

.steps article:nth-child(2),
.steps article:nth-child(2)::before { transition-delay: 0.08s; }

.steps article:nth-child(3),
.steps article:nth-child(3)::before { transition-delay: 0.16s; }

.steps article:nth-child(4),
.steps article:nth-child(4)::before { transition-delay: 0.24s; }

@media (prefers-reduced-motion: reduce) {
  .steps article,
  .steps article::before,
  .steps article:nth-child(2),
  .steps article:nth-child(2)::before,
  .steps article:nth-child(3),
  .steps article:nth-child(3)::before,
  .steps article:nth-child(4),
  .steps article:nth-child(4)::before {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.note-card, .empty, .choice-banner, .account-form, .choice-form {
  padding: 22px;
}

.note-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.note-card h2, .note-card p, .empty h2, .empty p { margin: 0; }

.note-card .text-button, .empty a { align-self: flex-start; margin-top: 8px; }

.theme-card:hover, .overview-card:hover {
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.08);
}

@media (max-width: 899px) {
  .overview-card { grid-template-columns: 1fr; }
  .overview-card .card-media { aspect-ratio: 3 / 2; height: auto; min-height: 0; }
  .overview-card .card-media img { aspect-ratio: 3 / 2; }
}

/* Home thumbnail slider. The screenshot stays clear; the title and actions sit under it. */

.home-slider { margin: 0 0 36px; }

.home-slider-frame {
  display: grid;
  overflow: hidden;
  border-radius: 20px;
  background: #ffffff;
  box-shadow: var(--sol-shadow);
  touch-action: pan-y;
}

.home-slide {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  opacity: 0;
  visibility: hidden;
  z-index: 0;
  transition: opacity 0.9s cubic-bezier(0.7, 0, 0.3, 1), visibility 0s linear 0.9s;
}

.home-slide.is-active {
  opacity: 1;
  visibility: visible;
  z-index: 1;
  transition: opacity 0.9s cubic-bezier(0.7, 0, 0.3, 1), visibility 0s;
}

.home-slide-media {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--sol-paper);
}

.home-slide-media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(228, 228, 228, 0.55) 0%,
    rgba(228, 228, 228, 0) 24%,
    rgba(0, 0, 0, 0) 58%,
    rgba(0, 0, 0, 0.55) 100%
  );
}

.home-slide-media img,
.home-slide-media svg,
.home-slide-media [role="img"] {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

.home-slide-copy {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 22px 24px 20px;
  background: #ffffff;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s cubic-bezier(0.645, 0.045, 0.355, 1) 0.12s, transform 0.6s cubic-bezier(0.645, 0.045, 0.355, 1) 0.12s;
}

.home-slide.is-active .home-slide-copy {
  opacity: 1;
  transform: none;
}

.home-slide-kicker,
.home-slide-title,
.home-slide-desc { margin: 0; }

.home-slide-kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  color: var(--sol-theme);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.home-slide-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  min-height: 28px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--sol-gold);
  color: var(--sol-theme);
  letter-spacing: 0.04em;
  font-size: 0.75rem;
}

.home-slide-title {
  margin-top: 10px;
  color: var(--sol-title);
  font-family: "Epilogue", "Segoe UI", sans-serif;
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.04em;
}

.home-slide-desc {
  max-width: 40rem;
  margin-top: 8px;
  color: var(--sol-text);
  font-size: 1.02rem;
  line-height: 1.5;
}

.home-slide-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.home-slide-actions a {
  text-decoration: none;
}

.home-slide-actions .text-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 16px;
  background: #ffffff;
  color: var(--sol-theme);
}

.home-slide-actions a:focus-visible {
  outline: 3px solid var(--sol-gold);
  outline-offset: 3px;
}

@media (max-width: 899px) {
  .home-slide-copy { padding: 18px 16px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .home-slide,
  .home-slide-copy { transition: none; }
}

/* Home layouts section. Cards rise and settle when they enter the page. */

.home-services {
  margin: 8px 0 0;
  overflow: hidden;
  border-radius: 20px;
  background: #10221f;
  box-shadow: var(--sol-shadow);
}

.home-services-intro {
  position: relative;
  padding: 52px 28px 12px;
  text-align: center;
  background:
    linear-gradient(180deg, rgba(228, 228, 228, 0.16), rgba(0, 0, 0, 0) 46%),
    linear-gradient(180deg, #0b3d38 0%, #10221f 100%);
}

.home-services-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  padding: 6px 16px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.home-services-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ffffff;
}

html[data-fcf-style="branded"] .home-services h2 {
  max-width: 16em;
  margin: 0 auto;
  color: #ffffff;
  font-size: clamp(1.8rem, 4vw, 2.7rem);
  line-height: 1.15;
}

.home-services h2 span { color: var(--sol-gold); }

.home-services-lede {
  max-width: 38rem;
  margin: 14px auto 0;
  color: rgba(255, 255, 255, 0.78);
}

.home-services-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  padding: 22px;
}

.home-service {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
  min-height: 100%;
  padding: 28px 22px 22px;
  border-radius: 20px;
  background: #004540;
}

.home-service-icon {
  width: 72px;
  height: 72px;
  display: block;
}

html[data-fcf-style="branded"] .home-service h3 {
  margin: 4px 0 0;
  color: #ffffff;
  font-size: 1.35rem;
}

.home-service p {
  flex: 1;
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
}

.home-service a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  margin-top: 8px;
  padding: 0 16px;
  border: 2px solid var(--sol-gold);
  border-radius: 999px;
  background: transparent;
  color: var(--sol-gold);
  font-weight: 700;
  text-decoration: none;
}

.home-service a:hover {
  background: var(--sol-gold);
  color: var(--sol-theme);
  text-decoration: none;
}

.home-service a:focus-visible {
  outline: 3px solid var(--sol-gold);
  outline-offset: 3px;
}

.home-services .fade-down,
.home-services .zoom-in {
  opacity: 0;
  transition: opacity 0.75s ease, transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

.home-services .fade-down { transform: translateY(28px); }

.home-services .zoom-in { transform: scale(0.92); }

.home-services .fade-down.is-in,
.home-services .zoom-in.is-in {
  opacity: 1;
  transform: none;
}

.home-services .fade-down:nth-child(2) { transition-delay: 0.08s; }
.home-services .fade-down:nth-child(3) { transition-delay: 0.16s; }

.home-services-grid .zoom-in:nth-child(2) { transition-delay: 0.1s; }
.home-services-grid .zoom-in:nth-child(3) { transition-delay: 0.2s; }
.home-services-grid .zoom-in:nth-child(4) { transition-delay: 0.3s; }

.home-service.is-in {
  transition: opacity 0.75s ease, transform 0.75s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s ease;
}

.home-service.is-in:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.22);
}

@media (min-width: 1200px) {
  .home-services-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .home-services-intro { padding: 36px 18px 8px; }
  .home-services-grid { grid-template-columns: 1fr; padding: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .home-services .fade-down,
  .home-services .zoom-in,
  .home-service.is-in {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.nav-sub { position: relative; }

.nav-sub-menu {
  position: absolute;
  z-index: 2;
  top: calc(100% + 8px);
  left: 0;
  min-width: 148px;
  margin: 0;
  padding: 8px;
  list-style: none;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 12px 28px rgba(16, 24, 22, 0.14);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
}

.nav-sub::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 12px;
}

.nav-sub:hover > .nav-sub-menu,
.nav-sub:focus-within > .nav-sub-menu,
.nav-sub:has(> .nav-sub-menu a[aria-current="page"]) > .nav-sub-menu {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.nav-sub-menu a {
  display: flex;
  width: 100%;
  white-space: nowrap;
}

.nav-caret {
  width: 0.8em;
  height: 0.8em;
  margin-left: 1px;
}

.nav-caret::before {
  width: 0.8em;
  height: 0.8em;
  transform: rotate(90deg);
  transition: transform 0.16s ease;
}

.nav-sub:hover > a .nav-caret::before,
.nav-sub:focus-within > a .nav-caret::before,
.nav-sub:has(> .nav-sub-menu a[aria-current="page"]) > a .nav-caret::before {
  transform: rotate(-90deg);
}

@media (min-width: 900px) {
  .main-menu .nav-caret[data-icon]::before { display: block; }
}

@media (max-width: 899px) {
  .nav-sub::after { display: none; }

  .nav-sub-menu {
    position: static;
    min-width: 0;
    margin: 2px 0 0;
    padding: 0 0 0 18px;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-sub-menu,
  .nav-caret::before { transition: none; }
}

@media print {
  .home-services .fade-down,
  .home-services .zoom-in {
    opacity: 1 !important;
    transform: none !important;
  }
  .home-slide {
    position: static;
    display: block;
    height: auto;
    padding: 0 0 16px;
    opacity: 1;
    visibility: visible;
    break-inside: avoid;
  }
  .home-slide:not(.is-active) { display: none; }
  .home-slide-media { position: relative; height: 240px; }
  .home-slide-copy {
    opacity: 1;
    transform: none;
    background: none;
    border: 0;
    box-shadow: none;
    padding: 12px 0;
  }
}

/* Template detail review.
   Fit and pages sit in two paper cards. Page names are pills.
   Section rows show what the template includes.
   This file loads after gallery.css, so equal specificity wins.
   Headings stay Epilogue from the branded heading rule above.
   The h3 label repeats under the branded selector so Jost, the
   theme color, and the wider letter-spacing beat that heading rule.
   Pill colors repeat under .review-panel so they beat the main
   link color in gallery.css. At 899px the cards stack in one column.
   Pills wrap. No fixed height. */

.split.review-panels {
  gap: 20px;
  align-items: stretch;
}

.review-panel {
  background: #ffffff;
  border: 1px solid var(--sol-line);
  border-radius: 20px;
  box-shadow: var(--sol-shadow);
  padding: 28px 28px 24px;
}

.review-panel h2 {
  margin: 0 0 10px;
  font-size: 1.35rem;
}

.review-panel h3,
html[data-fcf-style="branded"] .review-panel h3 {
  margin: 22px 0 10px;
  font-family: "Jost", "Segoe UI", sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sol-theme);
}

.review-lead {
  margin: 0 0 8px;
  color: var(--sol-text);
}

.review-points {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

.review-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.review-list li {
  position: relative;
  padding-left: 18px;
  color: var(--sol-text);
}

.review-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sol-theme);
}

.review-list-caution li::before {
  background: var(--sol-muted);
}

.page-list {
  columns: unset;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}

.page-list li {
  margin: 0;
}

.page-list a,
.page-list span,
.review-panel .page-list a,
.review-panel .page-list span {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--sol-line);
  background: var(--sol-paper);
  color: var(--sol-theme);
  font-weight: 600;
  text-decoration: none;
}

.page-list a:hover,
.review-panel .page-list a:hover {
  background: var(--sol-theme);
  color: #ffffff;
  text-decoration: none;
}

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

.section-status li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--sol-line);
}

.section-status li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.section-status li > span:first-child {
  color: var(--sol-title);
  font-weight: 600;
}

.status {
  color: var(--sol-muted);
  font-size: 0.85rem;
  font-weight: 600;
}

.status.is-on {
  color: var(--sol-theme);
}

@media (max-width: 899px) {
  .split.review-panels {
    grid-template-columns: 1fr;
  }

  .review-points {
    grid-template-columns: 1fr;
  }

  .page-list {
    columns: unset;
  }
}

.auth-intro {
  max-width: 28rem;
  margin-bottom: 18px;
}

.auth-intro .lede,
.auth-note {
  margin-bottom: 0;
}

.auth-panel {
  max-width: 28rem;
  border-top: 4px solid var(--sol-gold);
  border-radius: 20px;
  background: #ffffff;
  box-shadow: var(--sol-shadow);
}

.auth-panel > .auth-intro-entry {
  max-width: none;
  margin: 0;
  padding: 26px 28px 18px;
  border-bottom: 1px solid rgba(0, 69, 64, 0.12);
}

.auth-panel > .auth-intro-entry .eyebrow {
  margin: 0 0 10px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  line-height: 1.2;
}

.auth-panel > .auth-intro-entry h1 {
  margin: 0 0 12px;
  font-size: 2rem;
  line-height: 1.08;
  letter-spacing: -0.03em;
}

.auth-panel > .auth-intro-entry .lede {
  max-width: 34ch;
  margin: 0;
  color: var(--sol-title);
  font-size: 1.05rem;
  line-height: 1.45;
}

.auth-panel .auth-points {
  display: grid;
  gap: 8px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.auth-panel .auth-points li {
  position: relative;
  margin: 0;
  padding-left: 16px;
  color: var(--sol-text);
  font-family: "Jost", sans-serif;
  font-size: 0.95rem;
  line-height: 1.45;
}

.auth-panel .auth-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sol-theme);
}

.auth-panel > .auth-intro-entry .auth-note {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid rgba(0, 69, 64, 0.12);
  font-size: 0.92rem;
  line-height: 1.5;
}

.auth-panel > .account-form.auth-form {
  max-width: none;
  border-top: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.auth-panel > .auth-intro-entry h2 {
  margin: 0 0 10px;
  font-size: 1.35rem;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

main:has(> .auth-stage) {
  display: flex;
  flex-direction: column;
  align-items: center;
}

main:has(> .auth-stage) > :not(.auth-stage) {
  width: 100%;
}

.auth-stage {
  width: min(28rem, 100%);
  margin: 12px auto 40px;
  display: grid;
  justify-items: stretch;
  gap: 18px;
}

.auth-stage > .auth-panel {
  width: 100%;
  max-width: none;
  margin: 0;
}

.auth-panel > .auth-card-foot {
  display: grid;
  gap: 10px;
  justify-items: center;
  margin: 0;
  padding: 16px 28px 22px;
  border-top: 1px solid rgba(0, 69, 64, 0.12);
  text-align: center;
}

.auth-panel > .auth-card-foot p {
  margin: 0;
  color: var(--sol-text);
  font-family: "Jost", sans-serif;
  font-size: 0.92rem;
  line-height: 1.5;
}

.auth-panel > .auth-card-foot .auth-links,
.auth-panel .account-form .auth-links {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0;
  padding-top: 0;
  border-top: 0;
  text-align: center;
}

@media (max-width: 699px) {
  .auth-panel > .auth-intro-entry {
    padding: 22px 18px 16px;
  }

  .auth-panel > .auth-card-foot {
    padding: 14px 18px 18px;
  }
}

.auth-note {
  margin-top: 10px;
  color: var(--sol-text);
  font-family: "Jost", sans-serif;
  line-height: 1.6;
}

.account-form.auth-form {
  max-width: 28rem;
  margin: 0;
  padding: 28px 28px 22px;
  gap: 16px;
  border: 0;
  border-top: 4px solid var(--sol-gold);
  border-radius: 20px;
  background: #ffffff;
  box-shadow: var(--sol-shadow);
}

.auth-field {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.auth-label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.account-form.auth-form label {
  color: var(--sol-title);
  font-family: "Jost", sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.account-form.auth-form input[data-fcf-component="field"] {
  width: 100%;
  min-height: 48px;
}

.auth-reveal {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  min-height: 0;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--sol-theme);
  font-family: "Jost", sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
}

.auth-reveal::before {
  width: 1em;
  height: 1em;
}

.auth-reveal::after {
  content: none;
}

.auth-reveal:hover {
  color: var(--sol-title);
  background: transparent;
}

.account-form.auth-form .password-rules {
  margin: 0;
  padding: 12px 14px 12px 1.6rem;
  border-radius: 14px;
  background: var(--sol-paper);
  color: var(--sol-text);
  font-family: "Jost", sans-serif;
  font-size: 0.92rem;
  line-height: 1.5;
}

.account-form.auth-form .form-error,
.account-form.auth-form .form-notice {
  margin: 0;
  padding: 12px 14px;
  border-radius: 14px;
  font-family: "Jost", sans-serif;
  line-height: 1.5;
}

.account-form.auth-form .form-error {
  background: #f8eeec;
  color: #8d3b32;
}

.account-form.auth-form .form-notice {
  background: var(--sol-paper);
  color: var(--sol-title);
}

.account-form.auth-form [data-fcf-component="button-primary"] {
  width: 100%;
  min-height: 48px;
  margin-top: 2px;
}

.auth-links {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 16px;
  margin: 2px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--sol-line);
  color: var(--sol-text);
  font-family: "Jost", sans-serif;
  line-height: 1.5;
}

.auth-links a {
  color: var(--sol-theme);
  font-weight: 600;
  text-decoration: none;
}

.auth-links a:hover {
  color: var(--sol-title);
}

@media (max-width: 699px) {
  .account-form.auth-form {
    padding: 22px 18px 18px;
  }
}

:is(.account-form, .choice-form, .decision-form).auth-form {
  max-width: 28rem;
  padding: 28px 28px 22px;
  gap: 16px;
  border: 0;
  border-top: 4px solid var(--sol-gold);
  border-radius: 20px;
  background: #ffffff;
  box-shadow: var(--sol-shadow);
  display: grid;
}

.auth-intro.auth-intro-wide,
:is(.choice-form, .decision-form).auth-form,
.auth-form.auth-form-wide {
  max-width: 36rem;
}

:is(.account-form, .choice-form, .decision-form).auth-form h2 {
  margin: 0;
  font-size: 1.15rem;
}

:is(.account-form, .choice-form, .decision-form).auth-form > p:not(.auth-links) {
  margin: 0;
}

:is(.account-form, .choice-form, .decision-form).auth-form .auth-note {
  margin: 0;
}

.auth-links.auth-links-end {
  max-width: 36rem;
  margin: 14px 0 0;
  padding-top: 0;
  border-top: 0;
}

.page-action {
  margin: 0 0 18px;
}

.account-form.auth-form .recovery-codes {
  max-width: none;
  margin: 0;
}

.account-form.auth-form .recovery-codes code {
  display: block;
  background: var(--sol-paper);
  border-radius: 12px;
}

:is(.account-form, .choice-form, .decision-form).auth-form label {
  color: var(--sol-title);
  font-family: "Jost", sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

:is(.account-form, .choice-form, .decision-form).auth-form input[data-fcf-component="field"] {
  width: 100%;
  min-height: 48px;
}

:is(.account-form, .choice-form, .decision-form).auth-form .password-rules {
  margin: 0;
  padding: 12px 14px 12px 1.6rem;
  border-radius: 14px;
  background: var(--sol-paper);
  color: var(--sol-text);
  font-family: "Jost", sans-serif;
  font-size: 0.92rem;
  line-height: 1.5;
}

:is(.account-form, .choice-form, .decision-form).auth-form .form-error,
:is(.account-form, .choice-form, .decision-form).auth-form .form-notice {
  margin: 0;
  padding: 12px 14px;
  border-radius: 14px;
  font-family: "Jost", sans-serif;
  line-height: 1.5;
}

:is(.account-form, .choice-form, .decision-form).auth-form .form-error {
  background: #f8eeec;
  color: #8d3b32;
}

:is(.account-form, .choice-form, .decision-form).auth-form .form-notice {
  background: var(--sol-paper);
  color: var(--sol-title);
}

:is(.account-form, .choice-form, .decision-form).auth-form [data-fcf-component="button-primary"] {
  width: 100%;
  min-height: 48px;
  margin-top: 2px;
}

@media (max-width: 699px) {
  :is(.account-form, .choice-form, .decision-form).auth-form {
    padding: 22px 18px 18px;
  }
}

.auth-form + .auth-form,
.callout + .auth-form,
.callout + .callout {
  margin-top: 16px;
}

.auth-label-row {
  flex-wrap: wrap;
}

.auth-form > .auth-links:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.page-intro ~ .form-notice,
.page-intro ~ .form-error {
  max-width: 36rem;
  margin: 0 0 16px;
  padding: 12px 14px;
  border-radius: 14px;
  font-family: "Jost", sans-serif;
  line-height: 1.5;
}

.page-intro ~ .form-error {
  background: #f8eeec;
  color: #8d3b32;
}

.page-intro ~ .form-notice {
  background: var(--sol-paper);
  color: var(--sol-title);
  font-weight: 500;
}

.auth-intro ~ .auth-note {
  max-width: 28rem;
  margin-top: 16px;
}

:is(.account-form, .choice-form, .decision-form).auth-form select[data-fcf-component="field"],
:is(.account-form, .choice-form, .decision-form).auth-form textarea[data-fcf-component="field"] {
  width: 100%;
}

.auth-form code {
  overflow-wrap: anywhere;
}

.account-actions {
  max-width: 36rem;
}

.section-follow,
.content-card {
  margin-top: 28px;
}

.section-follow > h2,
.content-card > h2 {
  margin: 0 0 14px;
  font-size: 1.35rem;
}

.content-card {
  padding: 28px 28px 22px;
  border-radius: 20px;
  background: #ffffff;
  box-shadow: var(--sol-shadow);
}

.content-card h3 {
  margin: 18px 0 6px;
  font-size: 1.05rem;
}

.content-card ul {
  margin: 0 0 4px;
  padding-left: 1.2rem;
}

.content-card > p:last-child {
  margin: 14px 0 0;
}

@media (max-width: 699px) {
  .content-card {
    padding: 22px 18px 18px;
  }
}

html[data-fcf-style="branded"] .account-form .role-options label {
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
}

html[data-fcf-style="branded"] .account-form .role-options input[type="checkbox"] {
  width: auto;
  height: 1.1rem;
  min-height: 0;
  padding: 0;
  border-radius: 4px;
  box-shadow: none;
}