/* susolid.com: the 2011 look (green frame, grey panels, serif text, the toolbar icons),
   laid out with CSS instead of tables so it can stack on small screens. */

:root {
  --frame: #33cc00;      /* the bright green border */
  --current: #33ff33;    /* current page, as on the old bottom menu */
  --panel: #cccccc;      /* grey panels */
  --panel-light: #e2e2e2;
  --grid: #666666;       /* the dark lines between toolbar cells */
  --title: #009900;      /* the big "SuSolid" */
  --link: #005c00;       /* darker than the old #009900, which was hard to read on grey */
  --brown: #7a3c10;
  --ink: #111111;
  --muted: #333333;
  --serif: Georgia, "Times New Roman", Times, serif;
  --display: "Copperplate Gothic Light", "Copperplate Gothic", Copperplate, Georgia, serif;
  --label: "Tw Cen MT", "Century Gothic", "Trebuchet MS", Arial, sans-serif;
}

* { box-sizing: border-box; }

html { background: #616161 url("pictures/background3.png"); }

body {
  margin: 0;
  padding: 8px;
  color: var(--ink);
  font: 1.0625rem/1.55 var(--serif);
}

img { max-width: 100%; height: auto; }

a { color: var(--link); text-underline-offset: 2px; }
a:hover { color: #000; }

:focus-visible {
  outline: 3px solid #000;
  outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--current);
}

.skip {
  position: absolute;
  left: -9999px;
  top: 8px;
  z-index: 10;
  padding: 8px 14px;
  background: #fff;
  font-weight: bold;
}
.skip:focus { left: 16px; }

.frame {
  max-width: 1280px;
  margin: 0 auto;
  border: 4px solid var(--frame);
  background: var(--panel);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  grid-template-areas:
    "nav nav"
    "head release"
    "tools tools"
    "main main"
    "foot foot";
}

/* --- Top navigation (the old HOME / FAQ / CONTACT bar, moved to the top) --- */

.topnav { grid-area: nav; }
.topnav ul,
.foot ul {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin: 0;
  padding: 3px;
  list-style: none;
  background: var(--grid);
}
.topnav li { flex: 1 1 auto; }
.topnav a,
.foot a {
  display: block;
  min-width: 100px;
  min-height: 44px;
  padding: 11px 14px;
  background: var(--panel);
  color: var(--link);
  font: bold 1.1rem/1.2 var(--label);
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
}
.topnav a:hover,
.foot a:hover { background: var(--panel-light); text-decoration: underline; }
.topnav a[aria-current="page"],
.foot a[aria-current="page"] { background: var(--current); color: #002b00; }

/* --- Header: logo, product line, release panel --- */

.masthead {
  grid-area: head;
  display: flex;
  align-items: center;
  gap: 8px 20px;
  background: url("pictures/upBorderR.png") repeat-x;
  background-size: auto 100%;
}
.logo { flex: 0 0 auto; line-height: 0; }
.logo img { width: 256px; }
.intro { padding: 10px 12px 10px 0; }
.brand { margin: 0 0 6px; font-size: 1.1rem; white-space: nowrap; }
.brand-name {
  color: var(--title);
  font: bold 2.6rem/1 var(--display);
  vertical-align: -0.1em;
}
.brand-tag { color: var(--brown); font-size: 1.25rem; margin: 0 4px 0 6px; }
.features { margin: 0; padding-left: 1.6em; font: bold 1.05rem/1.45 var(--label); }
.features a { font-weight: bold; }

.release {
  grid-area: release;
  padding: 10px 12px 12px;
  background: url("pictures/upBorderR.png") repeat-x;
  background-size: auto 100%;
  border-left: 3px solid var(--grid);
  font-size: 0.95rem;
}
.release h2 { margin: 0 0 8px; font: bold 1.3rem/1.2 var(--label); }
.rel-date { font-weight: normal; font-size: 0.85em; color: var(--muted); white-space: nowrap; }
.rel-actions { display: flex; flex-direction: column; gap: 8px; }
.rel-actions p { margin: 3px 0 0; }
.note { font-size: 0.9rem; line-height: 1.35; color: var(--muted); }
.nowrap { white-space: nowrap; }
.rel-facts {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 8px;
  margin: 10px 0 6px;
  font-size: 0.9rem;
  line-height: 1.35;
}
.rel-facts dt { font-weight: bold; font-family: var(--label); }
.rel-facts dd { margin: 0; }
.rel-links { margin: 6px 0 0; font-size: 0.9rem; display: flex; flex-wrap: wrap; gap: 4px 14px; }

/* Buttons: the old green "Download" pill, and a PayPal-coloured buy button. */
.btn {
  display: inline-block;
  min-height: 44px;
  padding: 10px 18px;
  border-radius: 999px;
  font: bold 1.05rem/1.2 var(--label);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.btn-free {
  color: #fff;
  background: linear-gradient(#3fae3f, #0b5e0b 55%, #064706);
  border: 2px solid #043004;
}
.btn-free:hover { color: #fff; background: #064706; }
.btn-buy {
  color: #1a1a1a;
  background: linear-gradient(#ffd96a, #ffb700);
  border: 2px solid #9a6b00;
}
.btn-buy:hover { background: #ffc439; }
.paypal { margin: 0; }
.release .btn { width: 100%; }

/* --- Toolbar: the original icons, grouped and labelled --- */

.toolbar {
  grid-area: tools;
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  padding: 3px;
  background: var(--grid);
}
.tb-group { flex: 1 1 auto; display: flex; flex-direction: column; background: var(--panel); }
.tb-title {
  padding: 2px 6px;
  border-bottom: 1px solid #999;
  color: #2b2b2b;
  font: bold 0.875rem/1.3 var(--label);
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
}
.tb-group ul {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0;
  padding: 2px;
  list-style: none;
}
.tb-group a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 76px;
  min-height: 58px;
  padding: 5px 4px 4px;
  color: var(--ink);
  font: 0.92rem/1.1 var(--label);
  text-align: center;
  text-decoration: none;
}
.tb-group a img { display: block; width: 60px; height: 24px; }
.noicon { display: block; height: 24px; }
.tb-group a:hover { background: var(--panel-light); outline: 1px solid #888; }
.tb-group a[aria-current="page"] { background: var(--current); font-weight: bold; }
.tb-group a:focus-visible { outline-offset: -3px; box-shadow: inset 0 0 0 5px var(--current); }
.tb-status {
  display: none;
  flex: 1 0 100%;
  margin: 0;
  padding: 3px 8px;
  background: var(--panel-light);
  color: var(--muted);
  font: italic 0.92rem/1.3 var(--serif);
  min-height: 1.6em;
}
.js .tb-status { display: block; }

/* --- Content --- */

main { grid-area: main; padding: 14px 22px 22px; }
main:focus { outline: none; }
main p, main li, main dd { max-width: 75ch; }
h1 { margin: 0.2em 0 0.5em; font: bold 1.9rem/1.2 var(--label); color: #003d00; }
h1 img { vertical-align: middle; margin-right: 8px; }
h2 { margin: 1.4em 0 0.4em; font: bold 1.4rem/1.25 var(--label); color: #003d00; }
h3 { margin: 1.1em 0 0.3em; font: bold 1.15rem/1.3 var(--label); }
.lead { font-size: 1.12rem; }

.meta {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 4px 14px;
  max-width: 60rem;
  margin: 0 0 1em;
  padding: 8px 12px;
  background: var(--panel-light);
  border-left: 5px solid var(--frame);
}
.meta dt { font-weight: bold; font-family: var(--label); }
.meta dd { margin: 0; }

.steps li { margin-bottom: 0.35em; }

.ba {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 400px));
  gap: 14px;
  margin: 0.6em 0 1em;
}
figure { margin: 0; padding: 6px; background: #fff; border: 1px solid var(--grid); }
figure img { display: block; }
figcaption { margin-top: 5px; font-size: 0.95rem; line-height: 1.35; }
figcaption b { font-family: var(--label); }
.single { max-width: 412px; margin: 0.6em 0 1em; }

.video {
  position: relative;
  width: 100%;
  max-width: 560px;
  aspect-ratio: 16 / 9;
  margin: 0.6em 0 0.3em;
  background: #000;
}
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-link { margin-top: 0; font-size: 0.95rem; }

.twocol { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px); gap: 8px 28px; align-items: start; }

table { border-collapse: collapse; margin: 0.6em 0 1.2em; background: var(--panel-light); }
caption { text-align: left; font: bold 1.1rem var(--label); padding: 4px 0; }
th, td { border: 1px solid #8a8a8a; padding: 6px 10px; text-align: left; vertical-align: top; }
thead th { background: #b8b8b8; font-family: var(--label); }
tbody th { font-weight: normal; }
.facts th { font-weight: bold; font-family: var(--label); white-space: nowrap; }
.compare td { white-space: nowrap; }
.compare .yes { color: #004d00; font-weight: bold; }
.compare .no { color: #5a0000; }
.table-wrap { overflow-x: auto; max-width: 100%; }

.colors td:first-child { white-space: nowrap; font-weight: bold; font-family: var(--label); }
.sw {
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  margin-right: 8px;
  border: 1px solid #000;
  vertical-align: -0.35em;
}

.toolindex { list-style: none; padding: 0; margin: 0 0 0.5em; }
.toolindex li { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; padding: 4px 0; }
.toolindex a { display: inline-flex; align-items: center; gap: 8px; font-weight: bold; min-height: 32px; }
.toolindex .noicon { width: 60px; height: 24px; display: inline-block; }

.workflow { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.workflow li { max-width: none; }

.history { padding-left: 0; list-style: none; }
.history > li { border-left: 5px solid var(--frame); padding: 2px 0 2px 12px; margin-bottom: 12px; }
.history h3 { margin-top: 0; }
.badge { font: bold 0.875rem var(--label); background: #fff3b0; border: 1px solid #9a6b00; padding: 1px 6px; margin-left: 6px; }

.buybox { background: var(--panel-light); border: 2px solid var(--grid); padding: 12px 14px; max-width: 46rem; }
.buybox .paypal { margin-bottom: 8px; }
.buyfacts { margin: 0; padding-left: 1.2em; }

.callout { background: var(--panel-light); border-left: 5px solid var(--brown); padding: 8px 12px; max-width: 60rem; }
.callout p { margin: 0.3em 0; }

.faq dt { margin-top: 1em; font: bold 1.08rem/1.35 var(--label); }
.faq dd { margin: 0.3em 0 0 0; }

.checklist li { margin-bottom: 0.25em; }
address { font-style: normal; line-height: 1.6; }
.contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); gap: 16px 28px; align-items: start; }

code { font-size: 0.92em; background: #ececec; padding: 0 3px; }

.foot { grid-area: foot; border-top: 3px solid var(--grid); }
.foot ul { justify-content: center; }
.foot li { flex: 0 1 auto; }
.foot a { font-size: 0.95rem; padding: 6px 12px; min-width: 90px; }
.foot p { margin: 0; padding: 8px 12px 10px; text-align: center; font-size: 0.9rem; }

/* Review copy only */
.review-banner {
  max-width: 1280px;
  margin: 0 auto 6px;
  padding: 6px 12px;
  background: #fff3b0;
  border: 2px solid #9a6b00;
  font: bold 1rem var(--label);
}
.review {
  display: block;
  margin: 0.6em 0;
  padding: 6px 10px;
  background: #fff3b0;
  border: 2px dashed #9a6b00;
  color: #2e1f00;
  font: 0.95rem/1.4 var(--label);
  max-width: 60rem;
}
.review::before { content: "REVIEW: "; font-weight: bold; }
span.review { display: block; margin: 4px 0 0; font-size: 0.85rem; padding: 3px 6px; }

/* --- Smaller screens: stack header, release panel, toolbar and content --- */

@media (max-width: 960px) {
  .frame { grid-template-columns: minmax(0, 1fr); grid-template-areas: "nav" "head" "release" "tools" "main" "foot"; }
  .release { border-left: 0; border-top: 3px solid var(--grid); }
  .rel-actions { flex-direction: row; flex-wrap: wrap; }
  .rel-actions > div { flex: 1 1 240px; }
  .logo img { width: 200px; }
  .twocol, .contact { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
  body { padding: 0; font-size: 1.0625rem; }
  .frame { border-width: 3px; }
  .topnav a { min-width: 0; padding: 12px 8px; font-size: 1rem; }
  .topnav li { flex: 1 1 30%; }
  .masthead { flex-wrap: wrap; gap: 0 4px; }
  .logo img { width: 104px; }
  .intro { display: contents; }
  .brand { flex: 1 1 180px; white-space: normal; margin: 0; padding: 8px 12px 8px 0; }
  .brand-name { font-size: 2rem; }
  .features { flex: 1 1 100%; margin: 0 12px 10px 0; }
  body:not(.page-index) .features { display: none; }
  .release { padding: 10px 16px 12px; }
  .tb-group a { min-width: 64px; min-height: 50px; padding: 4px 2px 3px; font-size: 0.875rem; }
  .tb-group ul { padding: 1px; }
  main { padding: 12px 16px 20px; }
  h1 { font-size: 1.6rem; }
  .meta { grid-template-columns: minmax(0, 1fr); }
  .meta dt { margin-top: 4px; }
  .ba { grid-template-columns: minmax(0, 1fr); }
  .compare td { white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
}