/* Layout-token defaults. The theme sets these same names on `:root`, so they
   can't be re-declared below as a var() of themselves with a fallback — a custom
   property that references itself is a cycle, which the browser computes as
   invalid, and every gap, section padding and column width built on it drops.
   `:where()` keeps these at zero specificity so the theme's `:root` always wins. */
:where(:root) {
  --web-radius: 12px;
  --web-gap: 24px;
  --web-section-y: 56px;
  --web-max: 1080px;
}
.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));
  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); }
.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) 20px; }
.web-section > .web-row + .web-row { margin-top: var(--web-gap); }
/* 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);
  max-width: var(--web-max);
  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)); }
  .web-col-2  { flex-basis: calc(16.667% - var(--web-gap)); }
  .web-col-3  { flex-basis: calc(25% - var(--web-gap)); }
  .web-col-4  { flex-basis: calc(33.333% - var(--web-gap)); }
  .web-col-5  { flex-basis: calc(41.667% - var(--web-gap)); }
  .web-col-6  { flex-basis: calc(50% - var(--web-gap)); }
  .web-col-7  { flex-basis: calc(58.333% - var(--web-gap)); }
  .web-col-8  { flex-basis: calc(66.667% - var(--web-gap)); }
  .web-col-9  { flex-basis: calc(75% - var(--web-gap)); }
  .web-col-10 { flex-basis: calc(83.333% - var(--web-gap)); }
  .web-col-11 { flex-basis: calc(91.667% - var(--web-gap)); }
  .web-col-12 { flex-basis: 100%; }
}

.web-page .block + .block { margin-top: var(--web-gap); }
.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); margin: 1.25rem auto 0; }
.web-page .block-cta { text-align: center; background: var(--web-alt); border-radius: var(--web-radius); padding: 40px 24px; }

.web-page .block-columns { display: flex; flex-wrap: wrap; gap: var(--web-gap); }
.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); 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); }
.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); }
.web-page .pricing-tier { border: 1px solid var(--web-border); border-radius: var(--web-radius); 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); 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, .web-page button.block-button {
  display: inline-block;
  background: var(--web-accent);
  color: var(--web-accent-fg);
  padding: 12px 24px;
  border-radius: var(--web-radius);
  font-weight: 600;
  text-decoration: none;
}
.web-page a.block-button:hover, .web-page button.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));
}

/* Data-bound + form blocks (posts / products / form). */
.web-page .block-heading { text-align: center; margin-bottom: var(--web-gap); }
.web-page .post-grid, .web-page .product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--web-gap);
}
.web-page .post-card, .web-page .product-card {
  border: 1px solid var(--web-border);
  border-radius: var(--web-radius);
  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); 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); 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); max-width: 480px; }
.web-page .shop-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 var(--web-gap); }
.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); align-items: start;
}
.web-page .product-detail .product-media img {
  width: 100%; border-radius: var(--web-radius); 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); 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);
  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); 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); 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);
  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); 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); 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); 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); 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);
}
.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); 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);
  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);
  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); }
.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); }
.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) auto 0; }
.web-page .blog-pager a { text-decoration: none; font-weight: 600; }
.web-page .blog-comments { max-width: 720px; margin: var(--web-gap) auto 0; border-top: 1px solid var(--web-border); padding-top: var(--web-gap); }
.web-page .comment-list { list-style: none; padding: 0; margin: 0 0 var(--web-gap); display: grid; gap: 14px; }
.web-page .comment { border: 1px solid var(--web-border); border-radius: var(--web-radius); 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); font: inherit; }
.web-page .search-results { list-style: none; padding: 0; margin: var(--web-gap) 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); max-width: 760px; margin-inline: auto; }
.web-page .event-card { border: 1px solid var(--web-border); border-radius: var(--web-radius); 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); border-top: 1px solid var(--web-border); padding-top: var(--web-gap); 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));
  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; }

.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); 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);
  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);
  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); 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); 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); 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);
  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); 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); 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); 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: "‘2"; }
.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); 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); }
.web-page .cg-card { border: 1px solid var(--web-border); border-radius: var(--web-radius); padding: 22px; background: var(--web-surface, transparent); }
.web-page .cg-img { width: 100%; height: 150px; object-fit: cover; border-radius: var(--web-radius); 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)); 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; }