/* Public marketing site (ADR-0013).
 *
 * Ported from the "Anteprima Navigabile" design, restyled on the Naoki reference (ADR-0015): dark-only,
 * every colour is a custom property at :root (R-0008).
 */

:root {
  /* ADR-0015: dark-only Naoki palette. */
  --pub-bg: rgb(var(--ink-900));
  --pub-dot: rgba(255, 255, 255, 0.05);
  --pub-surface: rgba(255, 255, 255, 0.05); /* glass: always paired with a backdrop blur */
  --pub-surface-solid: rgb(var(--ink-800)); /* the same tint, opaque, for layers that must hide what is behind */
  --pub-glass-blur: blur(10px);
  --pub-glass-blur-sm: blur(5px);
  --pub-surface-alt: rgb(var(--ink-850));
  --pub-border: rgba(255, 255, 255, 0.12);
  --pub-border-soft: rgba(255, 255, 255, 0.08);
  --pub-border-dash: rgba(255, 255, 255, 0.08);
  --pub-rule: rgba(255, 255, 255, 0.08);
  --pub-rule-soft: rgba(255, 255, 255, 0.05);
  --pub-text: rgba(255, 255, 255, 0.9);
  --pub-muted: rgba(255, 255, 255, 0.6);
  --pub-muted-soft: rgb(var(--ink-350));
  --pub-body: rgba(255, 255, 255, 0.75);
  --pub-line: rgba(255, 255, 255, 0.12);
  --pub-brand: rgb(var(--brand-400));
  --pub-brand-grad: linear-gradient(102deg, rgb(var(--brand-600)) 0%, rgb(var(--brand-800)) 100%);
  --pub-brand-ink: rgb(var(--brand-300));
  --pub-brand-ink-hover: rgb(var(--brand-100));
  --pub-hatch-a: rgba(255, 255, 255, 0.06);
  --pub-hatch-b: rgba(255, 255, 255, 0.02);
  --pub-bad-fg: #fca5a5;
  --pub-bad-border: rgba(248, 113, 113, 0.35);
  --pub-tag-fg: rgb(var(--brand-300));
  --pub-tag-border: rgb(var(--brand-600) / 0.45);
  --pub-tag-bg: rgb(var(--brand-600) / 0.1);
  --pub-cue-ring: rgb(var(--brand-600) / 0.45);
  --pub-cue-ring-out: rgb(var(--brand-600) / 0);
  --pub-hover: rgba(255, 255, 255, 0.08);
  --pub-brand-hover: rgb(var(--brand-400));
  --pub-on-brand: #ffffff;
  --pub-focus: rgb(var(--brand-400));
  --pub-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.1), 0 10px 30px rgb(var(--ink-900) / 0.15);
  --pub-shadow-lg: inset 1px 1px 0 rgba(255, 255, 255, 0.14), 0 10px 30px rgb(var(--ink-900) / 0.25);
  --pub-footer-bg: rgb(var(--ink-850));
  --pub-illus-a: rgba(255, 255, 255, 0.1);
  --pub-illus-b: rgba(255, 255, 255, 0.18);
  --pub-bad-bg: rgba(127, 29, 29, 0.25);
  --pub-ok-fg: #86efac;
  --pub-ok-border: rgba(74, 222, 128, 0.3);
  --pub-ok-bg: rgba(20, 83, 45, 0.25);
  --pub-shop-bg: #ffffff; /* the phone sheets in the gallery are shop pages: light, like the real thing */
  --pub-shop-text: rgb(var(--ink-800));
  --pub-shop-muted: rgb(var(--ink-500));
  --pub-shop-rule: rgb(var(--ink-100));
  --pub-shop-accent: rgb(var(--brand-600));
  --pub-shop-ok: #15803d;
  --pub-stripe: #8f86ff; /* Stripe's blurple, lifted to read on the ink */
  --pub-font-sans: Geist, system-ui, sans-serif;
  --pub-font-serif: "Instrument Serif", Georgia, serif;
  --pub-font-mono: "Fira Mono", ui-monospace, monospace;
}

.pub {
  background-color: var(--pub-bg);
  color: var(--pub-text);
  font-family: var(--pub-font-sans);
  font-weight: 300;
}

.pub-dotted {
  /* Only the ink: the glow is the fixed `.nk-bg` layer behind the page (base.html). */
  background-color: var(--pub-bg);
}

.pub a { color: var(--pub-brand-ink); }
.pub a:hover { color: var(--pub-brand-ink-hover); }
.pub h1, .pub h2, .pub h3, .pub p { margin: 0; }

/* Placeholder block ("foto prodotto", "screenshot dashboard") */
.pub .b {
  background: repeating-linear-gradient(45deg, var(--pub-hatch-a), var(--pub-hatch-a) 5px, var(--pub-hatch-b) 5px, var(--pub-hatch-b) 10px);
  border: 1px solid var(--pub-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 400 10px var(--pub-font-mono);
  color: var(--pub-muted-soft);
  text-align: center;
  padding: 6px;
}

/* Placeholder text line */
.pub .ln { height: 9px; border-radius: 5px; background: var(--pub-line); }

.pub .bx {
  border: 1px solid var(--pub-border-soft);
  border-radius: 12px;
  background-color: var(--pub-surface);
  box-shadow: var(--pub-shadow);
  -webkit-backdrop-filter: var(--pub-glass-blur);
  backdrop-filter: var(--pub-glass-blur);
}

.pub .btn {
  border: 1px solid var(--pub-border);
  border-radius: 8px;
  padding: 10px 16px;
  font-family: var(--pub-font-mono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: var(--pub-surface);
  box-shadow: var(--pub-shadow);
  -webkit-backdrop-filter: var(--pub-glass-blur-sm);
  backdrop-filter: var(--pub-glass-blur-sm);
  color: var(--pub-text);
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease,
    transform 0.12s ease, box-shadow 0.15s ease;
}
.pub .btn:hover {
  color: var(--pub-text);
  background: var(--pub-hover);
  transform: translateY(-1px);
  box-shadow: var(--pub-shadow);
}
.pub .btn:active { transform: translateY(0); box-shadow: none; }

.pub .btn.p {
  background: var(--pub-brand-grad);
  border-color: transparent;
  color: var(--pub-on-brand);
  box-shadow: var(--pub-shadow-lg);
}
.pub .btn.p:hover {
  color: var(--pub-on-brand);
  background: var(--pub-brand-grad);
  filter: brightness(1.15);
}

.pub .nav {
  cursor: pointer;
  background: none;
  border: none;
  font-family: inherit;
  font-size: 14px;
  color: var(--pub-muted);
  padding: 0;
  text-decoration: none;
}
.pub .nav { transition: color 0.15s ease, background 0.15s ease; }
.pub .nav:hover { color: var(--pub-text); }

.pub .tag {
  font: 400 10px var(--pub-font-mono);
  color: var(--pub-tag-fg);
  border: 1px dashed var(--pub-tag-border);
  border-radius: 3px;
  padding: 2px 6px;
  background: var(--pub-tag-bg);
}

.pub .bad {
  font: 400 10px var(--pub-font-mono);
  color: var(--pub-bad-fg);
  border: 1px solid var(--pub-bad-border);
  border-radius: 3px;
  padding: 2px 6px;
}

.pub .sec {
  padding: 44px 32px;
  max-width: 1100px;
  margin: 0 auto;
}

.pub .mono { font: 400 11px var(--pub-font-mono); color: var(--pub-muted-soft); }
.pub .serif {
  font-family: var(--pub-font-serif);
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.01em;
}

/* Billing-period pill (Mensile / Annuale).
 * The active state is a class rather than a bound inline style: Alpine's :style with a string value
 * replaces the whole style attribute, which silently dropped the static padding and radius. */
.pub .pill {
  padding: 6px 16px;
  border-radius: 18px;
  font: 400 12px var(--pub-font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: transparent;
  color: var(--pub-muted);
  transition: background 0.15s ease, color 0.15s ease;
}
.pub .pill.on {
  background: var(--pub-hover);
  color: var(--pub-text);
  box-shadow: var(--pub-shadow);
}
.pub .pill.on:hover { color: var(--pub-text); }

/* ---------------------------------------------------------------------------
 * Focus visibility
 * A keyboard ring on every interactive element. focus-visible only, so a mouse
 * click does not leave a ring behind.
 * ------------------------------------------------------------------------- */
.pub a:focus-visible,
.pub .btn:focus-visible,
.pub .nav:focus-visible,
.pub button:focus-visible,
.pub input:focus-visible,
.pub summary:focus-visible {
  outline: 2px solid var(--pub-focus);
  outline-offset: 2px;
  border-radius: 6px;
}

.pub input {
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.pub input:focus {
  outline: none;
  border-color: var(--pub-brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pub-brand) 22%, transparent);
}

/* Inline text links get an underline on hover rather than only a colour shift. */
.pub .prose-link { text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 0.15s ease, color 0.15s ease; }
.pub .prose-link:hover { border-bottom-color: currentColor; }

/* ---------------------------------------------------------------------------
 * Cards
 * ------------------------------------------------------------------------- */
.pub .bx { transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease; }
.pub .lift:hover {
  transform: translateY(-3px);
  box-shadow: var(--pub-shadow-lg);
  border-color: var(--pub-border);
}

/* ---------------------------------------------------------------------------
 * FAQ — category filter chips and accordion
 * The panel animates on grid-template-rows so it eases to its natural height
 * without hard-coding a max-height.
 * ------------------------------------------------------------------------- */
.pub .cat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  text-align: left;
  padding: 8px 12px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: none;
  font-family: inherit;
  font-size: 14px;
  color: var(--pub-muted);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.pub .cat:hover { background: var(--pub-hover); color: var(--pub-text); }
.pub .cat.on {
  background: var(--pub-tag-bg);
  border-color: var(--pub-tag-border);
  color: var(--pub-tag-fg);
  font-weight: 700;
}
.pub .cat-count {
  font: 400 11px var(--pub-font-mono);
  color: var(--pub-muted-soft);
}
.pub .cat.on .cat-count { color: var(--pub-tag-fg); }

.pub .faq-item {
  border: 1px solid var(--pub-border-soft);
  border-radius: 10px;
  background: var(--pub-surface);
  overflow: hidden;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.pub .faq-item:hover { border-color: var(--pub-border); box-shadow: var(--pub-shadow); }
.pub .faq-item.open { border-color: var(--pub-border); background: rgba(255, 255, 255, 0.07); }

.pub .faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  text-align: left;
  padding: 16px 18px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  color: var(--pub-text);
  transition: background 0.15s ease;
}
.pub .faq-q:hover { background: var(--pub-hover); }

.pub .faq-sign {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  position: relative;
  border-radius: 50%;
  border: 1px solid var(--pub-border);
  transition: transform 0.25s ease, background 0.2s ease, border-color 0.2s ease;
}
.pub .faq-sign::before,
.pub .faq-sign::after {
  content: "";
  position: absolute;
  inset: 50% 5px auto 5px;
  height: 1.5px;
  background: var(--pub-muted);
  transform: translateY(-50%);
  transition: opacity 0.2s ease, background 0.2s ease;
}
.pub .faq-sign::after { transform: translateY(-50%) rotate(90deg); }
.pub .faq-item.open .faq-sign {
  transform: rotate(180deg);
  background: var(--pub-brand-grad);
  border-color: transparent;
}
.pub .faq-item.open .faq-sign::before,
.pub .faq-item.open .faq-sign::after { background: var(--pub-on-brand); }
.pub .faq-item.open .faq-sign::after { opacity: 0; }

.pub .faq-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.28s ease;
}
.pub .faq-item.open .faq-panel { grid-template-rows: 1fr; }
.pub .faq-panel > div { overflow: hidden; }
.pub .faq-panel p {
  padding: 0 18px 18px;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--pub-muted);
}

/* ---------------------------------------------------------------------------
 * Illustrations (replace the wireframe placeholders)
 * ------------------------------------------------------------------------- */
.pub .product-figure {
  width: 200px;
  height: 200px;
  flex: 0 0 200px;
  border-radius: 8px;
  border: 1px solid var(--pub-border-soft);
  background: linear-gradient(160deg, var(--pub-surface-alt), var(--pub-hover));
  display: flex;
  align-items: center;
  justify-content: center;
}
.pub .product-figure svg { width: 82%; height: auto; display: block; }
@media (max-width: 700px) {
  .pub .product-figure { width: 100%; flex: 1 1 auto; height: 170px; }
}

@media (prefers-reduced-motion: reduce) {
  .pub .btn:hover, .pub .lift:hover { transform: none; }
  .pub .faq-panel { transition: none; }
  .pub .faq-sign { transition: none; }
}


/* ---------------------------------------------------------------------------
 * Home scrollytelling — one full product sheet
 * The commercial chrome (photo, brand, code, price, availability) is fixed; the
 * five steps refine the editorial content around it.
 * ------------------------------------------------------------------------- */
.pub .sheet { background: var(--pub-surface-solid); overflow: hidden; }

.pub .sheet-top {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  gap: 18px;
  padding: 15px 18px;
  border-bottom: 1px solid var(--pub-border-soft);
}
.pub .sheet-media {
  border: 1px solid var(--pub-border-soft);
  border-radius: 10px;
  overflow: hidden;
  background: var(--pub-hover);
  align-self: start;
}
.pub .sheet-media img { width: 100%; height: 158px; object-fit: cover; display: block; }

.pub .sheet-buy { min-width: 0; }
.pub .sheet-badge {
  display: inline-block;
  font: 700 10.5px var(--pub-font-mono);
  color: #7a4a00;
  background: #ffd54a;
  border-radius: 4px;
  padding: 3px 8px;
}
.pub .sheet-title-layers { margin-top: 7px; }
.pub .sheet-title { font-size: 18px; font-weight: 700; line-height: 1.25; color: var(--pub-brand-ink); }

.pub .sheet-meta { display: flex; gap: 18px; margin: 8px 0 0; }
.pub .sheet-meta div { display: flex; gap: 6px; }
.pub .sheet-meta dt { font-size: 12.5px; color: var(--pub-muted); }
.pub .sheet-meta dd { margin: 0; font-size: 12.5px; font-weight: 600; color: var(--pub-text); }

.pub .sheet-price { display: flex; gap: 20px; align-items: flex-end; margin-top: 10px; flex-wrap: wrap; }
.pub .sheet-price > div { display: flex; flex-direction: column; gap: 3px; }
.pub .sheet-price-label { font-size: 11.5px; color: var(--pub-muted); }
.pub .sheet-price-now { font-size: 21px; font-weight: 700; color: var(--pub-text); }
.pub .sheet-price-was { font-size: 15px; color: var(--pub-muted); text-decoration: line-through; }
.pub .sheet-price-off { font-size: 15px; font-weight: 700; color: var(--pub-text); }
.pub .sheet-vat { font-size: 11.5px; color: var(--pub-muted); margin-top: 5px; }

.pub .sheet-stock { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; margin-top: 10px; }
.pub .sheet-stock-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--pub-ok-fg); }

/* Single column until the sheet actually has technical data: a product page without specs is just
 * a description, not a description next to an empty column. */
.pub .sheet-bottom {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  padding: 14px 18px 16px;
}
.pub .sheet-bottom.has-side { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.pub .sheet-h { font-size: 13.5px; font-weight: 700; color: var(--pub-brand-ink); margin-bottom: 6px; }
.pub .sheet-p { font-size: 12.5px; line-height: 1.6; color: var(--pub-muted); margin-top: 4px; }

/* Summary bullets in the description column: they carry the same facts as the spec list, so they are
 * set at the same size and only marked with a dot. */
.pub .sheet-points {
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.pub .sheet-points li {
  position: relative;
  padding-left: 14px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--pub-muted);
}
.pub .sheet-points li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 6px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--pub-brand-ink);
}

.pub .sheet-specs { margin: 0; display: flex; flex-direction: column; gap: 5px; }
.pub .sheet-specs div { display: flex; gap: 7px; font-size: 12px; }
.pub .sheet-specs dt { font-weight: 700; color: var(--pub-text); }
.pub .sheet-specs dd { margin: 0; color: var(--pub-muted); }
.pub .sheet-doc {
  margin-top: 7px; font-size: 11px; color: var(--pub-muted-soft);
  word-break: break-all;
}
.pub .sheet-sub {
  font-size: 13px;
  font-weight: 700;
  color: var(--pub-text);
  margin-top: 10px;
}
.pub .sheet-faq { margin: 0; display: flex; flex-direction: column; gap: 7px; }
.pub .sheet-faq dt { font-size: 12px; font-weight: 700; color: var(--pub-text); }
.pub .sheet-faq dd { margin: 2px 0 0; font-size: 12px; line-height: 1.5; color: var(--pub-muted); }



.pub .card-tags { margin-top: 11px; display: flex; gap: 5px; flex-wrap: wrap; }
.pub .mono { font: 400 11px var(--pub-font-mono); color: var(--pub-muted-soft); }

@media (max-width: 900px) {
  .pub .sheet-top { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  /* `.has-side` too, or its two-class selector outranks this one and the specs stay in a column
   * narrow enough to break "Colonna d'acqua" across three lines. */
  .pub .sheet-bottom,
  .pub .sheet-bottom.has-side { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .pub .sheet-media img { height: 160px; }
}

/* ---------------------------------------------------------------------------
 * Page frame
 * A class of its own, separate from `.pub-dotted`: that one is only a background
 * and is reused by panels inside the page, which must not inherit the column
 * layout or the 100vh floor (doing so flipped their `align-items:center` onto
 * the wrong axis and left the plans panel top-aligned).
 *
 * `margin-top:auto` puts the footer at the bottom of short pages; the content is
 * deliberately not wrapped in a <main>, which would cut the sticky panels'
 * containing block short on the home page. The footer is also promoted to a
 * positioned element: the sticky panels above it would otherwise paint over it.
 * ------------------------------------------------------------------------- */
.pub .pub-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.pub .pub-page > * { flex: 0 0 auto; }

.pub .footer {
  margin-top: auto;
  position: relative;
  z-index: 1;
}

/* The claim panel, last before the footer. A normal section in the flow, transparent over the page
 * glow like every section; positioned so it paints over the pinned before/after as that one leaves. */
.pub .impact-panel {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  padding: 236px 0 96px;
}
.pub .impact-legend {
  display: flex;
  justify-content: center;
  gap: 22px;
  margin-top: 36px;
  font-size: 13px;
  font-weight: 600;
}
.pub .impact-key { display: flex; align-items: center; gap: 7px; }
.pub .impact-key::before { content: ""; width: 10px; height: 10px; border-radius: 50%; }
.pub .impact-key-without { color: var(--pub-muted); }
.pub .impact-key-without::before { background: var(--pub-muted-soft); }
.pub .impact-key-with { color: var(--pub-brand); }
.pub .impact-key-with::before { background: var(--pub-brand); }

.pub .impact-chart {
  display: block;
  width: auto;
  max-width: 100%;
  height: clamp(140px, 32vh, 260px);
  margin: 14px auto 0;
  overflow: visible;
}
.pub .impact-grid-line { stroke: var(--pub-border-dash); stroke-dasharray: 3 5; }
.pub .impact-line { fill: none; stroke-width: 3; stroke-linecap: round; }
.pub .impact-line-without { stroke: var(--pub-muted-soft); }
.pub .impact-line-with { stroke: var(--pub-brand); }
.pub .impact-area { fill: var(--pub-brand); opacity: 0.08; }
.pub .impact-dot-without { fill: var(--pub-muted-soft); }
.pub .impact-dot-with { fill: var(--pub-brand); }

.pub .impact-deltas {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px 48px;
}
.pub .impact-delta strong { display: block; font-size: 30px; font-weight: 700; line-height: 1; color: var(--pub-brand); }
.pub .impact-delta span { display: block; margin-top: 6px; font-size: 13px; color: var(--pub-muted); }

/* Armed: the parts that animate are hidden. Live: they come in, the orange line first, the area
 * under it once it has climbed, then its dot and the three deltas one after the other. The grey
 * line never moves: it is the baseline the orange one leaves behind. */
.pub .impact-panel.is-armed .impact-line-with { stroke-dasharray: 1; stroke-dashoffset: 1; }
.pub .impact-panel.is-armed .impact-area,
.pub .impact-panel.is-armed .impact-dot-with,
.pub .impact-panel.is-armed .impact-delta { opacity: 0; }
.pub .impact-panel.is-live .impact-line-with { animation: impact-draw 1.4s cubic-bezier(0.4, 0, 0.2, 1) 0.2s forwards; }
.pub .impact-panel.is-live .impact-area { animation: impact-area-in 0.8s ease-out 1.1s forwards; }
.pub .impact-panel.is-live .impact-dot-with { animation: impact-rise 0.4s ease-out 1.5s forwards; }
.pub .impact-panel.is-live .impact-delta { animation: impact-rise 0.6s ease-out forwards; }
.pub .impact-panel.is-live .impact-delta:nth-child(1) { animation-delay: 1.6s; }
.pub .impact-panel.is-live .impact-delta:nth-child(2) { animation-delay: 1.75s; }
.pub .impact-panel.is-live .impact-delta:nth-child(3) { animation-delay: 1.9s; }
@keyframes impact-draw { to { stroke-dashoffset: 0; } }
@keyframes impact-area-in { to { opacity: 0.08; } }
@keyframes impact-rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

/* On a phone the chart follows the width, and the three deltas stay on one row. */
@media (max-width: 700px) {
  .pub .impact-panel { padding: 56px 0; }
  .pub .impact-chart { width: 100%; height: auto; }
  .pub .impact-deltas { gap: 8px; }
  .pub .impact-delta { padding: 12px 8px; }
  .pub .impact-delta strong { font-size: 24px; }
  .pub .impact-delta span { font-size: 10px; }
  .pub .impact-cta { padding: 18px; }
  .pub .impact-cta h3 { font-size: 20px; }
}

/* ---------------------------------------------------------------------------
 * Before / after comparison
 * Both states sit in the same grid cell, so the cell is as tall as the taller of
 * the two and the layers line up pixel for pixel; the "after" layer paints on
 * top and is clipped from the left. The handle is the thumb of a range input
 * stretched over the whole block: pointer drag, touch and arrow keys come from
 * the platform, so there is no drag code anywhere.
 * ------------------------------------------------------------------------- */
.pub .ba-section { position: relative; z-index: 1; padding: 0; }
.pub .ba-section .sec { padding-top: 0; padding-bottom: 0; }
.pub .ba-caption {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 16px;
  font: 400 11.5px var(--pub-font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pub-muted);
}
.pub .ba-caption i { color: var(--pub-brand-ink); font-size: 14px; }

.pub .ba {
  position: relative;
  max-width: 1120px;
  margin: 14px auto 0;
  touch-action: pan-y; /* the slider takes horizontal drags, the page keeps vertical scrolling */
}
.pub .ba-stack { display: grid; position: relative; }
/* Both layers stretch to the taller one so the two cards are exactly as tall as each other: the cut
 * then runs top to bottom through what reads as a single card, and the line never leaves it. */
.pub .ba-side { grid-area: 1 / 1; min-width: 0; display: flex; flex-direction: column; }
.pub .ba-side .sheet { flex: 1; }

/* Tighter than a standalone sheet: the comparison should fit one screen. */
.pub .ba .sheet-media img { height: 118px; }
.pub .ba .sheet-p { line-height: 1.45; }
.pub .ba .sheet-faq dd { line-height: 1.4; }
.pub .ba .sheet-bottom { gap: 18px; padding: 12px 18px 14px; }

.pub .ba-after { clip-path: inset(0 0 0 var(--p, 50%)); }

/* The "before" editorial block gives up the brand colour and reads as one justified brick: the copy
 * pasted from the supplier, never laid out. */
.pub .ba-before .sheet-h { color: var(--pub-muted); }
.pub .ba-before .sheet-p { text-align: justify; }

/* Same file, two photos. There is one image per product on disk, so the "before" shot is derived
 * from the "after" one rather than shipped twice: `contain` on a white ground puts the subject in
 * the middle of two empty bands, which is what an unedited supplier photo looks like in a frame that
 * was not cut for it, and the desaturation takes the life out of it. The frame itself does not move,
 * so the wipe still runs through one photo -- it changes under the handle instead of jumping. */
.pub .ba-before .sheet-media { background: #fff; }
.pub .ba-before .sheet-media img {
  object-fit: contain;
  filter: grayscale(0.55) saturate(0.7) contrast(0.85) brightness(1.04);
}

.pub .ba-line {
  grid-area: 1 / 1;
  width: 2px;
  justify-self: start;
  margin-left: var(--p, 50%);
  background: var(--pub-brand);
  z-index: 2;
  pointer-events: none;
}

/* Inset by half a thumb on each side so the thumb's centre travels exactly 0%-100% of the stack:
 * left at its own width, the thumb would lag the cut by 22px at the ends. */
.pub .ba-range {
  position: absolute;
  inset: 0 -22px;
  width: auto;
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
  -webkit-appearance: none;
  appearance: none;
  z-index: 3;
  cursor: ew-resize;
}
.pub .ba-range::-webkit-slider-runnable-track { background: transparent; }
.pub .ba-range::-moz-range-track { background: transparent; }
/* The two arrows are painted into the thumb: a range thumb is a pseudo-element and cannot hold
 * markup, so they ride in as a background image, white on the brand gradient. */
.pub .ba-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid var(--pub-brand);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M10.5 5.5 4 12l6.5 6.5z'/%3E%3Cpath d='M13.5 5.5 20 12l-6.5 6.5z'/%3E%3C/svg%3E") center / 20px no-repeat, var(--pub-brand-grad);
  box-shadow: var(--pub-shadow);
  cursor: ew-resize;
}
.pub .ba-range::-moz-range-thumb {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid var(--pub-brand);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M10.5 5.5 4 12l6.5 6.5z'/%3E%3Cpath d='M13.5 5.5 20 12l-6.5 6.5z'/%3E%3C/svg%3E") center / 20px no-repeat, var(--pub-brand-grad);
  box-shadow: var(--pub-shadow);
  cursor: ew-resize;
}
/* The ring belongs on the handle: on the input itself it would frame the whole block. */
.pub .ba-range:focus-visible { outline: none; }
.pub .ba-range:focus { box-shadow: none; }
.pub .ba-range:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--pub-focus); outline-offset: 2px; }
.pub .ba-range:focus-visible::-moz-range-thumb { outline: 2px solid var(--pub-focus); outline-offset: 2px; }

/* The phone layout of the sheet, not a squeezed copy of the desktop one. Two things make the
 * desktop sheet a screen and a half here: the photo becomes a full-width banner, and the three price
 * columns cannot fit 375px so they wrap onto a second row. Both are wrong for a phone anyway -- a
 * product page on a phone is a thumbnail next to the title and one line of price -- so the top block
 * stays two columns with a square thumb, and the price labels go, leaving price, list price and
 * discount on one line.
 *
 * The block below is then trimmed rather than shrunk: the sheet is a demo, and what it has to show
 * is the shape of a written sheet -- a real title, a description in sections, technical data,
 * questions. One H2 section, four specs and two questions say that; three of each only say it three
 * times. Trimmed in CSS and not in the template because the cut depends on the viewport and the
 * template is rendered once for both states. */
@media (max-width: 700px) {
  .pub .ba { margin-top: 8px; }
  /* `.sec`'s 32px gutters cost 64px of a 375px screen; 14px is enough to keep the card off the edge
   * and gives the width back to the sheet, which is the thing being read. */
  .pub .ba-section .sec { padding-left: 14px; padding-right: 14px; }
  /* Marca and Codice do not fit one line next to an 84px thumb: let them wrap instead of being cut
   * off by the sheet's own `overflow: hidden`. */
  .pub .ba .sheet-meta { flex-wrap: wrap; gap: 2px 14px; }
  .pub .ba .sheet-top {
    grid-template-columns: 84px minmax(0, 1fr);
    gap: 12px;
    padding: 12px 14px;
  }
  .pub .ba .sheet-media img { height: 84px; }
  .pub .ba .sheet-bottom { padding: 12px 14px 14px; }

  .pub .ba .sheet-price {
    gap: 10px;
    margin-top: 6px;
    align-items: baseline;
    flex-wrap: nowrap;
  }
  .pub .ba .sheet-price-label { display: none; }
  .pub .ba .sheet-price-now { font-size: 18px; }
  .pub .ba .sheet-price-was,
  .pub .ba .sheet-price-off { font-size: 13px; }
  .pub .ba .sheet-vat { margin-top: 3px; }
  .pub .ba .sheet-stock { margin-top: 8px; }

  /* The demo product is drawn at random, so the two blocks whose length changes from product to
   * product are capped: the panel is the same height whichever one comes up. Cutting the keyword brick mid-sentence costs nothing, nobody was reaching the end
   * of it. */
  .pub .ba .sheet-title {
    font-size: 16px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
  .pub .ba-before .sheet-p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 18;
    overflow: hidden;
  }

  /* The h3s are the section headings, in order: keep the first with its paragraph and drop the rest.
   * The last of them is "In sintesi", whose list goes with it. */
  .pub .ba .sheet-desc .sheet-sub:nth-of-type(n+2),
  .pub .ba .sheet-desc .sheet-sub:nth-of-type(n+2) + .sheet-p,
  .pub .ba .sheet-points { display: none; }

  .pub .ba .sheet-specs div:nth-child(n+5) { display: none; }
  .pub .ba .sheet-doc { display: none; }
  .pub .ba .sheet-faq dt:nth-of-type(n+3),
  .pub .ba .sheet-faq dd:nth-of-type(n+3) { display: none; }
}

/* ---------------------------------------------------------------------------
 * Hero
 * ------------------------------------------------------------------------- */
/* The hero scrolls away like any section (ADR-0015): the before/after is the only pinned block. */
.pub .hero { position: relative; overflow: hidden; }
.pub .hero-content { position: relative; z-index: 2; }

@media (prefers-reduced-motion: reduce) {
  .pub .impact-panel.is-armed .impact-line-with { stroke-dashoffset: 0; animation: none; }
  .pub .impact-panel.is-armed .impact-area { opacity: 0.08; animation: none; }
  .pub .impact-panel.is-armed .impact-dot-with,
  .pub .impact-panel.is-armed .impact-delta { opacity: 1; animation: none; }
}


.pub .tag { letter-spacing: 0.06em; text-transform: uppercase; }

/* ===========================================================================
 * Naoki components (ADR-0015)
 * Titles in two voices (light sans + italic serif), mono eyebrows and labels, and the "shell": a
 * faint glass frame with a mono header strip around a glass card. The page blocks are the same as
 * before; these are the pieces they are built from.
 * ========================================================================= */

/* ---- Top navigation: fixed glass bar, 40px from the top at rest, 20px once scrolling down ---- */
.pub .nk-nav-slot {
  position: fixed;
  top: 40px;
  left: 0;
  right: 0;
  z-index: 30;
  display: flex;
  justify-content: center;
  padding: 0 16px;
  pointer-events: none;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.pub .nk-nav-slot.is-raised { transform: translateY(-20px); }
.pub .nk-nav {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px;
  border: 1px solid var(--pub-border);
  border-radius: 12px;
  background: var(--pub-surface);
  box-shadow: var(--pub-shadow-lg);
  -webkit-backdrop-filter: var(--pub-glass-blur);
  backdrop-filter: var(--pub-glass-blur);
}
.pub .nk-nav-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 10px 0 6px;
  color: var(--pub-text);
  text-decoration: none;
  font-weight: 500;
  font-size: 15px;
}
.pub .nk-nav-brand:hover { color: var(--pub-text); }
.pub .nk-nav-sep { width: 1px; height: 20px; background: var(--pub-border); margin: 0 4px; }
.pub .nk-nav-links { display: flex; gap: 2px; }
.pub .nk-nav .nav {
  font: 400 12px var(--pub-font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 9px 12px;
  border-radius: 8px;
}
.pub .nk-nav .nav:hover { background: var(--pub-hover); }
.pub .nk-nav-cta { padding: 8px 14px; font-size: 12px; margin-left: 2px; white-space: nowrap; }
/* The sign-up button waits at zero width and slides open when the bar enters its scrolled state. */
.pub .nk-nav-cta-scroll {
  max-width: 0;
  padding-left: 0;
  padding-right: 0;
  margin-left: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-width 0.5s cubic-bezier(0.22, 1, 0.36, 1), padding 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    margin 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
}
.pub .nk-nav-cta-scroll::before { opacity: 0; }
.pub .has-cta .nk-nav-cta-scroll { max-width: 140px; padding-left: 14px; padding-right: 14px; margin-left: 2px; opacity: 1; }
.pub .has-cta .nk-nav-cta-scroll::before { opacity: 0.55; }
@media (max-width: 640px) {
  .pub .nk-nav-slot { top: 16px; }
  .pub .nk-nav-links, .pub .nk-nav-links + .nk-nav-sep { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pub .nk-nav-slot, .pub .nk-nav-cta-scroll { transition: none; }
}

/* ---- Titles, eyebrows, leads ---- */
.pub .nk-head { text-align: center; }
.pub .nk-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--pub-border);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: var(--pub-shadow);
  font: 400 11.5px var(--pub-font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pub-text);
  -webkit-backdrop-filter: var(--pub-glass-blur-sm);
  backdrop-filter: var(--pub-glass-blur-sm);
}
.pub .nk-eyebrow i { color: var(--pub-brand-ink); font-size: 13px; }
/* Sizes and rhythm measured on the reference at 1280px: h1 112px, h2 96px, the two lines 8px apart. */
.pub .nk-title {
  margin: 0 auto;
  max-width: 1100px;
  font-size: clamp(48px, 8.75vw, 112px);
  font-weight: 300;
  line-height: 0.9;
  letter-spacing: -0.035em;
  color: var(--pub-text);
}
.pub .nk-title-sm { font-size: clamp(42px, 7.5vw, 96px); line-height: 1; }
.pub .nk-title-serif { margin-top: 8px; }
.pub .nk-title-sans { display: block; font-family: var(--pub-font-sans); }
.pub .nk-title-serif {
  display: block;
  font-family: var(--pub-font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
  padding: 0 0.1em 0.06em;
  color: rgb(var(--brand-75));
}
.pub .nk-lead {
  max-width: 480px;
  margin: 16px auto 0;
  font-size: 19px;
  font-weight: 300;
  line-height: 1.4;
  color: var(--pub-muted);
}
.pub .nk-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 28px; }
.pub .btn i { margin-right: 8px; font-size: 14px; }
.pub .nk-note {
  margin-top: 14px;
  font: 400 11px var(--pub-font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pub-muted);
}

/* ---- Glass card ---- */
.pub .nk-shell-body {
  border: 1px solid var(--pub-border-soft);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: var(--pub-shadow);
  padding: 24px;
  -webkit-backdrop-filter: var(--pub-glass-blur);
  backdrop-filter: var(--pub-glass-blur);
}
.pub .nk-shell-body.is-brand {
  border-color: transparent;
  background: var(--pub-brand-grad);
  box-shadow: var(--pub-shadow-lg);
  color: #ffffff;
}
.pub .btn.nk-btn-light { background: #ffffff; border-color: transparent; color: rgb(var(--ink-900)); }
.pub .btn.nk-btn-light:hover { background: rgb(var(--ink-100)); color: rgb(var(--ink-900)); }
.pub .is-brand .nav { color: #ffffff; }
.pub .is-brand .nav:hover { color: rgb(var(--ink-100)); }

/* ---- Hero ---- */
/* Every public page opens with this block (title, lead, then the page's own extras), so the h1 sits
 * at the same height on all of them. The top padding clears the fixed nav. */
.pub .hero-content { text-align: center; max-width: none; width: 100%; padding: 240px 32px 64px; }
.pub .hero-content > .nk-lead { margin-top: 8px; }
.pub .hero-content > .nk-title { margin-top: 0; }
/* On the home the before/after follows straight on, with its own top spacing. */
@media (max-width: 640px) {
  .pub .hero-content { padding: 140px 20px 40px; }
}
/* ---- Before / after and claim panels ---- */
.pub .ba-section .sec { width: 100%; }
.pub .impact-panel .sec { text-align: center; max-width: none; width: 100%; }
.pub .impact-panel .sec { padding-top: 0; }
.pub .impact-legend { font: 400 11px var(--pub-font-mono); letter-spacing: 0.08em; text-transform: uppercase; }
.pub .impact-deltas {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  gap: 10px;
}
.pub .impact-delta {
  padding: 14px 12px;
  border: 1px solid var(--pub-border-soft);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: var(--pub-shadow);
  -webkit-backdrop-filter: var(--pub-glass-blur);
  backdrop-filter: var(--pub-glass-blur);
}
.pub .impact-delta strong { font-weight: 300; letter-spacing: -0.03em; color: var(--pub-text); }
.pub .impact-delta span { font: 400 11px var(--pub-font-mono); letter-spacing: 0.06em; text-transform: uppercase; }
.pub .impact-cta { max-width: 760px; margin: 30px auto 0; text-align: left; }
.pub .impact-cta.nk-shell-body {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  padding: 22px 26px;
}
.pub .impact-cta h3 { font-size: 24px; font-weight: 300; letter-spacing: -0.02em; color: #ffffff; }
.pub .impact-cta h3 span { font-family: var(--pub-font-serif); font-style: italic; font-weight: 400; font-size: 1.15em; }
.pub .impact-cta p { font-size: 14.5px; color: rgba(255, 255, 255, 0.78); margin-top: 6px; }
.pub .impact-cta-actions { display: flex; align-items: center; gap: 18px; }

/* ---- FAQ ---- */
.pub .faq-layout { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.pub .faq-rail {
  width: 230px;
  flex: 0 0 auto;
  position: sticky;
  top: 104px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pub .cat { font: 400 12px var(--pub-font-mono); letter-spacing: 0.06em; text-transform: uppercase; padding: 10px 12px; }
.pub .cat.on { background: rgba(255, 255, 255, 0.07); border-color: var(--pub-border-soft); color: var(--pub-text); box-shadow: var(--pub-shadow); }
.pub .faq-list { flex: 1; min-width: 300px; display: flex; flex-direction: column; gap: 8px; }
.pub .faq-item { border-radius: 12px; background: var(--pub-surface); box-shadow: var(--pub-shadow); -webkit-backdrop-filter: var(--pub-glass-blur); backdrop-filter: var(--pub-glass-blur); }
.pub .faq-q { padding: 20px 22px; font-size: 17px; font-weight: 300; }
.pub .faq-q:hover { background: transparent; }
.pub .faq-sign { width: 30px; height: 30px; background: rgba(255, 255, 255, 0.06); }
.pub .faq-panel p { padding: 0 22px 22px; font-size: 15px; font-weight: 300; }
.pub .faq-contact { padding-top: 180px; padding-bottom: 96px; }
@keyframes nk-rise {
  from { opacity: 0; transform: translateY(16px); filter: blur(10px); }
  to { opacity: 1; transform: none; filter: none; }
}
/* Each question rises out of a blur when shown, one beat after the one above (`--i`, faq.html). */
.pub .faq-item { animation: nk-rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: calc(var(--i, 0) * 60ms); }
@media (prefers-reduced-motion: reduce) { .pub .faq-item { animation: none; } }
@media (max-width: 700px) {
  .pub .faq-rail { width: 100%; position: static; }
}

/* ---- Pricing ---- */
.pub .plans-toggle {
  display: inline-flex;
  margin-top: 28px;
  padding: 4px;
  border: 1px solid var(--pub-border);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.05);
  -webkit-backdrop-filter: var(--pub-glass-blur-sm);
  backdrop-filter: var(--pub-glass-blur-sm);
}
.pub .plans-toggle .pill { white-space: nowrap; }
@media (max-width: 480px) {
  .pub .plans-toggle .pill { padding: 6px 9px; font-size: 10.5px; letter-spacing: 0.04em; }
}
.pub .plans-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  align-items: stretch;
  padding-top: 8px;
}
.pub .plan-card { display: flex; flex-direction: column; }
@media (min-width: 640px) { .pub .plans-grid { grid-template-columns: repeat(2, 1fr); } }
/* All four tiers on one row, so the step up from Gratis to Pro reads at a glance. */
@media (min-width: 860px) {
  .pub .plans-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
  .pub .plans-grid .nk-shell-body { padding: 20px 16px; }
  .pub .plans-grid .plan-price { font-size: 34px; }
  .pub .plans-grid .plan-list li { padding: 9px 10px; gap: 8px; font-size: 12.5px; }
  .pub .plans-grid .plan-list strong { white-space: nowrap; }
}
/* The recommended plan (the one with the badge) stands out: brand border, deeper shadow, a bit larger. */
.pub .plan-card:has(.plan-badge) {
  position: relative;
  z-index: 1;
  border-color: rgb(var(--brand-600) / 0.7);
  box-shadow: var(--pub-shadow-lg), 0 0 0 1px rgb(var(--brand-600) / 0.35), 0 20px 50px rgb(var(--brand-600) / 0.25);
}
@media (min-width: 860px) {
  .pub .plan-card:has(.plan-badge) { scale: 1.06; } /* `scale`, not transform: the parallax owns transform */
}
.pub .plan-list { margin-bottom: 4px; }
.pub .plan-name { color: var(--pub-text); }
.pub .plan-badge {
  font: 400 10.5px var(--pub-font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--pub-brand-grad);
  color: #ffffff;
}
.pub .plan-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.pub .plan-price { font-size: 44px; font-weight: 300; line-height: 1.1; letter-spacing: -0.03em; color: var(--pub-text); }
.pub .plan-per { margin-left: 8px; font: 400 12px var(--pub-font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--pub-muted); }
.pub .plan-credits { margin-top: 10px; font-size: 15px; font-weight: 500; color: var(--pub-brand-ink); }
.pub .plan-note { margin-top: 2px; font-size: 13px; color: var(--pub-muted); }
.pub .is-brand .plan-price, .pub .is-brand .plan-credits { color: #ffffff; }
.pub .is-brand .plan-per, .pub .is-brand .plan-note { color: rgba(255, 255, 255, 0.78); }
.pub .plan-cta { margin-top: 22px; width: 100%; }
.pub .plan-list-title {
  padding: 20px 0 10px;
  font: 400 11px var(--pub-font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pub-muted);
}
.pub .plan-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.pub .plan-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  font-size: 13.5px;
  color: var(--pub-muted);
}
.pub .plan-list li i { color: var(--pub-brand-ink); }
.pub .plan-list li.is-off, .pub .plan-list li.is-off i { color: rgba(255, 255, 255, 0.35); }
.pub .is-brand .plan-list li i { color: #ffffff; }
.pub .plan-list li span { flex: 1; }
.pub .plan-list strong { font-weight: 500; color: var(--pub-text); }
.pub .plans-table-wrap { margin-top: 8px; overflow-x: auto; text-align: left; padding: 8px 18px; }
.pub .plans-table { min-width: 520px; font-size: 14px; }
.pub .plans-row { display: flex; padding: 12px 0; border-bottom: 1px solid var(--pub-rule-soft); }
.pub .plans-row > span { flex: 1; text-align: center; }
.pub .plans-row > span:first-child { flex: 1.6; text-align: left; color: var(--pub-text); }
.pub .plans-head { border-bottom: 1px solid var(--pub-rule); color: var(--pub-muted); font: 400 11px var(--pub-font-mono); letter-spacing: 0.08em; text-transform: uppercase; }
.pub .plans-row:last-child { border-bottom: none; }
.pub .plans-cta-row { padding-top: 20px; }
.pub .plans-cta-row .btn { width: calc(100% - 16px); }
.pub .plans-empty { padding: 20px; font-size: 14px; color: var(--pub-muted); }
.pub .plans-offer { padding-top: 120px; padding-bottom: 96px; }

/* ---- Auth (entra / registrati) ---- */
.pub .auth {
  display: grid;
  grid-template-columns: minmax(0, 460px) minmax(0, 320px);
  justify-content: center;
  align-items: start;
  gap: 20px;
  padding-top: 12px;
  padding-bottom: 72px;
}
@media (max-width: 820px) {
  .pub .auth { grid-template-columns: minmax(0, 460px); }
}
.pub .auth-form { display: flex; flex-direction: column; gap: 18px; }
.pub .nk-field { display: flex; flex-direction: column; gap: 8px; }
.pub .nk-field > span {
  font: 400 11px var(--pub-font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pub-text);
}
.pub .nk-field input {
  padding: 14px 16px;
  border: 1px solid var(--pub-border-soft);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--pub-text);
  font: 300 16px var(--pub-font-sans);
}
.pub .nk-field input::placeholder { color: var(--pub-muted); }
.pub .nk-field small, .pub .is-bad { font-size: 13px; color: var(--pub-bad-fg); }
.pub .auth-alert {
  margin-bottom: 18px;
  padding: 12px 14px;
  border: 1px solid var(--pub-border);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  font-size: 14px;
  color: var(--pub-muted);
}
.pub .auth-alert.is-bad { border-color: var(--pub-bad-border); background: var(--pub-bad-bg); }
.pub .auth-submit { width: 100%; margin-top: 6px; padding: 14px 16px; }
.pub .auth-switch { margin-top: 18px; font-size: 14px; color: var(--pub-muted); }
.pub .auth-switch a { font-weight: 500; }
.pub .perks-badge {
  font: 400 10.5px var(--pub-font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--pub-brand-grad);
  color: #ffffff;
}
.pub .perks-figure { font-size: 40px; font-weight: 300; letter-spacing: -0.03em; line-height: 1.1; }
.pub .perks-note { margin-top: 4px; font-size: 14px; color: rgba(255, 255, 255, 0.78); }
.pub .perks-list {
  list-style: none;
  margin: 20px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 14px;
}
.pub .perks-list li { display: flex; align-items: center; gap: 10px; }

/* ---- Footer: a shell as wide as the page ---- */
.pub .footer { background: transparent; padding: 40px 16px 16px; }
.pub .footer-shell { max-width: 1100px; margin: 0 auto; }
.pub .footer-body { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 32px 56px; padding: 32px; }
.pub .footer-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--pub-text); }
.pub .footer-brand strong { font-size: 18px; font-weight: 500; }
.pub .footer-claim { margin-top: 12px; max-width: 300px; font-size: 14px; color: var(--pub-muted); }
.pub .footer-cols { display: flex; flex-wrap: wrap; gap: 32px 64px; }
.pub .footer-col { display: flex; flex-direction: column; gap: 12px; }
.pub .footer-col-title { margin-bottom: 4px; font: 400 12px var(--pub-font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--pub-muted-soft); }
.pub .footer-col a { font: 400 12px var(--pub-font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--pub-text); text-decoration: none; }
.pub .footer-col a:hover { color: var(--pub-brand-ink); }
.pub .footer-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 16px;
  padding: 14px 12px 6px;
  font: 400 11px var(--pub-font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pub-muted);
}
.pub .footer-bar a { color: var(--pub-muted); text-decoration: none; }
.pub .footer-bar a:hover { color: var(--pub-brand-ink); }


/* ---- Page ground: the reference's fixed layer, same stack and opacities. Two blurred gradient
 * ellipses at 20%, the wave gradient (js/public-motion.js) at 25%, a film grain at 3%. ---- */
.pub .pub-page { isolation: isolate; }
.pub .nk-bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.pub .nk-glow { position: absolute; inset: 0; opacity: 0.2; }
.pub .nk-flow { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.25; }
.pub .nk-blob { position: absolute; border-radius: 100%; filter: blur(100px); }
.pub .nk-blob-a {
  left: -7%; top: -41vh; width: 89vw; height: 90vh; opacity: 0.7;
  background: linear-gradient(99deg, rgba(0, 193, 255, 0) 0%, rgb(var(--brand-600)) 100%);
}
.pub .nk-blob-b {
  left: 41%; top: -23vh; width: 79vw; height: 70vh; opacity: 0.6;
  background: linear-gradient(226deg, rgba(23, 75, 255, 0) 0%, #174aff 100%);
}
.pub .nk-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.03;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='128' height='128' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 128px repeat;
}

/* ---- Progressive blur at the foot of the viewport ---- */
.pub .nk-edge-blur { position: fixed; left: 0; right: 0; bottom: 0; height: 240px; z-index: 25; pointer-events: none; }
.pub .nk-edge-blur i { position: absolute; inset: 0; }
.pub .nk-edge-blur i:nth-child(1) { backdrop-filter: blur(0.0625px); -webkit-mask-image: linear-gradient(transparent 0%, #000 12.5%, #000 25%, transparent 37.5%); mask-image: linear-gradient(transparent 0%, #000 12.5%, #000 25%, transparent 37.5%); }
.pub .nk-edge-blur i:nth-child(2) { backdrop-filter: blur(0.125px); -webkit-mask-image: linear-gradient(transparent 12.5%, #000 25%, #000 37.5%, transparent 50%); mask-image: linear-gradient(transparent 12.5%, #000 25%, #000 37.5%, transparent 50%); }
.pub .nk-edge-blur i:nth-child(3) { backdrop-filter: blur(0.25px); -webkit-mask-image: linear-gradient(transparent 25%, #000 37.5%, #000 50%, transparent 62.5%); mask-image: linear-gradient(transparent 25%, #000 37.5%, #000 50%, transparent 62.5%); }
.pub .nk-edge-blur i:nth-child(4) { backdrop-filter: blur(0.5px); -webkit-mask-image: linear-gradient(transparent 37.5%, #000 50%, #000 62.5%, transparent 75%); mask-image: linear-gradient(transparent 37.5%, #000 50%, #000 62.5%, transparent 75%); }
.pub .nk-edge-blur i:nth-child(5) { backdrop-filter: blur(1px); -webkit-mask-image: linear-gradient(transparent 50%, #000 62.5%, #000 75%, transparent 87.5%); mask-image: linear-gradient(transparent 50%, #000 62.5%, #000 75%, transparent 87.5%); }
.pub .nk-edge-blur i:nth-child(6) { backdrop-filter: blur(2px); -webkit-mask-image: linear-gradient(transparent 62.5%, #000 75%, #000 87.5%, transparent 100%); mask-image: linear-gradient(transparent 62.5%, #000 75%, #000 87.5%, transparent 100%); }
.pub .nk-edge-blur i:nth-child(7) { backdrop-filter: blur(4px); -webkit-mask-image: linear-gradient(transparent 75%, #000 87.5%, #000 100%); mask-image: linear-gradient(transparent 75%, #000 87.5%, #000 100%); }
.pub .nk-edge-blur i:nth-child(8) { backdrop-filter: blur(8px); -webkit-mask-image: linear-gradient(transparent 87.5%, #000 100%); mask-image: linear-gradient(transparent 87.5%, #000 100%); }

/* ---- Primary button: gradient with a blurred copy of itself underneath, as a glow ----
 * No backdrop-filter and no filter on hover here: either would make the button a stacking context
 * and paint the glow over the button instead of under it. */
.pub .btn.p { position: relative; -webkit-backdrop-filter: none; backdrop-filter: none; }
.pub .btn.p::before {
  content: "";
  position: absolute;
  inset: 6px 8px -6px;
  z-index: -1;
  border-radius: inherit;
  background: var(--pub-brand-grad);
  filter: blur(12px);
  opacity: 0.55;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.pub .btn.p:hover { filter: none; background: linear-gradient(102deg, rgb(var(--brand-500)) 0%, rgb(var(--brand-550)) 100%); }
.pub .btn.p:hover::before { opacity: 0.85; }

/* ---- Motion (driven by js/public-motion.js; the hidden state only exists under html.nk-motion) ---- */
.pub .nk-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pub .nk-word { display: inline-block; white-space: nowrap; }
.pub .nk-char { display: inline-block; }
.nk-motion .pub .nk-title .nk-char {
  opacity: 0;
  filter: blur(10px);
  transform: translateY(10px);
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), filter 0.8s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(var(--i, 0) * 24ms);
}
.nk-motion .pub .nk-title.is-in .nk-char { opacity: 1; filter: none; transform: none; }
/* While a block fades, its opacity and filter cut the glass inside it off from the page (a backdrop
   root), so that glass cannot blur; it would snap to full blur the instant the fade ends. Instead the
   glass blur inside starts at zero and grows only once the fade is over. */
@property --nk-glass { syntax: '<number>'; inherits: true; initial-value: 1; }
.nk-motion .pub .nk-reveal {
  --nk-at: var(--d, 0ms);
  --nk-glass: 0;
  --pub-glass-blur: blur(calc(10px * var(--nk-glass)));
  --pub-glass-blur-sm: blur(calc(5px * var(--nk-glass)));
  opacity: 0;
  filter: blur(10px);
  transform: translateY(16px);
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1) var(--nk-at),
    filter 0.9s cubic-bezier(0.22, 1, 0.36, 1) var(--nk-at),
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) var(--nk-at),
    --nk-glass 0.5s ease-out calc(var(--nk-at) + 0.9s);
}
.nk-motion .pub .nk-reveal.is-in { --nk-glass: 1; opacity: 1; filter: none; transform: none; }
/* Hero: the blocks under the title wait for its letters to be on their way. */
.nk-motion .pub .hero-content .nk-reveal { --nk-at: calc(350ms + var(--d, 0ms)); }

/* ---- Staggered parallax on card rows, as the reference's grids (scroll-driven, no JS) ---- */
@keyframes nk-parallax { from { transform: translateY(var(--py, 40px)); } to { transform: none; } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .pub .plans-grid > .plan-card {
      animation: nk-parallax linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 45%;
    }
    .pub .plans-grid > .plan-card:nth-child(1) { --py: 30px; }
    .pub .plans-grid > .plan-card:nth-child(2) { --py: 50px; }
    .pub .plans-grid > .plan-card:nth-child(3) { --py: 70px; }
  }
}

/* ---- Gallery: the demo sheets in their phone layout, in the reference's drifting columns ---- */
/* Section rhythm of the reference: ~236px from the last element of a section to the next title,
 * 64px from a lead to the content under it. */
.pub .nk-gallery-section { position: relative; padding: 236px 0 0; }
.pub .nk-gallery-section .nk-head { padding-top: 0; padding-bottom: 0; }
.pub .nk-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  max-width: 1040px;
  margin: 64px auto 0;
  padding: 0 32px;
}
.pub .nk-gallery-col { display: flex; flex-direction: column; gap: 22px; }
.pub .nk-card {
  position: relative;
  padding: 10px;
  border: 1px solid var(--pub-border-soft);
  border-radius: 16px;
  background: var(--pub-surface);
  box-shadow: var(--pub-shadow);
  -webkit-backdrop-filter: var(--pub-glass-blur);
  backdrop-filter: var(--pub-glass-blur);
}
.pub .nk-phone {
  overflow: hidden;
  border-radius: 10px;
  background: var(--pub-shop-bg);
  color: var(--pub-shop-text);
  font-weight: 400;
}
.pub .nk-phone-media { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.pub .nk-phone-body { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 18px; }
.pub .nk-phone-brand { font: 500 10.5px var(--pub-font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--pub-shop-muted); }
.pub .nk-phone-title { font-size: 17px; font-weight: 600; line-height: 1.25; color: var(--pub-shop-text); }
.pub .nk-phone-price { display: flex; align-items: baseline; gap: 8px; margin-top: 2px; }
.pub .nk-phone-price strong { font-size: 19px; font-weight: 700; }
.pub .nk-phone-price s { font-size: 13px; color: var(--pub-shop-muted); }
.pub .nk-phone-price span { font-size: 12px; font-weight: 700; color: var(--pub-shop-accent); }
.pub .nk-phone-stock { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: var(--pub-shop-ok); }
.pub .nk-phone-stock::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pub .nk-phone-points {
  list-style: none;
  margin: 4px 0 0;
  padding: 10px 0 0;
  border-top: 1px solid var(--pub-shop-rule);
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--pub-shop-muted);
}
.pub .nk-phone-points li { padding-left: 14px; position: relative; }
.pub .nk-phone-points li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 6px; height: 6px; border-radius: 2px; background: var(--pub-shop-accent); }
/* The reference's drift (Framer scroll speed 95 / 108): each column is offset by the page scroll
 * times (1 - speed / 100), so odd columns sink at 0.05px per pixel and even ones rise at 0.08px. The
 * even columns sit 200px lower to start with, as in the reference, and rise past the odd ones.
 * `--nk-sy` is set by js/public-motion.js; desktop only, like the reference. */
@media (min-width: 1200px) and (prefers-reduced-motion: no-preference) {
  .pub .nk-gallery-col:nth-child(even) { margin-top: 200px; }
  .pub .nk-gallery-col:nth-child(odd) { transform: translateY(calc(var(--nk-sy, 0) * 0.05px)); }
  .pub .nk-gallery-col:nth-child(even) { transform: translateY(calc(var(--nk-sy, 0) * -0.08px)); }
}
@media (max-width: 760px) {
  .pub .nk-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 40px 14px; }
  .pub .nk-gallery-col { gap: 12px; }
  .pub .nk-gallery-col:nth-child(3) { display: none; }
  .pub .nk-phone-body { padding: 10px 10px 12px; }
  .pub .nk-phone-title { font-size: 14px; }
  .pub .nk-phone-points { display: none; }
}
.pub .footer-badges { display: flex; align-items: center; gap: 16px; }
.pub .footer-badge { display: inline-flex; align-items: center; gap: 7px; color: var(--pub-text); }
.pub .footer-badge i { font-size: 15px; color: var(--pub-stripe); }
.pub .footer-badge img { display: block; border-radius: 2px; }