/* Product exploration, collection and guided setup. */
[hidden] {
  display: none !important;
}
.skip-link {
  position: fixed;
  top: -100px;
  left: 20px;
  z-index: 100;
  background: var(--mint);
  color: #12242b;
  padding: 12px 20px;
  border-radius: 8px;
}
.skip-link:focus {
  top: 12px;
}
.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;
}
.text-button {
  background: none;
  border: 0;
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  padding: 10px 0;
  cursor: pointer;
}
.breadcrumb {
  display: block;
  color: var(--muted);
  font-size: 11px;
  margin-bottom: 30px;
}
.demo-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 8px;
  letter-spacing: 1px;
  font-weight: 700;
  color: #aab9cf;
  white-space: nowrap;
}
.demo-label:before {
  content: "";
  width: 5px;
  height: 5px;
  background: var(--mint);
  border-radius: 50%;
}
.nav-resources {
  position: relative;
}
.nav-resources > summary {
  cursor: pointer;
  list-style: none;
  color: #aeb6c9;
  padding: 14px 0;
  display: flex;
  align-items: center;
  gap: 9px;
}
.nav-resources > summary::-webkit-details-marker {
  display: none;
}
.nav-resources[open] > summary {
  color: var(--mint);
}
.resource-dropdown {
  position: absolute;
  right: -70px;
  top: 53px;
  width: 530px;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  padding: 18px;
  gap: 20px;
  border: 1px solid #38475a;
  border-radius: 17px;
  background: #172333;
  box-shadow: 0 25px 60px #0007;
}
.resource-dropdown > div > small {
  display: block;
  font-size: 8px;
  letter-spacing: 1px;
  color: #8f9eb4;
  padding: 8px 10px 14px;
}
.nav-row nav .resource-dropdown a {
  white-space: normal;
}
.resource-dropdown > div > a {
  display: flex;
  gap: 12px;
  padding: 11px 10px;
  border-radius: 9px;
  color: var(--ink);
}
.resource-dropdown > div > a:hover {
  background: #243346;
}
.resource-dropdown > div > a > span {
  font-size: 21px;
}
.resource-dropdown a small {
  display: block;
  color: #9cacc0;
  font-size: 10px;
  font-weight: 400;
  margin-top: 3px;
}
.dropdown-feature {
  padding: 15px;
  border-radius: 12px;
  background: linear-gradient(140deg, #244946, #243046);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.dropdown-feature img {
  width: 150px;
  max-width: 100%;
  height: auto;
  align-self: center;
}
.dropdown-feature b {
  font-size: 14px;
}
.dropdown-feature > span {
  color: var(--mint);
  font-size: 9px;
  margin-top: 17px;
}

/* Homepage routes are visual doors into actual product tools. */
.home-discovery {
  display: grid;
  grid-template-columns: 1.45fr 1fr 1fr;
  gap: 20px;
  padding-block: 0 100px;
}
.discovery-main,
.discovery-tile {
  border: 1px solid var(--line);
  border-radius: 20px;
  position: relative;
  overflow: hidden;
}
.discovery-main {
  min-height: 435px;
  padding: 35px;
  background: #1c3040;
}
.discovery-main h2 {
  font-size: 35px;
  position: relative;
  z-index: 1;
}
.discovery-main p {
  font-size: 12px;
  max-width: 270px;
  position: relative;
  z-index: 1;
}
.discovery-main .btn {
  position: relative;
  z-index: 1;
  margin-top: 20px;
}
.discovery-main img {
  width: 205px;
  height: auto;
  position: absolute;
  right: -30px;
  bottom: -35px;
  opacity: 0.76;
}
.discovery-tile {
  padding: 35px 28px;
  display: flex;
  flex-direction: column;
  transition:
    transform 0.2s,
    border-color 0.2s;
}
.discovery-tile:hover {
  transform: translateY(-5px);
  border-color: #829796;
}
.discovery-purple {
  background: linear-gradient(150deg, #352f49, #21233b);
}
.discovery-mint {
  background: linear-gradient(150deg, #284444, #203138);
}
.tile-emoji {
  font-size: 36px;
  margin-bottom: 48px;
}
.discovery-tile > small {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 1.3px;
  color: #c9b9eb;
}
.discovery-mint > small {
  color: #a3d7c7;
}
.discovery-tile h3 {
  font-size: 27px;
  line-height: 1.2;
  margin: 15px 0 5px;
}
.discovery-tile p {
  font-size: 11px;
}
.discovery-tile > b {
  font-size: 11px;
  color: var(--mint);
  margin-top: auto;
  padding-top: 25px;
}
.mini-palette {
  position: absolute;
  top: 58px;
  right: 28px;
  display: flex;
  transform: rotate(-17deg);
}
.mini-palette i {
  width: 24px;
  height: 64px;
  border: 3px solid #655979;
  border-radius: 8px;
  background: #ba9cf4;
  box-shadow: 0 4px 10px #0004;
  margin-left: -5px;
}
.mini-palette i:nth-child(2) {
  background: #f3eee5;
}
.mini-palette i:nth-child(3) {
  background: #b2d788;
}
.mini-palette i:nth-child(4) {
  background: #efb274;
}
.mini-checks {
  position: absolute;
  right: 24px;
  top: 34px;
  border: 1px solid #42625c;
  background: #193234;
  padding: 10px 20px;
  transform: rotate(8deg);
  border-radius: 10px;
  color: var(--mint);
  font-size: 17px;
  line-height: 1.6;
}
.mini-checks i {
  font-style: normal;
  font-size: 10px;
  letter-spacing: 8px;
  color: #799a91;
}

/* The feature page combines product examples instead of repeating image/text rows. */
.product-hero {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 70px;
  align-items: center;
  padding-block: 85px 80px;
}
.product-intro h1 {
  font-size: 58px;
  line-height: 1.05;
  letter-spacing: -2.5px;
  margin: 0 0 25px;
}
.product-intro p {
  font-size: 14px;
  max-width: 480px;
}
.product-mini-links {
  display: flex;
  gap: 18px;
  color: #8c9fb7;
  font-size: 10px;
  margin-top: 28px;
}
.mission-card {
  position: relative;
  background: linear-gradient(130deg, #23394b, #192535);
  border: 1px solid #3e5864;
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 20px 80px #0003;
  transform: rotate(-2deg);
  margin: 15px 35px 25px 0;
}
.mission-top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 8px;
  letter-spacing: 1.2px;
  color: #a6c0c8;
  border-bottom: 1px solid #3a4c5d;
  padding-bottom: 18px;
}
.mission-server {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 24px 0;
}
.mission-avatar {
  width: 47px;
  height: 47px;
  border-radius: 14px;
  background: #3d3e64;
  display: grid;
  place-items: center;
  font-size: 24px;
}
.mission-server b {
  font-size: 14px;
  display: block;
}
.mission-server small {
  color: #9caec3;
  display: block;
  font-size: 10px;
}
.mission-server i {
  margin-left: auto;
  font-style: normal;
  background: #36594b;
  color: #bef5d7;
  font-size: 9px;
  padding: 3px 8px;
  border-radius: 5px;
}
.mission-confirm {
  display: flex;
  align-items: center;
  gap: 18px;
  background: #142824;
  border: 1px solid #3b6255;
  border-radius: 13px;
  padding: 24px 20px;
}
.mission-confirm > span {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #8aefd126;
  color: var(--mint);
  display: grid;
  place-items: center;
  font-size: 24px;
}
.mission-confirm small {
  color: var(--mint);
  font-size: 8px;
  letter-spacing: 1px;
}
.mission-confirm h3 {
  font-size: 21px;
  margin: 3px 0;
}
.mission-confirm p {
  font-size: 10px;
  margin: 0;
}
.mission-footer {
  display: flex;
  justify-content: space-between;
  padding: 23px 0 4px;
}
.mission-footer small {
  font-size: 8px;
  letter-spacing: 1px;
  display: block;
  color: #9cacc0;
}
.mission-footer b {
  font-size: 20px;
}
.mission-bars {
  font-size: 28px;
  letter-spacing: 4px;
  color: #7dc3ab;
  padding-right: 70px;
}
.mission-cylo {
  position: absolute;
  width: 180px;
  height: auto;
  bottom: -50px;
  right: -85px;
  filter: drop-shadow(0 15px 12px #0005);
  transform: rotate(4deg);
}
.product-nav-wrap {
  border-block: 1px solid var(--line);
  background: #131e2e;
}
.product-nav {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding-block: 19px;
  color: #bbc5d5;
  font-size: 11px;
  overflow-x: auto;
}
.product-nav a {
  white-space: nowrap;
}
.product-nav a:hover {
  color: var(--mint);
}
.feature-overview {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  padding-block: 40px;
  border-bottom: 1px solid var(--line);
}
.feature-overview a {
  display: flex;
  gap: 14px;
  align-items: center;
}
.feature-overview a > span {
  font-size: 27px;
}
.feature-overview h3 {
  font-size: 14px;
  margin: 0;
}
.feature-overview p {
  font-size: 10px;
  margin: 4px 0 0;
}
.cycle-board {
  border: 1px solid #3a4b5f;
  border-radius: 18px;
  overflow: hidden;
  background: #182536;
}
.cycle-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid #3a4b5f;
}
.cycle-tabs button {
  background: #121d2b;
  color: #aab8c9;
  border: 0;
  border-right: 1px solid #3a4b5f;
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 23px;
  font: inherit;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
}
.cycle-tabs button:last-child {
  border-right: 0;
}
.cycle-tabs button > span {
  font-size: 10px;
  color: #779489;
}
.cycle-tabs button > i {
  margin-left: auto;
  font-style: normal;
}
.cycle-tabs button[aria-selected="true"] {
  background: #244b45;
  color: #c5fae6;
}
.cycle-detail {
  display: grid;
  grid-template-columns: 0.7fr 1.3fr;
  gap: 50px;
  align-items: center;
  padding: 40px 60px;
  min-height: 280px;
}
.cycle-visual {
  height: 195px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 20px;
}
.cycle-orbit {
  position: absolute;
  border: 1px dashed #4e7c73;
  border-radius: 50%;
  width: 190px;
  height: 190px;
  transform: rotate(-15deg);
}
#cycle-icon {
  font-size: 55px;
  position: relative;
  line-height: 1.2;
  color: var(--mint);
}
#cycle-visual-label {
  color: var(--mint);
  font-size: 8px;
  letter-spacing: 1.2px;
  position: relative;
}
.cycle-detail h3 {
  font-size: 32px;
  line-height: 1.2;
  margin: 12px 0;
}
.cycle-detail p {
  font-size: 13px;
  max-width: 560px;
}
#cycle-footnote {
  font-size: 10px;
  color: #82bfae;
}
.rhythm-inline {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1fr;
  gap: 28px;
  align-items: center;
  padding: 28px 0 0;
}
.rhythm-inline h3 {
  font-size: 16px;
  margin: 0;
}
.rhythm-inline p {
  font-size: 10px;
  margin: 5px 0 0;
}
.rhythm-inline .rhythm-options {
  margin: 0;
}
.rhythm-inline .rhythm-value {
  font-size: 25px;
  margin: 0;
  display: block;
}
.rhythm-inline .rhythm-value small {
  font-size: 9px;
}
.incident-section {
  background: linear-gradient(130deg, #1d273c, #202334);
  padding: 80px 0;
  border-block: 1px solid #374259;
}
.incident-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 80px;
  align-items: center;
}
.incident-grid > div:first-child p {
  font-size: 13px;
  max-width: 390px;
}
.incident-grid > div:first-child > img {
  width: 230px;
  height: auto;
  margin: 0 0 -50px 100px;
}
.incident-console {
  background: #101b2b;
  border: 1px solid #435168;
  border-radius: 18px;
  padding: 28px;
  box-shadow: 0 15px 50px #0a102744;
}
.console-top {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  align-items: center;
  font-size: 12px;
  font-weight: 700;
  padding-bottom: 22px;
}
.incident-choices {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  padding-bottom: 24px;
}
.incident-choices button {
  border: 1px solid #3a465d;
  color: #aebbd0;
  background: #1b283b;
  border-radius: 7px;
  padding: 8px 10px;
  font: inherit;
  font-size: 9px;
  cursor: pointer;
}
.incident-choices button[aria-pressed="true"] {
  background: #3f3156;
  border-color: #8966b1;
  color: #dcc5ff;
}
.incident-status {
  display: flex;
  gap: 15px;
  align-items: center;
}
#incident-symbol {
  width: 47px;
  height: 47px;
  background: #ffad671a;
  border: 1px solid #ffad6744;
  color: var(--orange);
  display: grid;
  place-items: center;
  font-size: 25px;
  border-radius: 11px;
}
#incident-label {
  font-size: 8px;
  color: var(--orange);
  letter-spacing: 1px;
}
#incident-title {
  font-size: 23px;
  margin: 4px 0;
}
#incident-description {
  font-size: 12px;
  min-height: 66px;
}
.incident-log {
  list-style: none;
  padding: 0;
  margin: 20px 0 24px;
}
.incident-log li {
  font-size: 11px;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 12px 0;
  border-bottom: 1px solid #293749;
}
.incident-log li > span {
  font-size: 9px;
  color: #7d92ac;
  background: #1e2e41;
  border-radius: 5px;
  padding: 3px 7px;
}
.fleet-demo {
  display: grid;
  grid-template-columns: 255px 1fr;
  border: 1px solid #3a4b60;
  border-radius: 20px;
  overflow: hidden;
  background: #172333;
}
.fleet-sidebar {
  background: #121c2b;
  padding: 28px 20px;
  border-right: 1px solid #344156;
}
.fleet-sidebar .eyebrow {
  font-size: 8px;
}
.fleet-sidebar button {
  width: 100%;
  display: flex;
  align-items: center;
  text-align: left;
  gap: 12px;
  background: none;
  color: var(--ink);
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 14px 12px;
  cursor: pointer;
  margin-bottom: 6px;
  font: inherit;
}
.fleet-sidebar button[aria-pressed="true"] {
  background: #233e40;
  border-color: #446463;
}
.fleet-sidebar button > span:first-child {
  font-size: 25px;
}
.fleet-sidebar button b {
  display: block;
  font-size: 12px;
}
.fleet-sidebar button small {
  font-size: 9px;
  color: #92a6bc;
}
.fleet-sidebar button i {
  margin-left: auto;
  font-style: normal;
  color: var(--mint);
}
.fleet-sidebar > p {
  font-size: 9px;
  margin: 30px 12px 0;
  line-height: 1.7;
}
.fleet-content {
  padding: 30px;
}
.fleet-heading {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  align-items: center;
}
.fleet-heading .eyebrow {
  font-size: 8px;
  margin-bottom: 7px;
}
.fleet-heading h3 {
  font-size: 30px;
  margin: 0;
}
.fleet-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  padding: 22px 0;
}
.fleet-metrics > div {
  background: #1c2c3e;
  border: 1px solid #334358;
  border-radius: 10px;
  padding: 15px;
}
.fleet-metrics span {
  display: block;
  font-size: 9px;
  color: #94a6bb;
}
.fleet-metrics strong {
  display: block;
  font-size: 15px;
  margin: 8px 0;
}
.fleet-metrics small {
  display: block;
  font-size: 8px;
  color: #9aabc0;
}
.fleet-preview {
  border: 1px solid color-mix(in srgb, var(--fleet-accent) 35%, #1b293b);
  border-radius: 13px;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 25px;
  background: linear-gradient(
    130deg,
    color-mix(in srgb, var(--fleet-accent) 17%, #15202e),
    #101c2c
  );
}
.fleet-preview > span {
  font-size: 34px;
}
.fleet-preview small {
  font-size: 7px;
  letter-spacing: 1.5px;
  color: var(--fleet-accent);
}
.fleet-preview h3 {
  font-size: 23px;
  margin: 7px 0 0;
  line-height: 1.2;
}
.fleet-note {
  font-size: 10px;
  color: #9aacbf;
  display: flex;
  gap: 12px;
  margin-top: 20px;
}
.collection-feature {
  background: #e8eee7;
  color: #20343c;
  padding: 80px 0;
}
.collection-feature .eyebrow {
  color: #587767;
}
.collection-feature .btn {
  background: #203c3c;
  border-color: #203c3c;
  color: #e1f6e8;
}
.collection-feature .template-card {
  box-shadow: none;
  border-color: #cfdbd0;
  background: #f4f6f1;
}
.collection-feature .template-info h3 {
  color: #233936;
}
.collection-feature .template-info p {
  color: #6a7b74;
}
.collection-feature .template-info > div > span {
  color: #6a7b74;
}
.collection-feature .template-info > a {
  color: #315750;
  border-color: #cdd9ce;
}
.formats-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-top: 36px;
  font-size: 11px;
  color: #6c8279;
}
.formats-row b {
  color: #26453e;
  display: block;
  font-size: 14px;
}
.formats-row a {
  color: #315a4b;
  font-size: 11px;
  font-weight: 700;
}
.panel-followups {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 24px;
}
.panel-followups > a {
  display: flex;
  align-items: center;
  gap: 18px;
  background: #182637;
  border: 1px solid #34465a;
  border-radius: 12px;
  padding: 22px;
  color: var(--mint);
  font-size: 18px;
}
.panel-followups > a > span {
  font-size: 23px;
}
.panel-followups > a > div {
  flex: 1;
}
.panel-followups b {
  font-size: 12px;
  display: block;
  color: var(--ink);
}
.panel-followups small {
  font-size: 10px;
  display: block;
  color: #98a9c0;
  margin-top: 5px;
}

/* Style collection */
.library-hero,
.start-hero {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  align-items: center;
  gap: 50px;
  padding-block: 55px 35px;
}
.library-hero h1,
.start-hero h1 {
  font-size: 61px;
  line-height: 1.05;
  margin: 0 0 22px;
  letter-spacing: -2.4px;
}
.library-hero p,
.start-hero p {
  font-size: 14px;
  max-width: 520px;
}
.library-hero-art {
  position: relative;
  text-align: center;
  height: 355px;
}
.library-hero-art img {
  position: relative;
  width: 350px;
  height: auto;
  max-width: 100%;
}
.color-orbit {
  position: absolute;
  border: 1px dashed #63517b;
  border-radius: 50%;
  left: 10%;
  top: 8%;
  width: 80%;
  height: 82%;
  transform: rotate(-20deg);
}
.color-orbit.two {
  width: 61%;
  height: 100%;
  left: 20%;
  top: 0;
  transform: rotate(58deg);
  border-color: #4c6a5d;
}
.sticker {
  background: #c2a7ff;
  color: #342b4c;
  box-shadow: 0 8px 20px #0003;
  position: absolute;
  right: -3px;
  bottom: 30px;
  transform: rotate(-8deg);
  border-radius: 8px;
  padding: 11px 16px;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.4;
}
.collection-section {
  padding-block: 30px 70px;
}
.collection-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 25px;
  margin-bottom: 30px;
}
.filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.filter-pills button {
  font: inherit;
  font-size: 11px;
  cursor: pointer;
  padding: 9px 18px;
  border: 1px solid #3b485d;
  border-radius: 8px;
  background: #172232;
  color: #b1bed0;
}
.filter-pills button[aria-pressed="true"] {
  background: var(--mint);
  color: #213d38;
  border-color: var(--mint);
}
#template-count {
  font-size: 10px;
  color: #98a9c0;
  white-space: nowrap;
}
.template-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.template-card {
  border: 1px solid #35455a;
  border-radius: 16px;
  overflow: hidden;
  background: #182333;
  transition:
    transform 0.2s,
    box-shadow 0.2s;
}
.template-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px #0002;
}
.template-art {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  height: 205px;
  padding: 28px 24px 42px;
  background: var(--template-bg);
  color: var(--template-fg);
  overflow: hidden;
}
.template-art:before {
  content: "";
  width: 3px;
  height: 20px;
  background: var(--template-accent);
  position: absolute;
  left: 24px;
  top: 26px;
}
.template-art > small {
  font-size: 6px;
  letter-spacing: 2px;
  color: var(--template-accent);
  position: relative;
  padding-left: 10px;
  margin-bottom: 20px;
}
.template-art > strong {
  font:
    700 29px/1.05 "Bricolage Grotesque",
    sans-serif;
  position: relative;
  letter-spacing: -1px;
}
.template-tagline {
  font-size: 8px;
  position: relative;
  opacity: 0.7;
  margin-top: 9px;
  max-width: 90%;
}
.template-orb {
  position: absolute;
  width: 175px;
  height: 175px;
  right: -55px;
  top: -75px;
  border-radius: 50%;
  background: var(--template-accent);
  opacity: 0.16;
}
.template-slash {
  position: absolute;
  width: 130%;
  height: 1px;
  background: var(--template-accent);
  opacity: 0.6;
  bottom: 25px;
  left: -15%;
  transform: rotate(-6deg);
}
.template-avatar {
  position: absolute;
  bottom: 13px;
  left: 23px;
  border: 3px solid var(--template-bg);
  width: 37px;
  height: 37px;
  border-radius: 9px;
  background: color-mix(
    in srgb,
    var(--template-accent) 20%,
    var(--template-bg)
  );
  display: grid;
  place-items: center;
  font-size: 17px;
  font-weight: 700;
}
.template-use {
  position: absolute;
  right: 18px;
  bottom: 17px;
  font-size: 8px;
  color: var(--template-accent);
}
.template-info {
  padding: 20px;
  display: flex;
  align-items: flex-start;
  gap: 15px;
}
.template-info > div {
  flex: 1;
}
.template-info > div > span {
  font-size: 8px;
  color: #8c9fb8;
}
.template-info h3 {
  font-size: 18px;
  margin: 6px 0 8px;
}
.template-info p {
  font-size: 10px;
  margin: 0;
}
.template-info > a {
  width: 29px;
  height: 29px;
  display: grid;
  place-items: center;
  border: 1px solid #415069;
  border-radius: 50%;
  font-size: 14px;
  color: var(--mint);
}
.creative-process {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  border-top: 1px solid var(--line);
  padding-block: 70px;
  margin-bottom: 20px;
}
.creative-process > div > p {
  font-size: 12px;
  max-width: 430px;
}
.creative-process ol {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 20px;
}
.creative-process li {
  display: flex;
  gap: 22px;
  align-items: flex-start;
}
.creative-process li > b {
  border: 1px solid #47536c;
  color: #c4b0f0;
  border-radius: 9px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  flex: none;
  font-size: 11px;
}
.creative-process h3 {
  font-size: 18px;
  margin: 0 0 5px;
}
.creative-process li p {
  font-size: 11px;
  margin: 0;
}
.studio-collection-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  background: #242b42;
  border: 1px solid #4c4667;
  border-radius: 12px;
  padding: 18px 24px;
  margin-bottom: 24px;
  font-size: 11px;
  color: #cbbbe8;
}
.studio-collection-link .text-link {
  font-size: 11px;
  color: #d6c2ff;
}
.guide-shortcut {
  display: flex;
  align-items: center;
  gap: 22px;
  border: 1px solid #3e5b5e;
  border-radius: 14px;
  background: #1b333b;
  padding: 22px 26px;
  margin-bottom: 50px;
}
.guide-shortcut > span {
  font-size: 30px;
}
.guide-shortcut > div {
  flex: 1;
}
.guide-shortcut b {
  font-size: 15px;
}
.guide-shortcut p {
  font-size: 11px;
  margin: 4px 0 0;
}

/* Local installation preparation, distinct from server verification. */
.start-hero {
  grid-template-columns: 1.3fr 0.7fr;
  padding-bottom: 25px;
}
.start-hero > img {
  width: 310px;
  height: auto;
  justify-self: center;
}
.onboarding {
  display: grid;
  grid-template-columns: 310px 1fr;
  border: 1px solid #3c4e63;
  border-radius: 20px;
  overflow: hidden;
  background: #172333;
}
.onboarding-nav {
  background: #121e2c;
  padding: 33px 24px;
  border-right: 1px solid #33455a;
}
.onboarding-nav > .eyebrow {
  font-size: 8px;
  margin: 0 8px 20px;
}
.onboarding-nav > button {
  display: flex;
  align-items: center;
  gap: 13px;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 14px 12px;
  background: none;
  color: #acbacd;
  width: 100%;
  text-align: left;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  margin-bottom: 8px;
  cursor: pointer;
}
.onboarding-nav > button > span {
  font-size: 10px;
  background: #233347;
  border-radius: 7px;
  padding: 7px;
}
.onboarding-nav > button small {
  display: block;
  font-size: 9px;
  color: #8c9fb7;
  font-weight: 400;
  margin-top: 4px;
}
.onboarding-nav > button[aria-current="step"] {
  background: #254640;
  border-color: #3d6d60;
  color: #d4ffec;
}
.onboarding-nav > button[aria-current="step"] > span {
  background: #8aefd1;
  color: #254640;
}
.preparation-status {
  padding: 24px 12px 0;
  margin-top: 30px;
  border-top: 1px solid #324358;
}
.preparation-status > span {
  font-size: 11px;
  color: var(--mint);
}
.preparation-status progress {
  display: block;
  width: 100%;
  height: 5px;
  border: 0;
  background: #2c3e52;
  border-radius: 8px;
  margin: 13px 0 19px;
  accent-color: var(--mint);
}
.preparation-status progress::-webkit-progress-bar {
  background: #2c3e52;
  border-radius: 8px;
}
.preparation-status progress::-webkit-progress-value {
  background: var(--mint);
  border-radius: 8px;
}
.preparation-status small {
  font-size: 9px;
  color: #8c9fb7;
  line-height: 1.8;
  display: block;
}
.onboarding-content {
  padding: 45px;
  min-height: 680px;
}
.onboarding-content h2 {
  font-size: 35px;
}
.onboarding-content > article > p {
  font-size: 12px;
}
.prep-checks {
  display: grid;
  gap: 12px;
  margin-top: 25px;
}
.prep-checks label {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 17px 20px;
  border: 1px solid #394b63;
  background: #1b2b3e;
  border-radius: 11px;
  cursor: pointer;
}
.prep-checks label:has(input:checked) {
  background: #1c3a35;
  border-color: #4a7c68;
}
.prep-checks input {
  width: 17px;
  height: 17px;
  accent-color: var(--mint);
  flex: none;
  margin-top: 2px;
}
.prep-checks b {
  display: block;
  font-size: 11px;
}
.prep-checks small {
  display: block;
  color: #a1b1c6;
  font-size: 10px;
  line-height: 1.7;
  margin-top: 5px;
}
.start-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 25px;
  margin-top: 30px;
}
.start-actions .btn {
  font-size: 10px;
  gap: 10px;
}
.start-actions .text-link {
  font-size: 10px;
}
.numbered-guide {
  list-style: none;
  padding: 0;
  margin: 25px 0;
  display: grid;
  gap: 22px;
}
.numbered-guide > li {
  display: flex;
  gap: 18px;
}
.numbered-guide > li > span {
  width: 27px;
  height: 27px;
  border: 1px solid #52716c;
  border-radius: 50%;
  font-size: 11px;
  display: grid;
  place-items: center;
  color: var(--mint);
  flex: none;
}
.numbered-guide > li > div {
  flex: 1;
  min-width: 0;
}
.numbered-guide h3 {
  font-size: 17px;
  margin: 0;
}
.numbered-guide p {
  font-size: 11px;
}
.numbered-guide .btn {
  font-size: 10px;
  min-height: 38px;
  padding: 8px 14px;
}
.numbered-guide .guide-command {
  margin: 12px 0 0;
}
.start-destinations {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 30px;
}
.start-destinations a {
  background: #223749;
  border: 1px solid #40596c;
  border-radius: 13px;
  padding: 25px;
}
.start-destinations a > span {
  font-size: 29px;
  color: var(--mint);
}
.start-destinations h3 {
  font-size: 22px;
  margin: 12px 0;
}
.start-destinations p {
  font-size: 10px;
}
.start-destinations b {
  font-size: 10px;
  color: var(--mint);
}
.start-help {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  padding-block: 35px 75px;
}
.start-help h3 {
  font-size: 20px;
  margin: 0 0 5px;
}
.start-help p {
  font-size: 11px;
  margin: 0;
}

/* Offers: complete inclusions and a per-server estimate. */
.offer-workbench {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 90px;
  align-items: center;
  padding-block: 35px 85px;
}
.offer-workbench > div > p {
  font-size: 13px;
  max-width: 435px;
}
.included-checks {
  display: grid;
  gap: 11px;
  font-size: 11px;
  color: #a9cfc0;
  margin-top: 25px;
}
.budget-card {
  background: #1c2c3d;
  border: 1px solid #41566a;
  border-radius: 17px;
  padding: 30px;
}
.budget-card label {
  display: block;
  font-size: 11px;
  color: #bac8d8;
  margin-bottom: 10px;
}
.budget-card select {
  width: 100%;
  border: 1px solid #4a5d73;
  border-radius: 8px;
  background: #121e2d;
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  padding: 12px;
  margin-bottom: 22px;
}
.budget-stepper {
  display: flex;
  border: 1px solid #4a5d73;
  border-radius: 8px;
  overflow: hidden;
  background: #121e2d;
  width: 160px;
}
.budget-stepper button {
  width: 43px;
  background: #273c4c;
  border: 0;
  color: var(--mint);
  font-size: 20px;
  cursor: pointer;
  flex: none;
}
.budget-stepper input {
  width: 72px;
  background: transparent;
  border: 0;
  color: var(--ink);
  text-align: center;
  font-size: 15px;
  padding: 9px 0;
  appearance: textfield;
  -moz-appearance: textfield;
}
.budget-stepper input::-webkit-inner-spin-button {
  display: none;
}
.budget-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  border-block: 1px solid #3b4e63;
  padding: 22px 0;
  margin: 25px 0;
  font-size: 12px;
}
.budget-total small {
  display: block;
  color: #99aac0;
  font-size: 9px;
  margin-top: 4px;
}
.budget-total output {
  font:
    700 32px/1.1 "Bricolage Grotesque",
    sans-serif;
  color: var(--mint);
}
.budget-card > .btn {
  width: 100%;
}
.budget-card > .fine {
  margin: 12px 0 0;
}
.plan-comparison {
  padding-bottom: 85px;
}
.comparison-scroll {
  overflow-x: auto;
  border: 1px solid #3b4c63;
  border-radius: 15px;
}
.plan-comparison table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  min-width: 660px;
}
.plan-comparison th,
.plan-comparison td {
  padding: 18px 24px;
  text-align: center;
  border-bottom: 1px solid #2e4056;
}
.plan-comparison thead {
  background: #223748;
  color: #bcdace;
}
.plan-comparison thead th {
  font-weight: 700;
}
.plan-comparison tr > th:first-child {
  text-align: left;
  width: 38%;
}
.plan-comparison tbody th {
  font-weight: 500;
  color: #bdcadd;
}
.plan-comparison td {
  color: var(--mint);
  background: #142231;
  font-size: 15px;
}
.plan-comparison tr:last-child > * {
  border-bottom: 0;
}

@media (max-width: 1100px) {
  .home-discovery {
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: 15px;
  }
  .discovery-main {
    padding: 27px;
  }
  .discovery-main h2 {
    font-size: 29px;
  }
  .discovery-main img {
    width: 160px;
    opacity: 0.4;
  }
  .discovery-tile {
    padding: 28px 22px;
  }
  .discovery-tile h3 {
    font-size: 25px;
  }
  .mini-palette,
  .mini-checks {
    right: 15px;
  }
  .product-hero {
    gap: 30px;
  }
  .product-intro h1 {
    font-size: 49px;
  }
  .mission-cylo {
    width: 140px;
    right: -40px;
  }
  .mission-card {
    margin-right: 15px;
    padding: 20px;
  }
  .mission-top .demo-label {
    font-size: 6px;
  }
  .mission-confirm {
    padding: 20px 15px;
  }
  .mission-confirm h3 {
    font-size: 19px;
  }
  .mission-bars {
    padding-right: 35px;
  }
  .feature-overview {
    gap: 15px;
  }
  .feature-overview a {
    gap: 9px;
  }
  .feature-overview h3 {
    font-size: 12px;
  }
  .feature-overview a > span {
    font-size: 22px;
  }
  .cycle-detail {
    padding: 35px;
    gap: 25px;
  }
  .incident-grid {
    gap: 40px;
  }
  .incident-console {
    padding: 24px;
  }
  .fleet-demo {
    grid-template-columns: 215px 1fr;
  }
  .fleet-content {
    padding: 24px;
  }
  .fleet-metrics {
    gap: 10px;
  }
  .fleet-metrics > div {
    padding: 12px;
  }
  .fleet-metrics strong {
    font-size: 13px;
  }
  .library-hero h1,
  .start-hero h1 {
    font-size: 53px;
  }
  .template-grid {
    gap: 18px;
  }
  .template-art {
    padding-inline: 20px;
    height: 185px;
  }
  .template-art > strong {
    font-size: 26px;
  }
  .template-info {
    padding: 17px;
  }
  .template-info h3 {
    font-size: 16px;
  }
  .template-info p {
    font-size: 9px;
  }
  .onboarding {
    grid-template-columns: 270px 1fr;
  }
  .onboarding-content {
    padding: 30px;
  }
  .start-actions {
    gap: 15px;
    flex-wrap: wrap;
  }
  .offer-workbench {
    gap: 50px;
  }
}
@media (max-width: 800px) {
  .resource-dropdown {
    position: static;
    width: 100%;
    box-shadow: none;
    grid-template-columns: 1fr;
    border-radius: 10px;
    padding: 12px;
    margin-top: 4px;
  }
  .resource-dropdown .dropdown-feature {
    display: none;
  }
  .nav-resources {
    width: 100%;
  }
  .nav-resources > summary {
    padding: 0;
  }
  .resource-dropdown > div > a {
    padding: 10px !important;
  }
  .resource-dropdown > div > small {
    padding: 5px 10px;
    font-size: 7px;
  }
  .home-discovery {
    grid-template-columns: 1fr 1fr;
    padding-bottom: 70px;
  }
  .discovery-main {
    grid-column: 1/-1;
    min-height: 320px;
  }
  .discovery-main h2 {
    font-size: 34px;
  }
  .discovery-main img {
    width: 260px;
    right: 15px;
    bottom: -40px;
    opacity: 0.75;
  }
  .discovery-main p {
    max-width: 350px;
  }
  .discovery-tile {
    min-height: 330px;
  }
  .tile-emoji {
    margin-bottom: 30px;
  }
  .product-hero {
    grid-template-columns: 1fr;
    padding-block: 55px 60px;
    gap: 45px;
  }
  .product-intro h1 {
    font-size: 53px;
  }
  .product-intro {
    max-width: 600px;
  }
  .product-intro p {
    max-width: 540px;
  }
  .mission-card {
    width: 90%;
    max-width: 530px;
    margin-inline: auto;
  }
  .mission-cylo {
    width: 175px;
    right: -48px;
  }
  .mission-top .demo-label {
    font-size: 8px;
  }
  .mission-confirm h3 {
    font-size: 23px;
  }
  .product-nav {
    justify-content: flex-start;
    gap: 25px;
  }
  .feature-overview {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
  .feature-overview h3 {
    font-size: 14px;
  }
  .cycle-tabs button {
    padding: 17px 14px;
    gap: 9px;
    font-size: 12px;
  }
  .cycle-detail {
    padding: 32px 24px;
  }
  .cycle-detail h3 {
    font-size: 27px;
  }
  .cycle-detail p {
    font-size: 12px;
  }
  .cycle-orbit {
    width: 150px;
    height: 150px;
  }
  .rhythm-inline {
    grid-template-columns: 1fr 1fr;
  }
  .rhythm-inline > div:first-child {
    grid-column: 1/-1;
  }
  .incident-grid {
    grid-template-columns: 1fr;
    gap: 25px;
  }
  .incident-grid > div:first-child {
    position: relative;
    padding-right: 170px;
  }
  .incident-grid > div:first-child > img {
    position: absolute;
    width: 180px;
    right: -15px;
    bottom: 0;
    margin: 0;
  }
  .incident-console {
    max-width: 650px;
    width: 100%;
  }
  .incident-section {
    padding-block: 60px;
  }
  .fleet-demo {
    grid-template-columns: 1fr;
  }
  .fleet-sidebar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 20px;
    border-right: 0;
    border-bottom: 1px solid #344156;
  }
  .fleet-sidebar .eyebrow {
    width: 100%;
    margin: 0;
  }
  .fleet-sidebar button {
    width: auto;
    flex: 1;
    padding: 10px;
    margin: 0;
  }
  .fleet-sidebar > p {
    width: 100%;
    margin: 0;
    font-size: 8px;
  }
  .fleet-sidebar button i {
    display: none;
  }
  .fleet-sidebar button > span:first-child {
    font-size: 22px;
  }
  .fleet-metrics strong {
    font-size: 14px;
  }
  .collection-feature {
    padding-block: 60px;
  }
  .template-grid {
    grid-template-columns: 1fr 1fr;
  }
  .collection-feature .template-card:last-child {
    display: none;
  }
  .formats-row {
    flex-wrap: wrap;
  }
  .formats-row > span {
    flex: 1;
    min-width: 130px;
  }
  .formats-row a {
    width: 100%;
  }
  .panel-followups {
    grid-template-columns: 1fr;
  }
  .library-hero,
  .start-hero {
    gap: 15px;
    grid-template-columns: 1.3fr 0.7fr;
  }
  .library-hero h1,
  .start-hero h1 {
    font-size: 44px;
  }
  .library-hero-art {
    height: 260px;
    display: flex;
    align-items: center;
  }
  .sticker {
    font-size: 8px;
    bottom: 0;
    right: 0;
  }
  .library-hero p,
  .start-hero p {
    font-size: 12px;
  }
  .creative-process {
    gap: 35px;
  }
  .creative-process h2 {
    font-size: 34px;
  }
  .template-art {
    height: 205px;
  }
  .start-hero > img {
    width: 200px;
    max-width: 100%;
  }
  .onboarding {
    grid-template-columns: 1fr;
  }
  .onboarding-nav {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 20px;
    border-right: 0;
    border-bottom: 1px solid #33455a;
  }
  .onboarding-nav > .eyebrow {
    grid-column: 1/-1;
    margin: 0 0 7px;
  }
  .onboarding-nav > button {
    padding: 10px 7px;
    font-size: 9px;
    gap: 7px;
  }
  .onboarding-nav > button small {
    font-size: 7px;
  }
  .onboarding-nav > button > span {
    font-size: 8px;
    padding: 5px;
  }
  .preparation-status {
    grid-column: 1/-1;
    padding: 12px 0 0;
    margin: 0;
  }
  .preparation-status small {
    font-size: 8px;
  }
  .preparation-status progress {
    margin: 9px 0;
  }
  .onboarding-content {
    min-height: 630px;
  }
  .offer-workbench {
    grid-template-columns: 1fr;
    gap: 30px;
    padding-bottom: 60px;
  }
  .budget-card {
    max-width: 600px;
  }
  .plan-comparison {
    padding-bottom: 60px;
  }
  .guide-shortcut {
    gap: 16px;
    flex-wrap: wrap;
  }
}
@media (max-width: 560px) {
  .home-discovery {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .discovery-main {
    grid-column: auto;
    padding: 27px;
    min-height: 355px;
  }
  .discovery-main p {
    max-width: 250px;
  }
  .discovery-main img {
    width: 150px;
    right: -30px;
    opacity: 0.45;
  }
  .discovery-tile {
    min-height: 270px;
    padding: 28px;
  }
  .discovery-tile h3 {
    font-size: 27px;
  }
  .mini-palette {
    right: 40px;
    top: 40px;
  }
  .mini-checks {
    right: 35px;
    top: 28px;
  }
  .tile-emoji {
    margin-bottom: 20px;
  }
  .discovery-tile > b {
    padding-top: 15px;
  }
  .product-hero {
    padding-top: 40px;
    gap: 35px;
  }
  .product-intro h1 {
    font-size: 45px;
  }
  .product-intro .eyebrow {
    font-size: 8px;
  }
  .product-intro p {
    font-size: 12px;
  }
  .product-intro .button-row {
    gap: 9px;
  }
  .product-intro .btn {
    font-size: 10px;
    padding: 12px 16px;
  }
  .product-mini-links {
    flex-wrap: wrap;
    gap: 8px 14px;
    font-size: 9px;
  }
  .mission-card {
    width: 94%;
    padding: 16px;
    margin-right: 12px;
  }
  .mission-top {
    font-size: 6px;
    letter-spacing: 0.8px;
  }
  .mission-top .demo-label {
    font-size: 6px;
    letter-spacing: 0.5px;
  }
  .mission-server {
    padding: 20px 0;
    gap: 9px;
  }
  .mission-server b {
    font-size: 12px;
  }
  .mission-server small {
    font-size: 8px;
  }
  .mission-avatar {
    width: 38px;
    height: 38px;
    font-size: 21px;
  }
  .mission-confirm {
    padding: 16px 12px;
    gap: 12px;
  }
  .mission-confirm h3 {
    font-size: 19px;
  }
  .mission-confirm p {
    font-size: 8px;
  }
  .mission-confirm > span {
    width: 31px;
    height: 31px;
    flex: none;
    font-size: 19px;
  }
  .mission-cylo {
    width: 125px;
    right: -34px;
    bottom: -35px;
  }
  .mission-bars {
    font-size: 20px;
    letter-spacing: 2px;
    padding-right: 48px;
  }
  .mission-footer b {
    font-size: 18px;
  }
  .product-nav {
    font-size: 9px;
    padding-block: 15px;
  }
  .feature-overview {
    gap: 20px 16px;
    padding-block: 28px;
  }
  .feature-overview a {
    align-items: flex-start;
    gap: 9px;
  }
  .feature-overview h3 {
    font-size: 11px;
    line-height: 1.4;
  }
  .feature-overview p {
    font-size: 8px;
  }
  .feature-overview a > span {
    font-size: 20px;
  }
  .cycle-tabs button {
    flex-direction: column;
    gap: 6px;
    font-size: 10px;
    padding: 13px 4px;
  }
  .cycle-tabs button > i {
    display: none;
  }
  .cycle-tabs button > span {
    font-size: 8px;
  }
  .cycle-detail {
    grid-template-columns: 1fr;
    gap: 15px;
    padding: 24px;
    min-height: 390px;
  }
  .cycle-visual {
    height: 125px;
    gap: 12px;
  }
  .cycle-orbit {
    width: 125px;
    height: 125px;
  }
  #cycle-icon {
    font-size: 38px;
  }
  #cycle-visual-label {
    font-size: 7px;
  }
  .cycle-detail h3 {
    font-size: 25px;
  }
  .cycle-detail p {
    font-size: 11px;
  }
  #cycle-footnote {
    font-size: 9px;
  }
  .rhythm-inline {
    gap: 18px;
  }
  .rhythm-inline .rhythm-value {
    font-size: 20px;
  }
  .rhythm-inline > div:last-child p {
    font-size: 8px;
  }
  .rhythm-inline .rhythm-options button {
    font-size: 9px;
    padding: 9px 10px;
  }
  .incident-grid > div:first-child {
    padding-right: 0;
  }
  .incident-grid > div:first-child > img {
    display: none;
  }
  .incident-grid h2 {
    font-size: 34px;
  }
  .incident-console {
    padding: 20px;
  }
  .console-top {
    font-size: 11px;
  }
  .console-top .demo-label {
    font-size: 6px;
  }
  .incident-choices {
    gap: 5px;
  }
  .incident-choices button {
    font-size: 8px;
    padding: 7px 8px;
  }
  #incident-title {
    font-size: 19px;
  }
  #incident-label {
    font-size: 6px;
  }
  #incident-description {
    font-size: 11px;
    min-height: 90px;
  }
  .incident-log li {
    font-size: 9px;
  }
  .fleet-sidebar {
    padding: 16px;
    gap: 8px;
  }
  .fleet-sidebar button {
    flex-direction: column;
    gap: 5px;
    align-items: center;
    text-align: center;
  }
  .fleet-sidebar button b {
    font-size: 10px;
  }
  .fleet-sidebar button small {
    font-size: 7px;
  }
  .fleet-content {
    padding: 20px;
  }
  .fleet-heading h3 {
    font-size: 25px;
  }
  .fleet-heading .demo-label {
    font-size: 6px;
  }
  .fleet-metrics {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 18px 0;
  }
  .fleet-metrics > div {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 4px 10px;
  }
  .fleet-metrics strong {
    margin: 0;
    font-size: 12px;
    text-align: right;
  }
  .fleet-metrics small {
    grid-column: 1/-1;
    font-size: 8px;
  }
  .fleet-preview {
    padding: 20px 15px;
    gap: 14px;
  }
  .fleet-preview h3 {
    font-size: 20px;
  }
  .fleet-preview > span {
    font-size: 27px;
  }
  .fleet-preview small {
    font-size: 6px;
    letter-spacing: 1px;
  }
  .fleet-note {
    font-size: 8px;
  }
  .collection-feature .template-card:last-child {
    display: block;
  }
  .collection-feature .section-title {
    align-items: flex-start;
  }
  .collection-feature .btn {
    font-size: 10px;
  }
  .formats-row {
    gap: 18px;
  }
  .formats-row > span {
    min-width: 100px;
    font-size: 9px;
  }
  .formats-row b {
    font-size: 12px;
  }
  .panel-followups > a {
    padding: 18px;
    gap: 13px;
  }
  .panel-followups b {
    font-size: 11px;
  }
  .panel-followups small {
    font-size: 9px;
  }
  .library-hero,
  .start-hero {
    grid-template-columns: 1fr;
    padding-block: 35px 15px;
    gap: 10px;
  }
  .library-hero h1,
  .start-hero h1 {
    font-size: 45px;
  }
  .library-hero-art {
    height: 200px;
    width: 240px;
    justify-self: center;
  }
  .library-hero-art img {
    width: 220px;
  }
  .sticker {
    right: -20px;
    bottom: 14px;
    font-size: 8px;
  }
  .library-hero .breadcrumb {
    margin-bottom: 25px;
  }
  .collection-toolbar {
    align-items: flex-start;
    flex-direction: column;
    gap: 15px;
  }
  .filter-pills {
    gap: 6px;
  }
  .filter-pills button {
    font-size: 9px;
    padding: 8px 12px;
  }
  #template-count {
    font-size: 9px;
  }
  .template-grid {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .template-art {
    height: 215px;
    padding-inline: 25px;
  }
  .template-art > strong {
    font-size: 32px;
  }
  .template-info {
    padding: 20px;
  }
  .template-info h3 {
    font-size: 19px;
  }
  .template-info p {
    font-size: 10px;
  }
  .creative-process {
    grid-template-columns: 1fr;
    gap: 25px;
    padding-block: 45px;
  }
  .creative-process h2 {
    font-size: 34px;
  }
  .studio-collection-link {
    flex-direction: column;
    align-items: flex-start;
    padding: 17px 20px;
    gap: 7px;
    font-size: 10px;
  }
  .studio-collection-link .text-link {
    font-size: 10px;
  }
  .guide-shortcut {
    padding: 20px;
    gap: 12px;
  }
  .guide-shortcut > span {
    font-size: 24px;
  }
  .guide-shortcut b {
    font-size: 12px;
  }
  .guide-shortcut p {
    font-size: 9px;
  }
  .guide-shortcut .btn {
    font-size: 10px;
    width: 100%;
  }
  .start-hero {
    position: relative;
    padding-right: 65px;
    padding-bottom: 20px;
  }
  .start-hero h1 {
    font-size: 39px;
  }
  .start-hero .eyebrow {
    font-size: 7px;
  }
  .start-hero p {
    font-size: 11px;
  }
  .start-hero > img {
    position: absolute;
    width: 120px;
    right: -18px;
    top: 80px;
    opacity: 0.5;
    z-index: -1;
  }
  .onboarding-nav {
    padding: 15px;
    gap: 5px;
  }
  .onboarding-nav > button {
    flex-direction: column;
    align-items: flex-start;
    font-size: 8px;
    padding: 8px;
    gap: 7px;
    line-height: 1.6;
  }
  .onboarding-nav > button small {
    display: none;
  }
  .onboarding-content {
    padding: 25px 20px;
    min-height: 720px;
  }
  .onboarding-content h2 {
    font-size: 30px;
  }
  .onboarding-content > article > p {
    font-size: 11px;
  }
  .prep-checks label {
    padding: 14px;
    gap: 11px;
  }
  .prep-checks b {
    font-size: 10px;
  }
  .prep-checks small {
    font-size: 9px;
  }
  .start-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
  }
  .start-actions .btn {
    font-size: 10px;
    padding-inline: 16px;
  }
  .start-actions .text-button {
    text-align: left;
  }
  .start-destinations {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .start-destinations a {
    padding: 18px;
  }
  .start-destinations h3 {
    font-size: 20px;
    margin: 8px 0;
  }
  .numbered-guide {
    gap: 20px;
  }
  .numbered-guide > li {
    gap: 12px;
  }
  .numbered-guide h3 {
    font-size: 15px;
  }
  .numbered-guide p {
    font-size: 10px;
  }
  .numbered-guide .guide-command {
    padding: 13px;
    gap: 10px;
    flex-wrap: wrap;
  }
  .numbered-guide .guide-command button {
    font-size: 9px;
  }
  .start-help {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
  .start-help h3 {
    font-size: 18px;
  }
  .start-help p {
    font-size: 10px;
  }
  .offer-workbench h2 {
    font-size: 34px;
  }
  .offer-workbench > div > p {
    font-size: 12px;
  }
  .budget-card {
    padding: 24px;
  }
  .budget-total output {
    font-size: 28px;
  }
  .budget-card .btn {
    font-size: 10px;
  }
  .plan-comparison .section-title h2 {
    font-size: 33px;
  }
  .plan-comparison table {
    font-size: 10px;
    min-width: 560px;
  }
  .plan-comparison th,
  .plan-comparison td {
    padding: 15px 18px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .discovery-tile,
  .template-card {
    transition: none;
  }
}
.reduce-motion .discovery-tile,
.reduce-motion .template-card {
  transition: none;
}

/* Reset layout rules inherited from the earlier single-page onboarding. */
.onboarding {
  padding: 0;
  gap: 0;
  align-items: stretch;
}
.onboarding .text-link {
  margin: 0;
}
.mission-cylo {
  right: -35px;
}
@media (min-width: 801px) and (max-width: 1100px) {
  .mission-cylo {
    right: -10px;
  }
}
.panel-section {
  padding-top: 80px;
}
@media (max-width: 800px) {
  .panel-section {
    padding-top: 60px;
  }
  .color-orbit.two {
    width: 60%;
    height: 80%;
    left: 20%;
    top: 10%;
    transform: rotate(25deg);
  }
}
@media (max-width: 560px) {
  .mission-cylo {
    right: -15px;
  }
  .start-hero {
    padding-right: 0;
  }
  .start-hero > img {
    display: none;
  }
}