/* =========================================================================
   MacinMind Software — macOS desktop theme
   ========================================================================= */

:root{
  --menubar-h: 33px;
  --dock-h: 78px;
  --accent: #0a6cff;
  --accent-dim: #295daa;
  --link: #0645ad;
  --text: #1d1d1f;
  --text-soft: #4b4b50;
  --window-bg: #ececee;
  --window-body-bg: #f7f7f8;
  --window-border: rgba(0,0,0,.12);
  --menubar-bg: rgba(246,246,248,.72);
  --menubar-border: rgba(0,0,0,.1);
  --menubar-text: #1d1d1f;
  --dock-bg: rgba(110,110,116,.3);
  --dock-border: rgba(255,255,255,.2);
  --radius-window: 8px;
  --shadow-window: 0 20px 50px rgba(0,0,0,.28), 0 2px 8px rgba(0,0,0,.15);
  --shadow-dock: 0 12px 30px rgba(0,0,0,.35);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

*{ box-sizing: border-box; }

html, body{
  margin: 0;
  padding: 0;
}

body{
  font-family: var(--font);
  font-size: 15px;
  color: var(--text);
  min-height: 100vh;
  background:
    radial-gradient(1200px 800px at 15% -10%, #6fa3d8 0%, transparent 55%),
    radial-gradient(1400px 900px at 100% 0%, #9db8e8 0%, transparent 50%),
    linear-gradient(165deg, #1b3a63 0%, #2c5c92 45%, #4f85bd 75%, #7aa8d6 100%);
  background-attachment: fixed;
}

a{ color: var(--link); }
a:hover{ color: var(--accent); }

img{ max-width: 100%; }

/* -------------------------------------------------------------------------
   Menubar
   ------------------------------------------------------------------------- */
.menubar{
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--menubar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--menubar-bg);
  border-bottom: 1px solid var(--menubar-border);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  color: var(--menubar-text);
  font-size: 13px;
  z-index: 100;
  padding: 0 14px;
}

.menubar-left{
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.menubar-brand{ display: flex; align-items: center; flex-shrink: 0; }
.menubar-brand-icon{ width: 18px; height: 18px; display: block; object-fit: contain; }

.menubar-app-name{
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}

.menubar-items{
  list-style: none;
  display: flex;
  align-self: flex-start;
  margin: -4px 0 -6px 0; /* vertical only — see .menubar-item for why. Horizontal negative margin removed: it was shrinking this row's own allotted flex space below its content width, forcing permanent horizontal scroll and clipping whichever end (first or last pill) that scroll position hid, in every browser. */
  padding: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.menubar-items::-webkit-scrollbar{ display: none; }

.menubar-item{
  display: block;
  padding: 5px 16px 6px; /* 1px extra at the bottom so the hover/active pill fills a little lower; text stays pinned to padding-top, so it doesn't move */
  border-radius: 16px;
  color: var(--menubar-text);
  text-decoration: none;
  font-weight: 400;
  white-space: nowrap;
  position: relative;
  margin: 0 -6px;
}
/* The -6px side margins above overlap neighboring pills to tighten spacing
   between them, which is fine everywhere they have a neighbor to overlap
   with — but the very first and last pill have no neighbor on their outer
   side, so that same -6px just bled them past the row's own scrollable
   box on that edge, clipping whichever one it was (this moved between the
   first and last pill depending on other changes, in every browser, since
   it's a real layout shortfall, not a rendering quirk). Zeroing just the
   outer-facing margin on each end removes the bleed while keeping the
   tightened spacing everywhere in between. */
.menubar-items li:first-child .menubar-item{ margin-left: 0; }
.menubar-items li:last-child .menubar-item{ margin-right: 0; }
.menubar-item:hover{ background: rgba(10,108,255,.12); color: var(--menubar-text); }
.menubar-item.is-active{ background: var(--accent-dim); color: #fff; }

.menubar-right{ flex-shrink: 0; }
.menubar-tray-link{
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--menubar-text);
  text-decoration: none;
  white-space: nowrap;
}
.menubar-tray-link:hover{ text-decoration: underline; }
.menubar-flag{ width: 18px; height: auto; display: block; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.15); }

/* -------------------------------------------------------------------------
   Desktop content area
   ------------------------------------------------------------------------- */
.desktop{
  padding: calc(var(--menubar-h) + 16px) 20px calc(var(--dock-h) + 18px);
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* -------------------------------------------------------------------------
   macOS-style window card
   ------------------------------------------------------------------------- */
.window{
  background: var(--window-bg);
  border-radius: var(--radius-window);
  box-shadow: var(--shadow-window);
  border: 1px solid var(--window-border);
  overflow: hidden;
  scroll-margin-top: calc(var(--menubar-h) + 16px);
}

.window-titlebar{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 29px;
  background: linear-gradient(#f4f4f5, #e2e2e5);
  border-bottom: 1px solid var(--window-border);
  border-top-left-radius: var(--radius-window);
  border-top-right-radius: var(--radius-window);
}

.window-traffic-lights{
  position: absolute;
  left: 9px;
  display: flex;
  gap: 8px;
}
.dot{ width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 .5px rgba(0,0,0,.15); }
.dot-close{ background: #ff5f57; }
.dot-min{ background: #febc2e; }
.dot-zoom{ background: #28c840; }

.window-title{
  margin: 0;
  padding: 0 72px;
  font-size: 13px;
  font-weight: 600;
  color: #444;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.window-body{
  background: var(--window-body-bg);
  padding: 28px 34px;
  text-align: left;
  line-height: 1.55;
  border-radius: var(--radius-window);
}
/* When a titlebar precedes it, only the bottom corners are window-body's to round. */
.window-titlebar + .window-body{
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

/* Compact header card at the top of a product page (icon + tagline) */
.window.app-header .window-body{ padding-top: 8px; padding-bottom: 8px; }

.window-body h2{ font-size: 20px; margin: 0 0 6px; }
.info-lede{ font-size: 18px; }

.info-lede-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  margin: 0 0 18px;
}
.info-lede-row .info-lede{ margin: 0; }

.btn-row{ display: flex; gap: 10px; flex-shrink: 0; }

.btn{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 26px;
  border-radius: 6px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.18);
  color: var(--text);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  box-shadow: 0 1px 3px rgba(0,0,0,.1);
  transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .1s ease;
}
.btn:hover{
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  box-shadow: 0 5px 14px rgba(10,108,255,.4);
  transform: translateY(-1px);
}
.btn:active{ transform: translateY(0); }
.btn-icon{ font-size: 16px; line-height: 1; }

@media (max-width: 700px){
  .info-lede-row{ flex-direction: column; align-items: flex-start; }
  .btn-row{ width: 100%; }
  .btn{ flex: 1; justify-content: center; }
}
.window-body h3{ font-size: 16px; margin: 24px 0 8px; }
.window-body p{ margin: 0 0 14px; }
.window-body ul{ margin: 0 0 14px; padding-left: 22px; }
.window-body li{ margin-bottom: 4px; }

/* -------------------------------------------------------------------------
   Dock
   ------------------------------------------------------------------------- */
.dock{
  position: fixed;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  z-index: 100;
}

.dock-list{
  display: flex;
  align-items: flex-end;
  gap: 0px;
  margin: 0;
  padding: 0px 12px 8px;
  list-style: none;
  background: var(--dock-bg);
  border: 1px solid var(--dock-border);
  border-radius: 20px;
  -webkit-backdrop-filter: blur(24px) saturate(130%) brightness(.92);
  backdrop-filter: blur(24px) saturate(130%) brightness(.92);
  box-shadow: var(--shadow-dock);
}

.dock-item{ position: relative; }

.dock-link{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  text-decoration: none;
  padding: 0 4px;
  transition: transform .12s ease;
}
.dock-link:hover{ transform: translateY(-6px) scale(1.08); }

.dock-icon{
  width: 52px;
  height: auto;
  display: block;
  filter: drop-shadow(0 3px 4px rgba(0,0,0,.35));
}

.dock-label{
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  background: rgba(40,40,42,.9);
  color: #fff;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 5px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .1s ease;
}
.dock-link:hover .dock-label{ opacity: 1; }

.dock-link.is-active::after{
  content: "";
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #000;
  margin-top: 2px;
}

/* -------------------------------------------------------------------------
   Product / about listing rows (Main page, Legacy landing)
   ------------------------------------------------------------------------- */
.app-row{
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(0,0,0,.08);
  text-decoration: none;
  color: inherit;
}
.app-row:last-child{ border-bottom: none; }
.app-row-icon{ width: 56px; height: 56px; object-fit: contain; flex-shrink: 0; }
/* Qualified with the .app-row ancestor so these reliably beat the more
   general .window-body h3 / .window-body p rules (same specificity level
   otherwise, and those set very different margins meant for long-form
   prose headings/paragraphs, not this icon+text row). */
.app-row .app-row-title{ margin: 0; font-size: 17px; line-height: 1.2; }
.app-row .app-row-tagline{ margin: 1px 0 0; font-weight: 600; color: var(--text); line-height: 1.2; }
.app-row .app-row-desc{ margin: 1px 0 0; color: var(--text-soft); font-size: 14px; line-height: 1.25; }

/* The header card is larger/bolder than a regular app-row (Main/Legacy listing).
   Its own padding comes from .window.app-header .window-body, so the row
   itself carries none — keeps the icon centered tight against just the
   2 lines of text instead of a tall, lopsided block. */
.window.app-header .app-row{ padding: 0; border-bottom: none; gap: 12px; }
.window.app-header .app-row-title{ font-size: 22px; line-height: 1.15; }
.window.app-header .app-row-tagline{ font-size: 17px; line-height: 1.15; }

/* Main page: bigger type, centered headline, tighter line & row spacing so
   the whole page fits a 14" MacBook Pro without scrolling. */
.window.main-page .window-body{ font-size: 17px; line-height: 1.05; padding-top: 20px; padding-bottom: 20px; }
.window.main-page .main-headline{ text-align: center; font-size: 26px; margin-bottom: 2px; }
.window.main-page .main-subline{ text-align: center; margin-bottom: 10px; }
.window.main-page .app-row{ padding: 8px 0; gap: 14px; }
.window.main-page .app-row-title{ font-size: 18px; }
.window.main-page .app-row-tagline{ font-size: 16px; }
.window.main-page .app-row-desc{ font-size: 14px; }

/* -------------------------------------------------------------------------
   Download tables / version notes
   ------------------------------------------------------------------------- */
.download-primary{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  margin: 0 0 8px;
  padding: 24px 28px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(10,108,255,.12), rgba(10,108,255,.03));
  border: 1px solid rgba(10,108,255,.28);
}
.download-primary-title{ margin: 0 0 4px; font-size: 20px; }
.download-primary-desc{ margin: 0; font-size: 14px; color: var(--text-soft); max-width: 420px; }

.download-primary-cta{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  padding: 14px 26px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 8px 20px rgba(10,108,255,.35);
  transition: background .15s ease, transform .12s ease, box-shadow .15s ease;
}
.download-primary-cta:hover{ background: #0958d9; color: #fff; transform: translateY(-2px); box-shadow: 0 10px 26px rgba(10,108,255,.45); }
.download-primary-cta:active{ transform: translateY(0); }
.download-primary-cta-meta{ font-weight: 500; font-size: 12.5px; opacity: .85; }

.download-section-label{
  text-align: center;
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-soft);
  margin: 26px 0 12px;
}

@media (max-width: 560px){
  .download-primary{ flex-direction: column; align-items: stretch; text-align: center; }
  .download-primary-desc{ max-width: none; }
  .download-primary-cta{ justify-content: center; }
}

.download-grid{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
}
.download-grid li{ margin: 0; display: flex; }

.download-card{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 220px;
  padding: 16px 18px;
  border-radius: 14px;
  background: rgba(0,0,0,.035);
  border: 1px solid rgba(0,0,0,.07);
  text-align: center;
  text-decoration: none;
  color: inherit;
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .12s ease, box-shadow .15s ease;
}
.download-card:hover{
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(10,108,255,.35);
}
.download-card-label{ font-weight: 700; font-size: 14.5px; line-height: 1.3; }
.download-card-meta{ font-size: 12px; color: var(--text-soft); }
.download-card:hover .download-card-meta{ color: rgba(255,255,255,.85); }

@media (max-width: 480px){
  .download-card{ width: 100%; }
}

.version-notes h3{
  border-top: 1px solid rgba(0,0,0,.08);
  padding-top: 16px;
}
.version-notes h3:first-child{ border-top: none; padding-top: 0; }
.version-notes li {
  margin-bottom: 4px; /* Reduce spacing between list items */
  line-height: 1.3; /* Match the line height */
}

/* -------------------------------------------------------------------------
   Inline artwork on Info pages (hero screenshots, diagrams, link-out thumbs)
   ------------------------------------------------------------------------- */
.window-body p.info-tip{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  white-space: nowrap;
  margin: 30px auto 6px;
  padding: 12px 24px;
  border-radius: 999px;
  background: rgba(10,108,255,.07);
  border: 1px solid rgba(10,108,255,.18);
  color: var(--text-soft);
  font-size: 13px;
  text-align: center;
}
.info-tip .tip-icon{ font-size: 15px; flex-shrink: 0; }

@media (max-width: 700px){
  .window-body p.info-tip{ white-space: normal; }
}

.info-figure{
  display: block;
  width: auto;
  height: auto;
  margin: 10px 0 22px;
}

/* Image + text side by side, alternating which side the image sits on */
.info-media-row{
  display: flex;
  align-items: center;
  gap: 26px;
  margin: 10px 0 22px;
}
.info-media-row.media-right{ flex-direction: row-reverse; }
.info-media-row img{
  flex: 0 0 320px;
  width: 320px;
  height: auto;
}
.info-media-row p{ margin: 0; flex: 1; }

@media (max-width: 700px){
  .info-media-row, .info-media-row.media-right{ flex-direction: column; }
  .info-media-row img{ width: 100%; flex-basis: auto; }
}

/* -------------------------------------------------------------------------
   Screenshots grid
   ------------------------------------------------------------------------- */
.screenshot-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.screenshot-grid li{ margin: 0; }
.screenshot-grid figure{ margin: 0; }
.shot-trigger{
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  transition: opacity .15s ease;
}
.shot-trigger:hover{ opacity: .85; }
.shot-thumb{
  width: 100%;
  display: block;
  pointer-events: none;
}
.screenshot-grid figcaption{ font-size: 12px; color: var(--text-soft); margin-top: 6px; text-align: center; }

/* Lightbox: click a thumbnail to open the actual screenshot at full size,
   fit to the window. Plain, unboxed picture over a dimmed backdrop.
   .is-open (added by site.js) drives the fade/scale-in animation; the
   element stays in the DOM at all times so the transition has something
   to animate from/to. Closes via its × button, a backdrop click, or Esc. */
.lightbox{
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8,10,14,.75);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  z-index: 500;
  opacity: 0;
  visibility: hidden;
  transition: opacity .22s ease, visibility 0s linear .22s;
}
.lightbox.is-open{
  opacity: 1;
  visibility: visible;
  transition: opacity .22s ease;
}
.lightbox-img{
  max-width: 92vw;
  max-height: 90vh;
  width: auto;
  height: auto;
  transform: scale(.94);
  transition: transform .22s ease, opacity .12s ease;
}
.lightbox.is-open .lightbox-img{ transform: scale(1); }

.lightbox-close{
  position: fixed;
  top: 18px;
  right: 24px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,.14);
  color: #fff;
  font-size: 24px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .15s ease, transform .15s ease;
}
.lightbox-close:hover{ background: rgba(255,255,255,.28); transform: scale(1.06); }

.lightbox-nav{
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,.14);
  color: #fff;
  font-size: 30px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .15s ease, transform .15s ease;
}
.lightbox-nav:hover{ background: rgba(255,255,255,.28); transform: translateY(-50%) scale(1.06); }
.lightbox-prev{ left: 16px; }
.lightbox-next{ right: 16px; }
.lightbox-nav[hidden]{ display: none; }

.lightbox-caption{
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  margin: 0;
  color: rgba(255,255,255,.85);
  font-size: 13px;
  text-align: center;
  text-shadow: 0 1px 3px rgba(0,0,0,.5);
}
.lightbox-caption:empty{ display: none; }

@media (max-width: 700px){
  .lightbox-close{ top: 10px; right: 10px; width: 36px; height: 36px; }
  .lightbox-nav{ width: 44px; height: 44px; font-size: 26px; }
  .lightbox-prev{ left: 6px; }
  .lightbox-next{ right: 6px; }
}

/* -------------------------------------------------------------------------
   Purchase pricing tables
   ------------------------------------------------------------------------- */
.window.notice .window-body{ background: #fdf6d8; }
.price-table{ width: 100%; border-collapse: collapse; margin-bottom: 18px; }
.price-table th{ text-align: right; font-size: 12px; color: var(--text-soft); font-weight: 600; padding: 6px 10px; }
.price-table td{ padding: 12px 10px; border-top: 1px solid rgba(0,0,0,.08); vertical-align: top; }
.price-table td:not(:first-child){ text-align: right; white-space: nowrap; font-size: 16px; font-weight: 700; }
.price-table .price-desc{ font-weight: 400; font-size: 13px; color: var(--text-soft); margin: 4px 0 0; }
.price-table ul{ font-size: 13px; color: var(--text-soft); }

@media (max-width: 700px){
  .price-table, .price-table tbody, .price-table tr, .price-table td{ display: block; width: 100%; }
  .price-table th{ display: none; }
  .price-table td:not(:first-child){ text-align: left; padding-top: 2px; }
  .price-table tr{ padding-bottom: 10px; border-top: 1px solid rgba(0,0,0,.08); }
  .price-table td:first-child{ border-top: none; padding-bottom: 0; }
}

/* New card-based pricing layout (Radiologik Purchase). The row/table
   version above (.price-table) stays for pages not yet converted. */
.price-grid{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
}
.price-grid li{ margin: 0; display: flex; }

.price-card{
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 250px;
  padding: 18px 20px;
  border-radius: 16px;
  background: rgba(0,0,0,.03);
  border: 1px solid rgba(0,0,0,.08);
}
.price-card-title{ margin: 0; font-size: 15px; }
.price-card-desc{ margin: 0; font-size: 12.5px; color: var(--text-soft); flex: 1; }
.price-card-desc ul{ margin: 4px 0 0; padding-left: 18px; }
.price-card-desc li{ margin-bottom: 2px; }

.price-card-options{ display: flex; gap: 8px; }
.price-pill{
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 9px 6px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.14);
  text-decoration: none;
  color: var(--text);
  font-weight: 700;
  font-size: 15px;
  text-align: center;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .12s ease;
}
.price-pill span{ font-weight: 500; font-size: 10px; color: var(--text-soft); }
.price-pill:hover{ background: var(--accent); border-color: var(--accent); color: #fff; transform: translateY(-2px); }
.price-pill:hover span{ color: rgba(255,255,255,.85); }

.price-pill.is-disabled{
  background: transparent;
  border-style: dashed;
  border-color: rgba(0,0,0,.14);
  color: var(--text-soft);
  font-weight: 500;
  cursor: default;
}
.price-pill.is-disabled span{ color: var(--text-soft); }

@media (max-width: 480px){
  .price-card{ width: 100%; }
}

/* Tier grid: license tiers meant to be compared side by side, in a fixed
   ladder (Commercial -> Non-profit -> Personal) rather than a free-wrap. */
.price-grid.tier-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}
.tier-grid li{ display: flex; }
.tier-grid .price-card{
  width: 100%;
  border-top: 3px solid rgba(0,0,0,.12);
}
.tier-grid .price-card[data-tier="commercial"]{ border-top-color: var(--accent); background: rgba(10,108,255,.045); }
.tier-grid .price-card[data-tier="nonprofit"]{ border-top-color: rgba(10,108,255,.55); }
.tier-grid .price-card[data-tier="personal"]{ border-top-color: rgba(10,108,255,.28); }

.tier-grid-label{
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--accent);
  margin: 0 0 4px;
}

@media (max-width: 640px){
  .price-grid.tier-grid{ grid-template-columns: 1fr; max-width: 320px; }
}

/* Add-on card: layers onto any tier above, so it's shown apart from them. */
.addon-card{
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 620px;
  margin: 18px auto 0;
  padding: 16px 22px;
  border-radius: 16px;
  background: rgba(0,0,0,.025);
  border: 1px dashed rgba(0,0,0,.16);
}
.addon-card-plus{
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(10,108,255,.12);
  color: var(--accent);
  font-size: 18px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.addon-card-info{ flex: 1; }
.addon-card-title{ margin: 0; font-size: 14.5px; }
.addon-card-desc{ margin: 2px 0 0; font-size: 12.5px; color: var(--text-soft); }
.addon-card-options{ flex-shrink: 0; width: 200px; }

@media (max-width: 560px){
  .addon-card{ flex-direction: column; text-align: center; }
  .addon-card-options{ width: 100%; }
}

#mk-seats{
  width: 64px;
  padding: 3px 6px;
  font-size: 15px;
  border: 1px solid rgba(0,0,0,.25);
  border-radius: 5px;
  text-align: center;
}

.copyright{
  text-align: center;
  font-size: 11px;
  color: rgba(255,255,255,.85);
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
}
.copyright a{ color: rgba(255,255,255,.9); }

/* -------------------------------------------------------------------------
   Mobile responsive
   ------------------------------------------------------------------------- */
@media (max-width: 700px){
  :root{ --dock-h: 64px; }

  .menubar{ padding: 0 8px; }
  .menubar-app-name{ display: none; }
  .menubar-tray-link span{ display: none; }

  .desktop{ padding: calc(var(--menubar-h) + 16px) 10px calc(var(--dock-h) + 20px); }

  .window-body{ padding: 20px 18px; }

  .dock{ left: 0; right: 0; bottom: 0; transform: none; width: 100%; }
  .dock-list{
    border-radius: 0;
    justify-content: space-around;
    width: 100%;
    padding: 6px 4px;
    border-left: none; border-right: none; border-bottom: none;
  }
  .dock-icon{ width: 44px; margin-bottom: 10px;}
  .dock-label{ display: none; }
  .dock-link:hover{ transform: none; }

  .app-row{ align-items: flex-start; }
  .app-row-icon{ width: 44px; height: 44px; }
}