/* Design "Workbench": dark navigation tree on the left, one light working panel on the right - the layout of the engineering
   programs themselves (ETABS, SAP2000, Revit): explore on the left, details on the right. Plain CSS; the phone menu is a CSS checkbox. */
:root { --side:#1f2d3a; --side-ink:#cfd8dc; --brand:#2aa3d8; --ink:#1c2833; --muted:#5f6f7a; --line:#dde3e8; --ok:#27ae60; }
* { box-sizing:border-box; }
body { margin:0; font:15px/1.55 "Segoe UI", system-ui, Arial, sans-serif; color:var(--ink); background:#eef2f5; }
a { color:#0b6fa4; } img { max-width:100%; height:auto; display:block; }

.side { position:fixed; inset:0 auto 0 0; width:260px; background:var(--side); color:var(--side-ink); overflow-y:auto; padding:14px 0 12px; display:flex; flex-direction:column; }
/* V02 logo: a FLOATING white card, same side margins (14 px) and corner radius as the blue download button below it, with the dark menu
   colour showing on the left, right and top. The logo is 65% of the card width (~150 px, below the 196 px source, so it stays sharp). */
.brand { display:block; margin:0 14px 10px; background:#fff; border-radius:4px; padding:6px 0; }   /* was 12 px; 8 px = 65%; now 6 px (owner wants to see it) */
.brand img { width:65%; height:auto; margin:0 auto; }
/* V02: the one action that matters stays visible on every page, directly under the logo. */
.side-dl { display:block; margin:0 14px 6px; text-align:center; background:var(--brand); color:#fff; text-decoration:none; font-weight:600; padding:9px 10px; border-radius:4px; }
.side-dl:hover { background:#1b8dbf; color:#fff; }
.announce { background:#f4b400; color:#1b1b1b; text-align:center; padding:8px 14px; font-weight:600; font-size:14px; border-radius:6px; margin-bottom:14px; }
.announce a { color:#1b1b1b; margin-left:10px; white-space:nowrap; }
.endline { max-width:1150px; margin-top:14px; padding:0 4px; font-size:12.5px; color:var(--muted); display:flex; justify-content:space-between; flex-wrap:wrap; gap:4px 24px; }
.endline a { color:var(--muted); margin-left:14px; } .endline a:first-child { margin-left:0; } .endline a:hover { color:#0b6fa4; }
.phonebar { display:none; }
.side-h { margin:14px 16px 4px; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:#7f93a3; }
.item { display:flex; align-items:center; gap:8px; padding:7px 16px; color:var(--side-ink); text-decoration:none; border-left:3px solid transparent; }
.item small { margin-left:auto; font-size:11px; color:#7f93a3; }
.item:hover { background:#273847; color:#fff; } .item.on { background:#2f4558; color:#fff; border-left-color:var(--brand); }
.item.sm { font-size:13px; padding:4px 16px; }
.dot { width:9px; height:9px; border-radius:50%; background:#7f8c8d; flex:none; } .dot.beta, .dot.available { background:var(--ok); }
.side-foot { margin-top:auto; padding:14px 16px 0; font-size:12px; color:#8fa1ae; } .side-foot a { color:#9fd4ee; }

.main { margin-left:260px; padding:22px 26px 40px; }
.panel { max-width:1000px; background:#fff; border:1px solid var(--line); border-radius:6px; padding:22px 26px; }
h1 { font-size:26px; margin:0 0 4px; line-height:1.2; color:#0a6c9e; }   /* page titles: brand blue, a step away from the body ink */ h2 { font-size:15px; margin:20px 0 6px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); }
.lead { font-size:17px; color:var(--muted); margin:0 0 12px; }
.head { display:flex; gap:24px; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; }
.getbox { min-width:250px; border:1px solid var(--line); background:#f6f9fb; border-radius:6px; padding:12px; }
.btn { display:block; text-align:center; background:var(--brand); color:#fff; text-decoration:none; font-weight:600; padding:10px 14px; border-radius:4px; }
.btn:hover { background:#1b8dbf; color:#fff; } .btn.ghost { background:#fff; color:#0b6fa4; border:1px solid #0b6fa4; }
.meta { font-size:12.5px; color:var(--muted); margin:6px 0; }
.tag { font-size:11px; padding:2px 7px; border-radius:10px; background:#8a97a0; color:#fff; vertical-align:middle; font-weight:600; }
.tag.beta, .tag.available { background:var(--ok); }
.two { display:grid; grid-template-columns:3fr 2fr; gap:26px; } ul { padding-left:20px; margin:4px 0; } li { margin:3px 0; }
.codes { list-style:none; padding:0; } .codes li { padding:4px 8px; border-left:3px solid var(--brand); background:#f2f7fa; margin:4px 0; }
.shots { display:grid; grid-template-columns:repeat(auto-fit, minmax(230px,1fr)); gap:12px; }
.shots figure { margin:0; border:1px solid var(--line); border-radius:4px; padding:5px; } .shots figcaption { font-size:12.5px; color:var(--muted); padding:3px 2px 0; }
.shots img { aspect-ratio:3/2; object-fit:cover; width:100%; }
details { border:1px solid var(--line); border-radius:4px; padding:5px 12px; margin:5px 0; background:#fff; } summary { cursor:pointer; font-weight:600; }
.hash { font-size:10.5px; word-break:break-all; display:block; margin-top:6px; }
.legalnav a { margin-right:14px; } .legalnav a.on { font-weight:700; text-decoration:none; color:var(--ink); }
.legal table { display:block; overflow-x:auto; } .legal td, .legal th { border:1px solid var(--line); padding:3px 7px; }

/* Screenshot gallery: one large picture (full panel width) + a thumbnail strip; click = full-size dialog. */
.panel { max-width:1150px; }
.gallery { margin:14px 0 6px; }
.stage { margin:0; border:1px solid var(--line); border-radius:4px; background:#fafbfc; padding:6px; }
.stage a { display:block; cursor:zoom-in; } .stage img { width:100%; height:auto; border-radius:2px; }
.stage figcaption { font-size:13.5px; color:var(--muted); padding:6px 4px 2px; }
.thumbs { display:flex; gap:8px; margin-top:8px; flex-wrap:wrap; }
.thumb { width:118px; border:2px solid var(--line); border-radius:4px; padding:2px; opacity:.75; background:#fff; }
.thumb img { width:100%; aspect-ratio:3/2; object-fit:cover; object-position:top left; } .thumb:hover { opacity:1; } .thumb.on { border-color:var(--brand); opacity:1; }
.lightbox { border:0; padding:8px; border-radius:6px; max-width:96vw; max-height:96vh; background:#fff; }
.lightbox::backdrop { background:rgba(10,20,30,.75); } .lightbox img { max-width:92vw; max-height:84vh; width:auto; height:auto; margin:0 auto; }
.lightbox p { margin:6px 2px 0; font-size:13.5px; color:var(--muted); } .lb-close { float:right; margin:0 0 6px; cursor:pointer; padding:5px 12px; }

.side-toggle, .side-btn { display:none; }
@media (max-width:860px) {
    .side { transform:translateX(-100%); transition:transform .2s; z-index:20; }
    .side-toggle:checked ~ .side { transform:none; }
    .phonebar { display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:10; background:var(--side); }
    .side-btn { display:block; color:#fff; padding:10px 14px; font-weight:600; cursor:pointer; }
    .phone-dl { color:#fff; background:var(--brand); text-decoration:none; font-weight:600; font-size:13.5px; padding:6px 10px; margin-right:10px; border-radius:4px; }
    .main { margin-left:0; padding:12px; } .two { grid-template-columns:1fr; } .panel { padding:16px; }
}
@media print { .side, .side-btn, .phonebar, .announce { display:none; } .main { margin:0; padding:0; } .panel { border:0; } }

/* V02 additions: Home page, Downloads page, menu Home item */
.item.home { margin-top:4px; font-weight:600; }
.cta { display:flex; gap:10px; flex-wrap:wrap; margin:12px 0 4px; } .cta .btn { display:inline-block; padding:10px 18px; }
.home-two { margin-top:6px; }
.cards { display:grid; grid-template-columns:repeat(auto-fill, minmax(250px,1fr)); gap:10px; }
.card { display:block; border:1px solid var(--line); border-left:4px solid var(--brand); border-radius:4px; padding:10px 12px; text-decoration:none; color:var(--ink); background:#fbfcfd; }
.card:hover { background:#f0f7fb; } .card-h { display:block; font-weight:700; margin-bottom:2px; } .card-t { display:block; font-size:13.5px; color:var(--muted); }
.strip { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); gap:8px; }
.strip figure { margin:0; border:1px solid var(--line); padding:4px; border-radius:4px; } .strip img { aspect-ratio:3/2; object-fit:cover; width:100%; }
.strip figcaption { font-size:12px; color:var(--muted); padding:2px 2px 0; }
.dl-card { display:flex; gap:18px; align-items:center; justify-content:space-between; border:1px solid var(--line); border-radius:6px; padding:12px 16px; margin:12px 0; background:#f6f9fb; }
.dl-card h2 { margin:0 0 2px; text-transform:none; letter-spacing:0; font-size:19px; color:var(--ink); } .dl-card p { margin:2px 0; }
.dl-card .btn { white-space:nowrap; padding:12px 22px; font-size:16px; }
.help { margin-top:14px; } .plain { list-style:none; padding:0; } .plain li { margin:6px 0; } .notify { margin-left:8px; font-size:13px; }
@media (max-width:860px) { .dl-card { flex-direction:column; align-items:stretch; } }

/* Buy box (shown only when Site:ShowBuy is on and the product has a buyUrl) */
.buybox { margin-top:12px; padding-top:10px; border-top:1px solid var(--line); }
.buybox .price { font-size:20px; font-weight:700; color:var(--ink); margin-bottom:6px; }
.btn.buy { background:#27ae60; } .btn.buy:hover { background:#1f9150; }

.buybox .testnote { margin:8px 0; padding:8px 10px; font-size:13px; font-weight:700; background:#fff4d6; color:#5c4300; border:1px solid #e0b84a; border-radius:4px; }
.copyrow { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:8px 0 14px; }
.copyrow .addr { font-weight:600; font-size:15px; color:var(--ink); }
.btn.ghost { font-size:13px; padding:5px 12px; }
/* Download switched off with Site:DownloadOffLabel: same button, greyed, not clickable (layout unchanged). */
.btn.off, .side-dl.off, .phone-dl.off { background:#9aa7b4; color:#fff; cursor:default; pointer-events:none; }
.dl-card .btn.off { white-space:nowrap; }
/* Trial download form (/trial/{slug}) */
.trialform { max-width:460px; margin-top:10px; }
.trialform label { display:block; margin:10px 0; font-weight:600; }
.trialform input:not([type=checkbox]), .trialform select { display:block; width:100%; box-sizing:border-box; margin-top:4px; padding:8px 10px; border:1px solid #b9c6d2; border-radius:4px; font:inherit; font-weight:400; }
.trialform label.check { font-weight:400; display:flex; gap:8px; align-items:flex-start; }
.trialform .opt { font-weight:400; color:var(--muted); }
.trialform .btn { border:0; cursor:pointer; font-size:15px; margin-top:6px; }
.trialform .hp { position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }
.formerror { color:#b42318; background:#fef3f2; border:1px solid #f5c2bd; border-radius:4px; padding:8px 12px; font-weight:600; }