/* Antitheft page (draft): only what is specific to this page. Tokens,
   glass, buttons, chips, rows, the window and the layout primitives are in
   system.css. */

/* ---- hero: full width, copy and install left, example traffic right ---- */

.hero {
  position: relative;
  min-height: calc(100dvh - var(--nav-h));
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  align-items: center;
  gap: clamp(32px, 4vw, 88px);
  padding-block: clamp(40px, 6vw, 96px);
}

.hero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(20px, 2.4vw, 32px);
}
.hero .h-hero { font-size: clamp(32px, 3.2vw, 72px); max-width: 24ch; }
/* --ui (next.js): how much a big screen scales the UI past its 1920 x 960 design, 1 on anything smaller. The app window and the alert follow it
   (the stage's width below), and so does every block of copy next to them, as one: text, chips, tags, buttons, the install box. */
.hero-copy, .own-copy, .price-head, .price-pitch, .pers-close { zoom: var(--ui, 1); }
.hero .lede { max-width: 50ch; }

/* Hero copy arrives in reading order. */
.hero-copy > * { animation: rise 0.9s var(--ease) backwards; }
.hero-copy > :nth-child(2) { animation-delay: 0.08s; }
.hero-copy > :nth-child(3) { animation-delay: 0.16s; }
.hero-copy > :nth-child(4) { animation-delay: 0.24s; }
.hero-block { animation: rise 1s var(--ease) 0.2s backwards; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }

.install {
  scroll-margin-top: calc(var(--nav-h) + 24px);
  width: min(640px, 100%);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.install .codebox { width: 100%; }.install .seg { flex-wrap: wrap; }

.hero-src {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: var(--muted);
  transition: color 0.15s ease;
}
.hero-src svg { width: 14px; height: 14px; transition: transform 0.25s var(--ease); }
.hero-src:hover { color: var(--accent-2); }
.hero-src:hover svg { transform: translate(2px, -2px); }
.hero-src[href^="#"]:hover svg { transform: translateY(2px); }   /* paid mode: a link down to the price, its arrow points down */

/* ---- the stage: the app's own window and alert, as live markup -----------
   Both are the real components ported to the page (app-ui.css), at the app's
   own pixel sizes and scaled as a whole: --zw for the window, --zp for the
   alert (next.js sets them from the stage width). No box around it: the
   window and the alert float on the page. -------------------------------- */

.stage { justify-self: end; width: 100%; max-width: min(calc(900px * var(--ui, 1)), calc((100dvh - var(--nav-h) - 80px) * 1.16)); display: flex; flex-direction: column; gap: clamp(16px, 1.6vw, 26px); }

.stage-art { position: relative; aspect-ratio: 1000 / 860; }
/* scaled with a transform, not zoom: on a phone the alert is drawn at ~0.7 and iOS Safari rounds every zoomed font under 9px up to 9, which crowded its text.
   Its box is not part of any layout (the pops are out of flow), so the unscaled height it keeps is harmless. */
.stage .notif-card { transform: scale(var(--zp, 1)); transform-origin: 0 0; }
/* the "Touched" line carries the mark of the app that owns the file */
.notif-fact-touched { display: flex; align-items: center; gap: 8px; }
.notif-touched-app { flex-shrink: 0; display: grid; }
/* bare mark, no tile: just the padding around it */
.notif-touched-app .sup-logo { width: 22px; height: 22px; padding: 3px; border-radius: 0; background: none; box-shadow: none; }
/* where the app window starts: empty here, it is the next section's window, moved in by next.js */
.stage-slot { position: absolute; left: 0; bottom: 0; width: 90%; pointer-events: none; }
/* the one app window: it lives in the next section and travels up to the hero slot (next.js) */
.own-win { position: relative; z-index: 2; border-radius: var(--r-win); box-shadow: 0 40px 80px -28px rgba(0, 0, 0, 0.55); }
/* while it travels it is out of flow; its section keeps the room (next.js sets the height) */
.own-stage.is-travel { position: relative; }
.own-win.is-travel { position: absolute; top: 0; right: 0; transform-origin: 0 0; }

/* a short viewport: next.js caps the window's height (never its width) and the rows that do not fit are cropped under a fade at the foot */
.aw { max-height: var(--aw-cap, none); }
/* the screens that are not showing are display: none (next.js), so the window's height is pinned here, to its tallest screen's */
.aw-screens { min-height: var(--aw-screens-h, 0px); }
.aw.is-capped::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 56px; background: linear-gradient(180deg, transparent, var(--canvas)); pointer-events: none; z-index: 5; }

/* accessories: an engraving (one ink colour through a mask, its tones kept as alpha, as the watchman emblem) leaning on a corner of the window.
   Sized in the window's own width so it scales with the window as it travels; hidden until next.js brings it in with its screen. */
.acc {
  display: none;   /* not rendered at all until next.js adds .is-on, while its screen is showing */
  position: absolute;
  z-index: 3;
  background: var(--ink);
  -webkit-mask: var(--acc) center / contain no-repeat;
  mask: var(--acc) center / contain no-repeat;
  opacity: 0;
  pointer-events: none;
  transform-origin: 50% 80%;
}
.acc--anchor {
  /* the glass anchor: a coloured picture cut out of its backdrop (img/app/anchor-glass.png, tightly cropped), the same in both themes */
  background: url(img/app/anchor-glass.png) center / contain no-repeat;
  -webkit-mask: none; mask: none;
  /* no drop-shadow: the glass is see-through, so a shadow under it shows THROUGH it and turns the whole anchor dark */
  aspect-ratio: 560 / 744;
  width: 25%;
  z-index: -1;   /* behind the window (it is a sibling of .aw inside the window's stacking context): it only shows where the window is not */
  left: -21.5%;  /* its right hook's tip (the picture's right edge) ends up just under the window's left edge, the rest of it is in the open */
  bottom: 4%;
  rotate: -9deg;
}
/* remote control (screen 4): a glass CTRL key (img/app/ctrl-glass.png, cropped tight) resting on the window's bottom left corner, in front of it */
.acc--ctrl {
  background: url(img/app/ctrl-glass.png) center / contain no-repeat;
  -webkit-mask: none; mask: none;
  aspect-ratio: 560 / 508;
  width: 21%;
  left: -18%;    /* out in the open beside the window, only its right edge touches the window's corner: in front of the rows it covered them */
  bottom: -6%;
  rotate: -7deg;
}
/* developer secrets (screen 5): a glass bunch of keys (img/app/keys-glass.png, cropped tight, the glow around it removed), out in the open beside the
   window's lower left corner, only its right edge touching the window */
.acc--keys {
  background: url(img/app/keys-glass.png) center / contain no-repeat;
  -webkit-mask: none; mask: none;
  aspect-ratio: 560 / 714;
  width: 24%;
  left: -21%;
  bottom: -4%;
  rotate: 8deg;
}
/* supply chain (screen 6): a glass npm cube wrapped in a chain (img/app/npm-cube-glass.png, cropped tight), beside the window's lower left corner */
.acc--cube {
  background: url(img/app/npm-cube-glass.png) center / contain no-repeat;
  -webkit-mask: none; mask: none;
  aspect-ratio: 560 / 563;
  width: 25%;
  left: -22%;
  bottom: -4%;
  rotate: -6deg;
}
/* EXPERIMENT: the glass objects in monochrome. The pictures stay as they are (their see-through alpha and their lights and darks), only the colour goes.
   Delete this one rule to bring the colour back. */
.acc--anchor, .acc--ctrl, .acc--keys, .acc--cube { filter: grayscale(1) contrast(1.08); }
.acc.is-on { display: block; }
@media (max-width: 900px) { .acc, .acc.is-on { display: none; } }

/* the alert is for looking at: clicks go through to the vault rows under it */
.stage-pops { position: absolute; z-index: 3; right: 0; top: 0; width: 52%; pointer-events: none; }
.pop {
  position: absolute;
  inset: 0 0 auto 0;
  opacity: 0;
  transform: translateY(16px) scale(0.97);
  transition: opacity 0.35s ease, transform 0.35s ease;
  pointer-events: none;
}
.stage .notif-card { box-shadow: inset 0 1px 0 var(--glass-hi), 0 34px 60px -22px rgba(0, 0, 0, 0.6), 0 12px 24px -12px rgba(0, 0, 0, 0.35); }
/* only the alert's buttons take the pointer, so they glass up on hover while the rows under the rest of it stay clickable */
.pop.is-on .ui-btn { pointer-events: auto; cursor: pointer; }
.pop.is-on {
  position: relative;
  opacity: 1;
  transform: none;
  transition: opacity 0.5s ease, transform 0.75s var(--ease);
}

/* ---- the wallets section: selector above the window, support list with logos ---- */

.s3-left { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.wtabs { display: flex; flex-wrap: wrap; gap: 8px; }
.wtab {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 40px;
  padding: 0 14px 0 7px;
  border: 1px solid var(--line);
  border-radius: var(--r-ctl);
  background: var(--btn-fill);
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  transition: color 0.15s ease, border-color 0.2s ease, background-color 0.2s ease;
}
.wtab:hover { color: var(--ink); border-color: var(--accent-2); }
.wtab[aria-selected="true"] { color: var(--ink); border-color: color-mix(in srgb, var(--accent) 55%, transparent); background: color-mix(in srgb, var(--accent) 11%, transparent); }
.wtab:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }

.wtab[data-danger]::after { content: ""; width: 7px; height: 7px; margin-left: 2px; border-radius: 50%; background: var(--critical); box-shadow: 0 0 9px color-mix(in srgb, var(--critical) 70%, transparent); animation: notif-blink 1.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .wtab[data-danger]::after { animation: none; } }

/* real logos sit on a small white tile so dark marks read in both themes */
.sup-logo { width: 24px; height: 24px; padding: 3px; border-radius: 7px; background: #fff; box-shadow: inset 0 0 0 1px rgba(16, 24, 44, 0.1); object-fit: contain; flex-shrink: 0; }
.sup-logo--bare { padding: 0; background: none; box-shadow: none; border-radius: 22%; }

.supports { display: flex; flex-direction: column; gap: 18px; }
.sup-group h3 { margin: 0 0 9px; font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.sup-list { display: flex; flex-wrap: wrap; gap: 8px; }
.sup {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;   /* not a fixed height: "Kraken, Bybit, Uniswap and every other site you sign in to" wraps on a phone and has to grow */
  padding: 3px 12px 3px 6px;
  line-height: 1.35;
  border: 1px solid var(--line);
  border-radius: var(--r-ctl);
  background: var(--btn-fill);
  font-size: 13.5px;
  font-weight: 500;
}
.sup--more { padding-left: 12px; border-style: dashed; background: none; font-weight: 400; color: var(--muted); }

/* banks and exchanges: logos only, so the list stays one short group */
.sup-note { margin: -3px 0 10px; font-size: 13.5px; color: var(--muted); }
.sup-list--tiles { align-items: center; }
.sup-tile { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px rgba(16, 24, 44, 0.1); }
.sup-tile img { width: 26px; height: 26px; object-fit: contain; }
.sup-sep { width: 1px; height: 26px; margin: 0 2px; background: var(--line); }
/* on short screens the column tightens so the whole section still fits */
@media (max-height: 820px) and (min-width: 981px) {
  .supports { gap: 13px; }
  .sup { height: 32px; font-size: 13px; }
  .sup-group h3 { margin-bottom: 7px; }
  .own--flip .own-copy { gap: 16px; }
}

/* ---- own: "only the app that owns it can read it" --------------------- */

.own {
  display: grid;
  grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.45fr);   /* the window's column is wider below the hero (next.js holds the later docks to its width) */
  align-items: start;
  gap: clamp(32px, 5vw, 96px);
}
.own-copy {
  position: sticky;
  top: 86px;   /* from the top of the viewport (the bar used to be there too: 46px + 40px); the bar no longer follows the page */
  display: flex;
  flex-direction: column;
  gap: 20px;
}
/* the mirrored section: the window on the left, the copy on the right */
.own--flip { grid-template-columns: var(--s3w, 716px) minmax(0, 1fr); }
.own--flip .s3-left { order: -1; width: var(--s3w, 716px); max-width: 100%; }
#stage3 .own-win.is-travel { left: 0; right: auto; }
.own--flip .own-copy .h-sec { font-size: clamp(30px, 3vw, 52px); max-width: 22ch; }
/* the first section's window box: no wider than the docks' (next.js sets --home-max), at the column's right edge where the window sits */
#own .own-stage { max-width: var(--home-max, none); justify-self: end; width: 100%; }
.own-copy .h-sec { max-width: 16ch; }
.own-copy .lede { max-width: 46ch; }
.own-cap { color: var(--ink); }
.own-stage { min-width: 0; position: relative; }

/* The example plays once when it scrolls into view (next.js adds
   .is-playing): each attempt lands in turn, a refusal flashes. Motion here
   says what the product does: check every read, refuse the wrong ones. */
/* ---- pricing: a full-width band in its own surface, two wide tiers, perks as tiles ---- */

/* the page's own scrollbar: the native one is hidden (it took layout width), a fixed pill floats over the page instead */
html { scrollbar-width: none; }
html::-webkit-scrollbar { display: none; }
.sbar { position: fixed; z-index: 60; top: 0; right: 0; bottom: 0; width: 14px; pointer-events: none; opacity: 0; transition: opacity 0.3s ease; }
.sbar.is-on, .sbar.is-drag, .sbar:hover { opacity: 1; }
.sbar-thumb {
  position: absolute;
  right: 3px;
  width: 6px;
  min-height: 36px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 34%, transparent);
  pointer-events: auto;
  cursor: grab;
  transition: width 0.15s ease, background-color 0.15s ease;
}
.sbar-thumb:hover, .sbar.is-drag .sbar-thumb { width: 9px; background: color-mix(in srgb, var(--accent-2) 75%, transparent); }
.sbar.is-drag .sbar-thumb { cursor: grabbing; }
@media (hover: none) { .sbar { display: none; } }

/* the bar: fixed to the top, and out of the flow so it never pushes content (main keeps the 46px the layout was built around).
   At the very top it is expanded, taller with a big wordmark; next.js adds .is-scrolled once the page moves and it settles to the
   normal 46px bar and the normal wordmark. */
:root { --bar-h: 76px; }
/* it floats: inset by the page gutter and 12px from the top, rounded, in liquid glass (system.css .glass.lg + liquid-glass.js) */
.nav { position: fixed; top: 12px; left: var(--gutter); right: var(--gutter); height: var(--bar-h); padding-inline: 22px 10px; border-radius: 18px; transition: height 0.25s var(--ease); }
/* buttons on the glass: no outline, a tint on hover, the current section filled, install a solid accent capsule */
.nav .pill { height: 32px; min-width: 32px; padding: 0 13px 0 11px; border: 0; border-radius: 999px; background: transparent; }
.nav .pill:hover { background: var(--hover-tint); }
.nav .pill--accent { color: #fff; background: var(--accent); }
.nav .pill--accent .ui-pic { color: #fff; }
.nav .pill--accent:hover { background: var(--accent); filter: brightness(1.1); }
.nav.is-scrolled { height: var(--nav-h); }/* the section links: the one you are in is marked (next.js sets .is-here); on a medium screen they fold to their icons (the title shows the name) */
/* the theme switch: fixed to the bottom right, frosted glass (the page under it is blurred), sun | moon with a thumb that slides to the one in use */
.theme-fab {
  position: fixed; z-index: 45; right: 26px; bottom: 22px;
  display: grid; grid-template-columns: 1fr 1fr; align-items: center; justify-items: center;
  width: 72px; height: 38px; padding: 3px;
  border-radius: 999px;
  border: 1px solid light-dark(rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.18));
  background: linear-gradient(180deg, light-dark(rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.16)), light-dark(rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0.06)));
  -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%);
  box-shadow: inset 0 1px 0 light-dark(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.2)), 0 14px 30px -14px light-dark(rgba(24, 40, 84, 0.45), rgba(0, 0, 0, 0.7));
  color: var(--muted);
  cursor: pointer;
}
.theme-fab::before {   /* the thumb: under the sun by default (light), slid under the moon in dark */
  content: ""; position: absolute; top: 3px; left: 3px; width: 32px; height: 30px; border-radius: 999px;
  background: light-dark(rgba(16, 24, 44, 0.08), rgba(255, 255, 255, 0.12));
  transition: transform 0.3s var(--ease);
}
.theme-fab .ui-pic { position: relative; font-size: 17px; transition: color 0.2s ease; }
.theme-fab:hover { color: var(--ink); }
.theme-fab:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 3px; }
/* which one is in use: dark by default for the page, light when the OS asks for it, and the pinned choice beats both */
.theme-fab::before { transform: translateX(32px); }
.theme-fab .fab-moon { color: var(--ink); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .theme-fab::before { transform: none; }
  :root:not([data-theme="dark"]) .theme-fab .fab-sun { color: var(--ink); }
  :root:not([data-theme="dark"]) .theme-fab .fab-moon { color: inherit; }
}
:root[data-theme="light"] .theme-fab::before { transform: none; }
:root[data-theme="light"] .theme-fab .fab-sun { color: var(--ink); }
:root[data-theme="light"] .theme-fab .fab-moon { color: inherit; }
:root[data-theme="dark"] .theme-fab::before { transform: translateX(32px); }
:root[data-theme="dark"] .theme-fab .fab-moon { color: var(--ink); }
:root[data-theme="dark"] .theme-fab .fab-sun { color: inherit; }
@media (hover: none) { .theme-fab { right: 14px; bottom: 14px; } }
.nav-sep { align-self: center; width: 1px; height: 18px; margin-inline: 10px; background: var(--line); }   /* the line that sets the account apart from the page's links */
.nav-links .pill > span { text-transform: lowercase; }   /* the bar is all lowercase, like the wordmark */
.pill.is-here { color: var(--ink); background: light-dark(rgba(16, 24, 44, 0.08), rgba(255, 255, 255, 0.12)); }
@media (max-width: 1500px) { .nav-links .pill:not(.pill--accent) > span { display: none; } .nav-links .pill:not(.pill--accent) { padding: 0; } }
@media (max-width: 720px) { .pill--sec { display: none; } }   /* a phone's bar keeps only theme, sign in and install */
main { padding-top: var(--nav-h); }
.wordmark { gap: 10px; transition: gap 0.25s var(--ease); }
.wordmark-name { font-size: 28px; letter-spacing: -0.02em; color: inherit; text-decoration: none; transition: font-size 0.25s var(--ease); }   /* a link to the top of the page */
.wordmark-by { font-size: 13px; transition: font-size 0.25s var(--ease); }
.nav.is-scrolled .wordmark { gap: 6px; }
.nav.is-scrolled .wordmark-name { font-size: 15px; letter-spacing: -0.01em; }
.nav.is-scrolled .wordmark-by { font-size: 11px; }
/* touch: the bar does not animate its height and type size over its blurred backdrop (a layout animation under a backdrop blur steps on iOS Safari); it just settles */
@media (hover: none) { .nav, .wordmark, .wordmark-name, .wordmark-by { transition: none; } }
@media (max-width: 560px) {
  :root { --bar-h: 62px; } .wordmark-name { font-size: 23px; } .wordmark-by { font-size: 12px; } .nav { padding-inline: 16px 8px; border-radius: 16px; }
  /* the wordmark never wraps against the buttons: at the top of the page (the tall bar) "by kinnector" sits under the name, once the page has moved it is one line */
  .wordmark-by { white-space: nowrap; }
  .nav:not(.is-scrolled) .wordmark { flex-direction: column; align-items: flex-start; gap: 0; }
  .nav:not(.is-scrolled) .wordmark-name { line-height: 1.05; }
  .nav:not(.is-scrolled) .wordmark-by { line-height: 1.2; }
  .nav-sep { margin-inline: 4px; }
}

main { overflow-x: clip; }   /* lets the band run past the page gutters without a sideways scrollbar */
.price {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 1.8vw, 26px);
  scroll-margin-top: var(--nav-h);
}
.price::before, .price::after { content: ""; position: absolute; top: 0; bottom: 0; }

/* ---- the band has two looks, switched in the footer (html[data-art]): watchman (default) and clouds ---- */

/* clouds: the painting in its own colours (::after) under a dark fade (::before) that is solid behind the words and
   clear on the right. The painting is `cover` on a box 130vw wide, shifted so the sun sits at 70vw: `cover` fills the
   band to the bottom at any width or height, and a horizontal position equal to the sun's own fraction of the painting
   (46.5%) keeps the sun at the same place on the box at any scale. A dark banner in both themes, so it takes the dark palette. */
html:not([data-art="watchman"]) .price { padding-block: clamp(40px, 5vw, 80px); color-scheme: dark; color: var(--ink); }
html:not([data-art="watchman"]) .price::before {
  z-index: -1;
  left: 50%; width: 100vw; transform: translateX(-50%);
  border-block: 1px solid var(--line);
  background:
    linear-gradient(90deg, rgba(4, 9, 22, 0.88) 0%, rgba(4, 9, 22, 0.88) 34%, rgba(4, 9, 22, 0.5) 52%, rgba(4, 9, 22, 0.1) 66%, transparent 78%),
    linear-gradient(180deg, rgba(4, 9, 22, 0.3), rgba(4, 9, 22, 0.08) 38%, rgba(4, 9, 22, 0.4));
}
/* starts at the screen's left edge and runs 150vw, past the right edge: the painting reaches both ends, and its sun (46.5% in)
   lands at 70vw */
html:not([data-art="watchman"]) .price::after {
  z-index: -2;
  left: calc(50% - 50vw); width: 150vw;
  background: #244a82 url(img/app/clouds.jpg) 46.5% 40% / cover no-repeat;
}
/* a narrow screen stacks the plans and has no room beside them: the whole painting under an even, darker fade */
@media (max-width: 900px) {
  html:not([data-art="watchman"]) .price::before { background: linear-gradient(180deg, rgba(4, 9, 22, 0.74), rgba(4, 9, 22, 0.66)); }
  html:not([data-art="watchman"]) .price::after { left: calc(50% - 50vw); width: 100vw; background-position: 70% 50%; }
}
html:not([data-art="watchman"]) .price-emblem { display: none; }
html:not([data-art="watchman"]) .price-head .h-sec { text-shadow: 0 2px 24px rgba(4, 9, 22, 0.7); }
html:not([data-art="watchman"]) .price-sub { text-shadow: 0 1px 14px rgba(4, 9, 22, 0.8); }
html:not([data-art="watchman"]) .price-head .em { color: #9dbaf5; }

/* watchman: the band's own surface, a step off the page colour, lit from two corners by the accent, with hairline
   edges, and the painted figure (full opacity) with his plate */
html[data-art="watchman"] .price { padding-block: clamp(32px, 3.6vw, 52px); }
html[data-art="watchman"] .price::before {
  z-index: -1;
  inset: 0 -100vmax;
  border-block: 1px solid var(--line);
  background:
    radial-gradient(900px 420px at 8% -12%, light-dark(rgba(42, 99, 207, 0.16), rgba(58, 110, 220, 0.22)), transparent 70%),
    radial-gradient(800px 420px at 96% 112%, light-dark(rgba(42, 99, 207, 0.10), rgba(58, 110, 220, 0.14)), transparent 70%),
    light-dark(#e2e9f6, #111522);
}
html[data-art="watchman"] .price::after { content: none; }
@media (prefers-color-scheme: light) { html[data-art="watchman"]:not([data-theme="dark"]) .price-emblem { --emb: url(img/app/emblem-light.png); } }
html[data-art="watchman"][data-theme="light"] .price-emblem { --emb: url(img/app/emblem-light.png); }

.price-head { display: flex; flex-direction: column; gap: 14px; }
/* the statement, big, and the two-layer line under it */
.price-head { gap: clamp(10px, 1.2vw, 18px); }
.price-head .price-big { font-size: clamp(38px, 4.8vw, 88px); line-height: 1.02; letter-spacing: -0.04em; max-width: 21ch; text-wrap: balance; }
.price-big .nb { white-space: nowrap; }   /* the hyphenated words never break at their hyphens */
.price-sub { margin: 0; font-family: var(--font-display); font-size: clamp(19px, 1.9vw, 32px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; max-width: 30ch; text-wrap: balance; }

.own-btn { align-self: flex-start; margin-top: 6px; }

/* the emblem: the painted figure, mirrored so it looks in at the plans, one ink colour through a mask, tone kept as alpha */
.price-emblem {
  --emb: url(img/app/emblem-dark.png);
  position: absolute;
  z-index: -1;
  left: 0;        /* at the start of the band, as the cat is at the start of its own; mirrored so he looks in at the words */
  bottom: 0;
  width: var(--emb-w, 300px);   /* sized by width so the words can be given exactly that much room; never taller than the band */
  max-height: 100%;
  aspect-ratio: 1006 / 1438;
  transform: scaleX(-1);
  background: var(--ink);
  -webkit-mask: var(--emb) right bottom / contain no-repeat;
  mask: var(--emb) right bottom / contain no-repeat;
  pointer-events: none;
}
/* the words make room for him: the same width as his, plus a little air */
.price { --emb-w: clamp(200px, 22vw, 340px); }
@media (min-width: 981px) { html[data-art="watchman"] .price-head, html[data-art="watchman"] .price-pitch { padding-left: calc(var(--emb-w) + 24px - var(--gutter)); } }   /* he stands at the page's edge, the words at the gutter: take the gutter off */
@media (max-width: 980px) { .price-emblem { opacity: 0.18; } }

/* the pitch under the statement: what is open, what is covered, and the install button */
.price-pitch { display: flex; flex-wrap: wrap; align-items: flex-end; gap: clamp(24px, 4vw, 64px); margin-top: clamp(8px, 1.4vw, 20px); }
.pitch-col { display: flex; flex-direction: column; gap: 8px; max-width: 30ch; }
.pitch-col p { margin: 0; font-size: 16px; line-height: 1.5; }
.pitch-k { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.pitch-link { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 600; color: light-dark(var(--accent-2), #9dbaf5); text-decoration: none; }
.pitch-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.pitch-link .ui-pic { font-size: 14px; }
html:not([data-art="watchman"]) .pitch-link { color: #9dbaf5; text-shadow: 0 1px 14px rgba(4, 9, 22, 0.8); }
/* install now: still text, but the one that stands apart: larger, in the ink colour not the link blue, a heavy accent underline and an arrow in a ring */
.pitch-link--install, html:not([data-art="watchman"]) .pitch-link--install { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); padding-bottom: 4px; border-bottom: 3px solid var(--accent-2); }
.pitch-link--install:hover { text-decoration: none; border-bottom-color: var(--accent); }
.pitch-link--install .ui-pic { font-size: 16px; color: var(--accent-2); transition: transform 0.2s var(--ease); }
.pitch-link--install:hover .ui-pic { transform: translateX(3px); }
/* the price (paid mode) stacked over Install now: plain type on the band, like the pitch beside it */
.pitch-buy { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.pitch-buy .pitch-link--install { margin-top: 8px; }
.pitch-price { font-family: var(--font-display); font-size: 17px; font-weight: 600; color: var(--muted); }
.pitch-price b { font-size: 28px; font-weight: 700; letter-spacing: -0.03em; color: var(--ink); margin-right: 4px; }
html:not([data-art="watchman"]) .pitch-price { color: rgba(255, 255, 255, 0.7); text-shadow: 0 1px 14px rgba(4, 9, 22, 0.8); }
html:not([data-art="watchman"]) .pitch-col p, html:not([data-art="watchman"]) .pitch-k { text-shadow: 0 1px 14px rgba(4, 9, 22, 0.8); }
html:not([data-art="watchman"]) .pitch-k { color: rgba(255, 255, 255, 0.7); }
/* the tax line under the price: quiet, sentence case (legal review 2026-10-20: EU/UK/AU consumers must see a price with tax) */
.pitch-fine { max-width: 30ch; font-size: 12px; line-height: 1.4; color: var(--muted); }
html:not([data-art="watchman"]) .pitch-fine { color: rgba(255, 255, 255, 0.7); text-shadow: 0 1px 14px rgba(4, 9, 22, 0.8); }

/* paid mode only (the markup is a mode:paid block): the price, the app once and then the cloud, as plain type on the band like
   the pitch under it (no cards), a hairline between the two, and the fine print at the foot */
.price-plans, .price-fine { zoom: var(--ui, 1); }
@media (min-width: 981px) { html[data-art="watchman"] .price-plans, html[data-art="watchman"] .price-fine { padding-left: calc(var(--emb-w) + 24px - var(--gutter)); } }
.price-plans { display: flex; flex-wrap: wrap; gap: clamp(20px, 3vw, 48px); margin-top: clamp(4px, 0.8vw, 12px); }
.pplan { display: flex; flex-direction: column; gap: 8px; max-width: 34ch; }
.pplan + .pplan { padding-left: clamp(20px, 3vw, 48px); border-left: 1px solid var(--line); }
.pplan p { margin: 0; font-size: 16px; line-height: 1.5; }
.pplan-price { display: flex; align-items: baseline; gap: 10px; font-family: var(--font-display); }
.pplan-price b { font-size: clamp(44px, 4vw, 68px); font-weight: 700; letter-spacing: -0.04em; line-height: 1; }
.pplan-price span { font-size: 17px; font-weight: 600; color: var(--muted); }
.pplan-gift { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.pplan-gift .ui-pic { font-size: 16px; color: var(--accent-2); flex-shrink: 0; }
.price-fine { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--muted); max-width: 72ch; }
html:not([data-art="watchman"]) .pplan p, html:not([data-art="watchman"]) .pplan-price, html:not([data-art="watchman"]) .price-fine { text-shadow: 0 1px 14px rgba(4, 9, 22, 0.8); }
html:not([data-art="watchman"]) .pplan-price span, html:not([data-art="watchman"]) .price-fine { color: rgba(255, 255, 255, 0.7); }
html:not([data-art="watchman"]) .pplan-gift .ui-pic { color: #9dbaf5; }
@media (max-width: 640px) { .price-plans { flex-direction: column; } .pplan + .pplan { padding-left: 0; border-left: 0; padding-top: 20px; border-top: 1px solid var(--line); } }

/* glass buttons, as the app's: a translucent fill, a light rim, a blur, the accent version tinted blue */
.btn--glass {
  height: auto;
  padding: 10px 18px;
  border-radius: 12px;
  border: 1px solid light-dark(rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.18));
  background: linear-gradient(180deg, light-dark(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.12)), light-dark(rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.04)));
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  backdrop-filter: blur(20px) saturate(150%);
  box-shadow: inset 0 1px 0 light-dark(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.2)), 0 12px 26px -14px light-dark(rgba(24, 40, 84, 0.45), rgba(0, 0, 0, 0.7));
  color: var(--ink);
}
.btn--glass:hover { filter: brightness(1.06); }
.btn--glass-accent {
  border-color: color-mix(in srgb, var(--accent) 55%, light-dark(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.2)));
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 30%, light-dark(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.05))), color-mix(in srgb, var(--accent) 18%, light-dark(rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.02))));
  box-shadow: inset 0 1px 0 light-dark(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.2)), 0 12px 26px -14px light-dark(color-mix(in srgb, var(--accent) 60%, transparent), rgba(0, 0, 0, 0.7));
  color: light-dark(var(--accent-2), #fff);
}
@media (max-width: 760px) { .price-head { grid-template-columns: minmax(0, 1fr); } }

/* ---- persistence: the real location corpus drifts past as a band, then one plain table says who is stopped where ---- */
.pers { display: flex; flex-direction: column; gap: clamp(28px, 3.4vw, 52px); padding-block: clamp(40px, 5vw, 76px); scroll-margin-top: var(--nav-h); }
.pm { position: relative; margin-inline: calc(var(--gutter) * -1); display: flex; flex-direction: column; gap: 10px; overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.pm-row { display: flex; overflow: hidden; }
.pm-track { display: flex; flex: none; gap: 10px; padding-right: 10px; animation: pm-drift 140s linear infinite; }
.pm-row--rev .pm-track { animation-direction: reverse; animation-duration: 170s; }
.pm-track span { flex: none; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); font-family: var(--font-mono); font-size: 12px; color: var(--muted); white-space: nowrap; }
@keyframes pm-drift { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .pm-track { animation: none; } }

.pers-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; }
.pers-head .h-sec { max-width: 20ch; text-wrap: balance; }
.pers-head .lede { text-wrap: balance; }
.pers-head .lede { max-width: 52ch; }

.pers .pm { align-self: stretch; }   /* the drifting band stays full width in the centred column */
/* the local-vs-cloud section after the UI sections is its own band: full width, on the canvas tinted with the accent (the tokens, both themes),
   so the page changes colour where the window's journey ends */
.pers { position: relative; isolation: isolate; }
.pers::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0; bottom: 0;
  left: 50%; width: 100vw; transform: translateX(-50%);
  border-block: 1px solid var(--line);
  background:
    radial-gradient(900px 380px at 50% -10%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%),
    color-mix(in srgb, var(--accent) 9%, var(--canvas));
}
.pm { display: none; }   /* HIDDEN for now (the markup stays in next.html): delete this line to bring the drifting persistent locations back */

/* ---- the emblem that opens the section after the UI sections: Lady Justice with her scales and sword (img/app/justice-emblem-*.png, cut out of
   its background). It starts at the band's left edge and stands on the band's bottom edge, so she reads as rising out of the band. ---- */
/* the close: the figure at the start, the words and the buttons beside her */
.pers {
  --pw: clamp(220px, 24vw, calc(330px * var(--ui, 1)));   /* the figure's width (grows with --ui on a big screen) */
  padding-bottom: 0;
  display: grid;
  grid-template-columns: calc(var(--pw) - var(--gutter)) minmax(0, 1fr);   /* she bleeds to the page edge, so her column is the gutter shorter */
  column-gap: clamp(32px, 6vw, 96px);
  align-items: stretch;
}
.pers-close { align-self: center; display: flex; flex-direction: column; gap: 20px; padding-bottom: clamp(40px, 5vw, 76px); }   /* the whole column, no width limit */
.pers-close .h-sec { font-size: clamp(36px, 4.6vw, 68px); line-height: 1.02; letter-spacing: -0.035em; max-width: none; }   /* the hook: one line while it fits */
.pers-sub { margin: 0; font-family: var(--font-display); font-size: clamp(19px, 1.9vw, 30px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; }
/* the way in: text, not buttons. The first is the act (large, ink colour, a heavy accent underline, an arrow that nudges on hover); the second is a quiet link. */
.pers-links { display: flex; flex-wrap: wrap; align-items: baseline; gap: 14px 34px; margin-top: 10px; }
.pers-go { display: inline-flex; align-items: center; gap: 10px; padding-bottom: 5px; border-bottom: 3px solid var(--accent-2); font-family: var(--font-display); font-size: clamp(22px, 2.2vw, 30px); font-weight: 700; letter-spacing: -0.02em; color: var(--ink); }
.pers-go .ui-pic { font-size: 0.8em; color: var(--accent-2); transition: transform 0.2s var(--ease); }
.pers-go:hover { border-bottom-color: var(--accent); }
.pers-go:hover .ui-pic { transform: translateX(4px); }
.pers-alt { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; color: var(--accent-2); }
.pers-alt .ui-pic { font-size: 16px; }
.pers-alt:hover { text-decoration: underline; text-underline-offset: 3px; }
.pers-go:focus-visible, .pers-alt:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 4px; }
/* the limits under the close: small and plain, a link to the terms' limits section */
.pers-note { margin: 6px 0 0; max-width: 62ch; font-size: 14px; line-height: 1.55; color: var(--muted); }
.pers-note b { font-weight: 600; color: var(--ink); }
.pers-note a { color: var(--accent-2); text-decoration: underline; text-underline-offset: 3px; }
.pers-note a:hover { color: var(--accent); }
@media (max-width: 760px) { .pers { grid-template-columns: minmax(0, 1fr); } .pers-close { padding-bottom: 32px; } }
/* monochrome: one ink colour through a mask, the painting's tones kept as alpha (the same technique as the watchman emblem); a light-ink version for the
   dark theme and a dark-ink one for the light theme, so it reads as an engraving in either */
.pers-emblem {
  --emb: url(img/app/justice-emblem-dark.png);
  display: block;
  align-self: end;                    /* she stands on the band's bottom edge */
  width: var(--pw);                   /* a standing figure: sized by width, its height follows (about 1.8 x) */
  aspect-ratio: 849 / 1538;
  margin-left: calc(var(--gutter) * -1);
  background: var(--ink);
  -webkit-mask: var(--emb) left bottom / contain no-repeat;
  mask: var(--emb) left bottom / contain no-repeat;
  pointer-events: none;
}
@media (prefers-color-scheme: light) { html:not([data-theme="dark"]) .pers-emblem { --emb: url(img/app/justice-emblem-light.png); } }
html[data-theme="light"] .pers-emblem { --emb: url(img/app/justice-emblem-light.png); }
@media (max-width: 760px) { .pers-emblem { width: min(300px, 70%); } }

.pers-tag {
  display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.12em; color: var(--muted);
  border: 1px solid var(--line); background: var(--panel);
}
.pers-tag--cloud { color: var(--accent-2); border-color: color-mix(in srgb, var(--accent) 40%, var(--glass-border)); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.pers-tag .ui-pic { font-size: 14px; }

/* dev-only switch in the pricing block: absent unless the head script marks the page as dev */
.dev-only { display: none; }
html[data-dev] .dev-only { display: inline-flex; }
/* frosted glass: the banner behind it is blurred and lifted, so it stays readable on the painting */
.art-switch {
  position: absolute; z-index: 5; bottom: 12px; right: var(--gutter); align-items: center; font-size: 12px;
  border: 1px solid light-dark(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.3));
  background: linear-gradient(180deg, light-dark(rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.2)), light-dark(rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.09)));
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  box-shadow: inset 0 1px 0 light-dark(rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.35)), 0 10px 24px -10px rgba(0, 0, 0, 0.55);
}
.art-switch-k { padding: 0 8px 0 10px; font-size: 10px; letter-spacing: 0.14em; color: var(--critical); }
.art-switch button { padding: 5px 11px; border-radius: calc(var(--r-ctl) - 3px); font-size: 12px; color: light-dark(var(--ink), rgba(243, 246, 253, 0.8)); }
.art-switch button:hover { color: light-dark(var(--ink), #fff); }
.art-switch button[aria-selected="true"] { color: light-dark(var(--ink), #fff); background: light-dark(rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.24)); box-shadow: inset 0 1px 0 light-dark(#fff, rgba(255, 255, 255, 0.3)); }
@media (prefers-reduced-transparency: reduce) { .art-switch { background: var(--glass-solid); backdrop-filter: none; -webkit-backdrop-filter: none; } }
.foot-motto { font-family: var(--font-display); font-size: 14px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.foot-link { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); transition: color 0.15s ease; }
.foot-link .ui-pic { font-size: 15px; }
.foot-link:hover { color: var(--ink); }
.foot-legal { display: inline-flex; flex-wrap: wrap; gap: 16px; }
/* who makes and sells antitheft, and the trademark line: its own row under the others */
.foot-co { flex-basis: 100%; font-size: 11px; line-height: 1.5; color: var(--muted); }
.foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 12px; color: var(--muted); border-top: 1px solid var(--line); padding-block: 20px; }   /* two short lines: they do not need the section's 40-80px of padding */

/* ---- protection sections (autostart, rats, secrets, supply chain): the .own layout, copy left, all four on the same side. The right
   column is an empty stage the one app window docks into while it travels down the page (next.js), so its screens blur from one to the next. ---- */
.feat { grid-template-columns: minmax(0, 1fr) var(--s3w, 716px); scroll-margin-top: var(--nav-h); }
.feat-stage { width: var(--s3w, 716px); max-width: 100%; justify-self: end; }
.feat-stage.is-travel .own-win { left: 0; right: auto; }
.feat-tag { align-self: flex-start; }
.feat .h-sec { max-width: 18ch; }
.feat-list { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.feat-list li { display: flex; align-items: flex-start; gap: 10px; max-width: 46ch; font-size: 15.5px; line-height: 1.45; color: var(--muted); }
.feat-list .ui-pic { flex-shrink: 0; margin-top: 2px; font-size: 16px; color: var(--accent-2); }

@media (max-width: 980px) {
  .hero { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .hero .h-hero { max-width: none; }
  .stage { justify-self: stretch; max-width: 760px; }
  .own, .own--flip { grid-template-columns: minmax(0, 1fr); }
  .own--flip .s3-left { order: 0; }
  .own-copy { position: static; }
}
@media (max-width: 680px) {
  .stage-slot { width: 100%; }
  /* the alert is wide enough to read (next.js draws the window 520 wide here, and the alert scales to this box), and sits over the window's lower
     part so the window's own title and first rows stay in view above it */
  .stage-pops { width: 86%; top: 17%; }
  .stage-art { aspect-ratio: 1000 / 900; }
  /* paddings: less air between sections, the copy and its window closer together, the hero not pushed down from the bar */
  .sec { padding-block: 56px; }
  .hero { padding-block: 36px 40px; gap: 28px; }   /* 46px of main + 36 clears the tall bar (12 + 62) */
  .own { gap: 28px; }
  .own-copy { gap: 16px; }
  .feat-list li { font-size: 15px; }
  .supports { gap: 16px; }
  .own-btn { margin-top: 2px; }
  .stage { gap: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .pop, .pop.is-on { transition: none; }
}

/* the platform icons on the install tabs (hero and dialog): img/platforms/*.png are one 96px canvas each, cut to their content and scaled so all four
   carry the same visual size, in their own colours; one fixed box here so they line up */
.seg img { width: 18px; height: 18px; }

/* ---- the install dialog (next.js opens it from every "Install" link) ---- */
.idlg {
  --idlg-opacity: 0.5;     /* how much of the page colour the pane carries: 0 clear glass .. 1 solid. The blur below does the rest. */
  --idlg-blur: 26px;       /* how far the page under the pane is blurred */
  width: min(600px, calc(100vw - 32px));
  max-width: none;
  padding: 0;
  border: 1px solid var(--glass-border);
  border-radius: var(--r-card);
  color: var(--ink);
  /* frosted glass: a see-through tint of the page colour under the app's glass sheen, with what is behind it blurred and a touch more vivid */
  background: linear-gradient(180deg, var(--panel), var(--panel-hi)), color-mix(in srgb, var(--canvas) calc(var(--idlg-opacity) * 100%), transparent);
  -webkit-backdrop-filter: blur(var(--idlg-blur)) saturate(170%);
  backdrop-filter: blur(var(--idlg-blur)) saturate(170%);
  box-shadow: inset 0 1px 0 var(--glass-hi), 0 40px 90px -30px rgba(0, 0, 0, 0.6);
  overscroll-behavior: contain;
}
/* the dimming behind the pane is light and barely blurred, so the page stays recognisable through the glass */
.idlg::backdrop { background: rgba(4, 9, 22, 0.32); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.idlg[open] { animation: idlg-in 0.28s var(--ease); }
.idlg[open]::backdrop { animation: idlg-fade 0.28s ease; }
@keyframes idlg-in { from { opacity: 0; transform: translateY(14px) scale(0.98); } }
@keyframes idlg-fade { from { opacity: 0; } }
.idlg-box { display: flex; flex-direction: column; gap: 18px; padding: clamp(20px, 3vw, 30px); }
.idlg-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.idlg-title { margin: 0; font-family: var(--font-display); font-size: clamp(24px, 2.6vw, 32px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; }
.idlg .dseg { flex-wrap: wrap; align-self: flex-start; }
.idlg .codebox { width: 100%; }
.idlg-how { margin: 0; font-size: 16px; line-height: 1.5; color: var(--muted); }
/* the fine print: the smallest, faintest text in the dialog, no box and no icon; it is there for whoever goes looking */
.idlg-fine { margin: -4px 0 0; font-size: 12px; line-height: 1.4; color: color-mix(in srgb, var(--muted) 70%, transparent); }
.idlg-fine a { color: inherit; text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); text-underline-offset: 3px; transition: color 0.15s ease; }
.idlg-fine a:hover { color: var(--ink); }
.idlg .iconbtn .ui-pic { font-size: 16px; }