:root {
  --theme-panel: #f6f9f4;
  --theme-border: #32674355;
  --theme-soft-border: #32674326;
  --theme-shadow: #102d1926;
  --theme-backdrop: #102e26d9;
  --theme-glass: #f6f9f470;

  color-scheme: light;
  --mint: #dce9dd;
  --teal: #326743;
  --ink: #102d19;
  --muted: #526158;
}
* {
  box-sizing: border-box;
}
html {
  background: var(--mint);
  border-top: 18px solid var(--teal);
}
body {
  margin: 0;
  color: var(--ink);
  font-family: Arial,Helvetica,sans-serif;
  -webkit-font-smoothing: antialiased;
}
.site-shell {
  width: min(1120px,86%);
  margin: auto;
}
.site-header {
  padding-top: 30px;
}
.wordmark {
  display: inline-block;
  color: var(--teal);
  font-size: clamp(48px,7.5vw,84px);
  font-weight: 900;
  letter-spacing: -2.8px;
  text-decoration: none;
  line-height: 1.1;
}
.eyebrow {
  display: block;
  margin: 18px 0 0;
  color: var(--muted);
  font-size: clamp(14px,2vw,23px);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.4;
}
.intro {
  padding-top: 72px;
}
h1 {
  margin: 0;
  font-size: clamp(52px,8.2vw,96px);
  line-height: 1.24;
  letter-spacing: -2px;
  font-weight: 900;
}
.intro-copy {
  margin: 30px 0 0;
  color: var(--muted);
  font-size: clamp(19px,2.5vw,29px);
  font-weight: 700;
  line-height: 1.5;
}
.app-showcase {
  display: grid;
  grid-template-columns: .8fr 2fr 1fr;
  gap: 30px;
  align-items: center;
  margin: 80px 0 56px;
}
figure {
  margin: 0;
  min-width: 0;
}
figure img {
  display: block;
  width: 100%;
  height: auto;
}
.phone img,.tablet img {
  border: 6px solid #302c29;
  border-radius: 16px;
}
.tablet img {
  border-radius: 15px;
}
figcaption {
  margin-top: 15px;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
}
.feature-band {
  background: var(--teal);
  color: #fff;
  border-radius: 32px;
  padding: 28px 40px 31px;
}
.feature-band h2 {
  margin: 0;
  font-size: clamp(25px,3.6vw,42px);
  line-height: 1.25;
  letter-spacing: -.6px;
}
.feature-band p {
  margin: 12px 0 0;
  font-size: clamp(23px,3.1vw,36px);
  line-height: 1.35;
}
.site-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 88px 0 74px;
}
.explore {
  color: var(--teal);
  text-decoration: none;
}
.explore .eyebrow {
  margin: 0;
}
.app-address {
  display: block;
  font-size: clamp(30px,5.6vw,66px);
  font-weight: 900;
  letter-spacing: -1.5px;
  line-height: 1.3;
  margin-top: 8px;
}
.explore:hover .app-address {
  text-decoration: underline;
  text-underline-offset: 8px;
}
.plate {
  width: 160px;
  height: auto;
  flex-shrink: 0;
}
a:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 7px;
}
.skip-link {
  position: absolute;
  left: 15px;
  top: -80px;
  background: var(--ink);
  color: white;
  padding: 12px;
  z-index: 2;
}
.skip-link:focus {
  top: 8px;
}
.prose {
  padding-top: 70px;
  line-height: 1.6;
}
.prose a {
  color: var(--teal);
}
@media(max-width:650px) {
  html {
    border-top-width: 10px;
  }
  .site-shell {
    width: 87%;
  }
  .site-header {
    padding-top: 25px;
  }
  .wordmark {
    letter-spacing: -1.8px;
  }
  .eyebrow {
    margin-top: 12px;
  }
  .intro {
    padding-top: 46px;
  }
  h1 {
    font-size: clamp(44px,10.7vw,70px);
    letter-spacing: -1.6px;
    line-height: 1.2;
  }
  .intro-copy {
    margin-top: 24px;
    max-width: 30ch;
  }
  .app-showcase {
    grid-template-columns: 1fr 1.2fr;
    gap: 28px 22px;
    margin: 44px 0 34px;
  }
  .tablet {
    grid-column: 1/-1;
    grid-row: 2;
    max-width: 100%;
  }
  .phone {
    width: 83%;
    justify-self: center;
  }
  .checkout {
    width: 91%;
    justify-self: center;
  }
  figcaption {
    font-size: 12px;
    margin-top: 10px;
  }
  .phone img,.tablet img {
    border-width: 4px;
    border-radius: 12px;
  }
  .feature-band {
    padding: 25px 24px;
    border-radius: 24px;
  }
  .feature-band h2 {
    max-width: 15ch;
  }
  .site-footer {
    padding: 48px 0 44px;
    gap: 12px;
  }
  .plate {
    width: 80px;
  }
  .app-address {
    font-size: clamp(27px,6.8vw,44px);
    letter-spacing: -1px;
  }
  .explore .eyebrow {
    font-size: 13px;
  }
}
@media(prefers-reduced-motion:reduce) {
  * {
    transition: none!important;
  }
}
.screenshot-link {
  display: block;
  cursor: zoom-in;
  border-radius: 16px;
  transition: transform .2s,box-shadow .2s;
}
.screenshot-link:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px var(--theme-shadow);
}
.dialog-open {
  overflow: hidden;
}
.preview-dialog {
  width: min(1200px,94vw);
  max-width: 94vw;
  max-height: 94dvh;
  padding: 0;
  border: 0;
  border-radius: 18px;
  background: var(--theme-panel);
  color: var(--ink);
  box-shadow: 0 24px 100px #0006;
}
.preview-dialog::backdrop {
  background: var(--theme-backdrop);
  backdrop-filter: blur(6px);
}
.dialog-toolbar {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--theme-soft-border);
}
.dialog-toolbar h2 {
  font-size: 18px;
  margin: 0;
  flex: 1;
}
.original-link {
  font-size: 14px;
  font-weight: 700;
  color: var(--teal);
  text-underline-offset: 3px;
}
.dialog-close {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  background: var(--mint);
  color: var(--ink);
  font-size: 30px;
  cursor: pointer;
}
.dialog-close:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 3px;
}
.screenshot-viewport {
  padding: 24px;
  max-height: calc(94dvh - 71px);
  overflow: auto;
  overscroll-behavior: contain;
  text-align: center;
}
.screenshot-full {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(94dvh - 119px);
  margin: auto;
}
@media(max-width:650px) {
  .dialog-toolbar {
    gap: 10px;
    padding: 10px 12px;
    flex-wrap: wrap;
  }
  .dialog-toolbar h2 {
    font-size: 16px;
  }
  .original-link {
    order: 3;
    width: 100%;
    font-size: 13px;
  }
  .screenshot-viewport {
    padding: 12px;
    max-height: calc(94dvh - 106px);
  }
  .screenshot-full {
    max-height: calc(90dvh - 130px);
  }
}
.screenshot-dialog.is-portrait {
  width: min(540px,94vw);
  max-height: 90dvh;
}
.is-portrait .screenshot-viewport {
  max-height: calc(90dvh - 71px);
  padding: 16px;
}
.is-portrait .screenshot-full {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(90dvh - 103px);
}
@media(max-width:650px) {
  .is-portrait .screenshot-viewport {
    max-height: calc(90dvh - 106px);
    padding: 12px;
  }
  .is-portrait .screenshot-full {
    max-height: calc(90dvh - 130px);
  }
}
.product-details {
  padding-top: 100px;
}
.product-details h2 {
  font-size: clamp(44px,6.7vw,76px);
  line-height: 1.14;
  letter-spacing: -2px;
  margin: 20px 0 24px;
}
.section-lead {
  font-size: clamp(21px,2.7vw,30px);
  font-weight: 700;
  color: var(--muted);
  line-height: 1.5;
  max-width: 28ch;
}
.product-offer {
  border-left: 5px solid var(--teal);
  padding: 8px 0 8px 28px;
  margin-top: 38px;
}
.product-offer h3 {
  font-size: 26px;
  margin: 0 0 16px;
}
.product-offer p {
  font-size: 22px;
  line-height: 1.5;
  margin: 6px 0;
  color: var(--muted);
}
.details-section {
  border-top: 1px solid var(--theme-border);
  margin-top: 64px;
  padding-top: 40px;
}
.details-section h2 {
  font-size: clamp(28px,3.5vw,40px);
  letter-spacing: -.8px;
  line-height: 1.2;
  margin: 0 0 30px;
}
.account-list {
  margin: 0;
}
.account-list>div {
  display: grid;
  grid-template-columns: 1fr 2.4fr;
  gap: 30px;
  padding: 22px 0;
  border-bottom: 1px solid var(--theme-soft-border);
}
.account-list>div:last-child {
  border-bottom: 0;
}
.account-list dt {
  font-size: 23px;
  font-weight: 700;
}
.account-list dd {
  font-size: 21px;
  line-height: 1.55;
  margin: 0;
  color: var(--muted);
}
.account-note {
  display: inline-block;
  font-size: 13px;
  margin-top: 6px;
}
.optional {
  display: block;
  font-size: 13px;
  line-height: 1.5;
  margin-top: 5px;
  font-weight: 400;
  color: var(--muted);
}
.costs {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 24px;
}
.costs>div+div {
  border-left: 1px solid var(--theme-border);
  padding-left: 24px;
}
.costs h3 {
  font-size: 21px;
  margin: 0 0 24px;
  color: var(--muted);
}
.costs p {
  font-size: 21px;
  color: var(--muted);
  margin: 10px 0;
}
.costs .cost-value {
  font-size: clamp(26px,3.6vw,42px);
  font-weight: 700;
  color: var(--teal);
  letter-spacing: -1px;
}
.cost-value span {
  font-size: 20px;
  letter-spacing: 0;
  font-weight: 400;
}
.technology p {
  font-size: 23px;
  line-height: 1.6;
  max-width: 45ch;
  color: var(--muted);
  margin: 16px 0;
}
.support-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  margin-top: 64px;
  padding: 36px 40px;
  background: var(--teal);
  border-radius: 28px;
  color: white;
}
.support-band h2 {
  font-size: 30px;
  line-height: 1.2;
  margin: 0 0 16px;
  letter-spacing: -.5px;
}
.support-band p {
  font-size: 20px;
  line-height: 1.5;
  margin: 0;
}
.support-band .support-price {
  font-size: 50px;
  font-weight: 700;
  white-space: nowrap;
}
.support-price span {
  display: block;
  font-size: 18px;
  font-weight: 400;
}
.explore .eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
}
.pie-icon {
  width: 28px;
  height: 28px;
  transition: transform .2s;
}
.explore:hover .pie-icon {
  transform: rotate(-8deg);
}
@media(max-width:650px) {
  .product-details {
    padding-top: 60px;
  }
  .product-details h2 {
    letter-spacing: -1.4px;
  }
  .product-offer {
    padding-left: 20px;
    margin-top: 28px;
  }
  .product-offer h3 {
    font-size: 23px;
  }
  .product-offer p {
    font-size: 19px;
  }
  .details-section {
    margin-top: 44px;
    padding-top: 30px;
  }
  .account-list>div {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 20px 0;
  }
  .account-list dt {
    font-size: 21px;
  }
  .account-list dd {
    font-size: 18px;
  }
  .optional {
    display: inline-block;
    margin-left: 8px;
  }
  .costs {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .costs>div+div {
    border-left: 0;
    border-top: 1px solid var(--theme-border);
    padding: 24px 0 0;
  }
  .costs h3 {
    margin-bottom: 12px;
  }
  .costs .cost-value {
    font-size: 36px;
  }
  .technology p {
    font-size: 20px;
  }
  .support-band {
    display: block;
    margin-top: 44px;
    padding: 28px 24px;
  }
  .support-band h2 {
    font-size: 27px;
  }
  .support-band p {
    font-size: 18px;
  }
  .support-band .support-price {
    font-size: 42px;
    margin-top: 24px;
  }
  .support-price span {
    display: inline;
    font-size: 18px;
  }
  .pie-icon {
    width: 24px;
    height: 24px;
  }
}
.costs .cost-exclusions {
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
  margin: 0;
  align-self: center;
}
.licence-price {
  margin: 24px 0;
  padding: 22px 26px;
  background: var(--theme-glass);
  border-radius: 18px;
  max-width: 520px;
}
.discount-label {
  font-size: 15px;
  font-weight: 700;
  color: var(--teal);
}
.product-offer .licence-price p {
  margin: 8px 0 0;
  color: var(--ink);
}
.licence-price strong {
  font-size: clamp(36px,4.5vw,50px);
  letter-spacing: -1px;
  color: var(--teal);
}
.licence-price p span {
  font-size: 18px;
  display: inline-block;
}
.app-tagline {
  display: flex;
  align-items: center;
  gap: 12px;
}
.app-tagline .pie-icon {
  display: block;
  flex-shrink: 0;
  transform: translateY(-.08em);
}
.contact-link {
  display: inline-block;
  margin-top: 22px;
  padding: 11px 20px;
  border-radius: 24px;
  background: var(--mint);
  color: var(--ink);
  font-size: 17px;
  font-weight: 700;
  text-decoration: none;
}
.contact-link:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.contact-dialog {
  width: min(900px,94vw);
  height: 90dvh;
  max-height: 90dvh;
}
.contact-dialog[open] {
  display: flex;
  flex-direction: column;
}
.contact-dialog .dialog-toolbar {
  flex-shrink: 0;
}
.contact-dialog iframe {
  display: block;
  width: 100%;
  flex: 1;
  min-height: 0;
  border: 0;
  background: var(--theme-panel);
}
.feature-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0 14px;
}
.example-shop-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--theme-soft-border);
  flex-shrink: 0;
}
.example-shop-options[hidden] {
  display: none;
}
.example-shop-options a {
  padding: 8px 12px;
  border: 1px solid var(--theme-border);
  border-radius: 20px;
  color: var(--teal);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}
.example-shop-options a:hover,.example-shop-options a[aria-current="page"] {
  background: var(--mint);
}
.example-shop-options a:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 3px;
}
.hosting-alternative {
  display: block;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  margin-top: 6px;
  color: var(--muted);
}
@media(min-width:651px) and (max-width:700px) {
  .pie-icon {
    width: 24px;
    height: 24px;
  }
}

.checkout img { border: 6px solid #302c29; border-radius: 16px; }
.footer-paw { width: 110px; height: 110px; color: var(--teal); flex-shrink: 0; }
.site-footer .app-address { font-size: clamp(30px,5.6vw,60px); }
@media(max-width:650px) { .checkout img { border-width: 4px; border-radius: 12px; } .footer-paw { width: 64px; height: 64px; } }

.support-band .footer-paw { filter: brightness(0) invert(1); opacity: .7; }

/* Keep the introduction compact so the app screens lead the page. */
.intro { padding-top: 42px; }
.intro h1 { font-size: clamp(40px, 6vw, 68px); line-height: 1.12; }
.intro-copy { margin-top: 20px; font-size: clamp(18px, 2.2vw, 24px); }
.screenshot-hint { margin: 12px 0 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.app-showcase { margin-top: 36px; }
.feature-band { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.feature-band .contact-link { margin-top: 0; flex-shrink: 0; }
@media(max-width:650px) {
  .intro { padding-top: 30px; }
  .app-showcase { margin-top: 28px; }
  .feature-band { flex-wrap: wrap; }
}

.details-section + .feature-band { margin-top: 48px; }

.site-footer .explore { min-width: 0; }
.site-footer .app-address { font-size: clamp(20px, 4.5vw, 54px); overflow-wrap: anywhere; }

.site-nav { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: 28px; }
.site-nav a { padding: 8px 0; color: var(--teal); font-size: 16px; font-weight: 700; text-decoration: none; }
.site-nav a:hover, .site-nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 7px; }
.home-intro .intro-copy { max-width: 40ch; }
.home-app { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 40px; margin-top: 40px; padding: 36px 40px; background: var(--theme-panel); border-radius: 28px; }
.home-app .eyebrow { margin: 0 0 16px; font-size: 14px; }
.home-app h2 { max-width: 16ch; margin: 0; font-size: clamp(30px, 4vw, 46px); line-height: 1.12; letter-spacing: -1px; }
.home-app-copy > p:not(.eyebrow), .home-app li { color: var(--muted); font-size: 18px; line-height: 1.6; }
.home-app ul { padding-left: 22px; margin: 20px 0; }
.home-app li + li { margin-top: 12px; }
.home-app strong { color: var(--ink); }
.home-app-link { display: inline-block; padding: 12px 20px; background: var(--teal); color: white; border-radius: 24px; font-weight: 700; text-decoration: none; }
.home-app-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.home-app-link:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }
.home-app-preview { width: 100%; max-width: 200px; justify-self: center; }
.home-app-preview img { display: block; width: 100%; height: auto; border: 5px solid var(--ink); border-radius: 20px; }
.home-app-screens { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); align-items: center; gap: 16px; min-width: 0; }
.home-app-screens figure { margin: 0; min-width: 0; }
.home-app-screens figcaption { font-size: 12px; }
@media(max-width:650px) {
  .home-app { grid-template-columns: 1fr; gap: 28px; margin-top: 28px; padding: 28px 24px; }
  .home-app-preview { max-width: 180px; }
}
.home-app-screens .home-app-tablet { max-width: 100%; }
.pathways { margin-top: 48px; }
.pathway { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 36px 0; border-top: 1px solid var(--theme-border); }
.pathway h2 { margin: 0; font-size: clamp(26px, 3.4vw, 38px); letter-spacing: -.8px; line-height: 1.2; }
.pathway h2 a { color: var(--ink); text-decoration: none; }
.pathway h2 a:hover { text-decoration: underline; text-underline-offset: 6px; }
.pathway h2 span { color: var(--teal); }
.pathway p { max-width: 48ch; color: var(--muted); font-size: 20px; line-height: 1.5; margin: 16px 0 0; }
.pathway-link { flex-shrink: 0; color: var(--teal); font-weight: 700; text-underline-offset: 5px; padding: 12px 0; }
.audience-layout { display: grid; grid-template-columns: 1.5fr 1fr; align-items: center; gap: 80px; margin: 48px 0 56px; }
.audience-copy h2 { font-size: clamp(24px, 3vw, 32px); margin: 32px 0 12px; line-height: 1.2; }
.audience-copy h2:first-child { margin-top: 0; }
.audience-copy p { color: var(--muted); font-size: 21px; line-height: 1.6; margin: 0; }
.audience-screen { width: 100%; max-width: 300px; justify-self: center; }
@media(max-width:650px) {
  .site-nav { gap: 4px 20px; margin-top: 20px; }
  .site-nav a { font-size: 14px; }
  .pathways { margin-top: 32px; }
  .pathway { display: block; padding: 28px 0; }
  .pathway p { font-size: 18px; }
  .pathway-link { display: inline-block; margin-top: 12px; }
  .audience-layout { grid-template-columns: 1fr; gap: 36px; margin-top: 32px; }
  .audience-copy p { font-size: 18px; }
  .audience-screen { max-width: 260px; }
}

/* Compact store badges, shared by the header, footer and download section. */
.store-badges { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.store-link { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 8px; background: #111; color: #fff; font-size: 17px; font-weight: 700; text-decoration: none; }
.store-badges .store-link { margin-top: 0; }
.store-link svg { width: 20px; height: 23px; flex-shrink: 0; }
.store-link small, .store-link strong { display: block; }
.store-link small { font-size: 10px; font-weight: 400; }
.store-link strong { font-size: 15px; }
a.store-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.footer-app { min-width: 0; }
.footer-app .store-badges { margin: 0 0 18px; }
.feature-band .store-badges { margin-top: 0; }

/* Theme picker colours follow the mobile drawer's curated palettes. */
.theme-picker { margin-top: 20px; max-width: 360px; }
.theme-picker summary { cursor: pointer; color: var(--ink); font-size: 14px; font-weight: 700; padding: 8px 0; width: fit-content; }
.theme-picker fieldset { border: 1px solid var(--theme-border); border-radius: 12px; margin: 8px 0 0; padding: 16px; background: var(--theme-panel); }
.theme-picker legend { padding: 0 6px; font-size: 14px; color: var(--muted); }
.theme-swatches { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.theme-swatch { min-width: 44px; min-height: 50px; border: 2px solid transparent; border-radius: 6px; cursor: pointer; position: relative; }
.theme-swatch[aria-pressed="true"] { border-color: var(--swatch-ink); }
.theme-swatch[aria-pressed="true"]::after { content: '✓'; color: var(--swatch-ink); font-size: 22px; font-weight: bold; }
.theme-picker button:focus-visible, .theme-picker summary:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.theme-reset { margin-top: 14px; padding: 8px 0; border: 0; background: transparent; color: var(--ink); text-decoration: underline; cursor: pointer; font: inherit; font-size: 14px; }
.theme-picker { display: none; }
.js .theme-picker { display: block; }
:root[data-theme="forest"] { --mint: #f6f9f4; --pink: #f6f9f4; --teal: #264d32; --wine: #264d32; --ink: #102d19; --muted: #435a49; --theme-panel: #edf3ec; --theme-border: #6a9e76; --theme-soft-border: #6a9e7666; --theme-shadow: #102d1926; --theme-backdrop: #102d19d9; --theme-glass: #edf3ec70; }
:root[data-theme="navy"] { --mint: #f7f9fc; --pink: #f7f9fc; --teal: #243a58; --wine: #243a58; --ink: #12253e; --muted: #445468; --theme-panel: #eef2f7; --theme-border: #7792b8; --theme-soft-border: #7792b866; --theme-shadow: #12253e26; --theme-backdrop: #12253ed9; --theme-glass: #eef2f770; }
:root[data-theme="turquoise"] { --mint: #f5faf8; --pink: #f5faf8; --teal: #0e6962; --wine: #0e6962; --ink: #073431; --muted: #3b605d; --theme-panel: #eaf5f2; --theme-border: #4baaa4; --theme-soft-border: #4baaa466; --theme-shadow: #07343126; --theme-backdrop: #073431d9; --theme-glass: #eaf5f270; }
:root[data-theme="aubergine"] { --mint: #faf7fc; --pink: #faf7fc; --teal: #563962; --wine: #563962; --ink: #34203e; --muted: #604f68; --theme-panel: #f5eef7; --theme-border: #aa83b5; --theme-soft-border: #aa83b566; --theme-shadow: #34203e26; --theme-backdrop: #34203ed9; --theme-glass: #f5eef770; }
:root[data-theme="burgundy"] { --mint: #fcf7f8; --pink: #fcf7f8; --teal: #692c3e; --wine: #692c3e; --ink: #401923; --muted: #694a52; --theme-panel: #f8eef0; --theme-border: #bd7d8d; --theme-soft-border: #bd7d8d66; --theme-shadow: #40192326; --theme-backdrop: #401923d9; --theme-glass: #f8eef070; }
:root[data-theme="copper"] { --mint: #fcf9f4; --pink: #fcf9f4; --teal: #7a4d28; --wine: #7a4d28; --ink: #3f2711; --muted: #695543; --theme-panel: #f8f1e9; --theme-border: #c88d5c; --theme-soft-border: #c88d5c66; --theme-shadow: #3f271126; --theme-backdrop: #3f2711d9; --theme-glass: #f8f1e970; }
:root[data-theme="mustard"] { --mint: #fcfaf4; --pink: #fcfaf4; --teal: #74621c; --wine: #74621c; --ink: #382e08; --muted: #635b3c; --theme-panel: #f7f4e8; --theme-border: #c4ac4b; --theme-soft-border: #c4ac4b66; --theme-shadow: #382e0826; --theme-backdrop: #382e08d9; --theme-glass: #f7f4e870; }
:root[data-theme="graphite"] { --mint: #f7f9fa; --pink: #f7f9fa; --teal: #40505a; --wine: #40505a; --ink: #1e2f3b; --muted: #4e5b65; --theme-panel: #eef2f4; --theme-border: #8b9eaa; --theme-soft-border: #8b9eaa66; --theme-shadow: #1e2f3b26; --theme-backdrop: #1e2f3bd9; --theme-glass: #eef2f470; }

.footer-controls { display: flex; align-items: center; gap: 20px; flex-shrink: 0; }
.footer-controls .theme-picker { position: relative; margin-top: 0; }
.footer-controls .theme-picker summary { white-space: nowrap; }
.footer-controls .theme-picker fieldset { position: absolute; bottom: calc(100% + 8px); right: 0; width: min(320px, 80vw); margin: 0; z-index: 2; box-shadow: 0 12px 28px var(--theme-shadow); }
@media(max-width:650px) {
  .site-footer { flex-wrap: wrap; }
  .site-footer .footer-app { flex-basis: 100%; }
  .footer-controls { margin-left: auto; }
  .footer-controls .theme-picker fieldset { right: -80px; }
}

/* Server tools information page */
.server-page .intro .eyebrow { margin: 0 0 16px; }
.server-copy { max-width: 760px; color: var(--muted); font-size: 20px; line-height: 1.6; margin: 0 0 28px; }
.server-screenshot img { border: 1px solid var(--theme-border); border-radius: 12px; }
.server-screenshot a { display: block; }
.server-screenshot a:focus-visible { outline: 3px solid var(--wine); outline-offset: 6px; border-radius: 12px; }
.server-back { margin: 48px 0; }
@media (max-width: 600px) { .server-copy { font-size: 18px; } }

.page-link {
  display: inline-block;
  margin-top: 22px;
  padding: 11px 20px;
  border-radius: 24px;
  background: var(--pink);
  color: var(--ink);
  font-size: 17px;
  font-weight: 700;
  text-decoration: none;
}
.page-link:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}