/* Overall defaults */
*, *::before, *::after {
box-sizing:border-box;
}
* {
margin:0;
padding:0;
line-height:140%;
list-style:none;
}
body {
font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
overflow-wrap:break-word;
}
h1, h2, h3, h4, h5, h6 {
font-family: varela_round, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
img {
max-width:100%;
height:auto;
}
@media (prefers-color-scheme: dark) {
* {
color:#bbb;
}
}
table {
border:0px;  /* For Chrome and Safari */
}
a {
outline-style:none;
}
body.page {
/*font-size:90%;*/
background:#ddd;
}
body.printable {
background:#fefefe;
text-align:left;
}
#container {
position:relative;
margin: 0px auto;
background: #fffffd;
}
#print-container {
position:relative;
margin-left:10px;
background:#fefefe;
max-width:1050px;
}
@media (prefers-color-scheme: dark) {
body.page {
background:#222;
color:#bbb;
}
#container {
background: #222;
color:#bbb;
}
}

/* Header, navigation, content navigation, and footer */

/* Fonts */
@font-face {
  font-family: 'varela_round';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('varela_round'), local('varela_round'), url(/images/varela-round.woff) format('woff');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/images/Inter.var.woff2) format('woff2-variations');
}

      
/* Header */
.header {
position:relative;
top:35px;
height:193px;
background: #FCFCE5;
background: -webkit-linear-gradient(175deg, #FCFCE5, #FFFFFF);
background: -o-linear-gradient(175deg, #FCFCE5, #FFFFFF);
background: -moz-linear-gradient(175deg, #FCFCE5, #FFFFFF);
background: linear-gradient(175deg, #FCFCE5, #FFFFFF);
z-index:0;
}
.header-extended {
height:663px;
background: #FCFCE5;
background: -webkit-linear-gradient(170deg, #FCFCE5, #FFFFFF);
background: -o-linear-gradient(170deg, #FCFCE5, #FFFFFF);
background: -moz-linear-gradient(170deg, #FCFCE5, #FFFFFF);
background: linear-gradient(170deg, #FCFCE5, #FFFFFF);
}
@media (prefers-color-scheme: dark) {
.header {
position:relative;
top:35px;
height:193px;
background: #222;
background: -webkit-linear-gradient(180deg, #000000, #222222);
background: -o-linear-gradient(180deg, #000000, #222222);
background: -moz-linear-gradient(180deg, #000000, #222222);
background: linear-gradient(180deg, #000000, #222222);
z-index:0;
}
.header-extended {
height:663px;
background: #222;
background: -webkit-linear-gradient(180deg, #000000, #222222);
background: -o-linear-gradient(180deg, #000000, #222222);
background: -moz-linear-gradient(180deg, #000000, #222222);
background: linear-gradient(180deg, #000000, #222222);
}
}
.header-noheader {
height:0px;
}

@media only screen and (max-width: 699px) {
.header {
}
}
.title-area {
position:absolute;
top:3px;
height:43px;
left:0px;
z-index:300;
}
#title-logo {
padding-left:10px;
}
#title-logo img {
width:24px;
height:24px;
}
@media only screen and (max-width: 1016px) {
#title-logo {
max-width:100%;
}
}
#title {
position:absolute;
white-space:nowrap;
margin-left:20px;
text-decoration:none;
bottom:8px;
font-family: varela_round, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
font-weight:normal;
font-size:1.0em;
color:#FFF;
z-index:290;
opacity:0.90;
}
@media (prefers-color-scheme: dark) {
#title {
color:#ddd;
}
}
@media only screen and (max-width: 490px) {
#title {
display:none;
}
}
#branding {
position:absolute;
#width:525px;
height:120px;
top:60px;
left:150px;
}
#branding a img {
margin-top:5px;
z-index:8;
left:-140px;
top:-80px;
}

#wingware-logo {
position:relative;
max-width:1050px;
margin-left:auto;
margin-right:auto;
top:30px;
left:10px;
height:190px;
z-index:102;
}
#wingware-logo img {
z-index:102;
}
@media only screen and (max-width: 1050px) {
#wingware-logo img {
max-width:95%;
}
}
@media only screen and (max-width: 600px) {
#wingware-logo img {
height:auto;
}
#wingware-logo.home-logo {
top:10px;
height:auto;
}
#wingware-logo.internal-logo {
visibility:hidden;
}
}
#search {
width:220px;
height:40px;
}
#search form {
border:none;
margin:0 auto;
display:block;
clear:left;
text-align:right;
position:absolute;
bottom:0px;
right:0px;
}
#search form input {
border:none;
float:left;
background:url(/images/search-box.png) no-repeat;
font-size:100%;
width:140px;
padding:6px 6px 6px 6px;
}
#search form input#btn-search {
border:none;
float:left;
background:url(/images/icons/search.png) no-repeat;
width:19px;
height:19px;
padding-top:6px;
margin-right:20px;
margin-left:8px;
margin-top:3px;
-webkit-filter: drop-shadow 1px 1px 1px #DDD;
filter: drop-shadow(1px 1px 1px #DDD);
}
@media (prefers-color-scheme: dark) {
#search form input#btn-search {
-webkit-filter: drop-shadow 1px 1px 1px #555;
filter: drop-shadow(1px 1px 1px #555);
}
}
#search-terms {
opacity:1.0;
}

/* Navigation / menu */

#navigation {
position:fixed;
top:0px;
left:0px;
right:0px;
height:35px;
background:#69655E;
z-index:200;
}
@media (prefers-color-scheme: dark) {
#navigation {
background:#39252E;
}
}
.navtext {
padding-top:3px;
}

#navbar {
position: absolute;
right:30px;
margin:0;
padding:0;
height:35px;
z-index:500;
    background-color: #69655E;
}
@media (prefers-color-scheme: dark) {
#navbar {
    background-color: #39252E;
}
}
@media only screen and (max-width: 419px) {
#navbar {
right:0px;
left:35px;
}
}
.dropbtn {
    padding-left: 16px;
    padding-right: 16px;
    font-size: 14px;
    text-decoration:none;
    color:white;
    line-height:35px;
}
@media (prefers-color-scheme: dark) {
.dropbtn {
    color:#ccc;
}
}
@media only screen and (max-width: 640px) {
.dropbtn {
padding-left:3px;
padding-right:3px;
}
}

.dropbtn-selected {
    color:#fb8;
}
@media (prefers-color-scheme: dark) {
.dropbtn-selected {
    color:#fb8;
}
}

.dropbtn-search img {
vertical-align:middle;
}
.dropdown {
    position: relative;
    display: inline-block;
    height:100%;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 200px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}
@media (prefers-color-scheme: dark) {
.dropdown-content {
    background-color: #282828;
}
}

.dropdown-content-last {
    right:-30px;
}

@media only screen and (max-width: 640px) {
.dropdown-content-contact {
    right:-30px;
}
.dropdown-content-buy {
    right:-60px;
}
}

.dropdown-content a {
    color: black;
    padding: 3px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {
    background-color: #f1d1d1
}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover {
    background-color: #3e8e41;
}
@media (prefers-color-scheme: dark) {
.dropdown-content a {
    color: #bbb;
}
.dropdown-content a:hover {
    background-color: #512151;
}
.dropdown:hover {
    background-color: #522;
}
}

@media only screen and (max-width: 370px) {
.dropbtn-search img {
visibility:hidden;
}
.dropdown:hover .dropdown-content-last {
display:none;
visibility:hidden;
}
.dropdown-last {
display:none;
visibility:hidden;
}
}

@media only screen and (max-width: 350px) {
.dropbtn-contact {
visibility:hidden;
}
.dropdown:hover .dropdown-content-contact {
display:none;
visibility:hidden;
}
.dropdown-contact {
display:none;
visibility:hidden;
}
}

/* Inline title */
#inline-title {
padding-bottom:10px;
}
@media only screen and (max-width: 400px) {
#inline-title {
font-size:1.3em;
}
}
@media (prefers-color-scheme: dark) {
#inline-title {
color:#44a835;
}
.download-spec-title {
color:#44a835 ! important;
}
}

/* Footer */
#footer {
border-bottom:6px solid #999;
background:#CECABE;
padding:10px 10px 25px 10px;
}
@media (prefers-color-scheme: dark) {
#footer {
background:#0E0A0E;
}
}
#footer ul {
text-align:right;
float:right;
opacity:0.75;
}
@media only screen and (max-width: 750px) {
#footer ul {
text-align:left;
float:left;
}
}
#footer ul li {
float:left;
display:inline-block;
}
#footer ul li a {
color:#000;
padding-left:0.6em;
margin-left:0.4em;
border-left:1px solid #000;
text-decoration:none;
}
#footer ul li a:hover {
color:#d40;
}
#footer ul li.first-child a {
padding-left:0;
margin-left:0;
border-left:none;
}
#footer p.copyright {
color:#000;
float:left;
vertical-align:bottom;
opacity:0.75;
}
@media (prefers-color-scheme: dark) {
#footer ul li a {
color:#fff;
}
#footer ul li a:hover {
color:#f70;
}
#footer p.copyright {
color:#fff;
}
}
#footer-copyright-div {
float:left;
display:inline-block;
min-width:200px;
}
#footer-social-div {
display:block;
margin-left:auto;
margin-right:auto;
padding-top:5px;
min-width:220px;
}
#footer-menu-div {
float:right;
display:inline-block;
min-width:200px;
}
@media only screen and (max-width: 750px) {
#footer-copyright-div {
min-width:98%;
}
#footer-social-div {
min-width:98%;
}
#footer-menu-div {
float:left;
min-width:98%;
}
}
#socialmedia {
white-space: nowrap;
text-align:center;
margin-right:33%;
margin-left:33%;
opacity:0.95;
}
#socialmedia a img {
border-bottom:1px solid #CECABE;
}
#socialmedia a:hover img {
border-bottom:1px solid #000;
}
@media only screen and (max-width: 750px) {
#socialmedia {
position:absolute;
margin-left:auto;
margin-right:auto;
right:10px;
}
}
@media only screen and (max-width: 500px) {
#socialmedia {
visibility:hidden;
}
}
@media (prefers-color-scheme: dark) {
#socialmedia {
opacity:0.75;
}
}

#footer-menu {
float:left;
}
#footer span.org,
#footer span.street-address,
#footer span.postal-code {
padding-right:0.6em;
margin-right:0.4em;
border-right:1px solid #000;
}
#footer span.org {
padding-left:1px;
}
#footer span strong {
font-weight:normal;
}

#footer {
padding-bottom:10px;
}



/* Overall content holder */
.holder {
margin-top:30px;
min-height:350px;
margin-bottom:30px;
}
.holder-extended {
margin-top:-420px;
}
.holder-home {
/*margin-top:-90px;*/
margin-top:-210px;
margin-bottom:0px;
}
.holder-whatsnew {
margin-top:-450px;
margin-bottom:0px;
}
.holder-noheader {
margin-top:15px;
padding-top:20px;
}
@media only screen and (max-width: 950px), screen and (max-height: 1099px) {
.holder-home {
margin-top:-210px;
}
}
@media only screen and (max-width: 699px) {
.holder-home {
margin-top:-180px;
}
}
@media only screen and (max-width: 600px) {
.holder {
margin-top:-160px;
}
.holder-home {
margin-top:-180px;
}
.holder-extended {
margin-top:-600px;
}
.holder-noheader {
margin-top:15px;
padding-top:20px;
}
}

/* Generic page content area styles */
.main-content {
padding-left:10px;
padding-right:10px;
position:relative;
max-width:1050px;
margin-left:auto;
margin-right:auto;
}
.content {
background-color:transparent;
padding-top:10px;
}
.content h1 {
color:#55387B;
/*font-size:1.5em;*/
margin-bottom:0.2em;
padding-top:0.3em;
}
.content h2 {
color:#55387B;
/*font-size:1.3em;*/
margin-bottom:0.2em;
padding-top:0.3em;
}
.content h2.trial-title {
margin-bottom:0.5em;
padding-left:5px;
}
.content h2.trial-title img {
position:relative;
top:5px;
margin-right:5px;
}
.content h3 {
/*font-size:1.1em;*/
margin-bottom:0.5em;
color:#55387B;
margin-top:0.3em;
}
.content h4 {
/*font-size:1.0em;*/
margin-bottom:0.5em;
color:#55387B;
margin-top:0.3em;
}
.content h4.contents-title {
/*font-size:1.1em;*/
margin-bottom:0.5em;
color:#55387B;
border-top:2px solid #363;
padding-top:5px;
margin-top:1.0em;
clear:left;
}
.content h5 {
/*font-size:1.0em;*/
margin-bottom:0.5em;
color:#555;
margin-top:0.3em;
}
.content p {
padding-bottom:1.0em;
color:#444;
padding-left:1px;
}
.content ul,
.content ol {
padding-bottom:0.5em;
padding-top:0;
padding-left:18px;
color:#444;
}
.content ul.product-links li {
float:left;
margin-right:0.4em;
}
.content ul.product-links li a {
float:left;
display:block;
padding:2px 10px 3px 10px;
color:#444;
background-color:#ddd;
text-decoration:none;
}
@media (prefers-color-scheme: dark) {
.content h1 {
color:#a578cb;
}
.content h2 {
color:#a578cb;
}
.content h3 {
color:#a578cb;
}
.content h4 {
color:#a578cb;
}
.content h4.contents-title {
color:#a578cb;
}
.content h5 {
color:#bbb;
}
.content p {
color:#ddd;
}
.content ul,
.content ol {
color:#ddd;
}
.content ul.product-links li a {
color:#444;
background-color:#ddd;
}
}

.content ul.product-links li a:hover {
color:#333;
text-decoration:underline;
}
.content dl {
padding-bottom:0.5em;
padding-left:10px;
}
.content dt {
color:#444;
float:left;
display:block;
width:250px;
text-align:left;
}
.content dd {
color:#444;
}
.content dt.gap,
.content dd.gap {
padding-bottom:1.5em;
}
.content a {
color:#55387B;
/*color:#444;*/
}
.content a:hover {
color:#d40;
}
.content table {
color:#444;
padding-bottom:1.2em;
}
.content img {
max-width:100%;
}
@media (prefers-color-scheme: dark) {
.content ul.product-links li a:hover {
color:#baseline;
}
.content dt {
color:#eee;
}
.content dd {
color:#eee;
}
.content a {
color:#a578cb;
}
.content a:hover {
color:#f70;
}
.content table {
color:#eee;
}
}

.subcontents-1 b:hover {
color:#d40;
}
.sub-contents a {
text-decoration:none;
}
.subcontents-1 {
text-decoration: none;
font-size:1.2em;
}
.subcontents-1 b {
color:#55387B;
}
.subcontents-2 {
text-decoration: none;
}
.subcontents-n {
text-decoration: none;
}
@media only screen and (max-width: 400px) {
.subcontents-1 {
font-size:1.1em;
}
}
@media (prefers-color-scheme: dark) {
.subcontents-1 b:hover {
color:#f70;
}
.subcontents-1 b {
color:#a578cb;
}
}

/* Lists */
.ordered-list li {
list-style: decimal outside; 
color:#3e9a37;
font-weight: bold;
padding-bottom:0.5em;
}
.bullet-list li {
list-style: disc outside; 
color:#3e9a37;
padding-bottom:0.5em;
}
.bullet {
color:#444;
font-weight: normal;
}
.content ol li {
list-style: decimal outside; 
padding-bottom:0.5em;
}
.content li {
list-style: disc outside; 
padding-bottom:0.5em;
}
.content blockquote {
  padding-left: 1.0em;
  margin-bottom: 0.3em;
}
@media (prefers-color-scheme: dark) {
.ordered-list li {
color:#0e6a07;
}
.bullet-list li {
color:#0e6a07;
}
.bullet {
color:#ccc;
}
}

/* List of points format used on various pages */
#pointlist ul li {
list-style:square outside url(/images/bullet-1.gif);
}
a.boldpoint {
text-decoration:none;
font-weight:bold;
}

/* Modern monospace stack for code/pre blocks (overrides plain `monospace`
   used by Pygments syntax-highlight rules below). */
code, pre, kbd, samp, .python-highlight, .python-highlight pre,
.content pre.literal-block {
font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

/* RST double-backticks render as <tt class="literal"> (older docutils) or
   <code class="literal"> (newer docutils), with an inner <span class="pre">.
   These mark inline things like menu names and button labels -- variable
   width font (not monospace) on a brand-soft chip so they read as
   labels distinct from prose without going to monospace code. */
tt.literal, code.literal {
font-family: inherit;
background: var(--color-brand-soft);
color: var(--color-brand-strong);
padding: 1px 6px;
border-radius: 3px;
font-size: 0.95em;
}
tt.literal span.pre, code.literal span.pre {
font-family: inherit;
}

/* Preformatted areas */
.content pre.literal-block {
color:#232;
background: #fefef5;
font-size:110%;
padding-top: 0.5em;
padding-bottom: 0.5em;
margin-bottom: 1.0em;
padding-left:1.5em;
/*font-weight:bold;*/
}
.content span.pre {
color:#363;
font-weight:bold;
padding-bottom: 1.0em;
}
@media (prefers-color-scheme: dark) {
.content pre.literal-block {
color:#ded;
background: #1c1c0f;
}
.content span.pre {
color:#81b781;
}
}

/* Highlighted note or box */
.note {
display:table;
color:#444;
padding-left:8px;
border-left:4px solid #55AA55;
background: #ffffe1;
background: -webkit-linear-gradient(90deg, #ffffe1, #FFFFFF);
background: -o-linear-gradient(90deg, #ffffe1, #FFFFFF);
background: -moz-linear-gradient(90deg, #ffffe1, #FFFFFF);
background: linear-gradient(90deg, #ffffe1, #FFFFFF);
padding-top:10px;
padding-bottom:10px;
padding-right:5px;
margin-bottom:15px;
opacity:0.90;
}
.box {
color:#444;
padding-left:8px;
border-left:3px solid #339933;
padding-bottom:0px;
margin-bottom:10px;
}
.box b,
.note b {
color:#333;
}
.box .box-title {
color:#55387B;
}
@media (prefers-color-scheme: dark) {
.note {
color:#ccc;
background: #443;
background: -webkit-linear-gradient(90deg, #443, #222);
background: -o-linear-gradient(90deg, #443, #222);
background: -moz-linear-gradient(90deg, #443, #222);
background: linear-gradient(90deg, #443, #222);
}
.box {
color:#ddd;
border-left:3px solid #eecc00;
}
.box b,
.note b {
color:#ccc;
}
.note strong,
.box strong {
color:#f7964f;
}
.box .box-title {
color:#a588cB;
}
}

/* Support for pages with leading full width highlighted area */
.page-with-highlight .holder {
}
#highlight {
position:relative;
max-width:1050px;
margin-left:auto;
margin-right:auto;
padding-left:20px;
padding-right:10px;
padding-top:0px;
padding-bottom:3px;
margin-bottom:0;
min-height:166px;
}
@media only screen and (max-width: 600px) {
#highlight {
padding-top:50px;
}
}
#highlight a {
color:#444;
}
#highlight ul {
margin-left:3px;
margin-bottom:5px;
}
#highlight ul li {
float:left;
clear:left;
padding:0px;
margin:0px;
color:#774345;
list-style:square outside url(/images/bullet-1.gif);
}
#highlight ul li span {
/*font-size:12pt;*/
font-weight:bold;
color:#444;
padding:0px;
margin:0px;
}
#highlight ul li a {
text-decoration:none;
}
#highlight ul li a:hover {
text-decoration:none;
}
#highlight .hint {
color:#333;
padding-bottom:10px;
}
#highlight .hint a {
color:#333;
}
#highlight .hint a:hover {
color:#d40;
}
@media (prefers-color-scheme: dark) {
#highlight a {
color:#ccc;
}
#highlight ul li {
color:#774345;
}
#highlight ul li span {
color:#ccc;
}
#highlight .hint {
color:#bbb;
}
#highlight .hint a {
color:#bbb;
}
#highlight .hint a:hover {
color:#f70;
}
}

/* Screenshot popup / slideshow support */
.screenshot-holder {
max-width:570px;
position:relative;
display:inline-block;
margin-left:10px;
padding-right:10px;
float:right;
z-index:100;
}
.screenshot-holder-wide {
max-width:650px;
}
div.cycle-slideshow {
max-width:720px;
position:relative;
display:inline-block;
margin-left:0px;
float:left;
z-index:100;
}
@media only screen and (max-width: 749px) {
.screenshot-holder {
float:none;
margin-left:0px;
}
div.cycle-slideshow {
float:none;
margin-left:0px;
max-width:710px;
}
}
@media only screen and (max-width: 820px) {
.screenshot-holder-wide {
float:none;
margin-left:0px;
}
}
.cycle-pager { 
text-align: center;
width: 100%;
height:20px;
z-index: 101;
display:inline;
position: absolute;
bottom:35px;
left:0px;
}
.cycle-pager span {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
font-size: 50px;
width: 16px;
height: 16px;
display: inline-block;
color: #ddd;
cursor: pointer;
}
.cycle-pager span.cycle-pager-active {
color: #D69746;
}
.cycle-pager > * {
cursor: pointer;
}
img.screenshot-right {
zoom:1;
border:none;
margin:0;
vertical-align:top;
margin-top:5px;
float:right;
clear:right;
padding-left:10px;
padding-bottom:10px;
padding-top:0px;
padding-right:0px;
z-index:100;
width:100%;
height:auto;
max-width:560px;
-webkit-filter: drop-shadow 2px 2px 5px #CCC;
filter: drop-shadow(2px 2px 5px #CCC);
}
@media only screen and (max-width: 800px) {
img.screenshot-right {
float:none;
padding-left:0px;
}
}
img.screenshot-wide {
max-width:650px;
}
img.screenshot-secondary {
visibility:hidden;
}
img.screenshot-clickable {
-webkit-filter: drop-shadow 2px 2px 8px #888;
filter: drop-shadow(2px 2px 8px #888);
}
img.screenshot-clickable:hover {
opacity:0.80;
}
span.screenshot-play-icon {
position:absolute;
display:inline;
top:38%;
left:43%;
width:15%;
height:15%;
opacity:0.80;
z-index:102;
}
span.screenshot-play-icon:hover {
opacity:1.00;
}
@media (prefers-color-scheme: dark) {
img.screenshot-right {
-webkit-filter: drop-shadow 0px 0px 12px #555;
filter: drop-shadow(0px 0px 12px #555);
}
img.screenshot-clickable {
-webkit-filter: drop-shadow 0px 0px 12px #555;
filter: drop-shadow(0px 0px 12px #555);
}
}

/* Popup content */
#overlay {
display:none;
position:relative;
z-index:9001;
padding: 8px;
background: #aaa;
width:90%;
max-height:85%;
border-radius:4px;
box-shadow: 0 0 125px rgba(0,0,0,0.9);
margin-left:auto;
margin-right:auto;
}
@media (prefers-color-scheme: dark) {
#overlay {
background: #555;
}
}
@media only screen (max-width: 680px) {
#overlay {
margin-left:5px;
margin-right:5px;
}
}
#overlay .close {
background-image:url(/images/close.png);
position:absolute;
right:-13px;
top:-13px;
cursor:pointer;
height:26px;
width:26px;
opacity:1.00;
z-index:1000;
}
#overlay .close:hover {
opacity:0.80;
}
@media only screen (max-width: 480px) {
#overlay {
width:98%;
margin-right:0;
margin-left:0;
}
}

/* Video/image galleries */
#videogallery {
	zoom:1;
}
div.video-popup-image {
width:440px;
position:relative;
float:right;
clear:right;
}
#videogallery a {
}
#videogallery a img.video-thumb {
	zoom:1;
	opacity:1.00;
	display:block;
	border:none;
	margin:0;
	vertical-align:top;
	margin-top:5px;
	padding-left:5px;
}
#videogallery a:hover img.video-thumb{
	opacity:0.80;
}
#videogallery p {
	padding-left:145px;
}
#videogallery p.video-blurb-only {
	padding-left:5px;
	padding-bottom:18px;
}
.video-title {
        clear:left;
	padding-bottom:2px;
	color:#55387B;
/*	font-size:1.2em;*/
	border-top:2px solid #f0f0f0;
	border-left:2px solid #f0f0f0;
	padding-left:5px;
}
@media (prefers-color-scheme: dark) {
.video-title {
	color:#a578cb;
	border-top:2px solid #101010;
	border-left:2px solid #101010;
}
}
.video-title strong {
}
.video-title a img {
float:left; 
margin-top:0px;
padding-top:5px;
border:0px;
opacity:1.00;
}
.video-title a:hover img{
opacity:0.80;
}
.video-product {
position:relative;
float:right;
clear:none;
padding-top:4px;
padding-right:5px;
color:#444;
width:10em;
}
@media (prefers-color-scheme: dark) {
.video-product {
color:#bbb;
}
}
.video-product a img {
float:right; 
margin-top:0px;
border:0px;
opacity:1.00;
}
.video-product a:hover img{
opacity:0.80;
}
.video-product span {
position:absolute;
clear:none;
margin-bottom:0px;
/*font-size:1.0em;*/
line-height:1.0em;
bottom:0px;
right:24px;
}
#videogallery .video-table {
margin-bottom:20px;
}
#videogallery .video-left {
	width:140px;
	vertical-align:top;
        float:left;
}
#videogallery .video-right {
	vertical-align:top;
        margin-left:145px;
}
@media only screen and (max-width: 499px) {
#videogallery .video-right {
margin-left:0px;
}
}

input.submit, input.prod-submit, form button {
  background-color: var(--color-success-deep);
  border: none;
  color: white;
  padding: 5px 15px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
}
input.submit:hover, input.prod-submit:hover, form button:hover {
  background-color: var(--color-success-strong);
}
#payment-request-button {
  display: inline-block;
}

/* Top part of home page */
.home-quote {
position:absolute;
bottom:3px;
right:40px;
vertical-align:middle;
font-size:12pt;
max-width:200px;
padding-right:10px;
z-index:3;
}
@media only screen and (max-width: 699px) {
.home-quote {
position:relative;
left:0px;
vertical-align:top
padding-top:30px;
max-width:420px;
}
.home-summary {
padding-bottom:20px;
}
.header-extended {
height:813px;
}
}
.home-summary {
position:relative;
font-size:14pt;
max-width:420px;
z-index:2;
}
#home-download-button {
position:relative;
width:250px;
padding: 10px 10px;
margin-top:20px;
z-index:2;
}
div.home-other-editions {
position:relative;
font-size:15px;
z-index:2;
}
.home-other-editions a:hover {
color:#d40 ! important;
}
div.more-testimonials {
font-size:15px
}
.more-testimonials a:hover {
color:#d40 ! important;
}
@media (prefers-color-scheme: dark) {
.home-other-editions a:hover {
color:#f70 ! important;
}
.more-testimonials a:hover {
color:#f70 ! important;
}
.framework-box h3 {
color:#df6e37;
}
}
.feather-home {
position:absolute;
top:-210px;
right:150px;
/*width:515px;*/
width:420px;
max-width:100%;
/*height:711px;*/
height:580px;
opacity:0.70;
margin-top:-20px;
margin-bottom:20px;
margin-right:20px;
z-index:1;
}
@media only screen and (max-width: 850px) {
.feather-home {
opacity:0.50;
}
}
@media only screen and (max-width: 600px) {
.feather-home {
top:0px;
right:auto;
left:0px;
}
}
@media (prefers-color-scheme: dark) {
.feather-home {
opacity:0.40;
}
}
@media screen and (max-width: 850px) and (prefers-color-scheme: dark) {
.feather-home {
opacity:0.35;
}
}

.home-videogallery
{
max-width:720px;
max-height:500px;
float:right;
}
.home-screenshot-holder {
max-width:720px;
margin-left:10px;
padding-right:10px;
z-index:100;
}
.home-videogallery:hover {
background: #FFF5DE;
background: -webkit-linear-gradient(to bottom, #FFF5DE, #FFFFFF);
background: -o-linear-gradient(to bottom, #FFF5DE, #FFFFFF);
background: -moz-linear-gradient(to bottom, #FFF5DE, #FFFFFF);
background: linear-gradient(to bottom, #FFF5DE, #FFFFFF);
opacity:1.0;
}
@media (prefers-color-scheme: dark) {
.home-videogallery:hover {
background: #33350e;
background: -webkit-linear-gradient(to bottom, #33350e, #000000);
background: -o-linear-gradient(to bottom, #33350e, #000000);
background: -moz-linear-gradient(to bottom, #33350e, #000000);
background: linear-gradient(to bottom, #33350e, #000000);
}
}
.cycle-slideshow:hover {
opacity:0.90;
}
@media only screen and (max-width: 850px) {
.cycle-slideshow:hover {
opacity:1.0;
}
}
.benefit-box {
display:table;
padding-left:5px;
padding-right:20px;
min-width:100px;
max-width:250px;
}
/*.home-use-with {
display:table;
padding-left:50px;
height:540px;
min-width:100px;
}
.home-use-with-text {
position:relative;
display:table-cell;
vertical-align:middle;
min-width:100px;
z-index:2;
}
a.use-with-list-item {
text-decoration:none;
}
*/
@media only screen and (max-width: 950px), screen and (max-height: 1099px) {
.home-videogallery {
max-width:75%;
max-height:auto;
}
}
/*@media only screen and (max-width: 950px) {
.home-use-with {
padding-left:20px;
height:auto;
}
}
*/
@media only screen and (max-width: 850px) {
/*
.home-use-with {
vertical-align:baseline;
padding-left:0px;
height:auto;
min-width:250px;
}
.home-use-with-text {
padding-top:30px;
}
.home-use-with-break {
display:none;
}
*/
.home-videogallery {
float:none;
display:inline-block;
padding-bottom:20px;
max-width:100%;
}
.benefit-box {
display:inline-block;
padding-top:40px;
max-width:200px;
min-width:80px;
width:32%;
vertical-align:text-top;
}
#benefit-holder {
position:relative;
display:inline-block;
}
}
@media only screen and (max-width: 720px) {
.benefit-box {
display:contents;
padding-top:0px;
}
}

/* Home page howtos, support, and version blurbs */
.howtos {
color:#444;
border:1px solid #d3dace;
background:#f3faee;
padding-top:3px;
padding-bottom:3px;
padding-left:8px;
padding-right:8px;
margin-bottom:20px;
}
#support {
padding-right:10px;
padding-top:0px;
padding-bottom:20px;
}
#support p {
color:#333;
}
#support p.first-support {
padding-top:20px;
}
#support p span {
color:#333;
}
#version-blurb {
color:#333;
}
@media (prefers-color-scheme: dark) {
.howtos {
color:#ddd;
border:1px solid #232a1e;
background:#131a0e;
}
#support p {
color:#ccc;
}
#support p span {
color:#ccc;
}
#version-blurb {
color:#ccc;
}
}

/* Testimonials section on home page */
.home-testimonials {
position:relative;
max-width:100%;
margin-left:auto;
margin-right:auto;
margin-top:20px;
padding-top:50px;
padding-bottom:70px;
background: #FCFCE5;
background: -webkit-linear-gradient(15deg, #FCFCE5, #FFFFFF);
background: -o-linear-gradient(15deg, #FCFCE5, #FFFFFF);
background: -moz-linear-gradient(15deg, #FCFCE5, #FFFFFF);
background: linear-gradient(15deg, #FCFCE5, #FFFFFF);
}
@media (prefers-color-scheme: dark) {
.home-testimonials {
background: #1c1c05;
background: -webkit-linear-gradient(15deg, #1c1c05, #000000);
background: -o-linear-gradient(15deg, #1c1c05, #000000);
background: -moz-linear-gradient(15deg, #1c1c05, #000000);
background: linear-gradient(15deg, #1c1c05, #000000);
}
}
.home-testimonials img {
margin-bottom:20px;
}
.testimonial-bio {
float:left;
width:250px;
margin-right:30px;
margin-bottom:30px;
}
@media only screen and (max-width: 520px) {
.testimonial-bio {
float:none;
}
}

/* Applications section on home page */
#applications {
position:relative;
max-width:100%;
margin-left:auto;
margin-right:auto;
border-top:5px solid #ddd;
border-bottom:5px solid #ddd;
padding-top:20px;
padding-bottom:20px;
background: #ECFFCE;
background: -webkit-linear-gradient(150deg, #ECFFCE, #FFFFFF);
background: -o-linear-gradient(150deg, #ECFFCE, #FFFFFF);
background: -moz-linear-gradient(150deg, #ECFFCE, #FFFFFF);
background: linear-gradient(150deg, #ECFFCE, #FFFFFF);
}
@media (prefers-color-scheme: dark) {
#applications {
background: #1c2f0e;
background: -webkit-linear-gradient(150deg, #1c2f0e, #000000);
background: -o-linear-gradient(150deg, #1c2f0e, #000000);
background: -moz-linear-gradient(150deg, #1c2f0e, #000000);
background: linear-gradient(150deg, #1c2f0e, #000000);
}
}
#applications h2 a {
text-decoration:none;
}
@media only screen and (max-width: 850px) {
#applications {
margin-top:15px;
}
}

/* Whats New part of home page */
#whats-new {
position:relative;
max-width:100%;
margin-left:auto;
margin-right:auto;
padding-top:30px;
padding-bottom:30px;
}
#whats-new h2 a {
text-decoration:none;
}
@media only screen and (max-width: 850px) {
#whats-new {
margin-top:15px;
}
}

/* Key points area */
#key-points {
margin-top:-20px;
}
.key-points-first {
border-top:5px solid #bbb;
}
.key-points-right img, img.key-points-right {
float:right;
display:inline-block;
max-width:298px;
max-height:202px;
width:33%;
-webkit-filter: drop-shadow 2px 2px 8px #888;
filter: drop-shadow(2px 2px 8px #888);
}
.key-points-left img, img.key-points-left {
float:left;
display:inline-block;
max-width:298px;
max-height:202px;
width:33%;
-webkit-filter: drop-shadow 2px 2px 8px #888;
filter: drop-shadow(2px 2px 8px #888);
}
.key-points-right .key-point {
float:left;
}
.key-points-left .key-point {
float:right;
}
.key-points-right, .key-points-left {
padding-top:40px;
}
.key-points-first {
padding-top:20px;
}
.key-point {
width:60%;
display:inline-block;
vertical-align:top;
}
.key-point h2 {
padding-top:0px;
}
.key-point h2 a,
.key-point h3 a {
text-decoration:none;
}
a.show-link {
text-decoration:underline;
}
a.hide-link {
text-decoration:none;
}
.key-point a {
color:#55387B;
}
.key-point h2 a:hover {
color:#d40;
}
@media (prefers-color-scheme: dark) {
.key-point a {
color:#5084d5;
}
.key-point h2 a:hover {
color:#f70;
}
a.show-link {
color:#a578cb;
}
}
a:hover img.hover-link {
opacity:0.80;
}
.key-point-first, .hover-link-first {
margin-top:20px;
}
@media only screen and (max-width: 500px) {
.key-points-right img, img.key-points-right {
float:none;
margin-left:auto;
margin-right:auto;
width:100%;
}
.key-points-left img, img.key-points-left {
float:none;
margin-left:auto;
margin-right:auto;
width:100%;
}
.key-point {
float:none;
width:100%;
padding-top:20px;
padding-bottom:30px;
}
.key-points-left, .key-points-right {
padding-top:0px;
}
.key-points-first {
padding-top:20px;
}
}
@media (prefers-color-scheme: dark) {
.key-points-right img, img.key-points-right {
-webkit-filter: drop-shadow 0 0 12px #999;
filter: drop-shadow(0 0 12px #999);
}
.key-points-left img, img.key-points-left {
-webkit-filter: drop-shadow 0 0 12px #999;
filter: drop-shadow(0 0 12px #999);
}
}

/* Modal images; used in key points */
.modal-img:hover {
opacity: 0.8;
}
@media only screen and (max-width: 380px) {
.modal-img:hover {
opacity: 1.0;
}
}
.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.7);
}
@media (prefers-color-scheme: dark) {
.modal {
  background-color: rgb(f,f,f);
  background-color: rgba(f,f,f,0.7);
}
}
.modal-content {
  margin: auto;
  display: block;
  width: 98%;
}
.modal-content {
  animation-name: zoom;
  animation-duration: 0.2s;
}
@keyframes zoom {
  from {transform:scale(0)}
  to {transform:scale(1)}
}
.modal-close {
  position: absolute;
  top: 45px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}
.modal-close:hover,
.modal-close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}
@media (prefers-color-scheme: dark) {
.modal-close {
  color: #010101;
}
.modal-close:hover,
.modal-close:focus {
  color: #444;
}
}

/* Closing argument on home page */
.closing {
background: #FCFCE5;
background: -webkit-linear-gradient(15deg, #FCFCE5, #FFFFFF);
background: -o-linear-gradient(15deg, #FCFCE5, #FFFFFF);
background: -moz-linear-gradient(15deg, #FCFCE5, #FFFFFF);
background: linear-gradient(15deg, #FCFCE5, #FFFFFF);
padding-top:30px;
padding-bottom:80px;
z-index:0;
}
@media (prefers-color-scheme: dark) {
.closing {
background: #1c1c05;
background: -webkit-linear-gradient(15deg, #1c1c05, #000000);
background: -o-linear-gradient(15deg, #1c1c05, #000000);
background: -moz-linear-gradient(15deg, #1c1c05, #000000);
background: linear-gradient(15deg, #1c1c05, #000000);
}
}
.closing-statement {
font-size:14pt;
}
#bottom-download-button {
position:relative;
width:250px;
padding: 10px 10px;
margin-top:20px;
z-index:2;
}

/* Quotes on home page */
#quotes-box {
width:47%;
float:right;
padding-top:10px;
padding-right:10px;
}
#quotes-box div {
padding-top:3px;
}
#quotes-header {
display:none;
}
@media only screen and (max-width: 599px) {
#quotes-box {
float:none;
padding-right:0px;
width:99%;
}
#quotes-header {
display:block;
}
}

/* Support for second column in highlight area */
.page-with-highlight .content {
padding-top:0;
}

/* News items */
.news-area {
height:2000px;
background: -webkit-linear-gradient(150deg, #FCFCE5, #FFFFFF);
background: -o-linear-gradient(150deg, #FCFCE5, #FFFFFF);
background: -moz-linear-gradient(150deg, #FCFCE5, #FFFFFF);
background: linear-gradient(150deg, #FCFCE5, #FFFFFF);
padding-top:15px;
}
#news-box {
width:47%;
float:left;
}
@media only screen and (max-width: 599px) {
#news-box {
width:98%;
float:none;
}
}
#news span.news-summary {
color:#444;
}
#news h2.home-news {
color:#444;
}
#news h3.home-news {
color:#444;
}
@media (prefers-color-scheme: dark) {
.news-area {
background: -webkit-linear-gradient(15deg, #1c1c05, #000000);
background: -o-linear-gradient(150deg, #1c1c05, #000000);
background: -moz-linear-gradient(150deg, #1c1c05, #000000);
background: linear-gradient(150deg, #1c1c05, #000000);
}
#news span.news-summary {
color:#bbb;
}
#news h2.home-news {
color:#bbb;
}
#news h3.home-news {
color:#bbb;
}
}

/* Styles used in the blog */
#blog b {
color:#363;
}
#blog img.doc-image {
padding-top:10px;
padding-bottom:25px;
}
#blog p img {
padding-top:0px;
padding-bottom:0px;
max-width:100%;
}
#blog-date-stamp {
float:right;
background:#E6F4DB;
border: 5px solid #E6F4DB;
}
.blog-date {
background:#E6F4DB;
border: 5px solid #E6F4DB;
}
.blog-title a {
text-decoration:none;
color:#55387B ! important;
/*font-size:1.4em;*/
font-weight:bold;
}
.blog-title a:hover {
color:#d40 ! important;
}
.blog-title-small a {
text-decoration:none;
color:#55387B ! important;
font-weight:bold;
}
.blog-title-small a:hover,
.blog-title-small h4:hover
{
color:#d40 ! important;
}
div.blog-title-small {
padding-bottom:10px;
}
hr.blog-hr {
background-color:#ddd;
border-style:none;
height:5px;
margin-bottom:10px;
}
#blog ul p {
padding-bottom: 0px;
padding-top: 15px;
}
.side-bar, #side-bar {
width:30%;
float:right;
background:#FFFFF2;
padding:10px;
padding-top:0px;
box-shadow: 2px 0px 4px 4px #F0F0F0;
margin-left:20px;
}
.side-bar h4, .side-bar h3, .side-bar h2, .side-bar h1 {
text-align:center;
padding:10px;
}
iframe.video {
box-shadow: 4px 4px 4px 4px #DDDDDD;
}
#side-bar strong {
/*font-size:1.1em;*/
text-align:center;
padding:20px;
float:center;
color:#55387B;
}
#side-bar {
padding-top:10px;
padding-bottom:0px;
margin-bottom:20px;
}

@media (prefers-color-scheme: dark) {
#blog b {
color:#aca;
}
#blog-date-stamp {
background:#16240b;
border: 5px solid #16240b;
}
.blog-date {
background:#16240b;
border: 5px solid #16240b;
}
.blog-title a {
color:#a578cb ! important;
}
.blog-title a:hover {
color:#920 ! important;
}
.blog-title-small a {
color:#a578cb ! important;
}
.blog-title-small a:hover,
.blog-title-small h4:hover
{
color:#920 ! important;
}
hr.blog-hr {
background-color:#444;
}
.side-bar, #side-bar {
background:#111102;
box-shadow: 2px 0px 4px 4px #101010;
}
iframe.video {
box-shadow: 4px 4px 4px 4px #444444;
}
#side-bar strong {
color:#a578cb;
}
}

/* Items to highlight and fade messages */
@keyframes fader-red {
  0% {
    background: none;
  }
  30% {
    background: #ffe1e1;
  }
  100% {
    background: none;
  }
}

.error-and-fade {
  animation: fader-red 5s;
}

@keyframes fader-green {
  0% {
    background: none;
  }
  30% {
    background: #e1ffe1;
  }
  100% {
    background: none;
  }
}

.info-and-fade {
  animation: fader-green 5s;
}

/* Error box */
.error-box {
color:#444;
padding-left:8px;
background-color:#fcffd9;
padding-right:10px;
padding-top:8px;
padding-bottom:8px;
padding-left:10px;
border-left: 5px solid #BB3333;
margin-left:0px;
margin-right:10px;
margin-top:15px;
margin-bottom:10px;
}
.error-box b {
color:#ED0000;
}
@media (prefers-color-scheme: dark) {
.error-box {
color:#ddd;
background-color:#3c3f09;
border-left: 5px solid #881111;
}
.error-box b {
color:#1D0000;
}
}

/* Info box */
.info-box {
color:#444;
padding-left:8px;
background-color:#fcffd9;
padding-right:10px;
padding-top:8px;
padding-bottom:8px;
padding-left:10px;
border-left: 4px solid #339933;
margin-left:0px;
margin-right:10px;
margin-top:15px;
margin-bottom:10px;
}
.info-box b {
color:#339933;
}
@media (prefers-color-scheme: dark) {
.info-box {
color:#ddd;
background-color:#2b240c;
border-left: 4px solid #115511;
}
.info-box b {
color:#e864a2;
}
}

/* Styles for support page */
#support-main strong {
color: #55387B;
}
#qa-iframe {
margin: 0px;
padding: 0px;
border: none;
width:100%;
height:800px;
}
@media (prefers-color-scheme: dark) {
#support-main strong {
color: #a578cb;
}
}

/* Styles for downloads pages */
#downloads-compare {
}
#download-pro {
display:inline-block;
vertical-align:top;
width:30%;
height:100%;
padding-right:20px;
padding-left:10px;
min-width:200px;
}
#download-personal {
display:inline-block;
vertical-align:top;
width:30%;
height:100%;
padding-right:20px;
min-width:200px;
}
#download-101 {
display:inline-block;
vertical-align:top;
width:30%;
height:100%;
min-width:200px;
}
@media only screen and (max-width: 693px) {
#download-101 {
padding-top:20px;
padding-left:10px;
min-width:230px;
}
}
@media only screen and (max-width: 489px) {
#download-personal {
padding-top:20px;
padding-left:10px;
min-width:230px;
}
}

#get-pro-button, #get-personal-button, #get-101-button {
position:relative;
width:180px;
padding: 10px 10px;
margin-top:20px;
z-index:2;
}
#download-box {
float:right;
width:40%;
padding-left:25px;
min-height:200px;
max-width:300px;
}
#download-title {
display:block;
}
@media only screen and (max-width: 600px) {
#download-box {
float:none;
padding-left:0px;
width:100%;
max-width:none;
}
div.download-box-other {
display:none;
}
.download-spec-title {
font-size:1.2em;
}
}
#download-narrow-box {
max-width:300px;
}
div.download-button {
border-top: 1px solid #e5f3fc;
background: var(--color-success-deep);
padding: 15px 15px;
border-radius: 12px;
color: white;
vertical-align: middle;
text-align: center;
opacity:0.95;
max-width:300px;
}
@media only screen and (max-width: 579px) {
div.download-button {
}
}
div.download-sha {
padding-top:5px;
max-width:300px;
white-space:nowrap;
}
div.download-sha1 {
font-size:0.82em;
}
.download-sha256 {
display: block;
max-width: 300px;
font-family: monospace;
font-size:0.78em;
cursor:pointer;
text-decoration:underline dotted;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.download-sha256:hover {
text-decoration:underline;
}
.sha-modal-content {
margin: 0 auto;
background-color: #fff;
color: #222;
padding: 24px 28px;
max-width: 640px;
width: 90%;
box-sizing: border-box;
border-radius: 8px;
text-align: center;
box-shadow: 0 4px 24px rgba(0,0,0,0.3);
animation-name: zoom;
animation-duration: 0.2s;
}
.sha-modal-label {
font-size: 0.95em;
margin-bottom: 10px;
color: #555;
}
.sha-modal-hash {
font-family: monospace;
font-size: 1.05em;
word-break: break-all;
line-height: 1.5;
margin: 12px 0 18px 0;
padding: 10px;
background: #f4f4f4;
border-radius: 4px;
user-select: all;
}
.sha-modal-copy {
font-weight: bold;
text-decoration: underline;
cursor: pointer;
}
.sha-modal-copy:hover {
text-decoration: none;
}
@media (prefers-color-scheme: dark) {
.sha-modal-content {
background-color: #2a2a2a;
color: #e0e0e0;
box-shadow: 0 4px 24px rgba(255,255,255,0.15);
}
.sha-modal-label {
color: #bbb;
}
.sha-modal-hash {
background: #1a1a1a;
color: #e0e0e0;
}
}
div.download-button:hover {
opacity: 0.85;
cursor: pointer;
}
div.download-button:active {
border-top-color: var(--color-success-strong);
background: var(--color-success-strong);
}
span.download-button-text {
/*font-size:1.2em;*/
font-weight:bold;
text-shadow: 0px 1px 1px #555;
}
span.download-button-subtext {
/*font-size:1.0em;*/
text-shadow: 0px 1px 1px #555;
}
.download-link {
/*font-size:1.05em;*/
}
.download-link a {
text-decoration: none;
}
.download-requirements {
text-align:center;
float:center;
width:100%;
}
#download-table {
width:65%
}
#download-table td {
vertical-align:top;
padding:10px;
}
#download-source {
width:40%;
margin-bottom:-15px;
}
#download-source td {
padding:5px;
}
#download-quote {
width:55%;
}
@media only screen and (max-width: 579px) {
#download-quote {
width:98%;
}
}
@media (prefers-color-scheme: dark) {
div.download-button {
border-top: 1px solid #00ab77;
background: #0C6F10;
color: #333;
}
div.download-button:active {
border-top-color: #e5f3fc;
background: #e5f3fc;
}
span.download-button-text {
color:white;
text-shadow: 0px 1px 1px #555;
}
span.download-button-subtext {
color:#eecc00;
text-shadow: 0px 1px 1px #555;
}
}

/* +1 social media areas */
.social-top {
float:right;
margin-top:2px;
}
.social-home {
margin-top:20px;
}
.blog-date-with-social {
float:right;
background:#E6F4DB;
border: 5px solid #E6F4DB;
}
.blog-social-with-date {
float:left;
margin-right:10px;
margin-top:2px;
}
.blog-social-and-date-stamp {
float:right;
}
.blog-social-top {
margin-top:-5px;
float:right;
}
.blog-social-article {
float:center;
width:100%;
}
.social-table {
table-layout:auto;
}
.fb-like, .tweet, .gplus-wrapper {
float:left;
margin-left:3px;
}
@media (prefers-color-scheme: dark) {
.blog-date-with-social {
background:#26340b;
border: 5px solid #26340b;
}
}

.upgrades-store-tab {
text-decoration:none;
font-weight:bold;
font-size:102%;
margin-bottom:-2px;
float:right;
}
@media only screen and (max-width: 800px) {
.upgrades-store-tab {
display:none;
}
}
b.licensed-use {
color: #55387B;
font-size:140%;
}
@media (prefers-color-scheme: dark) {
b.licensed-use {
color: #44a835;
}
}

/* Product box for store */
.product-box {
color:#444;
max-width:90%;
width:390px;
height:45ex;
float:left;
/*border-left:3px solid #e6e6fa;*/
margin-left:50px;
}
.product-box-annual {
margin-left:-5px;
width:350px;
/*border-left: 3px solid #E7F9D7;*/
}
.product-box h3 {
height:35px;
margin-left:10px;
}
@media only screen and (max-width: 830px) {
.product-box {
padding-top:20px;
margin-left:-8px;
margin-right:50px;
margin-top:20px;
max-height:52ex;
}
.product-box-annual {
max-height:40ex;
}
.product-box-annual ul {
max-height:20ex;
}
}
.product-blurb {
/*height:8ex;*/
font-size:114%;
color:#55387B;
margin-top:10px;
margin-bottom:20px;
}
.license-region {
font-size:145%;
font-weight:bold;
color:#55387B;
}
/*@media only screen and (max-width: 830px) {
.product-blurb {
height:auto;
}
}*/
.product-box b {
color:#333;
}
.product-box ul {
margin-left:7px;
margin-top:10px;
height:20ex;
}
.product-box div.price {
clear:left;
padding-bottom:5px;
/*font-size:80%;*/
}
span.orange {
color:#d40;
}
.price-amt {
color:var(--color-text-strong);
font-weight:600;
}
/* Skip-to-content link: visually hidden until keyboard-focused.
   Uses the classic clip-rect pattern so positioning is safe regardless
   of how the container is laid out (top:-40px relative to container can
   leak into the header area on pages where the container starts below
   the header). */
.skip-link {
position:absolute;
width:1px;
height:1px;
overflow:hidden;
clip:rect(0 0 0 0);
white-space:nowrap;
}
.skip-link:focus {
position:fixed;
top:0;
left:0;
width:auto;
height:auto;
clip:auto;
padding:8px 16px;
background:#55387B;
color:#fff;
text-decoration:none;
z-index:10000;
}

/* Replacements for deprecated bgcolor= and font color= attributes */
.admin-cell-alt {
background:#eeefff;
}
.field-error-bg {
background:#ffcccc;
}
.required-marker {
color:#ff0000;
}
.primary-key-label {
color:#dd3333;
}
.nav-inactive {
font-size:smaller;
}

/* Wing 12 store front page: 3-column compare-and-buy layout */
.store-tiers {
display:flex;
flex-direction:row;
flex-wrap:wrap;
gap:20px;
margin-top:20px;
margin-bottom:20px;
align-items:stretch;
}
.store-tier-column {
flex:1 1 280px;
min-width:280px;
padding:28px;
border:1px solid var(--color-border);
border-radius:var(--radius-lg);
background:var(--bg-surface);
box-shadow:var(--shadow-sm);
box-sizing:border-box;
display:flex;
flex-direction:column;
transition:border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.store-tier-column:hover {
border-color:var(--color-brand);
transform:translateY(-2px);
box-shadow:var(--shadow-md);
}
.tier-free-trial {
background:var(--color-success-soft);
border-color:transparent;
}
.tier-classic {
background:var(--bg-surface);
border-color:transparent;
}
/* Keep the borderless look on hover too -- only Wing Pro should frame. */
.tier-free-trial:hover,
.tier-classic:hover {
border-color:transparent;
}
.tier-pro {
background:var(--color-brand-soft);
border-color:var(--color-brand);
position:relative;
}
/* "Recommended" pill above the Wing Pro column -- pulls the eye to the
   conversion target without changing the column heights. */
.tier-pro::before {
content:"Recommended";
position:absolute;
top:-12px;
left:50%;
transform:translateX(-50%);
background:var(--color-brand);
color:#fff;
padding:4px 14px;
border-radius:var(--radius-xl);
font-size:11px;
font-weight:700;
letter-spacing:0.08em;
text-transform:uppercase;
white-space:nowrap;
}
/* Specificity-bumped under .redesign-page .page-body so it wins against
   the page-body's prose h2 default (margin:40px 0 16px) -- otherwise
   tier-column titles get pushed way down inside the box. */
.redesign-page .page-body .store-tier-column h2 {
margin:0 0 12px;
color:var(--color-text-strong);
font-family:varela_round, Inter, sans-serif;
}
.tier-price-line {
margin-bottom:10px;
}
.tier-price-headline {
font-size:140%;
font-weight:700;
color:var(--color-accent);
}
/* Free Trial column: $0 reads as a positive ("free") signal, not a price */
.store-tier-column.tier-free-trial .tier-price-headline {
color:var(--color-success);
}
/* Specificity bumped via body.page + .store-tier-column so we win
   against .redesign-page .page-body ul (padding-left:24px).  Bullet
   replaced with a green checkmark at the left edge so the list aligns
   with the paragraph above. */
body.page .store-tier-column ul.tier-feature-list {
list-style:none;
margin:10px 0 15px 0;
padding-left:0;
flex-grow:1;
}
body.page .store-tier-column ul.tier-feature-list li {
margin-bottom:4px;
padding-left:1.5em;
position:relative;
}
body.page .store-tier-column ul.tier-feature-list li::before {
content:"\2713";
position:absolute;
left:0;
top:0;
color:var(--color-success);
font-weight:700;
}
.tier-cta {
margin-top:auto;
text-align:center;
padding-top:15px;
}
body.page a.tier-cta-button,
body.page a.tier-cta-button:link,
body.page a.tier-cta-button:visited {
display:inline-block;
padding:12px 24px;
background:var(--color-brand);
color:#fff;
border-radius:var(--radius-md);
text-decoration:none;
font-weight:600;
}
body.page a.tier-cta-button:hover {
background:var(--color-brand-strong);
color:#fff;
text-decoration:none;
}
.prod-submit-large {
display:inline-block;
padding:12px 24px;
background:var(--color-success-deep);
color:#fff;
border:none;
border-radius:var(--radius-md);
font-weight:600;
font-size:105%;
cursor:pointer;
}
.prod-submit-large:hover {
background:var(--color-success-strong);
}
.tier-footnote-line {
margin:1.5em 0 1em;
font-size:85%;
color:var(--color-text-soft);
}
.tier-sku-row {
display:flex;
flex-wrap:wrap;
align-items:center;
gap:8px;
padding:8px 0;
border-top:1px solid #e0e0e0;
}
.tier-sku-row:first-of-type {
border-top:none;
}
.tier-sku-term {
flex:1 1 100%;
font-weight:600;
color:var(--color-text);
}
.tier-sku-term b {
font-weight:inherit;
}
.tier-sku-price {
flex:1 1 auto;
color:var(--color-text-strong);
font-weight:600;
}
.tier-sku-qty {
display:flex;
align-items:center;
gap:4px;
}
.tier-sku-qty-label {
font-size:90%;
color:#666;
}
.tier-sku-qty input {
width:40px;
}
.prod-submit {
padding:5px 12px;
background:#55387B;
color:#fff;
border:none;
border-radius:3px;
cursor:pointer;
}
.prod-submit:hover {
background:#6a4a99;
}
.store-footer {
margin-top:20px;
font-size:95%;
}
.store-blurb {
margin-top:15px;
font-size:90%;
color:#666;
}
.dropdown-divider {
height:1px;
background:#ddd;
margin:5px 10px;
}
@media only screen and (max-width: 830px) {
.store-tiers {
flex-direction:column;
}
.store-tier-column {
flex:1 1 auto;
}
}

.price-regular {
  position: relative;
}
.price-regular::after {
  border-bottom: 0.08em solid black;
  content: "";
  left: 0;
  margin-top: calc(0.08em / 2 * -1);
  position: absolute;
  right: 0;
  top: 50%;
}
@media only screen and (max-width: 830px) {
.product-box div.empty-price {
display:none;
}
}
.product-box input {
margin-left:10px;
}
@media (prefers-color-scheme: dark) {
.product-blurb {
color:#a478cb;
}
.price-regular::after {
  border-bottom: 0.08em solid #ddd;
}
.product-box input {
background-color:#444;
color:#eee;
border:none;
}
}
.product-box input.prod-submit {
text-align:center;
float:center;
margin-top:20px;
}
@media only screen and (max-width: 830px) {
.product-box input.prod-submit {
margin-top:0px;
}
}
#special-offers {
margin-bottom:200px;
}
#special-offers p {
padding-bottom:30px;
}
.special-class {
color:#55387B;
font-size:110%;
font-weight:bold;
}
.special-discount {
color:#d40;
font-weight:bold;
}
.special-offer {
width:300px;
display:inline-block;
vertical-align:top;
margin-right:30px;
}
.special-offer p {
padding-top:20px;
}
.free-product-box {
position:relative;
max-width:100%;
margin-left:auto;
margin-right:auto;
margin-top:0px;
padding-top:20px;
padding-bottom:20px;
background: #F7FFE7;
background: -webkit-linear-gradient(150deg, #F7FFE7, #FFFFFF);
background: -o-linear-gradient(150deg, #F7FFE7, #FFFFFF);
background: -moz-linear-gradient(150deg, #F7FFE7, #FFFFFF);
background: linear-gradient(150deg, #F7FFE7, #FFFFFF);
}
.store-blurb {
padding-top:55px;
clear:left;
}
div.store-left-col {
width:60%;
}
div.store-float-right {
position:relative;
float:right;
margin-top:2.5em;
padding-left: 10px;
padding-top: 0px;
padding-bottom: 10px;
padding-right:0px;
min-width:200px;
width:35%;
z-index:100;
border-left:1px solid #c0c0c0;
border-top:1px solid #c0c0c0;
border-right:1px solid #c0c0c0;
border-bottom:1px solid #c0c0c0;
background:#f3fcfa;
}
@media only screen and (max-width: 749px) {
div.store-float-right {
float:none;
width:65%;
margin-top:0px;
}
}
@media only screen and (max-width: 500px) {
div.store-float-right {
width:98%;
}
}
@media (prefers-color-scheme: dark) {
.special-class {
color:#B26CEC;
}
div.store-float-right {
border-left:1px solid #505050;
border-top:1px solid #505050;
border-right:1px solid #505050;
border-bottom:1px solid #505050;
background:#232c2a;
}
}

div.currency-selector {
  /*font-size:90%;*/
}
.currency-other-button {
  background: var(--bg-surface);
  color: var(--color-text);
  padding: 4px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.currency-dropdown {
  position: relative;
  display: inline-block;
}
.currency-other-list {
  display: none;
  position: absolute;
  background: var(--bg-surface);
  min-width: 260px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  z-index: 1;
}
.currency-other-list a {
  color: var(--color-text);
  padding: 6px 10px;
  text-decoration: none;
  display: block;
}
.currency-other-list a:hover {
  background: var(--color-brand-soft);
  color: var(--color-brand);
}
.currency-dropdown:hover .currency-other-list { display: block; }
.currency-dropdown:hover .currency-other-button {
  background: var(--color-brand-soft);
  border-color: var(--color-brand);
}

.col-info-button {
margin-top:3px;
}
.col-info-popup {
width:100%;
max-width:500px;
margin-left:-100px;
}
@media only screen and (max-width: 500px) {
.col-info-popup {
width:100%;
}
}

textarea {
width:98%;
max-width:800px;
}
#discount-field {
margin-bottom:5px;
}
@media (prefers-color-scheme: dark) {
#discount-field {
background-color:#444;
color:#eee;
border:none;
}
input {
background-color:#444;
color:#eee;
border:none;
}
select {
background-color:#444;
color:#eee;
border:none;
}
textarea {
background-color:#444;
color:#eee;
border:none;
}
}
.adapt-size td {
vertical-align:top;
}
.adapt-size th {
vertical-align:bottom;
}
h2.adapt-size {
font-size:100%;
}
.align-bottom {
vertical-align:bottom;
}
img.letter-head {
max-width:99%;
}
.adapt-size {
max-width:99%;
}
@media only screen and (max-width: 399px) {
.adapt-size {
font-size:95%;
}
.adapt-size input {
font-size:65%;
}
}
@media only screen and (max-width: 324px) {
.adapt-size {
font-size:85%;
}
}

/* Eye candy images and figures on left or right.  Spacing is via margin
   (so the border/shadow hugs the image), not padding (which renders as
   the parent's background bleeding inside the border).  body.page prefix
   bumps specificity above .redesign-page .page-body img so the
   float-aware margin wins. */
body.page img.float-figure-right, body.page img.eye-candy-image {
  float: right;
  clear: right;
  max-width: 100%;
  margin: 4px 0 16px 24px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}
body.page img.float-figure-left, body.page img.eye-candy-image-left {
  float: left;
  clear: left;
  max-width: 100%;
  margin: 4px 24px 16px 0;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}
@media only screen and (max-width: 400px) {
img.unfloat-at-400 {
float:none;
padding-left:0px;
}
}
@media only screen and (max-width: 500px) {
img.unfloat-at-500 {
float:none;
padding-left:0px;
}
}
@media only screen and (max-width: 600px) {
img.unfloat-at-600 {
float:none;
padding-left:0px;
}
}
@media only screen and (max-width: 700px) {
img.unfloat-at-700 {
float:none;
padding-left:0px;
}
}
@media only screen and (max-width: 900px) {
img.unfloat-at-900 {
float:none;
padding-left:0px;
}
}

/* Features page */
#feature-selector {
display:inline-block;
max-width:60%;
clear:all;
}
@media only screen and (max-width: 724px) {
#feature-selector {
max-width:99%;
}
}
@media only screen and (max-width: 724px) and (min-width: 360px) {
#feature-image {
display:none;
}
}
table.feature-title-table {
padding-left:0px;
margin-top:10px;
opacity:0.90;
}
table.feature-title-table tr td {
border-bottom:2px solid #f0f0f0;
padding:0px;
}
h2.feature-title, h2.feature-title-disabled {
color:#55387B;
padding-left:0px;
/*font-size:1.3em;*/
font-weight:bold;
}
table.feature-title-table img {
padding:5px;
-webkit-filter: drop-shadow 1px 1px 1px #CCC;
filter: drop-shadow(1px 1px 1px #CCC);
}
h2.feature-title-disabled, img.feature-title-disabled {

opacity:0.50;
}
.feature-disabled {

-khtml-opacity:0.40;
opacity:0.40;
}
.feature-table tr td {
padding-right:20px;
width:50%;
}
.feature-item {
display:inline-block;
vertical-align:top;
float_left;
width:48%;
padding-bottom:0.6em;
}
@media only screen and (max-width: 579px) {
.feature-item {
width:98%;
}
}
.feature-item span {
line-height:95%;
width:98%;
}



/* Documentation */
.doc-product a {
text-decoration:none;
}
div.doc-product {
float:right;
margin-left:20px;
margin-bottom:20px;
}
div.doc-nav-footer {
width:100%;
clear:both;
margin-bottom:20px;
}
img.doc-image {
margin-top:5px;
margin-bottom:20px;
-webkit-filter: drop-shadow 5px 5px 8px #888);
filter: drop-shadow(5px 5px 8px #888);
}
@media (prefers-color-scheme: dark) {
img.doc-image {
-webkit-filter: drop-shadow 0px 0px 8px #888);
filter: drop-shadow(0px 0px 8px #888);
}
}
img.inline-image {
}
div.doc-nav-left {
float:left;
width:35%;
text-align:left;
margin-bottom:20px;
}
div.doc-nav-center {
float:left;
width:20%;
text-align:center;
margin-left:5%;
margin-bottom:20px;
}
div.doc-nav-right {
float:right;
width:35%;
text-align:right;
margin-bottom:20px;
}
h3.title-3 {
margin-top:1.0em;
margin-bottom:0.5em;
}
h4.title-4 {
margin-top:0em;
margin-bottom:0em;
}
@media (prefers-color-scheme: dark) {
strong {
color:#5084d5;
}
h3.title-3 {
color:#5084d5;
}
}

/* Additions for success stories */
.content table.docinfo {
  width: 99%;
  padding-top: 0px;
  padding-bottom: 0px;
  margin-bottom:1.1em;
  padding-left: 10px;
  border-left:2px solid #339933;
}
.content th.docinfo-name {
  text-align: right;
  padding-right: 10px;
}
.content table.story-summary {
  padding-bottom: 0px;
  margin-bottom: 0px;
}
.content h1.story-title {
  margin-bottom: 0.5em;
}

/* Items to hide */
/* Hide VCard attributes */
.vcard {
  display:none;
}
#post-footer {
padding-bottom:0px;
}
/* Hiding stuff is more accessible than display:none; */
.clearfix,
#footer p,
#highlight ul,
.content ul.product-links,
.holder,
#footer
{overflow:hidden;}
#accessibility,
#navigation h3,
#branding h1,
#branding h2,
#navigation form label,
.hidevis
{
position:absolute;
top:0;
left:-90000px;
visibility:hidden;
height:0;
width:0;
}
.admin-tasks {
font-size:90%
}


.python-highlight { background: #fefef5; margin-bottom: 25px; font-size:110%; }
.python-highlight pre { background: #fefef5; padding:10px; }
.python-highlight .hll { background-color: #ffffcc; }
.python-highlight .c { color: #008800; font-style: italic; } /* Comment */
.python-highlight .err { border: 1px solid #FF0000; } /* Error */
.python-highlight .k { color: #8822DD; font-weight: bold; } /* Keyword */
.python-highlight .o { color: #666666; } /* Operator */
.python-highlight .ch { color: #008800; font-style: italic; } /* Comment.Hashbang */
.python-highlight .cm { color: #008800; font-style: italic; } /* Comment.Multiline */
.python-highlight .cp { color: #008800; } /* Comment.Preproc */
.python-highlight .cpf { color: #008800; font-style: italic; } /* Comment.PreprocFile */
.python-highlight .c1 { color: #008800; font-style: italic; } /* Comment.Single */
.python-highlight .cs { color: #008800; font-weight: bold; } /* Comment.Special */
.python-highlight .gd { color: #A00000; } /* Generic.Deleted */
.python-highlight .ge { font-style: italic; } /* Generic.Emph */
.python-highlight .gr { color: #FF0000; } /* Generic.Error */
.python-highlight .gh { color: #000080; font-weight: bold; } /* Generic.Heading */
.python-highlight .gi { color: #00A000; } /* Generic.Inserted */
.python-highlight .go { color: #888888; } /* Generic.Output */
.python-highlight .gp { color: #000080; font-weight: bold; } /* Generic.Prompt */
.python-highlight .gs { font-weight: bold; } /* Generic.Strong */
.python-highlight .gu { color: #800080; font-weight: bold; } /* Generic.Subheading */
.python-highlight .gt { color: #0044DD; } /* Generic.Traceback */
.python-highlight .kc { color: #8822DD; font-weight: bold; } /* Keyword.Constant */
.python-highlight .kd { color: #8822DD; font-weight: bold; } /* Keyword.Declaration */
.python-highlight .kn { color: #8822DD; font-weight: bold; } /* Keyword.Namespace */
.python-highlight .kp { color: #8822DD; } /* Keyword.Pseudo */
.python-highlight .kr { color: #8822DD; font-weight: bold; } /* Keyword.Reserved */
.python-highlight .kt { color: #00BB00; font-weight: bold; } /* Keyword.Type */
.python-highlight .m { color: #666666; } /* Literal.Number */
.python-highlight .n { } /* No style */
.python-highlight .s { color: #BB4444; } /* Literal.String */
.python-highlight .p { color: #00A000; font-weight: bold; } /* Parenthesis/brackets/etc */
.python-highlight .na { color: #BB4444; } /* Name.Attribute */
.python-highlight .nb { color: #3322FF; } /* Name.Builtin */
.python-highlight .nc { color: #0000FF; font-weight: bold; } /* Name.Class */
.python-highlight .no { color: #880000; } /* Name.Constant */
.python-highlight .nd { color: #8822DD; } /* Name.Decorator */
.python-highlight .ni { color: #999999; font-weight: bold; } /* Name.Entity */
.python-highlight .ne { color: #D2413A; font-weight: bold; } /* Name.Exception */
.python-highlight .nf { color: #00A000; font-weight: bold; } /* Name.Function */
.python-highlight .nl { color: #A0A000; } /* Name.Label */
.python-highlight .nn { color: #0000FF; } /* Name.Namespace */
.python-highlight .nt { color: #008000; font-weight: bold; } /* Name.Tag */
.python-highlight .nv { color: #B8860B; } /* Name.Variable */
.python-highlight .ow { color: #8822DD; font-weight: bold; } /* Operator.Word */
.python-highlight .w { color: #bbbbbb; } /* Text.Whitespace */
.python-highlight .mb { color: #666666; } /* Literal.Number.Bin */
.python-highlight .mf { color: #666666; } /* Literal.Number.Float */
.python-highlight .mh { color: #666666; } /* Literal.Number.Hex */
.python-highlight .mi { color: #666666; } /* Literal.Number.Integer */
.python-highlight .mo { color: #666666; } /* Literal.Number.Oct */
.python-highlight .sa { color: #BB4444; } /* Literal.String.Affix */
.python-highlight .sb { color: #BB4444; } /* Literal.String.Backtick */
.python-highlight .sc { color: #BB4444; } /* Literal.String.Char */
.python-highlight .dl { color: #BB4444; } /* Literal.String.Delimiter */
.python-highlight .sd { color: #BB4444; font-style: italic; } /* Literal.String.Doc */
.python-highlight .s2 { color: #BB4444; } /* Literal.String.Double */
.python-highlight .se { color: #BB6622; font-weight: bold; } /* Literal.String.Escape */
.python-highlight .sh { color: #BB4444; } /* Literal.String.Heredoc */
.python-highlight .si { color: #BB6688; font-weight: bold; } /* Literal.String.Interpol */
.python-highlight .sx { color: #008000; } /* Literal.String.Other */
.python-highlight .sr { color: #BB6688; } /* Literal.String.Regex */
.python-highlight .s1 { color: #BB4444; } /* Literal.String.Single */
.python-highlight .ss { color: #B8860B; } /* Literal.String.Symbol */
.python-highlight .bp { color: #8822DD; font-weight:bold; } /* Name.Builtin.Pseudo */
.python-highlight .fm { color: #00A000; } /* Name.Function.Magic */
.python-highlight .vc { color: #B8860B; } /* Name.Variable.Class */
.python-highlight .vg { color: #B8860B; } /* Name.Variable.Global */
.python-highlight .vi { color: #B8860B; } /* Name.Variable.Instance */
.python-highlight .vm { color: #B8860B; } /* Name.Variable.Magic */
.python-highlight .il { color: #666666; } /* Literal.Number.Integer.Long */

@media (prefers-color-scheme: dark) {
.python-highlight { background: #20242a; margin-bottom: 25px; font-size:110%; }
.python-highlight pre { background: #20242a; padding:10px; }
.python-highlight .hll { background-color: #333311; }
.python-highlight .c { color: #7b8290; font-style: italic; } /* Comment */
.python-highlight .err { border: 1px solid #FF0000; } /* Error */
.python-highlight .k { color: #c776df; font-weight: bold; } /* Keyword */
.python-highlight .o { color: #e5c07b; } /* Operator */
.python-highlight .ch { color: #7b8290; font-style: italic; } /* Comment.Hashbang */
.python-highlight .cm { color: #7b8290; font-style: italic; } /* Comment.Multiline */
.python-highlight .cp { color: #7b8290; } /* Comment.Preproc */
.python-highlight .cpf { color: #7b8290; font-style: italic; } /* Comment.PreprocFile */
.python-highlight .c1 { color: #7b8290; font-style: italic; } /* Comment.Single */
.python-highlight .cs { color: #7b8290; font-weight: bold; } /* Comment.Special */
.python-highlight .gd { color: #A00000; } /* Generic.Deleted */
.python-highlight .ge { font-style: italic; } /* Generic.Emph */
.python-highlight .gr { color: #FF0000; } /* Generic.Error */
.python-highlight .gh { color: #000080; font-weight: bold; } /* Generic.Heading */
.python-highlight .gi { color: #00A000; } /* Generic.Inserted */
.python-highlight .go { color: #888888; } /* Generic.Output */
.python-highlight .gp { color: #000080; font-weight: bold; } /* Generic.Prompt */
.python-highlight .gs { font-weight: bold; } /* Generic.Strong */
.python-highlight .gu { color: #800080; font-weight: bold; } /* Generic.Subheading */
.python-highlight .gt { color: #0044DD; } /* Generic.Traceback */
.python-highlight .kc { color: #e16971; font-weight: bold; } /* Keyword.Constant */
.python-highlight .kd { color: #e16971; font-weight: bold; } /* Keyword.Declaration */
.python-highlight .kn { color: #e16971; font-weight: bold; } /* Keyword.Namespace */
.python-highlight .kp { color: #e16971; } /* Keyword.Pseudo */
.python-highlight .kr { color: #e16971; font-weight: bold; } /* Keyword.Reserved */
.python-highlight .kt { color: #00BB00; font-weight: bold; } /* Keyword.Type */
.python-highlight .m { color: #c49261; } /* Literal.Number */
.python-highlight .n { } /* No style */
.python-highlight .s { color: #96c474; } /* Literal.String */
.python-highlight .p { color: #93a1a1; font-weight: bold; } /* Parenthesis/brackets/etc */
.python-highlight .na { color: #96c474; } /* Name.Attribute */
.python-highlight .nb { color: #56b6c2; } /* Name.Builtin */
.python-highlight .nc { color: #61afef; font-weight: bold; } /* Name.Class */
.python-highlight .no { color: #880000; } /* Name.Constant */
.python-highlight .nd { color: #8822DD; } /* Name.Decorator */
.python-highlight .ni { color: #999999; font-weight: bold; } /* Name.Entity */
.python-highlight .ne { color: #D2413A; font-weight: bold; } /* Name.Exception */
.python-highlight .nf { color: #93a1a1; font-weight: bold; } /* Name.Function */
.python-highlight .nl { color: #A0A000; } /* Name.Label */
.python-highlight .nn { color: #61afef; } /* Name.Namespace */
.python-highlight .nt { color: #008000; font-weight: bold; } /* Name.Tag */
.python-highlight .nv { color: #B8860B; } /* Name.Variable */
.python-highlight .ow { color: #8822DD; font-weight: bold; } /* Operator.Word */
.python-highlight .w { color: #bbbbbb; } /* Text.Whitespace */
.python-highlight .mb { color: #c49261; } /* Literal.Number.Bin */
.python-highlight .mf { color: #c49261; } /* Literal.Number.Float */
.python-highlight .mh { color: #c49261; } /* Literal.Number.Hex */
.python-highlight .mi { color: #c49261; } /* Literal.Number.Integer */
.python-highlight .mo { color: #c49261; } /* Literal.Number.Oct */
.python-highlight .sa { color: #96c474; } /* Literal.String.Affix */
.python-highlight .sb { color: #96c474; } /* Literal.String.Backtick */
.python-highlight .sc { color: #96c474; } /* Literal.String.Char */
.python-highlight .dl { color: #96c474; } /* Literal.String.Delimiter */
.python-highlight .sd { color: #96c474; font-style: italic; } /* Literal.String.Doc */
.python-highlight .s2 { color: #96c474; } /* Literal.String.Double */
.python-highlight .se { color: #BB6622; font-weight: bold; } /* Literal.String.Escape */
.python-highlight .sh { color: #96c474; } /* Literal.String.Heredoc */
.python-highlight .si { color: #BB6688; font-weight: bold; } /* Literal.String.Interpol */
.python-highlight .sx { color: #008000; } /* Literal.String.Other */
.python-highlight .sr { color: #BB6688; } /* Literal.String.Regex */
.python-highlight .s1 { color: #96c474; } /* Literal.String.Single */
.python-highlight .ss { color: #B8860B; } /* Literal.String.Symbol */
.python-highlight .bp { color: #8822DD; font-weight:bold; } /* Name.Builtin.Pseudo */
.python-highlight .fm { color: #93a1a1; } /* Name.Function.Magic */
.python-highlight .vc { color: #B8860B; } /* Name.Variable.Class */
.python-highlight .vg { color: #B8860B; } /* Name.Variable.Global */
.python-highlight .vi { color: #B8860B; } /* Name.Variable.Instance */
.python-highlight .vm { color: #B8860B; } /* Name.Variable.Magic */
.python-highlight .il { color: #c49261; } /* Literal.Number.Integer.Long */
}


/* ============================================================
   Wing 12 redesign -- color tokens, typography, chrome, and
   homepage component styles.  Layered on top of legacy CSS.
   ============================================================ */
:root {
  --bg-page:        #fbf9f3;
  --bg-surface:     #ffffff;
  --bg-surface-alt: #f5f1e6;

  --color-text:        #2a2520;
  --color-text-soft:   #6a6258;
  --color-text-strong: #1a1612;

  --color-brand:        #5d3a82;
  --color-brand-soft:   #f3edf8;
  --color-brand-strong: #482a68;

  --color-accent:       #d04400;
  --color-accent-soft:  #fdebe2;

  --color-success:      #4f7a36;
  --color-success-soft: #edf3e1;
  --color-success-deep:   #3f6028;
  --color-success-strong: #2e4a1e;

  --color-warning:      #8c6d0b;
  --color-warning-soft: #fdf3d8;

  --color-border:        #e8e2d4;
  --color-border-strong: #d5cdb8;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  --shadow-sm: 0 1px 2px rgba(28, 22, 16, 0.04), 0 1px 3px rgba(28, 22, 16, 0.06);
  --shadow-md: 0 2px 4px rgba(28, 22, 16, 0.04), 0 4px 12px rgba(28, 22, 16, 0.08);

  --max-w: 1100px;
}

body.page {
  background: var(--bg-page);
  color: var(--color-text);
  font-size: 16px;
  line-height: 1.55;
}
body.page #container {
  background: transparent;
  max-width: none;
}
body.page h1, body.page h2, body.page h3, body.page h4 {
  color: var(--color-text-strong);
  line-height: 1.2;
}
body.page a { color: var(--color-brand); text-decoration: none; }
body.page a:hover { color: var(--color-brand-strong); text-decoration: underline; }

.redesign-container {
  max-width: var(--max-w);
  margin: 0 auto;
  /* Side gutter: kept narrow so content isn't boxed in on smaller screens
     (and so the collapsed header menu has more room before it wraps). */
  padding: 0 12px;
}

/* ============================================================ Site header (sticky thin chrome) ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  background: rgba(251, 249, 243, 0.92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-border);
  /* Above page-body content stacking contexts (e.g. .screenshot-holder
     at z-index:100) so dropdowns don't get covered by floated images. */
  z-index: 1000;
}
.site-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 12px;
  max-width: var(--max-w);
  margin: 0 auto;
}
.site-header .logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: varela_round, sans-serif;
  font-size: 22px;
  font-weight: 600;
  color: var(--color-text-strong);
  letter-spacing: -0.01em;
  text-decoration: none;
}
.site-header .logo:hover { text-decoration: none; }
.site-header .logo img {
  width: 32px;
  height: 32px;
  filter: drop-shadow(0 1px 2px rgba(85, 56, 123, 0.25));
}
.site-header .nav { display: flex; align-items: center; gap: 6px; }
/* Links group; margin-left:auto keeps the logo on the left and the links +
   actions hugged to the right on wide viewports. */
.site-header .nav-links { display: flex; align-items: center; gap: 6px; margin-left: auto; }
/* Hamburger toggle: hidden until the inline links collapse (narrow viewports). */
.site-header .nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--color-text-soft);
  border-radius: var(--radius-md);
  cursor: pointer;
  margin-left: 6px;
}
.site-header .nav-toggle:hover {
  color: var(--color-brand);
  background: var(--color-brand-soft);
}
.site-header .nav-links .nav-item {
  position: relative;
}
.site-header .nav-links a.nav-link,
.site-header .nav-links a.nav-link:link,
.site-header .nav-links a.nav-link:visited {
  color: var(--color-text);
  font-size: 15px;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: var(--radius-md);
  display: inline-block;
}
.site-header .nav-links a.nav-link:hover {
  color: var(--color-brand);
  background: var(--color-brand-soft);
  text-decoration: none;
}
.site-header .nav-links a.nav-link-selected {
  color: var(--color-brand);
}
.site-header .nav a.nav-search,
.site-header .nav a.nav-search:link,
.site-header .nav a.nav-search:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  color: var(--color-text-soft);
  margin-left: 6px;
}
.site-header .nav a.nav-search:hover {
  color: var(--color-brand);
  background: var(--color-brand-soft);
  text-decoration: none;
}
.site-header .nav a.nav-cta,
.site-header .nav a.nav-cta:link,
.site-header .nav a.nav-cta:visited {
  background: var(--color-brand);
  color: #fff;
  padding: 8px 16px;
  border-radius: var(--radius-md);
  font-weight: 600;
  margin-left: 12px;
}
.site-header .nav a.nav-cta:hover {
  background: var(--color-brand-strong);
  color: #fff;
}

/* Hover-triggered dropdown panels under nav items.  The ::before pseudo
   bridges the visual 4px gap so moving the mouse from the trigger to the
   panel never leaves the hover area. */
.site-header .nav-links .nav-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  background: var(--bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: 8px;
  margin-top: 4px;
  z-index: 110;
}
.site-header .nav-links .nav-dropdown::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 0;
  right: 0;
  height: 8px;
}
.site-header .nav-links .nav-has-dropdown:hover .nav-dropdown,
.site-header .nav-links .nav-has-dropdown:focus-within .nav-dropdown {
  display: block;
}
.site-header .nav-links .nav-dropdown a {
  display: block;
  padding: 8px 12px;
  color: var(--color-text);
  font-size: 14px;
  font-weight: 400;
  border-radius: var(--radius-sm);
  text-decoration: none;
}
.site-header .nav-links .nav-dropdown a:hover {
  background: var(--color-brand-soft);
  color: var(--color-brand);
  text-decoration: none;
}
.site-header .nav-links .nav-dropdown-divider {
  height: 1px;
  background: var(--color-border);
  margin: 6px 4px;
}

/* ============================================================ Hero ============================================================ */
.hero {
  /* 12px horizontal keeps the same side gutter as .redesign-container
     (whose 0-12px padding this shorthand would otherwise override), so the
     wide hero-sub paragraph doesn't run to the edge on narrow screens. */
  padding: 80px 12px 64px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 609px;
  height: 609px;
  background-image: url('/images/feather-with-shadow.svg');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  opacity: 0.28;
  /* Centered on the hero: with the screenshot card removed the hero is
     short, so the watermark is centered behind the content (overflow:hidden
     on .hero clips the part that extends past the section edges). */
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 0;
}

/* Sub-page hero variant (downloads, etc.): the section is much shorter
   than the home hero (no screenshot card sitting under the CTAs), so
   the homepage's translate(-111% ...) pushes the watermark almost
   entirely above the visible region.  Re-center it and shrink it so it
   reads as a watermark behind the content. */
.hero.hero-page {
  padding: 60px 12px 48px;
}
.hero.hero-page::before {
  /* Sized so the watermark reads clearly behind the content; the
     transform keeps the bottom edge stationary so the watermark grows
     upward when sized larger (background-size:contain on a square SVG
     means width and height are scaled together to keep aspect ratio). */
  width: 513px;
  height: 513px;
  transform: translate(-50%, calc(-50% + 7px));
  opacity: 0.28;
}
.hero > * {
  position: relative;
  z-index: 1;
}
.hero-eyebrow {
  display: inline-block;
  background: var(--color-success-soft);
  color: var(--color-success);
  font-size: 13px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: var(--radius-xl);
  margin-bottom: 24px;
  letter-spacing: 0.02em;
}
.hero h1 {
  font-size: 56px;
  letter-spacing: -0.02em;
  margin-bottom: 20px;
  font-family: varela_round, Inter, sans-serif;
}
.hero h1 em {
  font-style: normal;
  color: var(--color-brand);
}
.hero-sub {
  font-size: 19px;
  color: var(--color-text-soft);
  max-width: 700px;
  margin: 0 auto 36px;
  line-height: 1.5;
}
.hero-ctas {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  padding: 12px 24px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.btn.btn-primary,
.btn.btn-primary:link,
.btn.btn-primary:visited {
  background: var(--color-brand);
  color: #fff;
}
.btn.btn-primary:hover {
  background: var(--color-brand-strong);
  color: #fff;
  text-decoration: none;
}
.btn.btn-secondary,
.btn.btn-secondary:link,
.btn.btn-secondary:visited {
  background: var(--bg-surface);
  color: var(--color-text-strong);
  border-color: var(--color-border-strong);
}
.btn.btn-secondary:hover {
  background: var(--bg-surface-alt);
  color: var(--color-text-strong);
  text-decoration: none;
}
.btn-arrow::after { content: "\2192"; font-weight: 400; }

/* ============================================================ Section frames ============================================================ */
.redesign-section {
  padding: 88px 0;
}
.redesign-section.section-alt {
  background: var(--bg-surface-alt);
}
.section-header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 56px;
}
.section-eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-brand);
  margin-bottom: 14px;
}
.section-header h2 {
  font-size: 38px;
  letter-spacing: -0.01em;
  margin-bottom: 16px;
}
/* At desktop widths, let the h2 stay on one line even when slightly
   wider than the section-header's 720px max-width (text-align:center
   means overflow centers within the 1100px container).  Below this
   breakpoint the h2 wraps naturally inside the 720px box. */
@media (min-width: 1000px) {
  .section-header h2 { white-space: nowrap; }
}
.section-header p {
  font-size: 18px;
  color: var(--color-text-soft);
}

/* ============================================================ Feature cards ============================================================ */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}
.feature-card {
  position: relative;
  background: var(--bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 28px;
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.feature-card:hover {
  border-color: var(--color-brand);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.feature-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: var(--color-brand-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin-bottom: 18px;
}
.feature-icon.green { background: var(--color-success-soft); }
.feature-icon.orange { background: var(--color-accent-soft); }
.feature-card h3 {
  font-size: 20px;
  margin-bottom: 10px;
}
/* Make the whole card clickable via the title link (stretched link) */
.feature-card h3 a::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
/* The box-frame highlight is the hover affordance; don't underline the title */
.feature-card h3 a,
.feature-card h3 a:hover {
  text-decoration: none;
}
.feature-card p {
  color: var(--color-text-soft);
  font-size: 15px;
  margin: 0;
}

/* ============================================================ Applications grid (audience self-recognition) ============================================================ */
.applications-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}
.application-card {
  padding: 18px 22px;
  border-left: 3px solid var(--color-border);
  transition: border-left-color 0.15s;
}
.application-card:hover {
  border-left-color: var(--color-brand);
}
.application-card h3 {
  font-size: 17px;
  margin-bottom: 8px;
}
.application-card p {
  color: var(--color-text-soft);
  font-size: 14px;
  margin: 0;
  line-height: 1.55;
}

/* ============================================================ AI agent banner ============================================================ */
.ai-banner {
  background: linear-gradient(135deg, var(--color-brand-soft) 0%, var(--color-success-soft) 100%);
  border-radius: var(--radius-xl);
  padding: 56px 48px;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 48px;
  align-items: center;
}
.ai-banner-text h2 {
  font-size: 32px;
  margin-bottom: 16px;
}
/* Keep "Same work, fewer tokens, less time." on one line once there's
   room for it.  Below 900px the 2-col grid is too tight, so we let it
   wrap naturally; the mobile breakpoint at 768px flips to 1-col. */
@media (min-width: 900px) {
  .ai-banner-text h2 { white-space: nowrap; }
}
.ai-banner-text p {
  color: var(--color-text-soft);
  font-size: 17px;
  margin-bottom: 24px;
}
.ai-banner-visual {
  background: var(--bg-surface);
  border-radius: var(--radius-lg);
  padding: 24px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  line-height: 1.6;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}
.ai-banner-visual .prompt { color: var(--color-success); }
.ai-banner-visual .agent  { color: var(--color-brand); }

/* Wing Classic pivot for non-AI users */
.classic-pivot {
  margin-top: 32px;
  padding: 18px 24px;
  text-align: center;
  font-size: 16px;
  color: var(--color-text-soft);
  background: var(--bg-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.classic-pivot strong { color: var(--color-text-strong); font-weight: 600; }
.classic-pivot a { color: var(--color-brand); font-weight: 600; }

/* ============================================================ Testimonial strip ============================================================ */
.testimonial-strip {
  text-align: center;
  padding: 64px 0;
  max-width: 800px;
  margin: 0 auto;
}
.testimonial-strip blockquote {
  font-family: varela_round, sans-serif;
  font-size: 26px;
  line-height: 1.4;
  color: var(--color-text-strong);
  margin: 0 0 16px;
  font-style: normal;
}
.testimonial-strip cite {
  color: var(--color-text-soft);
  font-style: normal;
  font-size: 15px;
}

/* ============================================================ Final CTA strip ============================================================ */
.cta-strip {
  background: var(--color-success-deep);
  color: #fff;
  border-radius: var(--radius-xl);
  padding: 56px 48px;
  text-align: center;
  margin: 40px 0;
}
/* body.page prefix bumps specificity above body.page h2 (0,1,2) which
   was overriding to var(--color-text-strong) and rendering near-black
   on the green strip. */
body.page .cta-strip h2 {
  color: #f5d76e;
  font-size: 34px;
  margin-bottom: 12px;
}
.cta-strip p {
  color: rgba(255, 255, 255, 0.85);
  font-size: 17px;
  margin: 0 auto 28px;
  max-width: 540px;
}
.cta-strip .btn.btn-primary,
.cta-strip .btn.btn-primary:link,
.cta-strip .btn.btn-primary:visited {
  background: #fff;
  color: var(--color-success-deep);
}
.cta-strip .btn.btn-primary:hover {
  background: #fff8e1;
  color: var(--color-success-deep);
}
.cta-strip .btn.btn-secondary,
.cta-strip .btn.btn-secondary:link,
.cta-strip .btn.btn-secondary:visited {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.4);
}
.cta-strip .btn.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}
.cta-strip .cta-fineprint {
  margin: 24px auto 0;
  max-width: 720px;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.70);
}
.cta-strip .cta-fineprint a {
  color: #fff;
  text-decoration: underline;
}

/* ============================================================ Downloads landing page (per-product) ============================================================ */
/* Eyebrow variants for the hero on per-product download landings.  The
   default green pill comes from .hero-eyebrow above; .warn is used for
   the discontinued banner (Wing Personal) and .brand for "Free for
   learning Python" (Wing 101). */
.hero-eyebrow.warn  { background: var(--color-warning-soft); color: var(--color-warning); }
.hero-eyebrow.brand { background: var(--color-brand-soft);   color: var(--color-brand);   }

/* Small meta line under the hero CTAs (e.g. "30-day trial unlocks all
   features"). */
.hero-meta {
  font-size: 14px;
  color: var(--color-text-soft);
  margin-top: 18px;
}
.hero-meta strong { color: var(--color-text-strong); font-weight: 600; }

/* Warning notice card -- used for the "Wing Personal is discontinued"
   heads-up.  Distinct from .cta-strip (success-deep) and from the
   legacy .info-box. */
.notice {
  border: 1px solid var(--color-warning);
  background: var(--color-warning-soft);
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  color: var(--color-text);
}
.notice h3 {
  color: var(--color-warning);
  font-size: 15px;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.notice p { margin: 0; }
.notice p + p { margin-top: 8px; }

/* Per-OS installer table.  Each row is a single OS/architecture; the
   download button on the right kicks off the actual file fetch.  Mobile
   collapses everything onto stacked rows. */
.install-details {
  background: var(--bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 8px 0;
}
.install-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr auto;
  gap: 18px;
  align-items: center;
  padding: 16px 24px;
  border-top: 1px solid var(--color-border);
}
.install-row:first-child { border-top: 0; }
.install-os {
  display: flex; align-items: center; gap: 12px;
  font-weight: 600; color: var(--color-text-strong);
}
.install-os-icon {
  width: 32px; height: 32px;
  border-radius: var(--radius-sm);
  background: var(--color-brand-soft);
  color: var(--color-brand);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  font-size: 13px;
}
.install-format { color: var(--color-text-soft); font-size: 14px; }
.install-size   { color: var(--color-text-soft); font-size: 14px; }
.install-row .btn { padding: 9px 16px; font-size: 14px; }
/* Optional SHA hash row -- spans full width below the main row. */
.install-sha {
  grid-column: 1 / -1;
  font-size: 12px;
  color: var(--color-text-soft);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  margin-top: 4px;
  word-break: break-all;
}
.install-sha .copy-btn {
  margin-left: 8px;
  color: var(--color-brand);
  text-decoration: underline;
  cursor: pointer;
  font-family: inherit;
}
@media (max-width: 720px) {
  .install-row { grid-template-columns: 1fr; gap: 8px; }
}

/* "Also available" tile grid below the installer table -- debugger
   packages, patches, PDF docs, source.  Tiles are conditional: the
   servlet only emits a tile when downloads exist for that category. */
.install-extras {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin-top: 22px;
}
.install-extra {
  background: var(--bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 16px 18px;
}
.install-extra a { font-weight: 600; }
.install-extra p {
  font-size: 13px;
  color: var(--color-text-soft);
  margin-top: 4px;
}

/* "Useful links" inline list (Tutorial / Quick Start / What's New /
   Supported OSes / EULA), rendered as a separator-spaced row beneath the
   installer table on the latest-version landing. */
.install-links {
  display: flex; flex-wrap: wrap; gap: 8px 16px;
  font-size: 14px;
  color: var(--color-text-soft);
  margin-top: 18px;
}
.install-links span { color: var(--color-border-strong); }

/* "Other versions" strip below the extras grid -- one link per major
   release plus a final link to the full FTP archive.  Less prominent
   than the installer table itself; this is for users explicitly
   hunting for an older line. */
.other-versions {
  display: flex; flex-wrap: wrap; gap: 6px 14px;
  align-items: baseline;
  margin-top: 28px;
  font-size: 14px;
  color: var(--color-text-soft);
}
.other-versions strong {
  color: var(--color-text-strong);
  margin-right: 4px;
}
.other-versions span { color: var(--color-border-strong); }

/* Simple two-column listing used on the sub-section download pages
   (debugger packages, patches, PDF docs, source).  Item name + small
   description on the left, download button(s) on the right. */
.dl-list {
  background: var(--bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  margin-bottom: 24px;
}
.dl-list-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  align-items: center;
  padding: 16px 24px;
  border-top: 1px solid var(--color-border);
}
.dl-list-row:first-child { border-top: 0; }
.dl-list-row .item-name {
  font-weight: 600;
  color: var(--color-text-strong);
}
.dl-list-row .item-desc {
  color: var(--color-text-soft);
  font-size: 14px;
  margin-top: 4px;
}
.dl-list-row .item-actions {
  display: flex; gap: 8px; flex-wrap: wrap;
}
.dl-list-row .btn { padding: 8px 16px; font-size: 14px; }
@media (max-width: 600px) {
  .dl-list-row { grid-template-columns: 1fr; }
}

/* "Back to downloads" footer link rendered at the bottom of each
   sub-section page so users can return to the main landing. */
.dl-back {
  margin-top: 32px;
  font-size: 15px;
}
.dl-back a {
  color: var(--color-brand);
  font-weight: 600;
}

/* Generic redesign-styled form -- used by the source-download login,
   the offline /update form, and any future hand-coded form on the
   site.  Each field sits inside <div class="field"> with its own
   <label>; selects, text inputs, and password inputs share the same
   chrome. */
.redesign-form {
  background: var(--bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 24px;
  max-width: 520px;
}
.redesign-form .field {
  display: block;
  margin-bottom: 14px;
}
.redesign-form label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-strong);
  margin-bottom: 4px;
}
.redesign-form .field-hint {
  margin-top: 4px;
  font-size: 13px;
  color: var(--color-text-soft);
}
.redesign-form .required {
  color: var(--color-accent);
  margin-left: 4px;
}
.redesign-form input[type="text"],
.redesign-form input[type="password"],
.redesign-form select,
.redesign-form textarea {
  width: 100%;
  padding: 10px 14px;
  font: inherit;
  font-size: 15px;
  background: var(--bg-page);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  color: var(--color-text);
}
.redesign-form input[type="text"]:focus,
.redesign-form input[type="password"]:focus,
.redesign-form select:focus,
.redesign-form textarea:focus {
  outline: none;
  border-color: var(--color-brand);
  box-shadow: 0 0 0 3px var(--color-brand-soft);
}
.redesign-form input[type="submit"] {
  background: var(--color-brand);
  color: #fff;
  border: 1px solid var(--color-brand);
  border-radius: var(--radius-md);
  padding: 10px 22px;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.redesign-form input[type="submit"]:hover {
  background: var(--color-brand-strong);
  border-color: var(--color-brand-strong);
}

/* Parsed CHANGELOG.txt rendering -- one .changelog-release per
   "Update X.Y.Z" / "Release X.Y.Z" block, with eyebrowed Features /
   Changes / Bug Fixes section heads inside.  Selectors are prefixed
   with .redesign-page .page-body so they outrank the page-body's
   default h2/h3/ul/li rules; otherwise the release header renders at
   28px and section heads at 22px, breaking the visual hierarchy. */
.redesign-page .page-body .changelog-release {
  margin-bottom: 32px;
}
.redesign-page .page-body .changelog-release h2 {
  font-family: varela_round, Inter, sans-serif;
  font-size: 22px;
  margin: 0 0 6px;
  letter-spacing: -0.005em;
}
.redesign-page .page-body .changelog-release h2 .release-version {
  color: var(--color-brand);
}
.redesign-page .page-body .changelog-release .release-meta {
  font-size: 14px;
  color: var(--color-text-soft);
  margin-bottom: 18px;
}
.redesign-page .page-body .changelog-release .release-meta strong {
  font-weight: 600;
  color: var(--color-text-strong);
}
.redesign-page .page-body .changelog-release .release-meta .priority-high   { color: var(--color-accent);  font-weight: 600; }
.redesign-page .page-body .changelog-release .release-meta .priority-medium { color: var(--color-warning); font-weight: 600; }
.redesign-page .page-body .changelog-release h3 {
  font-family: Inter, sans-serif;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-brand);
  margin: 18px 0 8px;
}
.redesign-page .page-body .changelog-release ul {
  list-style-position: inside;
  padding-left: 0;
  margin: 0 0 12px;
}
.redesign-page .page-body .changelog-release li {
  font-size: 15px;
  margin-bottom: 4px;
  line-height: 1.5;
}

/* Brand-tinted callout used to highlight a leading informational
   paragraph (e.g. the first paragraph on /update telling
   internet-connected users they don't need this page). */
.callout {
  background: var(--color-brand-soft);
  border-left: 4px solid var(--color-brand);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  margin-bottom: 20px;
  color: var(--color-text-strong);
}
/* Specificity-bumped under .redesign-page .page-body so the page-body
   p rule (margin: 0 0 16px) doesn't add a stray 16px gap below the
   text inside the callout box. */
.redesign-page .page-body .callout p { margin: 0; }
.redesign-page .page-body .callout p + p { margin-top: 8px; }

/* Companion-book card used on the Wing 101 landing for the
   "Python Programming Fundamentals" callout. */
.companion {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 24px;
  background: var(--bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 24px;
  align-items: center;
}
.companion-cover {
  background: linear-gradient(135deg, var(--color-brand) 0%, var(--color-brand-strong) 100%);
  color: #fff;
  border-radius: var(--radius-md);
  height: 160px;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  padding: 14px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
}
.companion h3 { font-size: 18px; margin-bottom: 6px; }
.companion p  { color: var(--color-text-soft); font-size: 15px; margin-bottom: 8px; }
@media (max-width: 600px) {
  .companion { grid-template-columns: 1fr; }
  .companion-cover { height: 120px; }
}

/* ============================================================ Site footer (4-column) ============================================================ */
.site-footer {
  background: var(--bg-surface-alt);
  border-top: 1px solid var(--color-border);
  padding: 48px 0 32px;
  margin-top: 64px;
}
.site-footer .redesign-container { padding: 0 12px; }
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 40px;
}
.footer-brand .logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: varela_round, sans-serif;
  font-size: 22px;
  font-weight: 600;
  color: var(--color-text-strong);
  margin-bottom: 14px;
}
.footer-brand .logo img {
  width: 32px;
  height: 32px;
  filter: drop-shadow(0 1px 2px rgba(85, 56, 123, 0.25));
}
.footer-brand p {
  color: var(--color-text-soft);
  font-size: 14px;
  max-width: 320px;
}
.footer-col h4 {
  font-family: Inter, sans-serif;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-strong);
  margin-bottom: 14px;
}
.footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-col li { margin-bottom: 10px; }
.footer-col a {
  color: var(--color-text-soft);
  font-size: 14px;
}
.footer-col a:hover { color: var(--color-brand); text-decoration: none; }
.footer-bottom {
  border-top: 1px solid var(--color-border);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--color-text-soft);
  font-size: 13px;
}

/* ============================================================ Interior pages (wrap mode) -- title hero + prose body ============================================================ */
.redesign-page {
  margin: 0;
  padding: 0;
}
.redesign-page .page-hero {
  /* Subtle tint behind the title -- halfway between the page background
     and the alt surface so it's distinguishable but not heavy.  Dark
     mode follows automatically since both tokens flip. */
  background: color-mix(in srgb, var(--bg-surface-alt), var(--bg-page));
  border-bottom: 1px solid var(--color-border);
  padding: 28px 0 24px;
  margin-bottom: 24px;
}
.redesign-page .page-hero h1 {
  font-family: varela_round, Inter, sans-serif;
  font-size: 34px;
  letter-spacing: -0.01em;
  margin: 0;
}
/* Some servlets (store special/enter, whatsnew) emit their own inline
   <h2 id="inline-title"> for the legacy design, where the framework skips
   the auto title on header-extended pages.  In the redesign that title is
   already shown as the .page-hero h1, so hide the inline duplicate -- but
   only when a page-hero is actually present, so pages without one keep
   their inline heading. */
.redesign-page:has(.page-hero) #inline-title {
  display: none;
}
.redesign-page .page-body {
  padding-bottom: 64px;
  font-size: 16px;
  color: var(--color-text-soft);
}
.redesign-page .page-body strong,
.redesign-page .page-body b {
  color: var(--color-text);
}
/* Clearfix -- legacy key-points-left/right items use float:left|right
   for the alternating image layout; without containing them the parent
   collapses and the footer ends up overlapping the last float. */
.redesign-page .page-body::after {
  content: "";
  display: table;
  clear: both;
}
.redesign-page .page-body h2 {
  font-family: varela_round, Inter, sans-serif;
  font-size: 28px;
  margin: 40px 0 16px;
  letter-spacing: -0.005em;
}
.redesign-page .page-body h3 {
  font-family: varela_round, Inter, sans-serif;
  font-size: 22px;
  margin: 32px 0 12px;
}
.redesign-page .page-body h4 {
  font-family: Inter, sans-serif;
  font-size: 17px;
  font-weight: 700;
  margin: 24px 0 10px;
}
.redesign-page .page-body p {
  margin: 0 0 16px;
  line-height: 1.6;
}
.redesign-page .page-body ul,
.redesign-page .page-body ol {
  margin: 0 0 16px;
  padding-left: 24px;
}
.redesign-page .page-body li {
  margin-bottom: 6px;
  line-height: 1.6;
}
/* RST blockquotes (indented paragraphs) need explicit margin since the
   global "* { margin:0 }" reset zeroes out the browser default. */
.redesign-page .page-body blockquote {
  margin: 0 0 16px 16px;
  padding-left: 16px;
  border-left: 3px solid var(--color-border);
}
.redesign-page .page-body blockquote > p:last-child {
  margin-bottom: 0;
}
.redesign-page .page-body blockquote.why-wingpro-quote {
  font-style: italic;
  font-size: 18px;
  color: var(--color-text-strong);
  margin: 8px 0 24px;
}

/* In-page mini search form (news, hints/blog, Python manual). The
   legacy chrome path wraps the same form in <div id="search"> and gets
   the old image-background look; here we wrap it in .minisearch and
   restyle it to match the redesign tokens. */
.minisearch {
  margin: 16px 0 24px;
}
.minisearch form {
  display: flex;
  gap: 8px;
  width: 100%;
  max-width: 520px;
}
.minisearch input#search-terms {
  flex: 1;
  background: var(--bg-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  font-family: inherit;
  font-size: 15px;
  min-width: 0;
}
.minisearch input#search-terms:focus {
  outline: none;
  border-color: var(--color-brand);
  box-shadow: 0 0 0 3px var(--color-brand-soft);
}
.minisearch input#btn-search {
  background: var(--color-brand);
  color: #fff;
  border: 1px solid var(--color-brand);
  border-radius: var(--radius-md);
  padding: 10px 18px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  width: auto;
  height: auto;
}
.minisearch input#btn-search:hover {
  background: var(--color-brand-strong);
  border-color: var(--color-brand-strong);
}
@media (prefers-color-scheme: dark) {
  .minisearch input#search-terms {
    background: rgba(255, 255, 255, 0.06);
    color: #eee;
    border-color: rgba(255, 255, 255, 0.18);
  }
  .minisearch input#search-terms:focus {
    border-color: var(--color-brand);
    box-shadow: 0 0 0 3px rgba(93, 58, 130, 0.35);
  }
}

.redesign-page .page-body img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  margin: 16px 0;
}
/* :not(.btn) so this doesn't override .btn.btn-primary's white text on
   buttons embedded in page-body (the hover variant outranks btn-primary
   by one element selector and the text disappears against the matching
   background).  Inline prose links get a permanent underline since the
   brand purple alone is too close in lightness to the page-body text
   color to stand out. */
.redesign-page .page-body a:not(.btn) {
  color: var(--color-brand);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.redesign-page .page-body a:not(.btn):hover {
  color: var(--color-brand-strong);
  text-decoration-thickness: 2px;
}
.redesign-page .page-body pre,
.redesign-page .page-body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 14px;
}
.redesign-page .page-body pre {
  background: var(--bg-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 16px;
  overflow-x: auto;
  line-height: 1.5;
}
.redesign-page .page-body code {
  background: var(--bg-surface-alt);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}
.redesign-page .page-body pre code {
  background: transparent;
  padding: 0;
  border-radius: 0;
}
/* RST class-key-points containers (used by /wingide/* feature pages) */
.redesign-page .page-body div.class-key-points {
  background: var(--bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 24px 28px;
  margin: 24px 0;
}
.redesign-page .page-body div.class-key-points h2,
.redesign-page .page-body div.class-key-points h3 {
  margin-top: 0;
}
/* Section divider matching the top border of the first key-points card
   on detail pages (.key-points-first: 5px solid #bbb). */
.redesign-page .page-body div.bench-divider {
  border-top: 5px solid #bbb;
  margin: 48px 0 0;
  height: 0;
}
.redesign-page .page-body h2.bench-heading {
  margin-top: 24px;
}
.redesign-page .page-body .note,
.redesign-page .page-body .admonition {
  background: var(--color-brand-soft);
  border-left: 3px solid var(--color-brand);
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  margin: 24px 0;
  font-size: 15px;
}

/* ============================================================ Header collapse ============================================================ */
/* Below this width the inline top-level links (About, Download, ...) would
   collide with the logo and run off the right edge.  Collapse them behind the
   hamburger: the logo, search icon and Try Free CTA stay on the bar, and the
   links drop to a full-width row *below* the bar.  That row is in normal flow
   (so it pushes page content down instead of covering it) and lives inside the
   sticky header (so it stays pinned and doesn't scroll).  The hamburger shows
   and hides it.  Items wrap with tighter spacing so the row stays short. */
@media (max-width: 900px) {
  .site-header-inner { flex-wrap: wrap; }
  .site-header .nav-toggle { display: inline-flex; }
  /* Actions stay on the top bar, hugged to the right beside the logo. */
  .site-header .nav { margin-left: auto; }
  /* The links become their own full-width row that drops below the bar.
     It bleeds 6px into each side gutter (and items are padded 6px) so the
     first item's text lines up flush with the 12px page content gutter
     rather than being inset from it.  flex-basis + the two negative margins
     net to exactly 100%, so the row fills the line without overflowing. */
  .site-header .nav-links {
    display: none;
    order: 10;
    flex-basis: calc(100% + 12px);
    margin-left: -6px;
    margin-right: -6px;
    flex-wrap: wrap;
    gap: 2px 3px;           /* tighter still than the desktop 6px gap */
    padding: 6px 0 4px;
  }
  .site-header .nav-links.open { display: flex; }
  /* Tighter horizontal padding so items sit closer and wrap later. */
  .site-header .nav-links a.nav-link { padding: 8px 6px; }
  /* When the menu is open it wraps below the bar, so the bar's normal 14px
     bottom padding stacks under it (on top of the row's own padding) and
     leaves too much space before the header's bottom border.  Halve it in
     that state. */
  .site-header-inner:has(.nav-links.open) { padding-bottom: 5px; }
}

/* ============================================================ Mobile ============================================================ */
@media (max-width: 768px) {
  .hero { padding: 56px 12px 40px; }
  .hero h1 { font-size: 36px; }
  .hero-sub { font-size: 17px; }
  .redesign-section { padding: 56px 0; }
  .section-header h2 { font-size: 28px; }
  .ai-banner {
    grid-template-columns: 1fr;
    padding: 32px 24px;
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
  .footer-brand { grid-column: 1 / -1; }
}

/* ============================================================
   Dark mode: token overrides.  Every component below is built on
   these tokens, so most pieces dark-mode automatically.  Specific
   components (translucent header, shadow rgba, gradient stops) are
   overridden explicitly below.
   ============================================================ */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-page:        #1c1a17;
    --bg-surface:     #262320;
    --bg-surface-alt: #211e1a;

    --color-text:        #e6dfd2;
    --color-text-soft:   #a59c8e;
    --color-text-strong: #f5ede0;

    --color-brand:        #a578cb;
    --color-brand-soft:   #2e1f44;
    --color-brand-strong: #c9a3eb;

    --color-accent:       #e87935;
    --color-accent-soft:  #3a2316;

    --color-success:      #7fae5e;
    --color-success-soft: #25301a;
    --color-success-deep:   #4d7a32;
    --color-success-strong: #6a9647;

    --color-border:        #3d3a32;
    --color-border-strong: #4d4a40;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.20), 0 1px 3px rgba(0, 0, 0, 0.30);
    --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.24), 0 4px 12px rgba(0, 0, 0, 0.40);
  }
  /* Translucent header backdrop needs dark base */
  .site-header {
    background: rgba(28, 26, 23, 0.92);
  }
  .site-header .logo img,
  .footer-brand .logo img {
    filter: drop-shadow(0 1px 2px rgba(165, 120, 203, 0.35));
  }
  /* Hero feather watermark: gets too prominent on dark, dial down */
  .hero::before { opacity: 0.18; }
  /* CTA strip stays on the deep green; lighten text-on-green slightly so
     it doesn't ring against the dark page background */
  .cta-strip { background: var(--color-success-deep); }
  .cta-strip .btn.btn-primary,
  .cta-strip .btn.btn-primary:link,
  .cta-strip .btn.btn-primary:visited {
    background: var(--bg-surface);
    color: var(--color-success);
  }
  .cta-strip .btn.btn-primary:hover {
    background: var(--bg-surface-alt);
    color: var(--color-success);
  }
}