/*******************************************************************************
MeyerWeb Reset
*******************************************************************************/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font: inherit; vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }

ol, ul { list-style: none; }

table { border-collapse: collapse; border-spacing: 0; }

/*******************************************************************************
Theme Styles
*******************************************************************************/
body { 
  box-sizing: border-box; 
  color: #373737; 
  background: #f2f2f2; 
  font-size: 16px; 
  font-family: 'Myriad Pro', Calibri, Helvetica, Arial, sans-serif; 
  line-height: 1.6; 
  -webkit-font-smoothing: antialiased;
  margin: 0;
  padding: 0;
}

h1, h2, h3, h4, h5, h6 { 
  margin: 10px 0; 
  font-weight: 700; 
  color: #222222; 
  font-family: 'Lucida Grande', 'Calibri', Helvetica, Arial, sans-serif; 
  letter-spacing: -1px; 
}

h1 { font-size: 36px; font-weight: 700; }

h2 { padding-bottom: 10px; font-size: 32px; }

h3 { font-size: 24px; }

h4 { font-size: 21px; }

h5 { font-size: 18px; }

h6 { font-size: 16px; }

p { margin: 10px 0 15px 0; }

footer p { color: #333; }

a { 
  text-decoration: none; 
  color: #0F79D0; 
  text-shadow: none; 
  transition: color 0.5s ease; 
}

a:hover, a:focus { text-decoration: underline; }

footer a { color: #333; text-decoration: underline; }

em, cite { font-style: italic; }

strong { font-weight: bold; }

img { 
  position: relative; 
  margin: 0 auto; 
  max-width: 739px; 
  padding: 5px; 
  margin: 10px 0 10px 0; 
  border: 1px solid #ebebeb; 
  box-shadow: 0 0 5px #ebebeb; 
  -webkit-box-shadow: 0 0 5px #ebebeb; 
  -moz-box-shadow: 0 0 5px #ebebeb; 
  -o-box-shadow: 0 0 5px #ebebeb; 
  -ms-box-shadow: 0 0 5px #ebebeb; 
}

p img { display: inline; margin: 0; padding: 0; vertical-align: middle; text-align: center; border: none; }

pre, code { 
  color: #222; 
  background-color: #fff; 
  font-family: Monaco, "Bitstream Vera Sans Mono", "Lucida Console", Terminal, monospace; 
  font-size: 0.875em; 
  border-radius: 2px; 
  -moz-border-radius: 2px; 
  -webkit-border-radius: 2px; 
}

pre { padding: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); overflow: auto; }

code { padding: 3px; margin: 0 3px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); }

pre code { display: block; box-shadow: none; }

blockquote { color: #666; margin-bottom: 20px; padding: 0 0 0 20px; border-left: 3px solid #bbb; }

ul, ol, dl { margin-bottom: 15px; }

ul { list-style-position: inside; list-style: disc; padding-left: 20px; }

ol { list-style-position: inside; list-style: decimal; padding-left: 20px; }

dl dt { font-weight: bold; }

dl dd { padding-left: 20px; font-style: italic; }

dl p { padding-left: 20px; font-style: italic; }

hr { height: 1px; margin-bottom: 5px; border: none; background: #ddd; }

table { border: 1px solid #373737; margin-bottom: 20px; text-align: left; }

th { font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif; padding: 10px; background: #373737; color: #fff; }

td { padding: 10px; border: 1px solid #373737; }

form { background: #f2f2f2; padding: 20px; }

kbd { background-color: #fafbfc; border: 1px solid #c6cbd1; border-bottom-color: #959da5; border-radius: 3px; box-shadow: inset 0 -1px 0 #959da5; color: #444d56; display: inline-block; font-size: 11px; line-height: 11px; padding: 3px 5px; vertical-align: middle; }

/*******************************************************************************
Layout Styles
*******************************************************************************/
header { 
  background: #f5f5f5; 
  padding: 10px 20px; 
  border-bottom: 1px solid #ddd;
}

nav a { 
  margin-right: 15px; 
  text-decoration: none; 
  color: #333; 
  font-weight: bold; 
}

nav a:hover {
  color: #0F79D0;
  text-decoration: none;
}

main { 
  padding: 20px; 
  max-width: 1000px; 
  margin: auto; 
  background: #fff;
  min-height: calc(100vh - 200px);
}

footer { 
  background: #f5f5f5; 
  text-align: center; 
  padding: 20px; 
  margin-top: 40px; 
  border-top: 1px solid #ddd;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.product-card, .case-card { 
  border: 1px solid #ddd; 
  padding: 20px; 
  margin-bottom: 20px; 
  border-radius: 8px; 
  background: #fafafa;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.card-grid .product-card, 
.card-grid .case-card {
  margin-bottom: 0;
}

.product-card:hover, .case-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.product-card h3, .case-card h3 {
  margin-top: 0;
  margin-bottom: 15px;
}

.product-card-horizontal {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 20px;
}

.product-card-horizontal .product-card-logo {
  max-width: 100px;
  height: auto;
  border: none;
  box-shadow: none;
  padding: 0;
  margin: 0;
  display: block;
  flex-shrink: 0;
}

.product-card-content {
  flex: 1;
}

.product-card-logo {
  max-width: 50px;
  height: auto;
  border: none;
  box-shadow: none;
  padding: 0;
  margin: 0 auto 10px auto;
  display: block;
}

.product-card p, .case-card p {
  flex-grow: 1;
  margin-bottom: 15px;
}

.product-card a, .case-card a {
  margin-top: auto;
}

.product-header {
  text-align: center;
  margin-bottom: 30px;
}

.product-header h1 {
  margin-bottom: 15px;
}

main > h1:first-of-type {
  text-align: center;
}

.product-logo {
  max-width: 120px;
  height: auto;
  border: none;
  box-shadow: none;
  padding: 0;
  margin: 0 auto;
  display: block;
}

.screenshot { 
  margin: 20px 0; 
}

.screenshot img { 
  margin-right: 10px; 
  margin-bottom: 10px; 
  width: 200px; 
  display: inline-block; 
  vertical-align: top;
}

@media (max-width: 600px) { 
  .card-grid {
    grid-template-columns: 1fr;
  }
  
  .product-card-horizontal {
    flex-direction: column;
  }
  
  .product-card-horizontal .product-card-logo {
    margin: 0 auto 15px auto;
  }
  
  .screenshot img { 
    width: 100%; 
    display: block; 
    margin-right: 0; 
    margin-bottom: 15px;
  }
  
  main {
    padding: 15px;
  }
  
  h1 { font-size: 28px; }
  h2 { font-size: 24px; }
  h3 { font-size: 21px; }
}

/*******************************************************************************
Code Highlighting (from theme)
*******************************************************************************/
.highlight table td { padding: 5px; }
.highlight table pre { margin: 0; }
.highlight .cm { color: #777772; font-style: italic; }
.highlight .cp { color: #797676; font-weight: bold; }
.highlight .c1 { color: #777772; font-style: italic; }
.highlight .cs { color: #797676; font-weight: bold; font-style: italic; }
.highlight .c, .highlight .cd { color: #777772; font-style: italic; }
.highlight .err { color: #a61717; background-color: #e3d2d2; }
.highlight .gd { color: #000000; background-color: #ffdddd; }
.highlight .ge { color: #000000; font-style: italic; }
.highlight .gr { color: #aa0000; }
.highlight .gh { color: #797676; }
.highlight .gi { color: #000000; background-color: #ddffdd; }
.highlight .go { color: #888888; }
.highlight .gp { color: #555555; }
.highlight .gs { font-weight: bold; }
.highlight .gu { color: #aaaaaa; }
.highlight .gt { color: #aa0000; }
.highlight .kc { color: #000000; font-weight: bold; }
.highlight .kd { color: #000000; font-weight: bold; }
.highlight .kn { color: #000000; font-weight: bold; }
.highlight .kp { color: #000000; font-weight: bold; }
.highlight .kr { color: #000000; font-weight: bold; }
.highlight .kt { color: #445588; font-weight: bold; }
.highlight .k, .highlight .kv { color: #000000; font-weight: bold; }
.highlight .mf { color: #009999; }
.highlight .mh { color: #009999; }
.highlight .il { color: #009999; }
.highlight .mi { color: #009999; }
.highlight .mo { color: #009999; }
.highlight .m, .highlight .mb, .highlight .mx { color: #009999; }
.highlight .sb { color: #d14; }
.highlight .sc { color: #d14; }
.highlight .sd { color: #d14; }
.highlight .s2 { color: #d14; }
.highlight .se { color: #d14; }
.highlight .sh { color: #d14; }
.highlight .si { color: #d14; }
.highlight .sx { color: #d14; }
.highlight .sr { color: #009926; }
.highlight .s1 { color: #d14; }
.highlight .ss { color: #990073; }
.highlight .s { color: #d14; }
.highlight .na { color: #008080; }
.highlight .bp { color: #797676; }
.highlight .nb { color: #0086B3; }
.highlight .nc { color: #445588; font-weight: bold; }
.highlight .no { color: #008080; }
.highlight .nd { color: #3c5d5d; font-weight: bold; }
.highlight .ni { color: #800080; }
.highlight .ne { color: #990000; font-weight: bold; }
.highlight .nf { color: #990000; font-weight: bold; }
.highlight .nl { color: #990000; font-weight: bold; }
.highlight .nn { color: #555555; }
.highlight .nt { color: #000080; }
.highlight .vc { color: #008080; }
.highlight .vg { color: #008080; }
.highlight .vi { color: #008080; }
.highlight .nv { color: #008080; }
.highlight .ow { color: #000000; font-weight: bold; }
.highlight .o { color: #000000; font-weight: bold; }
.highlight .w { color: #bbbbbb; }
.highlight { background-color: #f8f8f8; }

/* Store links with badge images */
.app-store-link,
.store-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.store-badge {
  height: 40px;
  width: auto;
  display: block;
}
.store-link img.store-badge {
  flex-shrink: 0;
}