/* OneRig website. Daylight: light, the app's own look and section colours.
   Tokens first; components use tokens only. No third-party requests. */
:root {
  color-scheme: light;
  /* brand, locked */
  --blue: #2F6FDB;
  --green: #1d9d55;
  --charcoal: #171b24;
  /* surfaces and ink */
  --ground: #f3f4f7;
  --surface: #ffffff;
  --edge: #e1e4ea;
  --edge-strong: #d7dbe3;
  --ink: #11151f;
  --text: #1d2230;
  --text-2: #4a5263;
  --text-3: #6a7284;
  /* section colours, from the app's Home screen */
  --kit-bg: #f1faf4;     --kit-edge: #bfe5cd;     --kit-ink: #17834a;
  --deploy-bg: #fdf3f2;  --deploy-edge: #f3c9c4;  --deploy-ink: #c0392b;
  --restore-bg: #f4f2fd; --restore-edge: #d5cef5; --restore-ink: #5b3fbf;
  --move-bg: #eff4fd;    --move-edge: #c9dbf8;    --move-ink: #1f4f9e;
  --violet: #5b3fbf;
  /* type: system font, as the app uses. See docs/decisions.md item 5. */
  --font-text: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --radius: 14px;
  --gutter: 28px;
  --max: 1136px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--ground); color: var(--text);
  font-family: var(--font-text); line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 4px; }
.page { overflow: hidden; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.skip { position: absolute; left: -9999px; top: 0; background: var(--surface); padding: 10px 14px; z-index: 10; }
.skip:focus { left: 12px; top: 12px; }

/* header */
.site-header { display: flex; align-items: center; gap: 28px; padding: 22px 0; border-bottom: 1px solid var(--edge); }
.logo { display: block; flex: none; }
.logo svg { height: 38px; width: auto; display: block; }
.nav { display: flex; gap: 26px; margin-left: auto; font-size: 14px; }
.nav a { color: var(--text-2); font-weight: 500; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); }
.menu { display: none; margin-left: auto; position: relative; }
.menu summary { list-style: none; cursor: pointer; font-size: 14px; font-weight: 600; color: var(--text);
  border: 1px solid var(--edge-strong); background: var(--surface); border-radius: 10px; padding: 8px 14px; }
.menu summary::-webkit-details-marker { display: none; }
.menu-links { position: absolute; right: 0; top: calc(100% + 8px); min-width: 220px; z-index: 5;
  background: var(--surface); border: 1px solid var(--edge); border-radius: 12px; padding: 8px;
  box-shadow: 0 12px 30px rgba(20, 30, 60, .14); display: grid; }
.menu-links a { padding: 10px 12px; border-radius: 8px; font-size: 15px; color: var(--text); }
.menu-links a:hover { background: var(--ground); }

/* buttons */
.btn { display: inline-block; font-weight: 700; border-radius: 10px; padding: 10px 18px; font-size: 14px;
  background: var(--blue); color: #fff; }
.btn.ghost { background: var(--surface); border: 1px solid var(--edge-strong); color: var(--text); }
.btn.on-dark { background: transparent; border: 1px solid #3a4252; color: #fff; }

/* hero */
.hero { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 40px; align-items: center; padding: 64px 0 20px; }
.hero h1 { font-size: clamp(32px, 4vw, 50px); line-height: 1.08; letter-spacing: -.025em; font-weight: 800;
  margin: 0 0 18px; color: var(--ink); }
.hero h1 .accent { color: var(--blue); }
.lede { font-size: 17px; color: var(--text-2); margin: 0; max-width: 520px; }
.hero-shot { margin-right: -260px; }
.shot { display: block; width: 100%; height: auto; border-radius: 11px;
  box-shadow: 0 22px 50px rgba(20, 30, 60, .20), 0 0 0 1px rgba(20, 30, 60, .10); }

/* sections */
.section { padding: 76px 0 0; scroll-margin-top: 12px; }
.section h2 { font-size: clamp(24px, 2.6vw, 32px); letter-spacing: -.02em; line-height: 1.15; margin: 0 0 6px;
  color: var(--ink); display: flex; align-items: center; gap: 12px; }
.section h2::before { content: ""; flex: none; width: 10px; height: 28px; border-radius: 5px; background: var(--bar, var(--blue)); }
.bar-blue { --bar: var(--blue); } .bar-green { --bar: var(--green); }
.bar-violet { --bar: var(--violet); } .bar-ink { --bar: var(--ink); }
.seclede { color: var(--text-3); font-size: 15.5px; margin: 0 0 26px; }
.section h2 + .grid { margin-top: 26px; }
.grid { display: grid; gap: 16px; }
.grid.two { grid-template-columns: repeat(2, 1fr); }
.grid.three { grid-template-columns: repeat(3, 1fr); }
.card { background: var(--surface); border: 1px solid var(--edge); border-radius: var(--radius); padding: 22px;
  box-shadow: 0 1px 2px rgba(20, 30, 60, .04); }
.card h3 { margin: 0 0 8px; font-size: 17px; color: var(--ink); line-height: 1.3; }
.card p { margin: 0; font-size: 14px; color: var(--text-2); }
.step { display: block; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  margin-bottom: 10px; color: var(--text-3); }
.card.kit { background: var(--kit-bg); border-color: var(--kit-edge); }
.card.kit .step { color: var(--kit-ink); }
.card.deploy { background: var(--deploy-bg); border-color: var(--deploy-edge); }
.card.deploy .step { color: var(--deploy-ink); }
.card.restore { background: var(--restore-bg); border-color: var(--restore-edge); }
.card.restore .step { color: var(--restore-ink); }
.card.move { background: var(--move-bg); border-color: var(--move-edge); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 10px; padding: 0; list-style: none; }
.chip { font-size: 13px; font-weight: 600; padding: 6px 14px; border-radius: 999px; border: 1px solid; }
.chip.live { color: var(--kit-ink); border-color: var(--kit-edge); background: var(--kit-bg); }
.chip.soon { color: var(--text-3); border-color: var(--edge-strong); background: var(--surface); font-weight: 500; }
.note { font-size: 13px; color: var(--text-3); max-width: 820px; margin: 18px 0 0; }
.band { background: var(--surface); border-top: 1px solid var(--edge); border-bottom: 1px solid var(--edge);
  margin-top: 76px; padding-bottom: 64px; }

/* header button and hero actions (hero "Download first") */
.navbtn { white-space: nowrap; }
.btn.green { background: var(--kit-ink); }
/* no public download before 1.0: the button reads "Coming soon" and does nothing */
.btn.soon, .btn.green.soon { background: var(--surface); border: 1px dashed var(--edge-strong); color: var(--text-2); cursor: default; }
.hero-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 26px; }
.hero-actions .btn { font-size: 16px; padding: 13px 24px; }
.freeline { font-size: 14px; color: var(--text-2); margin: 14px 0 0; max-width: 520px; }
.req { font-size: 13px; color: var(--text-3); margin: 14px 0 0; }

/* pricing: "free and license" */
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 16px; align-items: stretch; }
.pname { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.freecard { background: var(--kit-bg); border: 1px solid var(--kit-edge); border-radius: 16px; padding: 28px 26px; }
.freecard .pname { color: var(--kit-ink); }
.freecard h3 { margin: 2px 0 0; font-size: 20px; color: var(--ink); }
.freecard ul { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; font-size: 14px; }
.freecard li { display: inline-flex; gap: 7px; align-items: center; }
.freecard svg { width: 15px; height: 15px; color: var(--kit-ink); flex: none; }
.freecard p { font-size: 14px; color: var(--text-2); margin: 14px 0 0; }
.freecard .btn { margin-top: 20px; }
.pcard { background: var(--surface); border: 1px solid var(--edge); border-radius: 16px; padding: 26px 24px;
  display: flex; flex-direction: column; }
.pcard.feature { border: 2px solid var(--blue); box-shadow: 0 10px 30px rgba(47, 111, 219, .12); }
.pcard.feature .pname { color: var(--blue); }
.pcard > .btn { margin-top: 18px; text-align: center; font-size: 15px; padding: 12px 18px; }
.opts { display: grid; gap: 10px; margin: 18px 0; }
.opt { display: grid; grid-template-columns: 22px 1fr auto; gap: 2px 12px; align-items: center; cursor: pointer;
  border: 1px solid var(--edge-strong); border-radius: 12px; padding: 14px 16px; background: var(--surface); }
.opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.opt i { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--edge-strong); grid-row: 1 / span 2; display: block; }
.opt.on, .opt:has(input:checked) { border: 2px solid var(--blue); padding: 13px 15px; background: #f7faff; }
.opt.on i, .opt:has(input:checked) i { border-color: var(--blue); box-shadow: inset 0 0 0 4px #fff; background: var(--blue); }
.opt:has(input:focus-visible) { outline: 2px solid var(--blue); outline-offset: 3px; }
.opt b { font-size: 15.5px; color: var(--ink); }
.opt span { grid-column: 2; font-size: 13.5px; color: var(--text-2); }
.opt .amt { grid-column: 3; grid-row: 1 / span 2; text-align: right; font-size: 22px; font-weight: 800; color: var(--ink); white-space: nowrap; }
.opt .amt s { font-size: 14px; font-weight: 600; color: var(--text-3); margin-left: 6px; }
.opt .amt small { font-size: 13px; font-weight: 600; color: var(--text-3); }
.getlabel { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); margin: 0 0 10px; }
.plist { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; font-size: 14px; color: var(--text); }
.plist.two { grid-template-columns: 1fr 1fr; gap: 9px 18px; }
.plist li { display: grid; grid-template-columns: 18px 1fr; gap: 8px; align-items: start; }
.plist svg { width: 16px; height: 16px; margin-top: 3px; color: var(--green); }
.studio-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 16px;
  background: var(--surface); border: 1px solid var(--edge); border-radius: 14px; padding: 16px 22px; }
.studio-row b { color: var(--ink); font-size: 16px; }
.studio-row span { display: block; font-size: 14px; color: var(--text-2); }
.studio-row .amt { font-size: 24px; font-weight: 800; color: var(--ink); margin-left: auto; }
.pnotes { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.pnote { border: 1px dashed var(--edge-strong); border-radius: 12px; padding: 14px 18px; font-size: 14px; color: var(--text-2); }
.pnote b { color: var(--ink); }
.pnote a { color: var(--blue); font-weight: 600; }


/* ===== Kits page (draft, from design round 4) ===== */
.pagetop { padding-top: 56px; }
.pagetop h1 { font-size: clamp(30px, 3.6vw, 44px); letter-spacing: -.025em; line-height: 1.1; font-weight: 800; margin: 0 0 6px;
  color: var(--ink); display: flex; align-items: center; gap: 12px; }
.pagetop h1::before { content: ""; flex: none; width: 10px; height: 34px; border-radius: 5px; background: var(--bar, var(--green)); }
.freetag { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  color: var(--kit-ink); background: var(--kit-bg); border: 1px solid var(--kit-edge); border-radius: 6px; padding: 2px 8px; margin-right: 6px; vertical-align: 1px; }
.more { margin: 18px 0 0; font-size: 15px; font-weight: 600; }
.more a { color: var(--blue); }
.more a:hover { text-decoration: underline; }
.closing { text-align: center; padding-bottom: 8px; }
.closing .hero-actions { justify-content: center; margin-top: 0; }
.closing .freeline { margin-left: auto; margin-right: auto; }
/* 1. how a Kit works */
.flow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:8px;align-items:start;background:var(--surface);
  border:1px solid var(--edge);border-radius:16px;padding:34px 26px 30px;text-align:center}
.flow svg{width:112px;height:auto;color:var(--ink);display:block;margin:0 auto 14px}
.flow b{display:block;font-size:18px;color:var(--ink)}
.flow span{display:block;font-size:14.5px;color:var(--text-2);margin-top:4px}
.flow .arr{font-size:26px;color:var(--text-3);padding-top:36px}
.rides{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;align-items:center;margin-top:16px;
  background:var(--deploy-bg);border:1px solid var(--deploy-edge);border-radius:16px;padding:20px 24px}
.rides .tag{grid-row:1 / span 2;width:46px;height:46px;border-radius:12px;background:#fff;border:1px solid var(--deploy-edge);display:grid;place-items:center}
.rides .tag svg{width:26px;height:26px;color:var(--deploy-ink)}
.rides b{font-size:17px;color:var(--ink)}
.rides p{margin:0;font-size:14.5px;color:var(--text-2);grid-column:2}
.parts-label{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);margin:26px 0 10px}
.parts{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.part{border-radius:12px;padding:16px 18px;border:1px solid}
.part b{display:block;font-size:15.5px}.part span{display:block;font-size:13.5px;color:var(--text-2);margin-top:4px}
.part.set{background:#efecfb;border-color:#d8d1f5}.part.set b{color:#4a3a9a}
.part.plug{background:#e3f3ec;border-color:#bfe3d2}.part.plug b{color:#12704e}
.part.extra{background:#fdf3df;border-color:#f1dba8}.part.extra b{color:#8a5a00}
.part.pack{background:#e9f1fd;border-color:#c9dbf8}.part.pack b{color:#1f4f9e}
/* what a Kit can carry: section cards (Zach's pick: layout A, with a Jump to row) */
.daw{background:var(--surface);border:1px solid var(--edge);border-radius:16px;padding:22px 24px;margin-bottom:16px}
.daw-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.daw-tab{font-size:14px;font-weight:700;padding:7px 16px;border-radius:999px;border:1px solid var(--edge-strong);background:var(--surface);color:var(--text-2)}
.daw-tab.on{background:var(--sec);border-color:var(--sec);color:#fff}
.daw-pane{display:none}.daw-pane.on{display:block}
.daw-tab{cursor:pointer;font-family:inherit}
.jchip{font-family:inherit}
.daw h3{margin:0 0 4px;font-size:19px;color:var(--ink)}
.daw .blurb{margin:0 0 14px;font-size:14.5px;color:var(--text-2)}
.rowlist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px 28px}
.rowlist li{font-size:14px;color:var(--text-2);padding-left:14px;border-left:3px solid var(--sec)}
.rowlist b{display:block;color:var(--ink);font-size:14.5px}
.also{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);margin:22px 0 10px}
.secgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.sec{background:var(--surface);border:1px solid var(--edge);border-left:4px solid var(--sec);border-radius:14px;padding:18px 20px}
.sec .lab{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--sectext,var(--sec))}
.sec h3{margin:6px 0 6px;font-size:16.5px;color:var(--ink);line-height:1.3}
.sec p{margin:0;font-size:13.5px;color:var(--text-2)}
.sec .optin{display:inline-block;margin-top:10px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#8a5a00;background:#fdf3df;border:1px solid #f1dba8;border-radius:6px;padding:2px 7px}
.sec.wide{grid-column:span 2}
/* Jump to row: each chip scrolls to its card */
.jump{display:flex;flex-wrap:nowrap;gap:6px;align-items:center;margin-bottom:18px;overflow-x:auto;padding:3px 3px 6px;margin-left:-3px;scrollbar-width:none}
.jump::-webkit-scrollbar{display:none}
.jump .jl{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);margin-right:4px;flex:none;white-space:nowrap}
.jchip{flex:none;white-space:nowrap;font-size:13px;font-weight:700;padding:5px 10px;border-radius:9px;border:1px solid var(--edge-strong);border-left:4px solid var(--sec);
  background:var(--surface);color:var(--sectext,var(--sec));cursor:pointer}
.daw,.sec{scroll-margin-top:18px}
.daw:target,.sec:target{box-shadow:0 0 0 3px color-mix(in srgb,var(--sec) 35%,transparent)}
.jchip:hover{background:color-mix(in srgb,var(--sec) 10%,#fff)}
/* 3. you see every file */
.see{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.seecard{background:var(--surface);border:1px solid var(--edge);border-radius:16px;padding:22px;display:flex;flex-direction:column}
.seecard .step{margin-bottom:8px}
.seecard h3{margin:0 0 8px;font-size:18px;color:var(--ink);line-height:1.25}
.seecard p{margin:0 0 16px;font-size:14px;color:var(--text-2)}
.mini{margin-top:auto;border:1px solid var(--edge);border-radius:12px;background:var(--ground);padding:12px 14px;font-size:12.5px;color:var(--text-2)}
.mini .mrow{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;align-items:center;padding:7px 0;border-top:1px solid var(--edge)}
.mini .mrow:first-child{border-top:0;padding-top:0}
.mini .add{font-size:11px;font-weight:700;color:#fff;background:var(--blue);border-radius:6px;padding:4px 9px}
.mini b{color:var(--ink);font-size:13px}.mini .cnt{grid-column:2;color:var(--blue);font-size:12px}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:10px}
.tile{border-radius:9px;padding:8px 10px;background:#fff;border:1px solid var(--edge)}
.tile b{display:block;font-size:18px}.tile.new b{color:#17834a}.tile.dif b{color:#b26a00}.tile.same b{color:var(--text-3)}
.seg{display:inline-grid;grid-template-columns:auto auto;border:1px solid var(--edge-strong);border-radius:8px;overflow:hidden;font-weight:700;font-size:12px}
.seg span{padding:5px 10px;background:#fff;color:var(--text-2)}.seg span.on{background:var(--blue);color:#fff}
.back li{display:flex;gap:8px;align-items:center}
.mini ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.dot{width:8px;height:8px;border-radius:50%;flex:none}
@media(max-width:860px){
  .flow{grid-template-columns:1fr;gap:4px;padding:26px 18px}.flow .arr{padding:6px 0;transform:rotate(90deg)}
  .parts{grid-template-columns:1fr 1fr}.rowlist,.secgrid,.see{grid-template-columns:1fr}.sec.wide{grid-column:auto}
  .rides{grid-template-columns:1fr}.rides .tag{grid-row:auto}.rides p{grid-column:1}
  .jump{margin-right:calc(var(--gutter) * -1)}
}

/* ===== Batch Install page (draft): a simulation of the app's screens ===== */
.bi-window { background: #fff; border: 1px solid var(--edge); border-radius: 16px; overflow: hidden;
  box-shadow: 0 18px 44px rgba(20, 30, 60, .12); font-size: 14px; }
.bi-bar { background: #f2f3f5; border-bottom: 1px solid var(--edge); padding: 14px 18px; display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.bi-barlabel { color: var(--text); }
.bi-fmts { display: flex; flex-wrap: wrap; gap: 6px; }
.bi-fb { font: 800 11.5px/1 var(--font-text); letter-spacing: .07em; padding: 8px 12px; border-radius: 7px; cursor: pointer; border: 1px solid; }
.bi-fb.all { color: #5d6270; background: #e6e8ec; border-color: #cfd3da; } .bi-fb.all.on { background: #2a2d36; border-color: #2a2d36; color: #fff; }
.bi-fb.aax { color: #6a62c4; background: rgba(83,74,183,.12); border-color: rgba(83,74,183,.35); } .bi-fb.aax.on { background: #4a41a8; border-color: #4a41a8; color: #fff; }
.bi-fb.au { color: #2f9a62; background: rgba(46,160,100,.12); border-color: rgba(46,160,100,.35); } .bi-fb.au.on { background: #1f8a4d; border-color: #1f8a4d; color: #fff; }
.bi-fb.vst { color: #c9722a; background: rgba(210,110,30,.12); border-color: rgba(210,110,30,.35); } .bi-fb.vst.on { background: #d9651a; border-color: #d9651a; color: #fff; }
.bi-fb.clap { color: #c9537f; background: rgba(200,60,110,.11); border-color: rgba(200,60,110,.35); } .bi-fb.clap.on { background: #c2407a; border-color: #c2407a; color: #fff; }
.bi-help { flex: 1 1 100%; margin: 2px 0 0; font-size: 12.5px; color: var(--text-2); }
.bi-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px 8px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.bi-replay { font: 600 12.5px/1 var(--font-text); letter-spacing: 0; text-transform: none; color: var(--blue); background: #eef4fe; border: 1px solid #cfe0fb; border-radius: 8px; padding: 7px 11px; cursor: pointer; }
.bi-group { margin: 0 18px 14px; border: 1px solid #dfe3ea; border-radius: 12px; overflow: hidden; }
.bi-gh { display: flex; align-items: center; gap: 9px; padding: 9px 14px; font-size: 10.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.bi-tag { font-size: 9.5px; font-weight: 800; padding: 3px 7px; border-radius: 6px; color: #fff; letter-spacing: .05em; }
.bi-count { margin-left: auto; font-size: 11px; letter-spacing: 0; }
.bi-group.pkg .bi-gh { background: #e9f1fd; color: #1f4f9e; } .bi-group.pkg .bi-tag { background: #2f6fdb; }
.bi-group.dmg .bi-gh { background: #ece9fb; color: #4a3a9a; } .bi-group.dmg .bi-tag { background: #5b3fbf; }
.bi-group.reading .bi-gh { background: #eceef2; color: #4a5263; } .bi-group.reading .bi-tag { background: #5d6270; }
.bi-row, .bi-rrow, .bi-crow { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; padding: 11px 14px; border-top: 1px solid #eceef2; }
.bi-row[hidden], .bi-group[hidden] { display: none; }
.bi-row.bi-in { animation: bi-in .35s ease-out; }
@keyframes bi-in { from { background: #eef4fe; opacity: 0; } to { background: #fff; opacity: 1; } }
.bi-main b { font-size: 15.5px; color: var(--ink); font-weight: 700; }
.bi-sub { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-top: 3px; font-size: 12.5px; color: var(--text-2); }
.bi-file { margin-left: 2px; }
.bi-all { margin-left: 6px; font-size: 11.5px; font-weight: 700; color: var(--blue); background: #eef4fe; border-radius: 6px; padding: 2px 7px; }
.bi-size { font-size: 13.5px; font-weight: 600; color: var(--text); white-space: nowrap; }
.fmt { font: 600 9.5px/1 var(--font-text); letter-spacing: .05em; padding: 3px 5px; border-radius: 3px; border: 0; text-transform: uppercase; }
button.fmt { cursor: pointer; }
.fmt.aax { background: rgba(83,74,183,.14); color: #4236a2; } .fmt.au { background: rgba(46,160,100,.15); color: #1c7747; }
.fmt.vst3 { background: rgba(210,110,30,.15); color: #ad5009; } .fmt.vst { background: rgba(210,110,30,.12); color: #ad5009; }
.fmt.clap { background: rgba(200,60,110,.14); color: #ab285c; }
.fmt.off { opacity: .45; text-decoration: line-through; background: transparent; box-shadow: inset 0 0 0 1px currentColor; }
.bi-rrow { grid-template-columns: auto 1fr; }
.bi-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--blue); }
.bi-prog { height: 3px; background: #e6e9ef; border-radius: 2px; margin-top: 8px; overflow: hidden; }
.bi-prog i { display: block; height: 100%; width: 0; background: var(--blue); border-radius: 2px; transition: width .09s linear; }
.bi-foot { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; padding: 14px 18px; border-top: 1px solid var(--edge); background: #f7f8fa; font-size: 13px; color: var(--text-2); }
.bi-warn { color: #8a5a00; }
.bi-warn[hidden] { display: none; }
.bi-total { margin-left: auto; font-weight: 700; color: #1f4f9e; background: #eef4fe; border: 1px solid #cfe0fb; border-radius: 9px; padding: 9px 13px; }
.bi-total.plain { margin-left: 0; margin-right: auto; background: transparent; border: 0; padding: 0; color: var(--ink); }
.bi-cancel { font-weight: 600; color: var(--text); background: #eceef2; border-radius: 9px; padding: 10px 16px; }
/* the check before anything installs */
.bi-chead { padding: 18px 18px 12px; }
.bi-chead b { display: block; font-size: 19px; color: var(--ink); }
.bi-chead span { font-size: 13.5px; color: var(--text-2); }
.bi-toggles { display: flex; flex-wrap: wrap; gap: 10px; padding: 0 18px 14px; }
.bi-tog { display: inline-flex; gap: 8px; align-items: center; font-weight: 700; font-size: 13.5px; color: var(--ink); background: #f2f3f5; border: 1px solid transparent; border-radius: 9px; padding: 9px 13px; cursor: pointer; }
.bi-tog.gold { background: #fdf3df; border-color: #f1dba8; color: #8a5a00; }
.bi-group.up { background: #f5f9ff; border-color: #cfe0fb; } .bi-group.up .bi-gh { color: #1f4f9e; padding-bottom: 0; } .bi-group.up .bi-tag { background: #fff; color: #1f4f9e; box-shadow: inset 0 0 0 1px #cfe0fb; }
.bi-group.same .bi-gh { color: #4a5263; padding-bottom: 0; } .bi-group.same .bi-tag { background: #eceef2; color: #4a5263; }
.bi-check .bi-count { margin-left: 0; font-weight: 700; }
.bi-explain { margin: 4px 14px 8px; font-size: 12.5px; color: var(--text-2); }
.bi-crow { grid-template-columns: auto 1fr auto; align-items: start; }
.bi-crow .bi-inst { margin-top: 4px; width: 16px; height: 16px; accent-color: var(--blue); }
.bi-crow.skipped .bi-main b, .bi-crow.skipped .bi-size { color: var(--text-3); font-weight: 600; }
.bi-meta { font-size: 13px; color: var(--text-2); margin-top: 2px; }
.bi-park { display: flex; gap: 7px; align-items: center; margin-top: 7px; font-size: 12.5px; color: #8a5a00; cursor: pointer; }
.bi-crow.skipped .bi-park { display: none; }
.bi-fine { margin: 0 18px 12px; font-size: 12px; color: var(--text-3); }
.bi-legend { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 18px; }
.bi-lg { border-radius: 12px; padding: 14px 16px; border: 1px solid var(--edge); background: var(--surface); border-top: 3px solid var(--lg); }
.bi-lg b { display: block; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--lg); }
.bi-lg span { display: block; font-size: 13.5px; color: var(--text-2); margin-top: 4px; }
.bi-lg.up { --lg: #2f6fdb; } .bi-lg.down { --lg: #c0392b; } .bi-lg.unk { --lg: #b26a00; } .bi-lg.same { --lg: #6a7284; }
@media (max-width: 860px) {
  .bi-group { margin: 0 10px 12px; } .bi-bar, .bi-h, .bi-foot, .bi-chead { padding-left: 12px; padding-right: 12px; }
  .bi-toggles { padding: 0 12px 12px; } .bi-total { margin-left: 0; } .bi-legend { grid-template-columns: 1fr 1fr; }
  .bi-main b { font-size: 14.5px; } .bi-row, .bi-rrow, .bi-crow { padding: 10px 11px; gap: 8px; }
}
@media (prefers-reduced-motion: reduce) { .bi-row.bi-in { animation: none; } }

/* ===== Headline font (Zach, 2026-11-11): Barlow Condensed Bold, the wordmark's own face =====
   Self-hosted under a private family name, so no font installed on a visitor's
   Mac can be substituted for it. It applies only when <html data-hf="barlow">,
   which src/site.json's "headline_font" sets. Set that to "system" and every
   rule below goes quiet: the system font look is kept, not removed. */
@font-face { font-family: "OR Display"; src: url(/assets/fonts/or-display-700.ttf) format("truetype");
  font-weight: 700; font-style: normal; font-display: swap; }
html[data-hf="barlow"] { --font-display: "OR Display", "Arial Narrow", var(--font-text); }
html[data-hf="barlow"] .hero h1 { font-family: var(--font-display); font-weight: 700; letter-spacing: -.018em;
  font-size: clamp(36px, 4.5vw, 58px); line-height: 1.02; }
html[data-hf="barlow"] .pagetop h1 { font-family: var(--font-display); font-weight: 700; letter-spacing: -.016em;
  font-size: clamp(34px, 4.1vw, 54px); line-height: 1.04; }
html[data-hf="barlow"] .section h2 { font-family: var(--font-display); font-weight: 700; letter-spacing: -.014em;
  font-size: clamp(28px, 3.1vw, 39px); line-height: 1.08; }
html[data-hf="barlow"] .card h3, html[data-hf="barlow"] .sec h3, html[data-hf="barlow"] .seecard h3,
html[data-hf="barlow"] .daw h3, html[data-hf="barlow"] .flow b,
html[data-hf="barlow"] .rides b { font-family: var(--font-display); font-weight: 700; letter-spacing: -.008em; font-size: 21px; line-height: 1.2; }
/* Zach, 2026-11-11: inside the pricing section, prices and card text stay in the system font.
   Only the section's "Pricing" heading takes the headline font. */

/* the PluginHub card */
.family { padding-top: 76px; }
.famcard { display: flex; align-items: center; justify-content: space-between; gap: 24px;
  border-radius: 16px; padding: 26px 28px; background: #12151c; color: #e8ebf1; }
.famcard svg { height: 30px; width: auto; display: block; margin: 8px 0 6px; }
.famcard p { margin: 0; font-size: 14px; color: #b9c0cd; }
.eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #8a93a6; }

/* footer */
.site-footer { display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; font-size: 13px;
  padding: 26px 0 48px; margin-top: 72px; border-top: 1px solid var(--edge); color: var(--text-3); }
.site-footer a { color: var(--text); }
.site-footer a:hover { text-decoration: underline; }

@media (max-width: 860px) {
  :root { --gutter: 18px; }
  .nav { display: none; }
  .menu { display: block; margin-left: 8px; }
  .navbtn { margin-left: auto; font-size: 13px; padding: 8px 12px; }
  .hero-actions .btn { flex: 1 1 100%; text-align: center; }
  .split, .pnotes, .plist.two { grid-template-columns: 1fr; }
  .studio-row { flex-wrap: wrap; }
  .opt { gap: 4px 10px; }
  .opt i { grid-row: 1; }
  .opt .amt { font-size: 18px; grid-row: 1; }
  .opt span:not(.amt) { grid-column: 2 / span 2; }
  .logo svg { height: 32px; }
  .hero { grid-template-columns: 1fr; padding-top: 34px; gap: 26px; }
  .hero-shot { margin-right: -150px; }
  .section { padding-top: 54px; }
  .band { margin-top: 54px; padding-bottom: 44px; }
  .grid.two, .grid.three { grid-template-columns: 1fr; }
  .famcard { flex-direction: column; align-items: flex-start; }
  .site-footer { margin-top: 48px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }