/* ==========================================================================
   NEOSPHYR — site stylesheet
   --------------------------------------------------------------------------
   Colours are taken from the official brand mark (LOGO/NeosphyrMark/README.md).
   Everything on the site is drawn from the tokens in :root below.
   ========================================================================== */

:root{
  /* --- Brand, sampled from the mark ------------------------------------ */
  --navy:        #15233B;   /* the disc of the mark */
  --navy-soft:   #2E4A73;   /* the on-dark variant of the disc */
  --blue:        #1F4E8C;
  --red:         #D14A2B;
  --yellow:      #C8871B;
  --green:       #2E7D5B;

  /* --- Interface ------------------------------------------------------- */
  --bg:          #FFFFFF;
  --bg-alt:      #FAF8F4;
  --bg-tint:     #F0EDE6;
  --ink:         #15233B;
  --ink-2:       #4A5768;
  --ink-3:       #7E8A99;
  --line:        #E5E0D7;
  --line-soft:   #F2EFE9;

  --blue-dark:   #16396A;
  --blue-tint:   #E9EFF8;

  /* --- Product accents: one brand colour each, echoing the mark --------- */
  --p-compliance: var(--blue);
  --p-extractor:  var(--green);
  --p-inspector:  var(--yellow);
  --p-parameter:  var(--red);
  --p-avatar:     #4A3F6B;   /* Avatar non aveva un accento proprio */

  /* Tinte al 9% usate per gli sfondi delle icone: sostituiscono il vecchio
     hex a 8 cifre (#RRGGBB18), che non si puo scrivere con una variabile. */
  --p-compliance-18: #1F4E8C18;
  --p-extractor-18:  #2E7D5B18;
  --p-inspector-18:  #C8871B18;
  --p-parameter-18:  #D14A2B18;
  --p-avatar-18:     #4A3F6B18;

  /* --- Type ------------------------------------------------------------ */
  --font-display: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --h1: 54px; --h2: 34px; --h3: 20px;
  --body: 17px; --lead: 20px; --small: 14.5px;

  /* --- Shape and space -------------------------------------------------- */
  --wrap:    1200px;
  --measure: 680px;
  --pad:     104px;
  --r-pill:  999px;
  --r-lg:    24px;
  --r-md:    16px;
  --r-sm:    10px;
  --nav-h:   72px;


  /* --- Aggiunti con la tavolozza Blueprint ------------------------------ */
  --bg-rgb:       255,255,255;   /* per le sfumature che devono chiudersi sul fondo pagina */
  --focus:        #8FB3DC;       /* contorno di messa a fuoco sopra le immagini scure */
  --hero-glow-a:  rgba(31,78,140,.11);
  --hero-glow-b:  rgba(209,74,43,.055);
  --proof-bg:     var(--ink);
  --proof-ink:    #FFFFFF;
  --proof-dim:    #7E8A99;
  --proof-link:   #F0EDE6;
  --fs-bg:        var(--ink);
  --fs-panel:     #2E4A73;
  --fs-line:      #2E4A73;
  --fs-ink:       #FFFFFF;
  --fs-dim:       #F0EDE6;
  --fs-mute:      #7E8A99;
  --fs-eyebrow:   #8A8A2E;       /* l oliva che regge il giallo FloatSight */

  --shadow-sm: 0 1px 2px rgba(11,31,53,.06), 0 2px 8px rgba(11,31,53,.04);
  --shadow-md: 0 2px 6px rgba(11,31,53,.07), 0 12px 28px rgba(11,31,53,.07);
  --shadow-lg: 0 4px 12px rgba(11,31,53,.08), 0 24px 56px rgba(11,31,53,.10);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; scroll-padding-top:calc(var(--nav-h) + 16px); }

body{
  margin:0; background:var(--bg); color:var(--ink-2);
  font-family:var(--font-body); font-size:var(--body); line-height:1.65;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

img,svg,video{ max-width:100%; height:auto; display:block; }

/* --- Accessibility ------------------------------------------------------ */
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:999;
  background:var(--blue); color:#fff; padding:14px 22px;
  border-radius:0 0 var(--r-sm) 0; font-weight:600; text-decoration:none;
}
.skip-link:focus{ left:0; }
:is(a,button,input,select,textarea,summary):focus-visible{
  outline:3px solid var(--blue); outline-offset:2px; border-radius:var(--r-sm);
}
.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ==========================================================================
   TYPE
   ========================================================================== */
h1,h2,h3,h4{ font-family:var(--font-display); color:var(--ink); margin:0; font-weight:700; }
h1,.h1{ font-size:var(--h1); line-height:1.08; letter-spacing:-.03em; }
h2,.h2{ font-size:var(--h2); line-height:1.2;  letter-spacing:-.022em; }
h3,.h3{ font-size:var(--h3); line-height:1.35; letter-spacing:-.012em; font-weight:600; }
h4,.h4{ font-size:16px;      line-height:1.4;  letter-spacing:-.008em; font-weight:600; }
p{ margin:0; }
strong{ color:var(--ink); font-weight:600; }

.lead{ font-size:var(--lead); line-height:1.6; color:var(--ink-2); max-width:var(--measure); }
.small{ font-size:var(--small); line-height:1.6; }
.muted{ color:var(--ink-3); }

.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--font-mono); font-size:12px; font-weight:500;
  letter-spacing:.11em; text-transform:uppercase; color:var(--blue);
  margin:0 0 18px;
}
.eyebrow::before{ content:""; width:20px; height:2px; border-radius:2px; background:currentColor; }
.text-center .eyebrow{ justify-content:center; }

a{ color:var(--blue); text-decoration:none; }
a:hover{ color:var(--blue-dark); }
.prose a{ text-decoration:underline; text-underline-offset:3px; }

/* ==========================================================================
   LAYOUT
   ========================================================================== */
.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 32px; }
.section{ padding:var(--pad) 0; }
.section--alt{ background:var(--bg-alt); }
.section--tight{ padding:64px 0; }
.section--dark{ background:var(--navy); color:#AFC3DA; }
.section--dark :is(h1,h2,h3,h4){ color:#fff; }
.section--dark .lead{ color:#AFC3DA; }

.section-head{ max-width:var(--measure); margin-bottom:56px; }
.section-head h2{ margin-bottom:18px; }
.text-center{ text-align:center; }
.text-center .section-head{ margin-left:auto; margin-right:auto; }
.text-center .lead{ margin-left:auto; margin-right:auto; }

.grid{ display:grid; gap:24px; }
.grid--2{ grid-template-columns:repeat(2,1fr); }
.grid--3{ grid-template-columns:repeat(3,1fr); }
.grid--4{ grid-template-columns:repeat(4,1fr); }
.grid--5{ grid-template-columns:repeat(5,1fr); gap:18px; }
.card--wide{ grid-column:1 / -1; }
.split{ display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:center; }
/* Le colonne della griglia non devono allargarsi per colpa di un contenuto
   non spezzabile (un percorso dentro <code>, una tabella larga). */
.split > *{ min-width:0; }
.prose code{ overflow-wrap:anywhere; }
.split--wide-left{ grid-template-columns:1.15fr 1fr; }
.split--wide-right{ grid-template-columns:1fr 1.15fr; }

hr.rule{ border:0; height:1px; background:var(--line); margin:0;
         /* .rule piu' sotto e' la SCHEDA dentro .rules, e vale anche qui perche'
            il selettore e' la sola classe: senza questi due azzeramenti un <hr>
            si prende padding 28px e display:grid, e il filo di un pixel diventa
            un rettangolo grigio alto quasi sessanta. */
         padding:0; display:block; }

/* ==========================================================================
   HEADER
   ========================================================================== */
.header{
  position:sticky; top:0; z-index:100; background:rgba(255,255,255,.88);
  backdrop-filter:saturate(180%) blur(14px); -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent; transition:border-color .2s ease, box-shadow .2s ease;
}
.header.is-stuck{ border-bottom-color:var(--line); box-shadow:0 1px 12px rgba(11,31,53,.05); }
.header__inner{
  max-width:var(--wrap); margin:0 auto; padding:0 32px; height:var(--nav-h);
  display:flex; align-items:center; gap:36px;
}
.brand{ display:flex; align-items:center; gap:11px; text-decoration:none; flex:0 0 auto; }
.brand img{ width:34px; height:34px; }
/* Il marchio scuro dell'intestazione e' un quadrato: lo arrotonda il CSS,
   cosi' il file resta quadrato e riutilizzabile altrove. Solo nel header:
   .brand c'e' anche nel footer, con un marchio diverso. */
.header .brand img{ border-radius:50%; }
.brand__name{
  font-family:var(--font-display); font-size:20px; font-weight:700;
  letter-spacing:.01em; color:var(--ink);
}
.nav{ display:flex; align-items:center; gap:4px; margin-left:auto; }
.nav a, .nav button{
  font-family:var(--font-body); font-size:15.5px; font-weight:500; color:var(--ink);
  background:none; border:0; cursor:pointer; padding:9px 15px;
  border-radius:var(--r-pill); text-decoration:none; display:inline-flex; align-items:center; gap:6px;
  transition:background-color .16s ease, color .16s ease;
}
.nav a:hover, .nav button:hover{ background:var(--bg-alt); color:var(--blue); }
.nav a.is-current{ color:var(--blue); background:var(--blue-tint); }
.nav__caret{ width:9px; height:9px; opacity:.55; transition:transform .18s ease; }
.dropdown[data-open="true"] .nav__caret{ transform:rotate(180deg); }
.header__cta{ margin-left:8px; }

/* --- Products dropdown --------------------------------------------------- */
.dropdown{ position:relative; }
.dropdown__panel{
  position:absolute; top:calc(100% + 10px); left:50%; transform:translateX(-50%) translateY(-6px);
  width:340px; background:#fff; border:1px solid var(--line); border-radius:var(--r-md);
  box-shadow:var(--shadow-lg); padding:8px; opacity:0; visibility:hidden;
  transition:opacity .16s ease, transform .16s ease, visibility .16s;
}
.dropdown[data-open="true"] .dropdown__panel{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
.dropdown__item{
  display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:start;
  padding:11px 12px; border-radius:var(--r-sm); text-decoration:none;
}
.dropdown__item:hover{ background:var(--bg-alt); }
.dropdown__dot{ width:9px; height:9px; border-radius:50%; margin-top:7px; }
.dropdown__icon{ width:32px; height:32px; margin-top:1px; }
.dropdown__panel{ width:380px; }
.dropdown__item strong{ display:block; font-size:15px; color:var(--ink); font-weight:600; line-height:1.3; }
.dropdown__item span{ display:block; font-size:13px; color:var(--ink-3); line-height:1.45; margin-top:2px; }

/* --- Mobile menu --------------------------------------------------------- */
.burger{
  display:none; width:44px; height:44px; padding:11px; margin-left:auto;
  background:none; border:0; cursor:pointer; border-radius:var(--r-pill);
}
.burger span{ display:block; height:2px; background:var(--ink); border-radius:2px; transition:transform .22s, opacity .22s; }
.burger span+span{ margin-top:5px; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
.mobile-nav{ display:none; border-top:1px solid var(--line); background:#fff; padding:12px 0 20px; }
.mobile-nav.is-open{ display:block; }
.mobile-nav a{
  display:block; padding:13px 32px; font-size:16.5px; font-weight:500; color:var(--ink); text-decoration:none;
}
.mobile-nav a:hover{ background:var(--bg-alt); }
.mobile-nav .sub a{ padding-left:52px; font-size:15.5px; font-weight:400; color:var(--ink-2); }
.mobile-nav__label{
  padding:16px 32px 6px; font-family:var(--font-mono); font-size:11.5px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3);
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  height:48px; padding:0 26px; font-family:var(--font-body);
  font-size:15.5px; font-weight:600; line-height:1; white-space:nowrap;
  border-radius:var(--r-pill); border:1.5px solid transparent; cursor:pointer;
  text-decoration:none; transition:background-color .18s, border-color .18s, color .18s, box-shadow .18s, transform .18s;
}
.btn--primary{ background:var(--blue); color:#fff; box-shadow:0 1px 2px rgba(43,125,224,.3); }
.btn--primary:hover{ background:var(--blue-dark); color:#fff; box-shadow:0 4px 14px rgba(43,125,224,.32); }
.btn--secondary{ background:#fff; color:var(--ink); border-color:var(--line); }
.btn--secondary:hover{ background:var(--bg-alt); border-color:var(--ink-3); color:var(--ink); }
.btn--ghost{ background:transparent; color:var(--blue); padding:0 14px; }
.btn--ghost:hover{ background:var(--blue-tint); }
.btn--on-dark{ background:#fff; color:var(--navy); }
.btn--on-dark:hover{ background:#E8F1FD; color:var(--navy); }
.btn--outline-dark{ background:transparent; color:#fff; border-color:rgba(255,255,255,.35); }
.btn--outline-dark:hover{ background:rgba(255,255,255,.1); color:#fff; border-color:rgba(255,255,255,.6); }
.btn[aria-disabled="true"]{ opacity:.55; pointer-events:none; }
.btn-row{ display:flex; flex-wrap:wrap; gap:12px; margin-top:36px; }

.link-arrow{ display:inline-flex; align-items:center; gap:7px; font-weight:600; font-size:15.5px; }
.link-arrow svg{ width:16px; height:16px; transition:transform .18s ease; }
.link-arrow:hover svg{ transform:translateX(3px); }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{ padding:92px 0 96px; position:relative; overflow:hidden; }
.hero__bg{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(760px 420px at 82% 8%,  var(--hero-glow-a), transparent 62%),
    /* il centro sale dal 96% al 74% e il raggio cala: l'alone si esaurisce
       DENTRO l'hero invece di essere tranciato da overflow:hidden */
    radial-gradient(560px 320px at 16% 74%, var(--hero-glow-b), transparent 60%);
}
/* A prescindere da dove cadono gli aloni, l'ultimo tratto dell'hero sfuma nel
   colore della sezione sottostante. Toglie la riga netta anche alle particelle
   del canvas, che altrimenti si interrompono sul bordo. */
.hero::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:190px;
  z-index:0; pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(var(--bg-rgb),0) 0%, rgba(var(--bg-rgb),.72) 58%, rgb(var(--bg-rgb)) 100%);
}
/* Animated background, home hero only. The canvas sits over the gradient and
   under the veil, which keeps the headline readable whatever it is doing. */
.hero__canvas{
  position:absolute; inset:0; width:100%; height:100%;
  z-index:0; pointer-events:none; display:block;
}
.hero__veil{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(660px 380px at 50% 46%,
    rgba(255,255,255,.92) 0%, rgba(255,255,255,.70) 42%, rgba(255,255,255,0) 72%);
}
.hero .wrap{ position:relative; z-index:1; }
.hero h1{ margin-bottom:24px; }
.hero .lead{ font-size:21px; }
.hero__art{ position:relative; }
.hero__sphere{ width:min(100%,430px); margin-inline:auto; filter:drop-shadow(0 26px 60px rgba(6,40,74,.22)); }

/* --- Centred hero, for the home page -------------------------------------- */
.hero--center{ text-align:center; padding:84px 0 92px; }
.hero--center .wrap{ max-width:960px; }
.hero__mark{ width:112px; height:auto; margin:0 auto 26px; }
.hero__kicker{
  font-family:var(--font-mono); font-size:13px; font-weight:500; letter-spacing:.14em;
  text-transform:uppercase; color:var(--blue); margin:0 0 22px;
}
.hero--center h1{ font-size:62px; line-height:1.04; letter-spacing:-.035em; margin-bottom:26px; }
.hero__lead{ margin:0 auto; max-width:620px; font-size:20px; }
.hero__cta{ justify-content:center; margin-top:38px; }

/* --- Three-column statement strip ------------------------------------------ */
.strip__item{ border-top:2px solid var(--line); padding-top:22px; }
.strip__label{
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-3); margin:0 0 12px;
}
.strip__item :is(h2,h3), .strip__title{
  font-size:20px; line-height:1.35; font-weight:600; letter-spacing:-.012em; margin-bottom:10px;
}
.strip__item p{ font-size:15.5px; }

/* --- Rule-group grid -------------------------------------------------------- */
.rules{ display:grid; grid-template-columns:repeat(2,1fr); gap:2px; background:var(--line);
        border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; }
.rule{ background:#fff; padding:28px 30px; display:grid; grid-template-columns:auto 1fr; gap:22px; align-items:start; }
.rule:last-child:nth-child(odd){ grid-column:1 / -1; }
.rule__count{ font-family:var(--font-display); font-size:38px; font-weight:700; line-height:1; letter-spacing:-.03em; }
.rule h3{ margin-bottom:7px; }
.rule p{ font-size:15.5px; }

/* --- Layered composition: a drawing with product shots floating over it ----- */
.stage{ position:relative; margin-bottom:182px; }
.stage__main{ width:70%; }
.stage__float{ margin:0; position:absolute; }
.stage__float .shot{ box-shadow:var(--shadow-lg); border-color:rgba(255,255,255,.8); }
.stage__float figcaption{
  margin-top:10px; font-size:13px; line-height:1.45; color:var(--ink-3);
}
.stage__float--a{ width:56%; right:0; bottom:-80px; }
.stage__float--b{ width:39%; right:59%; bottom:-140px; }
.shot--float{ border-radius:14px; }
.stage__note{ max-width:720px; margin-top:8px; }

/* --- Avatar band: one render, two real screenshots -------------------------- */
.avatar-mix{ display:grid; gap:18px; }
.avatar-mix__hero{ margin:0; }
.avatar-mix__hero figcaption{ margin-top:12px; font-size:13.5px; color:var(--ink-3); }
.avatar-mix__pair{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.avatar-mix__pair figcaption{ font-size:13px; }

/* --- A drawing, not a screenshot: no heavy frame --------------------------- */
.shot--diagram{ background:#fff; padding:20px; box-shadow:var(--shadow-sm); }
.shot--diagram img{ border-radius:8px; }

/* --- Product page hero ---------------------------------------------------- */
.p-hero{ padding:76px 0 64px; position:relative; }
/* no screenshot follows the hero on this page, so it does not need the run-off */
.p-hero--bare{ padding-bottom:20px; }
.p-hero .lead{ font-size:22px; color:var(--ink); font-weight:500; max-width:720px; }
.p-hero__body{ margin-top:22px; max-width:var(--measure); }
.p-hero__meta{ display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; }

/* --- Page header (simple pages) ------------------------------------------- */
.page-head{ padding:80px 0 56px; border-bottom:1px solid var(--line); }
.page-head h1{ font-size:44px; margin-bottom:18px; }

/* ==========================================================================
   PILLS AND BADGES
   ========================================================================== */
.pill{
  display:inline-flex; align-items:center; gap:8px; min-height:34px; padding:6px 15px;
  border-radius:var(--r-pill); background:var(--bg-alt); border:1px solid var(--line);
  font-size:13.5px; font-weight:500; color:var(--ink-2); line-height:1.35;
}
.pill svg{ width:16px; height:16px; flex:0 0 auto; }
.pill--accent{ background:var(--blue-tint); border-color:transparent; color:var(--blue-dark); }
.pill__dot{ width:7px; height:7px; border-radius:50%; background:currentColor; }

.tag{
  display:inline-block; font-family:var(--font-mono); font-size:11.5px;
  letter-spacing:.09em; text-transform:uppercase; font-weight:500;
  padding:5px 11px; border-radius:var(--r-pill); background:var(--bg-tint); color:var(--blue-dark);
}

/* ==========================================================================
   CARDS
   ========================================================================== */
.card{
  position:relative; display:flex; flex-direction:column; background:#fff;
  border:1px solid var(--line); border-radius:var(--r-lg); padding:32px;
  text-decoration:none; color:inherit; overflow:hidden;
  transition:box-shadow .22s ease, transform .22s ease, border-color .22s ease;
}
.card:hover{ box-shadow:var(--shadow-md); transform:translateY(-3px); border-color:var(--line-soft); }
.card__accent{ position:absolute; inset:0 0 auto 0; height:4px; background:var(--blue); }
.card h3{ margin-bottom:10px; }
.card p{ margin-bottom:22px; font-size:16px; }
.card .link-arrow{ margin-top:auto; }
/* --- Product card with a screenshot band ---------------------------------- */
.card--media{ padding:0; }
.card__body{ display:flex; flex-direction:column; flex:1 1 auto; padding:30px 32px 32px; }
.card__head{ display:flex; align-items:center; gap:14px; margin-bottom:14px; }
.card__head h3{ margin:0; }
.card--media .card__icon{ margin-bottom:0; }
.card--media p{ margin-bottom:22px; }
.card__media{
  display:block; aspect-ratio:16/9; overflow:hidden; background:var(--bg-alt);
  border-bottom:1px solid var(--line-soft);
}
.card__media img{
  width:100%; height:100%; object-fit:cover; object-position:center top; display:block;
  transition:transform .55s cubic-bezier(.2,.7,.3,1);
}
.card:hover .card__media img{ transform:scale(1.035); }

/* the flagship card is twice as wide, so the screenshot sits beside the text */
.card--wide.card--media{ display:grid; grid-template-columns:1fr 1.08fr; align-items:stretch; }
.card--wide .card__body{ order:1; padding:44px 44px 46px; justify-content:center; }
.card--wide .card__body .link-arrow{ margin-top:22px; }   /* group, do not push down */
.card--wide .card__media{
  order:2; aspect-ratio:auto; height:100%; min-height:300px;
  border-top:0; border-left:1px solid var(--line-soft);
}

/* --- Feature block (borderless) ------------------------------------------- */
.feature h3{ margin-bottom:10px; }
.feature p{ font-size:16px; }
.feature__icon{
  width:48px; height:48px; border-radius:var(--r-md); display:flex;
  align-items:center; justify-content:center; margin-bottom:20px;
  background:var(--blue-tint); color:var(--blue);
}
.feature__icon svg{ width:24px; height:24px; }

/* --- Product icons, from the supplied artwork ---------------------------- */
.picon{ display:block; flex:0 0 auto; }
.card__icon{ width:56px; height:56px; margin-bottom:20px; }
.hero__picon{ width:72px; height:72px; margin-bottom:24px; }
.plan__icon{ width:40px; height:40px; margin-bottom:14px; }
.dl .picon{ width:40px; height:40px; }
.feature--num .feature__icon{
  font-family:var(--font-display); font-weight:700; font-size:18px;
}

/* --- Check list ----------------------------------------------------------- */
.checks{ display:grid; gap:2px; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; background:var(--line-soft); }
.check{ background:#fff; padding:26px 30px; display:grid; grid-template-columns:auto 1fr; gap:18px; align-items:start; }
.check__sev{
  width:10px; height:10px; border-radius:50%; margin-top:9px; flex:0 0 auto;
}
.check__sev--critical{ background:var(--red); }
.check__sev--warning{ background:var(--yellow); }
.check__sev--info{ background:var(--blue); }
.check :is(h3,h4){ margin-bottom:6px; font-size:16px; font-weight:600; }
.check p{ font-size:15.5px; }
.check__label{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--ink-3); margin-left:10px;
}

/* ==========================================================================
   SCREENSHOTS  — rounded, framed, never shadow-heavy
   ========================================================================== */
.shot{
  border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line);
  background:var(--bg-alt); box-shadow:var(--shadow-md); line-height:0;
}
.shot img{ width:100%; }
.shot--video{ background:#0B1F35; }
.shot video{ width:100%; height:auto; display:block; }
.shot--plain{ box-shadow:none; }
.shot--lg{ border-radius:28px; box-shadow:var(--shadow-lg); }
figure.shot-fig{ margin:0; }
figure.shot-fig figcaption{
  margin-top:14px; font-size:14px; color:var(--ink-3); line-height:1.55;
}
.shot-grid{ display:grid; gap:28px; }

/* ==========================================================================
   STEPS
   ========================================================================== */
.steps{ counter-reset:step; display:grid; gap:0; }
.step{
  counter-increment:step; display:grid; grid-template-columns:auto 1fr;
  gap:24px; padding:30px 0; border-top:1px solid var(--line);
}
.step:last-child{ border-bottom:1px solid var(--line); }
.step__num{
  width:42px; height:42px; border-radius:50%; background:var(--navy); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; font-size:16px;
}
.step__num::before{ content:counter(step,decimal-leading-zero); }
.step h3{ margin-bottom:7px; }
.step p{ font-size:16px; max-width:var(--measure); }

/* --- Benefit list ---------------------------------------------------------- */
.bene{ list-style:none; padding:0; margin:28px 0 0; display:grid; gap:14px; }
.bene li{ display:grid; grid-template-columns:auto 1fr; gap:13px; align-items:start;
          font-size:16.5px; color:var(--ink); line-height:1.5; }
.bene svg{ width:19px; height:19px; margin-top:3px; flex:0 0 auto; }

/* ==========================================================================
   SPEC TABLE
   ========================================================================== */
.spec{ border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; background:#fff; }
.spec__row{
  display:grid; grid-template-columns:260px 1fr; gap:24px;
  padding:16px 28px; border-top:1px solid var(--line-soft); font-size:15.5px;
}
.spec__row:first-child{ border-top:0; }
.spec__row dt{ font-weight:600; color:var(--ink); }
.spec__row dd{ margin:0; color:var(--ink-2); }
dl.spec{ margin:0; }

/* ==========================================================================
   PRICING
   ========================================================================== */
.price-note{
  display:flex; gap:12px; align-items:flex-start; padding:16px 20px;
  background:var(--blue-tint); border-radius:var(--r-md); font-size:15px;
  color:var(--blue-dark); max-width:760px;
}
.price-note svg{ width:20px; height:20px; flex:0 0 auto; margin-top:2px; }

.plan{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:30px; display:flex; flex-direction:column;
}
.plan--featured{ border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-tint); }
.plan__name{ font-family:var(--font-display); font-size:17px; font-weight:700; color:var(--ink); }
.plan__seats{ font-size:14px; color:var(--ink-3); margin-top:3px; }
.plan--compact{ padding:24px 22px; }
/* "Parameter Exchange" takes two lines and the others take one. The name absorbs
   the free space in the card, and since the cards in a row are the same height the
   price, the unit, the VAT mark and the button end up level — with no reserved gap
   when the name is short. */
.plan--compact .plan__name{
  display:flex; align-items:flex-start; line-height:1.35; flex:1 1 auto;
}
.plan--compact .plan__price{ margin-top:14px; }
/* the VAT mark belongs with the price, not with the button under it */
.plan--compact .plan__per{ margin-bottom:14px; }
.plan--compact .vat{ margin-top:0; margin-bottom:26px; }
.plan--compact .plan__price{ font-size:30px; }
.plan__price{
  font-family:var(--font-display); font-size:38px; font-weight:700; color:var(--ink);
  letter-spacing:-.03em; margin:18px 0 2px; line-height:1;
}
.plan__per{ font-size:14px; color:var(--ink-3); margin-bottom:22px; }
.plan ul{ list-style:none; margin:0 0 24px; padding:0; display:grid; gap:9px; }
.plan li{ font-size:15px; padding-left:26px; position:relative; }
.plan li::before{
  content:""; position:absolute; left:0; top:8px; width:14px; height:8px;
  border-left:2px solid var(--green); border-bottom:2px solid var(--green);
  transform:rotate(-45deg); border-radius:1px;
}
.plan .btn{ margin-top:auto; }

.ptable{ width:100%; border-collapse:collapse; font-size:15.5px; }
.ptable th, .ptable td{ padding:15px 18px; text-align:left; border-bottom:1px solid var(--line-soft); }
.ptable thead th{
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--ink-3); font-weight:500;
  background:var(--bg-alt); border-bottom:1px solid var(--line);
}
.ptable tbody th{ font-weight:600; color:var(--ink); }
.ptable td{ color:var(--ink-2); font-variant-numeric:tabular-nums; }
.ptable tr:last-child :is(th,td){ border-bottom:0; }
.ptable-wrap{ border:1px solid var(--line); border-radius:var(--r-lg); overflow:auto; background:#fff; }

/* --- One product's price block, on the pricing page ------------------------ */
.pcard{ border-top:2px solid var(--line); padding-top:24px; margin-bottom:56px; }
.pcard:last-child{ margin-bottom:0; }
.pcard__head{ display:flex; align-items:center; gap:18px; margin-bottom:16px; }
.pcard__icon{ flex:none; }
.pcard__title{ min-width:0; }
.pcard__title h2{ margin:0; font-size:25px; line-height:1.18; letter-spacing:-.02em; }
.pcard__title h2 a{ color:inherit; }
.pcard__title h2 a:hover{ color:var(--blue); }
.pcard__sub{ margin:5px 0 0; font-size:14.5px; line-height:1.5; color:var(--ink-3); max-width:52ch; }
.pcard__from{ margin-left:auto; text-align:right; white-space:nowrap; }
.pcard__fromlabel{
  display:block; font-family:var(--font-mono); font-size:11.5px; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); margin-bottom:2px;
}
.pcard__fromval{ font-family:var(--font-display); font-size:28px; font-weight:700;
                 letter-spacing:-.02em; color:var(--ink); }
.pcard__fromunit{ display:block; font-size:12.5px; color:var(--ink-3); margin-top:2px; }
.pcard__trial{ margin-bottom:18px; }

/* --- One criterion group: a drawing of what it measures, then the words --- */
.rulegrid{ display:grid; grid-template-columns:1fr 1fr; gap:28px; }

/* --- Workflow screenshots at full column width, under the steps ---------- */
.wf-shots{ display:grid; gap:56px; margin-top:64px; }
.wf-shots .shot img{ width:100%; display:block; }
.rulefig{
  display:flex; flex-direction:column; background:#fff;
  border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
}
.rulefig__media{
  display:block; aspect-ratio:3/2; overflow:hidden; background:var(--bg-alt);
  border-bottom:1px solid var(--line-soft);
}
.rulefig__media img{ width:100%; height:100%; object-fit:cover; display:block; }
.rulefig__body{ padding:24px 28px 28px; }
.rulefig__n{
  font-family:var(--font-mono); font-size:11.5px; font-weight:500; letter-spacing:.12em;
  text-transform:uppercase; color:var(--blue); margin:0;
}
.rulefig h3{ margin:8px 0 10px; font-size:20px; letter-spacing:-.015em; }
.rulefig p{ font-size:15.5px; line-height:1.6; color:var(--ink-2); margin:0; }

/* --- "excl. VAT" marker, used wherever a price appears --------------------- */
.vat{
  display:inline-block; font-family:var(--font-mono); font-size:11px; font-weight:500;
  letter-spacing:.09em; text-transform:uppercase; color:var(--ink-2);
  background:var(--bg-alt); border:1px solid var(--line); border-radius:var(--r-pill);
  padding:3px 9px; white-space:nowrap; vertical-align:middle; line-height:1.3;
}
.ptable .vat{ margin-left:8px; }
.pcard__from .vat{ margin-top:6px; }
.plan .vat{ margin-top:8px; align-self:flex-start; }
.ptable--plans td, .ptable--plans tbody th{ white-space:nowrap; }
/* La colonna del prezzo era l'ultima, e "On request \00b7 negotiated" aveva
   bisogno di andare a capo li'. Ora l'ultima colonna porta il pulsante di
   acquisto, che a capo non ci deve andare: l'eccezione si sposta sulla
   colonna del prezzo, per posizione. */
.ptable--plans :is(th,td):nth-child(4){ white-space:normal; }
.ptable--plans :is(th,td):last-child{ white-space:nowrap; }

/* Il pulsante dentro una tabella di piani. Un .btn intero e' alto 48px e
   renderebbe una tabella di quattro righe alta quanto una sezione; 38px
   resta un bersaglio vero sul telefono e lascia le righe leggibili. */
.btn--sm{ height:38px; padding:0 20px; font-size:14.5px; }
.ptable .ptable__buy{ width:1%; text-align:right; padding-top:10px; padding-bottom:10px; }
/* .btn separa i propri figli con gap:9px, pensato per un'icona accanto a una
   parola. Qui i figli sono due parole, e 9px fra loro si leggono come due
   spazi: 4px e' la larghezza di uno spazio a questo corpo. */
.ptable .ptable__buy .btn{ gap:4px; }

/* Le tabelle dei piani sulle pagine prodotto stanno in meta' pagina. Con la
   colonna del pulsante in piu' le celle cominciano ad andare a capo - "Multi
   User" spezzato su due righe - quindi qui si stringe il passo e si vieta il
   ritorno a capo, dove ogni cella e' breve per natura. */
.ptable--buy :is(th,td){ padding-left:14px; padding-right:14px; }
@media (min-width:681px){ .ptable--buy :is(th,td){ white-space:nowrap; } }

/* Un figlio di griglia ha min-width:auto, cioe' non scende sotto la larghezza
   del proprio contenuto. Senza questa riga la tabella dei piani allarga la
   colonna che la contiene, la colonna allarga la pagina, e l'overflow:auto su
   .ptable-wrap non serve a niente: il telefono si ritrova a scorrere di lato
   tutto il sito invece della sola tabella. */
#pricing .split > *{ min-width:0; }

@media (max-width:680px){
  /* Quattro colonne in 390px: senza questo il pulsante finisce mezzo fuori
     schermo. La tabella scorre in orizzontale, ma un pulsante da raggiungere
     scorrendo e' un pulsante che non si preme. */
  .ptable--plans :is(th,td){ padding-left:10px; padding-right:10px; }
  .ptable .ptable__buy{ padding-left:2px; padding-right:10px; }
  .btn--sm{ padding:0 13px; font-size:14px; }
  .ptable__neg{ display:none; }
  /* ", excl. VAT" nell'intestazione manda la colonna del prezzo a capo
     quattro volte e ruba la larghezza al pulsante. La pagina lo dice gia'
     due volte piu' in alto, in caratteri piu' grandi di questo. */
  .ptable__vat{ display:none; }
  .ptable__us{ display:none; }
}

/* Il numero di posti e' nella riga due volte: in una colonna sua, e dentro
   il nome del piano. Normalmente la seconda copia e' nascosta. Sotto i
   480px la colonna sparisce e resta la copia, perche' quattro colonne piu'
   un pulsante non entrano in 320px e un pulsante che si raggiunge solo
   scorrendo di lato e' un pulsante che non si preme. */
.ptable__seats{ display:none; }
@media (max-width:480px){
  :is(.ptable--plans,.ptable--buy) :is(th,td):nth-child(2){ display:none; }
  :is(.ptable--plans,.ptable--buy) .ptable__seats{ display:block; margin-top:3px;
    font-weight:400; font-size:13px; color:var(--ink-3); }
  .ptable--buy :is(th,td){ padding-left:10px; padding-right:10px; }
}

/* ==========================================================================
   DOWNLOADS
   ========================================================================== */
.dl{
  display:grid; grid-template-columns:auto 1fr auto; gap:22px; align-items:center;
  padding:24px 28px; border:1px solid var(--line); border-radius:var(--r-md); background:#fff;
}
.dl__icon{
  width:46px; height:46px; border-radius:var(--r-sm); display:flex; flex:0 0 auto;
  align-items:center; justify-content:center; background:var(--bg-alt); color:var(--ink-2);
}
.dl__icon svg{ width:22px; height:22px; }
.dl h4, .dl__title{ margin:0 0 3px; font-family:var(--font-display); font-size:16px;
  font-weight:600; line-height:1.4; letter-spacing:-.008em; color:var(--ink); }
.dl p{ font-size:14.5px; color:var(--ink-3); }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq{ max-width:840px; border-top:1px solid var(--line); }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{
  list-style:none; cursor:pointer; padding:22px 44px 22px 0; position:relative;
  font-family:var(--font-display); font-size:17.5px; font-weight:600; color:var(--ink);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:""; position:absolute; right:8px; top:50%; width:11px; height:11px;
  border-right:2px solid var(--blue); border-bottom:2px solid var(--blue);
  transform:translateY(-70%) rotate(45deg); transition:transform .2s ease;
}
.faq details[open] summary::after{ transform:translateY(-30%) rotate(-135deg); }
.faq .answer{ padding:0 44px 24px 0; font-size:16px; }

/* ==========================================================================
   CALLOUT
   ========================================================================== */
.callout{
  border-left:3px solid var(--blue); background:var(--bg-alt);
  border-radius:0 var(--r-md) var(--r-md) 0; padding:22px 26px; font-size:16px;
  max-width:760px;
}
.callout--warn{ border-left-color:var(--yellow); }
/* only the leading title becomes its own line — a <strong> inside the body
   of a callout must stay inline, or it breaks the sentence in half */
.callout > strong:first-child{ display:block; margin-bottom:5px; }

/* ==========================================================================
   CTA BAND
   ========================================================================== */
.cta{ background:var(--navy); color:#AFC3DA; padding:84px 0; text-align:center; position:relative; overflow:hidden; }
.cta::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(620px 320px at 50% -10%, rgba(43,125,224,.3), transparent 66%);
}
.cta .wrap{ position:relative; }
.cta h2{ color:#fff; margin-bottom:16px; }
.cta .lead{ color:#AFC3DA; margin:0 auto 34px; max-width:560px; }
.cta .btn-row{ justify-content:center; margin-top:0; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer{ background:var(--navy); color:#93AAC4; padding:72px 0 36px; font-size:15px; }
.footer__grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px; }
.footer__head{
  color:#fff; font-family:var(--font-mono); font-size:11.5px; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase; margin:0 0 18px; opacity:.72;
}
.footer h4{
  color:#fff; font-family:var(--font-mono); font-size:11.5px; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase; margin-bottom:18px; opacity:.72;
}
.footer ul{ list-style:none; margin:0; padding:0; display:grid; gap:11px; }
.footer a{ color:#C4D4E6; text-decoration:none; }
.footer a:hover{ color:#fff; }
.footer .brand__name{ color:#fff; }
.footer__about{ max-width:300px; margin-top:16px; color:#93AAC4; font-size:14.5px; }

/* I profili social nel footer.
   .footer ul vale 0,1,1 e impone display:grid a ogni elenco del footer: per
   batterlo serve 0,2,0, cioe' nominare il footer insieme alla classe. Una regola
   .footer__social da sola verrebbe ignorata, e le icone resterebbero incolonnate
   senza che niente lo spieghi. */
.footer .footer__social{ display:flex; gap:10px; margin-top:18px; list-style:none; padding:0; }
.footer .footer__social a{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:50%;
  background:rgba(255,255,255,.07); color:#C4D4E6;
  transition:background-color .18s, color .18s;
}
.footer .footer__social a:hover{ background:rgba(255,255,255,.16); color:#fff; }
.footer__base{
  margin-top:52px; padding-top:26px; border-top:1px solid rgba(255,255,255,.12);
  display:grid; gap:12px; font-size:13.5px; color:#7F97B2;
}
.footer__legalnote{ max-width:820px; line-height:1.65; }

/* ==========================================================================
   MOTION
   ========================================================================== */
.reveal{ opacity:0; transform:translateY(16px); transition:opacity .6s cubic-bezier(.2,.7,.3,1), transform .6s cubic-bezier(.2,.7,.3,1); }
.reveal.is-in{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1080px){
  :root{ --h1:44px; --h2:30px; --pad:80px; }
  .hero--center h1{ font-size:46px; }
  .rules{ grid-template-columns:1fr; }
  .stage{ margin-bottom:96px; }
  .stage__main{ width:88%; }
  .stage__float--a{ width:62%; bottom:-56px; }
  .stage__float--b{ display:none; }
  .grid--4{ grid-template-columns:repeat(2,1fr); }
  .grid--3{ grid-template-columns:repeat(2,1fr); }
  .grid--5{ grid-template-columns:repeat(3,1fr); }
  .split, .split--wide-left, .split--wide-right{ grid-template-columns:1fr; gap:48px; }
  .hero__sphere{ width:min(100%,340px); }
  .footer__grid{ grid-template-columns:repeat(2,1fr); gap:36px; }
  .spec__row{ grid-template-columns:200px 1fr; }
}

@media (max-width:900px){
  /* below this width the flagship card stops being side-by-side */
  .card--wide.card--media{ display:flex; flex-direction:column; }
  .card--wide .card__body{ order:2; padding:30px 32px 32px; }
  .card--wide .card__media{
    order:1; aspect-ratio:16/9; height:auto; min-height:0;
    border-left:0; border-top:0; border-bottom:1px solid var(--line-soft);
  }

  .nav, .header__cta{ display:none; }
  .burger{ display:block; }
  .header__inner{ gap:0; }

  /* the price moves under the name rather than being squeezed beside it */
  .pcard__head{ flex-wrap:wrap; gap:14px 16px; }
  .pcard__title{ flex:1 1 220px; }
  .pcard__from{ margin-left:0; flex:1 1 100%; text-align:left;
                border-top:1px solid var(--line-soft); padding-top:12px; }
  .pcard__fromlabel{ display:inline; margin-right:8px; }
  .pcard__fromunit{ display:inline; margin-left:8px; }
}

@media (max-width:680px){
  /* the device-activation column is always seats x 2, and the page says so
     above — dropping it here is what keeps the price column on screen */
  .ptable--plans :is(th,td):nth-child(3){ display:none; }
  .ptable--plans :is(th,td){ padding:13px 10px; }

  :root{ --h1:34px; --h2:26px; --h3:18px; --body:16px; --lead:17.5px; --pad:60px; --nav-h:64px; }
  .wrap, .header__inner{ padding:0 20px; }
  .mobile-nav a{ padding-left:20px; padding-right:20px; }
  .mobile-nav .sub a{ padding-left:40px; }
  .mobile-nav__label{ padding-left:20px; }
  .hero{ padding:56px 0 64px; }
  .hero--center{ padding:48px 0 56px; }
  .hero--center h1{ font-size:34px; letter-spacing:-.025em; }
  .hero__mark{ width:72px; margin-bottom:20px; }
  .hero__kicker{ font-size:11.5px; letter-spacing:.11em; }
  .hero__lead{ font-size:17px; }
  .rule{ padding:22px; gap:16px; }
  .stage{ margin-bottom:0; display:grid; gap:20px; }
  .stage__main{ width:100%; }
  .stage__float{ position:static; width:100% !important; }
  .stage__float--b{ display:block; }
  .stage__note{ margin-top:18px; }
  .avatar-mix__pair{ grid-template-columns:1fr; }
  .rule__count{ font-size:30px; }
  .shot--diagram{ padding:10px; }
  .strip__item{ padding-top:18px; }
  .p-hero{ padding:48px 0 44px; }
  .page-head{ padding:52px 0 36px; }
  .page-head h1{ font-size:32px; }
  .p-hero .lead{ font-size:19px; }
  .section-head{ margin-bottom:36px; }
  .grid--2, .grid--3, .grid--4, .grid--5{ grid-template-columns:1fr; gap:18px; }
  .rulegrid{ grid-template-columns:1fr; gap:18px; }
  .rulefig__body{ padding:22px 22px 24px; }
  .card--wide{ grid-column:auto; }
  .card{ padding:26px; }
  .card--media{ padding:0; }
  .card--media .card__body, .card--wide .card__body{ padding:24px 24px 26px; }
  .btn-row{ flex-direction:column; align-items:stretch; margin-top:28px; }
  .btn{ width:100%; }
  .btn--ghost{ width:auto; align-self:flex-start; }
  .step{ grid-template-columns:auto 1fr; gap:16px; padding:24px 0; }
  .check{ padding:22px; }
  .spec__row{ grid-template-columns:1fr; gap:4px; padding:16px 20px; }
  .dl{ grid-template-columns:auto 1fr; gap:16px; padding:20px; }
  .dl .btn{ grid-column:1 / -1; }
  .footer__grid{ grid-template-columns:1fr; gap:32px; }
  .cta{ padding:60px 0; }
  .faq summary{ font-size:16.5px; }
}

@media print{
  .header, .mobile-nav, .cta, .btn-row{ display:none !important; }
  .reveal{ opacity:1 !important; transform:none !important; }
}

/* ==========================================================================
   NEOSPHYR DESIGN SYSTEM — reference
   --------------------------------------------------------------------------
   BRAND COLOURS (from LOGO/NeosphyrMark/README.md, sampled from the mark)
     Navy / disc        #06284A   --navy
     Navy on dark       #123E6B   --navy-soft
     Blue               #2B7DE0   --blue        primary accent
     Red                #E8412F   --red         Parameter Exchange
     Yellow             #F5B416   --yellow      Model Inspector
     Green              #34A853   --green       BWIC Extractor
   Blue is also BWIC Compliance's accent — the flagship carries the primary.

   INTERFACE
     Background         #FFFFFF   Alt #F6F8FB   Tint #EEF4FC
     Ink                #0B1F35   Ink-2 #4C6076  Ink-3 #7A8CA0
     Line               #DFE6EE   Line-soft #EDF1F6

   TYPE      DM Sans (display) · Inter (body) · JetBrains Mono (labels)
     H1 54 / 44 / 34    H2 34 / 30 / 26    H3 20    Body 17    Lead 20

   SHAPE     Buttons pill · Cards 24px · Medium 16px · Small 10px
   SPACE     Content 1200px · Reading 680px · Section 104 / 80 / 60px
   ========================================================================== */


/* ============================================================================
   THE PROOF BAND  (.proof)
   A thin navy strip of figures, directly under the two product lines. Numbers
   only, no decoration: it is there to answer "is any of this real" before the
   visitor has scrolled far enough to find out.
   ========================================================================== */
.proof{ background:var(--proof-bg); color:var(--proof-dim); padding:30px 0; }
.proof__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:28px; }
.proof__item{ min-width:0; }
.proof__n{
  font-family:var(--font-display); font-size:30px; font-weight:700; line-height:1.1;
  letter-spacing:-.025em; color:var(--proof-ink); margin:0;
}
.proof__t{ font-size:13.5px; line-height:1.5; color:var(--proof-dim); margin:6px 0 0; }
.proof__t a{ color:var(--proof-link); text-decoration:underline; text-underline-offset:2px; }
.proof__t a:hover{ color:var(--proof-ink); }

/* ============================================================================
   FLOATSIGHT  (.fsx)
   FloatSight has its own identity — yellow on black — and this section wears it
   while keeping the Neosphyr type scale and grid. The visitor should read it as
   a different product, not a different website.
   ========================================================================== */
.fsx{ background:var(--fs-bg); color:var(--fs-dim); position:relative; }
.fsx::before{ content:""; position:absolute; inset:0 0 auto 0; height:5px; background:#FF0; }
.fsx :is(h2,h3){ color:var(--fs-ink); }
.fsx .eyebrow{ color:var(--fs-eyebrow); }
.fsx .lead{ color:var(--fs-dim); }
.fsx .lead strong{ color:var(--fs-ink); }

.fsx__top{ display:grid; grid-template-columns:.92fr 1.08fr; gap:56px; align-items:center; }

.fsx__lock{
  /* block-level, hugging its own text: .eyebrow is inline-flex and would
     otherwise sit on the same line as the mark */
  display:flex; width:fit-content; align-items:center; gap:10px; background:#FF0; color:var(--fs-bg);
  padding:7px 15px 7px 11px; border-radius:var(--r-sm); margin-bottom:22px;
  font-family:var(--font-display); font-weight:700; font-size:17px; letter-spacing:-.02em;
}
.fsx__lock img{ width:22px; height:22px; display:block; }

.fsx__kick{
  font-family:var(--font-display); font-size:32px; font-weight:700; line-height:1.18;
  letter-spacing:-.028em; color:var(--fs-ink); margin:0 0 18px;
}
.fsx__kick em{
  font-style:normal; background:#FF0; color:var(--fs-bg); padding:0 7px; border-radius:3px;
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
}

.fsx__formats{ display:flex; flex-wrap:wrap; gap:8px; margin:22px 0 0; }
.fsx__formats span{
  font-family:var(--font-mono); font-size:11.5px; color:var(--fs-dim);
  border:1px solid var(--fs-line); border-radius:6px; padding:5px 10px;
}

.fsx__cta{ background:#FF0; color:var(--fs-bg); box-shadow:none; }
.fsx__cta:hover{ background:#FFE800; color:var(--fs-bg); }
.fsx__ghost{ background:transparent; color:var(--fs-ink); border:1.5px solid rgba(255,255,0,.45); }
.fsx__ghost:hover{ border-color:#FF0; color:var(--fs-ink); }
.fsx__trial{ color:var(--fs-mute); margin-top:14px; }

.fsx__shot{
  border-radius:var(--r-md); overflow:hidden; border:1px solid var(--fs-line); background:var(--fs-panel);
  box-shadow:0 22px 60px rgba(0,0,0,.55);
}
.fsx__shot img{ width:100%; height:auto; display:block; }
.fsx__fig{ margin:0; }
.fsx :is(.fsx__fig,.fsx__item) figcaption{ font-size:14px; color:var(--fs-mute); margin-top:12px; line-height:1.55; }
.fsx :is(.fsx__fig,.fsx__item) figcaption strong{ color:var(--fs-ink); }

.fsx__grid{ display:grid; grid-template-columns:1fr 1fr; gap:30px; margin-top:54px; }
.fsx__item{ margin:0; }
.fsx__item--wide{ grid-column:1 / -1; }
.fsx__cap{
  display:inline-block; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--fs-bg); background:#FF0; padding:4px 9px;
  border-radius:4px; margin:0 0 12px;
}
.fsx__note{
  margin-top:44px; padding-top:22px; border-top:1px solid var(--fs-line);
  font-size:14.5px; color:var(--fs-mute);
}
.fsx__note strong{ color:var(--fs-ink); }

@media (max-width:1080px){
  .proof__grid{ gap:22px; }
  .fsx__top{ gap:40px; }
  .fsx__kick{ font-size:28px; }
}
@media (max-width:900px){
  .proof__grid{ grid-template-columns:repeat(2,1fr); gap:26px 20px; }
  .fsx__top{ grid-template-columns:1fr; gap:36px; }
  .fsx__grid{ grid-template-columns:1fr; gap:32px; margin-top:42px; }
}
@media (max-width:680px){
  .proof{ padding:26px 0; }
  .proof__n{ font-size:25px; }
  .fsx__kick{ font-size:25px; }
}


/* ============================================================================
   FLAGSHIP CARD: the whole drawing, not a crop
   The shared .card__media uses object-fit:cover, which suits a screenshot but
   crops a concept drawing top and bottom. In the home products grid the wide
   card carries the most detailed drawing of the five, so it is shown entire,
   with air around it on the panel tint that is already there. Scoped to
   #products: wide cards on the product pages keep the shared behaviour.
   ========================================================================== */
#products .card--wide .card__media img{ object-fit:contain; padding:22px; }
@media (max-width:680px){
  #products .card--wide .card__media img{ padding:14px; }
}