/* THE PRODUCT PAGES' SHARED LAYER (docs/152, docs/153): the page base, the band grammar and the footer, for the Crosswalk
   page and the features page alike (the owner, 2 November 2026: "Rework features.html on the same grammar"). The brand
   layer (palette, menu, buttons, the navy hero, the footer endorsement) is brand.css; what one page alone needs stays in
   that page. The bands are written by tools/site-bands.mjs. */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: #fff; color: var(--ink-700); font-size: 16px; line-height: 1.6; }
a { color: var(--accent); }
.wrap-top { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
/* No `display` here: an author rule would beat the browser's own [hidden] { display: none } and
   the notice would show in every region. The [hidden] guard below is the belt to that braces. */
.georestrict { margin: 8px 0 0; font-size: 13.5px; color: #7c2d12; background: #fffbeb;
  border: 1px solid #fde68a; border-radius: 9px; padding: 10px 14px; text-align: center; }
.georestrict b { color: #7c2d12; } .georestrict a { color: #7c2d12; font-weight: 600; }
.georestrict[hidden] { display: none; }
.act { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 28px; margin: 40px 0 0; }
.act .btn.primary { min-height: 54px; padding: 0 30px; font-size: 17px; }
.act .plain { font-size: 16px; font-weight: 600; text-underline-offset: 4px; }
.on-navy .act .plain { color: #fff; }
/* The second way in, Lite (the owner, 3 November 2026): outlined beside the example, as tall as it. */
.act .btn:not(.primary) { min-height: 54px; padding: 0 26px; font-size: 17px; }
/* The price near the top (the designer's review): one quiet line, the way to the plans at its end. */
.priceline { margin: 14px 0 0; font-size: 15px; line-height: 1.5; color: var(--ink-500); }
.priceline .plain { margin-left: 6px; font-weight: 600; text-underline-offset: 4px; }
.on-navy .priceline { color: rgb(255 255 255 / .78); }
.on-navy .priceline .plain { color: #fff; }

/* A band: one idea, at most 650 px high at 1280, the page under 7,000 (fix 6, 2 November 2026: "Tighten the vertical
   rhythm"). */
.band { padding: 72px 24px; }
.band.light { background: #fff; }
.band.dark { background: var(--navy); color: rgb(255 255 255 / .82); }
.band-in { max-width: 1040px; margin: 0 auto; text-align: center; }
/* Out of the centred stack (fix 5, 2 November 2026): the text from the left, on the hero's measure, either above the
   documents (wide) or beside the picture, taking sides in turn (split, flip); the dates and the closing band stay
   centred. Beside each other from 900 px; the picture column is 716 px at 1280, the width the close-ups are taken at. */
.band-in.wide, .band-in.split { max-width: 1200px; text-align: left; }
.band-in.wide .say, .band-in.split .say { margin-left: 0; margin-right: 0; }
@media (min-width: 900px) {
  .band-in.split { display: grid; grid-template-columns: 420px minmax(0, 1fr); grid-template-rows: 1fr auto auto auto 1fr; column-gap: 64px; }
  .band-in.split.flip { grid-template-columns: minmax(0, 1fr) 420px; }
  .band-in.split.narrow { grid-template-columns: minmax(0, 1fr) 320px; }
  .split > .eyebrow { grid-area: 2 / 1; }
  .split > h2 { grid-area: 3 / 1; }
  .split > .say { grid-area: 4 / 1; }
  .split > .band-fig { grid-area: 1 / 2 / -1; margin: 0; align-self: center; }
  .split.flip > .eyebrow { grid-area: 2 / 2; }
  .split.flip > h2 { grid-area: 3 / 2; }
  .split.flip > .say { grid-area: 4 / 2; }
  .split.flip > .band-fig { grid-area: 1 / 1 / -1; }
}
.band .eyebrow { margin: 0; color: var(--blue); letter-spacing: .14em; }
.band.dark .eyebrow { color: var(--yellow); }
.band h2 { margin: 12px 0 0; font-size: clamp(30px, 3.6vw, 46px); line-height: 1.12; }
.band.dark h2 { color: #fff; }
.band .say { max-width: 660px; margin: 16px auto 0; font-size: 19px; line-height: 1.55; color: var(--ink-700); }
.band.dark .say { color: rgb(255 255 255 / .78); }
.band-fig { margin: 32px auto 0; }
.band-fig figcaption { margin: 16px 0 0; font-size: 14.5px; color: var(--ink-500); }
.band.dark .band-fig figcaption { color: rgb(255 255 255 / .62); }
.band.dark .band-fig figcaption a { color: #fff; }
/* The software example: a secondary link with the weight of one, on its own line under the documents' caption. */
.also { margin: 26px 0 0; font-size: 18px; font-weight: 700; }
.also a { text-decoration-thickness: 2px; text-underline-offset: 5px; }
.also a::after { content: " \2192" / ""; }

/* A close-up of the app: as large as the app shows it, on the band's contrast. */
.shot { display: block; width: 100%; max-width: 1000px; height: auto; margin: 0 auto; border-radius: 12px; background: #fff;
  box-shadow: 0 0 0 1px var(--line), 0 24px 64px rgb(15 23 42 / .14); }
.band.dark .shot { box-shadow: 0 0 0 1px rgb(255 255 255 / .10), 0 34px 90px rgb(0 0 0 / .5); }

footer { max-width: 1120px; margin: 0 auto; padding-top: 30px; padding-left: 20px; padding-right: 20px; font-size: 12.5px; color: var(--muted); text-align: center; }   /* the bottom room is brand.css's, for the art */
footer a { color: var(--muted); }

@media (max-width: 760px) {
  .band { padding: 64px 18px; }
  .band .say { font-size: 17px; }
  .band-fig { margin-top: 32px; }
}

/* Click to zoom (assets/zoom.js): a close-up at its full resolution. */
.zoomable { cursor: zoom-in; }
/* Its badge (review item 36): in the picture's bottom-right corner on every screen, touch included, placed by zoom.js from
   the picture's box (left and top are the corner, the badge drawn up and left of it). Navy with a light ring, so it reads on
   the white of a screenshot and on a dark band alike. A small picture gets the icon alone, on its corner, so it covers
   little of it. */
.zoom-fig { position: relative; }
.zoom-badge { --at: -100%; --lift: 0px; position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 6px; height: 32px; margin: 0;
  padding: 0 12px 0 10px; transform: translate(var(--at), calc(var(--at) - var(--lift))); border: 1px solid rgb(255 255 255 / .28);
  border-radius: 999px; background: rgb(11 26 58 / .9); color: #fff; font-family: var(--font); font-size: 13px; font-weight: 600; line-height: 1;
  white-space: nowrap; cursor: zoom-in; box-shadow: 0 6px 18px rgb(11 26 58 / .3); -webkit-tap-highlight-color: transparent; }
.zoom-badge svg { flex: none; }
.zoom-badge[hidden] { display: none; }
.zoom-badge.is-compact { --at: -50%; width: 32px; padding: 0; justify-content: center; }
.zoom-badge.is-compact .zoom-badge-t { display: none; }
.zoom-badge:hover { background: var(--navy); }
.zoom-badge:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
/* The lift: a pointer over the picture or its badge, or the badge in focus, raises both a little. */
@media (prefers-reduced-motion: no-preference) {
  .zoom-fig img.zoomable, .zoom-badge { transition: transform .18s ease, filter .18s ease, background-color .18s ease; }
}
@media (hover: hover) {
  .zoom-fig:has(img.zoomable:hover, .zoom-badge:hover) img.zoomable { transform: translateY(-3px); filter: drop-shadow(0 12px 16px rgb(15 23 42 / .16)); }
  .zoom-fig:has(img.zoomable:hover, .zoom-badge:hover) .zoom-badge { --lift: 3px; }
}
.zoom-fig:has(.zoom-badge:focus-visible) img.zoomable { transform: translateY(-3px); }
.zoom-fig:has(.zoom-badge:focus-visible) .zoom-badge { --lift: 3px; }
dialog.zoom { max-width: 96vw; max-height: 94vh; padding: 0; border: 0; border-radius: 10px; background: #fff; overflow: auto;
  box-shadow: 0 30px 90px rgb(0 0 0 / .5); }
dialog.zoom::backdrop { background: rgb(11 26 58 / .82); }
dialog.zoom img { display: block; max-width: none; height: auto; }
dialog.zoom .zoom-cap { margin: 0; padding: 10px 16px 12px; font-size: 14px; color: var(--ink-700); background: #fff; }
dialog.zoom .zoom-close { position: sticky; top: 8px; float: right; margin: 8px 8px -44px 0; z-index: 1; width: 36px; height: 36px;
  border: 0; border-radius: 50%; background: var(--navy); color: #fff; font-size: 22px; line-height: 1; cursor: pointer; }
@media (prefers-reduced-motion: no-preference) {
  dialog.zoom[open] { animation: zoom-in .16s ease-out; }
  @keyframes zoom-in { from { opacity: 0; transform: scale(.98); } }
}

/* In context (review item 37, assets/zoom.js): the whole application screen a close-up was cut from, over the whole window.
   A bar with the place in the page's pictures, the caption, Previous, Next and Close; under it the stage, where the screen
   is moved and zoomed (the script does it, so the browser's own touch gestures are off there) and the close-up outlined in
   the accent with the rest dimmed; at the foot one line on what the outline is and how to zoom. */
html.ctx-open { overflow: hidden; }
dialog.ctx { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0;
  border: 0; background: rgb(6 14 34); color: #fff; overflow: hidden; overscroll-behavior: contain; }
dialog.ctx[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
dialog.ctx::backdrop { background: transparent; }
.ctx-bar { display: flex; align-items: center; gap: 8px; padding: 10px 12px 10px 20px; }
.ctx-say { flex: 1; min-width: 0; margin: 0; font-size: 14.5px; line-height: 1.4; color: rgb(255 255 255 / .86);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ctx-count { margin-right: 12px; font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .06em; color: var(--yellow); }
.ctx-count:empty { display: none; }
.ctx-btn { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 0; padding: 0;
  border: 1px solid rgb(255 255 255 / .24); border-radius: 50%; background: rgb(255 255 255 / .08); color: #fff; font: 400 24px/1 var(--font); cursor: pointer; }
.ctx-btn[hidden] { display: none; }
.ctx-btn:hover { background: rgb(255 255 255 / .18); }
.ctx-btn:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
.ctx-stage { position: relative; overflow: hidden; touch-action: none; cursor: zoom-in; user-select: none; -webkit-user-select: none; }
.ctx-stage.is-zoomed { cursor: grab; }
.ctx-stage.is-zoomed:active { cursor: grabbing; }
.ctx-frame { position: absolute; left: 0; top: 0; transform-origin: 0 0; border-radius: 6px; overflow: hidden; background: #fff;
  box-shadow: 0 30px 90px rgb(0 0 0 / .5); }
.ctx-frame.is-loading { opacity: .55; }
.ctx-full { display: block; width: 100%; height: 100%; pointer-events: none; -webkit-user-drag: none; }
.ctx-cut { position: absolute; left: 0; top: 0; border-radius: 3px; outline: 3px solid var(--yellow); outline-offset: 0; pointer-events: none; }
.ctx-ghost { position: absolute; z-index: 1; border-radius: 12px; pointer-events: none; }
.ctx-hint { margin: 0; padding: 10px 20px 14px; font-size: 13.5px; line-height: 1.45; color: rgb(255 255 255 / .74); text-align: center; }
@media (max-width: 699px) {
  .ctx-bar { padding: 8px 8px 8px 14px; gap: 6px; }
  /* The place in the pictures on its own line, then the caption whole: up to three lines beside the buttons at 320 px. */
  .ctx-say { font-size: 13.5px; -webkit-line-clamp: 4; }
  .ctx-count { display: block; margin: 0 0 2px; }
  .ctx-hint { padding: 8px 14px 12px; font-size: 12.5px; }
}
@media (prefers-reduced-motion: no-preference) {
  dialog.ctx[open] { animation: ctx-in .2s ease-out; }
  @keyframes ctx-in { from { background-color: rgb(6 14 34 / 0); } }
  .ctx-frame { transition: opacity .15s ease; }
}

/* Mid-page, the call to action again (after How it works; on the features page after the disclosure policy). */
.midcta { margin: 0; padding: 26px 24px; background: var(--navy); }
.midcta .act { margin: 0; }

/* Under 900 px, a bar at the bottom once the hero has gone (assets/sticky.js). */
.stickycta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 10px 52px 10px 16px; background: var(--navy); box-shadow: 0 -8px 24px rgb(0 0 0 / .25); }
.stickycta[hidden] { display: none; }
.stickycta .act { margin: 0; gap: 10px 20px; }
.stickycta .act .btn.primary { min-height: 44px; padding: 0 20px; font-size: 16px; white-space: nowrap; }
/* "Claim your free Lite licence" (review item 45) on one line from a 320 px screen up; "See plans" goes under it there. */
@media (max-width: 359px) { .stickycta .act .btn.primary { padding: 0 14px; font-size: 15px; } }
.stickycta .act .plain { color: #fff; }
.stickycta-close { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border: 0; border-radius: 50%;
  background: transparent; color: #fff; font-size: 22px; cursor: pointer; }
@media (min-width: 900px) { .stickycta { display: none !important; } }

/* A screenshot and its phone take (site-bands.mjs picture()): the <picture> adds no box of its own. */
picture { display: contents; }
/* A phone take at its own size, never stretched past it (docs/158): narrower than the column only when it is small. */
@media (max-width: 699px) { .shot { width: auto; max-width: 100%; } }

/* Steps under one heading, shared by the Crosswalk page and the features page (docs/157, docs/159): on a desktop a tablist,
   the headings left and the chosen step's close-up right (assets/steps.js); on a phone and without script each step with its
   close-up under the other. Up to six steps; dark and light grounds. */
.steps { margin: 32px 0 0; }
.step + .step { margin-top: 36px; }
.step-head { margin: 0; font: inherit; }
.step-head .step-btn { all: unset; box-sizing: border-box; display: block; width: 100%; padding: 14px 18px; border-left: 3px solid transparent; border-radius: 8px; }
.steps.js .step-btn { cursor: pointer; }
.step-head .eyebrow { display: block; margin: 0 0 4px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--blue); }
.step-title { display: block; font-family: var(--font-serif); font-size: 24px; font-weight: 700; line-height: 1.2; color: var(--ink); }
.step-say { display: block; margin-top: 6px; font-size: 16px; line-height: 1.5; color: var(--ink-700); }
.band.dark .step-head .eyebrow { color: var(--yellow); }
.band.dark .step-title { color: #fff; }
.band.dark .step-say { color: rgb(255 255 255 / .74); }
.steps .band-fig { margin: 18px 0 0; }
.steps.js .step-btn:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.band.dark .steps.js .step-btn:focus-visible { outline-color: var(--yellow); }
@media (min-width: 900px) {
  .steps.js { display: grid; grid-template-columns: 420px minmax(0, 1fr); column-gap: 64px; align-items: start; }
  .steps.js .step { display: contents; }
  .steps.js .step + .step { margin: 0; }
  .steps.js .step:nth-child(1) .step-head { grid-row: 1; } .steps.js .step:nth-child(2) .step-head { grid-row: 2; }
  .steps.js .step:nth-child(3) .step-head { grid-row: 3; } .steps.js .step:nth-child(4) .step-head { grid-row: 4; }
  .steps.js .step:nth-child(5) .step-head { grid-row: 5; } .steps.js .step:nth-child(6) .step-head { grid-row: 6; }
  .steps.js .step-head { grid-column: 1; margin-bottom: 6px; }
  .steps.js .band-fig { grid-column: 2; grid-row: 1 / span 6; margin: 0; display: none; }
  .steps.js .step.is-on .band-fig { display: block; }
  .steps.js .step-head .step-btn:hover { background: rgb(11 26 58 / .04); }
  .steps.js .step.is-on .step-head .step-btn { border-left-color: var(--blue); background: rgb(11 26 58 / .05); }
  .band.dark .steps.js .step-head .step-btn:hover { background: rgb(255 255 255 / .05); }
  .band.dark .steps.js .step.is-on .step-head .step-btn { border-left-color: var(--yellow); background: rgb(255 255 255 / .08); }
  .steps.js .step:not(.is-on) .step-say { display: none; }
}
@media (max-width: 899px) { .step-head .step-btn { padding: 0; } }
.steps-band .act { margin-top: 40px; }