/* farmgod.io: the one-pager. Sections in page order:
   top bar, hero, features, product range, get started, screenshots, partners, footer.
   Fonts come from fonts.css (self-hosted, nothing is loaded from other sites). */

:root {
  --black: #000;
  --white: #fff;
  --head: #d9dadd;      /* big headings */
  --text: #a3a3a8;      /* running text */
  --dim: #8e8e93;       /* small print, footer */
  --teal: #006a84;      /* rules, kickers, links */
  --teal-hi: #0a8fb0;
  --green: #2cb74a;
  --green-dim: #2f9440;
  --red: #e02b2b;
  --orange: #f6a11d;
  --yellow: #f2c21b;
  --bar-label: #282828; /* label bars in cards and tables */
  --bar-value: #1c1c1c;
  --blue-btn: #00456b;
  --green-btn: #2b3f00;
  --top-h: 80px;
  --hero-shadow: 0 1px 3px rgba(0,0,0,0.85), 0 0 14px rgba(0,0,0,0.9), 0 0 34px rgba(0,0,0,0.8);   /* dark and soft, behind the hero's smaller texts over the clip */
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--black); color: var(--text); font-family: Roboto, "Helvetica Neue", Arial, sans-serif;
       -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--teal-hi); }
h1, h2, h3, h4, p, figure, dl, dd { margin: 0; }
section { position: relative; scroll-margin-top: var(--top-h); }
.wrap { width: 100%; max-width: 1228px; margin: 0 auto; padding: 0 24px; }

/* ---------- top bar ---------- */
.top { position: fixed; z-index: 50; left: 0; right: 0; top: 0; height: var(--top-h); display: grid;
       grid-template-columns: 1fr auto 1fr; align-items: center; gap: 44px; padding: 0 28px;
       background: linear-gradient(180deg, rgba(0,0,0,0.55), rgba(0,0,0,0)); }
/* Past the hero's first lines the bar turns solid, so text scrolling under it stays readable. The
   solid ground is a layer of its own that fades in: a browser cannot fade from one gradient to
   another, so as a second background it appeared at once. On the pages that are solid from the
   start (data-solid) it is simply there. */
.top::before { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none; opacity: 0; transition: opacity 0.6s ease;
               background: linear-gradient(180deg, rgba(0,0,0,0.94), rgba(0,0,0,0.82)); }
.top.solid::before, .top[data-solid]::before { opacity: 1; }
.top[data-solid]::before { transition: none; }
.top-logo img { width: 146px; }
.top-nav { display: flex; gap: 34px; }
.top-nav.left { justify-content: flex-end; }
.top-nav a, .menu a { font-size: 12px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; color: var(--dim);
                      text-decoration: none; transition: color 0.2s; }
.top-nav a:hover, .menu a:hover { color: var(--white); }
.burger { display: none; justify-self: end; width: 44px; height: 44px; padding: 10px; border: 0; background: none; cursor: pointer; }
.burger span { display: block; height: 2px; margin: 5px 0; background: var(--white); }
.menu { position: fixed; z-index: 49; inset: var(--top-h) 0 auto 0; display: none; flex-direction: column; gap: 4px;
        padding: 14px 28px 26px; background: rgba(0,0,0,0.96); border-bottom: 1px solid #222; }
.menu a { display: flex; align-items: center; gap: 14px; padding: 14px 0; font-size: 14px; border-bottom: 1px solid #1a1a1a; }
.menu a svg { flex: none; width: 19px; height: 19px; fill: none; stroke: var(--teal-hi); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.menu.open { display: flex; }

/* the three round links at the right edge */
.rail { position: fixed; z-index: 40; right: 38px; bottom: 58px; display: flex; flex-direction: column; gap: 28px; transition: opacity 0.25s, visibility 0.25s; }
.rail.off { opacity: 0; visibility: hidden; }
.rail a { display: block; width: 22px; height: 22px; color: var(--white); opacity: 0.95; transition: transform 0.2s; }
.rail a:hover { transform: scale(1.18); }
.rail a.mail { color: var(--orange); }
.rail svg { width: 100%; height: 100%; fill: currentColor; }

/* ---------- buttons ---------- */
.btn { display: inline-block; padding: 0 30px; border: 1px solid var(--white); border-radius: 10px; color: var(--white);
       font-size: 18px; font-weight: 500; line-height: 68px; letter-spacing: 1px; text-transform: uppercase; text-decoration: none;
       text-align: center; transition: filter 0.2s, transform 0.2s; }
.btn:hover { filter: brightness(1.35); transform: translateY(-1px); }
.btn.blue { background: var(--blue-btn); }
.btn.green { background: var(--green-btn); }
.btn.ghost { background: rgba(0,0,0,0.35); }
.btn.small { font-size: 14px; line-height: 50px; padding: 0 22px; }
.btn svg { width: 19px; height: 19px; margin-right: 10px; vertical-align: -4px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- hero ---------- */
/* The clip's first picture lies behind it, so the hero is never empty: not before the clip
   has loaded, and not where a browser doesn't start it. */
/* svh: the height with a phone's address bar showing, so the hero ends where the first screen does */
.hero { height: 100vh; height: 100svh; min-height: 560px; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden;
        background: #000 url(../img/hero-poster.jpg) center / cover no-repeat; }
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,0) 62%, #000 100%), radial-gradient(ellipse at center, rgba(0,0,0,0.25) 0, rgba(0,0,0,0.62) 100%); }
.hero-text { position: relative; padding: 0 20px; }
.hero h1 { font-weight: 700; }
.hero h1 .k { display: block; font: 500 clamp(18px, 2.8vw, 40px)/1 "Roboto Condensed", sans-serif; letter-spacing: 0.35em; margin-right: -0.35em;
              text-transform: uppercase; color: #6c6c70; text-shadow: var(--hero-shadow); }
.hero h1 .m { display: block; margin-top: clamp(14px, 3vw, 44px); font: 700 clamp(34px, 6.4vw, 92px)/1.1 Poppins, sans-serif;
              letter-spacing: 0.075em; margin-right: -0.075em; text-transform: uppercase; color: var(--white); }
.hero-sub { max-width: 760px; margin: clamp(18px, 3vw, 40px) auto 0; font: 300 clamp(17px, 1.7vw, 22px)/1.45 "Roboto Condensed", sans-serif; color: #c9c9cf;
            text-shadow: var(--hero-shadow); }
.hero-cta { margin-top: 34px; display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; }
.hero-cta .btn { font-size: 15px; line-height: 54px; min-width: 210px; }
.hero-note { margin-top: 30px; font: 500 12px/1.6 Roboto, sans-serif; letter-spacing: 2px; text-transform: uppercase; color: var(--green-dim);
             text-shadow: var(--hero-shadow); }
/* Without the script, and for visitors who asked for less motion: all of them in a row. */
.hero-note span + span::before { content: "\00b7"; margin: 0 0.7em; }
/* With it: one at a time in the same place, each fading in, staying and fading out, as the
   headlines on the FARMGOD.OS screen do. The page is laid out this way from the start (the first
   one carries "on" in the HTML), site.js only passes "on" along. */
@media (prefers-reduced-motion: no-preference) {
  .js .hero-note { display: grid; justify-items: center; }
  .js .hero-note span { grid-area: 1 / 1; opacity: 0; transition: opacity 0.5s ease; }
  .js .hero-note span::before { content: none; }
  .js .hero-note span.on { opacity: 1; }
}
.hero-down { position: absolute; left: 50%; bottom: 34px; width: 28px; height: 28px; margin-left: -14px; color: #bbb; animation: nudge 2.2s infinite; }
.hero-down svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; }
@keyframes nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(8px); } }

/* ---------- shared section pieces ---------- */
.title { font: 700 clamp(28px, 4.1vw, 50px)/1.08 Roboto, sans-serif; text-transform: uppercase; text-align: center; color: var(--head); }
.kicker { font: 700 clamp(18px, 1.9vw, 24px)/1 "Roboto Condensed", sans-serif; text-align: center; color: var(--teal); margin-bottom: 12px; }
.rule { width: min(500px, 62%); height: 3px; margin: 26px auto 36px; background: var(--teal); }
.lead { max-width: 1010px; margin: 0 auto; font: 300 clamp(18px, 1.9vw, 24px)/1.38 "Roboto Condensed", sans-serif; text-align: center; color: var(--text); }
.lead b, .feat p b, .card p b { font-weight: 700; color: var(--head); }
.lead.strong { font-weight: 700; color: var(--head); }

.frame { margin: 34px auto 0; max-width: 940px; border: 3px solid rgba(214,214,214,0.85); border-radius: 10px; overflow: hidden;
         background: #08090c; box-shadow: 0 30px 80px rgba(0,0,0,0.7); }
.frame img { width: 100%; }
.frame.wide { max-width: 1128px; }
.zoom { cursor: zoom-in; }
/* a YouTube video: our poster and play button; the player (youtube-nocookie) loads only on the click (site.js) */
.yt { position: relative; }
.frame.wide.yt { max-width: 1072px; }   /* the home page's video: a little narrower than the wide pictures */
.yt-open { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; background: none; cursor: pointer; overflow: hidden; }
.yt-open img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease, filter 0.6s ease; }
.yt-open:hover img, .yt-open:focus-visible img { transform: scale(1.012); filter: brightness(1.08); }
.yt-play { position: absolute; left: 50%; top: 50%; width: 92px; height: 92px; margin: -46px 0 0 -46px; border-radius: 50%;
  display: grid; place-items: center; background: rgba(8,9,12,0.55); border: 3px solid var(--yellow); backdrop-filter: blur(4px);
  box-shadow: 0 0 0 10px rgba(242,194,27,0.12), 0 20px 50px rgba(0,0,0,0.6); transition: transform 0.25s ease, background 0.25s ease; }
.yt-play svg { width: 38px; height: 38px; margin-left: 5px; fill: var(--yellow); }
.yt-open:hover .yt-play, .yt-open:focus-visible .yt-play { transform: scale(1.07); background: rgba(242,194,27,0.16); }
.yt-len { position: absolute; right: 14px; bottom: 12px; padding: 4px 8px; border-radius: 6px; background: rgba(0,0,0,0.72); color: #fff;
  font: 600 14px/1 "Roboto Condensed", sans-serif; letter-spacing: 0.04em; }
.yt iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }
@media (max-width: 600px) { .yt-play { width: 66px; height: 66px; margin: -33px 0 0 -33px; } .yt-play svg { width: 28px; height: 28px; } }

.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s ease, transform 0.7s ease; }
.js .reveal.in { opacity: 1; transform: none; }

/* ---------- features ---------- */
.features { padding: 110px 0 70px; }
/* The backdrop: two dashboards of a large operation, the overview and Fleet Health, one below the
   other and then again, dim and soft. The softness is in the picture itself (a 2 px blur on its
   1920 px), the dimness is the opacity below. It runs behind everything in .backdrop-zone, from
   the features to the end of "Get started", and follows the page at half the pace, as on the old
   site (the script moves it, see site.js). */
.backdrop-zone { position: relative; isolation: isolate; }
/* The sections in it stand over the backdrop and let it through. The boxes in them (.feat-panel,
   .card, .team-points li, .trust-card, .step) are solid: each has the colour its see-through ground
   gave over plain black, so text in a box never has the dashboards behind it. */
.backdrop-zone > section { z-index: 1; background: transparent; }
/* It starts a good way up inside the hero's dark lower part and comes in softly there, so the
   dashboards show while the clip is still going; it leaves softly at the zone's end. */
.features-bg { position: absolute; z-index: 0; left: 0; right: 0; top: -340px; bottom: 0; overflow: hidden; opacity: 0.30; pointer-events: none;
               -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0, #000 380px, #000 calc(100% - 180px), rgba(0,0,0,0) 100%);
                       mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0, #000 380px, #000 calc(100% - 180px), rgba(0,0,0,0) 100%); }
.features-bg-pic { position: absolute; inset: 0; background: url(../img/backdrop-dashboards.webp) center top / 100% auto repeat-y; }
/* the script moves it (see site.js): a layer of its own */
.features-bg-pic { will-change: transform; }
.features .wrap { position: relative; z-index: 2; }
.feat { margin-top: 110px; text-align: center; }
.feat h3 { max-width: 976px; margin: 0 auto 20px; padding-bottom: 14px; border-bottom: 1px solid var(--white);
           font: 700 clamp(19px, 2.1vw, 26px)/1.2 "Roboto Condensed", sans-serif; text-transform: uppercase; color: var(--white); }
.feat h3 sup, .card h4 sup { color: var(--dim); font-size: 0.7em; }
.feat p { max-width: 976px; margin: 0 auto; font: 300 clamp(18px, 1.9vw, 24px)/1.38 "Roboto Condensed", sans-serif; }
/* Two features are shown with a panel of their own instead of a screenshot: what FARMGOD supports
   (hardware, firmware, algorithms, each name a link into the knowledge base) and the theft guard. */
.feat-panel { max-width: 940px; margin: 34px auto 0; padding: 26px 26px 28px; border: 1px solid rgba(255,255,255,0.2); border-radius: 12px; text-align: left;
              background: linear-gradient(160deg, #1d1d20, #070709); box-shadow: 0 30px 80px rgba(0,0,0,0.7); }
.feat-panel svg { flex: 0 0 auto; width: 24px; height: 24px; fill: none; stroke: var(--teal-hi); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.feat-panel h4 { display: flex; align-items: center; justify-content: center; gap: 10px; padding-bottom: 11px; margin-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,0.55);
                 font: 700 18px/1.2 "Roboto Condensed", sans-serif; letter-spacing: 1px; text-transform: uppercase; color: var(--white); }
.support { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.chips a, .chips span { display: inline-flex; align-items: center; height: 32px; padding: 0 10px; border: 1px solid rgba(255,255,255,0.22); border-radius: 6px;
                        background: rgba(40,40,44,0.6); font: 500 14px/1 "Roboto Condensed", sans-serif; letter-spacing: 0.4px; white-space: nowrap;
                        color: var(--head); text-decoration: none; transition: border-color 0.2s, color 0.2s; }
.chips a:hover { border-color: rgba(255,255,255,0.6); color: var(--white); }
.chips span { border-style: dashed; background: none; color: var(--dim); }
.guard-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin: 0; padding: 0; list-style: none; }
.guard-steps li { position: relative; padding: 18px 16px; border: 1px solid rgba(255,255,255,0.16); border-radius: 10px; background: rgba(255,255,255,0.03); text-align: center; }
.guard-steps svg { display: block; width: 30px; height: 30px; margin: 0 auto 10px; }
.guard-steps b { display: block; font: 700 18px/1.2 "Roboto Condensed", sans-serif; letter-spacing: 1px; text-transform: uppercase; color: var(--white); }
.guard-steps span { display: block; margin-top: 6px; font: 300 16px/1.35 "Roboto Condensed", sans-serif; color: var(--text); }
/* a small arrow in the gap between two steps */
.guard-steps li + li::before { content: ""; position: absolute; left: -24px; top: 50%; width: 9px; height: 9px; border-top: 2px solid var(--teal-hi);
                               border-right: 2px solid var(--teal-hi); transform: translate(-50%, -50%) rotate(45deg); }
.guard-steps li:nth-child(1) svg { stroke: var(--red); }
.guard-steps li:nth-child(2) svg { stroke: var(--yellow); }
.guard-steps li:nth-child(3) svg { stroke: var(--green); }
.guard-demo { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.guard-box { min-width: 0; padding: 15px 16px 16px; border: 1px solid rgba(255,255,255,0.16); border-radius: 10px; background: rgba(0,0,0,0.35); }
.guard-cap { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font: 700 12px/1 Roboto, sans-serif; letter-spacing: 2px; text-transform: uppercase; color: var(--dim); }
.guard-cap svg { width: 18px; height: 18px; }
.guard-line { padding: 9px 0 10px; border-top: 1px solid rgba(255,255,255,0.08); }
.guard-line span { display: block; margin-bottom: 5px; font: 500 11px/1 Roboto, sans-serif; letter-spacing: 1.5px; text-transform: uppercase; color: var(--dim); }
.guard-line code, .guard-msg { font: 400 13.5px/1.35 ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; color: var(--head); overflow-wrap: anywhere; }
.guard-line.ok span::after { content: " \2713"; color: var(--green); }
.guard-line.bad span::after { content: " \2715"; color: var(--red); }
.guard-line.bad code { color: #ff8b8b; }
.guard-msg { display: flex; align-items: baseline; gap: 10px; padding: 10px 12px; border-radius: 8px; background: rgba(255,255,255,0.05); }
.guard-msg + .guard-msg { margin-top: 8px; }
.guard-msg b { flex: 0 0 auto; font-weight: 700; }
.guard-msg b.warn { color: var(--yellow); }
.guard-msg b.info { color: var(--teal-hi); }
.guard-msg time { flex: 0 0 auto; margin-left: auto; font: 400 11px/1 Roboto, sans-serif; color: var(--dim); }
.sub-title { margin: 120px auto 34px; text-align: center; font: 700 clamp(22px, 2.6vw, 32px)/1.1 Roboto, sans-serif; text-transform: uppercase; color: var(--head); }
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.card { padding: 22px 20px 24px; border: 1px solid rgba(255,255,255,0.2); border-radius: 12px; text-align: center;
        background: linear-gradient(160deg, #1d1d20, #070709); }
.card-icon { display: block; width: 32px; height: 32px; margin: 0 auto 12px; fill: none; stroke: var(--teal-hi); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.card h4 { display: flex; align-items: flex-end; justify-content: center; white-space: nowrap; padding-bottom: 12px; margin-bottom: 12px;
           border-bottom: 1px solid rgba(255,255,255,0.55);
           font: 700 17px/1.25 "Roboto Condensed", sans-serif; text-transform: uppercase; color: var(--white); }
.card h4 sup { align-self: flex-start; margin-left: 4px; }
.card p { font: 300 17px/1.42 "Roboto Condensed", sans-serif; }
.foot-note { margin-top: 26px; text-align: center; font-size: 12px; letter-spacing: 0.5px; text-transform: uppercase; color: var(--dim); }

/* ---------- product range ---------- */
.range { padding: 80px 0 70px; background: var(--black); }
.range-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: stretch; margin-top: 50px; }
.range-card { display: flex; flex-direction: column; padding: 24px 17px 22px; border: 1px dashed rgba(255,255,255,0.9); border-radius: 8px; background: #040404; }
.range-for { text-align: center; font: 500 clamp(17px, 1.8vw, 22px)/1.5 Roboto, sans-serif; color: var(--green-dim); }
.range-name { margin: 12px 0 26px; padding-bottom: 28px; border-bottom: 1px solid var(--white); text-align: center;
              font: 700 clamp(24px, 2.4vw, 29px)/1 Roboto, sans-serif; color: var(--white); }
.range-name span { font-weight: 500; color: var(--dim); font-size: 0.86em; }
.range-pic { width: 100%; aspect-ratio: 5 / 2; object-fit: cover; margin-bottom: 16px; filter: grayscale(1); }
.rows dt, .ptable th { background: var(--bar-label); color: #a5a5a5; font: 500 10px/25px Roboto, sans-serif; letter-spacing: 0.4px; text-transform: uppercase; text-align: center; }
.rows dd { margin: 3px 0 7px; padding: 7px 10px; background: var(--bar-value); color: var(--white); font: 700 14px/1.35 Roboto, sans-serif; text-align: center; }
.range-h { margin: 26px 0 8px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.65); text-align: center;
           font: 700 14px/1.3 Roboto, sans-serif; letter-spacing: 1.5px; text-transform: uppercase; color: var(--head); }
.ptable { width: 100%; border-collapse: separate; border-spacing: 0 3px; }
.ptable th { padding: 0 10px; text-align: left; }
.ptable td { padding: 9px 10px; background: var(--bar-value); color: var(--head); font: 400 14px/1.4 Roboto, sans-serif; vertical-align: top; }
.ptable td:first-child { font-weight: 700; color: var(--white); white-space: nowrap; }
.ptable .num, .ptable th.num { text-align: right; white-space: nowrap; }
.ptable .price { white-space: nowrap; color: var(--white); font-weight: 700; }
.ptable .price small { display: block; font-weight: 400; font-size: 12px; color: var(--text); white-space: normal; }
.range-note { margin: 12px 2px 0; font: 300 16px/1.42 "Roboto Condensed", sans-serif; color: var(--text); }
.range-note b { font-weight: 700; color: var(--head); }
.range-fine { margin: 14px 2px 0; font-size: 12px; line-height: 1.5; color: var(--dim); }
.ladder { margin-top: 10px; }
.ladder summary { padding: 8px 10px; background: var(--bar-label); color: #c9c9c9; font: 500 11px/1.5 Roboto, sans-serif; letter-spacing: 0.4px;
                  text-transform: uppercase; cursor: pointer; }
.adds { list-style: none; margin: 0; padding: 0; }
.adds li { margin-top: 3px; padding: 10px 12px; background: var(--bar-value); font: 300 16px/1.4 "Roboto Condensed", sans-serif; }
.adds b { display: block; font: 700 13px/1.5 Roboto, sans-serif; letter-spacing: 0.4px; text-transform: uppercase; color: var(--white); }
.range-cta { margin-top: auto; padding-top: 22px; text-align: center; }
.range-cta .btn { width: 100%; }

.compare { margin-top: 70px; }
.compare h3 { text-align: center; font: 700 clamp(20px, 2.3vw, 28px)/1.1 Roboto, sans-serif; text-transform: uppercase; color: var(--head); }
.compare .ptable { max-width: 940px; margin: 26px auto 0; }
.compare td { font-size: 15px; }
.compare td:first-child { font-weight: 400; color: var(--head); white-space: normal; }
.compare .c { width: 150px; text-align: center; }
.yes { color: var(--green); font-weight: 700; }
.no { color: var(--red); font-weight: 700; }
.plan { display: inline-block; padding: 1px 9px; border: 1px solid var(--teal-hi); border-radius: 999px; color: #7fd3ea; font-size: 11px; font-weight: 700; letter-spacing: 1px; }
.legend { margin-top: 12px; text-align: center; font-size: 12px; color: var(--dim); }
.callout { max-width: 940px; margin: 44px auto 0; padding: 22px 26px; border: 1px solid rgba(44,183,74,0.5); border-radius: 12px; background: rgba(44,183,74,0.07);
           text-align: center; font: 300 clamp(17px, 1.8vw, 22px)/1.4 "Roboto Condensed", sans-serif; color: var(--head); }
.callout b { display: block; margin-bottom: 4px; font: 700 13px/1.5 Roboto, sans-serif; letter-spacing: 2px; text-transform: uppercase; color: var(--green); }
.pdf-link { margin-top: 26px; text-align: center; }
.pdf-link a { font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--teal-hi); text-decoration: none; }
.pdf-link a:hover { color: var(--white); }
.pdf-link span { margin: 0 8px; color: var(--dim); }
.pdf-link a svg { width: 15px; height: 15px; margin-right: 7px; vertical-align: -3px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- get started ---------- */
.promise { max-width: 940px; margin: 30px auto 0; text-align: center; font: 300 clamp(18px, 1.9vw, 23px)/1.4 "Roboto Condensed", sans-serif; color: var(--text); }
.promise b { margin-right: 6px; font-weight: 700; color: var(--head); }
.promise + .promise { margin-top: 10px; }
.promise .yes { margin-right: 10px; font-weight: 700; color: var(--green); }

/* ---------- the team ---------- */
.team { padding: 70px 0 60px; background: var(--black); }
.team-row { display: grid; grid-template-columns: 1.25fr 1fr; gap: 34px; align-items: stretch; max-width: 1128px; margin: 46px auto 0; }
.team-row .frame { display: flex; flex-direction: column; margin: 0; max-width: none; }
.team-row .frame img { flex: 1 1 auto; min-height: 0; object-fit: cover; }
.team figcaption { padding: 10px; background: #08090c; text-align: center; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--dim); }
.team-points { margin: 0; padding: 0; list-style: none; display: grid; grid-auto-rows: 1fr; gap: 14px; }
.team-points li { display: flex; flex-direction: column; justify-content: center; padding: 14px 20px; border: 1px solid rgba(255,255,255,0.2); border-radius: 12px; background: #121214; font: 300 clamp(17px, 1.6vw, 20px)/1.4 "Roboto Condensed", sans-serif; color: var(--text); }
.team-points b { display: block; margin-bottom: 4px; font: 700 13px/1.5 Roboto, sans-serif; letter-spacing: 2px; text-transform: uppercase; color: var(--green); }
.team-cta { margin-top: 40px; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.team-cta.pair .btn { width: 230px; padding-left: 0; padding-right: 0; }

/* ---------- a page of its own: mining projects ---------- */
.pitch-block { max-width: 1010px; margin: 70px auto 0; text-align: center; }
.pitch-block h2 { margin-bottom: 20px; padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,0.6); font: 700 clamp(21px, 2.2vw, 27px)/1.2 "Roboto Condensed", sans-serif; text-transform: uppercase; color: var(--white); }
.pitch-block p { font: 300 clamp(18px, 1.8vw, 22px)/1.45 "Roboto Condensed", sans-serif; color: var(--text); }
.pitch-block p + p { margin-top: 14px; }
.pitch .trust-cards { margin-top: 24px; }
.pitch-fine { max-width: 820px; margin: 46px auto 0; text-align: center; font-size: 12px; line-height: 1.6; color: var(--dim); }

/* ---------- security and trust ---------- */
.trust { padding: 70px 0 60px; background: var(--black); }
.trust-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 1128px; margin: 46px auto 0; }
.trust-card { padding: 24px 22px 24px; border: 1px solid rgba(255,255,255,0.2); border-radius: 12px; background: rgba(40,40,44,0.45); text-align: center; }
/* on the home page, over the dashboards: solid (on the projects page it stays see-through over that page's picture) */
.backdrop-zone .trust-card { background: #121214; }
.trust-icon { display: block; width: 36px; height: 36px; margin: 0 auto 12px; fill: none; stroke: var(--teal-hi); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.trust-card h3 { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 10px; white-space: nowrap; font: 700 clamp(19px, 1.8vw, 23px)/1.2 "Roboto Condensed", sans-serif; text-transform: uppercase; color: var(--white); }
.trust-state { padding: 4px 9px; border: 1px solid var(--green); border-radius: 20px; font: 700 11px/1 Roboto, sans-serif; letter-spacing: 1.5px; color: var(--green); }
.trust-card p { font: 300 clamp(17px, 1.6vw, 20px)/1.42 "Roboto Condensed", sans-serif; color: var(--text); }
.start { padding: 40px 0 70px; }
.start-title { display: flex; align-items: center; justify-content: center; gap: 10px; font: 700 clamp(20px, 2.2vw, 25px)/1 "Roboto Condensed", sans-serif;
               text-transform: uppercase; color: var(--white); }
.start-title svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 3.2; }
.start-cta .btn svg { width: 23px; height: 23px; margin-right: 12px; vertical-align: -5px; }
.start-cta { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 1028px; margin: 44px auto 0; }
.start-sub { margin-top: 46px; text-align: center; font: 700 clamp(18px, 1.9vw, 24px)/1.6 "Roboto Condensed", sans-serif; color: var(--green-dim); }
.start-arrow { display: block; width: 18px; height: 18px; margin: 4px auto 0; fill: none; stroke: #9a9a9e; stroke-width: 2; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 40px; }
.step { padding: 32px 19px 20px; border: 1px solid rgba(255,255,255,0.28); border-radius: 14px; text-align: center;
        background: linear-gradient(150deg, #202022, #000 55%, #131315); }
.step .step-n { margin: 0; font: 500 34px/1 Roboto, sans-serif; color: var(--green); }
.step h3 { margin: 18px 0 24px; font: 500 22px/1.15 Roboto, sans-serif; text-transform: uppercase; color: var(--white); }
.step figure { border: 1px solid rgba(255,255,255,0.3); border-radius: 10px; overflow: hidden; background: #050505; }
.step img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.step p { margin-top: 16px; font: 300 17px/1.4 "Roboto Condensed", sans-serif; }
.help-line { margin-top: 40px; text-align: center; font: 700 16px/1.4 "Roboto Condensed", sans-serif; color: var(--white); }
.help-line span { color: var(--green); }
.help-line a { color: #b9b9be; }

/* ---------- screenshots ---------- */
.shots { padding: 40px 0 70px; background: #000 url(../img/bg-hires.jpg) center top / cover no-repeat; }
.shots::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, #000 0, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 80%, #000 100%); }
.shots .wrap { position: relative; }
/* The line under the heading, as in every section. Here pictures follow it, not text, so the
   space is set to look the same on both sides: 44 px below (the carousel's own distance), and
   above 44 px less the room a line of capitals leaves under its letters (a fifth of the
   heading's size). */
.shots .rule { margin-top: calc(44px - 0.198 * clamp(28px, 4.1vw, 50px)); margin-bottom: 44px; }
.carousel { position: relative; max-width: 1128px; margin: 44px auto 0; padding: 0 56px; }
.car-view { overflow: hidden; border-radius: 6px; background: rgba(4,5,8,0.92); box-shadow: 0 30px 90px rgba(0,0,0,0.75); touch-action: pan-y; }
.car-track { display: flex; transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1); }
.car-slide { flex: 0 0 100%; margin: 0; }
.car-slide img { width: 100%; aspect-ratio: 16 / 9; object-fit: contain; cursor: zoom-in; }
.car-slide figcaption { padding: 12px 10px 14px; text-align: center; font-size: 12px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; color: var(--dim); }
.car-btn { position: absolute; top: 50%; width: 44px; height: 60px; margin-top: -46px; border: 0; background: none; color: var(--orange); cursor: pointer; }
.car-btn svg { width: 26px; height: 40px; fill: none; stroke: currentColor; stroke-width: 3; }
.car-btn.prev { left: 0; }
.car-btn.next { right: 0; }
.car-btn:hover { color: #ffc05a; }
.car-dots { display: flex; justify-content: center; gap: 9px; margin-top: 18px; }
.car-dots button { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%; background: #4a4a4e; cursor: pointer; }
.car-dots button.on { background: var(--orange); }

/* ---------- partners and footer ---------- */
.partners { padding: 10px 0 40px; }
.partners .wrap { padding-top: 44px; border-top: 1px dotted rgba(255,255,255,0.75); background-clip: content-box; }
.partner-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; }
/* a tile is a link, or a plain span for a partner without an address */
.partner-row > * { display: block; width: 105px; height: 60px; border-radius: 3px; overflow: hidden; transition: transform 0.2s; }
.partner-row a:hover { transform: translateY(-3px); }
.partner-row img { width: 100%; height: 100%; object-fit: cover; }
/* ---------- footer: the brand on the left, three columns of links, a bottom bar ---------- */
.foot { margin-top: 30px; padding: 58px 0 30px; border-top: 1px solid rgba(255,255,255,0.14); background: #060607; }
/* the brand and the three columns are as wide as their text and spread from edge to edge, so the
   last column ends where the content above ends */
.foot-grid { display: grid; grid-template-columns: repeat(4, auto); justify-content: space-between; gap: 40px; }
/* blog, knowledge and projects pages: as wide as their lists (1010 px), not as the home page */
body.blog .foot .wrap { max-width: 1058px; }
.foot-logo { display: inline-block; }
.foot-logo img { display: block; width: 146px; height: auto; }
.foot-tag { margin-top: 14px; font: 500 11px/1.5 Roboto, sans-serif; letter-spacing: 2.4px; text-transform: uppercase; color: var(--dim); }
.foot address { margin-top: 22px; font: normal 400 14px/1.65 Roboto, sans-serif; color: var(--text); }
.foot-social { margin-top: 22px; display: flex; gap: 10px; }
.foot-social a { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid rgba(255,255,255,0.22); border-radius: 8px;
                 color: var(--head); transition: color 0.2s, border-color 0.2s; }
.foot-social a:hover { color: var(--white); border-color: var(--teal-hi); }
.foot-social svg { width: 17px; height: 17px; fill: currentColor; }
.foot-h { margin-bottom: 14px; font: 700 12px/1.2 Roboto, sans-serif; letter-spacing: 2.4px; text-transform: uppercase; color: var(--white); }
.foot-col a { display: block; width: fit-content; padding: 6px 0; font: 400 14px/1.4 Roboto, sans-serif; color: var(--text); text-decoration: none; transition: color 0.2s; }
.foot-col a:hover { color: var(--white); }
.foot-bar { margin-top: 46px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,0.14); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px;
            font: 500 12px/1.5 Roboto, sans-serif; letter-spacing: 1.6px; text-transform: uppercase; color: var(--dim); }

/* ---------- blog: the list, the block on the home page and an article ---------- */
.page { padding: calc(var(--top-h) + 64px) 0 50px; min-height: 72vh; }
/* The blog's backdrop: the picture the dashboards use, filling the window.
   It stays where it is while the page scrolls over it. A layer of its own,
   not a fixed background: phones don't keep those in place. */
body.blog::before { content: ""; position: fixed; z-index: -1; inset: 0; background: #000 url(../img/bg-hires.jpg) center / cover no-repeat; }
.news { padding: 30px 0 70px; }
.post-list { display: grid; gap: 18px; max-width: 1010px; margin: 44px auto 0; }
/* the home page's latest articles: five in a row, as picture, date and headline */
.news .post-row { grid-template-columns: repeat(5, 1fr); gap: 14px; max-width: 1128px; margin: 0 auto; }
.news .post-small .post-date { margin: 10px 2px 0; font-size: 10.5px; letter-spacing: 1.5px; }
.news .post-small h3 { margin: 3px 2px 0; font-size: 15px; }
@media (max-width: 1000px) {
  .news .post-row { grid-template-columns: 1fr; gap: 10px; max-width: 760px; }
  .news .post-small { display: grid; grid-template-columns: 128px 1fr; gap: 14px; align-items: center; padding: 8px 12px 8px 8px; }
  .news .post-small .post-date, .news .post-small h3 { margin: 0; }
}
@media (max-width: 600px) {
  .news .post-small { grid-template-columns: 104px 1fr; gap: 12px; }
}
.post-card { display: grid; grid-template-columns: 340px 1fr; gap: 28px; align-items: center; padding: 18px; border: 1px solid rgba(255,255,255,0.2);
             border-radius: 12px; background: linear-gradient(160deg, rgba(40,40,44,0.72), rgba(8,8,10,0.86)); color: var(--text); text-decoration: none;
             transition: border-color 0.2s, transform 0.2s; }
.post-card { position: relative; }
.post-card:hover { border-color: rgba(255,255,255,0.6); transform: translateY(-2px); }
/* The headline's link covers the whole card; the tags lie above it and are links of their own. */
.post-link { color: inherit; text-decoration: none; }
.post-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.post-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 12px; }
/* The partner's banner, an item of a list: white, with the logo and a few words. It takes the shape
   the articles have in the chosen view: a row, a tile, or a large row (these rules).
   Its class names say "extra" on purpose: ad blockers hide whatever is called .post-ad or .post-ads
   (a general rule of the public lists), and a page of tiles then ended one tile short. */
.post-extra { display: grid; grid-template-columns: 340px 1fr auto; align-items: center; gap: 28px; padding: 18px 30px 18px 18px;
           border: 1px solid #fff; border-radius: 12px; background: #fff; color: #3a3d42; text-decoration: none;
           transition: transform 0.2s, box-shadow 0.2s; }
.post-extra:hover { transform: translateY(-2px); box-shadow: 0 0 0 2px var(--teal-hi); }
/* the logo stands where an article has its picture */
.post-extra-logo { display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 9; }
.post-extra-logo img { display: block; width: 78%; height: auto; }
.post-extra-text { display: block; }
.post-extra-kicker { display: block; font: 500 12px/1.5 Roboto, sans-serif; letter-spacing: 2px; text-transform: uppercase; color: #1d7a31; }
.post-extra strong { display: block; margin-top: 8px; font: 700 clamp(20px, 2.2vw, 26px)/1.2 "Roboto Condensed", sans-serif; text-transform: uppercase; color: #0b0c0e; }
.post-extra-more { font: 700 12px/1 Roboto, sans-serif; letter-spacing: 2px; text-transform: uppercase; color: var(--teal); white-space: nowrap; }
.post-extra:hover .post-extra-more { color: #000; }
.post-extra-sub { display: none; }

/* The banners' place holds two banners in the same spot and shows them in turn, as the box at the
   top right of the Overview dashboard does with its messages: about 7 seconds each, fading from
   one to the other. Plain CSS, no script. It waits while the pointer or the keyboard is on it, so
   a banner never changes under a click. */
.post-extras { display: grid; min-width: 0; }
.post-extras > .post-extra { grid-area: 1 / 1; min-width: 0; animation: adTurnFirst 14s ease-in-out infinite; }
.post-extras > .post-extra + .post-extra { animation-name: adTurnSecond; }
.post-extras:hover > .post-extra, .post-extras:focus-within > .post-extra { animation-play-state: paused; }
/* Three banners in the place: seven seconds each, the same fade. One set of steps for all three;
   the second and third run it two thirds and one third of the round ahead. */
.post-extras.three > .post-extra { animation: turnOfThree 21s ease-in-out infinite; }
.post-extras.three > .post-extra:nth-child(2) { animation-delay: -14s; }
.post-extras.three > .post-extra:nth-child(3) { animation-delay: -7s; }
@keyframes turnOfThree { 0%, 27.33% { opacity: 1; visibility: visible; } 33.33%, 94% { opacity: 0; visibility: hidden; } 100% { opacity: 1; visibility: visible; } }
@keyframes adTurnFirst  { 0%, 41% { opacity: 1; visibility: visible; } 50%, 91% { opacity: 0; visibility: hidden; } 100% { opacity: 1; visibility: visible; } }
@keyframes adTurnSecond { 0%, 41% { opacity: 0; visibility: hidden; } 50%, 91% { opacity: 1; visibility: visible; } 100% { opacity: 0; visibility: hidden; } }
/* Less motion asked for: the first banner stands, the second is left out (build.py lets them take
   turns as the first from page to page), and the little radio keeps still. */
@media (prefers-reduced-motion: reduce) {
  .post-extras > .post-extra { animation: none; }
  .post-extras > .post-extra + .post-extra { display: none; }
  .radio-needle, .radio-lamp, .radio-wave, .post-extra.radio .post-extra-kicker i { animation: none !important; }
}

/* Bitcoin Radio's banner: that station's own colours, a warm dark ground, its orange and cream. */
.post-extra.radio { border-color: rgba(247,147,26,0.45); color: #d9c9b2;
                 background: radial-gradient(ellipse at 22% 45%, #3b2410 0, #1d130a 46%, #120c07 100%); }
.post-extra.radio:hover { box-shadow: 0 0 0 2px #f7931a; }
.post-extra.radio { overflow: hidden; }
.post-extra.radio .post-extra-logo svg { display: block; width: 84%; height: auto; overflow: visible; filter: drop-shadow(0 10px 16px rgba(0,0,0,0.55)); }
.post-extra.radio .post-extra-kicker { display: flex; align-items: center; gap: 8px; color: #f7931a; }
.post-extra.radio .post-extra-kicker i { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: #3ddc97; box-shadow: 0 0 0 3px rgba(61,220,151,0.22);
                                   animation: radioLamp 1.8s ease-in-out infinite; }
.post-extra.radio strong { font-family: Poppins, Roboto, sans-serif; text-transform: none; letter-spacing: -0.2px; color: #fff3e0; }
.post-extra.radio strong em { font-style: normal; color: #f7931a; white-space: nowrap; }
.post-extra.radio .post-extra-sub { margin-top: 8px; font: 300 17px/1.4 "Roboto Condensed", sans-serif; color: #cbbba3; }
.post-extra.radio .post-extra-more { color: #f7931a; }
.post-extra.radio:hover .post-extra-more { color: #fff3e0; }
/* Mining Disrupt's banner: near-black with the green of its logo, the show's own picture where an
   article has its picture (it fills that place, where a logo keeps some air around it). */
.post-extra.disrupt { border-color: rgba(57,231,181,0.45); color: #b4cfc8; overflow: hidden;
                   background: radial-gradient(ellipse at 16% 30%, rgba(57,231,181,0.16) 0, rgba(57,231,181,0) 52%), linear-gradient(160deg, #071a1c, #020607 74%); }
.post-extra.disrupt:hover { box-shadow: 0 0 0 2px #39e7b5; }
.post-extra.disrupt .post-extra-logo { border-radius: 8px; overflow: hidden; }
.post-extra.disrupt .post-extra-logo img { width: 100% !important; height: 100%; object-fit: cover; }
.post-extra.disrupt .post-extra-kicker { color: #39e7b5; }
.post-extra.disrupt strong { color: #f1fffa; }
.post-extra.disrupt strong em { font-style: normal; color: #39e7b5; white-space: nowrap; }
.post-extra.disrupt .post-extra-sub { margin-top: 8px; font: 300 17px/1.4 "Roboto Condensed", sans-serif; color: #a5c2bb; }
.post-extra.disrupt .post-extra-more { color: #39e7b5; }
.post-extra.disrupt:hover .post-extra-more { color: #f1fffa; }
/* A banner inside an article (build.py: ::: banner disrupt): the list's banner, its words in full,
   the link under them. */
.post-banner { margin: 34px 0 10px; }
/* a video of our own in an article (build.py video_block): framed like a picture, 16:9 until it loads */
.post-video video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #000; }
.post-banner .post-extra { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 10px 26px; padding: 16px 26px 16px 16px; }
.post-banner .post-extra-logo { grid-row: span 2; }
.post-banner .post-extra-text { align-self: end; }
.post-banner .post-extra-sub { display: block; }
.post-banner .post-extra-more { grid-column: 2; align-self: start; justify-self: start; }
@media (max-width: 760px) {
  .post-banner .post-extra { grid-template-columns: 1fr; gap: 14px; padding: 14px 14px 18px; }
  .post-banner .post-extra-logo { grid-row: auto; }
  .post-banner .post-extra-more { grid-column: 1; }
}
.radio-needle { animation: radioTune 7s ease-in-out infinite alternate; }
.radio-lamp { animation: radioLamp 1.8s ease-in-out infinite; }
.radio-wave { opacity: 0; animation: radioWave 2.4s ease-out infinite; }
.radio-wave.late { animation-delay: 0.5s; }
@keyframes radioTune { 0% { transform: translateX(0); } 35% { transform: translateX(38px); } 60% { transform: translateX(22px); } 100% { transform: translateX(60px); } }
@keyframes radioLamp { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@keyframes radioWave { 0% { opacity: 0; } 25% { opacity: 0.9; } 70%, 100% { opacity: 0; } }
.post-tags a { position: relative; z-index: 1; display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border: 1px solid rgba(255,255,255,0.2); border-radius: 11px; background: rgba(40,40,44,0.6); font: 500 11px/1 Roboto, sans-serif; letter-spacing: 1px; text-transform: uppercase; color: var(--dim); text-decoration: none; white-space: nowrap; }
.post-tags a:hover { border-color: var(--green); color: var(--green); }
.post-tags span { margin-right: 6px; font: 700 12px/1 Roboto, sans-serif; letter-spacing: 2px; text-transform: uppercase; color: var(--dim); }
.post-card.plain { grid-template-columns: 1fr; padding: 24px 26px; }
.post-card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border: 1px solid rgba(255,255,255,0.28); border-radius: 8px; }
.post-date { font: 500 12px/1.5 Roboto, sans-serif; letter-spacing: 2px; text-transform: uppercase; color: var(--green-dim); }
.post-card h2, .post-card h3 { margin: 8px 0 10px; font: 700 clamp(20px, 2.2vw, 26px)/1.2 "Roboto Condensed", sans-serif; text-transform: uppercase; color: var(--white); }
.post-card .sum { font: 300 18px/1.42 "Roboto Condensed", sans-serif; }
.post-card .more { display: inline-block; margin-top: 14px; font: 700 12px/1 Roboto, sans-serif; letter-spacing: 2px; text-transform: uppercase; color: var(--teal-hi); }
/* The blog page's list in three views (html.blog-list / blog-grid / blog-large,
   kept in the browser; no class: the compact list). The home page's three
   articles always show as large cards. */
.view-switch { display: none; }
.js .view-switch { display: flex; justify-content: flex-end; gap: 6px; max-width: 1010px; margin: 34px auto -30px; }
.view-switch button { width: 36px; height: 32px; padding: 0; border: 1px solid rgba(255,255,255,0.22); border-radius: 6px; background: rgba(40,40,44,0.6); color: var(--dim); cursor: pointer; }
.view-switch button:hover { border-color: rgba(255,255,255,0.6); color: var(--white); }
.view-switch button.on { border-color: var(--green); color: var(--green); }
.view-switch svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; vertical-align: middle; }
.list-tools { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 16px; max-width: 1010px; margin: 34px auto -30px; }
.js .list-tools .view-switch { margin: 0 0 0 auto; }
.topic-row { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
/* The label before the buttons: their shape, a lighter ground and no border, so it reads as a label and not as one more button. */
.topic-label { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px 0 8px; margin-right: 3px; border-radius: 5px; background: rgba(255,255,255,0.16);
               font: 700 10px/1 Roboto, sans-serif; letter-spacing: 1.5px; text-transform: uppercase; color: var(--head); }
.topic-label svg, .topic-row a svg { flex: 0 0 auto; width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.topic-row a svg { width: 12px; height: 12px; margin-right: 5px; }
/* narrower than this the icons would push the buttons onto a second line */
@media (max-width: 1000px) {
  .topic-row a svg { display: none; }
}
/* and narrower than this the label would push the list/tiles switch onto a line of its own */
@media (max-width: 850px) {
  .topic-label { display: none; }
}
.topic-row a, .post-share a, .share-copy { display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 0 12px; border: 1px solid rgba(255,255,255,0.22); border-radius: 6px; background: rgba(40,40,44,0.6); font: 700 12px/1 Roboto, sans-serif; letter-spacing: 2px; text-transform: uppercase; color: var(--dim); text-decoration: none; }
.topic-row a:hover, .post-share a:hover, .share-copy:hover { border-color: rgba(255,255,255,0.6); color: var(--white); }
/* the topic buttons over a list are smaller than the share buttons they are styled with */
.topic-row a { height: 26px; padding: 0 9px; border-radius: 5px; font-size: 10px; letter-spacing: 1.2px; }
.topic-row a.on { border-color: var(--green); color: var(--green); }
@media (max-width: 1000px) {
  .kb-grid { grid-template-columns: repeat(2, 1fr); }
}
.post-topic { margin-left: 10px; padding-left: 10px; border-left: 1px solid rgba(255,255,255,0.3); color: var(--dim); text-decoration: none; }
a.post-topic:hover { color: var(--white); }
.pager { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; max-width: 1010px; margin: 34px auto 0; }
.pager a, .pager span { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 32px; padding: 0 12px; border: 1px solid rgba(255,255,255,0.22); border-radius: 6px; background: rgba(40,40,44,0.6); font: 700 12px/1 Roboto, sans-serif; letter-spacing: 2px; text-transform: uppercase; color: var(--dim); text-decoration: none; }
.pager a:hover { border-color: rgba(255,255,255,0.6); color: var(--white); }
.pager .on { border-color: var(--green); color: var(--green); }
.pager .off { opacity: 0.35; }
/* compact list */
html:not(.blog-grid):not(.blog-large) .switchable { gap: 10px; }
html:not(.blog-grid):not(.blog-large) .switchable .post-card { grid-template-columns: 168px 1fr; gap: 20px; padding: 10px 16px 10px 10px; border-radius: 10px; }
html:not(.blog-grid):not(.blog-large) .switchable .post-card.plain { grid-template-columns: 1fr; padding: 14px 18px; }
html:not(.blog-grid):not(.blog-large) .switchable .post-card img { border-radius: 6px; }
html:not(.blog-grid):not(.blog-large) .switchable .post-card h2 { margin: 3px 0 4px; font-size: clamp(16px, 1.6vw, 19px); }
html:not(.blog-grid):not(.blog-large) .switchable .post-card .sum { font-size: 15px; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
html:not(.blog-grid):not(.blog-large) .switchable .post-date { font-size: 11px; }
html:not(.blog-grid):not(.blog-large) .switchable .more { display: none; }
html:not(.blog-grid):not(.blog-large) .switchable .post-tags { margin-top: 6px; }
html:not(.blog-grid):not(.blog-large) .switchable .post-extra { grid-template-columns: 168px 1fr auto; gap: 20px; padding: 10px 22px 10px 10px; border-radius: 10px; }
html:not(.blog-grid):not(.blog-large) .switchable .post-extra-logo img { width: 88%; }
html:not(.blog-large) .switchable .post-extra-kicker { font-size: 11px; }
html:not(.blog-grid):not(.blog-large) .switchable .post-extra strong { margin-top: 3px; font-size: clamp(16px, 1.6vw, 19px); }
/* grid */
.blog-grid .switchable { grid-template-columns: repeat(3, 1fr); gap: 16px; }
.blog-grid .switchable .post-card { grid-template-columns: 1fr; gap: 12px; align-items: start; align-content: start; padding: 12px 12px 16px; }
.blog-grid .switchable .post-card h2 { margin: 4px 0 6px; font-size: 18px; }
.blog-grid .switchable .post-card .sum { font-size: 15px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.blog-grid .switchable .post-date { font-size: 11px; }
.blog-grid .switchable .more { display: none; }
.blog-grid .switchable .post-tags { margin-top: 8px; }
html.blog-large .switchable .post-extra-sub { display: block; }
@media (min-width: 761px) {
  .blog-grid .switchable .post-extra.radio .post-extra-sub, .blog-grid .switchable .post-extra.disrupt .post-extra-sub { display: block; font-size: 15px; }
}
/* the banner as a tile: logo on top, words below, the link at the foot */
.blog-grid .switchable .post-extra { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 1fr; align-items: start; gap: 12px; padding: 12px 12px 16px; }
.blog-grid .switchable .post-extra strong { margin-top: 4px; font-size: 18px; }
.blog-grid .switchable .post-extra-more { align-self: end; }
/* A page of tiles ends with a full row: the banners' place takes up what the articles leave of the last one.
   build.py says how many columns that is with three tiles in a row (wide3-…) and with two (wide2-…).
   Two of three: logo left, words right. A whole row: the banner as in the list. */
@media (min-width: 901px) {
  .blog-grid .switchable .post-extras.wide3-2 { grid-column: span 2; }
  .blog-grid .switchable .post-extras.wide3-2 .post-extra { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: 1fr auto auto 1fr; column-gap: 24px; row-gap: 14px; align-items: center; padding: 12px 24px 12px 12px; }
  .blog-grid .switchable .post-extras.wide3-2 .post-extra-logo { grid-row: 1 / -1; }
  .blog-grid .switchable .post-extras.wide3-2 .post-extra-text { grid-column: 2; grid-row: 2; }
  .blog-grid .switchable .post-extras.wide3-2 .post-extra-more { grid-column: 2; grid-row: 3; align-self: start; }
  .blog-grid .switchable .post-extras.wide3-2 strong { font-size: 22px; }
  .blog-grid .switchable .post-extras.wide3-2 .post-extra-sub { display: block; }
  .blog-grid .switchable .post-extras.wide3-3 { grid-column: 1 / -1; }
  .blog-grid .switchable .post-extras.wide3-3 .post-extra { grid-template-columns: 168px 1fr auto; grid-template-rows: auto; align-items: center; gap: 20px; padding: 10px 22px 10px 10px; }
  .blog-grid .switchable .post-extras.wide3-3 .post-extra-logo img { width: 88%; }
  .blog-grid .switchable .post-extras.wide3-3 .post-extra-more { align-self: center; }
}
@media (max-width: 900px) {
  .blog-grid .switchable { grid-template-columns: repeat(2, 1fr); }
  .blog-grid .switchable .post-extras.wide2-2 { grid-column: 1 / -1; }
  .blog-grid .switchable .post-extras.wide2-2 .post-extra { grid-template-columns: 168px 1fr auto; grid-template-rows: auto; align-items: center; gap: 20px; padding: 10px 22px 10px 10px; }
  .blog-grid .switchable .post-extras.wide2-2 .post-extra-logo img { width: 88%; }
  .blog-grid .switchable .post-extras.wide2-2 .post-extra-more { align-self: center; }
}
@media (max-width: 760px) {
  .js .view-switch { margin: 26px 0 -26px; }
  html:not(.blog-grid):not(.blog-large) .switchable .post-card { grid-template-columns: 104px 1fr; gap: 12px; padding: 8px 12px 8px 8px; align-items: center; }
  html:not(.blog-grid):not(.blog-large) .switchable .post-card .sum { display: none; }
  html:not(.blog-large) .switchable .post-tags { display: none; }
  .post-extra { grid-template-columns: 1fr; gap: 16px; padding: 18px; }
  .post-extra-more { justify-self: start; }
  html:not(.blog-grid):not(.blog-large) .switchable .post-extra { grid-template-columns: 104px 1fr; gap: 12px; padding: 8px 12px 8px 8px; }
  html:not(.blog-grid):not(.blog-large) .switchable .post-extra-more { display: none; }
  html:not(.blog-large) .switchable .post-extra-kicker { font-size: 10px; letter-spacing: 1px; }
  html:not(.blog-grid):not(.blog-large) .switchable .post-extra strong { font-size: 15px; }
  html:not(.blog-grid):not(.blog-large) .switchable .post-card h2 { font-size: 15px; }
  .blog-grid .switchable { gap: 10px; }
  .blog-grid .switchable .post-card { padding: 8px 8px 12px; gap: 8px; }
  .blog-grid .switchable .post-card h2 { font-size: 14px; }
  .blog-grid .switchable .post-extra { padding: 8px 8px 12px; gap: 8px; }
  .blog-grid .switchable .post-extra strong { font-size: 14px; }
  .blog-grid .switchable .post-extra.radio .post-extra-more, .blog-grid .switchable .post-extra.disrupt .post-extra-more { font-size: 10px; letter-spacing: 0.6px; }
  .blog-grid .switchable .post-extras.wide2-2 .post-extra { grid-template-columns: 104px 1fr; gap: 12px; padding: 8px 12px 8px 8px; }
  .blog-grid .switchable .post-extras.wide2-2 .post-extra-more { display: none; }
  .blog-grid .switchable .post-extras.wide2-2 strong { font-size: 15px; }
  .blog-grid .switchable .post-card .sum { display: none; }
}
.post { max-width: 868px; margin: 0 auto; padding: 0 24px; }
.post h1 { margin: 10px 0 18px; font: 700 clamp(28px, 4vw, 46px)/1.1 Roboto, sans-serif; text-transform: uppercase; color: var(--head); }
.post-summary { font: 300 clamp(19px, 2vw, 24px)/1.4 "Roboto Condensed", sans-serif; color: var(--head); }
.post .frame { max-width: none; margin: 34px 0; }
/* A row of small pictures (:::row in a post): side by side, equally wide, however many there are.
   Right under a large picture it moves up close to it, so the two read as one group. */
.pic-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 10px; margin: 34px 0; }
.frame + .pic-row { margin-top: -24px; }
.post .pic-row .frame { margin: 0; border-width: 2px; border-radius: 7px; }
.pic-row img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
/* Screenshots of a phone (:::phones in a post): each picture is the phone in its frame with nothing
   behind it, so there is no border around it. Side by side and equally wide; one or two stand in the
   middle; on a narrow screen the row is a strip to swipe through, the next phone looking in (a row of
   three or more opens on its middle picture: site.js). */
.phone-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 14px; margin: 30px 0 26px; }
.phone-row.n1 { grid-auto-columns: minmax(0, 400px); justify-content: center; }
.phone-row.n2 { grid-auto-columns: minmax(0, 300px); justify-content: center; }
.phone-row figure { margin: 0; }
.phone-row img { display: block; width: 100%; height: auto; }
.post-body .phone-row figcaption { padding: 2px 6px 0; background: none; font-weight: 500; letter-spacing: 1.5px; }
@media (max-width: 640px) {
  .phone-row, .phone-row.n2 { grid-auto-columns: 66vw; justify-content: start; gap: 2vw; margin-left: -24px; margin-right: -24px; padding: 0 17vw;
               overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .phone-row::-webkit-scrollbar { display: none; }
  .phone-row figure { scroll-snap-align: center; }
  .phone-row.n1 { grid-auto-columns: minmax(0, 300px); justify-content: center; padding: 0 24px; overflow: visible; }
}
.post-body { font: 400 17px/1.7 Roboto, sans-serif; color: #c3c3c9; }
.post-body h2 { margin: 44px 0 16px; padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,0.6);
                font: 700 23px/1.2 "Roboto Condensed", sans-serif; text-transform: uppercase; color: var(--white); }
.post-body h3 { margin: 30px 0 10px; font: 700 18px/1.3 "Roboto Condensed", sans-serif; text-transform: uppercase; color: var(--head); }
.post-body p { margin: 0 0 18px; }
.post-body ul, .post-body ol { margin: 0 0 18px; padding-left: 24px; }
.post-body li { margin-bottom: 8px; }
.post-body b { font-weight: 700; color: var(--white); }
.post-body a:hover, .post-back a:hover { color: var(--white); }
/* "=> [Label](address)" in an article: a link as a button */
.post-body .post-button { margin: 30px 0 22px; }
.post-body a.btn, .post-body a.btn:hover { color: var(--white); text-decoration: none; }
.post-body blockquote { margin: 0 0 18px; padding: 6px 18px; border-left: 3px solid var(--teal); color: var(--head); }
.post-body blockquote p { margin: 0; }
.post-body code { padding: 1px 5px; border-radius: 4px; background: var(--bar-value); font: 0.9em ui-monospace, Menlo, Consolas, monospace; }
.post-body pre { margin: 0 0 18px; padding: 14px 16px; overflow: auto; border: 1px solid #2a2a2e; border-radius: 8px; background: #101012; }
.post-body pre code { padding: 0; background: none; }
.post-body hr { height: 1px; margin: 34px 0; border: 0; background: rgba(255,255,255,0.25); }
.post-body .table-wrap { margin: 0 0 22px; overflow-x: auto; border: 1px solid #2a2a2e; border-radius: 8px; background: #0b0b0d; }
.post-body table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.4; }
.post-body th, .post-body td { padding: 9px 14px; border-bottom: 1px solid #1f1f23; text-align: center; }
.post-body th:first-child { text-align: left; white-space: nowrap; }
.post-body thead th { background: #121215; font: 700 13px/1.3 "Roboto Condensed", sans-serif; letter-spacing: 1px; text-transform: uppercase; color: var(--head); }
.post-body tbody th { font-weight: 400; color: #c3c3c9; }
.post-body tbody tr:last-child th, .post-body tbody tr:last-child td { border-bottom: 0; }
.post-body td.yes { color: var(--green); font-weight: 700; }
.post-body td.no { color: #55555d; }
.post-body figcaption { padding: 10px; background: #08090c; text-align: center; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--dim); }
.post-buy, .post-cta { margin-top: 28px; padding: 22px 24px; border: 1px solid rgba(255,255,255,0.2); border-radius: 12px; background: rgba(40,40,44,0.45); }
.post-buy { display: grid; grid-template-columns: 168px 1fr; gap: 22px; align-items: center; margin-top: 40px; }
.post-buy-logo { display: block; border-radius: 6px; overflow: hidden; transition: transform 0.2s; }
.post-buy-logo:hover { transform: translateY(-2px); }
.post-buy-logo img { display: block; width: 100%; }
.post-buy p, .post-cta p { margin: 0 0 10px; font: 400 16px/1.6 Roboto, sans-serif; color: #c3c3c9; }
.post-buy .post-box-head, .post-cta .post-box-head { margin: 0 0 6px; font: 700 20px/1.3 "Roboto Condensed", sans-serif; text-transform: uppercase; color: var(--white); }
.post-buy .more { font: 700 12px/1 Roboto, sans-serif; letter-spacing: 2px; text-transform: uppercase; color: var(--teal-hi); text-decoration: none; }
.post-buy .more:hover { color: var(--white); }
.post-cta { padding: 28px 24px; text-align: center; }
.post-cta .post-cta-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 18px 0 0; }
.post-cta .post-cta-note { margin: 16px 0 0; font: 500 12px/1.5 Roboto, sans-serif; letter-spacing: 2px; text-transform: uppercase; color: var(--dim); }
.post-share { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 40px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,0.25); }
.post-share span { margin-right: 8px; font: 700 12px/1 Roboto, sans-serif; letter-spacing: 2px; text-transform: uppercase; color: var(--dim); }
.share-copy { display: none; cursor: pointer; }
.js .share-copy { display: inline-flex; }
.share-copy.done { border-color: var(--green); color: var(--green); }
.post-step { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 28px; }
.post-step a { display: block; padding: 14px 16px; border: 1px solid rgba(255,255,255,0.2); border-radius: 10px; font: 700 16px/1.3 "Roboto Condensed", sans-serif; text-transform: uppercase; color: var(--white); text-decoration: none; transition: border-color 0.2s; }
.post-step a:hover { border-color: rgba(255,255,255,0.6); }
.post-step a span { display: block; margin-bottom: 7px; font: 700 12px/1 Roboto, sans-serif; letter-spacing: 2px; color: var(--teal-hi); }
.post-step .newer { text-align: right; }
.post-more { margin-top: 44px; }
.post-more h2 { margin: 0 0 16px; padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,0.6); font: 700 23px/1.2 "Roboto Condensed", sans-serif; text-transform: uppercase; color: var(--white); }
.post-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.post-small { display: block; padding: 10px 10px 14px; border: 1px solid rgba(255,255,255,0.2); border-radius: 10px; text-decoration: none; transition: border-color 0.2s, transform 0.2s; }
.post-small:hover { border-color: rgba(255,255,255,0.6); transform: translateY(-2px); }
.post-small img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border: 1px solid rgba(255,255,255,0.28); border-radius: 6px; }
.post-small h3 { margin: 10px 2px 0; font: 700 16px/1.25 "Roboto Condensed", sans-serif; text-transform: uppercase; color: var(--white); }
.post > .post-tags { margin-top: 40px; }
.post-more .post-tags { margin-top: 0; gap: 6px; }
.post-more .post-tags a, .post > .post-tags a { height: 26px; padding: 0 11px; border-radius: 13px; font-size: 12px; }
/* a knowledge page has no cover between its summary and its text */
.post-summary + .post-body { margin-top: 26px; padding-top: 26px; border-top: 1px solid rgba(255,255,255,0.25); }
.post-crumb { color: var(--green-dim); text-decoration: none; }
.post-crumb:hover { color: var(--white); }
/* an article as a row, on a knowledge page */
.post-rows { display: grid; gap: 10px; }
.post-rows .post-small { display: grid; grid-template-columns: 128px 1fr; gap: 16px; align-items: center; padding: 8px 14px 8px 8px; }
.post-rows .post-small h3 { margin: 2px 0 0; }
.post-rows .post-date { font-size: 11px; }

/* ---------- the knowledge base's front page ---------- */
.kb-group { max-width: 1010px; margin: 50px auto 16px; padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,0.6); font: 700 23px/1.2 "Roboto Condensed", sans-serif; text-transform: uppercase; color: var(--white); }
.kb-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; max-width: 1010px; margin: 0 auto; }
.kb-card { display: block; padding: 16px 18px 18px; text-align: center; border: 1px solid rgba(255,255,255,0.2); border-radius: 10px; background: linear-gradient(160deg, rgba(40,40,44,0.72), rgba(8,8,10,0.86)); text-decoration: none; transition: border-color 0.2s, transform 0.2s; }
.kb-card:hover { border-color: rgba(255,255,255,0.6); transform: translateY(-2px); }
.kb-card h3 { font: 700 19px/1.2 "Roboto Condensed", sans-serif; text-transform: uppercase; color: var(--white); }
.kb-card p { margin-top: 6px; font: 300 15px/1.42 "Roboto Condensed", sans-serif; color: var(--text); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.kb-card span { display: block; margin-top: 10px; font: 500 11px/1 Roboto, sans-serif; letter-spacing: 1.5px; text-transform: uppercase; color: var(--green-dim); }
.post-back { margin-top: 44px; }
.post-back a { font: 700 12px/1 Roboto, sans-serif; letter-spacing: 2px; text-transform: uppercase; color: var(--teal-hi); text-decoration: none; }
@media (max-width: 760px) {
  .post-card { grid-template-columns: 1fr; gap: 16px; }
  .post { padding: 0 16px; }
  .post-body { font-size: 16px; }
  .list-tools { margin: 26px 0 -26px; gap: 8px 12px; }
  .topic-row a { padding: 0 8px; letter-spacing: 1px; }
  .view-switch button { width: 30px; height: 26px; border-radius: 5px; }
  .view-switch svg { width: 15px; height: 15px; }
/* A phone held upright: no topic buttons over the list. On a topic's own list only that topic
   and the way back to all articles stay. */
@media (max-width: 600px) {
  .topic-row a, .topic-label { display: none; }
  .topic-row a.on, .topic-row a:first-of-type { display: inline-flex; }
  .topic-row a.on:first-of-type { display: none; }
}
  .post-buy { grid-template-columns: 1fr; gap: 14px; }
  .post-buy-logo { max-width: 168px; }
  .post-step { grid-template-columns: 1fr; }
  .post-step .newer { text-align: left; }
  .post-row { grid-template-columns: 1fr; gap: 10px; }
  .post-small { display: grid; grid-template-columns: 104px 1fr; gap: 12px; align-items: center; padding: 8px 12px 8px 8px; }
  .post-small h3 { margin: 0; font-size: 15px; }
  .post-rows .post-small { grid-template-columns: 104px 1fr; gap: 12px; padding: 8px 12px 8px 8px; }
  .kb-grid { grid-template-columns: 1fr; gap: 10px; }
  .kb-group { margin-top: 36px; }
}

/* ---------- gallery (blog articles) ---------- */
/* One picture at a time. The pictures slide by the browser's own scrolling,
   so a finger works without the script; the script adds the arrows, the
   counter and the row of small pictures. */
.gallery { margin: 30px 0 10px; }
.gal-stage { position: relative; border: 3px solid rgba(214,214,214,0.85); border-radius: 10px; overflow: hidden; background: #000; }
.gal-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; }
.gal-track::-webkit-scrollbar { display: none; }
.gal-track:focus-visible { outline: 2px solid var(--teal-hi); outline-offset: -2px; }
.gal-slide { position: relative; flex: 0 0 100%; margin: 0; scroll-snap-align: center; scroll-snap-stop: always; }
.gal-slide img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; cursor: zoom-in; }
.post-body .gal-slide figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 34px 60px 12px; background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.82)); color: #e4e4e8; pointer-events: none; }
.gal-btn, .gal-count, .gal-thumbs { display: none; }
.gallery.on .gal-btn { display: block; position: absolute; top: 50%; width: 46px; height: 64px; margin-top: -32px; padding: 0; border: 0; border-radius: 6px; background: rgba(0,0,0,0.5); color: var(--orange); cursor: pointer; }
.gallery.on .gal-btn:hover { background: rgba(0,0,0,0.75); color: #ffc05a; }
.gal-btn svg { width: 20px; height: 32px; fill: none; stroke: currentColor; stroke-width: 3; }
.gal-btn.prev { left: 8px; }
.gal-btn.next { right: 8px; }
.gallery.on .gal-count { display: block; position: absolute; top: 10px; right: 12px; margin: 0; padding: 3px 10px; border-radius: 999px; background: rgba(0,0,0,0.6); font: 500 12px/1.6 Roboto, sans-serif; letter-spacing: 1px; color: #e4e4e8; }
.gallery.on .gal-thumbs { display: flex; position: relative; gap: 8px; margin-top: 10px; padding-bottom: 8px; overflow-x: auto; scrollbar-width: thin; scrollbar-color: #3a3a3e transparent; }
.gal-thumbs button { flex: 0 0 auto; padding: 0; border: 2px solid transparent; border-radius: 6px; overflow: hidden; background: none; line-height: 0; opacity: 0.5; cursor: pointer; }
.gal-thumbs button:hover { opacity: 0.85; }
.gal-thumbs button.on { border-color: var(--green); opacity: 1; }
.gal-thumbs img { display: block; width: 96px; height: 72px; object-fit: cover; }
@media (max-width: 760px) {
  .gal-stage { border-width: 2px; border-radius: 7px; }
  .post-body .gal-slide figcaption { padding: 28px 12px 10px; font-size: 11px; }
  .gallery.on .gal-btn { width: 36px; height: 52px; margin-top: -26px; }
  .gal-thumbs img { width: 76px; height: 57px; }
}

/* ---------- picture viewer ---------- */
.viewer { position: fixed; z-index: 90; inset: 0; display: none; align-items: center; justify-content: center; padding: 3vh 3vw; background: rgba(0,0,0,0.93); cursor: zoom-out; }
.viewer.open { display: flex; }
.viewer img { max-width: 100%; max-height: 94vh; border: 2px solid rgba(214,214,214,0.7); border-radius: 8px; }
/* opened from a gallery: arrows to the picture before and after */
.viewer-btn { display: none; position: absolute; top: 50%; width: 54px; height: 76px; margin-top: -38px; padding: 0; border: 0; border-radius: 6px; background: rgba(0,0,0,0.55); color: var(--orange); cursor: pointer; }
.viewer.many .viewer-btn { display: block; }
.viewer-btn:hover { color: #ffc05a; }
.viewer-btn svg { width: 22px; height: 36px; fill: none; stroke: currentColor; stroke-width: 3; }
.viewer-btn.prev { left: 2vw; }
.viewer-btn.next { right: 2vw; }

/* ---------- account pages (register/, verify/, reset/) ----------
   Smaller than the site's other pages on purpose, headline and all: a form to fill in, not a page to read. */
.acct { padding-bottom: 90px; text-align: center; }
.acct .kicker { margin-bottom: 10px; font-size: clamp(15px, 1.4vw, 18px); }
.acct .title { font-size: clamp(24px, 3vw, 36px); }
.acct .rule { width: min(340px, 52%); height: 2px; margin: 20px auto 24px; }
.acct .lead { max-width: 620px; font-size: clamp(16px, 1.5vw, 19px); }
.acct-card { max-width: 400px; margin: 30px auto 0; padding: 22px 22px 20px; border: 1px solid rgba(255,255,255,0.2); border-radius: 10px; text-align: left;
             background: linear-gradient(160deg, rgba(40,40,44,0.72), rgba(8,8,10,0.86)); box-shadow: 0 30px 80px rgba(0,0,0,0.7); }
.acct-card:focus { outline: none; }
.acct-card label { display: block; margin: 0 0 6px; font: 700 11px/1.3 Roboto, sans-serif; letter-spacing: 1.8px; text-transform: uppercase; color: var(--dim); }
.acct-card input { display: block; width: 100%; height: 42px; margin: 0 0 14px; padding: 0 12px; border: 1px solid rgba(255,255,255,0.28); border-radius: 7px; background: rgba(0,0,0,0.55);
                   font: 400 15px/1 Roboto, sans-serif; color: var(--white); }
.acct-card input::placeholder { color: rgba(255,255,255,0.28); }
.acct-opt { margin-left: 6px; font-weight: 500; letter-spacing: 1px; color: rgba(255,255,255,0.32); }
.acct-card input:focus { outline: none; border-color: var(--teal-hi); box-shadow: 0 0 0 3px rgba(10,143,176,0.28); }
.acct-pass { position: relative; }
.acct-pass input { padding-right: 66px; margin-bottom: 7px; }
.acct-show { position: absolute; right: 5px; top: 5px; height: 32px; padding: 0 10px; border: 0; border-radius: 5px; background: rgba(255,255,255,0.1); cursor: pointer;
             font: 700 10px/1 Roboto, sans-serif; letter-spacing: 1.4px; text-transform: uppercase; color: var(--head); }
.acct-show:hover { background: rgba(255,255,255,0.18); }
.acct-rule { margin: 0 0 14px; font: 300 14px/1.4 "Roboto Condensed", sans-serif; color: var(--dim); }
.acct-card .btn { display: block; width: 100%; margin-top: 4px; border-radius: 8px; text-align: center; cursor: pointer; font-family: inherit; font-size: 14px; line-height: 44px; }
.acct-card .btn[disabled] { opacity: 0.6; cursor: progress; filter: none; transform: none; }
.acct-error { margin: 0 0 14px; padding: 9px 12px; border: 1px solid rgba(224,43,43,0.55); border-radius: 7px; background: rgba(224,43,43,0.1);
              font: 400 14px/1.4 Roboto, sans-serif; color: #ffb4b4; }
.acct-small { margin-top: 14px; font: 300 14px/1.45 "Roboto Condensed", sans-serif; color: var(--dim); }
.acct-card h2 { margin: 0 0 10px; font: 700 21px/1.2 "Roboto Condensed", sans-serif; text-transform: uppercase; color: var(--white); }
.acct-card p { font: 300 16px/1.45 "Roboto Condensed", sans-serif; color: var(--text); }
.acct-card p b { font-weight: 700; color: var(--head); overflow-wrap: anywhere; }
.acct-card p.acct-small { font-size: 14px; }
.acct-done h2 { color: var(--green); }
/* after the password is set: the next step, as the welcome e-mail has it */
.acct-step { margin: 0 0 4px; font: 700 11px/1.3 Roboto, sans-serif !important; letter-spacing: 1.8px; text-transform: uppercase; color: var(--dim) !important; }
.acct-card h3 { margin: 0 0 12px; font: 700 17px/1.25 "Roboto Condensed", sans-serif; text-transform: uppercase; color: var(--white); }
.acct-pic { margin: 0 0 14px; border: 1px solid rgba(255,255,255,0.3); border-radius: 8px; overflow: hidden; background: #000; }
.acct-pic img { display: block; width: 100%; height: auto; }
.acct-card .acct-small + .acct-small { margin-top: 8px; }
.acct-card .acct-small.mid { text-align: center; }
.acct-actions { margin-top: 16px; }
.acct-link { padding: 0; border: 0; background: none; cursor: pointer; font: inherit; color: var(--teal-hi); text-decoration: underline; }
.acct-foot { margin-top: 22px; font: 300 15px/1.5 "Roboto Condensed", sans-serif; color: var(--dim); }
.acct-foot span { margin: 0 10px; color: rgba(255,255,255,0.25); }
/* The field no person sees or reaches: off the page, out of the tab order (see account.js and the backend's AccountRegister). */
.acct-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.acct [hidden] { display: none !important; }

/* ---------- smaller screens ---------- */
@media (max-width: 1100px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 820px) {
  .feat-panel { padding: 20px 16px 22px; }
  .support, .guard-steps, .guard-demo { grid-template-columns: 1fr; }
  .support { gap: 24px; }
  .guard-steps { gap: 30px; }
  /* the steps stand one under the other: the arrow points down, in the gap above each */
  .guard-steps li + li::before { left: 50%; top: -17px; transform: translate(-50%, -50%) rotate(135deg); }
}
@media (max-width: 900px) {
  :root { --top-h: 64px; }
  .top { grid-template-columns: 1fr auto 1fr; padding: 0 16px; gap: 10px; }
  .top-nav { display: none; }
  .top-logo { grid-column: 2; }
  .top-logo img { width: 124px; }
  .burger { display: block; grid-column: 3; }
  .rail { display: none; }
  .features { padding: 44px 0 70px; }
  /* The backdrop begins where the first section does, not inside the clip, and comes in over a short
     stretch. Its soft ends are two strips of the page's black here instead of the mask (the dimness
     moves to the picture), so the moving picture has nothing as tall as the whole zone above it. */
  .features-bg { top: 0; opacity: 1; -webkit-mask-image: none; mask-image: none; }
  .features-bg-pic { opacity: 0.30; }
  .features-bg::before, .features-bg::after { content: ""; position: absolute; z-index: 1; left: 0; right: 0; }
  .features-bg::before { top: 0; height: 140px; background: linear-gradient(to bottom, #000, rgba(0,0,0,0)); }
  .features-bg::after { bottom: 0; height: 180px; background: linear-gradient(to top, #000, rgba(0,0,0,0)); }
  .feat { margin-top: 76px; }
  .sub-title { margin-top: 84px; }
  .range { padding: 80px 0 60px; }
  .range-cards { grid-template-columns: 1fr; gap: 22px; }
  .start-cta { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; max-width: 520px; margin-left: auto; margin-right: auto; }
  .btn { font-size: 15px; line-height: 58px; padding: 0 16px; }
  .carousel { padding: 0 34px; }
  .car-btn { width: 30px; }
  .car-btn svg { width: 18px; height: 30px; }
  .compare .c { width: 84px; }
  .compare td { font-size: 14px; }
}
@media (max-width: 900px) {
  .trust { padding: 50px 0 40px; }
  .trust-cards { grid-template-columns: 1fr; gap: 12px; margin-top: 34px; }
  .team { padding: 70px 0 40px; }
  .team-row { grid-template-columns: 1fr; gap: 20px; margin-top: 34px; }
}
@media (max-width: 760px) {
  .foot { padding-top: 44px; }
  /* the brand on top, the three link columns side by side below it, in smaller type so they fit */
  .foot-grid { grid-template-columns: repeat(3, auto); gap: 30px 12px; }
  .foot-brand { grid-column: 1 / -1; }
  .foot-h { margin-bottom: 10px; font-size: 11px; letter-spacing: 1.8px; }
  .foot-col a { padding: 5px 0; font-size: 13px; }
  .foot-bar { margin-top: 36px; }
}
@media (max-width: 360px) {
  .foot-grid { column-gap: 8px; }
  .foot-h { letter-spacing: 1.2px; }
  .foot-col a { font-size: 12px; }
}
@media (max-width: 600px) {
  .wrap { padding: 0 16px; }
  .acct { padding-bottom: 60px; }
  .acct-card { margin-top: 24px; padding: 18px 16px 18px; }
  /* 16 px in the fields: with less an iPhone zooms the page in when a field is tapped; and a little more height for a finger */
  .acct-card input { height: 44px; font-size: 16px; }
  .acct-show { height: 34px; }
  .acct-card .btn { line-height: 46px; }
  .cards { grid-template-columns: 1fr; }
  .card h4 { min-height: 0; }
  .frame { border-width: 2px; border-radius: 7px; }
  .pic-row { gap: 6px; }
  .post .pic-row .frame { border-width: 1px; border-radius: 5px; }
  .hero-cta .btn { min-width: 0; width: 100%; }
  /* the long quote button may take two lines: keep both buttons one height, icon beside the text */
  .start-cta .btn { display: flex; align-items: center; justify-content: center; min-height: 60px; padding: 8px 16px; line-height: 1.3; }
  .start-cta .btn svg { flex: none; width: 20px; height: 20px; margin-right: 10px; }
  .hero-sub { text-wrap: balance; }   /* no single word left alone on the last line */
  .hero-cta { padding: 0 20px; }
  .ptable td, .ptable th { padding-left: 7px; padding-right: 7px; }
  .ptable td { font-size: 13px; }
  .partner-row { gap: 12px; }
  .partner-row > * { width: 92px; height: 53px; }
}
/* Narrow phones: the plans table could not shrink below the card, so the card stuck out of the
   page (under 400 px) and the page scrolled sideways (under 380 px). */
@media (max-width: 400px) {
  .range-card { padding-left: 10px; padding-right: 10px; }
  .ptable td, .ptable th { padding-left: 5px; padding-right: 5px; }
}
@media (max-width: 374px) {
  .ptable td:first-child { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .hero-down { animation: none; }
  .car-track { transition: none; }
  .gal-track { scroll-behavior: auto; }
}