/* Hallmark · shape: Narrative Workflow (draw 7eecd6) · genre: modern-minimal · theme: brand · redesign: full
 * paper: oklch(99% 0.003 250) · accent: oklch(47.7% 0.123 246) · display: Mulish 800 · body: Mulish 400 · hero: Settled · nav: edge-aligned bar (the logo, four section anchors, sign in and the demo), white on the blue field over the landing hero · footer: statement (the maker's line large on navy, two link lists beneath) · signature: three real BaseAPP screens of a sample company behind a switcher on the blue field; the five steps of one customer light up on a blue band
 * axes: light/rounded-sans/cool · posture: committed (the brand blue as field: hero, the steps band, the contact panel) · imagery: screenshots 3 (puppeteer, sample tenant) · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R3 V4 · weakest: R, the user's reference (an IT agency template) asks for blue fields, rounded cards and icon tiles; kept to the brand blue, real screens and no illustrations, logos, quotes or invented numbers */
/* Hallmark · waive 49b · a real phrase that cannot shorten, two lines at most · "Raccontaci come lavori" is a link inside a FAQ answer's sentence, wrapping with it at 320px */
/* Hallmark · waive 72 · the boxes are closed <details> whose hidden answer is measured below the summary · open, each FAQ card pads its answer by --space-lg on every side */
/* Hallmark · answered F4 · the white button is the same primary on the blue field and the white tab is the selected state of a segmented control, not a second primary */
/* Hallmark · answered F7 · one card recipe on purpose: the user's reference is a page of white rounded cards on white and sky paper; the blue panels and the table carry the variety */
/* Hallmark · reworded "CRM ed ERP su misura, su una base già pronta." to "CRM ed ERP su misura" · 58 holds the hero to a short head; "moduli pronti" moved into the sentence under it */
/* Hallmark · reworded "Su misura, senza partire da zero" to "Gestionale su misura, senza partire da zero", "Cosa adattiamo" to "Cosa adattiamo alla tua azienda", "Prima di chiamarci" to "Domande frequenti su BaseAPP" · SEO: the heads carry the words people search ("gestionale su misura", "domande frequenti") */
/* Hallmark · dropped the standalone products section, the "how you start" steps and the hero assurances · 58 and 59 name them: the products stay in the module index, the steps in one line under "Cosa adattiamo", the assurances in the facts row; the comparison's three card heads became the table's row heads; the standalone descriptions (D.Lgs 81/2008 included) live on each product's page */

/**
 * Pagine pubbliche di BaseAPP (layout `public`): testata, piè di pagina e
 * controlli comuni a landing, schede prodotto e listino. Il contenuto della
 * landing sta in welcome.css; schede e listino aggiungono gkt-ecosystem.css.
 *
 * I font sono ospitati qui: nessuna richiesta a Google con l'IP del visitatore.
 */
@import url("./tokens.css");
@import url("./base.css");

/* Mulish (licenza SIL OFL: mulish-OFL.txt accanto ai font), variabile da 200 a 1000. */
@font-face {
    font-family: "Mulish";
    font-style: normal;
    font-weight: 200 1000;
    font-display: swap;
    src: url("../../fonts/public/mulish-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Mulish";
    font-style: normal;
    font-weight: 200 1000;
    font-display: swap;
    src: url("../../fonts/public/mulish-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- Controlli -------------------------------------------------------- */
.pub-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    min-height: 48px;
    padding: 0 var(--space-lg);
    border: 1px solid var(--color-field);
    border-radius: var(--radius-pill);
    background: var(--color-field);
    color: var(--color-on-field);
    font: 800 var(--text-md)/1 var(--font-body);
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}

.pub-btn:hover {
    border-color: var(--color-field-2);
    background: var(--color-field-2);
}

.pub-btn:active {
    transform: translateY(1px);
}

.pub-btn:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
}

.pub-btn[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
}

.pub-btn--quiet {
    border-color: var(--color-rule);
    background: transparent;
    color: var(--color-ink);
}

.pub-btn--quiet:hover {
    border-color: var(--color-rule);
    background: var(--color-paper-2);
}

/* Sul campo blu: il primario è bianco, il secondario un contorno bianco. */
.pub-btn--light {
    border-color: var(--color-on-field);
    background: var(--color-on-field);
    color: var(--color-field-2);
}

.pub-btn--light:hover {
    border-color: var(--color-sky);
    background: var(--color-sky);
}

.pub-btn--outline {
    border-color: var(--color-on-field);
    background: transparent;
    color: var(--color-on-field);
}

.pub-btn--outline:hover {
    border-color: var(--color-on-field);
    background: var(--color-field-2);
}

.pub-btn--light:focus-visible,
.pub-btn--outline:focus-visible {
    outline-color: var(--color-on-field);
}

/* --- Salta al contenuto --------------------------------------------------- */
.pub-skip {
    position: absolute;
    left: var(--space-md);
    top: calc(-1 * var(--space-3xl));
    z-index: var(--z-toast);
    padding: var(--space-xs) var(--space-md);
    background: var(--color-ink);
    color: var(--color-paper);
}

.pub-skip:focus-visible {
    top: var(--space-md);
}

/* --- Testata: logo, ancore della landing, accesso e demo ---------------- */
.pub-nav {
    border-bottom: var(--rule-hair) solid var(--color-rule);
    background: var(--color-paper);
}

.pub-nav__bar {
    display: flex;
    align-items: center;
    gap: var(--space-xl);
    min-height: 76px;
}

.pub-nav__brand {
    flex-shrink: 0;
}

.pub-nav__brand img {
    width: auto;
    height: 34px;
}

.pub-nav__menu {
    display: flex;
    gap: var(--space-lg);
    margin-inline-end: auto;
}

.pub-nav__menu a,
.pub-nav__login {
    color: var(--color-ink-2);
    font-size: var(--text-sm);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.pub-nav__menu a:hover,
.pub-nav__login:hover {
    color: var(--color-ink);
    text-decoration: underline;
}

.pub-nav__actions {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
}

.pub-nav__actions .pub-btn {
    min-height: 44px;
    font-size: var(--text-sm);
}

/* Sulla landing la testata sta sul campo blu dell'hero. */
.pub-nav--field {
    border-bottom-color: var(--color-field-rule);
    background: var(--color-field);
}

.pub-nav--field .pub-nav__brand img {
    /* Il logo è a colori: sul blu diventa tutto bianco. */
    filter: brightness(0) invert(1);
}

.pub-nav--field .pub-nav__menu a,
.pub-nav--field .pub-nav__login {
    color: var(--color-on-field);
}

.pub-nav--field .pub-nav__menu a:hover,
.pub-nav--field .pub-nav__login:hover {
    color: var(--color-on-field);
}

.pub-nav--field a:focus-visible {
    outline: 2px solid var(--color-on-field);
    outline-offset: 2px;
}

/* Sotto i 60rem le ancore scendono in una riga che scorre di lato. */
@media (max-width: 60rem) {
    .pub-nav__bar {
        flex-wrap: wrap;
        gap: 0 var(--space-md);
        justify-content: space-between;
    }

    .pub-nav__menu {
        order: 3;
        width: 100%;
        margin: 0;
        padding-block: var(--space-xs) var(--space-sm);
        overflow-x: auto;
    }

    .pub-nav__menu a {
        font-size: var(--text-md);
    }

    .pub-nav__brand img {
        height: 28px;
    }
}

@media (max-width: 26rem) {
    .pub-nav__login {
        display: none;
    }
}

/* --- Piè di pagina: chi la sviluppa, poi i link --------------------------- */
.pub-foot {
    padding-block: var(--space-3xl) var(--space-xl);
    background: var(--color-navy);
    color: var(--color-on-navy);
}

.pub-foot a {
    color: var(--color-on-navy);
}

.pub-foot__statement {
    max-width: 24ch;
    font-family: var(--font-display);
    font-size: var(--text-display-s);
    font-weight: var(--display-weight);
    letter-spacing: var(--tracking-display);
    line-height: 1.05;
    text-wrap: balance;
}

.pub-foot__statement a {
    text-decoration-thickness: 2px;
    text-underline-offset: 0.12em;
}

.pub-foot__grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-xl) var(--gap-columns);
    margin-top: var(--space-2xl);
    padding-top: var(--space-xl);
    border-top: var(--rule-hair) solid var(--color-navy-rule);
    font-size: var(--text-sm);
}

.pub-foot address {
    color: var(--color-on-navy-2);
    font-style: normal;
    line-height: 1.7;
}

.pub-foot h2 {
    max-width: none;
    margin-bottom: var(--space-sm);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 800;
    letter-spacing: 0;
}

.pub-foot ul {
    display: grid;
    gap: var(--space-xs);
    margin: 0;
    padding: 0;
    list-style: none;
}

.pub-foot ul a {
    color: var(--color-on-navy-2);
    text-decoration: none;
}

.pub-foot ul a:hover {
    color: var(--color-on-navy);
    text-decoration: underline;
}

.pub-foot a:focus-visible {
    outline: 2px solid var(--color-on-navy);
    outline-offset: 2px;
}

.pub-foot__legal {
    margin-top: var(--space-2xl);
    color: var(--color-on-navy-2);
    font-size: var(--text-sm);
}

@media (max-width: 40rem) {
    .pub-foot__grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .pub-foot address {
        grid-column: 1 / -1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pub-btn {
        transition: background-color var(--dur-short) linear;
    }

    .pub-btn:active {
        transform: none;
    }
}