/* ---- tokens: light is the base, both dark paths redefine only these ---- */
    :root {
      --ground:      #F6F8F6;
      --surface:     #FFFFFF;
      --surface-2:   #F0F3F0;
      --line:        #DCE3DE;
      --line-strong: #C2CDC6;
      --ink:         #17211E;
      --ink-soft:    #55625C;
      --ink-faint:   #7E8A84;
      /* Bootstrap components (fearby.css) read these --bs-* tokens for text
         color, but Bootstrap only re-points them for dark mode when a
         [data-bs-theme="dark"] attribute is set on the page, which nothing
         here does. Re-declaring them alongside our own tokens keeps every
         Bootstrap-supplied color (.card, .card-body, form controls, etc.)
         tied to the same light/dark switch as --ink/--ink-soft, instead of
         being stuck on Bootstrap's light-mode value forever. */
      --bs-body-color:      var(--ink);
      --bs-secondary-color: var(--ink-soft);
      --bs-emphasis-color:  var(--ink);
      --brand:       #1F6F5C;
      --brand-ink:   #FFFFFF;
      --brand-soft:  #E4F0EB;
      --amber:       #8A5A12;
      --amber-soft:  #FBF1DE;
      --amber-line:  #E8D2A4;
      --shadow:      0 1px 2px rgba(23,33,30,.06), 0 8px 24px rgba(23,33,30,.07);
      --radius:      10px;
    }
    @media (prefers-color-scheme: dark) {
      :root:not([data-theme="light"]) {
        --ground:      #0F1513;
        --surface:     #171F1C;
        --surface-2:   #1E2825;
        --line:        #2A3532;
        --line-strong: #3A4642;
        --ink:         #E7EEEA;
        --ink-soft:    #C4CEC9;
        --ink-faint:   #7F8C86;
        --brand:       #4FA98F;
        --brand-ink:   #0B1310;
        --brand-soft:  #172A24;
        --amber:       #E0B268;
        --amber-soft:  #251E12;
        --amber-line:  #4A3B21;
        --shadow:      0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
        --bs-body-color:      var(--ink);
        --bs-secondary-color: var(--ink-soft);
        --bs-emphasis-color:  var(--ink);
      }
    }
    :root[data-theme="dark"] {
      --ground:      #0F1513;
      --surface:     #171F1C;
      --surface-2:   #1E2825;
      --line:        #2A3532;
      --line-strong: #3A4642;
      --ink:         #E7EEEA;
      --ink-soft:    #C4CEC9;
      --ink-faint:   #7F8C86;
      --bs-body-color:      var(--ink);
      --bs-secondary-color: var(--ink-soft);
      --bs-emphasis-color:  var(--ink);
      --brand:       #4FA98F;
      --brand-ink:   #0B1310;
      --brand-soft:  #172A24;
      --amber:       #E0B268;
      --amber-soft:  #251E12;
      --amber-line:  #4A3B21;
      --shadow:      0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
    }

    *, *::before, *::after { box-sizing: border-box; }

    body {
      margin: 0;
      background: var(--ground);
      color: var(--ink);
      font-family: "Source Sans 3", -apple-system, "Segoe UI", system-ui, sans-serif;
      font-size: 16px;
      line-height: 1.55;
      -webkit-font-smoothing: antialiased;
    }

    /* ---- bootstrap-compatible subset ---- */
    .container { width: 100%; max-width: 1040px; margin-inline: auto; padding-inline: 20px; }
    .row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
    @media (max-width: 800px) { .row { grid-template-columns: minmax(0, 1fr); } }

    .card {
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      display: flex;
      flex-direction: column;
    }
    .card-body { padding: 22px; display: flex; flex-direction: column; gap: 14px; flex: 1; }

    .btn {
      display: inline-flex; align-items: center; justify-content: center; gap: 9px;
      font-family: "Archivo", sans-serif; font-weight: 600; font-size: 16px;
      padding: 13px 20px; border-radius: 8px; border: 1px solid transparent;
      text-decoration: none; cursor: pointer; width: 100%;
      transition: background-color .14s ease, border-color .14s ease;
    }
    .btn-primary { background: var(--brand); color: var(--brand-ink); }
    .btn-primary:hover { background: color-mix(in srgb, var(--brand) 86%, #000); }
    .btn-outline {
      background: transparent; color: var(--ink); border-color: var(--line-strong);
      font-size: 15px; padding: 10px 16px;
    }
    .btn-outline:hover { background: var(--surface-2); }
    a:focus-visible, button:focus-visible {
      outline: 2px solid var(--brand); outline-offset: 2px;
    }

    .badge {
      display: inline-block; font-family: "Archivo", sans-serif; font-weight: 600;
      font-size: 11px; letter-spacing: .09em; text-transform: uppercase;
      padding: 3px 8px; border-radius: 4px;
    }
    .badge-brand { background: var(--brand); color: var(--brand-ink); }
    .badge-quiet { background: var(--surface-2); color: var(--ink-soft); border: 1px solid var(--line); }

    .mono {
      font-family: "JetBrains Mono", ui-monospace, Consolas, monospace;
      font-variant-numeric: tabular-nums;
    }

    /* ---- page furniture ---- */
    header.masthead { padding: 44px 0 26px; }
    .eyebrow {
      font-family: "Archivo", sans-serif; font-weight: 600; font-size: 12px;
      letter-spacing: .13em; text-transform: uppercase; color: var(--brand);
      margin: 0 0 8px;
    }
    h1 {
      font-family: "Archivo", sans-serif; font-weight: 700; font-size: 38px;
      line-height: 1.12; letter-spacing: -.018em; margin: 0 0 10px;
      text-wrap: balance;
    }
    .release-line {
      display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
      color: var(--ink-soft); font-size: 15px;
    }
    .dot { color: var(--line-strong); }

    .alpha-note {
      margin: 22px 0 0; padding: 13px 16px;
      background: var(--amber-soft); border: 1px solid var(--amber-line);
      border-radius: 8px; color: var(--amber); font-size: 15px;
    }
    .alpha-note strong { color: var(--amber); }

    h2.section {
      font-family: "Archivo", sans-serif; font-weight: 600; font-size: 13px;
      letter-spacing: .13em; text-transform: uppercase; color: var(--ink-faint);
      margin: 38px 0 14px; padding-bottom: 9px; border-bottom: 1px solid var(--line);
    }

    /* ---- download card ---- */
    .pkg-head { display: flex; align-items: flex-start; gap: 12px; }
    .pkg-glyph { flex: none; margin-top: 2px; }
    .pkg-title {
      font-family: "Archivo", sans-serif; font-weight: 600; font-size: 19px;
      margin: 0 0 3px; line-height: 1.25;
    }
    .pkg-file {
      font-size: 13.5px; color: var(--ink-soft); word-break: break-all;
    }
    .pkg-why { font-size: 15px; color: var(--ink-soft); margin: 0; }
    .pkg-spacer { flex: 1; }

    .runtime {
      background: var(--surface-2); border: 1px solid var(--line);
      border-radius: 8px; padding: 13px 15px; font-size: 14.5px;
    }
    .runtime p { margin: 0 0 9px; color: var(--ink-soft); }
    .runtime a.rt-link { color: var(--ink); font-weight: 600; }

    /* ---- verification block (the Core Temp cue) ---- */
    .verify {
      border: 1px solid var(--line); border-radius: 8px;
      background: var(--surface-2); overflow: hidden;
    }
    .verify-row {
      display: grid; grid-template-columns: 82px minmax(0, 1fr) auto;
      align-items: center; gap: 10px;
      padding: 9px 12px; border-bottom: 1px solid var(--line);
    }
    .verify-row:last-child { border-bottom: 0; }
    .verify-key {
      font-family: "Archivo", sans-serif; font-weight: 600; font-size: 11px;
      letter-spacing: .07em; text-transform: uppercase; color: var(--ink-faint);
    }
    .verify-val { font-size: 12.5px; line-height: 1.45; word-break: break-all; color: var(--ink); }
    .verify-val.placeholder { color: var(--ink-faint); font-style: italic; }
    .copy {
      flex: none; background: transparent; border: 1px solid var(--line-strong);
      color: var(--ink-soft); border-radius: 5px; padding: 3px 8px;
      font-size: 11px; font-family: "Archivo", sans-serif; font-weight: 600;
      letter-spacing: .04em; cursor: pointer;
    }
    .copy:hover { background: var(--surface); color: var(--ink); }

    .howto { margin-top: 10px; font-size: 14px; color: var(--ink-soft); }
    .howto code {
      font-family: "JetBrains Mono", ui-monospace, Consolas, monospace;
      font-size: 12.5px; background: var(--surface-2);
      border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px;
    }

    /* ---- signature panel: the thing the other sites don't have ---- */
    .sig {
      background: var(--surface); border: 1px solid var(--line);
      border-left: 3px solid var(--brand);
      border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow);
    }
    .sig-head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
    .sig-title { font-family: "Archivo", sans-serif; font-weight: 600; font-size: 18px; margin: 0; }
    .sig-lede { margin: 0 0 16px; color: var(--ink-soft); font-size: 15px; max-width: 62ch; }
    .sig-grid {
      display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
      gap: 2px; background: var(--line); border: 1px solid var(--line);
      border-radius: 8px; overflow: hidden;
    }
    .sig-cell { background: var(--surface); padding: 11px 14px; }
    .sig-k {
      font-family: "Archivo", sans-serif; font-weight: 600; font-size: 10.5px;
      letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint);
      margin-bottom: 3px;
    }
    .sig-v { font-size: 13.5px; word-break: break-word; }

    footer {
      margin: 44px 0 56px; padding-top: 20px; border-top: 1px solid var(--line);
      color: var(--ink-faint); font-size: 14px;
    }
    footer a { color: var(--ink-soft); }
    a { color: var(--brand); }

    @media (prefers-reduced-motion: reduce) {
      * { transition: none !important; animation: none !important; }
    }

    /* ---- intro video (index.html) ------------------------------------- */
    /* The 16:9 box comes from Bootstrap's .ratio, so the player is fluid at
       every width without a single media query. Everything below is just
       looks, plus object-fit so a clip that is not exactly 16:9 letterboxes
       instead of being cropped or stretched. */
    .budgie-video { margin: 0 0 1.5rem; }

    .budgie-video .ratio {
      background: #000;
      border: 1px solid var(--line);
      box-shadow: var(--shadow);
    }

    .budgie-video-el {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: contain;
      background: #000;
    }
    .budgie-video-el:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

    .budgie-video figcaption { color: var(--ink-soft); }

    /* Phones: drop the rounding so the player sits flush in the column. */
    @media (max-width: 575.98px) {
      .budgie-video .ratio { border-radius: 0; border-inline: 0; }
    }


    /* ---- suite + link cards (index.html) ------------------------------ */
    /* .row in this file is a hard two-column grid, which is right for the two
       installers on the download page but wrong for six apps. .row-3 sits on
       top of it and lets the cards flow 3, then 2, then 1 on their own. */
    /* 280px is the narrowest card that still fits the longest app name on one
       line once the 22px padding is taken off (CreateBudgieBackupFile needs
       ~228px at 19px). Below that the grid drops a column rather than letting
       the name break mid-word, so it goes 3 across, then 2, then 1. */
    .row.row-3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

    .suite-grid, .link-grid { margin-top: 18px; }
    .link-grid { margin-bottom: 30px; margin-left: 2px; margin-right: 2px}

    /* The whole card is the anchor: one big hit area, one tab stop, and the
       cursor says "clickable" everywhere rather than only on the title. */
    a.suite-card {
      text-decoration: none;
      color: inherit;
      transition: border-color .14s ease, box-shadow .14s ease, transform .14s ease;
    }
    a.suite-card:hover {
      border-color: var(--brand);
      box-shadow: var(--shadow);
      transform: translateY(-2px);
    }
    a.suite-card:focus-visible {
      outline: 2px solid var(--brand);
      outline-offset: 2px;
    }

    a.suite-card .card-body { gap: 11px; padding: 20px; }
    a.suite-card .pkg-title { transition: color .14s ease; }
    a.suite-card:hover .pkg-title { color: var(--brand); }

    /* Glyph picks up the brand colour through currentColor on the stroke. */
    a.suite-card .pkg-glyph { color: var(--brand); }

    /* The read-more cue. It is a span, not a second link, so the card keeps
       one focus target, but it still reads and behaves like a call to action. */
    .suite-more {
      font-family: "Archivo", sans-serif;
      font-weight: 600;
      font-size: 14px;
      color: var(--brand);
      display: inline-flex;
      align-items: center;
      gap: 7px;
    }
    .suite-arrow { transition: transform .14s ease; }
    a.suite-card:hover .suite-arrow { transform: translateX(4px); }

    /* The two lead cards under Links get a little more presence. */
    a.suite-card-lead { border-left: 3px solid var(--brand); }
    a.suite-card-lead .pkg-title { font-size: 20px; }

    /* ---- small print chips ---- */
    .doc-heading {
      font-family: "Archivo", sans-serif; font-weight: 600; font-size: 13px;
      letter-spacing: .13em; text-transform: uppercase; color: var(--ink-faint);
      margin: 34px 0 14px; padding-bottom: 9px; border-bottom: 1px solid var(--line);
    }
    .doc-chips { display: flex; flex-wrap: wrap; gap: 9px; }
    .doc-chip {
      display: inline-block;
      background: var(--surface);
      border: 1px solid var(--line-strong);
      border-radius: 999px;
      padding: 7px 15px;
      font-size: 14px;
      color: var(--ink-soft);
      text-decoration: none;
      transition: border-color .14s ease, color .14s ease, background-color .14s ease;
    }
    .doc-chip:hover {
      border-color: var(--brand);
      color: var(--brand);
      background: var(--brand-soft);
    }
    .doc-chip:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

    /* Nothing above should slide about for anyone who asked it not to. */
    @media (prefers-reduced-motion: reduce) {
      a.suite-card:hover { transform: none; }
      a.suite-card:hover .suite-arrow { transform: none; }
    }


    /* ---- real app icons on the suite cards ---------------------------- */
    /* Extracted from the shipped .ico files at their native 32 and 64 px
       entries, so nothing is resampled: 64 for normal screens, 128 via srcset
       for retina. The artwork is an opaque photo with no alpha, so it needs
       the radius and the hairline to read as an app icon rather than a stray
       image, and to stop the light edges bleeding into the dark card. */
    .pkg-icon {
      flex: none;
      width: 64px;
      height: 64px;
      margin-top: 1px;
      border-radius: 6px;
      border: 1px solid var(--line);
      object-fit: cover;
      background: var(--surface-2);
    }
    /* Bootstrap sets img{max-width:100%%} elsewhere on the site; the fixed
       width above already wins, this just makes the intent explicit. */
    a.suite-card .pkg-icon { transition: border-color .14s ease; }
    a.suite-card:hover .pkg-icon { border-color: var(--brand); }

    /* The app names are long single words (CreateBudgieBackupFile). A flex
       child defaults to min-width:auto, so that text refuses to shrink and
       spills out past the card edge on narrow columns. min-width:0 lets it
       shrink, and the wrap rule breaks the word instead of clipping it.
       Scoped to the suite cards so the download page layout is untouched. */
    a.suite-card .pkg-head > div { min-width: 0; }
    a.suite-card .pkg-title { overflow-wrap: anywhere; }

    /* At 64px the icon cannot share a row with the name. Side by side it left
       the title only 186px, and the longest name wants ~213px, so four of the
       six broke mid-word ("BudgieBackupSysTr / ay"). No amount of padding
       closes a 27px gap, so the icon gets its own row and the title gets the
       full 288px. All six now sit on one line at the same 19px the download
       page uses, and the card reads as an app tile rather than a squeeze. */
    a.suite-card .pkg-head {
      flex-direction: column;
      align-items: stretch;
      gap: 14px;
    }
    /* Note: no align-items:flex-start here. In a column flex box that shrink
       wraps the text to its content instead of letting it use the full card
       width, which cost the title 24px and made the longest name wrap again.
       The icon is held to its own size by flex:none plus align-self below. */
    a.suite-card .pkg-icon { margin-top: 0; align-self: flex-start; }

    /* The .card carries 12px of its own padding and .card-body adds 22px, so
       content sat 34px inside the card edge: a double inset that both looked
       squashed and cost the title 24px of width. Let the body own the padding
       outright, which recovers that width and evens out the whitespace. */
    a.suite-card { padding: 0; }
    a.suite-card .card-body { padding: 22px; gap: 13px; }
    a.suite-card .pkg-why { margin-top: 2px; }


    /* ---- app product pages (suite/*.html) ----------------------------- */
    /* The hero is the same block on all six pages: icon, name, exe, one line
       of what it does, then the one action worth taking. It borrows the card
       and pkg-* pieces from the download page so the set reads as one site. */
    .app-hero {
      margin: 22px 0 24px;
      border-left: 3px solid var(--brand);
      box-shadow: var(--shadow);
      padding: 0;                 /* .card adds 12px of its own; the body owns it */
    }
    .app-hero .card-body { padding: 22px; gap: 13px; }
    .app-hero .pkg-head { align-items: center; flex-wrap: wrap; }
    /* Same flex trap as the suite cards: without min-width:0 the name refuses
       to shrink and shoves the Alpha badge off the right edge on a phone.
       flex-wrap lets the badge drop to its own line instead of squeezing. */
    .app-hero .pkg-head > div { min-width: 0; }
    .app-hero .pkg-title { overflow-wrap: anywhere; }
    .app-hero .badge { flex: none; }
    .app-hero .pkg-icon { margin-top: 0; }
    .app-hero .pkg-title { font-size: 20px; }
    .app-hero-note { margin: 0; font-size: 14px; color: var(--ink-faint); }

    /* The hero button is the page's single call to action, so it keeps the
       full-width .btn treatment from the download page rather than shrinking. */
    .app-hero .btn { margin-top: 2px; }

    /* The app names are one long unbreakable word, and h1 is a fixed 38px, so
       on a phone "CreateBudgieBackupFile" ran 401px wide inside a 335px column
       and gave the whole page a horizontal scrollbar. Scale the heading down
       with the viewport and let it break as a last resort. Scoped to the app
       pages so the home page headline, which has spaces, is left alone. */
    .app-page h1 {
      font-size: clamp(26px, 7.2vw, 38px);
      overflow-wrap: anywhere;
    }

    /* ---- SOP / FAQ pages (faq/*.html) --------------------------------- */
    .sop-lede { font-size: 17px; color: var(--ink-soft); max-width: 68ch; }

    /* Numbered procedure. The marker is deliberately loud: someone following
       this on a second screen needs to find their place again quickly. */
    ol.sop { counter-reset: sop; list-style: none; padding-left: 0; margin: 18px 0; }
    ol.sop > li {
      counter-increment: sop;
      position: relative;
      padding: 0 0 18px 46px;
      margin: 0;
    }
    ol.sop > li::before {
      content: counter(sop);
      position: absolute; left: 0; top: 0;
      width: 30px; height: 30px;
      display: flex; align-items: center; justify-content: center;
      background: var(--brand-soft); color: var(--brand);
      border: 1px solid var(--brand);
      border-radius: 50%;
      font-family: "Archivo", sans-serif; font-weight: 600; font-size: 14px;
    }
    ol.sop > li:last-child { padding-bottom: 0; }
    ol.sop code, .sop-lede code {
      font-family: "JetBrains Mono", ui-monospace, Consolas, monospace;
      font-size: 12.5px; background: var(--surface-2);
      border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px;
      word-break: break-all;
    }

    /* Question headings read as questions, not as document sections. */
    .faq-q {
      font-family: "Archivo", sans-serif; font-weight: 600; font-size: 17px;
      margin: 26px 0 6px;
    }

    /* ---- sitemap tree (sitemap.html) ---------------------------------- */
    /* Nested lists rather than box-drawing characters in a <pre>: the links
       stay real links, it reflows on a phone, and a screen reader reads it as
       the nested structure it actually is. The connectors are drawn in CSS. */
    .tree, .tree ul { list-style: none; margin: 0; padding: 0; }
    .tree { margin: 18px 0 8px; }
    .tree ul { margin-left: 10px; padding-left: 20px; border-left: 1px solid var(--line-strong); }
    .tree li { position: relative; padding: 7px 0 7px 20px; }

    /* the elbow joining an item to its parent's spine */
    .tree ul > li::before {
      content: "";
      position: absolute; left: -20px; top: 20px;
      width: 20px; height: 1px; background: var(--line-strong);
    }
    /* hide the spine below the last child so the branch ends cleanly */
    .tree ul > li:last-child::after {
      content: "";
      position: absolute; left: -21px; top: 21px; bottom: 0;
      width: 1px; background: var(--ground);
    }

    .tree > li { padding-left: 0; }
    .tree .node-name { font-weight: 600; }
    .tree .node-path {
      font-family: "JetBrains Mono", ui-monospace, Consolas, monospace;
      font-size: 12.5px; color: var(--ink-faint); margin-left: 8px;
      word-break: break-all;
    }
    .tree .node-note { display: block; font-size: 14px; color: var(--ink-soft); }
    .tree .folder {
      font-family: "Archivo", sans-serif; font-weight: 600;
      color: var(--ink); font-size: 15px;
    }
    .tree .folder .node-path { font-size: 12.5px; }

    @media (max-width: 575.98px) {
      .tree ul { margin-left: 4px; padding-left: 14px; }
      .tree li { padding-left: 12px; }
      .tree ul > li::before { left: -14px; width: 14px; }
      .tree ul > li:last-child::after { left: -15px; }
      .tree .node-path { display: block; margin-left: 0; }
    }

    /* footer sitemap link, added to every page */
    .footer-links { margin: 6px 0 0; font-size: 14px; }