/* Costa Ibérica UI 0.3.2: tokens, fonts, base and components in one file.
 * Generated by scripts/build_static.py from the files named below; edit those,
 * not this file. To adopt the system screen by screen, link tokens.css,
 * fonts.css and components.css on their own and leave base.css out.
 */

/* ===== tokens.css ===== */

/* Costa Ibérica design tokens.
 *
 * Brand colours are the exact values from the Mediaelx brand manual v1.0
 * (Aug 2026). Never add a new brand colour: everything else in this file is
 * a tint or shade of them, or a functional status colour.
 *
 * Proportions from the manual: navy ~55 %, bone ~35 %, gold ~10 %. Gold is an
 * accent (rules, details, the one main action), never a large area, and never
 * the colour of text people must read on a light background (2.6:1).
 */
:root {
  /* Brand */
  --ci-navy: #1E2A42;          /* Marino profundo: dominant */
  --ci-bone: #F4F3F1;          /* Blanco de apoyo: page background */
  --ci-gold: #B79E68;          /* Oro cálido: accent only */
  --ci-gold-shadow: #A78655;   /* Oro sombra: monogram depth, gold hover */
  --ci-white: #FFFFFF;

  /* Tints and shades of the brand colours */
  --ci-navy-deep: #141D30;     /* pressed navy */
  --ci-navy-raised: #2C3C58;   /* hover on navy */
  --ci-gold-tint: #ECE3D1;     /* gold badge background */
  --ci-gold-wash: #F8F4EC;     /* selected row, highlighted block */

  /* Text */
  --ci-text: var(--ci-navy);
  --ci-text-muted: #5B6476;          /* 5.9:1 on white, 5.4:1 on bone */
  --ci-text-on-navy: var(--ci-white);
  --ci-text-on-navy-muted: #AEB6C6;  /* 7:1 on navy */
  --ci-text-on-navy-accent: var(--ci-gold); /* 5.5:1 on navy */
  --ci-text-on-navy-gold: #CEB888;   /* lighter gold for the app's name, 7.4:1 on navy */

  /* Surfaces and lines */
  --ci-page: var(--ci-bone);
  --ci-surface: var(--ci-white);
  --ci-surface-sunk: #ECEAE5;        /* photo placeholder, inset areas */
  --ci-line: #E2DED6;                /* dividers, panel borders */
  --ci-line-strong: #868D9C;         /* form control borders, 3.4:1 on white */
  --ci-rule: var(--ci-gold);         /* el filete: the hairline from the logo */

  /* Status colours: functional, deliberately outside the brand palette and
     muted so they sit next to navy and gold. Text on tint is >= 5:1. */
  --ci-success: #2F6B4A;  --ci-success-tint: #E4EFE8;
  --ci-warning: #8A5A0B;  --ci-warning-tint: #F6ECD9;
  --ci-danger:  #A8322A;  --ci-danger-tint:  #F7E6E3;
  --ci-info:    var(--ci-navy); --ci-info-tint: #E5E8EF;

  /* Typography. Superior Title: page and section titles, highlighted figures
     (prices). Never body text, tables or form labels. Elms Sans: everything
     else; Light for running text, Regular for data, Medium for emphasis. */
  --ci-font-title: "Superior Title", Georgia, "Times New Roman", serif;
  --ci-font-text: "Elms Sans", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;

  --ci-fs-xs: 0.75rem;     /* 12 */
  --ci-fs-sm: 0.8125rem;   /* 13 */
  --ci-fs-md: 0.9375rem;   /* 15: base */
  --ci-fs-lg: 1.0625rem;   /* 17 */
  --ci-fs-xl: 1.3125rem;   /* 21 */
  --ci-fs-2xl: 1.625rem;   /* 26 */
  --ci-fs-3xl: 2.125rem;   /* 34 */
  --ci-fs-4xl: 2.75rem;    /* 44 */

  --ci-lh-text: 1.55;
  --ci-lh-prose: 1.65;
  --ci-lh-title: 1.12;

  /* Secondary labels and signage: uppercase with wide spacing (manual p. 09). */
  --ci-tracking-caps: 0.18em;

  /* Space, on a 4 px grid */
  --ci-space-1: 4px;
  --ci-space-2: 8px;
  --ci-space-3: 12px;
  --ci-space-4: 16px;
  --ci-space-5: 24px;
  --ci-space-6: 32px;
  --ci-space-7: 48px;
  --ci-space-8: 64px;

  /* Shape. Near-square corners everywhere; round only for avatars. */
  --ci-radius: 2px;
  --ci-hairline: 1px;
  --ci-shadow-overlay: 0 18px 40px -18px rgba(20, 29, 48, 0.45);
  --ci-focus-ring: 0 0 0 3px rgba(183, 158, 104, 0.55);

  /* Layout */
  --ci-header-height: 64px;
  --ci-content-max: 1240px;
  --ci-gutter: clamp(16px, 4vw, 40px);

  --ci-ease: cubic-bezier(0.2, 0, 0, 1);
}

/* ===== fonts.css ===== */

/* Brand fonts, self-hosted. No CDN: apps must work offline on the office
 * network. URLs are relative to this file, so the static folder can be
 * mounted at any path.
 *
 * Elms Sans: SIL Open Font License 1.1 (fonts/elms-sans/OFL.txt).
 * Superior Title: commercial (MCKL), licensed through Mediaelx for Costa
 * Ibérica. Keep these files in private repos only; never publish them.
 */
@font-face {
  font-family: "Elms Sans";
  src: url("../fonts/elms-sans/ElmsSans-Light.woff2") format("woff2");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Elms Sans";
  src: url("../fonts/elms-sans/ElmsSans-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Elms Sans";
  src: url("../fonts/elms-sans/ElmsSans-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Elms Sans";
  src: url("../fonts/elms-sans/ElmsSans-SemiBold.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Elms Sans";
  src: url("../fonts/elms-sans/ElmsSans-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
/* Superior Title has one weight. The range stops browsers from faking a
   bold version when a title is set in a heavier weight. */
@font-face {
  font-family: "Superior Title";
  src: url("../fonts/superior-title/SuperiorTitle-Regular.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}

/* ===== base.css ===== */

/* Base styles: element defaults for any web app, whatever its stack.
 *
 * Every selector is wrapped in :where(), so it has zero specificity and an
 * app's own CSS always wins. An app that is migrating screen by screen can
 * leave this file out and use only tokens, fonts and components.
 */
:where(*, *::before, *::after) { box-sizing: border-box; }

:where(html) {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

:where(body) {
  margin: 0;
  min-height: 100vh;
  background: var(--ci-page);
  color: var(--ci-text);
  font-family: var(--ci-font-text);
  font-size: var(--ci-fs-md);
  font-weight: 400;
  line-height: var(--ci-lh-text);
  font-variant-numeric: lining-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Titles: Superior Title for h1 and h2 only. Smaller headings stay in Elms
   Sans; the manual rules the serif out at small sizes. */
:where(h1, h2) {
  font-family: var(--ci-font-title);
  font-weight: 400;
  font-synthesis: none;
  line-height: var(--ci-lh-title);
  letter-spacing: 0.005em;
  color: var(--ci-navy);
  margin: 0 0 var(--ci-space-4);
  text-wrap: balance;
}
:where(h1) { font-size: var(--ci-fs-3xl); }
:where(h2) { font-size: var(--ci-fs-xl); }
:where(h3, h4) {
  font-family: var(--ci-font-text);
  font-weight: 600;
  font-size: var(--ci-fs-md);
  line-height: 1.35;
  color: var(--ci-navy);
  margin: 0 0 var(--ci-space-2);
}

:where(p) { margin: 0 0 var(--ci-space-4); max-width: 72ch; }

:where(a) {
  color: var(--ci-navy);
  text-decoration: underline;
  text-decoration-color: var(--ci-gold);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}
:where(a:hover) { text-decoration-thickness: 2px; }

:where(strong, b) { font-weight: 600; }
:where(small) { font-size: var(--ci-fs-sm); }

:where(hr) {
  border: 0;
  border-top: var(--ci-hairline) solid var(--ci-line);
  margin: var(--ci-space-6) 0;
}

:where(img, svg, video) { display: block; max-width: 100%; }
:where(img) { height: auto; }

:where(button, input, select, textarea) {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

:where(table) { border-collapse: collapse; }

/* One focus style everywhere: a gold halo, visible on navy and on bone. */
:where(:focus-visible) {
  outline: 2px solid var(--ci-gold);
  outline-offset: 2px;
}

:where(::selection) { background: var(--ci-gold-tint); color: var(--ci-navy); }

@media (prefers-reduced-motion: reduce) {
  :where(*, *::before, *::after) {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ===== components.css ===== */

/* Components. Every class starts with "ci-" so an app can adopt them
 * screen by screen without clashing with its old styles.
 *
 * The one recurring device is el filete: the thin gold rule that runs under
 * the logo. It marks the edge of the header, the active page in the
 * navigation and the line after a page title. Everything else stays quiet.
 */

/* ---------- Layout ---------- */

.ci-main {
  max-width: calc(var(--ci-content-max) + 2 * var(--ci-gutter));
  margin: 0 auto;
  padding: 0 var(--ci-gutter) var(--ci-space-8);
}

.ci-grid {
  display: grid;
  gap: var(--ci-space-5);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}

.ci-split {
  display: grid;
  gap: var(--ci-space-5);
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  align-items: start;
}
@media (max-width: 900px) {
  .ci-split { grid-template-columns: minmax(0, 1fr); }
}

.ci-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ci-space-4);
  margin: var(--ci-space-7) 0 var(--ci-space-4);
}
.ci-section-head > :where(h2) { margin: 0; }

/* ---------- Header ---------- */

/* "Skip to content" link, visible only when reached with the keyboard. */
.ci-skip {
  position: absolute;
  top: -100px;
  left: var(--ci-space-4);
  z-index: 10;
  padding: var(--ci-space-2) 14px;
  background: var(--ci-white);
  color: var(--ci-navy);
  border-radius: var(--ci-radius);
  box-shadow: var(--ci-shadow-overlay);
}
.ci-skip:focus { top: var(--ci-space-3); }

.ci-header {
  background: var(--ci-navy);
  color: var(--ci-text-on-navy);
  border-bottom: var(--ci-hairline) solid var(--ci-rule);
}
.ci-header__inner {
  max-width: calc(var(--ci-content-max) + 2 * var(--ci-gutter));
  height: var(--ci-header-height);
  margin: 0 auto;
  padding: 0 var(--ci-gutter);
  display: flex;
  align-items: stretch;
  gap: var(--ci-space-4);
}
.ci-header__brand {
  display: flex;
  align-items: center;
  gap: var(--ci-space-4);
  flex-shrink: 0;
  color: inherit;
  text-decoration: none;
}
.ci-header__logo { height: 26px; width: auto; }
.ci-header__mark { display: none; height: 30px; width: auto; }
/* The app name sits right of the logo behind a vertical gold rule, the
   manual's alternative position for the claim. It tells the apps apart, so
   it is as large as the menu and in a lighter gold. */
.ci-header__app {
  display: flex;
  align-items: center;
  height: 24px;
  padding-left: var(--ci-space-4);
  border-left: var(--ci-hairline) solid var(--ci-rule);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ci-text-on-navy-gold);
}

/* The menu: plain links in a row that scrolls sideways when it is too long,
   then the groups, which stay in place so their menus are never cut off. */
.ci-header { --ci-nav-pad: 9px; }  /* each link's side padding: 18 px between two links */
.ci-header__menu { display: flex; align-items: stretch; flex: 1; min-width: 0; }
.ci-nav {
  display: flex;
  align-items: stretch;
  flex: 0 1 auto;  /* the groups follow the last link; the links scroll when the row is full */
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
/* A menu wider than its row scrolls sideways. Each edge with more of the
   menu hidden behind it fades into the navy; ciui.js sets data-ciui-more to
   "start", "end" or "both" from the scroll position. */
.ci-nav[data-ciui-more] {
  --ci-nav-fade-start: #000;
  --ci-nav-fade-end: #000;
  -webkit-mask-image: linear-gradient(to right, var(--ci-nav-fade-start), #000 48px, #000 calc(100% - 48px), var(--ci-nav-fade-end));
  mask-image: linear-gradient(to right, var(--ci-nav-fade-start), #000 48px, #000 calc(100% - 48px), var(--ci-nav-fade-end));
}
.ci-nav[data-ciui-more="start"], .ci-nav[data-ciui-more="both"] { --ci-nav-fade-start: transparent; }
.ci-nav[data-ciui-more="end"], .ci-nav[data-ciui-more="both"] { --ci-nav-fade-end: transparent; }
.ci-nav__link {
  display: flex;
  align-items: center;
  padding: 0 var(--ci-nav-pad);
  color: var(--ci-text-on-navy-muted);
  font-size: 0.875rem;
  text-decoration: none;
  white-space: nowrap;
  transition: color 150ms var(--ci-ease);
}
.ci-nav__link:hover { color: var(--ci-text-on-navy); }
/* A count after a menu item, e.g. enquiries waiting to be sent. */
.ci-nav__badge {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  margin-left: 7px;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--ci-gold);
  color: var(--ci-navy-deep);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.ci-nav__badge[hidden] { display: none; }

/* A group of menu items under one label (a native disclosure). */
.ci-navgroup { position: relative; display: flex; flex-shrink: 0; }
.ci-navgroup__toggle { gap: 6px; list-style: none; cursor: pointer; user-select: none; }
.ci-navgroup__toggle::-webkit-details-marker { display: none; }
.ci-navgroup__chevron { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; transition: transform 150ms var(--ci-ease); }
.ci-navgroup[open] .ci-navgroup__chevron { transform: rotate(180deg); }
.ci-navgroup[open] > .ci-navgroup__toggle { color: var(--ci-text-on-navy); }
.ci-navgroup--current > .ci-navgroup__toggle { color: var(--ci-text-on-navy); box-shadow: inset 0 -3px 0 var(--ci-rule); }
.ci-navgroup__menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 20;
  min-width: 232px;
  padding: var(--ci-space-2) 0;
  background: var(--ci-surface);
  border: var(--ci-hairline) solid var(--ci-line);
  border-top: 2px solid var(--ci-rule);
  border-radius: 0 0 var(--ci-radius) var(--ci-radius);
  box-shadow: var(--ci-shadow-overlay);
}
.ci-navgroup__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ci-space-3);
  padding: 10px var(--ci-space-4);
  color: var(--ci-navy);
  font-size: 0.875rem;
  text-decoration: none;
  white-space: nowrap;
}
.ci-navgroup__link:hover { background: var(--ci-gold-wash); }
.ci-navgroup__link:focus-visible { outline-color: var(--ci-navy); outline-offset: -2px; }
.ci-navgroup__link[aria-current="page"] { font-weight: 500; box-shadow: inset 3px 0 0 var(--ci-rule); }
.ci-nav__link:focus-visible { outline-offset: -2px; }
/* The active page thickens the filete under its own link. */
.ci-nav__link[aria-current="page"] {
  color: var(--ci-text-on-navy);
  box-shadow: inset 0 -3px 0 var(--ci-rule);
}

/* The user's menu (<details>): avatar and name open a small panel with the
   name, role and "log out". */
.ci-user { position: relative; flex-shrink: 0; }
.ci-user__toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 6px 4px 4px;
  border-radius: var(--ci-radius);
  color: var(--ci-text-on-navy);
  cursor: pointer;
  list-style: none;
}
.ci-user__toggle::-webkit-details-marker { display: none; }
.ci-user__toggle:hover .ci-user__chevron { color: var(--ci-text-on-navy); }
.ci-user__chevron {
  width: 14px;
  height: 14px;
  color: var(--ci-text-on-navy-muted);
  transition: transform 150ms var(--ci-ease), color 150ms var(--ci-ease);
}
.ci-user[open] .ci-user__chevron { transform: rotate(180deg); }
.ci-user__menu {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  z-index: 20;
  min-width: 232px;
  padding: var(--ci-space-4);
  background: var(--ci-surface);
  border: var(--ci-hairline) solid var(--ci-line);
  border-top: 2px solid var(--ci-rule);
  border-radius: var(--ci-radius);
  box-shadow: var(--ci-shadow-overlay);
  color: var(--ci-navy);
}
.ci-user__menu-name { margin: 0; font-weight: 500; }
.ci-user__menu-role { margin: 2px 0 0; font-size: var(--ci-fs-sm); color: var(--ci-text-muted); }
.ci-user__menu form { margin: var(--ci-space-4) 0 0; }
.ci-user__menu :focus-visible { outline-color: var(--ci-navy); }
.ci-avatar {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--ci-navy-raised);
  box-shadow: inset 0 0 0 1px var(--ci-rule);
  color: var(--ci-gold-tint);
  font-size: var(--ci-fs-xs);
  font-weight: 500;
  letter-spacing: 0.06em;
}
.ci-user__text { display: grid; line-height: 1.25; text-align: left; }
.ci-user__name { font-size: var(--ci-fs-sm); font-weight: 500; }
.ci-user__role { font-size: var(--ci-fs-xs); color: var(--ci-text-on-navy-muted); }

/* Right end of the header: language switcher, then the user. */
.ci-header__end {
  display: flex;
  align-items: center;
  gap: var(--ci-space-4);
  flex-shrink: 0;
}

/* ---------- Language switcher ---------- */

/* PL · ES · EN as text, no flags. Tone "dark" (on navy): the active language
   is gold. Tone "light" (on bone or white): gold text would be unreadable,
   so the active language is navy with the gold rule under it. */
.ci-lang {
  --ci-lang-idle: var(--ci-text-on-navy-muted);
  --ci-lang-hover: var(--ci-text-on-navy);
  --ci-lang-active: var(--ci-text-on-navy-accent);
  --ci-lang-mark: transparent;
  margin: 0;
}
.ci-lang--light {
  --ci-lang-idle: var(--ci-text-muted);
  --ci-lang-hover: var(--ci-navy);
  --ci-lang-active: var(--ci-navy);
  --ci-lang-mark: var(--ci-rule);
}
.ci-lang__options { display: flex; align-items: center; gap: 2px; }
.ci-lang__option {
  min-width: 32px;
  padding: 7px 4px 6px;
  background: none;
  border: 0;
  border-radius: var(--ci-radius);
  color: var(--ci-lang-idle);
  font-family: var(--ci-font-text);
  font-size: var(--ci-fs-xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: color 150ms var(--ci-ease);
}
.ci-lang__option:hover { color: var(--ci-lang-hover); text-decoration: none; }
.ci-lang__option[aria-current="true"] {
  color: var(--ci-lang-active);
  text-decoration: underline;
  text-decoration-color: var(--ci-lang-mark);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.55em;
  cursor: default;
}
.ci-lang__sep { color: var(--ci-lang-idle); font-size: var(--ci-fs-xs); opacity: 0.6; }

/* Narrower screens: initials only. The name stays in the button for screen
   readers and is shown in the menu, so it is reachable by touch too. */
@media (max-width: 1280px) {
  .ci-user__text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}
@media (max-width: 1080px) {
  .ci-header__inner { height: auto; flex-wrap: wrap; row-gap: 0; }
  .ci-header__brand, .ci-header__end { min-height: 56px; }
  .ci-header__end { margin-left: auto; }
  .ci-header__menu {
    order: 3;
    flex-basis: 100%;
    height: 44px;
    margin: 0 calc(-1 * var(--ci-gutter));
    padding: 0 calc(var(--ci-gutter) - var(--ci-nav-pad));
    border-top: var(--ci-hairline) solid rgba(255, 255, 255, 0.08);
  }
  /* The groups end the menu's row, near the screen's right edge. */
  .ci-navgroup__menu { left: auto; right: 0; }
}
@media (max-width: 520px) {
  .ci-header__logo { display: none; }
  .ci-header__mark { display: block; }
  /* On a phone: monogram and the app's name, never without the name; the
     name a size smaller, so "Transacciones" fits beside the switcher. */
  .ci-header__brand { gap: var(--ci-space-3); }
  .ci-header__app { padding-left: var(--ci-space-3); font-size: 0.75rem; letter-spacing: 0.14em; }
  .ci-header__end { gap: var(--ci-space-2); }
  .ci-user .ci-user__chevron { display: none; }
  .ci-user__toggle { padding: 4px; }
  .ci-lang__option { min-width: 28px; }
}
/* Small phones (360 px): a little tighter, so the name still fits beside the
   switcher. */
@media (max-width: 389px) {
  .ci-header__brand { gap: var(--ci-space-2); }
  .ci-header__app { padding-left: var(--ci-space-2); font-size: 0.6875rem; letter-spacing: 0.08em; }
  .ci-lang__option { min-width: 24px; padding-left: 2px; padding-right: 2px; }
}

/* ---------- Page head ---------- */

.ci-pagehead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  column-gap: var(--ci-space-5);
  margin: var(--ci-space-7) 0 var(--ci-space-6);
}
.ci-pagehead__back {
  grid-column: 1 / -1;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: var(--ci-space-3);
  color: var(--ci-text-muted);
  font-size: var(--ci-fs-sm);
  text-decoration: none;
}
.ci-pagehead__back:hover { color: var(--ci-navy); }
.ci-pagehead__back svg { width: 16px; height: 16px; }
.ci-pagehead__title { margin: 0; font-size: var(--ci-fs-3xl); }
.ci-pagehead__actions { display: flex; flex-wrap: wrap; gap: var(--ci-space-2); }
/* Meta line, then the filete runs to the edge, as "REAL ESTATE" and its
   rule do in the logo. */
.ci-pagehead__meta {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: var(--ci-space-4);
  max-width: none;
  margin: var(--ci-space-3) 0 0;
  color: var(--ci-text-muted);
  font-size: var(--ci-fs-sm);
}
.ci-pagehead__meta::after {
  content: "";
  flex: 1;
  min-width: var(--ci-space-7);
  height: var(--ci-hairline);
  background: var(--ci-rule);
}
@media (max-width: 640px) {
  .ci-pagehead { grid-template-columns: minmax(0, 1fr); row-gap: var(--ci-space-4); }
  .ci-pagehead__title { font-size: var(--ci-fs-2xl); }
  .ci-pagehead__actions { order: 3; }
}

/* ---------- Buttons ---------- */

.ci-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ci-space-2);
  min-height: 40px;
  padding: 0 18px;
  border: var(--ci-hairline) solid var(--ci-navy);
  border-radius: var(--ci-radius);
  background: var(--ci-navy);
  color: var(--ci-white);
  font-family: var(--ci-font-text);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 150ms var(--ci-ease), border-color 150ms var(--ci-ease), color 150ms var(--ci-ease);
}
.ci-btn:hover { background: var(--ci-navy-raised); border-color: var(--ci-navy-raised); }
.ci-btn:active { background: var(--ci-navy-deep); border-color: var(--ci-navy-deep); }
.ci-btn svg { width: 16px; height: 16px; flex-shrink: 0; }

/* Accent: the one main action on a screen. Gold is an accent, so use it
   once per screen at most. */
.ci-btn--accent {
  background: var(--ci-gold);
  border-color: var(--ci-gold);
  color: var(--ci-navy-deep);
}
.ci-btn--accent:hover { background: var(--ci-gold-shadow); border-color: var(--ci-gold-shadow); }
.ci-btn--accent:active { background: var(--ci-gold-shadow); border-color: var(--ci-navy-deep); }

.ci-btn--secondary { background: var(--ci-white); color: var(--ci-navy); }
.ci-btn--secondary:hover { background: var(--ci-gold-wash); border-color: var(--ci-navy); }
.ci-btn--secondary:active { background: var(--ci-gold-tint); border-color: var(--ci-navy); }

.ci-btn--quiet {
  min-height: 32px;
  padding: 0 var(--ci-space-1);
  background: transparent;
  border-color: transparent;
  color: var(--ci-navy);
  text-decoration: underline;
  text-decoration-color: var(--ci-gold);
  text-underline-offset: 0.3em;
}
.ci-btn--quiet:hover,
.ci-btn--quiet:active { background: transparent; border-color: transparent; text-decoration-thickness: 2px; }

.ci-btn--danger { background: var(--ci-white); border-color: var(--ci-danger); color: var(--ci-danger); }
.ci-btn--danger:hover,
.ci-btn--danger:active { background: var(--ci-danger-tint); border-color: var(--ci-danger); }

.ci-btn--sm { min-height: 32px; padding: 0 var(--ci-space-3); font-size: var(--ci-fs-sm); }
.ci-btn--lg { min-height: 48px; padding: 0 var(--ci-space-5); font-size: var(--ci-fs-md); }
.ci-btn--block { width: 100%; }

.ci-btn:disabled,
.ci-btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; pointer-events: none; }

/* ---------- Forms ---------- */

.ci-field { display: grid; align-content: start; gap: 6px; margin-bottom: 20px; min-width: 0; }
.ci-label { font-size: var(--ci-fs-sm); font-weight: 500; color: var(--ci-navy); }
.ci-label__optional { font-weight: 400; color: var(--ci-text-muted); }

.ci-input {
  width: 100%;
  min-height: 42px;
  padding: 9px 12px;
  background: var(--ci-white);
  border: var(--ci-hairline) solid var(--ci-line-strong);
  border-radius: var(--ci-radius);
  color: var(--ci-navy);
  font-family: var(--ci-font-text);
  font-size: var(--ci-fs-md);
  line-height: 1.4;
  transition: border-color 150ms var(--ci-ease), box-shadow 150ms var(--ci-ease);
}
.ci-input::placeholder { color: var(--ci-text-muted); opacity: 0.85; }
.ci-input:hover { border-color: var(--ci-navy); }
.ci-input:focus,
.ci-input:focus-visible { outline: none; border-color: var(--ci-navy); box-shadow: var(--ci-focus-ring); }
.ci-input:disabled { background: var(--ci-surface-sunk); color: var(--ci-text-muted); cursor: not-allowed; }
select.ci-input {
  appearance: none;
  padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%231E2A42' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  background-size: 11px 8px;
}
textarea.ci-input { min-height: 112px; resize: vertical; line-height: var(--ci-lh-text); }

.ci-input-icon { position: relative; }
.ci-input-icon > svg {
  position: absolute;
  left: 12px;
  top: 50%;
  width: 16px;
  height: 16px;
  transform: translateY(-50%);
  color: var(--ci-text-muted);
  pointer-events: none;
}
.ci-input-icon > .ci-input { padding-left: 38px; }

.ci-hint { margin: 0; font-size: var(--ci-fs-sm); color: var(--ci-text-muted); }
.ci-field--error .ci-input { border-color: var(--ci-danger); }
.ci-field--error .ci-input:focus { box-shadow: 0 0 0 3px rgba(168, 50, 42, 0.22); }
.ci-error-text { margin: 0; font-size: var(--ci-fs-sm); font-weight: 500; color: var(--ci-danger); }

.ci-fieldset { margin: 0 0 var(--ci-space-5); padding: 0; border: 0; min-width: 0; }
.ci-legend {
  display: flex;
  align-items: center;
  gap: var(--ci-space-3);
  width: 100%;
  margin-bottom: var(--ci-space-4);
  padding: 0;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: var(--ci-tracking-caps);
  text-transform: uppercase;
  color: var(--ci-text-muted);
}
.ci-legend::after { content: ""; flex: 1; height: var(--ci-hairline); background: var(--ci-line); }

.ci-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: var(--ci-fs-md);
  cursor: pointer;
}
.ci-check input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--ci-navy); flex-shrink: 0; }

.ci-form-row {
  display: grid;
  gap: 0 var(--ci-space-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
}

.ci-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--ci-space-3);
  margin-bottom: var(--ci-space-4);
}
.ci-toolbar .ci-field { margin: 0; }
.ci-toolbar__grow { flex: 1 1 260px; }

/* ---------- Tables ---------- */

.ci-table-wrap {
  overflow-x: auto;
  background: var(--ci-surface);
  border: var(--ci-hairline) solid var(--ci-line);
}
.ci-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.ci-table th {
  padding: 14px 16px 12px;
  border-bottom: var(--ci-hairline) solid var(--ci-navy);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ci-text-muted);
}
.ci-table td {
  padding: 14px 16px;
  border-bottom: var(--ci-hairline) solid var(--ci-line);
  vertical-align: middle;
}
.ci-table tbody tr:last-child td { border-bottom: 0; }
.ci-table tbody tr:hover { background: var(--ci-gold-wash); }
.ci-table .ci-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ci-table__primary { display: block; font-weight: 500; color: var(--ci-navy); }
a.ci-table__primary { text-decoration: none; }
a.ci-table__primary:hover { text-decoration: underline; text-decoration-color: var(--ci-gold); }
.ci-table__sub { display: block; margin-top: 2px; font-size: var(--ci-fs-sm); color: var(--ci-text-muted); }
.ci-table__ref { font-variant-numeric: tabular-nums; color: var(--ci-text-muted); white-space: nowrap; }
.ci-table__none { color: var(--ci-text-muted); }
.ci-table tbody tr.ci-table__empty:hover { background: none; }
.ci-table__empty td { padding: 0; }

/* ---------- Badges ---------- */

.ci-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px 3px;
  border-radius: var(--ci-radius);
  background: var(--ci-info-tint);
  color: var(--ci-navy);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  line-height: 1.3;
  text-transform: uppercase;
  white-space: nowrap;
}
.ci-badge--neutral { background: var(--ci-surface-sunk); color: var(--ci-text-muted); }
/* Gold on navy: the brand's own pairing, kept for exclusive listings. */
.ci-badge--gold { background: var(--ci-navy); color: var(--ci-gold); }
.ci-badge--success { background: var(--ci-success-tint); color: var(--ci-success); }
.ci-badge--warning { background: var(--ci-warning-tint); color: var(--ci-warning); }
.ci-badge--danger { background: var(--ci-danger-tint); color: var(--ci-danger); }

/* ---------- Panels ---------- */

.ci-panel { background: var(--ci-surface); border: var(--ci-hairline) solid var(--ci-line); min-width: 0; }
.ci-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ci-space-4);
  padding: 18px var(--ci-space-5);
  border-bottom: var(--ci-hairline) solid var(--ci-line);
}
.ci-panel__title { margin: 0; font-family: var(--ci-font-title); font-weight: 400; font-size: var(--ci-fs-xl); line-height: var(--ci-lh-title); }
.ci-panel__body { padding: var(--ci-space-5); }

/* ---------- Property card ---------- */

.ci-property {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--ci-surface);
  border: var(--ci-hairline) solid var(--ci-line);
  color: var(--ci-navy);
  text-decoration: none;
  transition: border-color 150ms var(--ci-ease);
}
a.ci-property:hover { border-color: var(--ci-line-strong); }
.ci-property__media {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--ci-surface-sunk);
}
.ci-property__img { width: 100%; height: 100%; object-fit: cover; }
.ci-property__placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--ci-space-3);
  font-size: var(--ci-fs-sm);
  color: var(--ci-text-muted);
}
.ci-property__placeholder img { width: 52px; opacity: 0.35; }
.ci-property__badge { position: absolute; top: var(--ci-space-3); left: var(--ci-space-3); }
.ci-property__score {
  position: absolute;
  top: var(--ci-space-3);
  right: var(--ci-space-3);
  padding: 3px 9px;
  border-radius: var(--ci-radius);
  background: var(--ci-navy);
  color: var(--ci-gold);
  font-size: var(--ci-fs-xs);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.ci-property__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 18px 20px 20px;
}
.ci-property__kicker {
  display: flex;
  justify-content: space-between;
  gap: var(--ci-space-3);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ci-text-muted);
}
.ci-property__ref { letter-spacing: 0.06em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ci-property__title { margin: 8px 0 0; font-size: var(--ci-fs-md); font-weight: 500; line-height: 1.4; }
.ci-property__price {
  margin: 10px 0 0;
  font-family: var(--ci-font-title);
  font-size: var(--ci-fs-2xl);
  line-height: 1.1;
  font-synthesis: none;
}
.ci-property__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ci-space-2) 20px;
  margin: auto 0 0;
  padding: 14px 0 0;
  list-style: none;
}
.ci-property__price + .ci-property__facts { margin-top: 16px; border-top: var(--ci-hairline) solid var(--ci-line); }
.ci-property__fact { display: inline-flex; align-items: center; gap: 7px; font-size: 0.875rem; }
.ci-property__fact svg { width: 18px; height: 18px; fill: none; stroke: var(--ci-gold); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
/* How the listing meets the request: one line per criterion, the mark in
   the state's colour and the text in navy, so it reads without colour too. */
.ci-property__criteria {
  display: grid;
  gap: 4px;
  margin: 14px 0 0;
  padding: 12px 0 0;
  border-top: var(--ci-hairline) solid var(--ci-line);
  list-style: none;
  font-size: var(--ci-fs-sm);
}
.ci-property__criterion { display: flex; gap: 8px; }
.ci-property__mark { flex-shrink: 0; width: 1em; font-weight: 600; text-align: center; }
.ci-property__criterion--ok .ci-property__mark { color: var(--ci-success); }
.ci-property__criterion--part .ci-property__mark { color: var(--ci-warning); }
.ci-property__criterion--miss .ci-property__mark { color: var(--ci-danger); }
.ci-property__criterion--unknown { color: var(--ci-text-muted); }
.ci-property__extra { margin-top: 16px; padding-top: 14px; border-top: var(--ci-hairline) solid var(--ci-line); }

/* ---------- Empty states ---------- */

.ci-empty {
  display: grid;
  justify-items: center;
  padding: 56px var(--ci-space-5);
  text-align: center;
}
.ci-empty__mark { width: 44px; height: auto; }
.ci-empty__title {
  margin: 20px 0 6px;
  font-family: var(--ci-font-title);
  font-weight: 400;
  font-size: var(--ci-fs-xl);
  line-height: var(--ci-lh-title);
  color: var(--ci-navy);
}
.ci-empty__text { max-width: 44ch; margin: 0 0 20px; color: var(--ci-text-muted); }

/* Empty start screen: a whole page with nothing in it yet. It is the one
   in-app place that carries the large monogram watermark. */
.ci-empty--page {
  position: relative;
  overflow: hidden;
  min-height: 420px;
  align-content: center;
  background: var(--ci-surface);
  border: var(--ci-hairline) solid var(--ci-line);
}
.ci-empty--page > * { position: relative; }
.ci-empty--page .ci-empty__title { font-size: var(--ci-fs-2xl); }
/* The gold monogram, as on the login and error pages. It is decoration, not
   text, so it stays faint on white and never competes with the title. */
.ci-empty__watermark {
  position: absolute !important;
  right: -4%;
  bottom: -22%;
  width: 52%;
  max-width: 460px;
  opacity: 0.22;
  pointer-events: none;
}

/* ---------- Alerts ---------- */

.ci-alert {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--ci-space-3);
  padding: var(--ci-space-4) 20px;
  border-radius: var(--ci-radius);
  background: var(--ci-info-tint);
  color: var(--ci-navy);
}
.ci-alert__icon { width: 20px; height: 20px; margin-top: 1px; }
.ci-alert__title { margin: 0 0 2px; font-weight: 600; }
.ci-alert__text { margin: 0; max-width: none; }
.ci-alert__text a { font-weight: 500; }
.ci-alert--danger { background: var(--ci-danger-tint); }
.ci-alert--danger .ci-alert__icon,
.ci-alert--danger .ci-alert__title { color: var(--ci-danger); }
.ci-alert--warning { background: var(--ci-warning-tint); }
.ci-alert--warning .ci-alert__icon,
.ci-alert--warning .ci-alert__title { color: var(--ci-warning); }
.ci-alert--success { background: var(--ci-success-tint); }
.ci-alert--success .ci-alert__icon,
.ci-alert--success .ci-alert__title { color: var(--ci-success); }

/* ---------- Banner: a problem every screen must show ---------- */

.ci-banner { background: var(--ci-danger); color: var(--ci-white); }
.ci-banner__inner {
  display: flex;
  align-items: flex-start;
  gap: var(--ci-space-3);
  max-width: calc(var(--ci-content-max) + 2 * var(--ci-gutter));
  margin: 0 auto;
  padding: var(--ci-space-3) var(--ci-gutter);
}
.ci-banner__icon { flex-shrink: 0; width: 20px; height: 20px; margin-top: 1px; }
.ci-banner__text { margin: 0; max-width: none; font-size: var(--ci-fs-sm); line-height: 1.5; }
.ci-banner__text strong { font-weight: 600; }
.ci-banner__text a { color: inherit; text-decoration: underline; }
.ci-banner--warning { background: var(--ci-warning-tint); color: var(--ci-navy); border-bottom: var(--ci-hairline) solid var(--ci-warning); }
.ci-banner--warning .ci-banner__icon, .ci-banner--warning strong { color: var(--ci-warning); }
.ci-banner--info { background: var(--ci-info-tint); color: var(--ci-navy); }
.ci-banner + .ci-banner { border-top: var(--ci-hairline) solid rgba(255, 255, 255, 0.25); }

/* ---------- Brand pages: login and error pages ---------- */

/* A full page in two halves: flat navy with the logo, the claim and the
   monogram watermark; bone with the form or message. Every app's login and
   error pages use it unchanged. */
.ci-brandpage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  min-height: 100vh;
}
.ci-brandpage__brand {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--ci-space-8) clamp(32px, 6vw, 96px);
  background: var(--ci-navy);
  color: var(--ci-text-on-navy);
}
.ci-brandpage__logo { position: relative; width: min(400px, 100%); height: auto; }
/* The claim's main position: centred under the logo, gold, uppercase,
   wide spacing (manual p. 13). */
.ci-brandpage__claim {
  position: relative;
  margin: 28px 0 0;
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.32em;
  text-align: center;
  text-transform: uppercase;
  color: var(--ci-gold);
}
/* Watermark: the monogram at low opacity, as on the back of the business
   card. */
.ci-brandpage__watermark {
  position: absolute;
  right: -12%;
  bottom: -18%;
  width: 70%;
  max-width: 640px;
  opacity: 0.07;
  pointer-events: none;
}
/* The company line: bottom left of the navy half; on a phone, the last line
   of the page. */
.ci-brandpage__company {
  position: absolute;
  left: clamp(32px, 6vw, 96px);
  bottom: var(--ci-space-6);
  margin: 0;
  font-size: var(--ci-fs-xs);
  color: var(--ci-text-on-navy-muted);
}
/* The language switcher in the top right corner of the page. */
.ci-brandpage__lang {
  position: absolute;
  top: var(--ci-space-5);
  right: clamp(16px, 4vw, 48px);
  z-index: 1;
}
.ci-brandpage__main {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--ci-space-7) var(--ci-space-5);
  background: var(--ci-page);
}
.ci-brandpage__panel { width: 100%; max-width: 380px; }
.ci-brandpage__code {
  margin: 0 0 var(--ci-space-3);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: var(--ci-tracking-caps);
  text-transform: uppercase;
  color: var(--ci-text-muted);
}
/* The app's icon above its name on the login page: the same gold letter on
   navy as the browser tab and the phone home screen. On the error page a
   smaller one heads the panel, next to the app's name. */
.ci-brandpage__app-icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: var(--ci-space-5);
  background: var(--ci-navy);
  border-radius: var(--ci-radius);
  font-family: var(--ci-font-title);
  font-size: 34px;
  line-height: 1;
  color: var(--ci-gold);
}
.ci-brandpage__app {
  display: flex;
  align-items: center;
  gap: var(--ci-space-3);
  margin: 0 0 var(--ci-space-6);
  font-weight: 500;
  color: var(--ci-navy);
}
.ci-brandpage__app .ci-brandpage__app-icon { width: 32px; height: 32px; margin: 0; font-size: 20px; }
.ci-brandpage__title { margin: 0 0 var(--ci-space-2); font-size: var(--ci-fs-3xl); }
.ci-brandpage__lead { margin: 0 0 var(--ci-space-6); color: var(--ci-text-muted); }
.ci-brandpage__panel .ci-alert { margin-bottom: var(--ci-space-5); }
.ci-brandpage__help { margin: var(--ci-space-5) 0 0; font-size: var(--ci-fs-sm); color: var(--ci-text-muted); }
/* An app's own line under it (block after_help) stays close to it. */
.ci-brandpage__help + .ci-brandpage__help { margin-top: var(--ci-space-2); }

@media (max-width: 860px) {
  .ci-brandpage { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto; }
  .ci-brandpage__brand { padding: var(--ci-space-7) var(--ci-space-5) var(--ci-space-6); }
  .ci-brandpage__logo { width: min(280px, 100%); }
  .ci-brandpage__claim { margin-top: 18px; font-size: 0.625rem; letter-spacing: 0.26em; }
  .ci-brandpage__company {
    position: static;
    padding: var(--ci-space-5) var(--ci-space-5) var(--ci-space-6);
    background: var(--ci-page);
    text-align: center;
    color: var(--ci-text-muted);
  }
  /* On a phone the top of the page is the navy band: use the dark tone. */
  .ci-brandpage__lang .ci-lang {
    --ci-lang-idle: var(--ci-text-on-navy-muted);
    --ci-lang-hover: var(--ci-text-on-navy);
    --ci-lang-active: var(--ci-text-on-navy-accent);
    --ci-lang-mark: transparent;
  }
  .ci-brandpage__lang { top: var(--ci-space-3); }
  .ci-brandpage__main { align-items: flex-start; padding-top: var(--ci-space-6); }
}

/* ---------- Footer ---------- */

.ci-footer {
  max-width: calc(var(--ci-content-max) + 2 * var(--ci-gutter));
  margin: 0 auto;
  padding: 0 var(--ci-gutter);
}
.ci-footer__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--ci-space-2) var(--ci-space-5);
  padding: var(--ci-space-5) 0 var(--ci-space-6);
  border-top: var(--ci-hairline) solid var(--ci-line);
  font-size: var(--ci-fs-xs);
  color: var(--ci-text-muted);
}
.ci-footer__inner p { margin: 0; }

/* ---------- Keyboard focus on light areas ---------- */

/* The gold outline (base.css) is clear on navy but too faint on bone and
   white, so on light areas it turns navy. */
:where(.ci-main, .ci-brandpage__main, .ci-brandpage__lang, .ci-footer) :focus-visible { outline-color: var(--ci-navy); }
@media (max-width: 860px) {
  :where(.ci-brandpage__lang) :focus-visible { outline-color: var(--ci-gold); }
}

/* ---------- Utilities ---------- */

.ci-icon {
  display: inline-block;
  width: 1.15em;
  height: 1.15em;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -0.2em;
}
.ci-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ci-space-2); }
.ci-stack { display: grid; gap: var(--ci-space-5); align-content: start; }
.ci-caps {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: var(--ci-tracking-caps);
  text-transform: uppercase;
}
.ci-muted { color: var(--ci-text-muted); }
.ci-figure { font-family: var(--ci-font-title); font-weight: 400; font-synthesis: none; }
.ci-prose { font-weight: 300; line-height: var(--ci-lh-prose); max-width: 68ch; }
.ci-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}