/* ═══════════════════════════════════════════════════════════════
   BOTTEGA52 — Concept A "Module"
   Entry point CSS — fixed import order.
   ═══════════════════════════════════════════════════════════════ */

/* Generic — browser normalization */
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * Add the correct box sizing in Firefox.
 */

hr {
  box-sizing: content-box;
  height: 0;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Remove the inheritance of text transform in Edge and Firefox.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * Remove the padding so developers are not caught out when they zero out `fieldset` elements in all browsers.
 */

legend {
  padding: 0;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  vertical-align: baseline;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in Edge and Firefox.
 */

details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}
*, *:before, *:after {
  box-sizing: border-box;
}

/* Design system — token CSS (must precede the elements) */
/* ═══════════════════════════════════════════════════════════════
   BOTTEGA52 — DESIGN SYSTEM · Concept A "Module"
   Source: concept-a-modulo-presentazione.html §1
   Do not modify these values without aligning them to the SSOT.
   ═══════════════════════════════════════════════════════════════ */

/* Brand font (self-hosted, licensed — client-provided, proof of purchase tracked in
   state/bottega52-dev-canvas-modulo.md, not published). Variable font, wght axis 100-900:
   the weight range below lets the browser interpolate any font-weight in that span from
   this single file, not just the 6 named instances. Kept out of standard_header_includes
   (that mechanism only auto-injects the two GOOGLE font_set theme fields) — declared here
   instead, next to the other typography tokens it feeds. */
@font-face {
  font-family: 'FK Grotesk';
  src: url('https://26728368.fs1.hubspotusercontent-eu1.net/hubfs/26728368/raw_assets/public/bottega52-doex-theme/fonts/FKGrotesk.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ── Palette ─────────────────────────────────────────────── */
  --ink:       #15171C;
  --graphite:  #3A3E47;
  --accent:    #1F3FD1;
  --accent-dk: #16308F;
  --accent-lt: #7E96FF;
  --wash:      #EAEEFC;
  --paper:     #FAFAFB;
  --muted:     #727680;
  --line:      #E2DFD7;
  --panel:     #F2F0E9;
  --danger:    #B23A2C; /* error/validation state — the only use of this in the system, §11 */

  /* ── Typography ──────────────────────────────────────────── */
  /* --ff-d: brand font, Space Grotesk kept as fallback (font-stack order, not a separate
     rule) — if FK Grotesk fails to load, the browser falls through to the previous
     display font, not to a generic sans-serif. --ff-m/--ff-b intentionally untouched,
     see evaluation in state/bottega52-dev-canvas-modulo.md. */
  --ff-d: 'FK Grotesk', 'Space Grotesk', sans-serif;
  --ff-m: 'IBM Plex Mono', monospace;
  --ff-b: 'IBM Plex Sans', sans-serif;

  /* ── Fluid scale ─────────────────────────────────────────── */
  --fs-h1: clamp(30px, 2.3vw + 23px, 56px);
  --fs-h2: clamp(22px, 1.25vw + 18px, 36px);
  --fs-h3: clamp(18px, 0.54vw + 16px, 24px);

  /* ── Fluid spacing ───────────────────────────────────────── */
  --space-xs: clamp(4px, 0.5vw, 8px);
  --space-sm: clamp(8px, 1vw, 16px);
  --space-md: clamp(16px, 2vw, 32px);
  --space-lg: clamp(24px, 4vw, 48px);
  --space-xl: clamp(48px, 6vw, 72px);
  --space-2xl: clamp(64px, 8vw, 96px);

  /* ── Grid ──────────────────────────────────────────────────── */
  --gap: clamp(8px, 1.5vw + 4px, 24px);
  --r:   clamp(4px, 0.5vw, 8px);
}

/* ── Bento grid standard ─────────────────────────────────────── */
.b52-bento {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr;
  gap: var(--gap);
}

/* ── Page section sequence (WP9) ─────────────────────────────── */
.b52-section-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

/* ── Panel base ──────────────────────────────────────────────── */
.b52-panel {
  border: 1px solid var(--line);
  border-radius: var(--r);
}

/* ── Panel variants ──────────────────────────────────────────── */
.b52-p-paper  { background: var(--paper); }
.b52-p-panel  { background: var(--panel); }
.b52-p-wash   { background: var(--wash); }
.b52-p-ink    { background: var(--ink);    color: var(--paper); border-color: var(--ink); }
.b52-p-accent { background: var(--accent); color: #fff;         border-color: var(--accent); }

/* ── Label mono ──────────────────────────────────────────────── */
.b52-mono-label {
  font-family: var(--ff-m);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ── Image inside the panel ────────────────────────────────────── */
.b52-img-wrap {
  position: relative;
  overflow: hidden;
  border-radius: var(--r);
}
.b52-img-wrap::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 22px; height: 22px;
  border-top: 1.5px solid white;
  border-right: 1.5px solid white;
  border-radius: 0 var(--r) 0 0;
  pointer-events: none;
}
.b52-img-wrap img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.b52-img-caption {
  position: absolute;
  bottom: 12px; left: 14px;
  font-family: var(--ff-m);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
}

/* ── Image treatments ✦ system ────────────────────────────────── */
.b52-treat-desat img { filter: saturate(0.95); }
.b52-treat-mono  img { filter: grayscale(1) contrast(1.05); }
.b52-treat-duotone   { background: var(--accent); }
.b52-treat-duotone img {
  filter: grayscale(1) contrast(1.1);
  mix-blend-mode: multiply;
  opacity: .92;
}

/* ── Table wrap ──────────────────────────────────────────────── */
/*
  HubSpot — two scenarios:
    A) Custom rich_text module: wrap 
       with <div class="table-wrap"> in the HubL template.
    B) Drag-and-drop editor: wrapper can't be generated from CSS — use
       table { display: block; overflow-x: auto; } as a fallback.
       Communicate to the Creative Director before applying in prod.
*/
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ── IS-DENSE — Density Management Protocol ───────────────────── */
/* Ref: SSOT §is-dense · bottega52-dev-handoff-densita.md
   TODO — incomplete/never wired (audit 2026-08-27, tracker 1.16): the handoff spec uses
   .panel/.mod-card/.mod-footer/.mod-name as generic placeholders, not real theme classes.
   .panel and .pillar-ttl below do match real classes (b52-panel's base selector, pillar-tiles),
   but .mod-card/.mod-footer/.mod-name don't exist anywhere in the theme — no module currently
   applies .is-dense to itself. Needs a real Developer pass against the handoff doc's checklist
   (still unchecked) before this can be considered done, not a quick rename. */

.is-dense .panel      { padding: calc(var(--space-md) * 0.7); }
.is-dense .aurea-grid { gap: calc(var(--gap) * 0.7); padding: calc(var(--gap) * 0.7); }
.is-dense .mod-footer { padding: calc(var(--space-sm) * 0.7) calc(var(--space-md) * 0.7); }

.is-dense p, .is-dense li { line-height: 1.4; }
.is-dense h3 { font-size: 20px; }
.is-dense h4 { font-size: 15px; }

.is-dense .panel,
.is-dense .mod-card,
.is-dense .aurea-p1, .is-dense .aurea-p2, .is-dense .aurea-p3,
.is-dense .aurea-p4, .is-dense .aurea-p5 { border-radius: 4px; }

.is-dense .pillar-ttl,
.is-dense .mod-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Progression indicators (§7.5) ────────────────────────────── */
/* JS adds .prog-anim on viewport entry (IntersectionObserver)
   TODO — CSS-only, never wired (audit 2026-08-27, tracker 1.16): ported from the SSOT
   (concept-a-modulo-presentazione.html §7.5, live demo there) in preparation for a future
   progression-indicator module/section, but no module.html/main.js in this theme uses
   .prog-track/.prog-p/.prog-anim yet, and main.js has no IntersectionObserver. Not dead code
   to remove — a specced component whose theme-side implementation hasn't started. */
.prog-track { display: flex; align-items: center; gap: 6px; }
.prog-p {
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  background: transparent;
  transition: background .2s, border-color .2s;
}
.prog-p.lg { width: 24px; height: 24px; }
.prog-p.is-done   { background: var(--ink);    border-color: var(--ink); }
.prog-p.is-active { background: var(--accent); border-color: var(--accent); }
.prog-p.on-dark           { border-color: rgba(255,255,255,.2); background: transparent; }
.prog-p.on-dark.is-done   { background: rgba(255,255,255,.8);  border-color: transparent; }
.prog-p.on-dark.is-active { background: var(--accent);         border-color: var(--accent); }

@keyframes prog-fill { from { background: var(--paper); } to { background: var(--ink); } }
.prog-anim .prog-p              { animation: prog-fill .35s ease forwards; }
.prog-anim .prog-p:nth-child(1) { animation-delay: 0s; }
.prog-anim .prog-p:nth-child(2) { animation-delay: .2s; }
.prog-anim .prog-p:nth-child(3) { animation-delay: .4s; }
.prog-anim .prog-p:nth-child(4) { animation-delay: .6s; }

/* Elements — native HTML base styles */
/* Structural baseline — cosmetic overrides in theme-overrides.css */

body {
  overflow-wrap: break-word;
}

/* Asian language word-break */
html[lang^="ja"] body,
html[lang^="zh"] body,
html[lang^="ko"] body {
  line-break: strict;
  overflow-wrap: normal;
  word-break: break-all;
}

p { margin: 0 0 1.4rem; }

a { cursor: pointer; }

h1, h2, h3, h4, h5, h6 { margin: 0 0 1rem; }

ul, ol { margin: 0 0 1.4rem; padding: 0; }
ul ul, ol ul, ul ol, ol ol { margin: 0; }
ul.no-list { list-style: none; margin: 0; padding-left: 0; }

pre { overflow: auto; }

blockquote { margin: 0 0 1.4rem; }

hr {
  border: none;
  border-bottom: 1px solid var(--line);
}

img {
  font-size: 0.583rem;
  word-break: normal;
}
button,
.button,
.hs-button {
  cursor: pointer;
  display: inline-block;
  text-align: center;
  transition: all 0.15s linear;
  white-space: normal;
}

/* Concept A CTA — used in the header and in the modules */
.b52-cta {
  font-family: var(--ff-m);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: var(--accent);
  color: white;
  padding: 8px 18px;
  border-radius: 3px;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  display: inline-block;
  transition: background .18s ease, transform .12s ease;
}
.b52-cta:hover  { background: var(--accent-dk); color: white; opacity: 1; }
.b52-cta:active { background: var(--accent-dk); transform: translateY(1px); }

button:disabled,
.button:disabled,
.hs-button:disabled {
  background-color: #D0D0D0;
  border-color: #D0D0D0;
  color: #E6E6E6;
}

/* No button */

.no-button,
.no-button:hover,
.no-button:focus,
.no-button:active {
  background: none;
  border: none;
  border-radius: 0;
  color: initial;
  font-family: inherit;
  font-size: inherit;
  font-style: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  margin-bottom: 0;
  padding: 0;
  text-align: left;
  text-decoration: none;
  transition: none;
}
/* ═══════════════════════════════════════════════════════════════
   NATIVE HUBSPOT FORM (§11) — level 2, hand-written CSS on native classes.
   Level 1 (theme settings, `forms` group in fields.json) automatically
   covers Title/Labels/Help text/Form container (inherited from the
   global tokens) + Fields → Background/Border/Corner and Button
   (already consistent via theme.global_colors.primary = the accent color) — no
   rule below for those. Here only what the `forms` group doesn't
   expose: field typography, vertical rhythm, checkbox/radio,
   date picker, validation, confirmation message, submit button.

   WARNING — applies only to the "classic" form engine (.hs-form-field,
   .hs-input, etc). Verified 2026-07-12: forms built with HubSpot's
   current no-code editor ("Forms 2.0") use a different engine,
   .hsfc-* markup (not in an iframe on this portal) and are styled ONLY
   via the documented --hsf-* custom properties in :root — the
   .hsfc-* classes are internal/unstable, don't target them directly,
   and the `forms` group in fields.json has no effect on them.
   --hsf-* block further below. The .hs-*/Level 1 rules stay useful
   for any form still on the classic engine (boilerplate system pages,
   e.g. membership/subscription, typically legacy).
   ═══════════════════════════════════════════════════════════════ */

/* Fields — simple fallback for forms without the .stacked class (no evidence
   of a conflict in that case, so no !important here). Below, the rule
   verified via real DOM (2026-07-12): the HubSpot form embed script
   dynamically injects its own CSS for the .stacked class (always present
   on the <form>, see hs_context.formData.cssClass) with a selector more
   specific than plain `.hs-form-field` — there the !important is needed,
   backed by concrete evidence of the conflict, not out of caution. */

.hs-form-field {
  margin-bottom: var(--space-sm);
}

form.hs-form.stacked .hs-form-field {
  margin-bottom: var(--space-sm) !important;
}

form.hs-form.stacked .hs-form-field:last-of-type {
  margin-bottom: 0 !important;
}

.hs-form-field:last-of-type {
  margin-bottom: 0;
}

/* Labels */

form label {
  display: block;
  font-family: var(--ff-b);
  font-size: 13px;
  color: var(--ink);
  margin-bottom: 6px;
}

/* Form Title */
.form-title {
  margin-bottom: 0;
}

/* Help text */

form legend {
  font-size: 0.875rem;
}

/* Inputs — font/color of typed text: the Fields group (fields.json) only exposes
   background/border/radius, not typography — mapped here. .hs-input is the real class
   applied by the native Form module to input/select/textarea (verified on .hs-input.invalid.error,
   already present in the stock boilerplate). */

.hs-input {
  display: inline-block;
  font-family: var(--ff-b);
  font-size: 14px;
  color: var(--ink);
  padding: var(--space-xs) var(--space-sm);
  width: 100%;
  box-sizing: border-box;
}

.hs-input::placeholder {
  color: var(--muted);
}

textarea.hs-input {
  resize: vertical;
}

form fieldset {
  max-width: 100% !important;
}

/* Inputs - checkbox/radio */

form .inputs-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

form .inputs-list > li {
  display: block;
}

form .inputs-list input,
form .inputs-list span {
  vertical-align: middle;
}

form input[type=checkbox],
form input[type=radio] {
  accent-color: var(--accent);
  width: 16px;
  height: 16px;
  cursor: pointer;
  margin-right: 8px;
}

/* Inputs - date picker — deliberately bold treatment (not minimal), consistent with the
   system's accent. Real classes verified in the stock boilerplate: Pikaday library (.fn-date-picker .pika-*).
   Sole owner of is-selected/hover (2026-08-28): removed the conflicting stock duplicate
   in css/theme-overrides.css, which used a different token () and won
   the hover state via !important. */

.hs-dateinput {
  position: relative;
}

.hs-dateinput:before {
  content:'\01F4C5';
  position: absolute;
  right: 10%;
  top: 50%;
  transform: translateY(-50%);
}

.fn-date-picker .pika-table thead th {
  color: #fff;
}

.fn-date-picker td.is-selected .pika-button {
  background: var(--accent);
  color: #fff;
  border-radius: 0;
  box-shadow: none;
}

.fn-date-picker td .pika-button:hover,
.fn-date-picker td .pika-button:focus {
  background: var(--wash);
  color: var(--accent);
  border-radius: 0 !important;
}

/* Inputs - file picker */

form input[type=file] {
  background-color: transparent;
  border: initial;
  padding: initial;
}

/* Headings and text */

form .hs-richtext,
form .hs-richtext p {
  font-family: var(--ff-b);
  font-size: 0.875rem;
  color: var(--ink);
  margin: 0 0 1.4rem;
}

form .hs-richtext a {
  color: var(--accent);
}

form .hs-richtext img {
  max-width: 100% !important;
}

/* GDPR */

.legal-consent-container .hs-form-booleancheckbox-display > span,
.legal-consent-container .hs-form-booleancheckbox-display > span p {
  margin-left: 1rem !important;
}

/* Validation — the only use of --danger in the system. .hs-input.invalid.error is the real
   class on the field (not a .hs-form-field modifier wrapper, like in the SSOT static demo) */

.hs-form-required {
  color: var(--danger);
}

.hs-input.invalid.error {
  border-color: var(--danger);
}

.hs-error-msg {
  color: var(--danger);
  margin-top: 0.35rem;
}

.hs-error-msgs {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  color: var(--danger);
  font-size: 12px;
}

/* Icon (circle + exclamation point) via mask + currentColor: error messages are
   generated at runtime by the form's JS, there's no markup of ours to insert a child <svg> into.
   `<li>` here also inherits the generic richtext bullet rules (theme-overrides.css,
   "ul > li"/"ul > li::before": padding-left, position:relative on the li; color:accent,
   position:absolute+top/left on the ::before) — no specificity conflict blocks them because
   our rule doesn't touch those properties. Explicitly neutralized below. */
.hs-error-msgs > * {
  display: flex;
  align-items: center;
  gap: 4px;
  padding-left: 0;
}

.hs-error-msgs > * + * {
  margin-top: 2px;
}

.hs-error-msgs > *::before {
  content: '';
  position: static;
  color: var(--danger);
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Ccircle cx='7' cy='7' r='6' fill='none' stroke='black' stroke-width='1.2'/%3E%3Cline x1='7' y1='4' x2='7' y2='7.5' stroke='black' stroke-width='1.2' stroke-linecap='round'/%3E%3Ccircle cx='7' cy='9.8' r='.7' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Ccircle cx='7' cy='7' r='6' fill='none' stroke='black' stroke-width='1.2'/%3E%3Cline x1='7' y1='4' x2='7' y2='7.5' stroke='black' stroke-width='1.2' stroke-linecap='round'/%3E%3Ccircle cx='7' cy='9.8' r='.7' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Submit confirmation — no new color: same "accent thread" as the blockquote (§2.6),
   not a separate semantic state (no green/success) */

.submitted-message {
  border-left: 3px solid var(--accent);
  padding: 2px 0 2px 16px;
  font-family: var(--ff-b);
  font-size: 14px;
  color: var(--ink);
}

/* Submit button — classic CTA treatment, identical to .b52-cta (not the D5 ring/§9.5:
   the submit button is an action, not a clickable content tile) */

form input[type=submit],
form .hs-button {
  cursor: pointer;
  display: inline-block;
  text-align: center;
  white-space: normal;
}

.hs-button.primary {
  font-family: var(--ff-m);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: var(--accent);
  color: #fff;
  padding: 10px 22px;
  border-radius: 3px;
  border: none;
  transition: background .18s ease, transform .12s ease;
}

.hs-button.primary:hover {
  background: var(--accent-dk);
}

.hs-button.primary:active {
  background: var(--accent-dk);
  transform: translateY(1px);
}

/* :focus-visible on fields/button → global ring §9.1, already active natively, no rule needed here */

/* ═══════════════════════════════════════════════════════════════
   NATIVE HUBSPOT FORM (§11) — "Forms 2.0" engine (no-code editor,
   .hsfc-* markup). Styled via the documented --hsf-* custom properties
   (developers.hubspot.com/docs/cms/.../features/forms/forms),
   resolved by the browser in the same document (no iframe on
   this portal, verified 2026-07-12) — reuse the same design-system
   tokens.
   Known gap, not closeable in code: no documented --hsf-* for
   select/date picker/post-submit confirmation message, nor for the
   button's text-transform/letter-spacing (mono-uppercase like
   .b52-cta isn't obtainable with the documented API alone) — visual
   verification in staging needed as soon as the form is on the page.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* Global */
  --hsf-global__font-family: var(--ff-b);
  --hsf-global__font-size: 14px;
  --hsf-global__color: var(--ink);
  --hsf-global-error__color: var(--danger);

  /* Vertical rhythm — same fluid spacing as the system */
  --hsf-row__horizontal-spacing: var(--space-sm);
  --hsf-row__vertical-spacing: var(--space-sm);
  --hsf-module__vertical-spacing: var(--space-md);

  /* Form title — like the system's h3 */
  --hsf-heading__font-family: var(--ff-d);
  --hsf-heading__color: var(--ink);

  /* Rich text (help/legal) */
  --hsf-richtext__font-family: var(--ff-b);
  --hsf-richtext__color: var(--graphite);

  /* Form container — transparent, no panel of its own (SSOT §11) */
  --hsf-background__background-color: transparent;
  --hsf-background__border-style: none;

  /* Field label */
  --hsf-field-label__font-family: var(--ff-b);
  --hsf-field-label__font-size: 13px;
  --hsf-field-label__color: var(--ink);
  --hsf-field-label-requiredindicator__color: var(--danger);
  --hsf-field-description__font-family: var(--ff-b);
  --hsf-field-description__color: var(--muted);
  --hsf-field-footer__font-family: var(--ff-b);
  --hsf-field-footer__color: var(--muted);

  /* Text/email/tel/number field — 1px line border, panel background, fluid radius var(--r) */
  --hsf-field-input__font-family: var(--ff-b);
  --hsf-field-input__color: var(--ink);
  --hsf-field-input__background-color: var(--panel);
  --hsf-field-input__placeholder-color: var(--muted);
  --hsf-field-input__border-color: var(--line);
  --hsf-field-input__border-width: 1px;
  --hsf-field-input__border-style: solid;
  --hsf-field-input__border-radius: var(--r);
  --hsf-field-input__padding: var(--space-xs) var(--space-sm);

  /* Textarea — same rule as the text fields */
  --hsf-field-textarea__font-family: var(--ff-b);
  --hsf-field-textarea__color: var(--ink);
  --hsf-field-textarea__background-color: var(--panel);
  --hsf-field-textarea__placeholder-color: var(--muted);
  --hsf-field-textarea__border-color: var(--line);
  --hsf-field-textarea__border-width: 1px;
  --hsf-field-textarea__border-style: solid;
  --hsf-field-textarea__border-radius: var(--r);
  --hsf-field-textarea__padding: var(--space-xs) var(--space-sm);

  /* Checkbox/radio — custom components of the new editor, not native inputs:
     no accent-color (doesn't apply), the fill/mark color is whatever
     --hsf-field-*__color controls */
  --hsf-field-checkbox__background-color: var(--panel);
  --hsf-field-checkbox__color: var(--accent);
  --hsf-field-checkbox__border-color: var(--line);
  --hsf-field-checkbox__border-width: 1px;
  --hsf-field-checkbox__border-style: solid;

  --hsf-field-radio__background-color: var(--panel);
  --hsf-field-radio__color: var(--accent);
  --hsf-field-radio__border-color: var(--line);
  --hsf-field-radio__border-width: 1px;
  --hsf-field-radio__border-style: solid;

  /* Submit button — CTA treatment (font-family/size are the only documented
     levers; text-transform/letter-spacing of .b52-cta's mono uppercase
     aren't exposed by the --hsf-* API, see the gap note above) */
  --hsf-button__font-family: var(--ff-m);
  --hsf-button__font-size: 10px;
  --hsf-button__color: #fff;
  --hsf-button__background-color: var(--accent);
  --hsf-button__border-radius: 3px;
  --hsf-button__padding: 10px 22px;
  --hsf-button__box-shadow: none;
  /* Not officially documented, found in use — verify in staging */
  --hsf-button--hover__background-color: var(--accent-dk);

  /* Error/alert messages */
  --hsf-erroralert__font-family: var(--ff-b);
  --hsf-erroralert__font-size: 12px;
  --hsf-erroralert__color: var(--danger);
  --hsf-infoalert__font-family: var(--ff-b);
  --hsf-infoalert__font-size: 12px;
  --hsf-infoalert__color: var(--graphite);
}

/* Captcha */

.grecaptcha-badge {
  margin: 0 auto;
}


/* Tables — Concept A · source: SSOT §2 */

table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--ff-b);
  font-size: 14px;
  margin-bottom: 1.4rem;
}

th {
  font-family: var(--ff-m);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: left;
  padding: 8px 12px;
  border-bottom: 2px solid var(--ink);
  vertical-align: bottom;
}

td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  color: var(--graphite);
  vertical-align: top;
}

tr:last-child td { border-bottom: none; }

/* Objects — layout non-cosmetic */


/* CSS variables */

:root {
  --column-gap: 2.13%;
  --column-width-multiplier: 8.333;
}

/* Mobile layout */

.row-fluid {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}


  .row-fluid .span1,
  .row-fluid .span2,
  .row-fluid .span3,
  .row-fluid .span4,
  .row-fluid .span5,
  .row-fluid .span6,
  .row-fluid .span7,
  .row-fluid .span8,
  .row-fluid .span9,
  .row-fluid .span10,
  .row-fluid .span11,
  .row-fluid .span12{
  min-height: 1px;
  width: 100%;
}

/* Desktop layout */

@media (min-width: 768px) {
  .row-fluid {
    flex-wrap: nowrap;
    justify-content: space-between;
  }

  
    .row-fluid .span1 {
      width: calc(var(--column-width-multiplier) * 1% * 1 - var(--column-gap) * (11 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span2 {
      width: calc(var(--column-width-multiplier) * 1% * 2 - var(--column-gap) * (10 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span3 {
      width: calc(var(--column-width-multiplier) * 1% * 3 - var(--column-gap) * (9 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span4 {
      width: calc(var(--column-width-multiplier) * 1% * 4 - var(--column-gap) * (8 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span5 {
      width: calc(var(--column-width-multiplier) * 1% * 5 - var(--column-gap) * (7 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span6 {
      width: calc(var(--column-width-multiplier) * 1% * 6 - var(--column-gap) * (6 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span7 {
      width: calc(var(--column-width-multiplier) * 1% * 7 - var(--column-gap) * (5 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span8 {
      width: calc(var(--column-width-multiplier) * 1% * 8 - var(--column-gap) * (4 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span9 {
      width: calc(var(--column-width-multiplier) * 1% * 9 - var(--column-gap) * (3 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span10 {
      width: calc(var(--column-width-multiplier) * 1% * 10 - var(--column-gap) * (2 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span11 {
      width: calc(var(--column-width-multiplier) * 1% * 11 - var(--column-gap) * (1 * var(--column-width-multiplier) / 100));
    }
  
}

/* ─────────────────────────────────────────────────────────────
   Full-bleed section + content column
   Pattern from SSOT §1.5 (concept-a-modulo-presentazione.html):
   full-bleed background wrapper + a centered content column capped
   at the theme's max content width. Generic and reusable by any
   module — not tied to a specific component (hero-bento has a
   pre-existing bespoke implementation of the same idea; see tracker
   item D1 for its planned refactor onto this shared object).

   .b52-bleed       — outer wrapper, spans the full viewport width
                       and carries the section's background.
   .b52-bleed-inner — inner column, capped at container_width and
                       centered; horizontal padding keeps content off
                       the edges — but only where an edge is actually
                       reachable (see note below the .b52-bleed-inner
                       rule), not as a blanket desktop default.

   Note: container_width can't be reused from theme-overrides.css
   here — that file is a separate require_css() render pass, so the
   variable it sets isn't visible inside main.css's include chain
   (which is where this file is included). Re-declared locally below,
   same formula as theme-overrides.css line 33.

   Edge-to-edge override, scoped to actually-full-width rows only:
   HubSpot's "make section full width" editor toggle neutralizes the
   row's own max-width (theme-overrides.css, .dnd_area-row-N-force-
   full-width-section > .row-fluid { max-width: none !important }),
   but does NOT touch the surrounding .dnd-column's own unconditional
   padding (0 1rem, _containers-dnd.css) — every full-width row still
   carries that 16px gutter on both sides, since it's a fixed property
   of every dnd-column sitewide, not something a theme can zero out
   without stripping the edge padding from every *other* (non-full-
   bleed) column too. Standard breakout technique instead: size to the
   viewport and pull back by half of it, escaping any ancestor padding
   at any nesting depth without touching dnd-column globally. Scoped
   via [class*="force-full-width-section"] — HubSpot's own stable
   naming convention for a full-width-toggled row (row index/area name
   vary, "force-full-width-section" doesn't) — so it only fires where
   a section is actually full-width; every non-full-bleed .b52-bleed
   (still the large majority of current uses — see C1-C5) keeps the
   plain width:100% below, i.e. simply inherits whatever width its
   (possibly still-capped) column already has, unchanged. */

.b52-bleed {
  width: 100%;
}

[class*="force-full-width-section"] .b52-bleed {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}



.b52-bleed-inner {
  /* Capped at container_width minus 2rem, not the raw token: a non-full-width .b52-bleed-inner
     always renders inside a .dnd-column, whose own fixed padding (1rem each side,
     _containers-dnd.css) already eats into container_width before this max-width ever gets a
     chance to bind — so in practice every non-full-bleed module was already rendering at
     container_width-2rem (confirmed: matches rich text and every native HubSpot module exactly).
     A genuinely full-bleed module (Hero) has no .dnd-column to do that subtraction for it, so
     without repeating it here explicitly its content column rendered 2rem wider than everyone
     else's on the same page — same content-width contract, inconsistent result depending on
     whether a .dnd-column happened to be doing the work. Subtracting it explicitly makes
     container_width-2rem — not the raw token — the one real content width, full-bleed or not. */
  max-width: calc(1240px - 2rem);
  margin: 0 auto;
  padding: 0;
}

/* No default horizontal padding above: at desktop widths inside a normal (non-full-width)
   column, the surrounding .dnd-column already keeps content off the viewport edge (same
   protection every native HubSpot module — rich text, forms, etc. — already relies on), so
   .b52-bleed-inner's own padding on top of that was redundant and made every custom module
   render narrower than everything else on the page for no protective reason (found comparing
   against rich text on a real page). Padding is restored only where it's actually load-bearing:
   1) a genuinely full-bleed section (.b52-bleed at width:100vw above) has no .dnd-column
      around it at all, at any viewport — content would otherwise touch the screen edge;
   2) below the theme's own mobile breakpoint (max-width:767px, matches the desktop breakpoint
      at line 27), as a blanket safety margin regardless of context. */
[class*="force-full-width-section"] .b52-bleed-inner {
  padding: 0 var(--space-md);
}

@media (max-width: 767px) {
  .b52-bleed-inner {
    padding: 0 var(--space-md);
  }
}
.content-wrapper {
  margin: 0 auto;
  padding: 0 1rem;
}

@media screen and (min-width: 1380px) {
  .content-wrapper {
    padding: 0;
  }
}

.dnd-section > .row-fluid {
  margin: 0 auto;
}

.dnd-section .dnd-column {
  padding: 0 1rem;
}

@media (max-width: 767px) {
  .dnd-section .dnd-column {
    padding: 0;
  }
}

/* Components — styled global partials */
/* ── Header Concept A · Bottega52 ──────────────────────────────── */

/* Skip link */
.b52-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  font-family: var(--ff-b);
  font-size: 14px;
  background: var(--accent);
  color: #fff;
  padding: 8px 16px;
  z-index: 200;
  text-decoration: none;
}
.b52-skip-link:focus { left: 0; }

/* ── Header bar ───────────────────────────────────────────────── */
/* HubSpot wraps global partials in a <div> wrapper: without this the sticky positioning would
   anchor to that wrapper (as tall as the header) and scroll away with it. display:contents makes
   the wrapper transparent to layout → .b52-hdr becomes the effective child of .body-wrapper and
   the sticky positioning anchors to the page scroll. Selector based on structure (not on the
   wrapper's attribute, which can change) and harmless if the wrapper isn't present. */
.body-wrapper > :has(> #site-header) { display: contents; }

.b52-hdr {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  transition: background .25s ease, border-color .25s ease;
}

.b52-hdr-inner {
  display: flex;
  align-items: center;
  height: 56px;
  padding: 0 var(--space-md);
  max-width: 1240px;
  margin: 0 auto;
}

/* ── Logo (icon mark + wordmark, SVG fill:currentColor) ────────── */
.b52-hdr-logo {
  display: flex;
  align-items: center;
  color: var(--ink);
  text-decoration: none;
  flex-shrink: 0;
}
.b52-hdr-logo:hover  { color: var(--ink); opacity: 1; }
.b52-hdr-logo:active { color: var(--ink); opacity: 1; }
.b52-hdr-logo-svg {
  height: 20px;
  width: auto;
  display: block;
  fill: currentColor;
}

/* ── Nav desktop ──────────────────────────────────────────────── */
/* Nav and dropdown styles: modules/nav-menu.module/module.css (its own component) */
/* Nav right after the logo (on the left); margin-right:auto pushes ONLY the CTA to the right (SSOT §8.1) */
.b52-hdr-nav { display: flex; align-items: center; margin-left: var(--space-lg); margin-right: auto; }

/* ── CTA ──────────────────────────────────────────────────────── */
.b52-hdr-cta { flex-shrink: 0; }

/* ── Language switcher — predisposto, invisibile a 1 lingua sola (v1) ──────
   Solo posizionamento: nessuno stile interno alla lista lingue, non verificabile
   finché non esiste una seconda lingua reale (markup nativo HubSpot, non nel
   nostro controllo). Dopo la CTA, prima dell'hamburger; nascosto su mobile,
   dove riappare nel footer dell'overlay (.b52-mob-lang qui sotto). */
.b52-hdr-lang { flex-shrink: 0; margin-left: var(--space-sm); }

/* ── Hamburger (visible on mobile only) ────────────────────────── */
.b52-hdr-ham {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 20px;
  height: 14px;
  margin-left: 16px;
  flex-shrink: 0;
}
.b52-hdr-ham span {
  display: block;
  height: 2px;
  border-radius: 1px;
  background: var(--ink);
  transition: background .18s ease;
}

/* ── Dark variant (activated by JS on .hdr-dark) ──────────────── */
.hdr-dark {
  background: var(--ink);
  border-bottom-color: rgba(255,255,255,.1);
}
.hdr-dark .b52-hdr-inner .b52-hdr-logo { color: var(--paper); }
.hdr-dark .b52-hdr-logo:hover        { color: var(--paper); }
.hdr-dark .b52-hdr-logo:active       { color: var(--paper); }
/* Nav dark variant: modules/nav-menu.module/module.css (.hdr-dark .nav-item/.nav-trigger) */
.hdr-dark .b52-hdr-ham span { background: var(--paper); }
/* .b52-hdr-cta unchanged: accent works on a dark background */

/* ── Mobile overlay ───────────────────────────────────────────── */
.b52-mob-overlay {
  position: fixed;
  inset: 0;
  background: var(--paper);
  z-index: 99;
  display: flex;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
  transition: opacity .25s ease, transform .25s ease;
}
.b52-mob-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.b52-mob-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  padding: 0 var(--space-md);
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}

.b52-mob-close {
  position: relative;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.b52-mob-close span {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 1px;
  background: var(--ink);
}
.b52-mob-close span:first-child { transform: translateY(-50%) rotate(45deg); }
.b52-mob-close span:last-child  { transform: translateY(-50%) rotate(-45deg); }

/* Mobile nav: modules/nav-menu.module/module.css (its own component, .nav-mobile) */
.b52-mob-nav { flex: 1; overflow-y: auto; }

.b52-mob-footer { padding: var(--space-md); flex-shrink: 0; }
.b52-mob-cta    { display: block; text-align: center; }
.b52-mob-lang   { margin-top: var(--space-sm); text-align: center; }

/* Overlay: inherits the header's state at the moment it opens (if already dark, stays ink) */
.hdr-dark .b52-mob-overlay { background: var(--ink); }
.hdr-dark .b52-mob-bar     { border-bottom-color: rgba(255,255,255,.1); }
.hdr-dark .b52-mob-bar .b52-hdr-logo { color: var(--paper); }
.hdr-dark .b52-mob-close span        { background: var(--paper); }
/* Mobile nav content in dark: modules/nav-menu.module/module.css (.hdr-dark .mob-acc-trigger/.mob-l3-link/.mob-flat-link) */

/* ── Breakpoint ───────────────────────────────────────────────── */
@media (max-width: 768px) {
  .b52-hdr-nav,
  .b52-hdr-cta,
  .b52-hdr-lang { display: none; }
  /* With nav/CTA hidden only logo+hamburger remain: margin-left:auto pushes the hamburger to the right
     (the nav's margin-right:auto, which used to keep it on the left with the rest, no longer applies) */
  .b52-hdr-ham  { display: flex; margin-left: auto; }
}
/* Menu and simple menu */

.hs-menu-wrapper ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding-left: 0;
}

/* Horizontal menu */

.hs-menu-wrapper.hs-menu-flow-horizontal .hs-menu-children-wrapper {
  flex-direction: column;
}

@media (max-width: 767px) {
  .hs-menu-wrapper.hs-menu-flow-horizontal ul {
    flex-direction: column;
  }
}

/* Vertical menu */

.hs-menu-wrapper.hs-menu-flow-vertical ul {
  flex-direction: column;
}

/* Flyouts */

.hs-menu-wrapper.hs-menu-flow-vertical.flyouts ul {
  display: inline-flex;
}

@media (max-width: 767px) {
  .hs-menu-wrapper.hs-menu-flow-vertical ul {
    display: flex;
  }
}

.hs-menu-wrapper.flyouts .hs-item-has-children {
  position: relative;
}

.hs-menu-wrapper.flyouts .hs-menu-children-wrapper {
  left: -9999px;
  opacity: 0;
  position: absolute;
}

.hs-menu-wrapper.flyouts .hs-menu-children-wrapper a {
  display: block;
  white-space: nowrap;
}

.hs-menu-wrapper.hs-menu-flow-horizontal.flyouts .hs-item-has-children:hover > .hs-menu-children-wrapper {
  left: 0;
  opacity: 1;
  top: 100%;
}

.hs-menu-wrapper.hs-menu-flow-vertical.flyouts .hs-item-has-children:hover > .hs-menu-children-wrapper {
  left: 100%;
  opacity: 1;
  top: 0;
}

@media (max-width: 767px) {
  .hs-menu-wrapper.flyouts .hs-menu-children-wrapper,
  .hs-menu-wrapper.hs-menu-flow-horizontal.flyouts .hs-item-has-children:hover > .hs-menu-children-wrapper,
  .hs-menu-wrapper.hs-menu-flow-vertical.flyouts .hs-item-has-children:hover > .hs-menu-children-wrapper {
    left: 0;
    opacity: 1;
    position: relative;
    top: auto;
  }
}

/* CTA, logo, and rich text images */

.hs_cos_wrapper_type_cta img,
.hs_cos_wrapper_type_logo img,
.hs_cos_wrapper_type_rich_text img {
  height: auto;
  max-width: 100%;
}

/* Utilities — helper override */
/* For content that needs to be visually hidden but stay visible for screenreaders */

.show-for-sr {
  border: 0 !important;
  clip: rect(0, 0, 0, 0) !important;
  height: 1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  white-space: nowrap !important;
  width: 1px !important;
}

@media (max-width: 767px) {
  .show-for-sr--mobile {
    border: 0 !important;
    clip: rect(0, 0, 0, 0) !important;
    height: 1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    white-space: nowrap !important;
    width: 1px !important;
  }
}