/* ============================================================
   The IXXO brand, on every public page (5.123.0).

   These are not approximations. They are the tokens ixxo.com itself
   serves in assets/enterprise.css, read off the live site and mirrored
   here so a page this platform serves and a page ixxo.com serves are the
   same brand rather than two designs that resemble each other.

   Loaded AFTER public.css, so it redefines the tokens that file already
   reads and everything it styles follows without being rewritten.

   Navy and slate, one restrained deep orange, 4px corners. The accent is
   for what a person is meant to press, never for decoration.
   ============================================================ */

:root {
  /* Brand navy */
  --navy-900: #16273f;
  --navy-800: #1f3252;
  --navy-700: #294064;
  --navy-600: #344e74;

  /* Text */
  --ink: #1b2c46;
  --slate-700: #33425a;
  --slate-500: #5b6b85;
  --slate-400: #7d8aa1;
  --ink-dim: #5b6b85;

  /* Surfaces */
  --bg: #ffffff;
  --bg-alt: #f6f8fc;
  --bg-soft: #eef2f8;
  --card: #ffffff;
  --well: #f6f8fc;

  /* Accent: deeper orange, used sparingly */
  --accent: #d8690f;
  --accent-dark: #b6550a;
  --accent-soft: #fcefe2;
  --accent-tint: #fbf6f0;
  --on-accent: #ffffff;

  /* Lines */
  --border: #e4e9f2;
  --border-strong: #cfd7e6;
  --line: #e4e9f2;

  --success: #2f855a;
  --c-green: #2f855a;  --c-green-bg: #e6f4ec;  --c-green-bd: #d2ebdd;
  --c-blue: #2563c9;   --c-blue-bg: #e8f0fe;   --c-blue-bd: #d6e4fd;
  --c-amber: #b9750c;  --c-amber-bg: #fcf0d8;  --c-amber-bd: #f5e3c0;
  --c-rose: #c2415c;   --c-rose-bg: #fce7ec;   --c-rose-bd: #f7d5dc;

  /* Type. IBM Plex Sans carries the headings, Inter the reading. */
  --display: "IXXO Plex Sans", "IXXO Inter", system-ui, sans-serif;
  --body: "IXXO Inter", system-ui, -apple-system, sans-serif;
  --font-sans: "IXXO Inter", system-ui, -apple-system, sans-serif;

  --fs-eyebrow: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-lg: 1.0625rem;
  --fs-h3: clamp(1.3rem, 1.1rem + 0.7vw, 1.65rem);
  --fs-h2: clamp(1.95rem, 1.45rem + 1.8vw, 2.8rem);
  --fs-h1: clamp(2.35rem, 1.6rem + 3vw, 3.9rem);
  --tracking-label: 0.14em;

  --container: 1200px;
  --container-narrow: 820px;
  --radius: 4px;
  --radius-lg: 6px;

  --shadow-xs: 0 1px 2px rgba(16,24,40,0.06);
  --shadow-sm: 0 1px 3px rgba(16,24,40,0.08), 0 1px 2px rgba(16,24,40,0.04);
  --shadow-md: 0 10px 24px -12px rgba(16,24,40,0.20);
  --shadow-lg: 0 24px 50px -24px rgba(12,23,41,0.30);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 200ms;
}

body { font-family: var(--body); color: var(--slate-700); font-size: 17px; line-height: 1.6; }
h1, h2, h3, h4 { font-family: var(--display); color: var(--ink); font-weight: 600; letter-spacing: -0.01em; }
a { color: var(--navy-700); }

/* The IXXO corner is 4px, not the platform's 16. */
.pub-card, .pub-btn, .pub-buy button, .pub-buy input, .pub-err, .pub-ok { border-radius: var(--radius); }

/* ---------------------------------------------------------- the top bar */
.pub-top { background: var(--bg); border-bottom: 1px solid var(--border); }
.pub-top-in { max-width: var(--container); }

/* The shared hero every public page already uses, brought onto the brand, so
   /join and /audit match without either being rewritten. */
.pub-hero { background: var(--navy-900); border-bottom: 1px solid var(--navy-800); color: #fff; }
.pub-hero-in { max-width: var(--container); padding: 60px 20px 48px; }
.pub-hero h1 { color: #fff; font-family: var(--display); font-size: var(--fs-h1); line-height: 1.08; max-width: 20ch; text-wrap: balance; }
.pub-hero p { color: #c6d0e0; font-size: var(--fs-lg); }
.pub-wrap { max-width: var(--container); }

/* ---------------------------------------------------------- the opening */
.ix-hero {
  background: var(--navy-900);
  color: #fff;
  border-bottom: 1px solid var(--navy-800);
}
.ix-hero-in { max-width: var(--container); margin: 0 auto; padding: 68px 20px 56px; }
.ix-eyebrow {
  font-size: var(--fs-eyebrow); text-transform: uppercase; letter-spacing: var(--tracking-label);
  color: #f0b27a; margin: 0 0 14px; font-weight: 600;
}
.ix-hero h1 {
  font-size: var(--fs-h1); color: #fff; margin: 0 0 16px; line-height: 1.08;
  max-width: 19ch; text-wrap: balance;
}
.ix-hero p.lead { font-size: var(--fs-lg); color: #c6d0e0; margin: 0; max-width: 62ch; }
.ix-hero-acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

.ix-btn {
  display: inline-block; font: inherit; font-weight: 600; font-size: var(--fs-base);
  padding: 12px 22px; border-radius: var(--radius); border: 1px solid transparent;
  text-decoration: none; cursor: pointer; transition: background var(--dur) var(--ease);
}
.ix-btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.ix-btn-primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
.ix-btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,0.35); }
.ix-btn-ghost:hover { border-color: #fff; }
.ix-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---------------------------------------------------------- sections */
.ix-band { padding: 56px 0; }
.ix-band-alt { background: var(--bg-alt); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.ix-in { max-width: var(--container); margin: 0 auto; padding: 0 20px; }
.ix-in-narrow { max-width: var(--container-narrow); margin: 0 auto; padding: 0 20px; }
.ix-h2 { font-size: var(--fs-h2); margin: 0 0 10px; line-height: 1.15; text-wrap: balance; }
.ix-sub { font-size: var(--fs-lg); color: var(--slate-500); margin: 0 0 30px; max-width: 64ch; }
.ix-label {
  font-size: var(--fs-eyebrow); text-transform: uppercase; letter-spacing: var(--tracking-label);
  color: var(--accent); font-weight: 600; margin: 0 0 10px;
}

/* ---------------------------------------------------------- what it is worth */
.ix-points { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; }
.ix-point { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; }
.ix-point h3 { font-size: var(--fs-h3); margin: 0 0 6px; }
.ix-point p { margin: 0; color: var(--slate-500); font-size: var(--fs-base); }

/* ---------------------------------------------------------- the price cards */
.pub-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 20px; align-items: start; }
.pub-card {
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-xs); overflow: hidden;
}
.pub-card-head { border-top: 3px solid var(--border-strong); padding: 22px 22px 12px; }
.pub-card.is-lead { border-color: var(--accent); box-shadow: var(--shadow-md); }
.pub-card.is-lead .pub-card-head { border-top-color: var(--accent); }
.pub-card-head h2 { font-size: var(--fs-h3); margin: 0 0 4px; }
.pub-card-head .sub { color: var(--slate-500); font-size: var(--fs-sm); }
.ix-flag {
  display: inline-block; font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: var(--tracking-label); color: var(--accent);
  background: var(--accent-soft); border-radius: 3px; padding: 3px 8px; margin-bottom: 10px;
}
.pub-price .amt { font-family: var(--display); font-size: 34px; font-weight: 600; color: var(--ink); letter-spacing: -0.02em; }
.pub-price .per { color: var(--slate-500); }
.pub-price .vat { color: var(--slate-400); font-size: var(--fs-sm); }
.pub-inc li::before { background: var(--c-green-bg); border-color: var(--c-green-bd); }
.pub-buy button, .pub-btn {
  background: var(--accent); color: #fff; border: 1px solid var(--accent);
  font-weight: 600; border-radius: var(--radius);
}
.pub-buy button:hover, .pub-btn:hover { background: var(--accent-dark); }

/* ---------------------------------------------------------- the extras table */
.ix-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); }
table.ix-table { width: 100%; border-collapse: collapse; font-size: var(--fs-base); }
table.ix-table th {
  text-align: left; font-size: var(--fs-eyebrow); text-transform: uppercase;
  letter-spacing: var(--tracking-label); color: var(--slate-400); font-weight: 600;
  padding: 14px 18px; border-bottom: 1px solid var(--border); white-space: nowrap;
}
table.ix-table td { padding: 16px 18px; border-bottom: 1px solid var(--border); vertical-align: top; }
table.ix-table tr:last-child td { border-bottom: 0; }
table.ix-table .name { font-weight: 600; color: var(--ink); }
table.ix-table .what { color: var(--slate-500); font-size: var(--fs-sm); margin-top: 3px; display: block; max-width: 58ch; }
table.ix-table .price { font-family: var(--display); font-weight: 600; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
table.ix-table .cycle { color: var(--slate-400); font-size: var(--fs-sm); white-space: nowrap; }

/* ---------------------------------------------------------- questions */
.ix-faq { display: grid; gap: 0; border-top: 1px solid var(--border); }
.ix-faq details { border-bottom: 1px solid var(--border); }
.ix-faq summary {
  cursor: pointer; padding: 18px 0; font-weight: 600; color: var(--ink);
  font-family: var(--display); font-size: var(--fs-lg); list-style: none;
}
.ix-faq summary::-webkit-details-marker { display: none; }
.ix-faq summary::after { content: "+"; float: right; color: var(--accent); font-weight: 600; }
.ix-faq details[open] summary::after { content: "\2212"; }
.ix-faq p { margin: 0 0 18px; color: var(--slate-500); max-width: 68ch; }

/* ---------------------------------------------------------- the close */
.ix-close { background: var(--navy-900); color: #fff; padding: 56px 0; }
.ix-close h2 { color: #fff; font-size: var(--fs-h2); margin: 0 0 10px; text-wrap: balance; }
.ix-close p { color: #c6d0e0; font-size: var(--fs-lg); margin: 0 0 24px; max-width: 58ch; }

/* ---------------------------------------------------------- trust, and the foot */
.pub-trust { border-top: 1px solid var(--border); }
.pub-trust strong { color: var(--ink); font-family: var(--display); }
.pub-foot { background: var(--bg-alt); border-top: 1px solid var(--border); color: var(--slate-500); }
.pub-foot a { color: var(--navy-700); }

@media (max-width: 640px) {
  .ix-hero-in { padding: 44px 20px 38px; }
  .ix-band { padding: 40px 0; }
  .ix-hero-acts .ix-btn { width: 100%; text-align: center; }
}

/* ================= the customer's brief =================
   The question renderer is shared with the office wizard, which means it emits
   the internal design system's class names. This page never loads that
   stylesheet, and should not: it wears the IXXO brand because it is the first
   thing some customers ever see us make. So the same class names are given
   their IXXO clothes here, in IXXO's own tokens and faces.
   Board WEB-15. */
/* The reset now lives in public.css, where it belongs, and covers every public
   page rather than only this wizard (5.143.0, board PLT-06). Kept here as well
   so that a page loading ixxo.css without public.css is still correct. */
.bw, .bw *, .bw *::before, .bw *::after { box-sizing: border-box; }

.bw-steps {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 0 0 28px; padding: 0; list-style: none;
}
.bw-step {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 13px; border: 1px solid var(--border);
  border-radius: var(--radius); background: var(--bg);
  font-size: var(--fs-sm); color: var(--slate-500); cursor: pointer;
}
.bw-step:hover { border-color: var(--border-strong); color: var(--ink); }
.bw-step.is-on { border-color: var(--accent); color: var(--ink); background: var(--accent-tint); }
.bw-step.is-done .bw-n { background: var(--success); color: #fff; border-color: var(--success); }
.bw-n {
  display: inline-grid; place-items: center; width: 22px; height: 22px;
  border: 1px solid var(--border-strong); border-radius: 999px;
  font-size: 12px; font-variant-numeric: tabular-nums; color: var(--slate-500);
}
.bw-step.is-on .bw-n { background: var(--accent); border-color: var(--accent); color: #fff; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.bw-n .bw-tick { display: block; }
/* What green means, said in words under the strip (5.357.0). */
.bw-key { display: flex; align-items: center; gap: 6px; margin: 8px 0 0; font-size: var(--fs-sm); color: var(--slate-500); }
.bw-key-dot { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 999px; background: var(--success); color: #fff; flex: none; }

/* The questions sit on the page, not in a box. .pub-card is the right shape
   for a price card or a summary, where a border says "this is one thing among
   several". A form is the only thing on the page, so the border draws a line
   around nothing and reads as an artefact.
   No width and no side padding of its own either: the wrapper around it is
   already the container the hero above uses, and anything added here insets
   the form from the headline it belongs to. The only inset is the one both
   share, so every left edge on the page lines up. */
.bw-card {
  padding: 30px 0 26px;
  border: 0; box-shadow: none; background: transparent; border-radius: 0;
}

.bw-pane { display: none; }
.bw-pane.is-on { display: block; }
.bw-h {
  font-family: var(--display); font-size: var(--fs-h3);
  margin: 0 0 6px; color: var(--ink);
}
.bw-why { color: var(--slate-500); margin: 0 0 22px; max-width: 68ch; }

/* One question. Two to a row on a wide screen, one on a phone, and the long
   answers take the full width so nobody writes a paragraph into a slot. */
.form-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 32px; align-items: start;
}
/* Two to a row across the full width (5.165.2): three narrow columns left the
   right third of the page empty. A question that would stand alone in its row
   (SiteBriefView::alone) takes the whole row, its box half wide, its ready
   answers running across under it. */
.form-grid > .bq-alone { grid-column: 1 / -1; }
.form-grid > .bq-alone > .input { max-width: calc(50% - 16px); }
.bq-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
/* A grid or flex child will not shrink below its content without this, and a
   long answer would then widen the column and push the next one over. */
.form-grid > * { min-width: 0; }
.bq-wide { grid-column: 1 / -1; }
.bq-field > label, .field > label {
  font-weight: 600; font-size: var(--fs-sm); color: var(--ink);
}
/* Every label the same height, with or without its chip, so the boxes beside
   each other start on one line (5.165.2). */
.bq-field > label { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; min-height: 22px; line-height: 1.4; }
.bq-must {
  display: inline-block; margin-left: 0; padding: 0 7px; line-height: 18px;
  border-radius: 999px; background: var(--accent-soft); color: var(--accent-dark);
  font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
}
.hint { color: var(--slate-400); font-size: var(--fs-sm); }

.input, .bq-field input[type="text"], .bq-field input[type="email"],
.bq-field textarea, .bq-field select {
  width: 100%; padding: 10px 12px;
  font: inherit; color: var(--ink); background: var(--bg);
  border: 1px solid var(--border-strong); border-radius: var(--radius);
}
.input:focus, .bq-field textarea:focus, .bq-field select:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
textarea.input { min-height: 92px; resize: vertical; }

/* Choices read as things to press, not as a column of bare boxes. */
.bq-picks { display: flex; flex-wrap: wrap; gap: 10px; }
.bq-pick {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 13px; border: 1px solid var(--border-strong);
  border-radius: var(--radius); background: var(--bg);
  font-size: var(--fs-sm); cursor: pointer;
}
.bq-pick:hover { border-color: var(--accent); }
.bq-pick:has(input:checked) { border-color: var(--accent); background: var(--accent-tint); }

/* Fixed, so the columns are decided by the header rather than by whichever
   row happens to hold the longest word. */
.bq-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.bq-table td > .input { min-width: 0; }
.bq-table th:last-child, .bq-table td:last-child { width: 110px; padding-right: 0; }
.bq-table td:last-child .btn { width: 100%; justify-content: center; }
.bq-table th {
  text-align: left; font-size: var(--fs-sm); font-weight: 600;
  color: var(--slate-500); padding: 0 8px 6px 0;
}
.bq-table td { padding: 0 8px 8px 0; vertical-align: top; }
.table-wrap { overflow-x: auto; }

.pr-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 8px; }
.bw-foot {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 32px; padding-top: 22px; border-top: 1px solid var(--border);
}
.bw-foot .spacer { flex: 1; }

/* The renderer's buttons carry the app's names. Give them the brand's look
   rather than leaving a customer with the browser's default grey. */
.bw-foot .btn, .pr-actions .btn, .bq-field .btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; border-radius: var(--radius);
  border: 1px solid var(--border-strong); background: var(--bg);
  font: inherit; font-weight: 600; color: var(--ink); cursor: pointer;
}
.bw-foot .btn:hover, .pr-actions .btn:hover, .bq-field .btn:hover { border-color: var(--accent); }
.bw-foot .btn-primary, .pr-actions .btn-primary {
  background: var(--accent); border-color: var(--accent); color: #fff;
}
.bw-foot .btn-primary:hover, .pr-actions .btn-primary:hover {
  background: var(--accent-dark); border-color: var(--accent-dark);
}
.bw-foot .btn-ghost { background: transparent; border-color: transparent; color: var(--slate-500); }
.bw-foot .btn-ghost:hover { color: var(--ink); border-color: var(--border-strong); }
.btn-sm { padding: 7px 13px; font-size: var(--fs-sm); }
.muted { color: var(--slate-500); }
.small { font-size: var(--fs-sm); }

@media (max-width: 640px) {
  .bw-card { padding: 20px 0 18px; }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid > .bq-alone > .input { max-width: none; }
  .bw-steps { gap: 6px; }
  .bw-step { padding: 6px 10px; font-size: 13px; }

  /* A row of boxes becomes a row of labelled boxes (5.205.0). Three boxes and a button across 375 pixels left
     about forty pixels to type a sentence into, and the wrapper never scrolled because the table obediently fitted
     the width it was given. */
  .bq-table, .bq-table tbody, .bq-table tr, .bq-table td { display: block; width: auto; }
  .bq-table thead { display: none; }
  .bq-table tr { padding: 12px 0 4px; border-bottom: 1px solid var(--border); }
  .bq-table tr:first-child { padding-top: 0; }
  .bq-table td { padding: 0 0 10px; }
  .bq-table td::before {
    content: attr(data-label); display: block; margin-bottom: 4px;
    font-size: var(--fs-sm); font-weight: 600; color: var(--slate-500);
  }
  .bq-table th:last-child, .bq-table td:last-child { width: auto; }
  .bq-table td.bq-row-act .btn { width: auto; }

  /* Back and Next stay where a thumb is, on a step that is many screens long. */
  .bw-foot {
    position: sticky; bottom: 0; z-index: 5;
    margin-top: 24px; padding: 12px 0 14px; background: var(--bg);
  }
}

/* Everything pressed is big enough to press (5.205.0). The chips were 31 pixels tall and the Suggest button 20. */
.bq-sug-one, .bq-pick, .bw-step { min-height: 44px; }
.bq-sug-one { padding: 9px 14px; }
.bq-ai { min-height: 32px; padding: 4px 12px; font-size: var(--fs-sm); line-height: 1.2; }
.bw-step { padding: 9px 14px; font: inherit; font-size: var(--fs-sm); color: var(--slate-500); cursor: pointer; }
.bw-step.is-on { font-weight: 600; }

/* How far the answering has got, under the steps. */
.bw-how { margin: -18px 0 24px; color: var(--slate-500); font-size: var(--fs-sm); }

/* A question kept for the file, which changes nothing on the website. The office stylesheet had these rules and
   this page never loads it, so the customer read the note with no grey and no explanation (5.205.0). */
.bq-field.bq-off { opacity: 0.62; }
.bq-field.bq-off:focus-within { opacity: 1; }
.bq-none { color: var(--slate-500); font-style: italic; }

/* Read by a screen reader, not shown. */
.bq-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* A paragraph box that runs the whole width of a wide screen is unreadable, and a line of 140 characters is twice
   what anybody reads comfortably. */
.bq-wide textarea.input { max-width: 70ch; }

/* The helper's button, in the brand's clothes (5.137.0). */
.bq-ai {
  margin-left: 0; padding: 0 9px; line-height: 18px; border-radius: 999px;
  border: 1px solid var(--border-strong); background: var(--bg);
  font: inherit; font-size: 11px; font-weight: 600; color: var(--slate-500);
  cursor: pointer; vertical-align: middle;
}
.bq-ai:hover { border-color: var(--accent); color: var(--accent-dark); }
.bq-ai:disabled { opacity: 0.6; cursor: default; }
.is-drafted { border-color: var(--accent); background: var(--accent-tint); }
.is-drafted:focus { background: var(--bg); }

/* Ready answers, in the brand's clothes (5.137.0). */
.bq-sug { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.bq-sug-one {
  padding: 4px 11px; border-radius: 999px;
  border: 1px dashed var(--border-strong); background: transparent;
  font: inherit; font-size: var(--fs-sm); color: var(--slate-500); cursor: pointer;
}
.bq-sug-one:hover { border-style: solid; border-color: var(--accent); color: var(--accent-dark); }
.bq-sug-one.is-on {
  border-style: solid; border-color: var(--accent);
  background: var(--accent-soft); color: var(--accent-dark); font-weight: 600;
}

/* Colours, in the brand's clothes (5.137.0). */
.bq-pal { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; margin-top: 4px; }
.bq-pal-set {
  display: flex; flex-direction: column; gap: 6px; align-items: flex-start;
  padding: 8px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg); cursor: pointer; text-align: left; font: inherit;
}
.bq-pal-set:hover { border-color: var(--accent); }
.bq-pal-set.is-on { border-color: var(--accent); background: var(--accent-tint); }
.bq-pal-swatches { display: flex; width: 100%; border-radius: 3px; overflow: hidden; }
.bq-pal-dot { flex: 1; height: 28px; }
.bq-pal-name { font-size: var(--fs-sm); color: var(--slate-500); }
.bq-pal-set.is-on .bq-pal-name { color: var(--accent-dark); font-weight: 600; }
.bq-pal-own { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; }
.bq-pal-slot { display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-sm); color: var(--slate-500); }
.bq-pal-slot input[type="color"] {
  width: 66px; height: 36px; padding: 2px; cursor: pointer;
  border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--bg);
}

/* A statement inside the questions (5.137.0). */
.bq-note {
  margin: 0; padding: 13px 15px;
  border-left: 3px solid var(--accent); background: var(--accent-tint);
  border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--ink); font-size: var(--fs-sm); line-height: 1.6;
}

/* Saying that something is happening (5.141.0). */
@keyframes cc-turn { to { transform: rotate(360deg); } }
.is-busy { position: relative; pointer-events: none; opacity: 0.85; }
.is-busy::before {
  content: ''; display: inline-block; width: 12px; height: 12px;
  margin-right: 7px; vertical-align: -1px;
  border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%; animation: cc-turn 0.7s linear infinite;
}
@media (prefers-reduced-motion: reduce) { .is-busy::before { animation-duration: 2.4s; } }
.veil {
  position: fixed; inset: 0; z-index: 900;
  display: grid; place-items: center;
  background: rgba(20, 24, 30, 0.35);
}
.veil-box {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 22px; border-radius: 6px;
  background: #fff; border: 1px solid rgba(20,24,30,0.12);
  box-shadow: 0 10px 40px rgba(20,24,30,0.22); font-size: 14px;
  max-width: 80vw;
}
.veil-spin {
  flex: none; width: 16px; height: 16px;
  border: 2px solid #d8690f; border-right-color: transparent;
  border-radius: 50%; animation: cc-turn 0.7s linear infinite;
}
@media (prefers-reduced-motion: reduce) { .veil-spin { animation-duration: 2.4s; } }

/* ================= choosing a layout =================
   Drawn, not described. Four bars per card stand for the header, the picture,
   the words and the list, arranged the way that layout arranges them, so the
   choice is made by looking rather than by reading a word like "editorial"
   (5.144.0). */
.bq-lay { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin-top: 4px; }
.bq-lay-one {
  display: grid; gap: 7px; padding: 10px; text-align: left; cursor: pointer; font: inherit;
  border: 1px solid #cfd7e6; border-radius: 6px; background: #fff;
}
.bq-lay-one:hover { border-color: #d8690f; }
.bq-lay-one.is-on { border-color: #d8690f; box-shadow: inset 0 0 0 1px #d8690f; }
.bq-lay-art {
  display: grid; gap: 3px; height: 62px; padding: 5px;
  background: #f2f5f9; border-radius: 3px;
}
.bq-lay-art i { display: block; background: #c3cddb; border-radius: 2px; }
.bq-lay-art .a { background: #7d8aa1; }
/* Classic: a wide picture, then bands under it. */
.lay-classic { grid-template-rows: 1fr 1fr 1fr; }
.lay-classic .a { grid-row: 1; }
/* Side by side: words one side, picture the other. */
.lay-split { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.lay-split .a { grid-column: 1; grid-row: 1 / span 2; }
/* Bold: one heavy band and very little else. */
.lay-bold { grid-template-rows: 2fr 1fr; }
.lay-bold .a { background: #d8690f; }
.lay-bold .c, .lay-bold .d { display: none; }
/* Cards: everything in its own box. */
.lay-cards { grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr 1fr; }
.lay-cards .a { grid-column: 1 / span 2; }
/* Quiet: a narrow column with space around it. */
.lay-quiet { grid-template-columns: 1fr 2fr 1fr; grid-template-rows: 1fr 1fr; }
.lay-quiet .a { grid-column: 2; }
.lay-quiet .b { grid-column: 2; }
.lay-quiet .c, .lay-quiet .d { display: none; }
/* How the front page opens, in the new template (T3): words beside a picture, a full picture, words only. The
   picture is the dark block; the words are the light ones. */
.lay-open-split { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr 1fr; }
.lay-open-split .a { grid-column: 2; grid-row: 1 / span 3; }
.lay-open-split .b { grid-column: 1; grid-row: 1; }
.lay-open-split .c { grid-column: 1; grid-row: 2; }
.lay-open-split .d { display: none; }
.lay-open-full { grid-template-rows: 2fr 1fr; }
.lay-open-full .a { grid-row: 1 / span 2; grid-column: 1; }
.lay-open-full .b { grid-row: 2; grid-column: 1; margin: 0 40% 4px 6px; background: #f2f5f9; }
.lay-open-full .c, .lay-open-full .d { display: none; }
.lay-open-words { grid-template-rows: 1fr 1fr 1fr; }
.lay-open-words .a { background: #c3cddb; margin-right: 25%; }
.lay-open-words .b { margin-right: 45%; }
.lay-open-words .c { display: none; }
.bq-lay-name { font-weight: 600; font-size: 14px; }
.bq-lay-what { font-size: 12.5px; color: #5b6b85; line-height: 1.45; }
/* The two typefaces the look sets, named under the drawing (5.217.0). */
.bq-lay-face { display: block; margin-top: 6px; font-size: 11.5px; letter-spacing: .02em;
  text-transform: uppercase; color: var(--muted, #8794a8); }
.bq-lay-one.is-on .bq-lay-face { color: var(--accent, #F19209); }

/* The search page (5.158.0, board SELL-03). A numbered list of what actually
   happens, a list of what we refuse to do, and one price. Nothing on it is a
   card, because a card says "pick one" and there is nothing to pick here. */
.ix-steps { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 12px; max-width: 720px; }
.ix-steps li { display: flex; gap: 10px; align-items: baseline; font-size: 17px; line-height: 1.5; }
.ix-steps strong { color: var(--ix-accent, #d8690f); font-variant-numeric: tabular-nums; }
.ix-list { margin: 20px 0 0; padding-left: 20px; display: grid; gap: 10px; max-width: 680px; line-height: 1.55; }
.ix-price { font-size: 40px; font-weight: 600; margin: 16px 0 8px; }
.ix-price span { font-size: 17px; font-weight: 400; color: var(--ix-muted, #5b6472); }
.ix-small { font-size: 14px; color: var(--ix-muted, #5b6472); margin-top: 10px; }

/* The ixxo.com header and footer (5.165.0) are for the screen. A printed
   report or proposal starts with its own content, not the site menu. */
@media print {
  .utilitybar, .site-header, .site-footer { display: none !important; }
}

/* Every left edge on a public page lines up with the logo above it. ixxo.com's
   .container is inset 28px on every screen; the page wrappers were 20px, which
   left the headline 8px left of the logo (5.165.0). */
.pub-wrap, .pub-hero-in, .ix-hero-in, .ix-in, .ix-in-narrow { padding-left: 28px; padding-right: 28px; }

/* ================= ixxo.com's opening, not a navy band (5.165.0) =================
   The prices, search, audit, join and brief pages opened on a dark navy band.
   ixxo.com opens on light: a soft grey to white wash with two faint colour
   shapes, the headline in ink, a short orange rule before the eyebrow. These
   rules move every one of those pages onto it without rewriting them. */
.pub-hero, .ix-hero {
  position: relative; overflow: hidden; color: var(--slate-700);
  background: linear-gradient(180deg, var(--bg-alt), #fff 70%);
  border-bottom: 1px solid var(--border);
}
.pub-hero::before, .ix-hero::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none; border-radius: 50%;
  width: 640px; height: 640px; top: -160px; right: -120px;
  background: radial-gradient(closest-side, rgba(37,99,201,0.15), transparent 70%);
}
.pub-hero::after, .ix-hero::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none; border-radius: 50%;
  width: 540px; height: 540px; bottom: -180px; left: -120px;
  background: radial-gradient(closest-side, rgba(216,105,15,0.13), transparent 70%);
}
.pub-hero-in, .ix-hero-in { position: relative; z-index: 1; padding-top: 76px; padding-bottom: 64px; }
.pub-hero h1, .ix-hero h1 { color: var(--ink); max-width: 20ch; }
.pub-hero p, .ix-hero p.lead, .ix-hero .lead { color: var(--slate-500); }
.ix-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--body); font-size: var(--fs-eyebrow); font-weight: 700;
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--accent-dark);
}
.ix-eyebrow::before { content: ""; width: 18px; height: 2px; background: var(--accent); }
.ix-btn { font-size: var(--fs-base); padding: 14px 24px; }
.ix-btn-ghost { background: #fff; color: var(--ink); border-color: var(--border-strong); }
.ix-btn-ghost:hover { background: var(--bg-alt); border-color: var(--slate-400); }

/* The closing ask as ixxo.com's call to action card, not a navy band. */
.ix-close { background: transparent; color: var(--slate-700); padding: 64px 0; }
.ix-close .ix-close-card {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, #eaf1fb 0%, #ffffff 56%, #fdf1e6 100%);
  border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
  padding: 52px 48px;
}
.ix-close .ix-close-card::after {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--c-blue), var(--accent));
}
.ix-close h2 { color: var(--ink); }
.ix-close p { color: var(--slate-500); }
@media (max-width: 640px) {
  .pub-hero-in, .ix-hero-in { padding-top: 48px; padding-bottom: 40px; }
  .ix-close { padding: 40px 0; }
  .ix-close .ix-close-card { padding: 36px 22px; }
}

/* The brief's buttons at ixxo.com's button size, not the reading size (5.165.0). */
.bw-foot .btn, .pr-actions .btn, .bq-field .btn { font-size: var(--fs-sm); }

/* ================= one task pages (5.165.0) =================
   Booking, the seminar, stopping messages, the payment answer and the
   customer's own conversation. One column on the ixxo.com template, the
   form in ixxo.com's contact card, the button its large button. Shared here
   rather than in each page, so the five stay one design. */
.pub-single { max-width: var(--container); padding-top: 48px; padding-bottom: 64px; }
/* The width of the header on every page (5.165.2): text on the left, the form
   or the conversation on the right, one column below 980px. */
.pub-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px 56px; align-items: start; }
.pub-split.is-wide-left { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
.pub-split > * { min-width: 0; }
.pub-single > .pub-split:not(:first-child) { margin-top: 24px; }
.pub-split > * > .card:first-child, .pub-split > * > form.card:first-child { margin-top: 0; }
.pub-intro .muted { max-width: 56ch; }
.pub-single h1 { font-size: clamp(1.75rem, 1.35rem + 1.4vw, 2.4rem); line-height: 1.15; margin: 0 0 10px; }
.pub-single h1.is-ok { color: var(--c-green); }
.pub-single p { margin: 0 0 12px; }
.pub-single .muted { color: var(--slate-500); }
.pub-single .small { font-size: var(--fs-sm); }
.pub-single .card {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); padding: 24px; margin: 18px 0;
}
.pub-single .card > :last-child { margin-bottom: 0; }
.pub-single label.f { display: block; margin: 16px 0 6px; font-size: var(--fs-sm); font-weight: 600; color: var(--ink); }
.pub-single input[type=text], .pub-single input[type=email], .pub-single input[type=tel],
.pub-single select, .pub-single textarea {
  width: 100%; padding: 11px 13px; font-family: var(--body); font-size: var(--fs-base); color: var(--ink);
  background: #fff; border: 1px solid var(--border-strong); border-radius: var(--radius);
}
.pub-single textarea { min-height: 130px; resize: vertical; }
.pub-single :is(input, select, textarea):focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.pub-single button.go {
  display: inline-flex; align-items: center; justify-content: center; min-width: 240px; margin-top: 20px;
  padding: 14px 24px; border: 1px solid var(--accent); border-radius: var(--radius);
  background: var(--accent); color: #fff; font-family: var(--body); font-size: var(--fs-base); font-weight: 600; cursor: pointer;
  transition: background-color var(--dur) var(--ease);
}
.pub-single button.go:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
.pub-split .pub-work button.go { width: 100%; }
.pub-single .err, .pub-single .ok { border-radius: var(--radius); padding: 12px 14px; font-weight: 600; margin: 12px 0; }
.pub-single .err { background: var(--c-rose-bg); border: 1px solid var(--c-rose-bd); color: var(--c-rose); }
.pub-single .ok { background: var(--c-green-bg); border: 1px solid var(--c-green-bd); color: var(--c-green); }
.pub-single .slot {
  display: flex; align-items: center; gap: 10px; width: 100%; margin: 8px 0; padding: 14px 16px; text-align: left;
  border: 1px solid var(--border-strong); border-radius: var(--radius); background: #fff;
  font-family: var(--body); font-size: var(--fs-lg); font-weight: 600; color: var(--ink); cursor: pointer;
}
.pub-single .slot:hover { border-color: var(--accent); }
.pub-single .slot.on { border-color: var(--accent); background: var(--accent-tint); box-shadow: inset 0 0 0 1px var(--accent); }
.pub-single .hp { position: absolute; left: -9999px; }
@media (max-width: 980px) { .pub-split, .pub-split.is-wide-left { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .pub-single { padding-top: 32px; padding-bottom: 44px; } .pub-single .card { padding: 20px; } .pub-single button.go { width: 100%; min-width: 0; } }

/* The eyebrow inside an opening keeps its own small orange size and colour;
   public.css gives every paragraph of .pub-hero the lead's 18px (5.165.1). */
.pub-hero .ix-eyebrow, .ix-hero .ix-eyebrow { font-size: var(--fs-eyebrow); color: var(--accent-dark); margin: 0; max-width: none; }

/* The brief under ixxo.com's stylesheet (5.165.2). ixxo.com gives .field + .field a
   16px top margin and every input inside .field the full width with padding and
   a border. In the brief's grid that pushed the second box of a row 16px lower
   and stretched each tick box across its chip, wrapping the words. */
.form-grid > .field + .field { margin-top: 0; }
.bq-field .bq-pick input, .bq-field input[type="checkbox"], .bq-field input[type="radio"] {
  width: auto; padding: 0; margin: 0; border: 0; box-shadow: none; flex: none; accent-color: var(--accent);
}

/* Choices as tiles (5.165.3). Georgios: the tick chips looked unfinished. Each
   choice is now a tile of one width in a grid that fills the row, with its own
   drawn tick box at the start and the words beside it on the left; a chosen
   tile turns orange edged on a warm tint, so the choices read at a glance. */
.bq-field .bq-picks {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px;
}
.bq-field .bq-picks .bq-pick {
  display: flex; align-items: center; gap: 12px; min-height: 50px; margin: 0;
  padding: 12px 14px; border: 1px solid var(--border-strong); border-radius: var(--radius);
  background: #fff; color: var(--ink); font-size: var(--fs-sm); font-weight: 500; line-height: 1.35;
  text-align: left; cursor: pointer; transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.bq-field .bq-picks .bq-pick:hover { border-color: var(--accent); }
.bq-field .bq-picks .bq-pick:has(input:checked) {
  border-color: var(--accent); background: var(--accent-tint); box-shadow: inset 0 0 0 1px var(--accent);
}
.bq-field .bq-picks .bq-pick:has(input:disabled) { opacity: .5; cursor: not-allowed; }
.bq-field .bq-picks .bq-pick input {
  -webkit-appearance: none; appearance: none; display: grid; place-items: center; flex: none;
  width: 18px; height: 18px; margin: 0; padding: 0; border: 1.5px solid var(--slate-400); border-radius: 4px;
  background: #fff; cursor: inherit;
}
.bq-field .bq-picks .bq-pick input[type="radio"] { border-radius: 50%; }
.bq-field .bq-picks .bq-pick input:checked { background: var(--accent); border-color: var(--accent); }
.bq-field .bq-picks .bq-pick input[type="checkbox"]:checked::after {
  content: ""; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: translateY(-1px) rotate(45deg);
}
.bq-field .bq-picks .bq-pick input[type="radio"]:checked::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #fff; }
.bq-field .bq-picks .bq-pick input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 640px) { .bq-field .bq-picks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 380px) { .bq-field .bq-picks { grid-template-columns: 1fr; } }

/* Two questions side by side keep their boxes on one line even when one
   question is longer and wraps (5.165.3): the label of a paired question keeps
   room for two lines and sits on its box. A question with the row to itself
   needs no such room. */
.form-grid > .bq-field:not(.bq-wide):not(.bq-alone) > label { min-height: 40px; align-items: flex-end; align-content: flex-end; }
@media (max-width: 640px) { .form-grid > .bq-field:not(.bq-wide):not(.bq-alone) > label { min-height: 0; } }

/* Messages on the public pages (5.165.4). ajax.js reports a refused or failed
   request as a toast, styled only in the staff app; here it fell under the
   footer unseen. The same toast, in ixxo.com's navy, at the bottom of the
   screen. */
.toast-wrap {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 1000;
  display: flex; flex-direction: column; gap: 8px; width: max-content; max-width: 90vw; pointer-events: none;
}
.toast {
  padding: 11px 16px; border-radius: var(--radius); background: var(--navy-900); color: #fff;
  font-family: var(--body); font-size: var(--fs-sm); font-weight: 500; line-height: 1.45; box-shadow: var(--shadow-lg);
  opacity: 0; transform: translateY(8px); transition: opacity .2s ease, transform .2s ease;
}
.toast.show { opacity: 1; transform: none; }
.toast-error { background: var(--c-rose); }
@media (prefers-reduced-motion: reduce) { .toast { transition: none; } }
/* Why a Suggest press wrote nothing, said under its own question. */
.bq-ai-why {
  margin: 4px 0 0; padding: 8px 12px; border-radius: var(--radius);
  background: var(--c-rose-bg); border: 1px solid var(--c-rose-bd); color: var(--c-rose);
  font-size: var(--fs-sm); font-weight: 500; line-height: 1.45;
}

/* Live Edit pencil, admins only (5.167.0) */
.le-pencil { position: fixed; right: 16px; bottom: 16px; z-index: 900; display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 14px; border-radius: 999px; background: #16273f; color: #fff; font: 600 13px/1 system-ui, sans-serif;
  text-decoration: none; box-shadow: 0 6px 20px rgba(0,0,0,.25); }
.le-pencil:hover { background: #F19209; color: #16273f; }
.le-pencil svg { width: 15px; height: 15px; }
@media print { .le-pencil { display: none; } }

/* Formatting set with Live Edit (5.168.0) */
.rt-sm { font-size: .875em; }
.rt-lg { font-size: 1.25em; line-height: 1.35; }

/* ================= Events (5.170.0): the first impression of IXXO ================= */
.ev { --ev-navy: #16273f; --ev-orange: #f6921e; --ev-accent: #d8690f; --ev-accent-dark: #b6550a; --ev-ink: #1b2c46; --ev-slate: #5b6b85; --ev-soft: #eef2f8; --ev-alt: #f6f8fc; --ev-line: #e4e9f2; --ev-line-2: #cfd7e6; --ev-ok: #1f7a44; --ev-danger: #b42318; }
.ev-wrap { max-width: 1160px; margin: 0 auto; padding: 0 24px; }
.ev-hero { position: relative; padding: 56px 0 40px; background: radial-gradient(1000px 340px at 88% -30%, rgba(246, 146, 30, .16), transparent 60%), linear-gradient(180deg, #fbfcfe 0%, #fff 100%); border-bottom: 1px solid var(--ev-line); overflow: hidden; }
.ev-crumbs { font-size: 13.5px; color: #7d8aa1; margin-bottom: 18px; }
.ev-crumbs a { color: var(--ev-accent-dark); text-decoration: none; }
.ev-kicker { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.ev-chip { display: inline-flex; align-items: center; padding: 4px 11px; border-radius: 999px; font-size: 13px; font-weight: 600; line-height: 1.3; }
.ev-chip-orange { background: #fcefe2; color: var(--ev-accent-dark); }
.ev-chip-navy { background: var(--ev-soft); color: #1f3252; }
.ev-chip-ok { background: #e6f4ec; color: var(--ev-ok); }
.ev-chip-glass { background: rgba(255, 255, 255, .14); color: #fff; }
.ev-title { font-family: var(--display); font-weight: 700; font-size: clamp(36px, 5.4vw, 64px); line-height: 1.02; letter-spacing: -0.028em; color: var(--ev-navy); margin: 0; max-width: 18ch; text-wrap: balance; }
.ev-lead { font-size: clamp(16px, 1.6vw, 19px); color: var(--ev-slate); max-width: 60ch; margin: 18px 0 0; line-height: 1.55; }
.ev-hand { position: absolute; right: 6%; top: 58px; font-family: "IXXO Caveat", "Comic Sans MS", cursive; font-size: 32px; color: var(--ev-accent-dark); transform: rotate(-6deg); }
.ev-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 44px; padding-top: 34px; padding-bottom: 64px; align-items: start; }
.ev-main h2 { font-family: var(--display); font-weight: 700; font-size: 24px; color: var(--ev-navy); margin: 34px 0 14px; letter-spacing: -0.01em; }
.ev-good { list-style: none; margin: 0; padding: 18px 20px; background: var(--ev-alt); border: 1px solid var(--ev-line); border-radius: 8px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 22px; }
.ev-good li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; color: var(--ev-ink); }
/* Line icons only: the logos and the QR keep their own shapes and sizes. */
.ev svg[aria-hidden="true"] { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ev-good svg { color: var(--ev-accent); margin-top: 2px; }
.ev-timeline { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--ev-line); }
.ev-timeline li { position: relative; padding: 0 0 18px 24px; }
.ev-timeline li::before { content: ""; position: absolute; left: -7px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 2px solid var(--ev-accent); }
.ev-timeline time { display: block; font-variant-numeric: tabular-nums; font-size: 13.5px; font-weight: 600; color: var(--ev-accent-dark); }
.ev-timeline b { font-family: var(--display); font-weight: 600; font-size: 16.5px; color: var(--ev-ink); }
.ev-timeline span { display: block; color: var(--ev-slate); font-size: 14.5px; }
.ev-host { display: flex; gap: 14px; align-items: center; }
.ev-avatar { width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, #1f3252, var(--ev-navy)); color: #fff; display: grid; place-items: center; font-family: var(--display); font-weight: 700; font-size: 20px; }
.ev-host b { font-family: var(--display); color: var(--ev-navy); font-size: 17px; }
.ev-host span { display: block; color: var(--ev-slate); font-size: 14px; }
.ev-side { position: sticky; top: 20px; display: grid; gap: 14px; }
.ev-card { border: 1px solid var(--ev-line-2); border-radius: 10px; padding: 16px; background: #fff; box-shadow: 0 18px 40px -28px rgba(22, 39, 63, .45); }
.ev-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 18px; border-radius: 6px; border: 1px solid transparent; font-family: var(--display); font-weight: 600; font-size: 15.5px; text-decoration: none; cursor: pointer; transition: background-color .15s, transform .15s, box-shadow .15s; }
.ev-btn-primary { background: var(--ev-accent); color: #fff; box-shadow: 0 10px 24px -14px rgba(216, 105, 15, .9); }
.ev-btn-primary:hover { background: var(--ev-accent-dark); transform: translateY(-1px); }
.ev-btn-ghost { background: #fff; color: var(--ev-ink); border-color: var(--ev-line-2); }
.ev-btn-ghost:hover { border-color: var(--ev-slate); }
.ev-btn-block { width: 100%; }
.ev-btn:disabled { opacity: .6; cursor: default; transform: none; }
.ev-under { margin: 8px 0 0; text-align: center; font-size: 13px; color: #7d8aa1; }
.ev-closed { margin: 0; color: var(--ev-slate); }
.ev-date { display: flex; gap: 16px; align-items: center; border: 1px solid var(--ev-line); border-radius: 10px; padding: 14px 16px; background: #fff; }
.ev-day { font-family: var(--display); font-weight: 700; font-size: 48px; line-height: 1; color: var(--ev-navy); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.ev-when b { display: block; font-family: var(--display); font-weight: 600; color: var(--ev-ink); }
.ev-when span { color: var(--ev-slate); font-size: 14.5px; font-variant-numeric: tabular-nums; }
.ev-seats { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ev-slate); }
.ev-seats b { color: var(--ev-ink); }
.ev-bar { flex: 1; height: 6px; border-radius: 99px; background: var(--ev-soft); overflow: hidden; }
.ev-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--ev-orange), var(--ev-accent)); border-radius: 99px; }
.ev-two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ev-two .ev-btn { padding: 11px 10px; font-size: 14.5px; }
.ev-loc { border-top: 1px solid var(--ev-line); padding-top: 14px; font-size: 14.5px; color: var(--ev-slate); display: grid; gap: 2px; }
.ev-loc b { font-family: var(--display); font-weight: 600; font-size: 16px; color: var(--ev-ink); }
.ev-contact { margin: 0; font-size: 14px; color: var(--ev-slate); }
.ev-contact a { color: var(--ev-accent-dark); }
.ev-lost summary, .ev-free summary { cursor: pointer; font-size: 14px; color: var(--ev-accent-dark); font-weight: 600; }
.ev-lost form { display: grid; gap: 8px; margin-top: 10px; }
.ev-lost input, .ev-form input { width: 100%; border: 1px solid var(--ev-line-2); border-radius: 6px; padding: 11px 12px; font: inherit; color: var(--ev-ink); background: #fff; }
.ev-lost input:focus, .ev-form input:focus { outline: 2px solid var(--ev-orange); outline-offset: 1px; border-color: transparent; }
/* The door on a ticket (5.192.0), only for the office: the result as large as a phone allows, in its colour. */
.ev-door { display: grid; gap: 6px; padding: 20px 22px; margin-bottom: 18px; border-radius: 16px; color: #fff; background: #16273f; }
.ev-door-staff { background: #f6f8fb; color: #16273f; border: 1px solid #e3e7ee; }
.ev-door-in { background: #1f7a44; }
.ev-door-already, .ev-door-notday { background: #b7791f; }
.ev-door-waiting, .ev-door-freed, .ev-door-other, .ev-door-unknown { background: #c0344b; }
.ev-door-big { font-size: 30px; line-height: 1.1; font-weight: 800; }
.ev-door-who { font-size: 20px; font-weight: 700; }
.ev-door-note { font-size: 15px; opacity: .92; }
/* The mobile with its country code (5.190.5): the code beside the number, the same height and border. */
.ev-phone { display: flex; gap: 8px; }
.ev-phone select { flex: 0 0 136px; min-width: 0; border: 1px solid var(--ev-line-2); border-radius: 6px; padding: 11px 8px; font: inherit; color: var(--ev-ink); background: #fff; }
.ev-phone select:focus { outline: 2px solid var(--ev-orange); outline-offset: 1px; border-color: transparent; }
.ev-form .ev-phone input { flex: 1; min-width: 0; }
.ev-form { display: grid; gap: 12px; animation: ev-rise .35s ease both; }
.ev-form-h { font-family: var(--display); font-weight: 700; font-size: 20px; color: var(--ev-navy); }
.ev-form label { display: grid; gap: 5px; font-size: 13.5px; font-weight: 600; color: var(--ev-ink); }
.ev-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.ev-taps-l { font-size: 13.5px; font-weight: 600; color: var(--ev-ink); margin-bottom: -4px; }
.ev-taps { display: flex; flex-wrap: wrap; gap: 6px; }
.ev-taps button { border: 1px solid var(--ev-line-2); background: #fff; color: var(--ev-ink); border-radius: 999px; padding: 7px 12px; font: inherit; font-size: 13.5px; cursor: pointer; }
.ev-taps button[aria-pressed="true"] { background: var(--ev-navy); border-color: var(--ev-navy); color: #fff; }
.ev-colleague { display: grid; gap: 8px; border-top: 1px dashed var(--ev-line-2); padding-top: 10px; }
.ev-add { background: none; border: 0; padding: 0; color: var(--ev-accent-dark); font: inherit; font-weight: 600; font-size: 14px; text-align: left; cursor: pointer; }
.ev-form .ev-tick { display: flex; gap: 8px; align-items: center; font-weight: 400; color: var(--ev-slate); }
.ev-form .ev-tick input { width: auto; }
.ev-err { margin: 0; color: #b42318; font-size: 14px; }
.ev-done { display: grid; gap: 12px; justify-items: center; text-align: center; animation: ev-rise .35s ease both; }
/* As specific as the icon rule above, or its 18px wins and the padding leaves the tick 2px wide (5.316.0). */
.ev-done svg, .ev .ev-done svg[aria-hidden="true"] { width: 40px; height: 40px; color: #fff; background: var(--ev-ok); border-radius: 50%; padding: 8px; stroke-width: 2.6; }
.ev-done p { margin: 0; font-size: 15.5px; color: var(--ev-ink); }
.ev-sticky { display: none; }
.ev-list { display: grid; gap: 12px; padding-top: 30px; padding-bottom: 64px; }
.ev-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px; align-items: center; text-decoration: none; color: inherit; border: 1px solid var(--ev-line); border-radius: 12px; padding: 14px 18px; background: #fff; transition: border-color .15s, box-shadow .15s, transform .15s; }
.ev-item:hover { border-color: var(--ev-line-2); box-shadow: 0 18px 40px -30px rgba(22, 39, 63, .5); transform: translateY(-1px); }
.ev-item .ev-date { border: 0; padding: 0; }
.ev-item-body { display: grid; gap: 4px; justify-items: start; }
.ev-item-body b { font-family: var(--display); font-weight: 700; font-size: 19px; color: var(--ev-navy); }
.ev-item-body span:last-child { color: var(--ev-slate); font-size: 14.5px; }
.ev-item-seats { font-size: 14px; font-weight: 600; color: var(--ev-accent-dark); white-space: nowrap; }

/* the ticket page */
.ev-pass-page { background: var(--ev-alt); }
.ev-pass-wrap { max-width: 480px; padding-top: 34px; padding-bottom: 64px; display: grid; gap: 16px; }
.ev-note { background: #fff; border: 1px solid var(--ev-line); border-left: 3px solid var(--ev-orange); border-radius: 8px; padding: 12px 14px; color: var(--ev-ink); font-size: 14.5px; }
.ev-note-ok { border-left-color: var(--ev-ok); }
.ev-note a { color: var(--ev-accent-dark); }
.ev-ticket { background: #fff; border-radius: 18px; overflow: hidden; box-shadow: 0 28px 60px -32px rgba(22, 39, 63, .6), 0 0 0 1px var(--ev-line); animation: ev-rise .45s ease both; }
.ev-ticket-off { opacity: .72; }
.ev-ticket-top { position: relative; background: var(--ev-navy); color: #fff; padding: 18px 20px 20px; overflow: hidden; }
.ev-ticket-top::after { content: ""; position: absolute; right: -50px; top: -70px; width: 210px; height: 210px; border-radius: 50%; background: radial-gradient(circle, rgba(246, 146, 30, .38), transparent 65%); }
.ev-ticket-brand { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: center; }
.ev-ticket-top h1 { position: relative; z-index: 1; font-family: var(--display); font-weight: 700; font-size: 26px; line-height: 1.1; margin: 16px 0 4px; letter-spacing: -0.015em; color: #fff; }
.ev-ticket-top p { position: relative; z-index: 1; margin: 0; color: #b9c4d6; font-size: 14.5px; }
.ev-ticket-mid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; padding: 18px 20px; }
.ev-ticket-mid span { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .09em; color: #7d8aa1; font-weight: 600; }
.ev-ticket-mid b { font-family: var(--display); font-weight: 600; font-size: 16px; color: var(--ev-ink); font-variant-numeric: tabular-nums; }
.ev-ticket-mid em { display: block; font-style: normal; color: var(--ev-slate); font-size: 13.5px; }
.ev-span { grid-column: 1 / -1; }
.ev-perf { position: relative; border-top: 2px dashed var(--ev-line-2); margin: 0 16px; }
.ev-perf::before, .ev-perf::after { content: ""; position: absolute; top: -13px; width: 24px; height: 24px; border-radius: 50%; background: var(--ev-alt); }
.ev-perf::before { left: -30px; } .ev-perf::after { right: -30px; }
.ev-ticket-qr { display: grid; justify-items: center; gap: 8px; padding: 20px; }
.ev-qr svg { width: 220px; height: 220px; display: block; stroke: none; }
.ev-code { font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace; letter-spacing: .2em; color: var(--ev-slate); font-size: 14px; text-align: center; }
.ev-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ev-actions .ev-btn-primary { grid-column: 1 / -1; }
.ev-free { background: #fff; border: 1px solid var(--ev-line); border-radius: 8px; padding: 12px 14px; }
.ev-free p { margin: 10px 0; color: var(--ev-slate); font-size: 14px; }
@keyframes ev-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ev *, .ev-ticket, .ev-form, .ev-done { animation: none !important; transition: none !important; } }
@media (max-width: 980px) {
  .ev-grid { grid-template-columns: 1fr; gap: 26px; }
  .ev-side { position: static; order: -1; }
  .ev-good { grid-template-columns: 1fr; }
  .ev-hand { display: none; }
  .ev-sticky { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 800; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .96); border-top: 1px solid var(--ev-line); box-shadow: 0 -10px 30px -20px rgba(22, 39, 63, .5); }
  .ev { padding-bottom: 72px; }
  .ev-item { grid-template-columns: auto minmax(0, 1fr); }
  .ev-item-seats { grid-column: 2; }
}
@media print { .ev-sticky, .ev-actions, .ev-free, .ev-lost { display: none !important; } }
.ev-brandline { margin-bottom: 14px; }
.ev-dc-word { display: block; height: 34px; width: auto; }
.ev-ticket-top h1 .ev-dc-shield { vertical-align: -4px; margin-right: 4px; }
.ev .ev-dc-word { display: block; width: auto; height: 38px; }
.ev .ev-logo { display: block; width: auto; }
.ev .ev-dc-shield { display: inline-block; }

/* the hero with the ticket they will get beside the title */
.ev-hero-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .9fr); gap: 40px; align-items: center; }
.ev-count { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; padding: 8px 14px; border-radius: 999px; background: var(--ev-navy); color: #fff; font-weight: 600; font-size: 14px; }
.ev-count i { width: 8px; height: 8px; border-radius: 50%; background: var(--ev-orange); box-shadow: 0 0 0 0 rgba(246, 146, 30, .7); animation: ev-pulse 2s infinite; }
@keyframes ev-pulse { 0% { box-shadow: 0 0 0 0 rgba(246, 146, 30, .6); } 70% { box-shadow: 0 0 0 10px rgba(246, 146, 30, 0); } 100% { box-shadow: 0 0 0 0 rgba(246, 146, 30, 0); } }
.ev-preview { position: relative; justify-self: center; width: min(360px, 100%); transform: rotate(3deg); transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.ev-preview:hover { transform: rotate(0deg) translateY(-4px); }
.ev-preview::before { content: ""; position: absolute; inset: 18px -14px -18px 14px; border-radius: 18px; background: linear-gradient(135deg, rgba(246, 146, 30, .35), rgba(22, 39, 63, .15)); filter: blur(18px); z-index: -1; }
.ev-preview .ev-ticket { animation: ev-rise .7s .1s ease both; }
.ev-preview .ev-qr svg { width: 150px; height: 150px; }
.ev-preview-cap { text-align: center; margin: 14px 0 0; font-size: 13px; color: var(--ev-slate); transform: rotate(-3deg); }
.ev-hero-list .ev-hero-grid { grid-template-columns: 1fr; }

/* the few details, folded under the form */
.ev-more { border-top: 1px solid var(--ev-line); padding-top: 10px; }
.ev-more summary { cursor: pointer; font-size: 14px; font-weight: 600; color: var(--ev-navy); list-style: none; display: flex; justify-content: space-between; align-items: center; }
.ev-more summary::-webkit-details-marker { display: none; }
.ev-more summary::after { content: "+"; font-size: 20px; color: var(--ev-accent-dark); line-height: 1; }
.ev-more[open] summary::after { content: "\2212"; }
.ev-more summary small { display: block; font-weight: 400; color: #7d8aa1; font-size: 12.5px; }
.ev-more-body { display: grid; gap: 12px; margin-top: 12px; }
.ev-q { display: grid; gap: 6px; }
.ev-q > span { font-size: 13.5px; font-weight: 600; color: var(--ev-ink); }
.ev-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.ev-pills label { position: relative; }
.ev-pills input { position: absolute; opacity: 0; pointer-events: none; }
.ev-pills label span { display: inline-block; border: 1px solid var(--ev-line-2); background: #fff; color: var(--ev-ink); border-radius: 999px; padding: 6px 11px; font-size: 13px; font-weight: 500; cursor: pointer; }
.ev-pills input:checked + span { background: var(--ev-navy); border-color: var(--ev-navy); color: #fff; }
.ev-pills input:focus-visible + span { outline: 2px solid var(--ev-orange); outline-offset: 2px; }
.ev-sticky[hidden] { display: none !important; }
@media (max-width: 980px) {
  .ev-hero-grid { grid-template-columns: 1fr; gap: 26px; }
  .ev-preview { width: min(320px, 92%); transform: rotate(0deg); }
  .ev-preview-cap { transform: none; }
}

/* ================= Events 5.171.0: the Standard template, each event with its own words and pictures ================= */
.ev-std { background: #fff; }
.ev-previewbar { background: var(--ev-navy); color: #fff; text-align: center; padding: 10px 16px; font-size: 14px; }
.ev-previewbar a { color: var(--ev-orange); font-weight: 600; margin-left: 8px; }
.ev .ev-hero2 .container { padding-block: 52px 64px; align-items: center; }
.ev-hero-copy { min-width: 0; }
.ev-hero2 .ev-crumbs { margin-bottom: 14px; }
.ev-brandline { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; min-height: 30px; flex-wrap: wrap; }
.ev-lockup { display: inline-flex; align-items: flex-end; gap: 8px; }
.ev-lockup b { font-family: var(--display); font-weight: 700; font-size: 24px; line-height: .9; color: var(--ev-navy); letter-spacing: -0.01em; }
.ev-plus { color: #9aa6ba; font-size: 22px; font-weight: 300; }
.ev .ev-h1 { margin-top: 14px; max-width: 17ch; }
.ev-hero2 .lead { margin-top: 18px; }
.ev-hero-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.ev .ev-chip { gap: 6px; }
.ev .ev-chip svg[aria-hidden="true"] { width: 14px; height: 14px; }
.ev-hero2 .btn-row { margin-top: 26px; }
.ev .btn svg[aria-hidden="true"] { width: 17px; height: 17px; }
.ev-hero-visual { position: relative; display: grid; justify-items: center; min-width: 0; }
.ev-hero-visual.has-photo { justify-items: stretch; padding: 0 0 64px 34px; }
.ev-photo { margin: 0; border-radius: 6px; overflow: hidden; box-shadow: var(--shadow-lg); aspect-ratio: 4 / 3; background: var(--ev-soft); }
.ev-photo img { width: 100%; height: 100%; object-fit: cover; }
.ev-hero-visual.has-photo .ev-preview { position: absolute; left: 0; bottom: 0; width: 214px; transform: rotate(-4deg); }
.ev-hero-visual.has-photo .ev-preview:hover { transform: rotate(0deg) translateY(-4px); }
.ev-hero-visual.has-photo .ev-ticket-mid, .ev-hero-visual.has-photo .ev-preview-cap, .ev-hero-visual.has-photo .ev-perf { display: none; }
.ev-hero-visual.has-photo .ev-ticket-top { padding: 12px 14px 14px; }
.ev-hero-visual.has-photo .ev-ticket-qr { padding: 12px; }
.ev .ev-hero-visual.has-photo .ev-qr svg { width: 92px; height: 92px; }
.ev-ticket-top p.ev-ticket-title { position: relative; z-index: 1; font-family: var(--display); font-weight: 700; font-size: 22px; line-height: 1.12; margin: 14px 0 4px; letter-spacing: -0.015em; color: #fff; }
.ev-hero-visual.has-photo .ev-ticket-top p.ev-ticket-title { font-size: 16px; margin-top: 10px; }

.ev-facts { background: var(--ev-navy); color: #fff; }
.ev-factgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ev-fact { display: flex; gap: 14px; align-items: flex-start; padding: 24px 22px; border-left: 1px solid rgba(255, 255, 255, .12); min-width: 0; }
.ev-fact:first-child { border-left: 0; padding-left: 0; }
.ev-fact > div { min-width: 0; }
.ev-fact-ic { width: 42px; height: 42px; border-radius: 6px; background: rgba(246, 146, 30, .16); color: var(--ev-orange); display: grid; place-items: center; flex: none; }
.ev .ev-fact-ic svg[aria-hidden="true"] { width: 21px; height: 21px; }
.ev-fact small { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: #9fb0c8; font-weight: 700; }
.ev-fact b { display: block; font-family: var(--display); font-weight: 600; font-size: 18px; line-height: 1.25; margin-top: 3px; color: #fff; overflow-wrap: anywhere; }
.ev-fact span { display: block; font-size: 13.5px; color: #b9c4d6; margin-top: 2px; }
.ev-goodline { list-style: none; margin: 0; padding: 16px 0 20px; border-top: 1px solid rgba(255, 255, 255, .12); display: flex; flex-wrap: wrap; gap: 8px 26px; }
.ev-goodline li { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; color: #dfe6f0; }
.ev .ev-goodline svg[aria-hidden="true"] { width: 16px; height: 16px; color: var(--ev-orange); }

.ev-zone-s { padding: 68px 0 76px; }
.ev-zone { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 60px; align-items: start; }
.ev-main { display: grid; gap: 60px; min-width: 0; }
.ev-aside { position: sticky; top: calc(var(--nav-h, 66px) + 18px); display: grid; gap: 16px; }
.ev-aside-top, .ev-aside-rest { display: grid; gap: 14px; scroll-margin-top: calc(var(--nav-h, 66px) + 18px); }
.ev .ev-h2 { margin-top: 12px; }
.ev-p { margin: 16px 0 0; font-size: 17px; line-height: 1.7; color: var(--slate-700); max-width: 66ch; }
.ev .ev-repl { justify-content: flex-start; margin-top: 22px; }
.ev-wide { margin: 26px 0 0; border-radius: 6px; overflow: hidden; aspect-ratio: 16 / 9; box-shadow: var(--shadow-md); background: var(--ev-soft); }
.ev-wide img { width: 100%; height: 100%; object-fit: cover; }

.ev-hand-h { font-size: clamp(30px, 3.4vw, 42px); font-weight: 700; margin: 0; color: var(--ink); }
.ev .ev-hand-h .hand-mark svg { width: 108%; height: .46em; stroke: var(--accent); fill: none; stroke-width: 4; stroke-dasharray: none; stroke-dashoffset: 0; }
.ev-agenda-note { margin-top: 20px; }
.ev-rows { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 10px; }
.ev-row { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 14px 18px; background: #fff; border: 1px solid var(--border); border-radius: 6px; box-shadow: var(--shadow-xs); transition: border-color .2s, box-shadow .2s, transform .2s; }
.ev-row:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.ev-row-ic { width: 48px; height: 48px; border-radius: 6px; display: grid; place-items: center; border: 1px solid transparent; }
.ev .ev-row-ic svg[aria-hidden="true"] { width: 22px; height: 22px; }
.ev-row-body { min-width: 0; }
.ev-row-body b { display: block; font-family: var(--display); font-weight: 600; font-size: 17px; color: var(--ink); line-height: 1.3; }
.ev-row-body span { display: block; color: var(--slate-500); font-size: 14.5px; margin-top: 3px; line-height: 1.5; }
.ev-row-time { font-variant-numeric: tabular-nums; font-family: var(--display); font-weight: 600; color: var(--ink); white-space: nowrap; font-size: 16px; }
.ev-row-time i { font-style: normal; color: #b3bfd1; margin: 0 6px; }

.ev-h3 { font-size: 26px; font-weight: 700; margin: 0 0 18px; color: var(--ink); }
.ev-people { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.ev-people-one { grid-template-columns: minmax(0, 520px); }
.ev-person { display: flex; gap: 16px; align-items: flex-start; padding: 18px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-alt); }
.ev-person-ph { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; flex: none; }
.ev-initial { display: grid; place-items: center; background: linear-gradient(135deg, #294064, var(--ev-navy)); color: #fff; font-family: var(--display); font-weight: 700; font-size: 26px; }
.ev-person b { display: block; font-family: var(--display); font-size: 17px; color: var(--ink); }
.ev-person-role { display: block; color: var(--accent-dark); font-size: 13.5px; font-weight: 600; margin-top: 2px; }
.ev-person p { margin: 8px 0 0; font-size: 14.5px; color: var(--slate-500); line-height: 1.55; }
.ev-partner { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 26px; align-items: center; padding: 24px; border: 1px solid var(--border); border-radius: 6px; background: #fff; box-shadow: var(--shadow-sm); }
.ev-partner-logo { position: relative; aspect-ratio: 2 / 1; }
.ev-partner-logo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.ev-partner h3 { font-size: 21px; margin: 8px 0 0; color: var(--ink); }
.ev-partner p { margin: 10px 0 0; color: var(--slate-500); font-size: 14.5px; line-height: 1.6; }
.ev-partner .btn-link { margin-top: 12px; }

.ev-datecard { display: flex; gap: 16px; align-items: center; padding: 16px 18px; border: 1px solid var(--border); border-radius: 10px; background: #fff; }
.ev-datecard-day { font-family: var(--display); font-weight: 700; font-size: 54px; line-height: 1; color: var(--ev-navy); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.ev-datecard-rest { display: grid; gap: 1px; }
.ev-datecard-rest b { font-family: var(--display); font-weight: 600; font-size: 16px; color: var(--ink); }
.ev-datecard-rest span { color: var(--slate-500); font-size: 14px; }
.ev-datecard-rest strong { font-family: var(--display); font-weight: 600; font-size: 15px; color: var(--accent-dark); font-variant-numeric: tabular-nums; margin-top: 3px; }
.ev-addcal { display: grid; gap: 8px; }
.ev-addcal-l { font-size: 13px; color: var(--slate-500); font-weight: 600; }
.ev-addcal-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ev-cal { display: grid; justify-items: center; gap: 6px; padding: 12px 6px 10px; border: 1px solid var(--border); border-radius: 8px; background: #fff; color: var(--ink); text-decoration: none; font-size: 12.5px; font-weight: 600; transition: border-color .15s, box-shadow .15s, transform .15s; }
.ev-cal:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.ev .ev-brand { width: 24px; height: 24px; display: block; }
.ev-side-block { display: grid; gap: 8px; padding-top: 18px; border-top: 1px solid var(--border); }
.ev-side-block h3 { font-size: 17px; font-weight: 700; color: var(--ink); margin: 0; }
.ev-venue-name { font-family: var(--display); font-weight: 600; color: var(--ink); }
.ev-venue-addr { color: var(--slate-500); font-size: 14px; }
.ev-venue-note { margin: 2px 0 0; padding: 9px 11px; background: var(--bg-alt); border-radius: 6px; font-size: 13.5px; color: var(--slate-700); }
.ev-venue-visual { display: block; margin-top: 6px; border-radius: 8px; overflow: hidden; border: 1px solid var(--border); aspect-ratio: 3 / 2; background: var(--ev-soft); }
.ev-venue-visual img, .ev .ev-venue-visual .ev-map { width: 100%; height: 100%; display: block; object-fit: cover; }
.ev-map-pulse { transform-box: fill-box; transform-origin: center; animation: ev-mapping 2.4s ease-out infinite; }
@keyframes ev-mapping { from { transform: scale(.6); opacity: .55; } to { transform: scale(1.9); opacity: 0; } }
.ev-mail { display: inline-flex; gap: 8px; align-items: center; color: var(--accent-dark); font-weight: 600; font-size: 14.5px; overflow-wrap: anywhere; }
.ev .ev-mail svg[aria-hidden="true"], .ev .ev-btn svg[aria-hidden="true"] { width: 16px; height: 16px; }
.ev .ev-aside .ev-lost { padding-top: 14px; border-top: 1px solid var(--border); }

.ev-see .h2 { margin-top: 14px; }
.ev-see .lead { margin-top: 16px; }
.ev .f-list svg[aria-hidden="true"] { width: 19px; height: 19px; color: var(--accent); margin-top: 2px; }
.ev-shot { margin: 0; width: 100%; border-radius: 6px; overflow: hidden; box-shadow: var(--shadow-lg); aspect-ratio: 4 / 3; background: var(--ev-soft); }
.ev-shot img { width: 100%; height: 100%; object-fit: cover; }
.ev .f-media { display: grid; justify-items: center; }
.ev-panel { width: 100%; max-width: 440px; }
.ev .sp-region .grow small { display: block; font-size: 11.5px; color: var(--slate-500); font-weight: 400; margin-top: 1px; }
.ev-sp-ic { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 4px; border: 1px solid; flex: none; }
.ev .ev-sp-ic svg[aria-hidden="true"] { width: 16px; height: 16px; }
.ev-sp-ok { color: var(--c-green); display: inline-flex; }
.ev .ev-sp-ok svg[aria-hidden="true"] { width: 16px; height: 16px; stroke-width: 2.4; color: var(--c-green); }
.ev .sp-cert svg[aria-hidden="true"] { color: var(--c-blue); }
.ev-stack { display: grid; gap: 16px; width: 100%; max-width: 480px; }
.ev-stack .ev-panel:nth-child(2) { justify-self: end; }
.ev-hubpanel .panel-head { gap: 10px; flex-wrap: wrap; }
.ev-hub-company { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }
.ev-hub-logo { width: 40px; height: 40px; border-radius: 6px; background: var(--ev-navy); color: #fff; display: grid; place-items: center; font-family: var(--display); font-weight: 700; font-size: 14px; flex: none; }
.ev-hub-company b { display: block; color: var(--ink); font-family: var(--display); font-size: 15px; }
.ev-hub-company small { color: var(--slate-500); font-size: 12.5px; }
.ev-hub-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ev-hub-list li { display: flex; gap: 10px; align-items: center; padding: 9px 11px; border: 1px solid var(--border); border-radius: 4px; background: #fff; font-size: 14px; color: var(--ink); }
.ev-hub-list li > span:first-of-type { flex: 1; }
.ev .ev-hub-list svg[aria-hidden="true"] { width: 16px; height: 16px; color: var(--c-blue); }
.ev-hub-foot { display: flex; gap: 8px; align-items: center; margin-top: 12px; padding: 10px 12px; border: 1px dashed var(--c-blue-bd); background: var(--c-blue-bg); border-radius: 4px; font-size: 13px; color: var(--ink); }
.ev .ev-hub-foot svg[aria-hidden="true"] { color: var(--c-blue); }
.ev-who .apps-grid { max-width: 1080px; margin-inline: auto; }
.ev .apptile .ic svg[aria-hidden="true"] { width: 19px; height: 19px; }
@media (min-width: 981px) {
  .ev-tiles-1 { grid-template-columns: minmax(0, 360px); justify-content: center; }
  .ev-tiles-2 { grid-template-columns: repeat(2, minmax(0, 340px)); justify-content: center; }
  .ev-tiles-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.ev-photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ev-photos-1 { grid-template-columns: minmax(0, 760px); justify-content: center; }
.ev-photos-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ev-photos figure { margin: 0; }
.ev-photos img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 6px; box-shadow: var(--shadow-sm); display: block; }
.ev-photos figcaption { margin-top: 8px; font-size: 13.5px; color: var(--slate-500); }
.ev-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.ev-step { position: relative; padding: 22px 20px 20px; background: #fff; border: 1px solid var(--border); border-radius: 6px; box-shadow: var(--shadow-xs); }
.ev-step .ic { width: 46px; height: 46px; border-radius: 6px; display: grid; place-items: center; border: 1px solid; margin-bottom: 14px; }
.ev .ev-step .ic svg[aria-hidden="true"] { width: 22px; height: 22px; }
.ev-step-n { position: absolute; top: 16px; right: 18px; font-family: var(--display); font-weight: 700; color: #d5dce8; font-size: 30px; line-height: 1; }
.ev-step b { display: block; font-family: var(--display); font-size: 17px; color: var(--ink); }
.ev-step > span:last-child { display: block; color: var(--slate-500); font-size: 14.5px; margin-top: 6px; line-height: 1.5; }
.ev-step:not(:last-child)::after { content: ""; position: absolute; top: 44px; right: -12px; width: 9px; height: 9px; border-top: 2px solid #c5cedd; border-right: 2px solid #c5cedd; transform: rotate(45deg); z-index: 1; }
.ev-narrow { max-width: 820px; }
.ev-qa { display: grid; gap: 10px; }
.ev-qa details { border: 1px solid var(--border); border-radius: 6px; background: #fff; padding: 0 20px; transition: box-shadow .2s; }
.ev-qa details[open] { box-shadow: var(--shadow-sm); }
.ev-qa summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 17px 0; font-family: var(--display); font-weight: 600; font-size: 16.5px; color: var(--ink); }
.ev-qa summary::-webkit-details-marker { display: none; }
.ev-qa summary::after { content: "+"; color: var(--accent); font-size: 24px; line-height: 1; font-weight: 400; }
.ev-qa details[open] summary::after { content: "\2212"; }
.ev-qa p { margin: 0 0 18px; color: var(--slate-500); font-size: 15.5px; line-height: 1.65; }
.ev-cta .cta h2 { max-width: 24ch; }
.ev-cta .ev-closed { align-self: center; }

.ev-q-title .ev-pills { margin-top: 2px; }
.ev-gender { align-items: center; margin-top: 6px; }
.ev-gender small { font-size: 12.5px; color: #7d8aa1; margin-right: 4px; }
.ev-form select { width: 100%; border: 1px solid var(--ev-line-2); border-radius: 6px; padding: 10px 12px; font: inherit; color: var(--ev-ink); background: #fff; }
.ev-colleague { grid-template-columns: 104px minmax(0, 1fr); }
.ev-colleague label:nth-child(n+3) { grid-column: 1 / -1; }
/* A colleague's own Remove (13 November 2026): under the email at the right, at the end of the line on a wide form. */
.ev-colleague .ev-c-remove { grid-column: 1 / -1; justify-self: end; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 6px; background: none; border: 0; border-radius: 6px; color: var(--ev-slate); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.ev-colleague .ev-c-remove:hover { color: var(--ev-danger); }
.ev-colleague .ev-c-remove:focus-visible { outline: 2px solid var(--ev-orange); outline-offset: 2px; }
.ev-colleague .ev-c-remove svg[aria-hidden="true"] { width: 16px; height: 16px; }
/* A phone zooms into a field whose letters are under 16px and stays zoomed; adding a colleague puts the cursor in one
   (his screenshot, 10 November 2026: "the zoom and the page behave unstable"). A tablet's finger the same. */
@media (max-width: 760px), (pointer: coarse) {
  .ev-form input, .ev-form select, .ev-form textarea, .ev-lost input { font-size: 16px; }
}

@media (max-width: 980px) {
  .ev .ev-hero2 .container { padding-block: 34px 44px; gap: 34px; }
  .ev-hero-visual.has-photo { padding: 0 0 56px 24px; }
  .ev-hero-visual.has-photo .ev-preview { width: 190px; }
  .ev-factgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ev-fact { border-left: 0; padding: 18px 12px 18px 0; border-top: 1px solid rgba(255, 255, 255, .12); }
  .ev-fact:nth-child(-n+2) { border-top: 0; }
  .ev-zone-s { padding: 44px 0 56px; }
  .ev-zone { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .ev-aside { position: static; display: contents; }
  .ev-aside-top { order: -1; }
  .ev-main { order: 1; gap: 48px; }
  .ev-aside-rest { order: 2; }
  .ev-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ev-step::after { display: none; }
  .ev-photos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ev-partner { grid-template-columns: 1fr; }
  .ev-partner-logo { max-width: 240px; }
}
@media (max-width: 640px) {
  .ev .ev-h1 { max-width: none; }
  .ev-factgrid { grid-template-columns: minmax(0, 1fr); }
  .ev-fact:nth-child(2) { border-top: 1px solid rgba(255, 255, 255, .12); }
  .ev-row { grid-template-columns: 40px minmax(0, 1fr); gap: 12px; padding: 12px 14px; }
  .ev-row-ic { width: 40px; height: 40px; }
  .ev-row-time { grid-column: 2; font-size: 14px; }
  .ev-people { grid-template-columns: minmax(0, 1fr); }
  .ev-steps, .ev-photos { grid-template-columns: minmax(0, 1fr); }
  .ev-hero-visual.has-photo { padding: 0; }
  .ev-hero-visual.has-photo .ev-preview { display: none; }
  .ev-hand-h { font-size: 30px; }
}
@media (prefers-reduced-motion: reduce) { .ev-map-pulse { animation: none; } }

/* ============================================================
   The events list (5.193.0). The next event as a poster in a navy
   hero with an orange glow, the same world as the event pictures;
   the other dates as picture cards with their date and seats; how
   the day works in four steps; a last call. Facts from the events.
   ============================================================ */
.evx { background: #fff; }
.evx-hero { position: relative; overflow: hidden; color: #fff; padding: 64px 0 76px;
  background: radial-gradient(720px 520px at 82% 34%, rgba(246, 146, 30, .34), rgba(246, 146, 30, 0) 62%),
              radial-gradient(620px 420px at 0% 100%, rgba(76, 132, 214, .26), rgba(76, 132, 214, 0) 64%),
              linear-gradient(155deg, #1b3150 0%, #0e1b2e 60%, #0a1424 100%); }
.evx-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, .07) 1.5px, transparent 1.5px); background-size: 34px 34px;
  -webkit-mask-image: radial-gradient(900px 600px at 70% 40%, #000 20%, transparent 75%); mask-image: radial-gradient(900px 600px at 70% 40%, #000 20%, transparent 75%); }
.evx-hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 56px; align-items: center; }
.evx-hero-grid.is-alone { grid-template-columns: minmax(0, 1fr); }
.evx-eyebrow { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 12px; border-radius: 999px; background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .2); font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #fff; }
.evx-eyebrow i { width: 9px; height: 9px; border-radius: 50%; background: #ff5a4f; box-shadow: 0 0 0 5px rgba(255, 90, 79, .22); animation: evx-pulse 2.4s ease-in-out infinite; }
@keyframes evx-pulse { 50% { box-shadow: 0 0 0 9px rgba(255, 90, 79, 0); } }
.evx-title { font-family: var(--display); font-weight: 700; font-size: clamp(38px, 5.4vw, 66px); line-height: 1.02; letter-spacing: -.03em; margin: 22px 0 0; color: #fff; max-width: 15ch; text-wrap: balance; }
.evx-title span { color: var(--ev-orange); }
.evx-lead { font-size: clamp(16px, 1.6vw, 19px); line-height: 1.55; color: #c9d3e0; max-width: 50ch; margin: 20px 0 0; }
.evx-missing { margin: 16px 0 0; color: #f7b24a; font-weight: 600; }
.evx-hero .ev-door { margin: 18px 0 0; max-width: 52ch; }
.evx-stats { list-style: none; display: flex; flex-wrap: wrap; gap: 14px 34px; margin: 32px 0 0; padding: 0; }
.evx-stats li { display: grid; gap: 4px; }
.evx-stats b { font-family: var(--display); font-size: 30px; font-weight: 700; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.evx-stats span { font-size: 13.5px; color: #9fb0c6; }
.evx-cta { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; margin-top: 34px; }
.evx-btn { padding: 15px 22px; font-size: 16px; border-radius: 10px; }
.evx-link { color: #fff; font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .35); padding-bottom: 2px; }
.evx-link:hover { border-color: var(--ev-orange); }
.evx-empty { display: grid; gap: 6px; margin-top: 28px; padding: 20px 22px; border-radius: 16px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .2); color: #dbe3ee; max-width: 52ch; }
.evx-empty b { font-family: var(--display); font-size: 20px; color: #fff; }
.evx-empty a { color: #f7b24a; }

.evx-feature { display: grid; color: var(--ev-ink); text-decoration: none; background: #fff; border-radius: 22px; overflow: hidden;
  box-shadow: 0 50px 100px -40px rgba(0, 0, 0, .75); transform: rotate(-1.2deg); transition: transform .25s ease; }
.evx-feature:hover { transform: rotate(0deg) translateY(-4px); }
.evx-feature-media, .evx-card-media { position: relative; display: block; aspect-ratio: 16 / 9; background: #16273f; overflow: hidden; }
.evx-feature-media img, .evx-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.evx .is-drawn { display: grid; place-content: center; justify-items: center; color: #fff;
  background: radial-gradient(420px 260px at 75% 30%, rgba(246, 146, 30, .5), rgba(246, 146, 30, 0) 65%), linear-gradient(150deg, #1f3252, #0e1b2e); }
.evx-drawn-day { font-family: var(--display); font-size: 104px; font-weight: 700; line-height: .9; letter-spacing: -.04em; }
.evx-drawn-month { font-size: 17px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: #f7b24a; margin-top: 6px; }
.evx-drawn-product { font-family: var(--display); font-size: 26px; font-weight: 700; letter-spacing: -.01em; color: #fff; }
.evx-badge { position: absolute; left: 16px; top: 16px; padding: 7px 14px; border-radius: 999px; background: var(--ev-orange); color: #16273f; font-weight: 800; font-size: 13px; letter-spacing: .03em; box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .5); }
.evx-badge-sm { left: auto; right: 12px; top: 12px; padding: 5px 11px; font-size: 12px; }
.evx-feature-body { display: grid; gap: 12px; padding: 22px 24px 24px; }
.evx-kicker { font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--ev-accent-dark); }
.evx-feature-title { font-family: var(--display); font-size: clamp(23px, 2.4vw, 30px); line-height: 1.1; letter-spacing: -.02em; color: var(--ev-navy); }
.evx-facts { display: grid; gap: 8px; }
.evx-facts > span, .evx-card-meta { display: flex; align-items: center; gap: 10px; color: var(--ev-ink); font-size: 15px; }
.evx-facts svg, .evx-card-meta svg { color: var(--ev-accent); flex: none; }
.evx-seats { display: grid; gap: 7px; font-size: 13.5px; font-weight: 700; color: var(--ev-accent-dark); width: 100%; }
.evx-bar { display: block; height: 8px; border-radius: 99px; background: var(--ev-soft); overflow: hidden; }
.evx-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #f7b24a, var(--ev-accent)); }
.evx-go { display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin-top: 4px; padding: 14px 18px; border-radius: 10px; background: var(--ev-accent); color: #fff; font-family: var(--display); font-weight: 700; }
.evx-feature:hover .evx-go { background: var(--ev-accent-dark); }

.evx-dates { padding: 68px 0 20px; }
.evx-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 20px; margin-bottom: 26px; }
.evx-head h2, .evx-how h2 { font-family: var(--display); font-weight: 700; font-size: clamp(26px, 3vw, 36px); letter-spacing: -.02em; color: var(--ev-navy); margin: 0; text-wrap: balance; }
.evx-head-note { color: var(--ev-slate); font-size: 15.5px; }
.evx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 22px; }
.evx-grid[data-n="1"] { grid-template-columns: minmax(0, 560px); }
.evx-grid[data-n="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.evx-card { display: grid; grid-template-rows: auto 1fr; text-decoration: none; color: inherit; border: 1px solid var(--ev-line); border-radius: 18px; overflow: hidden; background: #fff;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.evx-card:hover { transform: translateY(-3px); border-color: var(--ev-line-2); box-shadow: 0 26px 50px -30px rgba(22, 39, 63, .45); }
.evx-date { position: absolute; left: 14px; bottom: 14px; display: grid; justify-items: center; min-width: 62px; padding: 8px 10px; border-radius: 12px; background: #fff; color: var(--ev-navy); box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .5); }
.evx-date b { font-family: var(--display); font-size: 28px; line-height: 1; }
.evx-date span { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ev-accent-dark); margin-top: 2px; }
.evx-card-body { display: grid; gap: 9px; align-content: start; justify-items: start; padding: 18px 20px 22px; }
.evx-card-title { font-family: var(--display); font-size: 20px; line-height: 1.2; color: var(--ev-navy); }
.evx-card-meta { font-size: 14.5px; color: var(--ev-slate); }
.evx-card .evx-seats { margin-top: 6px; }

.evx-how { padding: 64px 0 76px; }
.evx-steps { list-style: none; margin: 26px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; counter-reset: evx; }
.evx-steps li { padding: 22px 22px 24px; border-radius: 16px; background: var(--ev-alt); border: 1px solid var(--ev-line); counter-increment: evx; }
.evx-steps li::before { content: counter(evx); display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--ev-navy); color: #fff; font-family: var(--display); font-weight: 700; margin-bottom: 14px; }
.evx-steps li:last-child::before { background: var(--ev-orange); color: #16273f; }
.evx-steps h3 { font-family: var(--display); font-size: 17px; margin: 0 0 6px; color: var(--ev-navy); }
.evx-steps p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--ev-slate); }

.evx-close { color: #fff; background: radial-gradient(520px 260px at 90% 50%, rgba(246, 146, 30, .3), rgba(246, 146, 30, 0) 70%), linear-gradient(155deg, #1b3150, #0e1b2e); }
.evx-close .ev-wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 28px; padding-top: 44px; padding-bottom: 44px; }
.evx-close span { display: grid; gap: 6px; }
.evx-close small { font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #f7b24a; }
.evx-close b { font-family: var(--display); font-size: clamp(22px, 2.8vw, 32px); letter-spacing: -.02em; line-height: 1.15; }

@media (max-width: 980px) {
  .evx-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .evx-feature { transform: none; }
  .evx-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .evx-hero { padding: 40px 0 52px; }
  .evx-stats { gap: 12px 26px; }
  .evx-stats b { font-size: 24px; }
  .evx-btn { width: 100%; }
  .evx-drawn-day { font-size: 80px; }
  .evx-grid, .evx-grid[data-n], .evx-steps { grid-template-columns: minmax(0, 1fr); }
  .evx-close .ev-btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .evx-eyebrow i { animation: none; } .evx-feature, .evx-card { transform: none; transition: none; } }

/* ============================================================
   The parts of a page's body (5.317.0, moved here in 5.318.0): the campaign offer page's body (OfferPage) and the
   pages the public pages builder draws (PubRender) share them, so a part looks the same wherever it is used. The
   columns come from the count, decided in OfferPage, never one card alone.
   ============================================================ */
.cp-cards, .cp-quote-grid { display: grid; gap: 18px; }
.cp-across-1 { grid-template-columns: minmax(0, 760px); justify-content: center; }
.cp-across-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 960px; margin-inline: auto; }
.cp-across-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cp-why .ecard.cp-reason { margin-top: 0; padding: 26px 24px; border-top: 3px solid var(--accent); }
.cp-num { display: block; font-family: var(--display); font-weight: 700; font-size: 15px; letter-spacing: .08em; color: var(--accent-dark); margin-bottom: 12px; }
.cp-why .ecard h3 { font-size: var(--fs-h3); line-height: 1.25; margin: 0 0 8px; }
.cp-why .ecard p { font-size: var(--fs-base); line-height: 1.6; margin: 0; }
.cp-video { max-width: 960px; margin: 0 auto; }
.cp-video-start, .cp-video iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--radius-lg); }
.cp-video-start { position: relative; padding: 0; overflow: hidden; cursor: pointer; background: linear-gradient(135deg, var(--ev-navy), var(--navy-700)); box-shadow: var(--shadow-lg); }
.cp-video-start img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cp-play { position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%; background: var(--accent); color: var(--on-accent); display: grid; place-items: center; box-shadow: var(--shadow-lg); transition: transform var(--dur) var(--ease); }
.cp-play svg { width: 30px; height: 30px; fill: currentColor; margin-left: 4px; }
.cp-video-start:hover .cp-play, .cp-video-start:focus-visible .cp-play { transform: scale(1.08); }
.cp-video-start:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.cp-video-note { max-width: 960px; margin: 10px auto 0; text-align: center; font-size: 13.5px; color: var(--ev-slate); }
.cp-video + .cp-video-note + .cp-shots { margin-top: 28px; }
.cp-shots { display: grid; gap: 20px; margin-inline: auto; }
.cp-shots-one { max-width: 1040px; }
.cp-shots-two, .cp-shots-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cp-shots-lead { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cp-shots-lead .cp-shot:first-child { grid-column: 1 / -1; }
.cp-shots-strip { max-width: 960px; }
.cp-shots-strip.cp-count-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cp-shots-strip.cp-count-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cp-shots-strip.cp-count-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cp-shot { margin: 0; min-width: 0; }
.cp-shot-open { display: block; width: 100%; padding: 0; border: 1px solid var(--ev-line-2); border-radius: var(--radius-lg); overflow: hidden; background: var(--card); cursor: zoom-in; box-shadow: var(--shadow-md); transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); }
.cp-shot-open:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.cp-shot-open:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.cp-shot-bar { display: flex; gap: 6px; padding: 9px 12px; background: var(--ev-alt); border-bottom: 1px solid var(--ev-line); }
.cp-shot-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--ev-line-2); }
.cp-shot img { display: block; width: 100%; height: auto; }
.cp-shots-one .cp-shot img, .cp-shots-lead .cp-shot:first-child img { max-height: 72vh; object-fit: contain; background: var(--ev-alt); }
.cp-shots-two .cp-shot img, .cp-shots-grid .cp-shot img, .cp-shots-strip .cp-shot img, .cp-shots-lead .cp-shot:not(:first-child) img { aspect-ratio: 16 / 10; object-fit: cover; object-position: top center; }
.cp-shot figcaption { margin-top: 10px; font-size: 14px; color: var(--ev-slate); text-align: center; }
.cp-zoom { width: min(1400px, 96vw); max-width: none; max-height: 94vh; padding: 0; border: 0; border-radius: var(--radius-lg); background: var(--ev-navy); color: var(--card); overflow: auto; }
/* A backdrop inherits the page's tokens only in newer browsers, so the navy is named here once as the fallback. */
.cp-zoom::backdrop { background: color-mix(in srgb, var(--ev-navy, #16273f) 86%, transparent); }
.cp-zoom img { display: block; width: 100%; max-height: calc(94vh - 56px); object-fit: contain; background: var(--card); }
.cp-zoom-cap { margin: 0; padding: 12px 18px; font-size: 14.5px; text-align: center; }
.cp-zoom-close { position: absolute; top: 10px; right: 10px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: color-mix(in srgb, var(--ev-navy) 78%, transparent); color: var(--card); display: grid; place-items: center; cursor: pointer; }
.cp-zoom-close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.cp-zoom-close:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.cp-steps.cp-steps-1 { grid-template-columns: minmax(0, 420px); justify-content: center; }
.cp-steps.cp-steps-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 820px; margin-inline: auto; }
.cp-steps.cp-steps-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Five and six steps (5.319.0, /seo's six) fall into rows of three: three and two, or three and three. The arrow to the
   next step stops at the end of a row, where the next step starts the row below. */
.cp-steps.cp-steps-5, .cp-steps.cp-steps-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cp-steps.cp-steps-5 .ev-step:nth-child(3n)::after, .cp-steps.cp-steps-6 .ev-step:nth-child(3n)::after { display: none; }
.cp-steps .ev-step .cp-step-n { display: grid; place-items: center; width: 40px; height: 40px; margin: 0 0 14px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-dark); font-family: var(--display); font-weight: 700; font-size: 17px; }
.cp-terms-box { max-width: 900px; margin: 0 auto; background: var(--card); border: 1px solid var(--ev-line); border-top: 4px solid var(--accent); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 36px 40px; }
.cp-terms-box .h2 { margin: 0 0 22px; }
.cp-terms-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 32px; }
.cp-terms-list li { display: flex; gap: 12px; align-items: flex-start; font-size: var(--fs-lg); line-height: 1.5; color: var(--ev-ink); }
.ev .cp-terms-list svg[aria-hidden="true"] { flex: none; width: 22px; height: 22px; margin-top: 1px; padding: 3px; border-radius: 50%; background: var(--ev-ok); color: var(--card); stroke-width: 3; }
.cp-terms-box .btn-row { margin-top: 28px; }
.cp-quote { position: relative; margin: 0; background: var(--card); border: 1px solid var(--ev-line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 30px 28px 24px; display: flex; flex-direction: column; }
.cp-quote-mark { position: absolute; top: 6px; left: 20px; font-family: Georgia, serif; font-size: 64px; line-height: 1; color: var(--accent); opacity: .35; }
.cp-quote blockquote { margin: 18px 0 22px; flex: 1; }
.cp-quote blockquote p { margin: 0; font-size: 17px; line-height: 1.65; color: var(--ev-ink); }
.cp-quote figcaption { display: flex; gap: 12px; align-items: center; border-top: 1px solid var(--ev-line); padding-top: 16px; }
.cp-avatar { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--ev-navy); color: var(--card); font-family: var(--display); font-weight: 700; font-size: 15px; letter-spacing: .02em; }
.cp-quote figcaption b { display: block; color: var(--ev-ink); }
.cp-quote figcaption small { display: block; color: var(--ev-slate); font-size: 13.5px; margin-top: 2px; }
@media (max-width: 980px) {
  .cp-across-3 { grid-template-columns: minmax(0, 1fr); max-width: 640px; margin-inline: auto; }
  .cp-steps.cp-steps-3, .cp-steps.cp-steps-4, .cp-steps.cp-steps-5, .cp-steps.cp-steps-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* An odd count in two columns: the first step across the whole row, so none is left alone on the last. */
  .cp-steps.cp-steps-3 .ev-step:first-child, .cp-steps.cp-steps-5 .ev-step:first-child { grid-column: 1 / -1; }
  .cp-shots-strip.cp-count-3, .cp-shots-strip.cp-count-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cp-shots-strip.cp-count-3 .cp-shot:first-child { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .cp-across-2, .cp-quote-grid.cp-across-2, .cp-steps.cp-steps-2, .cp-steps.cp-steps-3, .cp-steps.cp-steps-4, .cp-steps.cp-steps-5, .cp-steps.cp-steps-6 { grid-template-columns: minmax(0, 1fr); }
  .cp-steps.cp-steps-3 .ev-step:first-child, .cp-steps.cp-steps-5 .ev-step:first-child { grid-column: auto; }
  .cp-shots-two, .cp-shots-grid, .cp-shots-lead, .cp-shots-strip.cp-count-2, .cp-shots-strip.cp-count-3, .cp-shots-strip.cp-count-4 { grid-template-columns: minmax(0, 1fr); }
  .cp-shots-strip.cp-count-3 .cp-shot:first-child { grid-column: auto; }
  .cp-terms-box { padding: 26px 20px; }
  .cp-terms-list { grid-template-columns: minmax(0, 1fr); }
  .cp-play { width: 60px; height: 60px; margin: -30px 0 0 -30px; }
}
/* The builder's own parts (5.318.0, PubRender): an opening with a picture beside it or alone, words, and a band
   set apart dark by the writer's choice. */
.pp-hero .ev-hero-copy .btn-row { margin-top: 26px; }
.pp-hero-solo .container { grid-template-columns: minmax(0, 1fr); }
.pp-hero-solo .ev-hero-copy { max-width: 860px; }
.pp-hero-pic { margin: 0; min-width: 0; }
.pp-hero-pic img { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.pp-text .section-head { text-align: left; margin-inline: 0; }
.pp-prose { font-size: var(--fs-lg); line-height: 1.7; color: var(--ev-ink); overflow-wrap: anywhere; }
.pp-prose p { margin: 0 0 1em; }
.pp-prose h3 { font-size: var(--fs-h3); margin: 1.4em 0 .5em; }
.pp-prose ul, .pp-prose ol { padding-left: 1.3em; margin: 0 0 1em; }
.pp-ink { background: var(--ev-navy); color: var(--card); }
/* On a dark band only what stands on the band is light: its heading and running text. Reasons, steps and questions are
   white cards and keep their own words (13 October 2026: their titles were white on white, found on the trial pages). */
.pp-ink .h2, .pp-ink .pp-prose h3 { color: var(--card); }
/* The Terms block draws its heading inside its own white box: there it keeps the ink (the review of 5.371.0). */
.pp-ink .cp-terms-box .h2 { color: var(--ev-ink); }
.pp-ink .label { color: var(--ev-orange); }
.pp-ink .pp-prose { color: var(--card); }
/* A Prices block (5.319.0): the price from the prices screen and how it is billed, what it covers, a second price on
   a line of its own, the button, and a small note under it, in one centred column. */
.pp-price-box { max-width: 720px; margin: 0 auto; text-align: center; }
.pp-price-main { margin: 0 0 14px; color: var(--ev-ink); }
.pp-price-main b { font-family: var(--display); font-size: clamp(34px, 4vw, 46px); font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.pp-price-main span { font-size: var(--fs-lg); color: var(--ev-slate); }
.pp-price-text { margin: 0 0 12px; font-size: var(--fs-lg); line-height: 1.6; color: var(--ev-ink); }
.pp-price-more { margin: 0; color: var(--ev-slate); }
.pp-price-more strong { color: var(--ev-ink); }
.pp-price-box .btn-row { justify-content: center; margin-top: 26px; }
.pp-price-note { margin: 12px 0 0; color: var(--ev-slate); }
.pp-ink .pp-price-main, .pp-ink .pp-price-text, .pp-ink .pp-price-more strong { color: var(--card); }
.pp-ink .pp-price-main span, .pp-ink .pp-price-more, .pp-ink .pp-price-note { color: color-mix(in srgb, var(--card) 78%, transparent); }
/* Your own numbers (10 October 2026, the calc block): one amount to type, the rate under it, three figures large
   and tabular beside each other, their labels under them, a note last. The figure that is ours is set in the accent:
   it is the one that is nothing, which is the point of the block. */
.pp-calc-text { max-width: 640px; margin: 0 auto 26px; text-align: center; font-size: var(--fs-lg); line-height: 1.6; color: var(--ev-ink); }
.pp-calc-box { max-width: 760px; margin: 0 auto; background: var(--card); border: 1px solid var(--ev-line); border-top: 4px solid var(--accent); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 32px 36px 30px; }
.pp-calc-ask { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.pp-calc-label { font-family: var(--display); font-weight: 600; font-size: 17px; color: var(--ev-ink); }
.pp-calc-field { display: inline-flex; align-items: center; border: 1px solid var(--border-strong); border-radius: var(--radius-lg); background: var(--card); overflow: hidden; }
.pp-calc-field:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.pp-calc-sign { padding: 0 0 0 14px; font-family: var(--display); font-weight: 600; font-size: 20px; color: var(--ev-slate); }
.pp-calc-field input { width: 9ch; border: 0; padding: 11px 14px 11px 8px; font-family: var(--display); font-weight: 700; font-size: 22px; color: var(--ev-ink); background: transparent; font-variant-numeric: tabular-nums; outline: none; -moz-appearance: textfield; }
.pp-calc-field input::-webkit-outer-spin-button, .pp-calc-field input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pp-calc-field input:disabled { color: var(--ev-ink); opacity: 1; }
.pp-calc-rate { margin: 12px 0 0; font-size: 14.5px; color: var(--ev-slate); }
.pp-calc-rate b { color: var(--ev-ink); font-variant-numeric: tabular-nums; }
.pp-calc-figures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--ev-line); }
.pp-calc-fig { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pp-calc-sum { display: block; font-family: var(--display); font-weight: 700; font-size: clamp(26px, 3vw, 38px); line-height: 1.1; letter-spacing: -.02em; color: var(--ev-ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.pp-calc-ours .pp-calc-sum { color: var(--accent); }
.pp-calc-what { font-size: 14px; line-height: 1.4; color: var(--ev-slate); }
.pp-calc-note { max-width: 760px; margin: 14px auto 0; text-align: center; color: var(--ev-slate); }
.pp-ink .pp-calc-text, .pp-ink .pp-calc-note { color: color-mix(in srgb, var(--card) 82%, transparent); }
/* The path, step by step (10 October 2026, the path block): a vertical list, the number in a circle, the badge a
   small chip at the right of the line, the open step lifted and lined in the accent. */
.pp-path-text { max-width: 640px; margin: 0 auto 26px; text-align: center; font-size: var(--fs-lg); line-height: 1.6; color: var(--ev-ink); }
.pp-path-steps { list-style: none; margin: 0 auto; padding: 0; max-width: 760px; display: grid; gap: 10px; }
.pp-path-step details { border: 1px solid var(--ev-line); border-left: 4px solid var(--border-strong); border-radius: var(--radius-lg); background: var(--card); padding: 0 20px; transition: box-shadow .2s, border-color .2s; }
.pp-path-step details[open] { border-left-color: var(--accent); box-shadow: var(--shadow-md); }
.pp-path-step summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 14px; padding: 15px 0; }
.pp-path-step summary::-webkit-details-marker { display: none; }
.pp-path-step summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; border-radius: var(--radius); }
.pp-path-n { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--bg-soft); color: var(--ev-slate); font-family: var(--display); font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums; }
.pp-path-step details[open] .pp-path-n { background: var(--accent-soft); color: var(--accent-dark); }
.pp-path-title { flex: 1; min-width: 0; font-family: var(--display); font-weight: 600; font-size: 17px; color: var(--ev-ink); }
.pp-path-title b { font-weight: inherit; }
.pp-path-badge { flex: none; display: inline-block; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--accent-soft); background: var(--accent-tint); color: var(--accent-dark); font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.pp-path-body { padding: 0 0 18px 50px; }
.pp-path-lead { margin: 0 0 10px; font-size: 15.5px; line-height: 1.6; color: var(--ev-ink); }
.pp-path-services { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.pp-path-services li { position: relative; padding-left: 18px; font-size: 14.5px; line-height: 1.5; color: var(--ev-slate); }
.pp-path-services li::before { content: ""; position: absolute; left: 0; top: .62em; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.pp-path-services-edit { display: inline-block; min-width: 12ch; }
/* On a dark band only the line above the steps stands on the band; each step is a white card and keeps its own
   words (10 October 2026: they were set white, on white, found while giving CyprusBites its colours). */
.pp-ink .pp-path-text { color: color-mix(in srgb, var(--card) 82%, transparent); }
@media (max-width: 640px) {
  .pp-calc-box { padding: 22px 18px 22px; }
  .pp-calc-ask { flex-direction: column; align-items: stretch; }
  .pp-calc-field input { width: 100%; }
  .pp-calc-figures { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .pp-calc-fig { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 12px; }
  .pp-calc-what { text-align: right; }
  .pp-path-step details { padding: 0 14px; }
  .pp-path-step summary { gap: 10px; padding: 13px 0; }
  .pp-path-n { width: 30px; height: 30px; font-size: 13.5px; }
  .pp-path-title { font-size: 16px; }
  .pp-path-badge { font-size: 11px; padding: 2px 8px; }
  .pp-path-body { padding-left: 0; }
}
/* A presentation's sections (7 October 2026): one section's space between two of them, never two. A page of the site
   gives every section 84 pixels above and below, so two in a row stand 168 apart, which reads as a page of separate
   bands; a presentation is one letter to one customer, and Georgios found "too much gap" between its Steps and the
   section after them. Half each, so two together make the 84 of one. Only a presentation is marked so: the proposal and
   its look draw it inside .ppx-blocks (proposals/_presentation.php), and the builder's canvas marks its main
   pp-present (pages/page.php). A page of the site is neither, and keeps its own. tools/ixxo_present.py carries the
   first selector into ixxo-present.css on the .ppx box itself. */
.ppx-blocks > .pp > .section, .pp.pp-present > .section { padding-block: 42px; }
@media (max-width: 720px) { .ppx-blocks > .pp > .section, .pp.pp-present > .section { padding-block: 30px; } }

/* The consent letter's paragraphs on its page (18 October 2026): half a line apart, of their own size. */
.pub-single .cs-para { margin: 0 0 .75em; }

/* Event Live, before the event (5.396.0): Read before the event on the ticket page, and the question box of the form. */
.ev-read { margin: 28px 0 8px; padding-top: 20px; border-top: 1px solid var(--line, #e4e9f2); }
.ev-read h2 { font-size: 20px; margin: 0 0 6px; }
.ev-read h3 { font-size: 15px; margin: 18px 0 8px; color: var(--ev-ink); }
.ev-read-intro { margin: 0 0 10px; font-size: 14px; line-height: 1.55; color: var(--ev-slate); }
.ev-read-item { padding: 10px 0; border-bottom: 1px solid var(--line, #e4e9f2); }
.ev-read-open { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.ev-read-tag { font-size: 11px; font-weight: 700; letter-spacing: .06em; padding: 1px 6px; border-radius: 4px; background: var(--ev-soft); text-decoration: none; }
.ev-read-acts { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 6px; }
.ev-read .ev-link { background: none; border: 0; padding: 4px 0; font: inherit; font-size: 14px; color: var(--ev-accent-dark); text-decoration: underline; cursor: pointer; min-height: 32px; }
.ev-ask { margin-top: 8px; display: grid; gap: 8px; }
.ev-ask textarea { width: 100%; font: inherit; font-size: 15px; padding: 10px 12px; border: 1px solid var(--line-strong, #cfd7e6); border-radius: 10px; }
.ev-ask-row { display: flex; gap: 8px; flex-wrap: wrap; }
.ev-read-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ev-read-list li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding: 8px 0; border-bottom: 1px solid var(--line, #e4e9f2); font-size: 15px; }
.ev-read-list li span { flex: 1 1 260px; overflow-wrap: anywhere; }
.ev-read-list em { font-style: normal; font-size: 13px; color: var(--ev-slate); }
.ev-chip-btn { font: inherit; font-size: 13px; font-weight: 600; padding: 6px 12px; min-height: 36px; border-radius: 999px; border: 1px solid var(--line-strong, #cfd7e6); background: #fff; cursor: pointer; }
.ev-chip-btn.on { border-color: var(--ev-orange); background: var(--accent-soft, #fff4e5); }
.ev-read-said { min-height: 1.4em; font-size: 14px; margin: 10px 0 0; }
.ev-read-said.bad { color: var(--danger, #b42318); }
.ev-q-box { display: grid; gap: 6px; margin: 10px 0; font-size: 14px; }
.ev-q-box textarea { width: 100%; font: inherit; font-size: 15px; padding: 10px 12px; border: 1px solid var(--line-strong, #cfd7e6); border-radius: 10px; }

/* ---- The form on a page of its own (5.443.0): /events/{slug}/register. The name, then the event page's own registration
   column, the same blocks at the same look (his words: "exactly the same"); a little wider than its 360 there, so it
   does not look lost alone in the middle of a page. ---- */
.ev-fo { padding: 48px 16px 72px; background: radial-gradient(900px 300px at 85% -20%, rgba(246, 146, 30, .12), transparent 60%), var(--ev-alt); }
.ev-fo-wrap { max-width: 880px; margin: 0 auto; display: grid; gap: 16px; }
/* Wider, two fields to a row (his screenshot of 24 October 2026): first and last name, email and mobile; everything
   else across the whole card. Under the form, the date and calendar beside each other, and the location beside the
   contact. A phone keeps one column (below). */
.ev-fo .ev-form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 16px; }
.ev-fo .ev-form > * { grid-column: 1 / -1; }
.ev-fo .ev-form > label:has(> input[name="name"]), .ev-fo .ev-form > label:has(> input[name="second_name"]),
.ev-fo .ev-form > label:has(> input[name="email"]), .ev-fo .ev-form > label:has(.ev-phone),
.ev-fo .ev-form:has(input[name="firm_reg"]) > label:has(> input[name="company"]), .ev-fo .ev-form > label:has(> input[name="firm_reg"]) { grid-column: auto; }
.ev-fo .ev-aside-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
.ev-fo .ev-aside-top > #ev-box { grid-column: 1 / -1; }
.ev-fo .ev-aside-rest { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 24px; align-items: start; }
.ev-fo .ev-aside-rest > .ev-side-block:first-child { grid-row: span 2; }
.ev-fo-eyebrow { margin: 0; color: var(--ev-accent-dark); font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.ev-fo-title { margin: 0 0 4px; font-family: var(--display); font-size: clamp(28px, 4.4vw, 40px); line-height: 1.1; color: var(--ev-navy); text-wrap: balance; }
/* The column of the event page is sticky beside the main column and, on a phone, melts into it; here it is the page. */
.ev-fo .ev-aside { position: static; display: grid; gap: 16px; }
/* A colleague on one line on the form page at a desk (his screenshot, 10 November 2026): title, names and email. */
.ev-fo .ev-colleague { grid-template-columns: 96px repeat(3, minmax(0, 1fr)) auto; }
.ev-fo .ev-colleague label:nth-child(n+3) { grid-column: auto; }
.ev-fo .ev-colleague .ev-c-remove { grid-column: auto; align-self: end; min-height: 42px; }
.ev-fo-welcome { display: grid; gap: 4px; padding: 14px 18px; border: 1px solid var(--ev-line-2); border-left: 4px solid var(--ev-orange); border-radius: 10px; background: #fff; color: var(--ev-ink); font-size: 15.5px; line-height: 1.5; }
.ev-fo-welcome b { font-family: var(--display); font-size: 18px; color: var(--ev-navy); }
.ev-fo-more { margin: 0; font-size: 14.5px; }
.ev-fo-more a { color: var(--ev-accent-dark); font-weight: 600; text-decoration: none; }
.ev-fo-more a:hover { text-decoration: underline; }
body.is-embed .ev-fo { padding: 16px 12px 24px; background: transparent; }
@media (max-width: 640px) {
  .ev-fo { padding-top: 28px; }
  .ev-fo .ev-form, .ev-fo .ev-aside-top, .ev-fo .ev-aside-rest { grid-template-columns: minmax(0, 1fr); }
  .ev-fo .ev-form > label { grid-column: 1 / -1; }
  .ev-fo .ev-aside-rest > .ev-side-block:first-child { grid-row: auto; }
  .ev-fo .ev-colleague { grid-template-columns: 104px minmax(0, 1fr); }
  .ev-fo .ev-colleague label:nth-child(n+3) { grid-column: 1 / -1; }
  .ev-fo .ev-colleague .ev-c-remove { grid-column: 1 / -1; }
}