/* The theme's length tokens (radius, spacing, section padding, content width)
   carry the SAME names the rules below read, and the theme sets them on :root.
   They were once re-declared on .web-page as `--web-radius: var(--web-radius,
   12px)` — a custom property that refers to itself is a cycle, which CSS
   resolves to "invalid", so every radius, gap, section padding and content
   width on every site silently fell back to nothing (square buttons, content
   flush against the window edge). Each use now carries its own default
   instead: `var(--web-radius, 12px)`. */
.web-page {
  --web-fg: var(--web-color-fg, #1e293b);
  --web-muted: var(--web-color-muted, #64748b);
  --web-bg: var(--web-color-bg, #ffffff);
  --web-alt: var(--web-color-alt, #f8fafc);
  --web-accent: var(--web-color-accent, #2563eb);
  --web-accent-fg: var(--web-color-accent-fg, #ffffff);
  --web-border: var(--web-color-border, #e2e8f0);
  --web-font: var(--web-font-body, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
  --web-font-head: var(--web-font-heading, var(--web-font));
  --web-accent-2: var(--web-color-accent-2, var(--web-accent));
  --web-accent-2-fg: var(--web-color-accent-2-fg, var(--web-accent-fg));
  color: var(--web-fg);
  background: var(--web-bg);
  font-family: var(--web-font);
  line-height: 1.6;
}
.web-page * { box-sizing: border-box; }
.web-page h1, .web-page h2, .web-page h3 {
  font-family: var(--web-font-head);
  font-weight: 700;
  line-height: 1.2;
  text-wrap: balance;
  margin: 0 0 .5em;
}
.web-page h1 { font-size: clamp(2rem, 4vw, 3rem); }
.web-page h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
.web-page h3 { font-size: 1.25rem; }
.web-page p { margin: 0 0 1em; }
.web-page a { color: var(--web-accent); text-decoration: underline; }
.web-page img { max-width: 100%; height: auto; display: block; }
/* The browser defaults the page relies on, stated outright. The builder's
   canvas draws the page inside the admin app, whose own stylesheet (Tailwind's
   preflight) strips list bullets, heading sizes and weights, blockquote and
   table styling from every element — so a list that had bullets on the live
   site showed none on the canvas. With these written down under .web-page the
   canvas and the site render the same markup the same way, and the site no
   longer depends on any one browser's defaults either. */
.web-page ul, .web-page ol { margin: 0 0 1em; padding: 0 0 0 1.5em; }
.web-page ul { list-style: disc; }
.web-page ol { list-style: decimal; }
.web-page li { margin: .25em 0; }
.web-page h4, .web-page h5, .web-page h6 {
  font-family: var(--web-font-head);
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 .5em;
}
.web-page h4 { font-size: 1.1rem; }
.web-page h5 { font-size: 1rem; }
.web-page h6 { font-size: .9rem; }
.web-page strong, .web-page b { font-weight: 700; }
.web-page em, .web-page i { font-style: italic; }
.web-page blockquote {
  margin: 0 0 1em; padding: .25em 0 .25em 1em;
  border-left: 3px solid var(--web-border); color: var(--web-muted);
}
.web-page hr { border: 0; border-top: 1px solid var(--web-border); margin: 1.5em 0; }
.web-page code, .web-page pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .92em;
}
.web-page pre { overflow: auto; padding: 12px; background: var(--web-alt); border-radius: var(--web-radius, 12px); }
.web-page table { border-collapse: collapse; width: 100%; margin: 0 0 1em; }
.web-page th, .web-page td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--web-border); }
.web-page th { font-weight: 700; }

.web-section { padding: var(--web-section-y, 56px) 20px; }
.web-section > .web-row + .web-row { margin-top: var(--web-gap, 24px); }
/* Parallax: a fixed-attachment background scrolls slower than the page. Falls
   back to a normal scrolling background where fixed attachment is unsupported
   (notably most touch devices), so it degrades, never breaks. */
.web-parallax { background-attachment: fixed; }
@media (max-width: 820px) { .web-parallax { background-attachment: scroll; } }
/* Shape dividers: an SVG carves a wave / slant / curve out of a section edge.
   The section holds them; its rows float above so content is never covered. */
.web-has-divider { position: relative; }
.web-has-divider > .web-row { position: relative; z-index: 1; }
.web-divider { position: absolute; left: 0; width: 100%; line-height: 0;
  pointer-events: none; z-index: 0; overflow: hidden; }
.web-divider svg { display: block; width: 100%; height: 60px; }
.web-divider-bottom { bottom: -1px; }
.web-divider-top { top: -1px; transform: scaleY(-1); }
@media (max-width: 820px) { .web-divider svg { height: 36px; } }
.web-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--web-gap, 24px);
  max-width: var(--web-max, 1080px);
  margin: 0 auto;
  align-items: flex-start;
}
.web-col { flex: 1 1 100%; min-width: 0; }
@media (min-width: 768px) {
  .web-col-1  { flex-basis: calc(8.333% - var(--web-gap, 24px)); }
  .web-col-2  { flex-basis: calc(16.667% - var(--web-gap, 24px)); }
  .web-col-3  { flex-basis: calc(25% - var(--web-gap, 24px)); }
  .web-col-4  { flex-basis: calc(33.333% - var(--web-gap, 24px)); }
  .web-col-5  { flex-basis: calc(41.667% - var(--web-gap, 24px)); }
  .web-col-6  { flex-basis: calc(50% - var(--web-gap, 24px)); }
  .web-col-7  { flex-basis: calc(58.333% - var(--web-gap, 24px)); }
  .web-col-8  { flex-basis: calc(66.667% - var(--web-gap, 24px)); }
  .web-col-9  { flex-basis: calc(75% - var(--web-gap, 24px)); }
  .web-col-10 { flex-basis: calc(83.333% - var(--web-gap, 24px)); }
  .web-col-11 { flex-basis: calc(91.667% - var(--web-gap, 24px)); }
  .web-col-12 { flex-basis: 100%; }
}

.web-page .block + .block { margin-top: var(--web-gap, 24px); }
.web-page .block-hero { text-align: center; padding: 16px 0; }
.web-page .block-hero .hero-sub { font-size: 1.15rem; color: var(--web-muted); max-width: 40ch; margin-inline: auto; }
.web-page .block-hero img { border-radius: var(--web-radius, 12px); margin: 1.25rem auto 0; }
.web-page .block-cta { text-align: center; background: var(--web-alt); border-radius: var(--web-radius, 12px); padding: 40px 24px; }

.web-page .block-columns { display: flex; flex-wrap: wrap; gap: var(--web-gap, 24px); }
.web-page .block-columns .column { flex: 1 1 240px; }

.web-page .block-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.web-page .gallery-item { margin: 0; }
.web-page .gallery-item img { border-radius: var(--web-radius, 12px); aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }

.web-page .block-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--web-gap, 24px); }
.web-page .feature { text-align: center; }
.web-page .feature-icon { font-size: 2rem; line-height: 1; margin-bottom: .5rem; }

.web-page .block-testimonial blockquote { margin: 0; max-width: 46ch; margin-inline: auto; text-align: center; }
.web-page .block-testimonial .quote { font-size: 1.3rem; font-style: italic; }
.web-page .block-testimonial footer { color: var(--web-muted); }
.web-page .block-testimonial .author { font-weight: 600; color: var(--web-fg); }
.web-page .block-testimonial .role::before { content: " — "; }

.web-page .block-faq { max-width: 720px; margin-inline: auto; }
.web-page .faq-item { border-bottom: 1px solid var(--web-border); padding: 12px 0; }
.web-page .faq-item summary { cursor: pointer; font-weight: 600; }
.web-page .faq-answer { padding-top: .5rem; color: var(--web-muted); }

.web-page .block-pricing { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--web-gap, 24px); }
.web-page .pricing-tier { border: 1px solid var(--web-border); border-radius: var(--web-radius, 12px); padding: 24px; text-align: center; }
.web-page .pricing-tier .price { font-size: 2rem; font-weight: 700; color: var(--web-accent); }
.web-page .pricing-tier ul { list-style: none; padding: 0; margin: 0 0 1rem; text-align: left; }
.web-page .pricing-tier li { padding: 4px 0; border-bottom: 1px solid var(--web-border); }

.web-page .block-video .video-frame { position: relative; padding-top: 56.25%; border-radius: var(--web-radius, 12px); overflow: hidden; }
.web-page .block-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.web-page .block-divider hr { border: 0; border-top: 1px solid var(--web-border); margin: 0; }
.web-page .block-divider-space { min-height: 48px; }

.web-page .block-button-wrap { text-align: center; }
.web-page a.block-button {
  display: inline-block;
  background: var(--web-accent);
  color: var(--web-accent-fg);
  padding: 12px 24px;
  border-radius: var(--web-radius, 12px);
  font-weight: 600;
  text-decoration: none;
}
.web-page a.block-button:hover { filter: brightness(0.94); }
.web-page a.block-button.btn-sm { padding: 8px 16px; font-size: .9rem; }
.web-page a.block-button.btn-lg { padding: 16px 34px; font-size: 1.12rem; }
.web-page a.block-button.btn-outline {
  background: transparent; color: var(--web-accent);
  box-shadow: inset 0 0 0 2px var(--web-accent);
}
.web-page a.block-button.btn-outline:hover { background: var(--web-accent); color: var(--web-accent-fg); filter: none; }
/* Buttons can carry their own corner radius (theme "button style"), falling
   back to the site radius when unset. */
.web-page a.block-button, .web-page button.block-button, .web-page .block-button {
  border-radius: var(--web-button-radius, var(--web-radius, 12px));
}

/* Data-bound + form blocks (posts / products / form). */
.web-page .block-heading { text-align: center; margin-bottom: var(--web-gap, 24px); }
.web-page .post-grid, .web-page .product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--web-gap, 24px);
}
.web-page .post-card, .web-page .product-card {
  border: 1px solid var(--web-border);
  border-radius: var(--web-radius, 12px);
  padding: 20px;
  background: var(--web-surface, transparent);
}
.web-page .product-card a { text-decoration: none; color: inherit; }
.web-page .product-card img, .web-page .post-card img {
  width: 100%; height: 160px; object-fit: cover;
  border-radius: var(--web-radius, 12px); margin-bottom: 12px;
}
.web-page .post-card h3, .web-page .product-card h3 { margin: 0 0 8px; }
.web-page .post-excerpt { color: var(--web-muted, inherit); margin: 0; }
.web-page .product-price { font-weight: 600; margin: 4px 0 0; }

/* The shop, rendered inside the themed site (/shop, /shop/<id>, /cart). */
.web-page .shop-bar {
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; margin-bottom: var(--web-gap, 24px); flex-wrap: wrap;
}
.web-page .shop-bar a { color: var(--web-accent); text-decoration: none; font-weight: 600; }
.web-page .product-card .product-price { margin-bottom: 10px; }
.web-page .product-card .block-button, .web-page .product-card .product-soldout { width: 100%; text-align: center; }
.web-page .shop-search { margin: 0 0 var(--web-gap, 24px); max-width: 480px; }
.web-page .shop-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 var(--web-gap, 24px); }
.web-page .shop-chip {
  font-size: .85rem; padding: 5px 14px; border-radius: 999px; text-decoration: none;
  background: var(--web-alt); color: var(--web-fg); border: 1px solid var(--web-border);
}
.web-page .shop-chip.current { background: var(--web-accent); color: var(--web-on-accent, #fff); border-color: var(--web-accent); }
.web-page .product-soldout { color: var(--web-muted, inherit); font-weight: 600; margin: 8px 0 0; }
.web-page .product-detail {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--web-gap, 24px); align-items: start;
}
.web-page .product-detail .product-media img {
  width: 100%; border-radius: var(--web-radius, 12px); object-fit: cover;
}
.web-page .product-detail .product-info h1 { margin-top: 0; }
.web-page .product-buy { display: flex; gap: 12px; align-items: center; margin: 16px 0; }
.web-page .product-qty {
  width: 76px; padding: 10px 12px; border: 1px solid var(--web-border);
  border-radius: var(--web-radius, 12px); background: var(--web-bg); color: inherit;
}
.web-page .product-desc { margin-top: 16px; }
.web-page .cart-page { max-width: 760px; margin-inline: auto; }
.web-page .cart-table { width: 100%; border-collapse: collapse; margin-bottom: 16px; }
.web-page .cart-table th, .web-page .cart-table td {
  text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--web-border);
  vertical-align: middle;
}
.web-page .cart-table th:nth-child(2), .web-page .cart-table td:nth-child(2) { width: 90px; }
.web-page .cart-remove {
  background: none; border: 0; color: var(--web-accent); cursor: pointer;
  font: inherit; padding: 0; text-decoration: underline;
}
.web-page .cart-total { font-size: 1.15rem; font-weight: 700; text-align: right; }
.web-page .cart-error { color: #b91c1c; font-weight: 600; }
.web-page .order-confirm .order-ref { font-size: 1.05rem; margin-bottom: 16px; }
.web-page .order-confirm .order-ref strong { color: var(--web-accent); }
.web-page .order-confirm .order-note { color: var(--web-muted); margin: 16px 0; }
.web-page .cart-coupon { display: flex; gap: 8px; align-items: center; margin: 12px 0; flex-wrap: wrap; }
.web-page .cart-coupon input { flex: 1 1 160px; padding: 8px 10px; border: 1px solid var(--web-border); border-radius: 8px; font: inherit; }
.web-page .cart-discount { text-align: right; color: var(--web-muted); }
.web-page .form-choices { border: 1px solid var(--web-border); border-radius: 10px; padding: 10px 12px; margin: 12px 0; }
.web-page .form-choices legend { font-weight: 600; padding: 0 4px; }
.web-page .form-choices .choice { display: block; padding: 4px 0; }
.web-page .form-choices .choice small { display: block; color: var(--web-muted); margin-left: 22px; }
.web-page .cart-address { margin: 8px 0; }
.web-page .order-steps { display: flex; gap: 8px; list-style: none; padding: 0; margin: 16px 0; }
.web-page .order-steps li { flex: 1; text-align: center; padding: 8px 6px; border-radius: 8px; background: var(--web-alt); color: var(--web-muted); font-size: .9rem; }
.web-page .order-steps li.done { background: var(--web-accent); color: var(--web-accent-fg); }
.web-page .order-fulfil { margin: 6px 0; }
.web-page .order-cancelled { color: #b91c1c; font-weight: 600; }
/* Minimum order quantities and the add-to-cart status line under a button. */
.web-page .product-min { color: var(--web-muted); font-size: .9rem; margin: 4px 0 8px; }
.web-page .shop-msg { color: #b91c1c; font-size: .9rem; margin: 6px 0 0; min-height: 0; }
.web-page .shop-msg:empty { display: none; }
.web-page .cart-error:empty { display: none; }
.web-page .form-hint { display: block; color: var(--web-muted); font-size: .85rem; margin-top: 4px; }
/* Ratings and reviews. The stars are text in the accent colour; the unfilled
   ones are the border colour, so a 3 reads as three of five at a glance. */
.web-page .stars { color: #d97706; letter-spacing: 1px; white-space: nowrap; }
.web-page .stars-empty { color: var(--web-border); }
.web-page .product-rating { margin: 2px 0 6px; font-size: .95rem; }
.web-page .product-rating-link { color: inherit; text-decoration: none; }
.web-page a.product-rating-link:hover .product-rating-text { text-decoration: underline; }
.web-page .product-rating-text { color: var(--web-muted); }
.web-page .product-reviews { max-width: 760px; }
.web-page .review-list { list-style: none; padding: 0; margin: 12px 0 0; }
.web-page .review { padding: 14px 0; border-top: 1px solid var(--web-border); }
.web-page .review-meta { margin: 0 0 6px; }
.web-page .review-date, .web-page .review-verified { color: var(--web-muted); font-size: .9rem; }
.web-page .review-verified { color: #047857; }
/* A customer's words, as plain text: line breaks kept, nothing interpreted. */
.web-page .review-text { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
.web-page .review-page { max-width: 760px; margin-inline: auto; }
.web-page .review-card {
  border: 1px solid var(--web-border); border-radius: var(--web-radius, 12px);
  padding: 16px; margin: 16px 0;
}
.web-page .review-card h2 { margin: 0 0 8px; font-size: 1.15rem; }
.web-page .star-choices .star-choice { display: block; padding: 4px 0; }
.web-page .review-flash {
  background: var(--web-alt); border-radius: var(--web-radius, 12px); padding: 10px 14px;
  font-weight: 600;
}
.web-page .review-given { margin: 0; color: var(--web-muted); }

/* Online booking (/appointments, /appointments/<id>, the manage and rate
   pages). The day strip scrolls sideways inside itself, never the page, and
   the time grid reflows to a phone's width. */
.web-page .booking-page { max-width: 760px; margin-inline: auto; }
.web-page .booking-lead, .web-page .booking-meta, .web-page .booking-note { color: var(--web-muted, inherit); }
.web-page .booking-meta { margin: 0 0 8px; font-weight: 600; }
.web-page .booking-note { font-size: .9rem; margin: 8px 0; }
.web-page .booking-back a, .web-page .booking-link { color: var(--web-accent); font-weight: 600; text-decoration: none; }
.web-page .booking-types { display: grid; gap: var(--web-gap, 24px); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.web-page .booking-type {
  display: flex; flex-direction: column; gap: 6px; padding: 18px 20px;
  border: 1px solid var(--web-border); border-radius: var(--web-radius, 12px);
  color: inherit; text-decoration: none; background: var(--web-bg);
}
.web-page .booking-type:hover { border-color: var(--web-accent); }
.web-page .booking-type h2 { margin: 0; font-size: 1.2rem; }
.web-page .booking-type .booking-desc { margin: 0; flex: 1; }
.web-page .booking-type .block-button { align-self: flex-start; margin-top: 8px; }
.web-page .booking-step { font-size: 1.1rem; margin: 24px 0 10px; }
.web-page .booking-week { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.web-page .booking-range { font-weight: 600; text-align: center; flex: 1; }
.web-page .booking-nav, .web-page .booking-day, .web-page .booking-time {
  font: inherit; cursor: pointer; border: 1px solid var(--web-border);
  background: var(--web-bg); color: var(--web-fg); border-radius: 999px;
}
.web-page .booking-nav { padding: 6px 12px; }
.web-page .booking-nav:disabled { opacity: .4; cursor: default; }
.web-page .booking-days { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 12px; }
.web-page .booking-day { padding: 8px 14px; white-space: nowrap; flex: 0 0 auto; }
.web-page .booking-times { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); margin-bottom: 12px; }
.web-page .booking-time { padding: 10px 0; border-radius: var(--web-radius, 12px); font-weight: 600; }
.web-page .booking-day.selected, .web-page .booking-time.selected,
.web-page .booking-day:hover, .web-page .booking-time:hover {
  background: var(--web-accent); color: var(--web-accent-fg, #fff); border-color: var(--web-accent);
}
.web-page .booking-form, .web-page .booking-move { border-top: 1px solid var(--web-border); padding-top: 16px; margin-top: 8px; }
.web-page .booking-chosen { margin: 0 0 4px; }
.web-page .booking-chosen strong { color: var(--web-accent); }
.web-page .booking-banner {
  padding: 12px 16px; border-radius: var(--web-radius, 12px); background: var(--web-alt);
  border-left: 4px solid var(--web-accent); font-weight: 600;
}
.web-page .booking-summary { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0 0 16px; }
.web-page .booking-summary dt { color: var(--web-muted); }
.web-page .booking-summary dd { margin: 0; font-weight: 600; }
.web-page .booking-status-cancelled { color: #b91c1c; }
.web-page .booking-cancel {
  font: inherit; cursor: pointer; background: none; color: #b91c1c;
  border: 1px solid #b91c1c; border-radius: var(--web-radius, 12px); padding: 9px 16px;
}
.web-page .rating-choices { border: 0; padding: 0; margin: 0; display: grid; gap: 6px; }
.web-page .rating-choices legend { font-weight: 600; margin-bottom: 6px; }
.web-page .rating-choice { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.web-page .rating-choice span { padding: 8px 12px; border: 1px solid var(--web-border); border-radius: var(--web-radius, 12px); flex: 1; }
.web-page .rating-choice b { color: #f59e0b; letter-spacing: 1px; }
.web-page .rating-choice input:checked + span { border-color: var(--web-accent); background: var(--web-alt); }
@media (max-width: 480px) {
  .web-page .booking-summary { grid-template-columns: 1fr; }
  .web-page .booking-summary dd { margin-bottom: 6px; }
}

/* Live-chat widget (a launcher + a polling panel), fixed to the corner of the
   themed site. Outside .web-page because it is chrome, not page content. */
.web-chat { position: fixed; right: 20px; bottom: 20px; z-index: 90;
  font: 14px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.web-chat-launch {
  width: 56px; height: 56px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--web-accent, #2563eb); color: var(--web-accent-fg, #fff);
  font-size: 24px; box-shadow: 0 6px 20px rgba(0,0,0,0.18);
}
.web-chat-panel {
  position: absolute; right: 0; bottom: 68px; width: min(340px, 86vw);
  height: 440px; max-height: 70vh; display: flex; flex-direction: column;
  background: var(--web-bg, #fff); color: var(--web-fg, #0f172a);
  border: 1px solid var(--web-border, #e2e8f0); border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.22); overflow: hidden;
}
/* The panel ships with the `hidden` attribute and the launcher toggles it;
   `display: flex` above outranks the browser's own [hidden] rule, so
   without this the panel stood open on every page load, covering whatever
   sat under the bottom-right corner (the E2E suite found it under an
   "Add to cart" button). */
.web-chat-panel[hidden] { display: none; }
.web-chat-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 14px; font-weight: 700;
  background: var(--web-accent, #2563eb); color: var(--web-accent-fg, #fff);
}
.web-chat-x { background: none; border: 0; color: inherit; font-size: 20px; cursor: pointer; line-height: 1; }
.web-chat-log { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.web-chat-msg { max-width: 80%; padding: 8px 12px; border-radius: 12px; white-space: pre-wrap; word-wrap: break-word; }
.web-chat-msg.from-me { align-self: flex-end; background: var(--web-accent, #2563eb); color: var(--web-accent-fg, #fff); }
.web-chat-msg.from-them { align-self: flex-start; background: var(--web-alt, #f1f5f9); color: var(--web-fg, #0f172a); }
.web-chat-note { align-self: center; color: var(--web-muted, #64748b); font-size: 0.85em; }
.web-chat-form { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--web-border, #e2e8f0); }
.web-chat-form input {
  flex: 1; padding: 9px 12px; border: 1px solid var(--web-border, #e2e8f0);
  border-radius: 10px; background: var(--web-bg, #fff); color: inherit;
}
.web-chat-form .block-button { padding: 9px 14px; }

.web-page .block-team .team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--web-gap, 24px);
}
.web-page .team-member { text-align: center; }
.web-page .team-member .member-photo {
  width: 128px; height: 128px; object-fit: cover;
  border-radius: 50%; margin: 0 auto 12px;
}
.web-page .team-member .member-name { margin: 0; }
.web-page .team-member .member-role { color: var(--web-muted, inherit); margin: 2px 0 0; }

.web-page .block-events .event-grid { display: grid; gap: 14px; max-width: 760px; margin-inline: auto; }
.web-page .event-card {
  display: grid; grid-template-columns: max-content 1fr; column-gap: 20px; row-gap: 2px;
  border: 1px solid var(--web-border); border-radius: var(--web-radius, 12px); padding: 16px 20px;
}
.web-page .event-card .event-when {
  grid-row: 1 / span 3; align-self: start; font-weight: 600; color: var(--web-accent);
  white-space: nowrap;
}
.web-page .event-card h3 { margin: 0; }
.web-page .event-card .event-location { color: var(--web-muted, inherit); margin: 0; font-size: 0.9em; }
.web-page .event-card .event-desc { margin: 4px 0 0; }
@media (max-width: 480px) {
  .web-page .event-card { grid-template-columns: 1fr; }
  .web-page .event-card .event-when { grid-row: auto; }
}

.web-page .block-form { max-width: 560px; margin-inline: auto; }
.web-page .web-form { display: flex; flex-direction: column; gap: 14px; }
.web-page .form-field { display: flex; flex-direction: column; gap: 4px; }
.web-page .form-field span { font-weight: 600; font-size: 0.9em; }
.web-page .web-form input, .web-page .web-form textarea {
  padding: 10px 12px;
  border: 1px solid var(--web-border);
  border-radius: var(--web-radius, 12px);
  font: inherit;
  background: var(--web-surface, #fff);
  color: inherit;
}
.web-page .web-form button { align-self: flex-start; cursor: pointer; border: 0; }
/* The honeypot is never shown to a human. */
.web-page .form-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Editor-only placeholder for a block with nothing to show yet. */
.web-page .block-placeholder {
  border: 2px dashed var(--web-border);
  border-radius: var(--web-radius, 12px);
  padding: 28px;
  text-align: center;
  color: var(--web-muted, #999);
  font-size: 0.9em;
}

/* Server-rendered blog reader. */
.web-page .blog-index { display: grid; gap: var(--web-gap, 24px); }
.web-page .blog-post { max-width: 720px; margin-inline: auto; }
.web-page .blog-post .post-meta { color: var(--web-muted, inherit); font-size: 0.9em; margin-bottom: var(--web-gap, 24px); }
.web-page .form-thanks { text-align: center; max-width: 560px; margin-inline: auto; }

/* Blog pager, comments, and site search. */
.web-page .blog-pager { display: flex; justify-content: space-between; gap: 12px; max-width: 720px; margin: var(--web-gap, 24px) auto 0; }
.web-page .blog-pager a { text-decoration: none; font-weight: 600; }
.web-page .blog-comments { max-width: 720px; margin: var(--web-gap, 24px) auto 0; border-top: 1px solid var(--web-border); padding-top: var(--web-gap, 24px); }
.web-page .comment-list { list-style: none; padding: 0; margin: 0 0 var(--web-gap, 24px); display: grid; gap: 14px; }
.web-page .comment { border: 1px solid var(--web-border); border-radius: var(--web-radius, 12px); padding: 12px 16px; }
.web-page .comment-meta { font-weight: 600; font-size: .9em; margin: 0 0 .3em; }
.web-page .comment-empty { color: var(--web-muted); }
.web-page .comment-form { max-width: 100%; margin-top: 8px; }
.web-page .block-search { max-width: 640px; margin-inline: auto; }
.web-page .search-form { flex-direction: row; gap: 8px; }
.web-page .search-form input[type="search"] { flex: 1; padding: 10px 12px; border: 1px solid var(--web-border); border-radius: var(--web-radius, 12px); font: inherit; }
.web-page .search-results { list-style: none; padding: 0; margin: var(--web-gap, 24px) 0 0; display: grid; gap: 16px; }
.web-page .search-results a { font-weight: 600; }
.web-page .search-hit { display: grid; gap: 2px; }
.web-page .search-kind { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--web-muted); }
.web-page .search-snippet { margin: 0; color: var(--web-muted); font-size: .92rem; }
.web-page .search-snippet mark { background: color-mix(in srgb, var(--web-accent) 22%, transparent); color: inherit; padding: 0 1px; border-radius: 2px; }
/* Help centre */
.web-page .help-cat { margin: 1.5em 0 .4em; font-size: 1.15rem; }
.web-page .help-index { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.web-page .help-index a { font-weight: 600; text-decoration: none; }
.web-page .help-index a:hover { text-decoration: underline; }
.web-page .help-back { margin: 0 0 12px; }
.web-page .help-back a { color: var(--web-muted); text-decoration: none; font-size: .9rem; }
.web-page .help-article { max-width: 760px; margin-inline: auto; }
/* Events listing */
.web-page .event-list { display: grid; gap: var(--web-gap, 24px); max-width: 760px; margin-inline: auto; }
.web-page .event-card { border: 1px solid var(--web-border); border-radius: var(--web-radius, 12px); padding: 16px 18px; }
.web-page .event-card h3 { margin: 4px 0; }
.web-page .event-card h3 a { text-decoration: none; }
.web-page .event-card .event-when { color: var(--web-accent); font-weight: 600; margin: 0; font-size: .9rem; }
.web-page .event-card .event-location { color: var(--web-muted); margin: 2px 0 0; font-size: .9rem; }
.web-page .post-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }
.web-page .tag-chip { font-size: .78rem; padding: 2px 10px; border-radius: 999px; background: var(--web-alt); color: var(--web-muted); text-decoration: none; }
.web-page .tag-chip:hover { color: var(--web-accent); }
.web-page .event-detail { max-width: 720px; margin-inline: auto; }
.web-page .event-detail .event-when { color: var(--web-accent); font-weight: 600; }
.web-page .event-register { margin-top: var(--web-gap, 24px); border-top: 1px solid var(--web-border); padding-top: var(--web-gap, 24px); max-width: 560px; }

/* --- Site chrome: header, navigation, footer -------------------------------
 *
 * The public document is `<body class="web-site">` with a `.web-header`, a
 * `<main class="web-page">`, and a `.web-footer`. The header and footer sit
 * OUTSIDE `.web-page`, so — until this block — the block stylesheet styled the
 * page body but never the chrome, and a site's navigation rendered as a bare
 * bullet list on a marginless page. These rules give the generated header/
 * footer a real design; a custom header/footer authored on the canvas also
 * carries `web-page`, so the block rules above style its blocks as usual and
 * these `.web-header`/`.web-footer` rules only supply the outer frame.
 *
 * Scoped under `.web-site` (the public body) so nothing here can reach the
 * admin app or the canvas editor, and every value is a theme token with a
 * sober fallback — the same tokens the page body reads, so chrome and content
 * restyle together. */
.web-site {
  --web-fg: var(--web-color-fg, #1e293b);
  --web-muted: var(--web-color-muted, #64748b);
  --web-bg: var(--web-color-bg, #ffffff);
  --web-alt: var(--web-color-alt, #f8fafc);
  --web-accent: var(--web-color-accent, #2563eb);
  --web-accent-fg: var(--web-color-accent-fg, #ffffff);
  --web-border: var(--web-color-border, #e2e8f0);
  --web-font: var(--web-font-body, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
  --web-font-head: var(--web-font-heading, var(--web-font));
  --web-accent-2: var(--web-color-accent-2, var(--web-accent));
  --web-accent-2-fg: var(--web-color-accent-2-fg, var(--web-accent-fg));
  margin: 0;
  color: var(--web-fg);
  background: var(--web-bg);
  font-family: var(--web-font);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.web-site > main.web-page { flex: 1 0 auto; }
/* A page not built from sections (a pre-builder text page, the blog, the
   shop, search, events, booking, a thank-you or a 404) sits in the content
   column with the page's margins. Before this every one of them ran edge to
   edge: the heading touched the left side of the window, with no space above
   it. `width` (not `max-width`) so a page's own narrower measure — the blog's
   720px, the cart's 760px — still applies on top. */
.web-site > main.web-page > :not(.web-section):not(.web-prose) {
  width: min(100% - 40px, var(--web-max, 1080px));
  margin-inline: auto;
}
.web-site > main.web-page > :not(.web-section):not(.web-prose):first-child {
  margin-top: clamp(28px, 6vw, var(--web-section-y, 56px));
}
.web-site > main.web-page > :not(.web-section):not(.web-prose):last-child {
  margin-bottom: clamp(36px, 7vw, calc(var(--web-section-y, 56px) * 1.25));
}
/* A pre-builder page's single body: one comfortable reading column. */
.web-page .web-prose {
  max-width: 760px; margin-inline: auto;
  padding: clamp(32px, 6vw, var(--web-section-y, 56px)) 20px
           clamp(40px, 7vw, calc(var(--web-section-y, 56px) * 1.25));
  font-size: 1.05rem;
}
.web-page .web-prose > h1:first-child {
  font-size: clamp(2.1rem, 5vw, 3.1rem); letter-spacing: -.02em; margin-bottom: .45em;
}
.web-page .web-prose > h1:first-child + p { font-size: 1.15rem; color: var(--web-muted); }
.web-page .web-prose h2 { margin-top: 1.4em; }
.web-page .web-prose img { border-radius: var(--web-radius, 12px); margin: 1.25em 0; }

.web-header {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--web-bg) 92%, transparent);
  -webkit-backdrop-filter: saturate(1.3) blur(8px);
  backdrop-filter: saturate(1.3) blur(8px);
  border-bottom: 1px solid var(--web-border);
}
.web-header-inner {
  max-width: var(--web-max, 1080px); margin: 0 auto;
  display: flex; align-items: center; gap: 20px;
  padding: 12px 20px;
}
.web-brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--web-font-head); font-weight: 700; font-size: 1.15rem;
  color: var(--web-fg); text-decoration: none; margin-right: auto;
}
.web-brand img { height: 34px; width: auto; display: block; }
/* The header's Sign in button — the way staff reach the software from the
 * public site (seven/api/site.py `_signin_html`). A solid accent button, so it
 * reads as the one action in the header rather than another menu item. */
.web-signin {
  display: inline-flex; align-items: center; white-space: nowrap;
  padding: 8px 16px; border-radius: var(--web-radius, 12px);
  background: var(--web-accent); color: var(--web-accent-fg);
  font-weight: 600; font-size: .95rem; line-height: 1.2; text-decoration: none;
}
.web-signin:hover { filter: brightness(1.08); }
.web-signin:focus-visible { outline: 2px solid var(--web-accent); outline-offset: 2px; }

.web-nav, .web-subnav { list-style: none; margin: 0; padding: 0; }
.web-nav { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.web-nav > li { position: relative; }
.web-nav a {
  display: block; padding: 8px 12px; border-radius: var(--web-radius, 12px);
  color: var(--web-fg); text-decoration: none;
  font-weight: 500; font-size: .95rem; line-height: 1.2; white-space: nowrap;
}
.web-nav a:hover { background: var(--web-alt); color: var(--web-accent); }
.web-subnav {
  position: absolute; top: 100%; left: 0; min-width: 190px;
  background: var(--web-bg); border: 1px solid var(--web-border);
  border-radius: var(--web-radius, 12px); padding: 6px;
  box-shadow: 0 12px 28px rgba(15, 23, 42, .14);
  opacity: 0; visibility: hidden; transform: translateY(4px);
  transition: opacity .12s ease, transform .12s ease; z-index: 30;
}
.web-nav > li:hover > .web-subnav,
.web-nav > li:focus-within > .web-subnav {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.web-subnav a { font-weight: 400; }
.web-nav-heading { display: block; padding: 8px 12px; color: var(--web-fg); font-weight: 500; font-size: .95rem; cursor: default; }

/* Header modes. "static" un-pins the header; "transparent" overlays it on the
   first section (light text, no border) until the visitor scrolls, when the
   body gains `web-header-solid` and it returns to the normal solid header. */
.web-header-static .web-header { position: static; }
.web-header-overlay .web-header {
  position: fixed; left: 0; right: 0; top: 0;
  background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none;
  border-bottom-color: transparent; transition: background .2s ease, border-color .2s ease;
}
.web-header-overlay .web-header .web-brand,
.web-header-overlay .web-header .web-nav a,
.web-header-overlay .web-header .web-nav-heading { color: #fff; }
.web-header-overlay.web-header-solid .web-header {
  position: sticky;
  background: color-mix(in srgb, var(--web-bg) 92%, transparent);
  -webkit-backdrop-filter: saturate(1.3) blur(8px); backdrop-filter: saturate(1.3) blur(8px);
  border-bottom-color: var(--web-border);
}
.web-header-overlay.web-header-solid .web-header .web-brand,
.web-header-overlay.web-header-solid .web-header .web-nav a,
.web-header-overlay.web-header-solid .web-header .web-nav-heading { color: var(--web-fg); }
/* Clear the fixed header so the first section isn't hidden behind it. */
.web-header-overlay main.web-page > .web-section:first-child { padding-top: 84px; }

/* Mega menu: a wide, multi-column panel instead of a narrow dropdown. */
.web-nav > li.web-has-mega { position: static; }
.web-mega-panel {
  left: 0; right: 0; width: 100%;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 4px 24px; padding: 18px 24px;
}
.web-mega-panel li { min-width: 0; }

/* Announcement popup */
.web-popup { position: fixed; inset: 0; z-index: 2147482000; display: flex;
  align-items: center; justify-content: center; padding: 16px;
  background: rgba(15, 23, 42, .5); }
.web-popup-card { position: relative; background: var(--web-bg); color: var(--web-fg);
  border-radius: var(--web-radius, 12px); padding: 28px 30px; max-width: 420px; width: 100%;
  box-shadow: 0 20px 50px rgba(15, 23, 42, .3); text-align: center; }
.web-popup-card h2 { margin: 0 0 8px; }
.web-popup-card p { margin: 0 0 16px; color: var(--web-muted); }
.web-popup-x { position: absolute; top: 8px; right: 12px; border: 0; background: none;
  font-size: 1.5rem; line-height: 1; color: var(--web-muted); cursor: pointer; }

.web-langs { display: flex; gap: 4px; align-items: center; }
.web-langs a {
  padding: 4px 9px; border-radius: 999px; font-size: .8rem;
  color: var(--web-muted); text-decoration: none;
}
.web-langs a.current { background: var(--web-accent); color: var(--web-accent-fg); }

.web-footer {
  margin-top: auto; background: var(--web-alt);
  border-top: 1px solid var(--web-border); color: var(--web-muted);
}
.web-footer-inner {
  max-width: var(--web-max, 1080px); margin: 0 auto; padding: 28px 20px; font-size: .9rem;
}
.web-footer.web-custom { padding: 0; }

/* Mobile: the nav drops under the brand and its dropdowns open inline rather
 * than overflowing the viewport. */
@media (max-width: 640px) {
  .web-header-inner { flex-wrap: wrap; gap: 8px 16px; }
  .web-brand { margin-right: 0; }
  /* Keep Sign in on the brand's row, at the right; the nav wraps below. */
  .web-signin { order: 1; margin-left: auto; padding: 7px 14px; }
  .web-nav, .web-langs { order: 2; }
  .web-nav { width: 100%; overflow-x: auto; }
  .web-subnav {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: 0; padding: 0 0 0 12px;
  }
}

/* Cookie-consent banner (sits at the bottom of the public body, not the page). */
.web-cookiebar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; gap: 16px; align-items: center; justify-content: center;
  flex-wrap: wrap; padding: 12px 20px; font-size: .9rem;
  background: var(--web-color-fg, #1e293b); color: var(--web-color-bg, #ffffff);
}
.web-cookiebar button {
  border: 0; border-radius: 999px; padding: 6px 18px; cursor: pointer;
  font: inherit; font-weight: 600;
  background: var(--web-color-accent, #2563eb); color: var(--web-color-accent-fg, #ffffff);
}

/* A live site's themed not-found page (a 404 rendered inside the chrome). */
.web-page .web-404 { text-align: center; max-width: 560px; margin: 8vh auto; }
.web-page .web-404 h1 {
  font-size: clamp(3rem, 12vw, 6rem); margin: 0; color: var(--web-accent);
}
.web-page .web-404 p { color: var(--web-muted); font-size: 1.1rem; }

/* The banner on a shared draft preview (/api/site/preview/<token>) so the
   viewer always knows this is an unpublished, revocable link and never the
   live page. */
.web-page .web-draft-ribbon {
  margin: 0 0 24px; padding: 10px 16px; border-radius: 8px;
  background: #b45309; color: #fff; font-weight: 600; text-align: center;
}


/* --- Customize depth (Odoo parity): class-valued options -------------------
   Shadows, content widths, corner rounding and appear animations come from a
   designed set so an author picks a look rather than typing a raw value. */
.web-shadow-sm { box-shadow: 0 1px 3px rgba(0,0,0,.10); }
.web-shadow-md { box-shadow: 0 4px 12px rgba(0,0,0,.12); }
.web-shadow-lg { box-shadow: 0 12px 28px rgba(0,0,0,.16); }
.web-shadow-xl { box-shadow: 0 24px 60px rgba(0,0,0,.22); }
.web-round-sm { border-radius: 6px; overflow: hidden; }
.web-round-md { border-radius: 14px; overflow: hidden; }
.web-round-lg { border-radius: 28px; overflow: hidden; }
.web-round-full { border-radius: 9999px; overflow: hidden; }
/* Content width applies to a section's inner row (a section is full-bleed). */
.web-section.web-w-narrow > .web-row { max-width: 640px; }
.web-section.web-w-normal > .web-row { max-width: 960px; }
.web-section.web-w-wide > .web-row { max-width: 1200px; }
.web-section.web-w-full > .web-row { max-width: none; }
/* On a row or column, width caps the element itself and centres it. */
.web-row.web-w-narrow, .web-col.web-w-narrow { max-width: 640px; margin-inline: auto; }
.web-row.web-w-normal, .web-col.web-w-normal { max-width: 960px; margin-inline: auto; }
.web-row.web-w-wide, .web-col.web-w-wide { max-width: 1200px; margin-inline: auto; }

/* Appear animations: pure CSS, fired once on load — no script on the public
   site. Respect reduced-motion by disabling the transform/opacity entirely. */
.web-anim { animation-duration: .7s; animation-fill-mode: both; animation-timing-function: cubic-bezier(.2,.7,.2,1); }
.web-anim-fade { animation-name: webFade; }
.web-anim-fade-up { animation-name: webFadeUp; }
.web-anim-fade-down { animation-name: webFadeDown; }
.web-anim-zoom { animation-name: webZoom; }
.web-anim-slide-left { animation-name: webSlideLeft; }
.web-anim-slide-right { animation-name: webSlideRight; }
@keyframes webFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes webFadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes webFadeDown { from { opacity: 0; transform: translateY(-24px); } to { opacity: 1; transform: none; } }
@keyframes webZoom { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }
@keyframes webSlideLeft { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }
@keyframes webSlideRight { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .web-anim { animation: none !important; }
}
/* Scroll-reveal. With JavaScript the public site adds `web-reveal` to <html>
   (see the reveal script in seven/api/site.py), and an entrance animation then
   waits until its element scrolls into view (`web-in`) instead of all firing at
   once on load. Without JS the class is never added, so `.web-anim` plays on
   load exactly as before — content is never left hidden behind a script that
   did not run. `web-reveal` is only set on the public document, so the canvas
   (which also loads this stylesheet) is unaffected. */
html.web-reveal .web-anim { animation-play-state: paused; }
html.web-reveal .web-anim.web-in { animation-play-state: running; }

/* Per-breakpoint visibility (a block/container's Customize → Visibility). */
@media (max-width: 640px) { .web-hide-mobile { display: none !important; } }
@media (min-width: 641px) { .web-hide-desktop { display: none !important; } }

/* One-page navigation: a `#anchor` link lands below the sticky header, and
   (with JS, and unless the visitor asked for reduced motion) scrolls smoothly.
   Both scoped to the public document via `.web-section` / `html.web-reveal`. */
.web-section { scroll-margin-top: 84px; }
@media (prefers-reduced-motion: no-preference) {
  html.web-reveal { scroll-behavior: smooth; }
}


/* --- v2 static content blocks (Odoo-parity snippet breadth) ---------------- */
.web-page .block-title { text-align: center; max-width: 760px; margin-inline: auto; }
.web-page .title-heading { margin: 0 0 8px; }
.web-page .title-sub { color: var(--web-muted, inherit); font-size: 1.1rem; margin: 0; }

.web-page .block-media-text {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--web-gap, 24px);
  align-items: center; max-width: 1100px; margin-inline: auto;
}
.web-page .block-media-text.block-media-text-rev .mt-media { order: -1; }
.web-page .block-media-text .mt-media img { width: 100%; border-radius: var(--web-radius, 12px); object-fit: cover; }
.web-page .block-media-text .mt-heading { margin-top: 0; }
@media (max-width: 720px) { .web-page .block-media-text { grid-template-columns: 1fr; } }

.web-page .block-numbers .stat-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--web-gap, 24px); text-align: center;
}
.web-page .stat-value { font-size: clamp(2rem, 5vw, 3rem); font-weight: 800; color: var(--web-accent); line-height: 1; }
.web-page .stat-label { color: var(--web-muted, inherit); margin-top: 6px; }

.web-page .block-steps .step-list { list-style: none; margin: 0 auto; padding: 0; max-width: 780px; display: grid; gap: 18px; }
.web-page .step { display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: start; }
.web-page .step-n { width: 44px; height: 44px; border-radius: 50%; background: var(--web-accent); color: var(--web-accent-fg, #fff); display: grid; place-items: center; font-weight: 700; }
.web-page .step-title { margin: 4px 0 4px; }

.web-page .block-timeline .tl-list { list-style: none; margin: 0 auto; padding: 0 0 0 20px; max-width: 780px; border-left: 2px solid var(--web-border); display: grid; gap: 22px; }
.web-page .tl-item { position: relative; }
.web-page .tl-item::before { content: ""; position: absolute; left: -27px; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--web-accent); }
.web-page .tl-when { font-weight: 700; color: var(--web-accent); }
.web-page .tl-title { margin: 2px 0 4px; }

.web-page .block-accordion { max-width: 780px; margin-inline: auto; }
.web-page .acc-item { border: 1px solid var(--web-border); border-radius: var(--web-radius, 12px); margin-bottom: 10px; overflow: hidden; }
.web-page .acc-q { cursor: pointer; padding: 14px 18px; font-weight: 600; list-style: none; }
.web-page .acc-q::-webkit-details-marker { display: none; }
.web-page .acc-q::after { content: "+"; float: right; color: var(--web-muted); }
.web-page details[open] > .acc-q::after { content: "\2212"; }
.web-page .acc-a { padding: 0 18px 16px; }

.web-page .block-tabs { max-width: 860px; margin-inline: auto; }
.web-page .tab-heads { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--web-border); }
.web-page .tab-radio { position: absolute; opacity: 0; pointer-events: none; }
.web-page .tab-label { padding: 10px 16px; cursor: pointer; color: var(--web-muted); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.web-page .tab-pane { display: none; padding: 20px 2px; }
/* Reveal the pane whose radio (immediately preceding its label) is checked. */
.web-page .tab-radio:checked + .tab-label { color: var(--web-accent); border-bottom-color: var(--web-accent); font-weight: 600; }
.web-page .tab-radio:nth-of-type(1):checked ~ .tab-panes .tab-pane:nth-child(1),
.web-page .tab-radio:nth-of-type(2):checked ~ .tab-panes .tab-pane:nth-child(2),
.web-page .tab-radio:nth-of-type(3):checked ~ .tab-panes .tab-pane:nth-child(3),
.web-page .tab-radio:nth-of-type(4):checked ~ .tab-panes .tab-pane:nth-child(4),
.web-page .tab-radio:nth-of-type(5):checked ~ .tab-panes .tab-pane:nth-child(5),
.web-page .tab-radio:nth-of-type(6):checked ~ .tab-panes .tab-pane:nth-child(6) { display: block; }

.web-page .block-logos .logo-strip { display: flex; flex-wrap: wrap; gap: 32px; align-items: center; justify-content: center; }
.web-page .logo-item img { max-height: 48px; width: auto; filter: grayscale(1); opacity: .7; transition: filter .2s, opacity .2s; }
.web-page .logo-item img:hover { filter: none; opacity: 1; }

.web-page .block-quote { max-width: 760px; margin-inline: auto; text-align: center; }
.web-page .pq { margin: 0; }
.web-page .pq-text { font-size: clamp(1.3rem, 3vw, 1.8rem); font-weight: 500; font-style: italic; }
.web-page .pq-cite { color: var(--web-muted); font-style: normal; }

.web-page .block-alert { max-width: 780px; margin-inline: auto; border-radius: var(--web-radius, 12px); padding: 14px 18px; border: 1px solid; }
.web-page .alert-info { background: #eff6ff; border-color: #bfdbfe; color: #1e40af; }
.web-page .alert-success { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }
.web-page .alert-warning { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.web-page .alert-danger { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.web-page .block-alert > :first-child { margin-top: 0; } .web-page .block-alert > :last-child { margin-bottom: 0; }

.web-page .block-progress { max-width: 720px; margin-inline: auto; display: grid; gap: 16px; }
.web-page .pr-head { display: flex; justify-content: space-between; font-size: .9em; margin-bottom: 4px; }
.web-page .pr-track { height: 10px; border-radius: 999px; background: var(--web-alt, #f1f5f9); overflow: hidden; }
.web-page .pr-fill { height: 100%; background: var(--web-accent); border-radius: 999px; }

.web-page .block-rating { text-align: center; }
.web-page .stars .star { color: #d1d5db; font-size: 1.6rem; }
.web-page .stars .star.on { color: #f59e0b; }
.web-page .rating-label { margin-left: 8px; color: var(--web-muted); }

.web-page .block-social .social-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.web-page .social-link { text-decoration: none; border: 1px solid var(--web-border); border-radius: 999px; padding: 8px 16px; color: inherit; font-weight: 600; }
.web-page .social-link:hover { border-color: var(--web-accent); color: var(--web-accent); }

.web-page .block-cardgrid .cg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--web-gap, 24px); }
.web-page .cg-card { border: 1px solid var(--web-border); border-radius: var(--web-radius, 12px); padding: 22px; background: var(--web-surface, transparent); }
.web-page .cg-img { width: 100%; height: 150px; object-fit: cover; border-radius: var(--web-radius, 12px); margin-bottom: 12px; }
.web-page .cg-icon { font-size: 2rem; margin-bottom: 8px; }
.web-page .cg-title { margin: 0 0 8px; }
.web-page a.cg-link { display: inline-block; margin-top: 8px; color: var(--web-accent); font-weight: 600; text-decoration: none; }

/* Newsletter (email capture). */
.web-page .block-newsletter { text-align: center; }
.web-page .block-newsletter .nl-sub { color: var(--web-muted); max-width: 46ch; margin: 0 auto 1rem; }
.web-page .nl-form .nl-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; max-width: 520px; margin: 0 auto; }
.web-page .nl-form input[type=email] { flex: 1 1 220px; min-width: 0; padding: 12px 14px; border: 1px solid var(--web-border); border-radius: var(--web-button-radius, var(--web-radius, 12px)); background: var(--web-bg); color: inherit; }
.web-page .nl-form .nl-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Share-this-page links. */
.web-page .block-share .share-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.web-page .share-link { text-decoration: none; border: 1px solid var(--web-border); border-radius: 999px; padding: 8px 16px; color: inherit; font-weight: 600; }
.web-page .share-link:hover { border-color: var(--web-accent); color: var(--web-accent); }

/* Dismissible announcement banner (CSS-only close). */
.web-page .block-banner { padding: 0; }
.web-page .bn-toggle { position: absolute; opacity: 0; pointer-events: none; }
.web-page .bn-bar { display: flex; align-items: center; gap: 12px; justify-content: center; flex-wrap: wrap; background: var(--web-accent); color: var(--web-accent-fg); padding: 12px 20px; }
.web-page .bn-toggle:checked ~ .bn-bar { display: none; }
.web-page .bn-text { font-weight: 600; }
.web-page a.bn-cta { color: inherit; text-decoration: underline; font-weight: 700; }
.web-page .bn-close { cursor: pointer; margin-left: auto; opacity: .85; font-weight: 700; }
.web-page .bn-close:hover { opacity: 1; }

/* --- The site kit (docs/17, "The site kit") -------------------------------
   Section tones, the richer hero, icon features, image cards, testimonials,
   icon lists, the brand block, the header's top bar and call-to-action, and
   the full default footer. */

/* A section centres its rows vertically, so a section given a minimum height
   (a cover hero) holds its content in the middle of the band. */
.web-section { display: flex; flex-direction: column; justify-content: center; }
.web-section > .web-row { width: 100%; }

/* Tones: colour bands from the theme, never typed colours. Each re-points the
   page's own variables, so every block inside restyles itself. */
.web-tone-alt { background-color: var(--web-alt); }
.web-tone-surface { background-color: var(--web-color-bg, #ffffff); }
.web-tone-dark {
  background-color: color-mix(in srgb, var(--web-color-ink, var(--web-color-fg, #0f172a)) 92%, #000);
  --web-fg: #f8fafc; --web-muted: rgba(248, 250, 252, .74);
  --web-border: rgba(248, 250, 252, .16); --web-alt: rgba(255, 255, 255, .06);
  --web-surface: rgba(255, 255, 255, .04);
  color: var(--web-fg);
}
.web-tone-accent {
  background-color: var(--web-color-accent, #2563eb);
  --web-fg: var(--web-color-accent-fg, #ffffff);
  /* Secondary text on the accent is the accent's own text colour: a paler
     tint of it fell below a readable contrast on most brand colours. */
  --web-muted: var(--web-color-accent-fg, #ffffff);
  --web-border: color-mix(in srgb, var(--web-color-accent-fg, #ffffff) 26%, transparent);
  --web-alt: color-mix(in srgb, var(--web-color-accent-fg, #ffffff) 10%, transparent);
  --web-surface: color-mix(in srgb, var(--web-color-accent-fg, #ffffff) 8%, transparent);
  --web-accent: var(--web-color-accent-fg, #ffffff);
  --web-accent-fg: var(--web-color-accent, #2563eb);
  color: var(--web-fg);
}
.web-tone-image {
  --web-fg: #ffffff; --web-muted: rgba(255, 255, 255, .86);
  --web-border: rgba(255, 255, 255, .3);
  color: var(--web-fg);
}
.web-tone-image h1, .web-tone-image h2, .web-tone-image h3 { text-shadow: 0 2px 18px rgba(0, 0, 0, .25); }
.web-tone-image .block-hero a.block-button.btn-outline,
.web-tone-dark a.block-button.btn-outline {
  color: #fff; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .85);
}
.web-tone-image .block-hero a.block-button.btn-outline:hover,
.web-tone-dark a.block-button.btn-outline:hover { background: #fff; color: var(--web-color-ink, var(--web-color-fg, #0f172a)); }
.web-tone-dark a, .web-tone-accent a:not(.block-button), .web-tone-image a:not(.block-button) { color: inherit; }

/* Headings a block carries above its own content. */
.web-page .block-heading { letter-spacing: -.01em; }
.web-page .block-sub {
  text-align: center; color: var(--web-muted); max-width: 60ch;
  margin: calc(var(--web-gap, 24px) * -.6) auto var(--web-gap, 24px); font-size: 1.05rem;
}
.web-page a.block-button { transition: filter .15s ease, transform .15s ease, background .15s ease; }
.web-page a.block-button:hover { transform: translateY(-1px); }

/* The hero: an eyebrow line, two buttons, left and split layouts. */
.web-page .hero-eyebrow {
  display: inline-block; margin: 0 0 14px; padding: 5px 14px; border-radius: 999px;
  font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  background: color-mix(in srgb, var(--web-accent) 14%, transparent);
  /* The accent deepened a little toward the text colour, so the small
     capitals stay readable on their own tinted chip. */
  color: color-mix(in srgb, var(--web-accent) 72%, var(--web-fg));
}
.web-tone-image .hero-eyebrow, .web-tone-dark .hero-eyebrow, .web-tone-accent .hero-eyebrow {
  background: rgba(255, 255, 255, .16); color: #fff;
}
.web-page .block-hero h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); letter-spacing: -.02em; }
.web-page .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 8px; }
.web-page .block-hero.hero-left { text-align: left; }
.web-page .block-hero.hero-left .hero-sub { margin-inline: 0; max-width: 52ch; }
.web-page .block-hero.hero-left .hero-actions { justify-content: flex-start; }
.web-page .block-hero.hero-left h1 { max-width: 18ch; }
.web-page .block-hero.hero-split {
  display: grid; grid-template-columns: 1.05fr 1fr; gap: calc(var(--web-gap, 24px) * 2);
  align-items: center; text-align: left;
}
.web-page .hero-split .hero-sub { margin-inline: 0; max-width: 46ch; }
.web-page .hero-split .hero-actions { justify-content: flex-start; }
.web-page .hero-split .hero-media img {
  width: 100%; border-radius: calc(var(--web-radius, 12px) * 1.5); margin: 0;
  aspect-ratio: 4 / 3; object-fit: cover; box-shadow: 0 24px 60px rgba(15, 23, 42, .18);
}
.web-tone-image .block-hero .hero-sub, .web-tone-dark .block-hero .hero-sub,
.web-tone-accent .block-hero .hero-sub { color: var(--web-muted); }
@media (max-width: 820px) {
  .web-page .block-hero.hero-split { grid-template-columns: 1fr; }
}

/* Features: icon marks, cards and side-by-side layouts, fixed columns. */
.web-page .feature-icon.is-svg {
  width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 16px;
  display: grid; place-items: center; font-size: 0;
  background: color-mix(in srgb, var(--web-accent) 12%, transparent); color: var(--web-accent);
}
.web-page .feature-icon.is-svg svg, .web-page .cg-icon.is-svg svg { width: 28px; height: 28px; }
.web-page .feature-title { margin-bottom: .35em; }
.web-page .feature-body > :last-child { margin-bottom: 0; }
.web-page .feature-body p { color: var(--web-muted); }
.web-page a.feature-link, .web-page a.post-more {
  display: inline-block; margin-top: 8px; font-weight: 600; text-decoration: none; color: var(--web-accent);
}
.web-page a.feature-link::after, .web-page a.post-more::after, .web-page a.cg-link::after { content: " \2192"; }
.web-page .block-features.features-cards .feature {
  background: var(--web-surface, var(--web-bg)); border: 1px solid var(--web-border);
  border-radius: calc(var(--web-radius, 12px) * 1.25); padding: 28px 24px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04); transition: transform .18s ease, box-shadow .18s ease;
}
.web-page .block-features.features-cards .feature:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(15, 23, 42, .1); }
.web-page .block-features.features-left .feature { display: flex; gap: 16px; text-align: left; align-items: flex-start; }
.web-page .block-features.features-left .feature-icon { flex: 0 0 auto; margin: 0; }
.web-page .block-features.features-left .feature-icon:not(.is-svg) { font-size: 1.8rem; }
.web-page .block-features.features-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.web-page .block-features.features-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.web-page .block-features.features-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Cards: a picture flush to the top edge, a badge, a lift on hover. */
.web-page .cg-grid.cg-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.web-page .cg-grid.cg-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.web-page .cg-grid.cg-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.web-page .cg-card {
  display: flex; flex-direction: column; overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease;
}
.web-page .cg-card:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(15, 23, 42, .1); }
.web-page .cg-card.has-img { padding: 0; }
.web-page .cg-card.has-img .cg-img { height: 190px; border-radius: 0; margin: 0; }
.web-page .cg-card.has-img .cg-body { padding: 20px 22px 24px; }
.web-page .cg-body { display: flex; flex-direction: column; flex: 1; }
.web-page .cg-body > p:last-of-type { color: var(--web-muted); }
.web-page .cg-body a.cg-link { margin-top: auto; padding-top: 8px; }
.web-page .cg-icon.is-svg {
  width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--web-accent) 12%, transparent); color: var(--web-accent); margin-bottom: 14px;
}
.web-page .cg-badge {
  align-self: flex-start; font-size: .75rem; font-weight: 700; letter-spacing: .04em;
  padding: 3px 10px; border-radius: 999px; margin-bottom: 10px;
  background: color-mix(in srgb, var(--web-accent) 12%, transparent); color: var(--web-accent);
}
.web-page .cg-grid.cg-plain .cg-card { border: 0; background: transparent; padding: 8px; }
.web-page .cg-grid.cg-plain .cg-card:hover { box-shadow: none; }

/* Numbers: an optional icon over each figure. */
.web-page .stat-icon { color: var(--web-accent); margin-bottom: 8px; display: flex; justify-content: center; font-size: 1.6rem; }
.web-page .stat-icon svg { width: 34px; height: 34px; }
.web-tone-accent .stat-value, .web-tone-dark .stat-value, .web-tone-image .stat-value { color: inherit; }
.web-tone-accent .stat-icon, .web-tone-dark .stat-icon, .web-tone-image .stat-icon { color: inherit; opacity: .9; }

/* A single testimonial is a centred quote, not a bordered blockquote. */
.web-page .block-testimonial blockquote { border: 0; padding: 0; color: inherit; }

/* Testimonials: a row of quote cards. */
.web-page .tm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--web-gap, 24px); }
.web-page .tm-grid.tm-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.web-page .tm-grid.tm-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.web-page .tm-card {
  margin: 0; display: flex; flex-direction: column; gap: 14px; padding: 26px 24px;
  background: var(--web-surface, var(--web-bg)); border: 1px solid var(--web-border);
  border-radius: calc(var(--web-radius, 12px) * 1.25); box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.web-page .tm-card .stars { font-size: 1.05rem; }
.web-page .tm-quote { margin: 0; padding: 0; border: 0; color: var(--web-fg); font-size: 1.02rem; line-height: 1.65; flex: 1; }
.web-page .tm-quote::before { content: "\201C"; display: block; font-size: 3rem; line-height: .6; color: var(--web-accent); opacity: .35; font-family: Georgia, serif; }
.web-page .tm-who { display: flex; align-items: center; gap: 12px; }
.web-page .tm-photo, .web-page .tm-initials { width: 48px; height: 48px; border-radius: 50%; flex: 0 0 auto; }
.web-page .tm-photo { object-fit: cover; }
.web-page .tm-initials { display: grid; place-items: center; font-weight: 700; background: var(--web-accent); color: var(--web-accent-fg); }
.web-page .tm-author { display: block; font-weight: 700; }
.web-page .tm-role { display: block; font-size: .88rem; color: var(--web-muted); }

/* Icon list: contact lines, quick links, checklists. */
.web-page .il-heading { font-size: 1rem; text-transform: uppercase; letter-spacing: .08em; margin: 0 0 14px; }
.web-page .il-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.web-page .il-item { display: flex; gap: 10px; align-items: flex-start; margin: 0; }
.web-page .il-icon { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 3px; color: var(--web-accent); }
.web-page .il-text { color: inherit; text-decoration: none; }
.web-page a.il-text:hover { color: var(--web-accent); text-decoration: underline; }
.web-page .block-iconlist.il-inline .il-list { display: flex; flex-wrap: wrap; gap: 10px 24px; }
.web-tone-dark .il-icon, .web-tone-accent .il-icon { color: inherit; opacity: .8; }

/* Brand: the business's logo and name, and a tagline. */
.web-page .brand-mark { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.web-page .brand-logo { height: 46px; width: auto; }
.web-page .brand-name { font-family: var(--web-font-head); font-weight: 800; font-size: 1.25rem; }
.web-page .brand-tagline { margin: 14px 0 0; color: var(--web-muted); max-width: 36ch; }

/* Social links as round icon buttons. */
.web-page .block-social.social-left .social-row { justify-content: flex-start; }
.web-page .block-social.social-right .social-row { justify-content: flex-end; }
.web-page .block-gallery.gallery-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.web-page .block-gallery.gallery-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.web-page .block-gallery.gallery-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 560px) { .web-page .block-gallery[class*="gallery-cols-"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.web-page .social-icon, .web-footer-full .social-icon {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  color: inherit; border: 1px solid var(--web-border); text-decoration: none;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.web-page .social-icon svg, .web-footer-full .social-icon svg { width: 18px; height: 18px; }
.web-footer-full .social-row { display: flex; flex-wrap: wrap; gap: 10px; }
.web-footer-full .social-icon { border-color: rgba(248, 250, 252, .2); }
.web-footer-full .social-icon:hover { text-decoration: none; }
.web-page .social-icon:hover, .web-footer-full .social-icon:hover { background: var(--web-accent); color: var(--web-accent-fg); border-color: var(--web-accent); }

/* News cards: a cover, the date and tag, a "Read more". */
.web-page .post-card { display: flex; flex-direction: column; overflow: hidden; transition: transform .18s ease, box-shadow .18s ease; }
.web-page .post-card:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(15, 23, 42, .1); }
.web-page .post-card.has-cover { padding: 0; }
.web-page .post-card .post-cover { width: 100%; height: 190px; object-fit: cover; border-radius: 0; margin: 0; }
.web-page .post-card.has-cover .post-body { padding: 18px 20px 22px; }
.web-page .post-body { display: flex; flex-direction: column; flex: 1; }
.web-page .post-body h3 a { color: inherit; text-decoration: none; }
.web-page .post-body h3 a:hover { color: var(--web-accent); }
.web-page .post-meta-line { display: flex; gap: 10px; align-items: center; font-size: .82rem; color: var(--web-muted); margin: 0 0 8px; }
.web-page .post-tag { padding: 2px 10px; border-radius: 999px; background: color-mix(in srgb, var(--web-accent) 12%, transparent); color: var(--web-accent); font-weight: 600; }
.web-page a.post-more { margin-top: auto; padding-top: 10px; }
.web-page .blog-cover { width: 100%; max-height: 420px; object-fit: cover; border-radius: var(--web-radius, 12px); margin: 0 0 var(--web-gap, 24px); }

/* Phones: fixed column counts fall back to one column. */
@media (max-width: 760px) {
  .web-page .block-features.features-cols-2, .web-page .block-features.features-cols-3,
  .web-page .block-features.features-cols-4, .web-page .cg-grid.cg-cols-3,
  .web-page .cg-grid.cg-cols-4, .web-page .tm-grid.tm-cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .web-page .block-features.features-cols-2, .web-page .block-features.features-cols-3,
  .web-page .block-features.features-cols-4, .web-page .cg-grid.cg-cols-2, .web-page .cg-grid.cg-cols-3,
  .web-page .cg-grid.cg-cols-4, .web-page .tm-grid.tm-cols-2, .web-page .tm-grid.tm-cols-3 { grid-template-columns: 1fr; }
}

/* The header's contact bar and call-to-action button. */
.web-topbar { background: var(--web-color-ink, var(--web-color-fg, #0f172a)); color: rgba(255, 255, 255, .86); font-size: .85rem; }
.web-topbar-inner {
  max-width: var(--web-max, 1080px); margin: 0 auto; padding: 7px 20px;
  display: flex; flex-wrap: wrap; gap: 6px 22px; align-items: center;
}
.web-topbar a, .web-topbar span { display: inline-flex; align-items: center; gap: 7px; color: inherit; text-decoration: none; }
.web-topbar a:hover { color: #fff; }
.web-topbar svg { width: 15px; height: 15px; opacity: .8; }
.web-topbar .web-topbar-end { margin-left: auto; }
.web-header-cta {
  display: inline-flex; align-items: center; white-space: nowrap; padding: 9px 18px;
  border-radius: var(--web-button-radius, var(--web-radius, 12px)); font-weight: 700; font-size: .95rem;
  background: var(--web-accent); color: var(--web-accent-fg); text-decoration: none;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--web-accent) 30%, transparent);
}
.web-header-cta:hover { filter: brightness(1.06); }
.web-header-cta + .web-signin, .web-has-cta .web-signin {
  background: transparent; color: var(--web-fg); box-shadow: inset 0 0 0 1px var(--web-border);
}
@media (max-width: 640px) {
  .web-topbar .web-topbar-end, .web-topbar .web-topbar-address { display: none; }
  .web-header-cta { order: 1; margin-left: auto; padding: 7px 12px; font-size: .85rem; }
  .web-has-cta .web-signin { margin-left: 0; }
}
/* A phone has room for the brand and one button: the visitors' button stays,
   staff sign in at /login. */
@media (max-width: 480px) {
  .web-has-cta .web-signin { display: none; }
}

/* The generated footer: brand and contact columns, the menu, a bottom bar. */
.web-footer-full { background: color-mix(in srgb, var(--web-color-ink, var(--web-color-fg, #0f172a)) 94%, #000); color: rgba(248, 250, 252, .74); border-top: 0; }
.web-footer-full .web-footer-grid {
  max-width: var(--web-max, 1080px); margin: 0 auto; padding: 56px 20px 36px;
  display: grid; grid-template-columns: 1.4fr 1fr 1.2fr; gap: 36px;
}
.web-footer-full h2 { color: #fff; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; margin: 0 0 16px; font-family: var(--web-font-head); }
.web-footer-full a { color: inherit; text-decoration: none; }
.web-footer-full a:hover { color: #fff; text-decoration: underline; }
.web-footer-full .wf-brand { display: inline-flex; align-items: center; gap: 12px; color: #fff; font-weight: 800; font-size: 1.2rem; font-family: var(--web-font-head); }
.web-footer-full .wf-brand img { height: 44px; width: auto; background: #fff; border-radius: 10px; padding: 4px; }
.web-footer-full .wf-about { margin: 14px 0 0; max-width: 34ch; line-height: 1.6; }
.web-footer-full ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.web-footer-full li { display: flex; gap: 10px; align-items: flex-start; }
.web-footer-full li svg { width: 17px; height: 17px; flex: 0 0 auto; margin-top: 3px; color: var(--web-color-accent, #60a5fa); }
.web-footer-full .wf-bottom { border-top: 1px solid rgba(248, 250, 252, .12); }
.web-footer-full .wf-bottom-inner {
  max-width: var(--web-max, 1080px); margin: 0 auto; padding: 16px 20px; font-size: .85rem;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px;
}
@media (max-width: 760px) { .web-footer-full .web-footer-grid { grid-template-columns: 1fr; gap: 28px; padding-top: 40px; } }
/* Words for screen readers only (a tick's "Yes", a table corner's "Feature"). */
.web-page .web-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Carousel: a scroll-snapping strip; the script adds arrows and dots. */
.web-page .block-carousel { position: relative; }
.web-page .cr-track {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  border-radius: var(--web-radius, 12px); scrollbar-width: none;
}
.web-page .cr-track::-webkit-scrollbar { display: none; }
.web-page .cr-slide {
  position: relative; flex: 0 0 100%; scroll-snap-align: start; overflow: hidden;
  display: flex; align-items: flex-end; min-height: 380px;
  background: linear-gradient(135deg, var(--web-accent), color-mix(in srgb, var(--web-accent) 55%, #0f172a));
  color: #fff;
}
.web-page .cr-h-short .cr-slide { min-height: 260px; }
.web-page .cr-h-tall .cr-slide { min-height: 540px; }
.web-page .cr-slide .cr-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  border-radius: 0; margin: 0;
}
.web-page .cr-slide.has-img::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(15, 23, 42, .72), rgba(15, 23, 42, .05) 65%);
}
.web-page .cr-caption { position: relative; z-index: 1; padding: 32px 40px 48px; max-width: 46rem; }
.web-page .cr-ready .cr-caption { padding-inline: 76px; }
.web-page .cr-heading { color: #fff; font-size: clamp(1.6rem, 3.4vw, 2.4rem); margin: 0 0 .35em; }
.web-page .cr-text { color: rgba(255, 255, 255, .88); font-size: 1.08rem; margin: 0 0 1em; }
.web-page .cr-prev, .web-page .cr-next, .web-page .cr-dots { display: none; }
.web-page .cr-ready .cr-prev, .web-page .cr-ready .cr-next {
  display: grid; place-items: center; position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 999px; border: 0; cursor: pointer; z-index: 2;
  background: rgba(255, 255, 255, .9); color: #0f172a; font-size: 1.8rem; line-height: 1;
  box-shadow: 0 4px 14px rgba(15, 23, 42, .18);
}
.web-page .cr-ready .cr-prev { left: 14px; }
.web-page .cr-ready .cr-next { right: 14px; }
.web-page .cr-ready .cr-dots {
  display: flex; gap: 8px; justify-content: center; position: absolute; left: 0; right: 0; bottom: 16px; z-index: 2;
}
.web-page .cr-dot {
  width: 10px; height: 10px; padding: 0; border-radius: 999px; border: 0; cursor: pointer;
  background: rgba(255, 255, 255, .5);
}
.web-page .cr-dot[aria-current="true"] { background: #fff; width: 26px; }
.web-page .cr-prev:focus-visible, .web-page .cr-next:focus-visible, .web-page .cr-dot:focus-visible {
  outline: 2px solid #fff; outline-offset: 2px;
}
@media (max-width: 640px) {
  .web-page .cr-caption, .web-page .cr-ready .cr-caption { padding: 24px 20px 52px; }
  .web-page .cr-ready .cr-prev, .web-page .cr-ready .cr-next { top: auto; bottom: 8px; transform: none; }
  .web-page .cr-ready .cr-prev, .web-page .cr-ready .cr-next { width: 36px; height: 36px; font-size: 1.4rem; }
}

/* Map: a framed embed and an "Open in maps" link. */
.web-page .map-frame {
  position: relative; border-radius: var(--web-radius, 12px); overflow: hidden;
  border: 1px solid var(--web-border); background: var(--web-alt); height: 360px;
}
.web-page .map-frame.map-h-short { height: 240px; }
.web-page .map-frame.map-h-tall { height: 520px; }
.web-page .map-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.web-page .map-open { margin: .6em 0 0; font-size: .92rem; }
.web-page .map-open a { color: var(--web-accent); font-weight: 600; }

/* Countdown: four number tiles; the date underneath is the no-script view. */
.web-page .block-countdown { text-align: center; }
.web-page .cd-grid { display: none; }
.web-page .cd-ready .cd-grid {
  display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin: 8px 0 14px;
}
.web-page .cd-unit {
  min-width: 96px; padding: 16px 10px; border-radius: var(--web-radius, 12px);
  background: var(--web-alt); border: 1px solid var(--web-border);
  display: flex; flex-direction: column; align-items: center;
}
.web-page .cd-num {
  font-family: var(--web-font-head); font-size: clamp(2rem, 5vw, 3rem); font-weight: 800;
  line-height: 1.05; font-variant-numeric: tabular-nums; color: var(--web-accent);
}
.web-page .cd-lbl { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--web-muted); }
.web-page .cd-when { color: var(--web-muted); margin: 0 0 1em; }
.web-page .cd-ready .cd-when { font-size: .95rem; }
.web-page .cd-done { font-size: 1.2rem; font-weight: 600; }
.web-tone-dark .cd-unit, .web-tone-accent .cd-unit, .web-tone-image .cd-unit {
  background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .22);
}
.web-tone-dark .cd-num, .web-tone-accent .cd-num, .web-tone-image .cd-num { color: inherit; }
.web-tone-dark .cd-lbl, .web-tone-accent .cd-lbl, .web-tone-image .cd-lbl,
.web-tone-dark .cd-when, .web-tone-accent .cd-when, .web-tone-image .cd-when { color: inherit; opacity: .8; }

/* Comparison table. */
.web-page .cmp-wrap { overflow-x: auto; border: 1px solid var(--web-border); border-radius: var(--web-radius, 12px); background: var(--web-bg); }
.web-page .cmp-table { width: 100%; border-collapse: collapse; min-width: 520px; margin: 0; }
.web-page .cmp-table th, .web-page .cmp-table td {
  padding: 14px 16px; text-align: center; border-bottom: 1px solid var(--web-border); vertical-align: middle;
}
.web-page .cmp-table tbody th { text-align: left; font-weight: 500; }
.web-page .cmp-table tbody tr:last-child th, .web-page .cmp-table tbody tr:last-child td { border-bottom: 0; }
.web-page .cmp-table tfoot td { border-bottom: 0; border-top: 1px solid var(--web-border); }
.web-page .cmp-plan { display: block; font-size: 1.05rem; font-weight: 700; }
.web-page .cmp-price { display: block; color: var(--web-muted); font-weight: 500; font-size: .92rem; }
.web-page .cmp-table .cmp-hi { background: color-mix(in srgb, var(--web-accent) 7%, transparent); }
.web-page .cmp-table thead .cmp-hi { box-shadow: inset 0 3px 0 var(--web-accent); }
.web-page .cmp-table thead .cmp-hi .cmp-plan { color: var(--web-accent); }
.web-page .cmp-yes svg, .web-page .cmp-no svg { width: 20px; height: 20px; vertical-align: middle; }
.web-page .cmp-yes { color: #16a34a; }
.web-page .cmp-no { color: var(--web-muted); opacity: .6; }
.web-page .cmp-table .block-button { margin: 0; padding: 8px 16px; font-size: .9rem; }

/* --- Themes: fonts, the second colour and the site-wide style choices -------
   A theme (apps/website/theme.py) sets the colour, font and shape variables on
   :root, and its style choices as `web-t-…` classes on the site's root element
   (the public <body>, the canvas's frame). Every rule below is opt-in: with no
   class, a site looks exactly as it did before themes had choices. Colours
   are read where they are used, so a button or card inside a dark or accent
   band still adapts to that band. */

/* Buttons may carry their own face (theme `font_button`). */
.web-page :is(a.block-button, button.block-button), .web-header-cta, .web-signin {
  font-family: var(--web-font-button, inherit);
}

/* The second brand colour as a section band (Customize → tone "accent2"). */
.web-tone-accent2 {
  background-color: var(--web-color-accent-2, var(--web-color-accent, #2563eb));
  --web-fg: var(--web-color-accent-2-fg, #ffffff);
  --web-muted: var(--web-color-accent-2-fg, #ffffff);
  --web-border: color-mix(in srgb, var(--web-color-accent-2-fg, #ffffff) 24%, transparent);
  --web-alt: color-mix(in srgb, var(--web-color-accent-2-fg, #ffffff) 10%, transparent);
  --web-surface: color-mix(in srgb, var(--web-color-accent-2-fg, #ffffff) 8%, transparent);
  --web-accent: var(--web-color-accent-2-fg, #ffffff);
  --web-accent-fg: var(--web-color-accent-2, #2563eb);
  color: var(--web-fg);
}
.web-tone-accent2 a:not(.block-button) { color: inherit; }
.web-tone-accent2 .stat-value, .web-tone-accent2 .cd-num { color: inherit; }
.web-tone-accent2 .hero-eyebrow { background: color-mix(in srgb, var(--web-fg) 14%, transparent); color: inherit; }

/* Headings. */
.web-t-h-bold .web-page :is(h1, h2, h3), .web-t-h-bold .web-brand { font-weight: 800; letter-spacing: -.025em; }
.web-t-h-elegant .web-page :is(h1, h2, h3, h4) { font-weight: 500; letter-spacing: -.005em; }
.web-t-h-elegant .web-page .block-hero h1 { font-weight: 500; letter-spacing: -.01em; }
.web-t-h-upper .web-page :is(h1, h2, h3, h4) { text-transform: uppercase; letter-spacing: .03em; }
.web-t-h-upper .web-page .block-hero h1 { letter-spacing: .02em; line-height: 1.05; }
.web-t-h-upper .web-page :is(.feature-title, .cg-title, .tm-author, .member-name, .step-title) {
  letter-spacing: .05em; font-size: 1.05rem;
}

/* Buttons: the fill. A button an author set to "outline" keeps that. */
.web-t-btn-outline .web-page :is(a.block-button, button.block-button):not(.btn-outline),
.web-t-btn-outline .web-header-cta {
  background: transparent; color: var(--web-accent);
  box-shadow: inset 0 0 0 2px var(--web-accent);
}
.web-t-btn-outline .web-page :is(a.block-button, button.block-button):not(.btn-outline):hover,
.web-t-btn-outline .web-header-cta:hover {
  background: var(--web-accent); color: var(--web-accent-fg); filter: none;
}
.web-t-btn-soft .web-page :is(a.block-button, button.block-button):not(.btn-outline),
.web-t-btn-soft .web-header-cta {
  background: color-mix(in srgb, var(--web-accent) 14%, transparent); color: var(--web-accent);
  box-shadow: none;
}
.web-t-btn-soft .web-page :is(a.block-button, button.block-button):not(.btn-outline):hover,
.web-t-btn-soft .web-header-cta:hover {
  background: var(--web-accent); color: var(--web-accent-fg); filter: none;
}
.web-t-btn-gradient .web-page :is(a.block-button, button.block-button):not(.btn-outline),
.web-t-btn-gradient .web-header-cta {
  background: linear-gradient(120deg, var(--web-accent), color-mix(in srgb, var(--web-accent-2) 70%, var(--web-accent)));
  color: var(--web-accent-fg);
}
.web-t-btn-raised .web-page :is(a.block-button, button.block-button):not(.btn-outline),
.web-t-btn-raised .web-header-cta {
  box-shadow: 0 12px 24px -12px color-mix(in srgb, var(--web-accent) 75%, #000), 0 2px 4px rgba(15, 23, 42, .08);
}
.web-t-btn-raised .web-page :is(a.block-button, button.block-button):not(.btn-outline):hover,
.web-t-btn-raised .web-header-cta:hover { transform: translateY(-2px); }
/* On a photo or a dark band an outline or tinted button turns light. */
.web-t-btn-outline :is(.web-tone-image, .web-tone-dark) :is(a.block-button, button.block-button):not(.btn-outline),
.web-t-btn-soft :is(.web-tone-image, .web-tone-dark) :is(a.block-button, button.block-button):not(.btn-outline) {
  background: rgba(255, 255, 255, .14); color: #fff; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .85);
}
.web-t-btn-outline :is(.web-tone-image, .web-tone-dark) :is(a.block-button, button.block-button):not(.btn-outline):hover,
.web-t-btn-soft :is(.web-tone-image, .web-tone-dark) :is(a.block-button, button.block-button):not(.btn-outline):hover {
  background: #fff; color: var(--web-color-ink, var(--web-color-fg, #0f172a));
}
/* Buttons: capitals. */
.web-t-btncase-upper .web-page :is(a.block-button, button.block-button),
.web-t-btncase-upper :is(.web-header-cta, .web-signin) {
  text-transform: uppercase; letter-spacing: .09em; font-size: .84rem;
}

/* Cards: features in cards, picture/icon cards, testimonials, news, products,
   pricing tiers, events. */
.web-t-card-shadow .web-page :is(.block-features.features-cards .feature, .cg-card, .tm-card, .post-card, .product-card, .pricing-tier, .event-card) {
  border-color: transparent;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 16px 36px -16px rgba(15, 23, 42, .22);
}
.web-t-card-shadow .web-page :is(.block-features.features-cards .feature, .cg-card, .post-card, .product-card):hover {
  box-shadow: 0 2px 4px rgba(15, 23, 42, .06), 0 26px 48px -20px rgba(15, 23, 42, .3);
}
.web-t-card-shadow .web-page .cg-grid.cg-plain .cg-card { box-shadow: none; }
.web-t-card-flat .web-page :is(.block-features.features-cards .feature, .cg-card, .tm-card, .post-card, .product-card, .pricing-tier, .event-card) {
  border-color: transparent; box-shadow: none; background: var(--web-alt);
}
.web-t-card-flat .web-page .web-tone-alt :is(.block-features.features-cards .feature, .cg-card, .tm-card, .post-card, .product-card, .pricing-tier, .event-card) {
  background: var(--web-color-bg, #ffffff);
}
.web-t-card-flat .web-page .cg-grid.cg-plain .cg-card { background: transparent; }
.web-t-card-lined .web-page :is(.block-features.features-cards .feature, .cg-card, .tm-card, .post-card, .product-card, .pricing-tier, .event-card) {
  border-top: 4px solid var(--web-accent);
}
.web-t-card-outline .web-page :is(.block-features.features-cards .feature, .cg-card, .tm-card, .post-card, .product-card, .pricing-tier, .event-card) {
  border: 2px solid color-mix(in srgb, var(--web-fg) 85%, transparent); box-shadow: none;
}
.web-t-card-outline .web-page :is(.block-features.features-cards .feature, .cg-card, .post-card, .product-card):hover {
  box-shadow: 6px 6px 0 var(--web-accent);
}

/* Header (the generated one; a header built on the canvas is the author's). */
.web-t-head-solid:is(:not(.web-header-overlay), .web-header-solid) .web-header:not(.web-custom),
.web-t-head-minimal:is(:not(.web-header-overlay), .web-header-solid) .web-header:not(.web-custom) {
  background: var(--web-bg); -webkit-backdrop-filter: none; backdrop-filter: none;
}
.web-t-head-minimal:is(:not(.web-header-overlay), .web-header-solid) .web-header:not(.web-custom) {
  border-bottom-color: transparent; box-shadow: 0 1px 0 color-mix(in srgb, var(--web-border) 50%, transparent);
}
.web-t-head-dark:is(:not(.web-header-overlay), .web-header-solid) .web-header:not(.web-custom),
.web-t-head-accent:is(:not(.web-header-overlay), .web-header-solid) .web-header:not(.web-custom) {
  -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom-color: transparent;
}
.web-t-head-dark:is(:not(.web-header-overlay), .web-header-solid) .web-header:not(.web-custom) {
  background: color-mix(in srgb, var(--web-color-ink, var(--web-color-fg, #0f172a)) 94%, #000);
}
.web-t-head-accent:is(:not(.web-header-overlay), .web-header-solid) .web-header:not(.web-custom) {
  background: var(--web-color-accent, #2563eb);
}
.web-t-head-dark:is(:not(.web-header-overlay), .web-header-solid) .web-header:not(.web-custom) :is(.web-brand, .web-nav > li > a, .web-nav-heading) {
  color: #fff;
}
.web-t-head-accent:is(:not(.web-header-overlay), .web-header-solid) .web-header:not(.web-custom) :is(.web-brand, .web-nav > li > a, .web-nav-heading) {
  color: var(--web-color-accent-fg, #fff);
}
.web-t-head-dark:is(:not(.web-header-overlay), .web-header-solid) .web-header:not(.web-custom) .web-nav > li > a:hover,
.web-t-head-accent:is(:not(.web-header-overlay), .web-header-solid) .web-header:not(.web-custom) .web-nav > li > a:hover {
  background: rgba(255, 255, 255, .12); color: inherit;
}
.web-t-head-dark .web-header:not(.web-custom) .web-langs a,
.web-t-head-accent .web-header:not(.web-custom) .web-langs a { color: rgba(255, 255, 255, .8); }
.web-t-head-dark .web-header:not(.web-custom) .web-signin {
  background: transparent; color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45);
}
.web-t-head-accent .web-header:not(.web-custom) .web-signin,
.web-t-head-accent .web-header:not(.web-custom) .web-header-cta {
  background: var(--web-color-accent-fg, #fff); color: var(--web-color-accent, #2563eb); box-shadow: none;
}

/* Menu links. */
.web-t-nav-underline .web-nav > li > a:hover {
  background: transparent; text-decoration: underline; text-decoration-thickness: 2px;
  text-underline-offset: .5em;
}
.web-t-nav-caps .web-nav > li > a, .web-t-nav-caps .web-nav-heading {
  text-transform: uppercase; letter-spacing: .1em; font-size: .78rem; font-weight: 600;
}

/* Footer (the generated one). */
.web-t-foot-light .web-footer-full {
  background: var(--web-alt); color: var(--web-muted); border-top: 1px solid var(--web-border);
}
.web-t-foot-light .web-footer-full :is(h2, .wf-brand) { color: var(--web-fg); }
.web-t-foot-light .web-footer-full a:hover { color: var(--web-fg); }
.web-t-foot-light .web-footer-full .wf-bottom { border-top-color: var(--web-border); }
.web-t-foot-light .web-footer-full .social-icon { border-color: var(--web-border); }
.web-t-foot-light .web-footer-full .wf-brand img { background: transparent; padding: 0; }
.web-t-foot-accent .web-footer-full {
  background: var(--web-color-accent, #2563eb);
  color: color-mix(in srgb, var(--web-color-accent-fg, #fff) 82%, transparent);
}
.web-t-foot-accent .web-footer-full :is(h2, .wf-brand), .web-t-foot-accent .web-footer-full a:hover {
  color: var(--web-color-accent-fg, #fff);
}
.web-t-foot-accent .web-footer-full li svg { color: inherit; }
.web-t-foot-accent .web-footer-full .wf-bottom {
  border-top-color: color-mix(in srgb, var(--web-color-accent-fg, #fff) 22%, transparent);
}
.web-t-foot-deep .web-footer-full {
  background: color-mix(in srgb, var(--web-color-accent, #2563eb) 28%, #0b0f19);
}
.web-t-foot-deep .web-footer-full li svg { color: var(--web-color-accent-2, var(--web-color-accent, #60a5fa)); }

/* Pictures: the standalone images of a page (picture blocks, picture beside
   text, a split hero, a gallery, a post's cover). Card pictures stay flush. */
.web-t-img-square .web-page :is(.block-image img, .mt-media img, .hero-split .hero-media img, .gallery-item img, .blog-cover, .block-hero > img) {
  border-radius: 0;
}
.web-t-img-round .web-page :is(.block-image img, .mt-media img, .hero-split .hero-media img, .gallery-item img, .blog-cover, .block-hero > img) {
  border-radius: calc(var(--web-radius, 12px) * 2.2);
}
.web-t-img-soft .web-page :is(.block-image img, .mt-media img, .hero-split .hero-media img, .blog-cover, .block-hero > img) {
  border-radius: calc(var(--web-radius, 12px) * 1.4);
  box-shadow: 0 28px 56px -28px rgba(15, 23, 42, .45);
}
.web-t-img-frame .web-page :is(.block-image img, .mt-media img, .hero-split .hero-media img, .blog-cover, .block-hero > img) {
  border-radius: 2px; padding: 10px; background: #fff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .12), 0 24px 48px -24px rgba(15, 23, 42, .4);
}
.web-t-img-frame .web-page .gallery-item img { border-radius: 2px; padding: 6px; background: #fff; box-shadow: 0 8px 22px -12px rgba(15, 23, 42, .4); }

/* --- Picture treatments, overlays and motion (a block's or band's Look) ----
   Closed-set classes from apps/website/theme.py; they sit on the styled
   block's wrapper (`.block-style`) or on a section/row/column, and outrank the
   theme's site-wide picture style, because they are the author's choice for
   this one place. */
.web-page :is(.web-img-circle, .web-img-arch, .web-img-blob, .web-img-pill, .web-img-tilt, .web-frame-border, .web-frame-offset, .web-frame-polaroid, .web-frame-glow, .web-ratio-square, .web-ratio-portrait, .web-ratio-landscape, .web-ratio-wide)
  :is(.block-image img, .mt-media img, .hero-split .hero-media img, .block-hero > img, .gallery-item img) {
  width: 100%; object-fit: cover;
}
.web-page .web-img-circle :is(.block-image img, .mt-media img, .hero-split .hero-media img, .block-hero > img, .gallery-item img) {
  border-radius: 50%; aspect-ratio: 1 / 1;
}
.web-page .web-img-arch :is(.block-image img, .mt-media img, .hero-split .hero-media img, .block-hero > img, .gallery-item img) {
  border-radius: 999px 999px var(--web-radius, 12px) var(--web-radius, 12px); aspect-ratio: 4 / 5;
}
.web-page .web-img-blob :is(.block-image img, .mt-media img, .hero-split .hero-media img, .block-hero > img, .gallery-item img) {
  border-radius: 58% 42% 55% 45% / 46% 54% 46% 54%; aspect-ratio: 1 / 1;
}
.web-page .web-img-pill :is(.block-image img, .mt-media img, .hero-split .hero-media img, .block-hero > img, .gallery-item img) {
  border-radius: 999px;
}
.web-page .web-img-tilt :is(.block-image img, .mt-media img, .hero-split .hero-media img, .block-hero > img) {
  transform: rotate(-2.5deg); border-radius: var(--web-radius, 12px);
  box-shadow: 0 22px 44px -22px rgba(15, 23, 42, .45);
}
.web-page .web-frame-border :is(.block-image img, .mt-media img, .hero-split .hero-media img, .block-hero > img, .gallery-item img) {
  padding: 6px; background: var(--web-bg); border: 2px solid var(--web-accent);
}
.web-page .web-frame-offset :is(.block-image img, .mt-media img, .hero-split .hero-media img, .block-hero > img) {
  box-shadow: 18px 18px 0 0 color-mix(in srgb, var(--web-accent-2) 85%, transparent);
  margin-right: 18px; margin-bottom: 18px;
}
.web-page .web-frame-polaroid :is(.block-image img, .mt-media img, .hero-split .hero-media img, .block-hero > img, .gallery-item img) {
  padding: 10px 10px 34px; background: #fff; border-radius: 3px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .12), 0 18px 36px -16px rgba(15, 23, 42, .45);
}
.web-page .web-frame-glow :is(.block-image img, .mt-media img, .hero-split .hero-media img, .block-hero > img, .gallery-item img) {
  box-shadow: 0 26px 60px -24px color-mix(in srgb, var(--web-accent) 75%, transparent);
}
.web-page .web-ratio-square :is(.block-image img, .mt-media img, .hero-split .hero-media img, .block-hero > img, .gallery-item img, .cg-img) { aspect-ratio: 1 / 1; height: auto; }
.web-page .web-ratio-portrait :is(.block-image img, .mt-media img, .hero-split .hero-media img, .block-hero > img, .gallery-item img, .cg-img) { aspect-ratio: 3 / 4; height: auto; }
.web-page .web-ratio-landscape :is(.block-image img, .mt-media img, .hero-split .hero-media img, .block-hero > img, .gallery-item img, .cg-img) { aspect-ratio: 4 / 3; height: auto; }
.web-page .web-ratio-wide :is(.block-image img, .mt-media img, .hero-split .hero-media img, .block-hero > img, .gallery-item img, .cg-img) { aspect-ratio: 16 / 9; height: auto; }

/* Hover: a gentle zoom inside the picture's frame, a lift, or colour coming
   up from black and white. */
.web-page .web-hover-zoom :is(.block-image, .mt-media, .hero-media, .gallery-item) {
  overflow: hidden; border-radius: var(--web-radius, 12px);
}
.web-page .web-hover-zoom :is(.block-image, .mt-media, .hero-media, .gallery-item, .cg-card, .post-card, .team-member) img {
  transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}
.web-page .web-hover-zoom :is(.block-image, .mt-media, .hero-media, .gallery-item, .cg-card, .post-card):hover img {
  transform: scale(1.06);
}
.web-page .web-hover-lift :is(.block-image img, .mt-media img, .hero-media img, .gallery-item img),
.web-page .web-hover-lift :is(.cg-card, .tm-card, .feature, .post-card, .team-member, .pricing-tier) {
  transition: transform .25s ease, box-shadow .25s ease;
}
.web-page .web-hover-lift :is(.block-image img, .mt-media img, .hero-media img, .gallery-item img):hover,
.web-page .web-hover-lift :is(.cg-card, .tm-card, .feature, .post-card, .team-member, .pricing-tier):hover {
  transform: translateY(-6px); box-shadow: 0 24px 44px -20px rgba(15, 23, 42, .4);
}
.web-page .web-hover-grayscale img { filter: grayscale(1); transition: filter .35s ease; }
.web-page .web-hover-grayscale :is(.block-image, .mt-media, .hero-media, .gallery-item, .cg-card, .team-member, .logo-item):hover img,
.web-page .web-hover-grayscale img:hover { filter: none; }
@media (prefers-reduced-motion: reduce) {
  .web-page :is(.web-hover-zoom, .web-hover-lift) :is(img, .cg-card, .tm-card, .feature, .post-card, .team-member, .pricing-tier) {
    transition: none; transform: none !important;
  }
}

/* Overlays: drawn over a band's background (a photo, a colour, a gradient)
   and under its content. */
.web-ov { position: relative; isolation: isolate; }
.web-ov::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  border-radius: inherit;
}
.web-ov-fade-up::before { background: linear-gradient(to top, rgba(10, 14, 26, .86), rgba(10, 14, 26, .18) 72%); }
.web-ov-fade-side::before { background: linear-gradient(90deg, rgba(10, 14, 26, .86), rgba(10, 14, 26, .12) 78%); }
.web-ov-brand::before {
  background: linear-gradient(120deg,
    color-mix(in srgb, var(--web-color-accent, #2563eb) 90%, transparent),
    color-mix(in srgb, var(--web-color-accent-2, var(--web-color-accent, #2563eb)) 62%, transparent));
}
/* Over the brand colours a solid button would vanish into its own colour, so
   it turns light, as it does on an accent band. */
.web-page .web-ov-brand :is(a.block-button, button.block-button):not(.btn-outline) {
  background: #fff; color: var(--web-color-accent, #2563eb); box-shadow: 0 10px 24px -12px rgba(10, 14, 26, .45);
}
.web-ov-deep::before { background: rgba(10, 14, 26, .62); }
.web-ov-light::before { background: rgba(255, 255, 255, .84); }

/* More entrances. */
.web-anim-rise { animation-name: webRise; }
.web-anim-blur-in { animation-name: webBlurIn; }
.web-anim-flip-up { animation-name: webFlipUp; }
@keyframes webRise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes webBlurIn { from { opacity: 0; filter: blur(14px); } to { opacity: 1; filter: none; } }
@keyframes webFlipUp { from { opacity: 0; transform: perspective(900px) rotateX(18deg) translateY(22px); } to { opacity: 1; transform: none; } }

/* One after another: the items of a grid appear in turn. With the reveal
   script they wait until the band scrolls into view; without it they play on
   load, so nothing is ever left hidden. */
.web-stagger :is(.feature, .cg-card, .tm-card, .stat, .gallery-item, .team-member, .pricing-tier, .step, .post-card, .product-card, .logo-item, .tl-item) {
  animation: webFadeUp .65s cubic-bezier(.2, .7, .2, 1) both;
}
.web-stagger :is(.feature, .cg-card, .tm-card, .stat, .gallery-item, .team-member, .pricing-tier, .step, .post-card, .product-card, .logo-item, .tl-item):nth-child(2) { animation-delay: .09s; }
.web-stagger :is(.feature, .cg-card, .tm-card, .stat, .gallery-item, .team-member, .pricing-tier, .step, .post-card, .product-card, .logo-item, .tl-item):nth-child(3) { animation-delay: .18s; }
.web-stagger :is(.feature, .cg-card, .tm-card, .stat, .gallery-item, .team-member, .pricing-tier, .step, .post-card, .product-card, .logo-item, .tl-item):nth-child(4) { animation-delay: .27s; }
.web-stagger :is(.feature, .cg-card, .tm-card, .stat, .gallery-item, .team-member, .pricing-tier, .step, .post-card, .product-card, .logo-item, .tl-item):nth-child(5) { animation-delay: .36s; }
.web-stagger :is(.feature, .cg-card, .tm-card, .stat, .gallery-item, .team-member, .pricing-tier, .step, .post-card, .product-card, .logo-item, .tl-item):nth-child(n+6) { animation-delay: .45s; }
html.web-reveal .web-stagger:not(.web-in) :is(.feature, .cg-card, .tm-card, .stat, .gallery-item, .team-member, .pricing-tier, .step, .post-card, .product-card, .logo-item, .tl-item) {
  animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
  .web-stagger :is(.feature, .cg-card, .tm-card, .stat, .gallery-item, .team-member, .pricing-tier, .step, .post-card, .product-card, .logo-item, .tl-item) {
    animation: none !important;
  }
}

/* Web fonts */
@font-face{font-family:'Inter';font-style:normal;font-display:swap;font-weight:100 900;src:url(/api/public/fonts/1/inter-latin-wght-normal.woff2) format('woff2-variations'),url(/api/public/fonts/1/inter-latin-wght-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-display:swap;font-weight:100 900;src:url(/api/public/fonts/1/inter-latin-ext-wght-normal.woff2) format('woff2-variations'),url(/api/public/fonts/1/inter-latin-ext-wght-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'DM Sans';font-style:normal;font-display:swap;font-weight:100 1000;src:url(/api/public/fonts/1/dm-sans-latin-wght-normal.woff2) format('woff2-variations'),url(/api/public/fonts/1/dm-sans-latin-wght-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'DM Sans';font-style:normal;font-display:swap;font-weight:100 1000;src:url(/api/public/fonts/1/dm-sans-latin-ext-wght-normal.woff2) format('woff2-variations'),url(/api/public/fonts/1/dm-sans-latin-ext-wght-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Manrope';font-style:normal;font-display:swap;font-weight:200 800;src:url(/api/public/fonts/1/manrope-latin-wght-normal.woff2) format('woff2-variations'),url(/api/public/fonts/1/manrope-latin-wght-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-display:swap;font-weight:200 800;src:url(/api/public/fonts/1/manrope-latin-ext-wght-normal.woff2) format('woff2-variations'),url(/api/public/fonts/1/manrope-latin-ext-wght-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-display:swap;font-weight:200 800;src:url(/api/public/fonts/1/plus-jakarta-sans-latin-wght-normal.woff2) format('woff2-variations'),url(/api/public/fonts/1/plus-jakarta-sans-latin-wght-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-display:swap;font-weight:200 800;src:url(/api/public/fonts/1/plus-jakarta-sans-latin-ext-wght-normal.woff2) format('woff2-variations'),url(/api/public/fonts/1/plus-jakarta-sans-latin-ext-wght-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Work Sans';font-style:normal;font-display:swap;font-weight:100 900;src:url(/api/public/fonts/1/work-sans-latin-wght-normal.woff2) format('woff2-variations'),url(/api/public/fonts/1/work-sans-latin-wght-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Work Sans';font-style:normal;font-display:swap;font-weight:100 900;src:url(/api/public/fonts/1/work-sans-latin-ext-wght-normal.woff2) format('woff2-variations'),url(/api/public/fonts/1/work-sans-latin-ext-wght-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Outfit';font-style:normal;font-display:swap;font-weight:100 900;src:url(/api/public/fonts/1/outfit-latin-wght-normal.woff2) format('woff2-variations'),url(/api/public/fonts/1/outfit-latin-wght-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Outfit';font-style:normal;font-display:swap;font-weight:100 900;src:url(/api/public/fonts/1/outfit-latin-ext-wght-normal.woff2) format('woff2-variations'),url(/api/public/fonts/1/outfit-latin-ext-wght-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Poppins';font-style:normal;font-display:swap;font-weight:400;src:url(/api/public/fonts/1/poppins-latin-400-normal.woff2) format('woff2'),url(/api/public/fonts/1/poppins-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-display:swap;font-weight:600;src:url(/api/public/fonts/1/poppins-latin-600-normal.woff2) format('woff2'),url(/api/public/fonts/1/poppins-latin-600-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-display:swap;font-weight:700;src:url(/api/public/fonts/1/poppins-latin-700-normal.woff2) format('woff2'),url(/api/public/fonts/1/poppins-latin-700-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-display:swap;font-weight:400;src:url(/api/public/fonts/1/poppins-latin-ext-400-normal.woff2) format('woff2'),url(/api/public/fonts/1/poppins-latin-ext-400-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Poppins';font-style:normal;font-display:swap;font-weight:600;src:url(/api/public/fonts/1/poppins-latin-ext-600-normal.woff2) format('woff2'),url(/api/public/fonts/1/poppins-latin-ext-600-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Poppins';font-style:normal;font-display:swap;font-weight:700;src:url(/api/public/fonts/1/poppins-latin-ext-700-normal.woff2) format('woff2'),url(/api/public/fonts/1/poppins-latin-ext-700-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Nunito';font-style:normal;font-display:swap;font-weight:200 1000;src:url(/api/public/fonts/1/nunito-latin-wght-normal.woff2) format('woff2-variations'),url(/api/public/fonts/1/nunito-latin-wght-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Nunito';font-style:normal;font-display:swap;font-weight:200 1000;src:url(/api/public/fonts/1/nunito-latin-ext-wght-normal.woff2) format('woff2-variations'),url(/api/public/fonts/1/nunito-latin-ext-wght-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Montserrat';font-style:normal;font-display:swap;font-weight:100 900;src:url(/api/public/fonts/1/montserrat-latin-wght-normal.woff2) format('woff2-variations'),url(/api/public/fonts/1/montserrat-latin-wght-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Montserrat';font-style:normal;font-display:swap;font-weight:100 900;src:url(/api/public/fonts/1/montserrat-latin-ext-wght-normal.woff2) format('woff2-variations'),url(/api/public/fonts/1/montserrat-latin-ext-wght-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Oswald';font-style:normal;font-display:swap;font-weight:200 700;src:url(/api/public/fonts/1/oswald-latin-wght-normal.woff2) format('woff2-variations'),url(/api/public/fonts/1/oswald-latin-wght-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Oswald';font-style:normal;font-display:swap;font-weight:200 700;src:url(/api/public/fonts/1/oswald-latin-ext-wght-normal.woff2) format('woff2-variations'),url(/api/public/fonts/1/oswald-latin-ext-wght-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Playfair Display';font-style:normal;font-display:swap;font-weight:400 900;src:url(/api/public/fonts/1/playfair-display-latin-wght-normal.woff2) format('woff2-variations'),url(/api/public/fonts/1/playfair-display-latin-wght-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Playfair Display';font-style:italic;font-display:swap;font-weight:400 900;src:url(/api/public/fonts/1/playfair-display-latin-wght-italic.woff2) format('woff2-variations'),url(/api/public/fonts/1/playfair-display-latin-wght-italic.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Playfair Display';font-style:normal;font-display:swap;font-weight:400 900;src:url(/api/public/fonts/1/playfair-display-latin-ext-wght-normal.woff2) format('woff2-variations'),url(/api/public/fonts/1/playfair-display-latin-ext-wght-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Playfair Display';font-style:italic;font-display:swap;font-weight:400 900;src:url(/api/public/fonts/1/playfair-display-latin-ext-wght-italic.woff2) format('woff2-variations'),url(/api/public/fonts/1/playfair-display-latin-ext-wght-italic.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Lora';font-style:normal;font-display:swap;font-weight:400 700;src:url(/api/public/fonts/1/lora-latin-wght-normal.woff2) format('woff2-variations'),url(/api/public/fonts/1/lora-latin-wght-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Lora';font-style:italic;font-display:swap;font-weight:400 700;src:url(/api/public/fonts/1/lora-latin-wght-italic.woff2) format('woff2-variations'),url(/api/public/fonts/1/lora-latin-wght-italic.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Lora';font-style:normal;font-display:swap;font-weight:400 700;src:url(/api/public/fonts/1/lora-latin-ext-wght-normal.woff2) format('woff2-variations'),url(/api/public/fonts/1/lora-latin-ext-wght-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Lora';font-style:italic;font-display:swap;font-weight:400 700;src:url(/api/public/fonts/1/lora-latin-ext-wght-italic.woff2) format('woff2-variations'),url(/api/public/fonts/1/lora-latin-ext-wght-italic.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Fraunces';font-style:normal;font-display:swap;font-weight:100 900;src:url(/api/public/fonts/1/fraunces-latin-wght-normal.woff2) format('woff2-variations'),url(/api/public/fonts/1/fraunces-latin-wght-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Fraunces';font-style:italic;font-display:swap;font-weight:100 900;src:url(/api/public/fonts/1/fraunces-latin-wght-italic.woff2) format('woff2-variations'),url(/api/public/fonts/1/fraunces-latin-wght-italic.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Fraunces';font-style:normal;font-display:swap;font-weight:100 900;src:url(/api/public/fonts/1/fraunces-latin-ext-wght-normal.woff2) format('woff2-variations'),url(/api/public/fonts/1/fraunces-latin-ext-wght-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Fraunces';font-style:italic;font-display:swap;font-weight:100 900;src:url(/api/public/fonts/1/fraunces-latin-ext-wght-italic.woff2) format('woff2-variations'),url(/api/public/fonts/1/fraunces-latin-ext-wght-italic.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'EB Garamond';font-style:normal;font-display:swap;font-weight:400 800;src:url(/api/public/fonts/1/eb-garamond-latin-wght-normal.woff2) format('woff2-variations'),url(/api/public/fonts/1/eb-garamond-latin-wght-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'EB Garamond';font-style:italic;font-display:swap;font-weight:400 800;src:url(/api/public/fonts/1/eb-garamond-latin-wght-italic.woff2) format('woff2-variations'),url(/api/public/fonts/1/eb-garamond-latin-wght-italic.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'EB Garamond';font-style:normal;font-display:swap;font-weight:400 800;src:url(/api/public/fonts/1/eb-garamond-latin-ext-wght-normal.woff2) format('woff2-variations'),url(/api/public/fonts/1/eb-garamond-latin-ext-wght-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'EB Garamond';font-style:italic;font-display:swap;font-weight:400 800;src:url(/api/public/fonts/1/eb-garamond-latin-ext-wght-italic.woff2) format('woff2-variations'),url(/api/public/fonts/1/eb-garamond-latin-ext-wght-italic.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Cormorant';font-style:normal;font-display:swap;font-weight:300 700;src:url(/api/public/fonts/1/cormorant-latin-wght-normal.woff2) format('woff2-variations'),url(/api/public/fonts/1/cormorant-latin-wght-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Cormorant';font-style:italic;font-display:swap;font-weight:300 700;src:url(/api/public/fonts/1/cormorant-latin-wght-italic.woff2) format('woff2-variations'),url(/api/public/fonts/1/cormorant-latin-wght-italic.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Cormorant';font-style:normal;font-display:swap;font-weight:300 700;src:url(/api/public/fonts/1/cormorant-latin-ext-wght-normal.woff2) format('woff2-variations'),url(/api/public/fonts/1/cormorant-latin-ext-wght-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Cormorant';font-style:italic;font-display:swap;font-weight:300 700;src:url(/api/public/fonts/1/cormorant-latin-ext-wght-italic.woff2) format('woff2-variations'),url(/api/public/fonts/1/cormorant-latin-ext-wght-italic.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Roboto Slab';font-style:normal;font-display:swap;font-weight:100 900;src:url(/api/public/fonts/1/roboto-slab-latin-wght-normal.woff2) format('woff2-variations'),url(/api/public/fonts/1/roboto-slab-latin-wght-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Roboto Slab';font-style:normal;font-display:swap;font-weight:100 900;src:url(/api/public/fonts/1/roboto-slab-latin-ext-wght-normal.woff2) format('woff2-variations'),url(/api/public/fonts/1/roboto-slab-latin-ext-wght-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}