/* Pages on simple.master (the home page first): javascriptconverter.com-style sections on the simple frame of the tool
   pages (simple-site-20261029.css, loaded before this file). Built with build/tools/converter-ui/home.py. */
body.sx-page{margin:0;line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.sx-page main,.sx-page main *,.sx-page main *::before,.sx-page main *::after{box-sizing:border-box}
.sx-page main :is(h1,h2,h3,p,figure,ul){margin:0}
.sx-page main a{color:#0b57d0}
.sx-page main svg{flex:none}
.sx-skip{position:absolute;left:-9999px;top:8px;z-index:100;padding:8px 14px;border-radius:8px;background:#0b57d0;color:#fff!important;font-size:14px}
.sx-skip:focus{left:16px}
.sx-page main a:focus-visible{outline:2px solid #0b57d0;outline-offset:3px;border-radius:6px}

.sx-wrap{max-width:1280px;margin-left:auto;margin-right:auto;padding-left:clamp(16px,2.5vw,32px);padding-right:clamp(16px,2.5vw,32px)}
.sx-section{padding-top:80px;padding-bottom:80px}
.sx-section-tight{padding-top:24px}
.sx-band{background:#f0f4f9;border-top:1px solid #e3e6ea;border-bottom:1px solid #e3e6ea}

/* Small rounded label above a title; the hero's one is a link to the latest release. */
.sx-pill{display:inline-flex;align-items:center;gap:8px;padding:4px 12px;border:1px solid rgba(11,87,208,.2);border-radius:999px;background:rgba(11,87,208,.08);
  color:#0b57d0;font-size:12px;font-weight:500;line-height:16px;letter-spacing:.6px;text-transform:uppercase;text-decoration:none}
a.sx-pill:hover{background:rgba(11,87,208,.14)}
.sx-pill-new{padding:1px 7px;border-radius:999px;background:#0b57d0;color:#fff;font-size:11px;font-weight:600}

/* Hero: title, one paragraph and three actions beside a code-and-result preview. */
.sx-hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:56px;align-items:center;padding-top:72px;padding-bottom:80px}
.sx-page .sx-hero h1{margin-top:24px;font-size:clamp(36px,4.4vw,56px);font-weight:700;line-height:1.15;letter-spacing:-1.2px;color:#1f1f1f}
.sx-accent{color:#0b57d0}
.sx-page main :is(h1,h2){text-wrap:balance}
.sx-page .sx-lead{margin-top:24px;max-width:576px;font-size:18px;line-height:1.62;color:#444746}
.sx-cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:32px}
.sx-page .sx-btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:10px 26px;border:1px solid transparent;border-radius:8px;
  font-size:16px;font-weight:500;line-height:1.5;text-decoration:none}
.sx-page .sx-btn-primary{background:#0b57d0;color:#fff}
.sx-page .sx-btn-primary:hover{background:#0842a0}
.sx-page .sx-btn-secondary{background:#fff;border-color:#c4c7c5;color:#444746}
.sx-page .sx-btn-secondary:hover{border-color:#0b57d0;color:#0b57d0}
.sx-page .sx-btn-text{padding:10px 12px;color:#444746;font-size:16px;font-weight:500;text-decoration:none}
.sx-page .sx-btn-text:hover{color:#0b57d0}

.sx-preview{background:#fff;border:1px solid #c4c7c5;border-radius:12px;box-shadow:0 1px 2px rgba(31,31,31,.05),0 12px 32px rgba(31,31,31,.07);overflow:hidden}
.sx-preview-bar{display:flex;align-items:center;gap:12px;padding:10px 16px;border-bottom:1px solid #e3e6ea;background:#f8fafd;font-size:12px;color:#444746}
.sx-dots{display:inline-flex;gap:6px}
.sx-dots i{width:10px;height:10px;border-radius:50%;background:#f28b82}
.sx-dots i:nth-child(2){background:#fdd663}
.sx-dots i:nth-child(3){background:#81c995}
.sx-preview-pane{min-width:0;padding:14px 18px 16px}
.sx-preview-result{border-top:1px solid #e3e6ea;background:#fbfcfe}
.sx-pane-label{display:block;margin-bottom:10px;font-size:11px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;color:#5f6368}
.sx-preview pre{margin:0;overflow-x:auto;font-size:12.5px;line-height:1.65;color:#1f1f1f;white-space:pre;tab-size:2}
.sx-t{color:#0b57d0}.sx-a{color:#8430ce}.sx-s{color:#137333}.sx-k{color:#b3261e}
.sx-mini{border:1px solid #c4c7c5;border-radius:8px;background:#fff;overflow:hidden}
.sx-mini-tools{display:flex;gap:2px;padding:5px 6px;border-bottom:1px solid #e3e6ea;background:#f8fafd}
.sx-mini-tools span{display:inline-grid;place-items:center;min-width:28px;height:26px;border-radius:6px;font-size:13px;color:#444746}
.sx-mini-tools span.on{background:#d3e3fd;color:#0b57d0}
.sx-mini-doc{min-height:64px;padding:12px 14px;font-size:15px;line-height:1.55;color:#1f1f1f}
.sx-caret{display:inline-block;width:1.5px;height:1.15em;margin-left:1px;background:#0b57d0;vertical-align:text-bottom;animation:sx-blink 1.1s steps(1) infinite}
@keyframes sx-blink{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){.sx-caret{animation:none}}
.sx-preview figcaption{padding:10px 18px;border-top:1px solid #e3e6ea;font-size:12px;color:#5f6368}
.sx-page .sx-preview figcaption a{color:#0b57d0;text-decoration:none}
.sx-page .sx-preview figcaption a:hover{text-decoration:underline}

/* Numbers band. */
.sx-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;padding-top:32px;padding-bottom:32px;text-align:center}
.sx-stats strong{display:block;font-size:30px;font-weight:700;line-height:1.2;color:#1f1f1f}
.sx-stats span{display:block;margin-top:4px;font-size:13px;color:#444746}

/* Section heading: label, title, one paragraph, centred. */
.sx-head{max-width:760px;margin:0 auto 48px;text-align:center}
.sx-page .sx-head h2{margin-top:16px;font-size:clamp(28px,3.2vw,36px);font-weight:700;line-height:1.2;color:#1f1f1f}
.sx-page .sx-head p{margin-top:16px;font-size:16px;line-height:1.65;color:#444746}
.sx-page .sx-head p a{font-weight:500;text-decoration:none;white-space:nowrap}
.sx-page .sx-head p a:hover{text-decoration:underline}

/* Cards. */
.sx-grid{display:grid;gap:20px}
.sx-grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.sx-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.sx-box{position:relative;display:flex;flex-direction:column;padding:28px;background:#fff;border:1px solid #c4c7c5;border-radius:12px}
.sx-icon{display:inline-grid;place-items:center;width:40px;height:40px;margin-bottom:18px;border-radius:10px;background:rgba(11,87,208,.08);color:#0b57d0}
.sx-num{margin-bottom:12px;font-size:13px;font-weight:600;letter-spacing:.6px;color:#0b57d0}
.sx-page .sx-box h3{margin-bottom:8px;font-size:18px;font-weight:600;line-height:1.4;color:#1f1f1f}
.sx-page .sx-box p{font-size:15px;line-height:1.6;color:#444746}
/* The link at the foot of a product card makes the whole card clickable. */
.sx-page .sx-more{margin-top:auto;padding-top:18px;font-size:15px;font-weight:500;color:#0b57d0;text-decoration:none}
.sx-more::after{content:"";position:absolute;inset:0;border-radius:12px}
.sx-box:has(.sx-more:hover){border-color:#0b57d0}
.sx-page .sx-more:focus-visible{outline:none}
.sx-more:focus-visible::after{outline:2px solid #0b57d0;outline-offset:2px}

/* Tool categories: name and count, one line, four tools. */
.sx-page .sx-cat{padding:24px}
.sx-cat-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.sx-page .sx-cat h3{margin:0;font-size:17px}
.sx-page .sx-cat h3 a{color:#1f1f1f;text-decoration:none}
.sx-page .sx-cat h3 a:hover{color:#0b57d0;text-decoration:underline}
.sx-count{flex:none;font-size:13px;color:#5f6368;white-space:nowrap}
.sx-page .sx-cat p{margin-top:6px;font-size:14px}
.sx-page .sx-cat ul{display:grid;gap:8px;margin-top:16px;padding:16px 0 0;border-top:1px solid #eef0f3;list-style:none}
.sx-page .sx-cat li a{font-size:14px;text-decoration:none}
.sx-page .sx-cat li a:hover{text-decoration:underline}
.sx-page a.sx-cat-all{justify-content:center;gap:6px;background:#f8fafd;border-style:dashed;color:#1f1f1f;text-decoration:none}
.sx-page a.sx-cat-all strong{font-size:17px;font-weight:600;color:#0b57d0}
.sx-page a.sx-cat-all span{font-size:14px;color:#444746}
.sx-page a.sx-cat-all:hover{border-color:#0b57d0;border-style:solid}

/* Apps row. */
.sx-apps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.sx-page .sx-app{display:flex;align-items:flex-start;gap:14px;padding:18px;background:#fff;border:1px solid #c4c7c5;border-radius:12px;color:#1f1f1f;text-decoration:none}
.sx-page .sx-app:hover{border-color:#0b57d0}
.sx-app b{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:10px;background:rgba(11,87,208,.08);color:#0b57d0;font-size:12px;font-weight:700}
.sx-app strong{display:block;font-size:15px;font-weight:600}
.sx-app small{display:block;margin-top:2px;font-size:13px;line-height:1.5;color:#444746}

/* Closing call to action. */
.sx-final{background:linear-gradient(135deg,rgba(11,87,208,.08),rgba(66,133,244,.04));border-top:1px solid #e3e6ea}
.sx-final .sx-head{margin-bottom:0}
.sx-page .sx-final .sx-head h2{margin-top:0}
.sx-final .sx-cta-row{justify-content:center}

/* Every product website, folded. */
.sx-sites{padding-top:32px}
.sx-sites summary{cursor:pointer;font-size:14px;font-weight:500;color:#444746}
.sx-sites summary:hover{color:#0b57d0}
.sx-sites-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin-top:20px}
.sx-page .sx-sites h3{margin:0 0 10px;font-size:13px;font-weight:600;color:#1f1f1f}
.sx-page .sx-sites ul{margin:0;padding:0;list-style:none}
.sx-sites li{margin:0 0 6px}
.sx-page .sx-sites a{font-size:13px;text-decoration:none}
.sx-page .sx-sites a:hover{text-decoration:underline}
/* The footer follows the folded list closely. */
.sx-page .sx-footer{margin-top:40px!important}

@media (max-width:1024px){
  .sx-hero{grid-template-columns:minmax(0,1fr);gap:40px;padding-top:48px;padding-bottom:64px}
  .sx-grid-4,.sx-grid-3,.sx-apps,.sx-sites-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .sx-section{padding-top:56px;padding-bottom:56px}
  .sx-section-tight{padding-top:16px}
  .sx-page .sx-hero h1{letter-spacing:-.6px}
  .sx-page .sx-lead{font-size:17px}
  .sx-cta-row .sx-btn{flex:1 1 auto}
  .sx-grid-4,.sx-grid-3,.sx-apps,.sx-sites-grid{grid-template-columns:minmax(0,1fr)}
  .sx-stats{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:20px}
  .sx-head{margin-bottom:32px}
  .sx-preview pre{font-size:11.5px}
}
@media print{.sx-preview,.sx-sites{display:none}}