/* The pages around the app: the landing page and the tool pages. The design is dark only, in the app's own dark colours.
   First the landing page, as it was designed; then, further down, what was added for the tool pages and the footer. */
:root { --bg:#0e1418; --surface:#151d22; --surface2:#1c262c; --border:#2c3941; --accent:#3bc0cf; --fg:#e4edf1; --muted:#9aacb7; --mono:'IBM Plex Mono',monospace; --head:'IBM Plex Sans Condensed',sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:90px; }
body { margin:0; background:var(--bg); color:var(--fg); font-family:'IBM Plex Sans',sans-serif; font-size:15px; line-height:1.6; }
a { color:inherit; text-decoration:none; }
button, input { font:inherit; }
button, a, input { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; }
button:focus-visible, a:focus-visible, input:focus-visible { outline:2px solid var(--accent); outline-offset:5px; }
a, button { transition:background .2s,color .2s,border-color .2s; }
p { color:var(--muted); margin:16px 0; }
header { height:96px; max-width:1400px; margin:auto; padding:0 56px; display:flex; align-items:center; justify-content:space-between; gap:35px; border-bottom:1px solid var(--border); }
.brand { display:flex; gap:12px; align-items:center; }
.brand b { font:600 24px var(--head); display:block; }
.brand small { font-size:8px; letter-spacing:1.1px; color:var(--muted); }
header nav { display:flex; gap:29px; font-size:13px; color:#b4c2ca; }
header nav a:hover, .textlink:hover, footer a:hover { color:var(--accent); }
.wrap { max-width:1240px; margin:auto; padding-left:40px; padding-right:40px; }
.button { display:inline-flex; align-items:center; justify-content:space-between; gap:32px; border:1px solid var(--accent); border-radius:5px; padding:14px 23px; background:var(--accent); color:#062228; font-weight:600; font-size:15px; }
.button:hover { background:#77dae4; border-color:#77dae4; }
.button.outline { background:transparent; color:var(--accent); }
.button.outline:hover { background:#123a41; }
.button.small { font-size:13px; padding:10px 16px; }
.eyebrow { font:500 11px var(--mono); letter-spacing:1.6px; color:var(--muted); }
.teal { color:var(--accent); }
.status { display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--accent); margin-right:10px; }
.hero { padding-top:74px; padding-bottom:56px; position:relative; }
.hero h1 { font:500 clamp(48px,5.4vw,76px)/1.08 var(--head); letter-spacing:-1.9px; margin:26px 0 22px; }
.hero h1 span, h2 span { color:var(--accent); }
.lead { font-size:18px; line-height:1.7; }
.hero-actions { display:flex; align-items:center; gap:30px; margin-top:28px; }
.textlink { font-size:14px; font-weight:500; display:inline-flex; gap:22px; align-items:center; color:var(--fg); }
.fine { font-size:12px; color:var(--muted); }
.fine span { margin:0 9px; }
.hero .fine { margin-top:12px; }
.hero-margin { position:absolute; right:42px; top:85px; bottom:62px; display:flex; align-items:center; gap:22px; writing-mode:vertical-rl; font:10px var(--mono); letter-spacing:2px; color:#627783; }
.hero-margin i { width:1px; background:var(--border); flex:1; }
.section-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; gap:18px; }
.section-top .fine { margin:0; }
.demo-tabs { display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--border); border-bottom:0; border-radius:7px 7px 0 0; overflow:hidden; }
.demo-tabs button { padding:18px 12px; background:var(--surface); border:0; border-right:1px solid var(--border); color:var(--muted); font-size:13px; position:relative; }
.demo-tabs button:last-child { border:0; }
.demo-tabs button span { font:10px var(--mono); margin-right:12px; color:#738893; }
.demo-tabs button[aria-selected=true] { color:var(--accent); background:#173037; box-shadow:inset 0 -2px var(--accent); }
.app-window { border:1px solid #384a55; border-radius:0 0 7px 7px; overflow:hidden; box-shadow:0 22px 60px #0003; }
.window-top { height:39px; display:flex; justify-content:space-between; align-items:center; padding:0 17px; background:#202b32; border-bottom:1px solid var(--border); font:10px var(--mono); color:var(--muted); }
.window-top b { margin:0 14px; font-weight:400; }
.window-dots { display:flex; gap:6px; }
.window-dots i { width:6px; height:6px; border-radius:50%; background:#546570; }
.demo-badge { font-size:8px; letter-spacing:1px; }
.app-body { display:grid; grid-template-columns:190px 1fr; min-height:425px; background:var(--bg); }
.app-nav { background:var(--surface); padding:22px 13px; border-right:1px solid var(--border); display:flex; flex-direction:column; }
.app-nav>b { font:600 20px var(--head); padding:0 9px; }
.search { display:flex; align-items:center; gap:8px; border:1px solid var(--border); border-radius:4px; padding:8px; margin:17px 0 12px; color:var(--muted); font-size:10px; }
.search kbd { margin-left:auto; }
.mock-nav-item { display:flex; gap:12px; padding:7px 10px; font-size:11px; color:var(--muted); border-radius:4px; }
.mock-nav-item.selected { background:#123a41; color:var(--accent); }
.mock-nav-item i { font-style:normal; width:14px; text-align:center; }
.app-nav-foot { font:8px/1.8 var(--mono); letter-spacing:1px; color:#697e8b; margin-top:auto; padding:15px 10px 0; }
.app-nav-foot span { font:10px 'IBM Plex Sans',sans-serif; letter-spacing:0; }
#demo-panel { padding:23px 28px; min-width:0; }
.demo-heading { display:flex; justify-content:space-between; align-items:flex-start; }
.demo-heading h3 { font:600 23px var(--head); margin:0; }
.demo-heading p { font-size:11px; margin:5px 0 17px; }
.pill { display:inline-block; padding:4px 8px; border:1px solid #36515b; border-radius:4px; color:var(--accent); font-size:9px; }
.demo-columns { display:grid; grid-template-columns:1.05fr 1fr; gap:18px; }
.mini-panel { border:1px solid var(--border); border-radius:5px; background:var(--surface); padding:20px; }
.mini-label { font:9px var(--mono); letter-spacing:1px; color:var(--muted); }
.math { font-family:'STIX Two Text',Georgia,serif; font-style:italic; }
.formula-entry { font-size:29px; padding:26px 0; border-bottom:1px solid #315963; }
.demo-answer { display:flex; justify-content:space-between; align-items:center; margin-top:18px; font-size:24px; color:var(--accent); }
.demo-answer small { font:9px var(--mono); color:var(--muted); }
.demo-tags { display:flex; gap:7px; margin-top:20px; font-size:9px; color:var(--muted); }
.demo-tags span { border:1px solid var(--border); border-radius:3px; padding:4px 7px; }
.step { display:flex; gap:12px; padding-top:17px; }
.step>span { flex:none; background:#123a41; color:var(--accent); height:21px; width:21px; line-height:21px; text-align:center; border-radius:50%; font:10px/21px var(--mono); }
.step b { font-size:10px; font-weight:400; color:var(--muted); }
.step .math { font-size:18px; }
.result-line { border-top:1px solid var(--border); margin-top:14px; padding-top:11px; font-size:16px; color:var(--accent); }
.demo-caption { display:flex; justify-content:space-between; align-items:center; gap:24px; }
.demo-caption p { font-size:12px; }
.demo-caption>div { display:flex; align-items:center; gap:17px; }
.demo-caption > div span { white-space:nowrap; font:10px var(--mono); color:var(--muted); }
.demo-caption button { background:transparent; border:1px solid var(--border); color:var(--accent); width:30px; height:28px; border-radius:4px; }
.categories { padding-top:56px; padding-bottom:74px; }
h2 { font:500 46px/1.14 var(--head); letter-spacing:-.65px; margin:18px 0 24px; }
.section-top h2 { font-size:26px; margin:0; }
.category-grid { display:grid; grid-template-columns:repeat(5,1fr); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.category-grid a { position:relative; border-right:1px solid var(--border); padding:23px 18px 23px 20px; }
.category-grid a:first-child { padding-left:0; }
.category-grid a:last-child { border-right:0; }
.category-grid a:hover { background:var(--surface); }
.category-grid i { font:30px 'STIX Two Text',serif; color:var(--accent); display:block; height:47px; }
.category-grid b { font:500 20px var(--head); display:block; }
.category-grid span { display:block; font-size:10px; color:var(--muted); margin-top:6px; }
.category-grid em { font-style:normal; position:absolute; top:25px; right:20px; color:#78909d; }
.consolidate { background:var(--surface); border-block:1px solid var(--border); }
.consolidate-inner { display:grid; grid-template-columns:1fr 1fr; gap:100px; align-items:center; padding-top:75px; padding-bottom:75px; }
.consolidate p { max-width:425px; font-size:15px; }
.flow-visual { padding:20px 0; }
.scattered { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.scattered span { border:1px solid #39474f; color:#95a6b0; padding:13px 12px; text-align:center; border-radius:5px; background:var(--bg); font:11px var(--mono); }
.scattered span:nth-child(1) { transform:rotate(-3deg); }
.scattered span:nth-child(2) { transform:rotate(3deg); }
.flow-connector { text-align:center; color:#59808a; font-size:35px; line-height:2; }
.unified { border:1px solid #396974; border-radius:6px; text-align:center; padding:22px; background:#153139; }
.unified>span { font-size:32px; vertical-align:middle; margin-right:15px; }
.unified strong { font:500 27px var(--head); }
.unified div { margin-top:12px; font:11px var(--mono); color:#acbec6; }
.unified div span { margin:0 15px; color:var(--accent); }
.showcase { display:grid; grid-template-columns:.8fr 1.2fr; gap:88px; align-items:center; padding-top:100px; padding-bottom:40px; }
.showcase-copy p { font-size:15px; max-width:350px; }
.showcase-copy .textlink { margin-top:15px; color:var(--accent); }
.panel { border:1px solid var(--border); border-radius:6px; background:var(--surface); }
.panel-heading { display:flex; justify-content:space-between; font:9px var(--mono); padding:15px 22px; border-bottom:1px solid var(--border); color:var(--muted); }
.engineering h3 { font:500 25px var(--head); margin:22px 25px 0; }
.engineering>p { margin:3px 25px; }
.beam { display:block; width:100%; height:180px; margin-top:8px; }
.beam-controls { padding:0 25px 16px; }
.beam-controls label { display:flex; justify-content:space-between; font-size:12px; color:var(--muted); }
.beam-controls output { color:var(--accent); font:12px var(--mono); }
input[type=range] { width:100%; accent-color:var(--accent); cursor:pointer; }
.scale { display:flex; justify-content:space-between; font:9px var(--mono); color:#718996; }
.beam-answer { margin:0 25px; display:flex; justify-content:space-between; align-items:center; background:#123038; border:1px solid #28545d; border-radius:4px; padding:12px 20px; }
.beam-answer>.math { font-size:24px; }
.frac { display:inline-flex; flex-direction:column; text-align:center; vertical-align:middle; margin:0 5px; font-size:.85em; line-height:1.4; }
.frac span:first-child { border-bottom:1px solid currentColor; }
.beam-answer small { display:block; font:8px var(--mono); letter-spacing:1px; color:var(--muted); }
.beam-answer strong { font:30px var(--mono); color:var(--accent); }
.beam-answer strong span { font-size:18px; }
.engineering .model-note { font-size:9px; margin:13px 25px 18px; }
.reverse { grid-template-columns:1.2fr .8fr; padding-top:85px; padding-bottom:100px; }
.report-stage { background:#1c282f; padding:20px 36px 0; border:1px solid var(--border); border-radius:6px; overflow:hidden; }
.report-toolbar { display:flex; justify-content:space-between; align-items:center; font:10px var(--mono); color:var(--muted); margin-bottom:22px; }
.paper { background:#eef2ef; color:#23353b; padding:29px 30px 21px; box-shadow:0 0 30px #0002; }
.paper-top { display:flex; justify-content:space-between; font:8px var(--mono); letter-spacing:1px; color:#407381; }
.paper-top span { font-size:7px; }
.paper h3 { font:500 32px var(--head); margin:20px 0 2px; }
.paper p { color:#697c82; font-size:10px; line-height:1.8; margin:4px 0 20px; }
.paper hr { border:0; border-top:1px solid #cbd6d5; }
.paper h4 { font-size:10px; letter-spacing:.3px; margin:22px 0 12px; }
.paper-values { display:flex; justify-content:space-between; font:10px var(--mono); }
.paper-equation { font-size:25px; margin:18px 0; }
.paper-result { display:flex; justify-content:space-between; align-items:center; border-block:1px solid #b8d1d3; padding:15px 0; margin-top:22px; color:#0b7285; }
.paper-result span { font:8px var(--mono); }
.paper-result b { font:22px var(--mono); }
.paper-footer { display:flex; justify-content:space-between; color:#7e8e91; font-size:8px; padding-top:25px; }
.pricing { padding-top:65px; border-top:1px solid var(--border); }
.pricing-intro { text-align:center; }
.pricing-intro h2 { font-size:44px; margin:17px 0 12px; }
.pricing-intro p { margin:0; }
.billing { display:inline-flex; border:1px solid var(--border); border-radius:5px; padding:4px; margin:26px 0 32px; background:var(--surface); }
.billing button { border:0; border-radius:3px; padding:9px 16px; background:transparent; color:var(--muted); font-size:12px; }
.billing button[aria-pressed=true] { background:#2b3d46; color:var(--fg); }
.billing span { color:var(--accent); font-size:9px; margin-left:8px; }
.plans { display:grid; grid-template-columns:1fr 1fr; gap:22px; max-width:940px; margin:auto; }
.plan { border:1px solid var(--border); border-radius:6px; background:var(--surface); padding:30px 34px; }
.plan.pro { border-color:#39727c; background:#15252b; }
.plan h3 { font:500 27px var(--head); margin:17px 0; }
.price { font:500 43px var(--head); letter-spacing:-1px; }
.price span { font:13px 'IBM Plex Sans',sans-serif; letter-spacing:0; color:var(--muted); }
.plan p { font-size:12px; margin:4px 0 22px; }
.plan .button { width:100%; font-size:13px; }
.plan ul { padding:21px 0 0; margin:22px 0 0; border-top:1px solid var(--border); list-style:none; font-size:12px; color:#bdcbd3; }
.plan li { padding:6px 0; }
.plan li:before { content:'✓'; color:var(--accent); margin-right:12px; }
.plan-label { display:flex; align-items:center; justify-content:space-between; height:18px; }
.pricing-note { text-align:center; font-size:11px; line-height:1.9; margin:22px 0 70px; }
.student { margin-bottom:80px; display:grid; grid-template-columns:1fr 1fr; gap:80px; background:#173037; border:1px solid #31545e; border-radius:6px; padding:45px 52px; max-width:1160px; }
.student h2 { font-size:39px; }
.student p { max-width:370px; font-size:14px; color:#b0c2ca; }
.student .textlink { color:var(--accent); }
.student-price { padding:30px 0 20px 45px; border-left:1px solid #36525c; }
.student-price>div { font:500 49px var(--head); margin-top:17px; color:var(--accent); }
.student-price>div span { font:14px 'IBM Plex Sans',sans-serif; color:#adbdc5; }
.student-price hr { border:0; border-top:1px solid #36525c; margin:25px 0; }
.student-price small { font-size:11px; color:#adbdc5; display:block; max-width:345px; }
.final-cta { text-align:center; padding:25px 40px 80px; }
.final-cta h2 { font-size:62px; margin-bottom:30px; }
.final-cta .fine { margin-top:15px; }
.chart { width:100%; height:245px; background:var(--surface); border:1px solid var(--border); border-radius:4px; }
.chart text { font:10px var(--mono); fill:var(--muted); }
.chart-side .math { color:var(--accent); font-size:23px; }
.data-row { display:flex; justify-content:space-between; font:11px var(--mono); padding:8px 0; border-bottom:1px solid var(--border); }
.mini-report { background:#edf2ef; color:#263e47; padding:18px 24px; border-radius:2px; }
.mini-report h4 { font:500 25px var(--head); margin:5px 0 10px; }
.mini-report p { font-size:10px; color:#576e77; }
.mini-report .data-row { border-color:#cad7d7; }
.mini-report .math { font-size:23px; margin:18px 0; }
.mock-sheet-row { padding:14px; border:1px solid var(--border); margin:10px 0; border-radius:4px; font-size:12px; }
.mock-sheet-row span { float:right; color:var(--accent); font-family:var(--mono); }

@media (min-width: 1600px) {
  header { max-width:1460px; }
  .wrap { max-width:1320px; }
  .student { max-width:1240px; }
  .hero h1 { font-size:80px; }
  .app-body { min-height:445px; }
}

@media (max-width: 1000px) {
  header { padding:0 28px; }
  header nav { gap:16px; }
  .brand small { display:none; }
  .wrap { padding-left:28px; padding-right:28px; }
  .showcase, .consolidate-inner { gap:36px; }
  .student { margin-inline:28px; gap:30px; }
  .demo-tabs button { font-size:11px; }
  .demo-tabs button span { margin-right:5px; }
  .app-body { grid-template-columns:150px 1fr; }
  #demo-panel { padding:20px; }
  .demo-columns { gap:10px; }
  .mini-panel { padding:14px; }
}

@media (max-width: 700px) {
  header { height:77px; padding:0 20px; }
  header nav { display:none; }
  .brand b { font-size:22px; }
  .button.small { font-size:11px; }
  .wrap { padding-left:20px; padding-right:20px; }
  .hero { padding-top:48px; }
  .hero h1 { font-size:53px; letter-spacing:-1px; }
  .hero-margin { display:none; }
  .hero .eyebrow { font-size:9px; }
  .lead { font-size:16px; }
  .hero-actions { gap:16px; align-items:flex-start; flex-direction:column; }
  .section-top { align-items:flex-start; }
  .section-top .fine { display:none; }
  .demo-tabs { grid-template-columns:1fr 1fr; }
  .demo-tabs button { padding:13px 4px; font-size:11px; }
  .app-body { display:block; min-height:400px; }
  .app-nav { display:none; }
  .demo-columns { grid-template-columns:1fr 1fr; }
  .formula-entry { font-size:23px; }
  .mini-panel { padding:12px; }
  .demo-heading h3 { font-size:22px; }
  .demo-heading p { max-width:220px; }
  .demo-tags { flex-wrap:wrap; }
  .demo-caption p { font-size:10px; }
  .demo-caption { gap:10px; }
  .demo-caption>div { gap:8px; }
  .categories { padding-top:38px; padding-bottom:50px; }
  .category-grid { grid-template-columns:1fr 1fr; }
  .category-grid a { border-bottom:1px solid var(--border); padding:20px!important; }
  .category-grid a:nth-child(even) { border-right:0; }
  .category-grid a:last-child { grid-column:1/-1; }
  .consolidate-inner, .showcase, .reverse, .plans, .student { grid-template-columns:1fr; }
  .consolidate-inner { padding-block:50px; }
  .flow-visual { padding:0; }
  .showcase { padding-top:60px; gap:30px; }
  .showcase-copy p { max-width:none; }
  h2 { font-size:39px; }
  .reverse { padding-bottom:60px; }
  .reverse .showcase-copy { grid-row:1; }
  .report-stage { padding-inline:25px; }
  .student { margin:0 20px 55px; padding:30px; gap:10px; }
  .student-price { border-left:0; border-top:1px solid #36525c; padding:25px 0 0; }
  .pricing-intro h2 { font-size:37px; }
  .plan { padding:27px; }
  .final-cta h2 { font-size:48px; }
  .final-cta { padding-bottom:55px; }
  .window-top { font-size:8px; }
  .demo-badge { font-size:6px; }
  .mini-report { padding:12px; }
  .mini-report h4 { font-size:19px; }
  .demo-columns .chart { height:240px; }
  .model-note { line-height:1.5; }
}

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

/* ================= added for the site: the list of tools, the footer, and the tool pages ================= */
.skip { position:absolute; left:-9999px; top:8px; background:var(--accent); color:#062228; padding:8px 14px; border-radius:4px; font-weight:600; z-index:5; }
.skip:focus { left:8px; }
p a, .fine a, figcaption a, li a.inline { color:var(--accent); }
p a:hover, .fine a:hover, figcaption a:hover { text-decoration:underline; }
code { font:.92em var(--mono); color:var(--fg); }
img { max-width:100%; height:auto; display:block; }

/* the eight tools: on the landing page under "What are you working on?", and at the foot of each tool page */
.tools-top { margin-top:52px; }
.tools-top h3, .others h2 { font:500 26px var(--head); letter-spacing:-.3px; margin:0; }
.tool-list { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.tool-list li { position:relative; border:1px solid var(--border); border-radius:6px; background:var(--surface); display:flex; flex-direction:column; }
.tool-list li:hover { border-color:#39727c; }
.tool-about { display:block; padding:20px 20px 16px; flex:1; }
.tool-about svg { width:24px; height:24px; stroke:var(--accent); fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; display:block; margin-bottom:14px; }
.tool-about b { font:500 20px var(--head); display:block; }
.tool-about span { display:block; font-size:13px; line-height:1.5; color:var(--muted); margin-top:6px; }
.tool-about:hover b { color:var(--accent); }
.tool-open { display:flex; justify-content:space-between; padding:11px 20px; border-top:1px solid var(--border); font-size:13px; font-weight:500; color:var(--accent); }
.tool-open:hover { background:#123a41; }
.others { padding-top:70px; padding-bottom:40px; }
.tool-all { background:#153139 !important; border-color:#396974 !important; }
.tool-all .tool-about { display:flex; flex-direction:column; justify-content:center; }
.tool-all b span { display:inline; color:var(--accent); font-size:inherit; margin:0 0 0 6px; }

/* the footer */
footer { border-top:1px solid var(--border); padding-top:34px; padding-bottom:34px; }
.foot-top { display:flex; gap:40px; justify-content:space-between; align-items:flex-start; }
.foot-brand b { font:600 21px var(--head); display:block; }
.foot-brand span { display:block; font-size:12px; color:var(--muted); }
.foot-tools { display:grid; grid-template-columns:repeat(4,auto); gap:8px 34px; font-size:13px; }
footer a { color:#b4c2ca; }
.foot-base { display:flex; gap:20px 30px; justify-content:space-between; align-items:center; flex-wrap:wrap; margin-top:30px; padding-top:20px; border-top:1px solid var(--border); }
.foot-links { display:flex; gap:22px; flex-wrap:wrap; font-size:13px; }
footer small { color:#8094a0; font-size:12px; }

/* a tool page: where you are, the heading, the screenshot */
.crumbs { display:flex; gap:10px; align-items:center; flex-wrap:wrap; padding-top:22px; font:11px var(--mono); letter-spacing:.6px; color:var(--muted); }
.crumbs a:hover { color:var(--accent); }
.crumbs span { color:#546570; }
.crumbs b { font-weight:500; color:var(--fg); }
.tool-hero { padding-top:44px; padding-bottom:44px; }
.tool-hero h1 { font:500 clamp(38px,4.6vw,62px)/1.1 var(--head); letter-spacing:-1.4px; margin:22px 0 18px; max-width:900px; text-wrap:balance; }
.tool-hero h1 span { color:var(--accent); }
.tool-hero .lead { max-width:680px; }
.tool-hero .fine { margin-top:14px; }
.shot { margin:0; }
.shot .app-window { border-radius:7px; }
.shot img { width:100%; }
.shot figcaption { font-size:13px; color:var(--muted); margin-top:12px; }

/* a tool page: its sections */
.tool-body > section { padding-top:84px; }
.section-head { max-width:720px; margin-bottom:30px; }
.section-head h2 { font-size:38px; margin:14px 0 12px; text-wrap:balance; }
.section-head p { margin:0; font-size:16px; }
.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--border); border:1px solid var(--border); border-radius:6px; overflow:hidden; }
.feature-grid article { background:var(--bg); padding:26px 26px 24px; }
.feature-grid h3 { font:500 21px var(--head); margin:0 0 8px; }
.feature-grid p { margin:0; font-size:14px; }
.ex-list { list-style:none; margin:0; padding:0; border-top:1px solid var(--border); }
.ex-list li { display:grid; grid-template-columns:1.15fr .9fr 1.5fr; gap:8px 28px; align-items:baseline; padding:15px 4px; border-bottom:1px solid var(--border); }
.ex-list code { font-size:15px; }
.ex-list b { font:500 15px var(--mono); color:var(--accent); overflow-wrap:anywhere; }
.ex-list span { font-size:14px; color:var(--muted); }
.ex-list .ex-head { padding:10px 4px; }
.ex-list .ex-head span { font:500 11px var(--mono); letter-spacing:1.4px; color:#738893; }
.band { background:var(--surface); border-block:1px solid var(--border); margin-top:84px; padding:70px 0 !important; }
.split { display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:start; }
.split h2 { font-size:36px; margin:14px 0 14px; text-wrap:balance; }
.split p { font-size:15px; }
.split .shot figcaption { margin-top:10px; }
.chips { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.chips li { border:1px solid var(--border); border-radius:4px; background:var(--bg); padding:7px 11px; font-size:13px; color:#c4d1d8; }
.chips li small { color:var(--muted); font:11px var(--mono); margin-left:6px; }
.groups { display:grid; gap:22px; }
.groups h3 { font:500 11px var(--mono); letter-spacing:1.4px; color:var(--muted); margin:0 0 10px; }
.note { border-left:2px solid var(--accent); padding:2px 0 2px 16px; font-size:14px; color:var(--muted); margin-top:22px; }
.faq-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px 60px; border-top:1px solid var(--border); padding-top:8px; }
.faq-grid h3 { font:500 20px var(--head); margin:22px 0 6px; }
.faq-grid p { margin:0; font-size:14.5px; }
.lost { padding-top:110px; }
.lost h1 { font:500 clamp(40px,5vw,62px)/1.1 var(--head); letter-spacing:-1.2px; margin:22px 0; }
.lost h1 span { color:var(--accent); }
.lost .hero-actions { justify-content:center; }

@media (max-width: 1000px) {
  .tool-list { grid-template-columns:repeat(2,1fr); }
  .foot-tools { grid-template-columns:repeat(2,auto); }
  .feature-grid { grid-template-columns:repeat(2,1fr); }
  .split { gap:36px; }
}
@media (max-width: 700px) {
  .tools-top { margin-top:38px; }
  .tool-list { grid-template-columns:1fr; }
  .tool-about { padding:16px 16px 12px; }
  .tool-open { padding:10px 16px; }
  .foot-top { flex-direction:column; gap:24px; }
  .foot-tools { grid-template-columns:1fr 1fr; width:100%; }
  .tool-hero { padding-top:30px; padding-bottom:30px; }
  .tool-hero h1 { font-size:40px; letter-spacing:-.8px; }
  .tool-body > section { padding-top:56px; }
  .section-head h2, .split h2 { font-size:31px; }
  .feature-grid { grid-template-columns:1fr; }
  .feature-grid article { padding:20px; }
  .ex-list li { grid-template-columns:1fr; gap:4px; }
  .ex-list .ex-head { display:none; }
  .band { margin-top:56px; padding:48px 0 !important; }
  .split, .faq-grid { grid-template-columns:1fr; }
  .others { padding-top:50px; }
  .shot { max-width:420px; margin-inline:auto; }
  /* the demonstration window: one column, so that the mathematics in it is not broken across lines */
  .demo-columns { grid-template-columns:1fr !important; }
  .demo-columns .chart { height:auto; aspect-ratio:460/260; }
  .app-body { min-height:0; }
  .demo-heading p { max-width:none; }
}

/* Legibility: the smallest text of the design, a little larger. The drawings of the app (the demonstration window and the
   sheet of paper) keep their small type, as pictures of a screen. */
.category-grid span { font-size:12.5px; }
.demo-caption p { font-size:13.5px; }
.panel-heading { font-size:10.5px; }
.scale { font-size:11px; }
.beam-answer small { font-size:10px; }
.engineering .model-note { font-size:11.5px; }
.billing button { font-size:13px; }
.billing span { font-size:11px; }
.plan p { font-size:13.5px; }
.plan ul { font-size:14px; }
.pill { font-size:10.5px; }
.pricing-note { font-size:13px; }
.student-price small { font-size:13px; }
@media (max-width: 700px) {
  .demo-caption p { font-size:12.5px; }
  .engineering .model-note { line-height:1.5; }
}