/* ===========================================================================
   BadgeBox landing — implementation of design/handoff «Landing BadgeBox.dc.html».
   The inline styles of the artboards are here, grouped by block.
   The values (colours, radii, shadows) come from tokens.css, which in turn copies
   desk/css_2_0/style_bbx_primitives.css. Do not introduce colours here.
   =========================================================================== */

/* --- base ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--lp-surface);
    color: var(--lp-ink);
    font-family: var(--bbx-font-sans);
    font-size: 17px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-wrap: pretty;
}

h1, h2, h3, h4, p, ul, ol, li, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
/* height:auto is mandatory: the HTML width/height attributes (which keep
   the layout from jumping while loading) count as an explicit height and
   would cancel any aspect-ratio. */
img, svg { max-width: 100%; height: auto; display: block; }
/* <picture> is only there to pick the format. Do NOT use display:contents:
   inside a grid it promotes the <source> elements too, and three photos
   become six scattered cells. Better for it to be the box itself. */
picture { display: block; }
/* The blue #0080f6 is the colour of FILLS. For text the product uses
   blue-600 (.text-blue in style_bbx_primitives.css), and it is also the only one
   that passes AA contrast on white: #0080f6 as text sits at 3.88. */
a { color: var(--lp-accent-press); text-decoration: none; }
a:hover { color: var(--bbx-blue-700); }
button { font: inherit; color: inherit; cursor: pointer; }

:focus-visible { outline: 2px solid var(--lp-accent); outline-offset: 2px; border-radius: var(--lp-radius-control); }

.lp-skip { position: absolute; left: -9999px; }
.lp-skip:focus {
    left: var(--lp-gutter); top: var(--lp-gutter); z-index: 100;
    padding: var(--lp-2) var(--lp-4);
    background: var(--lp-surface); border-radius: var(--lp-radius-control);
    box-shadow: var(--bbx-shadow-lg);
}

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

/* --- scaffolding -------------------------------------------------------- */
.lp-shell { max-width: 1160px; margin-inline: auto; padding-inline: 20px; }

.sec { padding: clamp(56px, 7vw, 100px) 20px; }
.sec--tight { padding: clamp(40px, 5vw, 64px) 20px; }
.sec--page { background: var(--lp-page); }
.sec--ruled { border-top: 1px solid var(--lp-border); border-bottom: 1px solid var(--lp-border); }
.sec--ruled-top { border-top: 1px solid var(--lp-border); }
.sec--dark { background: var(--lp-dark); color: var(--lp-ink-invert); }
.sec--dark h2, .sec--dark h3 { color: var(--lp-ink-invert); }
.sec--close { padding: clamp(60px, 8vw, 110px) 20px; }
.sec .lp-shell { padding-inline: 0; }

.sec__h2 { font-size: clamp(30px, 4vw, 50px); line-height: 1.04; letter-spacing: -.025em; font-weight: 800; max-width: 22em; margin-bottom: 14px; }
.sec__h2--sm { font-size: clamp(28px, 3.6vw, 44px); line-height: 1.06; letter-spacing: -.02em; margin-bottom: 12px; }
.sec--dark .sec__h2--sm { margin-bottom: clamp(28px, 3.5vw, 44px); }

.sec__lede { font-size: 17px; line-height: 1.55; color: var(--lp-ink-soft); max-width: 38em; margin-bottom: clamp(32px, 4vw, 48px); }
.sec__head { max-width: 34em; margin-bottom: clamp(28px, 3.5vw, 44px); }
.sec__head .sec__lede { margin-bottom: 0; }
.sec__note { font-size: 15px; color: var(--lp-ink-soft); margin-top: 18px; }

/* A second half inside the same section: the rule on top says it
   continues, not that it starts over. Same size as the credits block of the
   pricing, which already does exactly this. */
.followup { margin-top: clamp(36px, 4.5vw, 56px); padding-top: clamp(28px, 3.5vw, 40px); border-top: 1px solid var(--lp-border); }
.followup .sec__head h3 { font-size: clamp(21px, 2.4vw, 30px); line-height: 1.15; letter-spacing: -.015em; font-weight: 800; margin-bottom: 10px; }

.eyebrow { display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: .08em; color: var(--lp-accent-press); margin-bottom: 14px; }

.grid { display: grid; }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }

/* --- buttons ------------------------------------------------------------ */
.btn {
    display: inline-block; text-align: center; font-weight: 600;
    border-radius: var(--lp-radius-control);
    transition: background-color .15s ease, border-color .15s ease;
    /* A <button> is not an <a> until you tell it so.
       The browser gives it the system skin and a 2px black outset
       border of its own: «Chiedi il preventivo» came out two pixels taller
       than the other buttons and with a dark line around it, despite having
       the same classes. The outfit belongs to the class, not the tag — so the
       next button born as a <button> starts out right. */
    appearance: none;
    -webkit-appearance: none;
    /* The border is always there, transparent when not visible.
       The ghost carries its 1px line, the primary does not: in a flex row
       that stretches them (hero, closing) the primary grew as tall as the
       ghost, and the same primary inside the form — where it stands alone —
       two pixels shorter. By reserving the border space for all of them, a
       button measures the same everywhere, with or without a line. */
    border: 1px solid transparent;
}
.btn--primary { background: var(--lp-accent); color: #fff; }
.btn--primary:hover { background: var(--bbx-blue-400); color: #fff; }
.btn--ghost { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.36); }
.btn--ghost:hover { background: rgba(255,255,255,.1); color: #fff; }
/* The ghost's twin on the light background: used by whoever links to a
   deep dive, which must not compete with «prova quindici giorni». */
.btn--line { background: var(--lp-surface); color: var(--lp-ink); border-color: var(--lp-border); }
.btn--line:hover { border-color: var(--lp-accent); color: var(--lp-accent-press); }
.btn--sm { padding: 9px 16px; font-size: 15px; white-space: nowrap; }
/* 18px/700 is not a typographic whim: white on #0080f6 sits at 3.88
   contrast, which WCAG passes as «large text» (threshold 3) and not as
   normal text (threshold 4.5). The blue is the product's and is not touched. */
.btn--lg { padding: 17px 28px; font-size: 19px; font-weight: 700; }
.btn--xl { padding: 17px 30px; font-size: 19px; font-weight: 700; }

/* --- header ------------------------------------------------------------- */
.hd {
    position: sticky; top: 0; z-index: 50;
    background: rgba(0, 41, 82, .92);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255,255,255,.12);
}
.hd__bar { display: flex; align-items: center; gap: 24px; padding: 12px 20px; }
.hd__logo { flex: none; display: flex; align-items: center; }
.hd__logo img { height: 26px; width: auto; }
.hd__nav { display: flex; gap: 22px; flex: 1; min-width: 0; overflow: hidden; }
.hd__nav a { color: var(--bbx-blue-100); font-size: 15px; font-weight: 500; white-space: nowrap; }
.hd__nav a:hover { color: #fff; }
.hd__end { display: flex; align-items: center; gap: 12px; flex: none; }
.hd__lang {
    display: flex; align-items: center; gap: 6px;
    background: transparent; color: #fff;
    border: 1px solid rgba(255,255,255,.3); border-radius: var(--lp-radius-control);
    padding: 6px 10px; font-size: 14px; font-weight: 600;
}
.hd__lang:hover { background: rgba(255,255,255,.08); }
.hd__caret { font-size: 10px; color: var(--bbx-blue-200); }
.hd__login { color: #fff; font-size: 15px; font-weight: 600; white-space: nowrap; padding: 6px 4px; }
.hd__login:hover { color: var(--bbx-blue-200); text-decoration: none; }
/* The full call to action does not fit in the header below 900px: between 421
   and 519px it needs 513px of bar, and below 390 it needs 389. Below that
   threshold it says the same thing in two words. One of the two is always
   display:none, so whoever reads by voice hears only one. */
.hd__cta-short { display: none; }
@media (max-width: 900px) {
    .hd__cta-long { display: none; }
    .hd__cta-short { display: inline; }
}

.hd__langpanel { border-top: 1px solid rgba(255,255,255,.12); background: var(--lp-dark); }
.hd__langlist { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 20px; }

/* The languages are ANCHORS, no longer buttons: the server prints them and
   they really lead somewhere else. The outfit is the old one — only the
   element changes, and with it aria-pressed which becomes aria-current. */
.hd__langlist a {
    background: transparent; color: #fff;
    border: 1px solid rgba(255,255,255,.22); border-radius: var(--lp-radius-pill);
    padding: 5px 12px; font-size: 13px; font-weight: 600;
}
.hd__langlist a[aria-current] { background: var(--lp-accent); border-color: var(--lp-accent); color: #fff; }

/* --- 1 · hero ------------------------------------------------------------ */
/* Left-aligned, not centred: a symmetric title balances itself and
   goes flat, one resting on the margin pushes forward. */
.hero {
    background: var(--lp-dark); color: var(--lp-ink-invert);
    padding: 110px 20px 80px;
    overflow: hidden;
}
/* The claim and the product on the same row, but not as equals: the title is
   what sells, the laptop is the proof. Seven tenths to the text.
   The title's cap is not a matter of taste: the rotating word does not wrap
   by construction, the longest one — «mettendo insieme dati sparsi» —
   measures 12.15em in Hanken at weight 800, and at 52px that is 632px against
   the ~645 of the column. Above 52px the word would overflow and be clipped. */
.hero__inner {
    max-width: 1160px; margin-inline: auto;
    --hero-h1: clamp(32px, 4.2vw, 52px);
    display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: clamp(36px, 5vw, 64px) clamp(28px, 4vw, 56px);
    align-items: center;
}
/* The logo strip spans both columns, and its spacing is the grid's:
   the margin it had when it sat at the end of the text would add up here
   to the row gap. */
.hero__proofwrap { grid-column: 1 / -1; }
.hero__proofwrap .hero__proof-l { margin-top: 0; }
.eyebrow-pill {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16);
    border-radius: var(--lp-radius-pill); padding: 6px 15px;
    font-size: 13px; font-weight: 600; color: var(--bbx-blue-100);
    margin-bottom: 26px;
}
.eyebrow-pill .dot { width: 7px; height: 7px; border-radius: var(--lp-radius-pill); background: var(--lp-accent); display: block; }
.hero__h1 {
    font-size: var(--hero-h1, clamp(40px, 6.6vw, 88px)); line-height: .98; letter-spacing: -.035em;
    font-weight: 800; color: #fff; margin-bottom: 24px; max-width: 13em;

    /* The roller below is a block, and the negative margin that realigns it on
       the baseline would COLLAPSE with this margin-bottom and escape: measured,
       the gap to the lede fell from 24px to 15, and it moved with the font size
       because that margin is in em. Inline-block it did not collapse — making
       it a block is what let it out. */
    display: flow-root;
}

/* THE CLAIM IS ALWAYS TWO LINES: the fixed part, then the phrase that turns.
   Where it breaks is not left to the width, because what decides it is the
   LANGUAGE: «Smetti di perdere tempo sulle timbrature» went to two lines by
   itself, «Stop losing time on clock-ins» is shorter and stayed on ONE at every
   width down to the phone — so the English hero read as a single line and the
   phrase that turns, which is what the title is built around, lost its own
   line.

   Block and not a <br>: the break belongs to the shape of the title, not to the
   words, and a <br> would have to be written into fourteen translations and into
   whatever the panel saves. It holds without JavaScript too, where the roller is
   the first word in normal flow.

   What does NOT fit in two lines is a phrase too long for the width: in French,
   under ~400px, «Arrêtez de perdre du temps» wraps on its own and the title goes
   to three. Fitting that as well means taking the whole hero down to 7.5vw —
   measured — and it is a trade nobody asked for. */
.hero__h1 .mo-rot { display: block; }

.hero__lede { font-size: clamp(18px, 2.1vw, 24px); line-height: 1.45; color: var(--bbx-blue-200); max-width: 34em; margin: 0 0 34px; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.hero__below { font-size: 14px; color: var(--bbx-blue-300); }

/* The rotating word lives in motion.css as .mo-rot: the box shrinks to
   the current word instead of staying as wide as the longest, and the
   roller replaced the fade. Nothing is left here. */

/* The social proof sits at the top, not at the bottom: it is what fills the
   hero and removes the emptiness. The logos go white because the background
   is dark blue — five brands in five different colours would be a blotch. */
.hero__proof-l {
    margin-top: clamp(36px, 4.5vw, 52px);
    font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: var(--bbx-blue-300);
}
.hero__proof {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 20px clamp(28px, 4.5vw, 56px);
    margin-top: 20px;
}
.hero__proof img {
    height: clamp(28px, 3vw, 38px); width: auto;
    filter: brightness(0) invert(1);
    opacity: .82;
    transition: opacity .15s ease;
}
.hero__proof li:hover img { opacity: 1; }

/* The two devices: no frame and no CSS shadow, the image already has them
   inside, alpha included. Below 900px they drop under the text. */
.hero__mock { position: relative; }
.hero__mock img { width: 100%; }
/* With two devices inside, the image is twice as wide as it is tall:
   in the column alone it shrinks and gets lost. So it widens to the right
   into the blue that runs out of the frame — that space is already empty,
   and the text gives up not one pixel. The 600px cap is for very wide
   screens, where the margin to eat would be too much. */
@media (min-width: 1200px) {
    .hero__mock { width: min(100% + (100vw - 1160px) / 3, 600px); }
}

/* .hero__stage and what follows stay for motion-prototype.html, which is
   the only page still using them. */
.hero__stage { max-width: 1160px; margin: clamp(44px, 5.5vw, 72px) auto 0; position: relative; }
.hero__photo {
    width: 100%; aspect-ratio: 21 / 8; min-height: 200px;
    object-fit: cover; object-position: center 42%;
    border-radius: 18px; border: 1px solid rgba(153,204,255,.5);
}
.hero__shot {
    max-width: 960px; margin: clamp(-90px, -7vw, -40px) auto 0; position: relative;
    border: 1px solid rgba(255,255,255,.2); border-radius: 14px; overflow: hidden;
    background: var(--lp-page); box-shadow: 0 24px 60px rgba(0, 15, 31, .45);
    max-height: clamp(240px, 34vw, 470px);
}
/* The product photos have the sidebar on the left: it gets cropped.
   THE 7.2% IS A CONSTRAINT ON THE SCREENSHOTS, not a free number: the sidebar
   is a FIXED pixel width, so its share depends on how wide the window was
   when the shot was taken. A screenshot taken in a narrow window has a bar
   thicker than the crop, and on the left edge a light-blue strip remains
   with half a label in it — it happened with `13-note-spese.png`, shot at
   1440 (bar at 8.3%) and redone at 1720 (6.9%). The others sit between 6.6
   and 6.9: whoever adds one shoots wide enough to stay under that, and keeps
   the 1.6 ratio the markup declares with width/height. */
.hero__shot img, .shot img { width: 107.2%; max-width: none; margin-left: -7.2%; }

/* --- 3 · the full round ------------------------------------------------- */
.card {
    background: var(--lp-surface); border: 1px solid var(--lp-border); border-radius: 14px;
    padding: 24px; display: flex; flex-direction: column; gap: 10px;
}
.card h3 { font-size: 20px; font-weight: 700; line-height: 1.15; }
.card p { font-size: 15px; line-height: 1.5; color: var(--lp-ink-soft); }
.card__meta { margin-top: auto; padding-top: 12px; font-size: 13px; color: var(--bbx-gray-500); font-variant-numeric: tabular-nums; }
.card--dark { background: var(--lp-dark); border-color: var(--lp-dark); color: #fff; }
.card--dark h3 { color: #fff; }
.card--dark p { color: var(--bbx-blue-100); }
.card--dark .card__meta { color: var(--bbx-blue-200); }

.shot { border: 1px solid var(--lp-border); border-radius: 14px; overflow: hidden; background: var(--lp-surface); box-shadow: var(--bbx-shadow-sm); }

/* --- 6 · for those who work in the field ---------------------------------- */
.below__photos { grid-template-columns: repeat(3, 1fr); margin-bottom: 20px; }
.below__photos img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 14px; }
/* --- where you clock in from ----------------------------------------------
   Four devices drawn with CSS instead of photographed: a photo of a
   smartwatch ages with the model, a rounded rectangle does not. The
   proportions are enough to recognise them, and they weigh nothing. */
.dv__row { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(12px, 2vw, 28px); }
/* align-content:start is not pedantry: the cells stretch to the height of
   the tallest, the auto rows grow, and with align-items:end the captions
   drop ten pixels in two columns out of four. It shows. */
.dv__i {
    display: grid; grid-template-rows: 152px auto auto;
    justify-items: center; align-items: end; align-content: start; text-align: center;
}
.dv__n { font-size: 15px; font-weight: 700; margin-top: 14px; }
.dv__q { font-size: 13px; line-height: 1.4; color: var(--lp-ink-soft); margin-top: 3px; max-width: 16em; }

.dv__d {
    position: relative; display: flex; flex-direction: column;
    background: var(--lp-surface); border: 2px solid var(--bbx-gray-200);
}
.dv__d--web { width: 100%; max-width: 176px; height: 102px; border-radius: 10px; }
.dv__d--tel { width: 68px;  height: 128px; border-radius: 14px; }
.dv__d--watch { width: 60px;  height: 72px;  border-radius: 17px; }
.dv__d--tab { width: 110px; height: 138px; border-radius: 11px; }

.dv__bar { display: flex; gap: 5px; padding: 7px 10px; border-bottom: 1px solid var(--lp-border); }
.dv__bar i { width: 6px; height: 6px; border-radius: var(--lp-radius-pill); background: var(--bbx-gray-200); }

.dv__scr { flex: 1; display: grid; place-content: center; gap: 3px; padding: 6px; }
.dv__time { font-size: 19px; font-weight: 800; letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.dv__ev { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--lp-accent-press); }
.dv__d--tel .dv__time { font-size: 17px; }
.dv__d--watch .dv__time { font-size: 14px; }
.dv__d--watch .dv__ev { font-size: 8px; letter-spacing: .04em; }

/* the strap: two strokes that do not touch the case, so no z-index is
   needed to put them behind it. */
.dv__d--watch::before, .dv__d--watch::after {
    content: ""; position: absolute; left: 50%; transform: translateX(-50%);
    width: 32px; height: 10px; background: var(--bbx-gray-200); border-radius: 4px;
}
.dv__d--watch::before { top: -11px; }
.dv__d--watch::after  { bottom: -11px; }

.dv__station {
    position: absolute; left: 50%; top: -10px; transform: translateX(-50%);
    background: var(--lp-dark); color: #fff; border-radius: var(--lp-radius-pill);
    padding: 3px 10px; font-size: 10px; font-weight: 700; letter-spacing: .07em; white-space: nowrap;
}

.dv__out {
    display: inline-block; margin-top: clamp(24px, 3vw, 36px);
    padding-top: 16px; border-top: 2px solid var(--lp-accent);
    font-size: clamp(17px, 1.9vw, 21px); line-height: 1.4; font-weight: 700; max-width: 30em;
}

@media (max-width: 760px) {
    .dv__row { grid-template-columns: repeat(2, 1fr); row-gap: 26px; }
}

/* --- 7 · the objections -------------------------------------------------- */
.faq { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: clamp(22px, 3vw, 36px); }
.faq h3 { font-size: 18px; font-weight: 700; color: var(--bbx-blue-300); margin-bottom: 8px; }
.faq p { font-size: 16px; line-height: 1.5; color: var(--bbx-blue-100); }

/* --- 8 · who is behind it -------------------------------------------------- */
.trust { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: clamp(24px, 3vw, 40px); align-items: center; }
.trust__t { min-width: 0; }
.trust__t p { font-size: 16px; line-height: 1.55; color: var(--lp-ink-soft); }
.trust__t strong { font-weight: 600; color: var(--lp-ink); }
.trust__n { margin-top: 10px !important; font-size: 14px !important; }
.trust__marks { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; min-width: 0; }
.trust__marks a { flex: none; }
.trust__group { height: 28px; width: auto; }
.trust__marks a img { height: 38px; width: auto; }
.trust__iso {
    border: 1px solid var(--lp-border); border-radius: var(--lp-radius-pill);
    padding: 6px 14px; font-size: 13px; font-weight: 700;
    color: var(--lp-ink-soft); letter-spacing: .02em; white-space: nowrap;
}


/* ===========================================================================
   THE PROBLEM BLOCKS
   Each block of the page tells a different headache. The rhythm comes from
   alternation: text on the left / image on the right, then the other way round.
   =========================================================================== */
.blk {
    display: grid;
    /* min(320px, 100%) and not a flat 320px: below a 360 window the track
       would stay 320 wide anyway and the block would overflow the screen. */
    grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
    gap: clamp(28px, 4vw, 64px);
    align-items: center;
}
.blk__t { min-width: 0; }
.blk__m { min-width: 0; }
/* Image on the left: the order is swapped, not the markup — whoever reads
   with a screen reader and whoever reads on a phone always finds the text first. */
@media (min-width: 860px) {
    .blk--flip .blk__t { order: 2; }
    .blk--flip .blk__m { order: 1; }
}

.blk .sec__h2 { max-width: 15em; }
.blk .sec__lede { margin-bottom: 18px; max-width: 34em; }
.blk__p { font-size: 16px; line-height: 1.6; color: var(--lp-ink-soft); max-width: 34em; margin-bottom: 18px; }

/* The line that closes the block: it is the promise, and must weigh more than the body. */
.blk__k {
    font-size: clamp(17px, 1.9vw, 21px); line-height: 1.4; font-weight: 700;
    max-width: 26em; padding-top: 16px; border-top: 2px solid var(--lp-accent);
    display: inline-block;
}
.blk__k--wide { max-width: 44em; margin-top: clamp(24px, 3vw, 36px); }
.sec--dark .blk__k, .blk__k--invert { color: #fff; }

/* the four phrases they tell you every day */
.items { display: grid; gap: 10px; margin-bottom: 22px; }
.items li {
    font-size: clamp(18px, 2.1vw, 24px); line-height: 1.3; font-weight: 600;
    color: var(--lp-ink); padding-left: 18px; border-left: 3px solid var(--bbx-gray-200);
}

/* the three approval steps */
.steps { counter-reset: p; display: grid; gap: 12px; margin-bottom: 22px; }
.steps li {
    counter-increment: p; position: relative; padding-left: 38px;
    font-size: 17px; line-height: 1.45;
}
.steps li::before {
    content: counter(p); position: absolute; left: 0; top: -1px;
    width: 26px; height: 26px; border-radius: var(--lp-radius-pill);
    background: var(--lp-accent-tint); color: var(--lp-accent-press);
    font-size: 14px; font-weight: 700; display: grid; place-items: center;
}

/* the claim standing alone in the middle of the page */
.claimone {
    font-size: clamp(22px, 2.8vw, 34px); line-height: 1.2; font-weight: 800;
    letter-spacing: -.02em; color: #fff; max-width: 20em; margin-top: 20px;
}
.claimone--ink { color: var(--lp-ink); margin: clamp(28px, 3.5vw, 40px) 0 0; max-width: 24em; }

.all li { font-size: 16px; font-weight: 600; }

/* pieces on a dark background */
.sec--dark .sec__lede, .sec__lede--invert { color: var(--bbx-blue-200); }
.sec--dark .blk__p { color: var(--bbx-blue-100); }
.sec--dark .items li { color: #fff; border-left-color: rgba(255,255,255,.3); }
.sec__head--wide { max-width: 44em; }
.card--onDark { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16); }
.card--onDark h3 { color: #fff; }
.card--onDark p { color: var(--bbx-blue-100); }
.shot--onDark { border-color: rgba(255,255,255,.2); box-shadow: 0 24px 60px rgba(0,15,31,.45); }
.service { align-items: stretch; }

/* --- 9 · pricing ------------------------------------------------------------
   Two axes, not one: how many licenses and how it is billed. The big number
   and the line below must belong to the same billing — mixing them was
   what made the block incomprehensible.
   The credits use the same card as the plans (.pr), in a reduced version: they
   are a row of the same price list, not a separate price list. */
.pr__head { display: flex; flex-wrap: wrap; gap: 24px; align-items: end; justify-content: space-between; margin-bottom: clamp(26px, 3.5vw, 40px); }
.pr__head-t { min-width: 0; max-width: 32em; }
.pr__head .sec__h2 { margin-bottom: 12px; }
.pr__head .sec__lede { margin-bottom: 0; }
.pr__controls { display: flex; flex-wrap: wrap; gap: 10px; flex: none; }

.pr__switch { display: flex; align-items: center; gap: 4px; background: var(--lp-surface); border: 1px solid var(--lp-border); border-radius: 10px; padding: 4px; }
.pr__switch button {
    display: inline-flex; align-items: center; gap: 6px;
    background: transparent; color: var(--lp-ink-soft); border: 0;
    border-radius: var(--lp-radius-control); padding: 9px 14px;
    font-size: 14px; font-weight: 600; white-space: nowrap;
    transition: background-color .15s ease, color .15s ease;
}
.pr__switch button:hover { color: var(--lp-ink); }
.pr__switch button.is-on { background: var(--lp-page); color: var(--lp-ink); }
.pr__switch-l { padding: 0 10px 0 6px; font-size: 13px; color: var(--lp-ink-soft); white-space: nowrap; }
.pr__save { background: var(--lp-accent-tint); color: var(--bbx-blue-700); border-radius: var(--lp-radius-pill); padding: 2px 7px; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pr__switch button.is-on .pr__save { background: var(--bbx-blue-100); color: var(--bbx-blue-800); }

.pr__cards { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); align-items: stretch; }
/* The button is the last thing in the card, after the list: without this
   it would sit right under four items in one card and under six in the other,
   and the three calls to action would no longer be on the same line. */
.pr__cards .pr__cta { margin-top: auto; }
.pr {
    background: var(--lp-surface); border: 1px solid var(--lp-border); border-radius: var(--lp-radius-card);
    padding: 26px; display: flex; flex-direction: column; gap: 14px; box-shadow: var(--bbx-shadow-sm);
}
.pr__title { display: flex; align-items: center; gap: 10px; min-height: 26px; }
.pr__name { font-size: 20px; font-weight: 700; }
.pr__badge { background: var(--lp-accent-tint); color: var(--bbx-blue-700); border-radius: var(--lp-radius-pill); padding: 4px 10px; font-size: 12px; font-weight: 700; }
.pr__claim { font-size: 15px; line-height: 1.5; color: var(--lp-ink-soft); min-height: 3em; }
.pr__price { display: flex; align-items: baseline; gap: 6px; }
.pr__amount { font-size: 38px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.pr__unit { font-size: 14px; color: var(--lp-ink-soft); }
.pr__total { font-size: 14px; color: var(--lp-ink-soft); margin-top: -10px; font-variant-numeric: tabular-nums; }
.pr__cta { background: var(--lp-surface); color: var(--lp-ink); border: 1px solid var(--bbx-gray-200); border-radius: var(--lp-radius-control); padding: 12px 18px; font-size: 15px; font-weight: 600; text-align: center; }
.pr__cta:hover { background: var(--lp-page); color: var(--lp-ink); }
.pr__list { display: grid; gap: 8px; padding-top: 8px; border-top: 1px solid var(--lp-border); }
.pr__list li { display: flex; gap: 9px; font-size: 15px; line-height: 1.4; color: var(--lp-ink-soft); }
.pr__list li::before { content: "\2713"; flex: none; color: var(--lp-accent); font-weight: 700; }
.pr__list strong { font-weight: 700; color: var(--lp-ink); }

.pr.is-primary { background: var(--lp-dark); border-color: var(--lp-dark); }
.pr.is-primary .pr__name { color: #fff; }
.pr.is-primary .pr__badge { background: var(--bbx-blue-300); color: var(--lp-dark); }
.pr.is-primary .pr__claim,
.pr.is-primary .pr__unit,
.pr.is-primary .pr__total,
.pr.is-primary .cr__kind,
.pr.is-primary .pr__list li { color: var(--bbx-blue-200); }
.pr.is-primary .pr__amount { color: #fff; }
.pr.is-primary .pr__list strong { color: #fff; }
.pr.is-primary .pr__cta { background: var(--lp-accent); color: #fff; border-color: var(--lp-accent); }
.pr.is-primary .pr__cta:hover { background: var(--bbx-blue-400); }
.pr.is-primary .pr__list { border-top-color: rgba(255,255,255,.2); }
.pr.is-primary .pr__list li::before { color: var(--bbx-blue-300); }

/* assistant credits: same card, one step smaller */
.cr { margin-top: clamp(36px, 4.5vw, 56px); padding-top: clamp(28px, 3.5vw, 40px); border-top: 1px solid var(--lp-border); }
.cr__intro { max-width: 40em; margin-bottom: clamp(20px, 2.5vw, 28px); }
.cr__intro .eyebrow { margin-bottom: 10px; }
.cr__intro h3 { font-size: clamp(21px, 2.2vw, 28px); line-height: 1.15; font-weight: 800; margin-bottom: 8px; }
.cr__intro p { font-size: 16px; line-height: 1.5; color: var(--lp-ink-soft); }
.cr__intro strong { font-weight: 600; color: var(--lp-ink); }
.cr__cards { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); align-items: start; }
.pr--credit { padding: 20px; gap: 10px; }
.pr--credit .pr__name { font-size: 18px; }
.pr--credit .pr__amount { font-size: 28px; }
.pr--credit .pr__total { margin-top: -6px; }
.cr__kind { font-size: 15px; font-weight: 600; color: var(--lp-ink-soft); margin-top: -6px; }

/* THE PRICE OF A CREDIT.
 *
 * It is the number people remember, so it goes in front and alone: the section
 * used to open on the three bundles, and to know what one thing cost you had
 * to divide. The credit is the unit the product counts in — one receipt
 * reading, one timesheet checked — and that is what the reader wants.
 *
 * Tabular figures like the other prices of the page (.pr__amount): the
 * landing does NOT use mono — that is an application rule, and here there is
 * only one typeface. */
.cr__unit {
    display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px;
    margin-bottom: clamp(18px, 2.2vw, 24px);
}
.cr__unit-label { font-size: 16px; font-weight: 600; color: var(--lp-ink-soft); }
.cr__unit-n {
    font-size: clamp(30px, 3.6vw, 40px); font-weight: 800; line-height: 1;
    color: var(--lp-ink); letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.cr__unit-note { font-size: 14px; color: var(--lp-ink-soft); }

/* The bundles stay inside: they are the detail for whoever has already
 * decided to top up. Same native <details> as the table accordions below —
 * same arrow, same behaviour without JavaScript. */
.cr__acc {
    background: var(--lp-surface); border: 1px solid var(--lp-border);
    border-radius: var(--lp-radius-card); box-shadow: var(--bbx-shadow-sm);
    margin-bottom: clamp(16px, 2vw, 20px);
}
.cr__sum {
    display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px;
    padding: 16px; list-style: none; cursor: pointer;
    border-radius: var(--lp-radius-card);
}
.cr__sum::-webkit-details-marker { display: none; }
.cr__sum:hover { background: var(--lp-page); }
.cr__acc[open] .cr__sum { border-radius: var(--lp-radius-card) var(--lp-radius-card) 0 0; }

.cr__sum-t { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 700; }
.cr__sum-t::before {
    content: ""; flex: none; width: 8px; height: 8px;
    border-right: 2px solid var(--lp-ink-soft); border-bottom: 2px solid var(--lp-ink-soft);
    transform: rotate(-45deg); transition: transform .15s ease; margin-left: 2px;
}
.cr__acc[open] .cr__sum-t::before { transform: rotate(45deg); }
.cr__sum-n { font-size: 14px; color: var(--lp-ink-soft); }

/* The accordion body.
 *
 * The padding-top used to be zero and the cards touched the summary: when open,
 * the three cards looked like they came out FROM INSIDE the label instead of
 * sitting under it. Now there is a separating line and some space above —
 * slightly less than below, because the line already spaces it and two equal
 * gaps above and below make the block look shifted up.
 *
 * The sizes follow the page: clamp like everything else, so on a narrow
 * screen the box does not eat half its width in borders. */
.cr__acc[open] .cr__sum { border-bottom: 1px solid var(--lp-border); }

/* The minimum goes up from 190 to 200: in here the space is already reduced
   by the box, and 190 would push onto two narrow columns right where room
   is needed. */
.cr__acc .cr__cards {
    padding: clamp(14px, 1.8vw, 18px) clamp(14px, 1.8vw, 20px) clamp(16px, 2.2vw, 22px);
    gap: clamp(12px, 1.4vw, 16px);
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

/* The discount and the price per credit say the same thing from two sides: the
 * first persuades, the second compares. */
.cr__save { font-size: 14px; color: var(--lp-accent); font-weight: 600; margin-top: -4px; }
.cr__save strong { font-weight: 800; }
.cr__each { font-size: 13px; color: var(--lp-ink-soft); margin-top: -4px; font-variant-numeric: tabular-nums; }
.pr--credit.is-primary .cr__save { color: var(--bbx-blue-300, #9ec5f5); }
.pr--credit.is-primary .cr__each { color: rgba(255,255,255,.72); }
.payroll { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; }
.payroll__t { min-width: 0; flex: 1 1 26em; }
.payroll__t .eyebrow { margin-bottom: 8px; }
.payroll__t h3 { font-size: clamp(19px, 2vw, 24px); line-height: 1.2; font-weight: 800; margin-bottom: 8px; }
.payroll__t p { font-size: 16px; line-height: 1.5; color: var(--lp-ink-soft); }
.payroll__t strong { font-weight: 600; color: var(--lp-ink); }
.payroll__e { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; flex: none; }
.payroll__e img { height: 26px; width: auto; }

.cr__foot { margin-top: 18px; font-size: 13px; color: var(--bbx-gray-500); }
.cr__foot strong { font-weight: 600; color: var(--lp-ink-soft); }

/* The AI credits row: it is the only thing in the card that is neither a price
   nor a feature, and it is what tells the three plans apart. The soft background
   earns its place here — it separates the price from the list without another rule. */
.pr__ai {
    background: var(--lp-accent-tint); color: var(--lp-accent-press);
    border-radius: var(--lp-radius-control); padding: 9px 12px;
    font-size: 14px; font-weight: 600; line-height: 1.35;
}
.pr.is-primary .pr__ai { background: rgba(255,255,255,.1); color: var(--bbx-blue-200); }

/* The extras under the plans: what is not a plan. Same grid as the
   cards, but lying down and without a background — they stay in the price list
   and do not compete with the choice among the three. */
.prx { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 12px; margin-top: 12px; }
.prx__v {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px;
    background: var(--lp-surface); border: 1px solid var(--lp-border);
    border-radius: var(--lp-radius-card); padding: 16px 20px;
}
.prx__t { flex: 1 1 12em; min-width: 0; }
.prx__n { font-size: 16px; font-weight: 700; }
.prx__c { font-size: 14px; line-height: 1.4; color: var(--lp-ink-soft); }
.prx__p { flex: none; display: flex; align-items: baseline; gap: 5px; }
.prx__a { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.prx__u { font-size: 13px; color: var(--lp-ink-soft); }
.prx__cta { flex: none; font-size: 14px; font-weight: 600; color: var(--lp-accent-press); }
.prx__cta:hover { color: var(--bbx-blue-700); text-decoration: underline; }

/* The note closing the price list, under the extras: the size is that of
   .sec__note — here only the space separating it from the cards is needed, plus
   the underlined link, which inside a sentence is the only thing that makes
   it look like a link. */
.pr__note { margin-top: 14px; }
.pr__note a { text-decoration: underline; }

/* The superscript of the name: «HR» sits half-height above «Premium», it is not
   part of the word. The relative font-size keeps it proportionate both in the
   card title and in the table header, which are two different sizes. */
.pr__sup { font-size: .58em; font-weight: 700; letter-spacing: .02em; margin-left: 2px; top: -.15em; position: relative; }

/* The title of a second half inside the section: same size as the
   credits one, which already does this job. */
.cr__h { font-size: clamp(21px, 2.2vw, 28px); line-height: 1.15; font-weight: 800; margin-bottom: clamp(16px, 2vw, 22px); }

/* --- the comparison ---------------------------------------------------------
   A real table inside a white card. The line under each row is the only
   mark: the columns have no borders, they are held in place by the centred
   alignment of the check marks. */
/* One section per accordion: native <details>, which open without JavaScript.
   The title is a four-column row like the table it covers — 40% to the
   name, 20% to each plan — so the coverage dots fall above the column they
   summarise. The percentages are the same as .cf__t, and must be changed
   together: they are the same alignment seen twice. */
.cf__acc { background: var(--lp-surface); border: 1px solid var(--lp-border); border-radius: var(--lp-radius-card); box-shadow: var(--bbx-shadow-sm); margin-bottom: 8px; }
.cf__acc:last-child { margin-bottom: 0; }

.cf__sum {
    display: grid; grid-template-columns: 40% 20% 20% 20%; align-items: center;
    list-style: none; cursor: pointer;
}
.cf__sum::-webkit-details-marker { display: none; }
.cf__sum:hover { background: var(--lp-page); border-radius: var(--lp-radius-card); }
.cf__acc[open] .cf__sum:hover { border-radius: var(--lp-radius-card) var(--lp-radius-card) 0 0; }
.cf__sum-t { display: flex; align-items: center; gap: 10px; padding: 16px; font-size: 16px; font-weight: 700; }
/* The arrow: an 8px corner that rotates. A character would not do —
   it changes shape from one system to another and never aligns twice. */
.cf__sum-t::before {
    content: ""; flex: none; width: 8px; height: 8px;
    border-right: 2px solid var(--lp-ink-soft); border-bottom: 2px solid var(--lp-ink-soft);
    transform: rotate(-45deg); transition: transform .15s ease; margin-left: 2px;
}
.cf__acc[open] .cf__sum-t::before { transform: rotate(45deg); }

/* How much a plan carries of this section: full, half, empty. The half is the
   reason the mark is a disc and not a check mark — «a part» is exactly what a
   check mark cannot say. */
.cf__cov { justify-self: center; width: 13px; height: 13px; border-radius: 50%; box-sizing: border-box; }
.cf__cov--yes  { background: var(--lp-accent); }
.cf__cov--meta { border: 2px solid var(--lp-accent); background: linear-gradient(90deg, var(--lp-accent) 0 50%, transparent 50% 100%); }
.cf__cov--no   { border: 2px solid var(--bbx-gray-300); }

.cf__scroll { overflow-x: auto; border-top: 1px solid var(--lp-border); }
.cf__t { width: 100%; border-collapse: collapse; table-layout: fixed; }
.cf__t th, .cf__t td { padding: 13px 16px; text-align: left; }
/* No forced uppercase: the column holds a plan name, written by whoever
   runs the panel, and «Premium HR» in the header must read as it does
   on the card — not «PREMIUM HR». */
.cf__t thead th { font-size: 13px; font-weight: 700; color: var(--lp-ink-soft); white-space: nowrap; }
/* The columns: 40% to the name and 20% to each plan. They are the same
   percentages as the title row, and that is what keeps the coverage dots
   above their column. */
.cf__t thead th:first-child { width: 40%; }
.cf__t thead th + th { text-align: center; width: 20%; }
.cf__t tbody th { font-size: 15px; font-weight: 500; color: var(--lp-ink); }
.cf__t tbody td { text-align: center; font-size: 15px; color: var(--lp-ink-soft); font-variant-numeric: tabular-nums; }
.cf__t tbody tr { border-top: 1px solid var(--lp-border); }
.cf__t tbody tr:hover { background: var(--lp-page); }
.cf__y { color: var(--lp-accent); font-weight: 700; }
.cf__n { color: var(--bbx-gray-400); }
/* «in trial»: it is text, not a mark — and it sits closer to no than to yes. */
.cf__p { font-size: 13px; color: var(--lp-ink-soft); }

/* --- the pricing questions -------------------------------------------------
   The other questions sit in the dark section, and they are about the product.
   These are about the bill, and they sit where the bill is read. */
.pf__g { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr)); gap: clamp(20px, 2.6vw, 28px) clamp(24px, 3vw, 44px); }
.pf__g h4 { font-size: 17px; line-height: 1.3; font-weight: 700; margin-bottom: 6px; }
.pf__g p { font-size: 15px; line-height: 1.5; color: var(--lp-ink-soft); }

/* --- 12 · the quote ----------------------------------------------------------
   Two columns: on the left why to write, on the right the form. The form is
   a card like the ones in the price list — same background, same border, same
   radius — because it is the fourth answer in the row, not another page.

   The labels sit ABOVE the fields. A placeholder acting as a label
   disappears as soon as you type: whoever rereads the form before sending it
   no longer knows what they wrote where. */
.qt { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
.qt__says { max-width: 30em; }
.qt__p { font-size: 17px; line-height: 1.55; color: var(--lp-ink-soft); }

/* The three answers someone is looking for when about to leave their email.
   Same check mark as a pricing card's list: it is the same gesture —
   «you have this» — and no second mark is needed to say it. */
.qt__points { display: grid; gap: 9px; margin-top: clamp(20px, 2.5vw, 28px); }
.qt__points li { display: flex; gap: 9px; font-size: 15px; line-height: 1.4; color: var(--lp-ink-soft); }
.qt__points li::before { content: "\2713"; flex: none; color: var(--lp-accent); font-weight: 700; }

.qt__f {
    display: grid; gap: 16px;
    background: var(--lp-surface); border: 1px solid var(--lp-border);
    border-radius: var(--lp-radius-card); padding: clamp(20px, 2.6vw, 28px);
    box-shadow: var(--bbx-shadow-sm);
}

/* Two short fields share a row as long as they fit: below 30em of
   form they stack on their own, without a hand-written threshold. */
.qt__pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 16px; }

.qt__field { display: grid; gap: 6px; min-width: 0; }
.qt__field--short { max-width: 12em; }
.qt__field label { font-size: 14px; font-weight: 600; }
.qt__opt { font-weight: 400; color: var(--lp-ink-soft); }

.qt__f input[type="text"],
.qt__f input[type="email"],
.qt__f input[type="tel"],
.qt__f textarea {
    width: 100%; font: inherit; font-size: 16px; color: var(--lp-ink);
    background: var(--lp-surface);
    border: 1px solid var(--bbx-gray-200); border-radius: var(--lp-radius-control);
    padding: 11px 13px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.qt__f textarea { resize: vertical; min-height: 96px; line-height: 1.5; }
.qt__f input:hover, .qt__f textarea:hover { border-color: var(--bbx-gray-300); }
.qt__f input:focus, .qt__f textarea:focus {
    outline: none; border-color: var(--lp-accent);
    box-shadow: 0 0 0 3px var(--lp-accent-tint);
}
/* The browser paints the fields it filled in itself: on the white of the
   card it becomes a yellow that belongs to no palette. */
.qt__f input:-webkit-autofill { -webkit-box-shadow: 0 0 0 30px var(--lp-surface) inset; }

/* The consent: the checkbox does not scale with the text, so it does not sit
   in a grid of two equal columns — it keeps its own size, and the text flows beside it. */
.qt__ok { display: flex; gap: 10px; align-items: flex-start; }
.qt__ok input { flex: none; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--lp-accent); }
.qt__ok label { font-size: 14px; line-height: 1.45; color: var(--lp-ink-soft); }
.qt__ok a { text-decoration: underline; }

.qt__submit { display: flex; }
.qt__submit .btn { width: 100%; }

/* The outcome speaks where the button was pressed, not at the top of the page.
   It starts hidden and the JS turns it on — or the server, after a POST without JavaScript. */
.qt__outcome { font-size: 15px; line-height: 1.5; border-radius: var(--lp-radius-control); padding: 12px 14px; }
.qt__outcome.is-ok { background: var(--lp-accent-tint); color: var(--bbx-blue-800); }
.qt__outcome.is-ko { background: var(--bbx-gray-100); color: var(--lp-ink); }
.qt__outcome a { text-decoration: underline; }

/* The honeypot field. Off screen and not display:none: some autofill
   tools skip what is hidden that way, and the honeypot is there precisely
   to get filled. aria-hidden in the markup hides it from those who read with
   their ears. */
.qt__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --- 10 · closing -------------------------------------------------------------
   A single centred column: it is the last invitation, it must compete with nothing. */
.close { display: block; }
.close__in { max-width: 42em; margin-inline: auto; text-align: center; }
.close__logo { height: 28px; width: auto; margin: 0 auto 26px; }
.close h2 { font-size: clamp(32px, 4.6vw, 58px); line-height: 1; letter-spacing: -.03em; font-weight: 800; margin-bottom: 16px; }
.close__lede { font-size: 18px; line-height: 1.5; color: var(--bbx-blue-200); margin: 0 auto 30px; max-width: 30em; }
.close__cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.close__alt { font-size: 14px; color: var(--bbx-blue-300); margin-top: 22px; }
.close__alt a { color: #fff; text-decoration: underline; }

/* --- email confirmation · download -------------------------------------------
   The page that opens after sign-up, and the one the links of our emails
   open (/site/download). They stand alone: no hero above,
   no sections below, so it breathes in the centre instead of aligning left
   like the rest of the landing.

   Short width on purpose (34em): here you do not read, you look. Three things
   in a row — what happened, what to do now, and what to do if nothing happens —
   and the eye takes in all three without moving. */
.confirm { max-width: 34em; margin-inline: auto; text-align: center; }

/* The illustration comes first but weighs little: it is decorative, it repeats
   what the title says. Fixed size because it is a 2x raster, and letting it
   grow would make it grainy. */
.confirm__img { display: block; width: 112px; height: auto; margin: 0 auto 22px; }

.confirm__eyebrow {
    font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--lp-accent); margin-bottom: 10px;
}

/* The title here is the page's h1, but it must not shout like the one on the
   home: it is a confirmation, not an announcement. It inherits the small size
   of .sec__h2--sm and is centred. */
.confirm__h { margin-inline: auto; margin-bottom: 12px; }

.confirm__lede { margin: 0 auto 28px; max-width: 30em; }

.confirm__cta { margin: 0; }

/* The line that answers the only question of whoever lands here. Set apart
   from the button and smaller: it is the second road, not the first. */
.confirm__help {
    font-size: 14px; line-height: 1.6; color: var(--lp-ink-soft);
    margin: 26px auto 0; max-width: 30em;
}
.confirm__help a { color: var(--lp-accent); text-decoration: underline; }

/* The download page (blocks/download.php) wears the same column, with the
   two stores under the button: the second road into BadgeBox, so smaller and
   quieter than the first, like the help line. Same badge height as the
   footer's. */
.confirm__or {
    font-size: 14px; line-height: 1.6; color: var(--lp-ink-soft);
    margin: 28px auto 12px;
}
.confirm__stores { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.confirm__stores img { display: block; height: 36px; width: auto; }

/* --- legal documents ---------------------------------------------------------
   The privacy notice and the terms of use (blocks/legal/doc.php): a page
   that is read, not looked at. On the left the index, which stays in view
   while scrolling (sticky under the header, like .ag__agent: 63 of header
   plus air); on the right the text at a reading width. Under 900 the index
   goes above the text, in a box of its own; under 720 the table turns into
   one card per row, with the head's words on every cell (data-l). */
.legal__head { max-width: 46em; margin-bottom: clamp(32px, 4vw, 52px); }
.legal__eyebrow {
    font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--lp-accent-press); margin-bottom: 10px;
}
.legal__h { margin-bottom: 10px; }
.legal__updated { font-size: 15px; color: var(--lp-ink-soft); }
.legal__note {
    margin-top: 18px; padding: 12px 16px; max-width: 40em;
    border-radius: var(--lp-radius-control); background: var(--lp-accent-tint);
    font-size: 15px; line-height: 1.55; color: var(--lp-ink);
}

.legal__grid {
    display: grid; grid-template-columns: 250px minmax(0, 1fr);
    gap: clamp(32px, 5vw, 72px); align-items: start;
}

.legal__toc {
    position: sticky; top: 87px;
    max-height: calc(100vh - 111px); overflow-y: auto;
}
.legal__toc-h {
    font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--lp-ink-soft); margin-bottom: 12px;
}
.legal__toc ol { border-left: 1px solid var(--lp-border); }
.legal__toc a {
    display: flex; gap: 8px; padding: 6px 12px; margin-left: -1px;
    border-left: 2px solid transparent;
    font-size: 14px; line-height: 1.4; color: var(--lp-ink-soft);
}
.legal__toc a:hover { color: var(--lp-ink); border-left-color: var(--lp-accent); }

.legal__num {
    flex: none; min-width: 1.5em;
    font-variant-numeric: tabular-nums; font-weight: 700; color: var(--lp-accent-press);
}

.legal__body { max-width: 46em; font-size: 16px; line-height: 1.7; color: var(--lp-ink); }
.legal__body p { margin-bottom: 14px; }
.legal__body strong { font-weight: 700; }
/* Links in running text are underlined — here more than anywhere a link has
   to look like one — and the long addresses of the EU pages wrap instead of
   pushing the column wider than the screen. */
.legal__body a { text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }

.legal__intro {
    font-size: 17px;
    padding-bottom: clamp(20px, 3vw, 32px); margin-bottom: clamp(28px, 3.5vw, 40px);
    border-bottom: 1px solid var(--lp-border);
}
.legal__intro p:last-child { margin-bottom: 0; }

.legal__sec { scroll-margin-top: 88px; }
.legal__sec + .legal__sec { margin-top: clamp(28px, 3.5vw, 44px); }
.legal__sec-h {
    display: flex; gap: 10px;
    font-size: 21px; line-height: 1.3; letter-spacing: -.01em; font-weight: 700;
    margin-bottom: 14px;
}

.legal__list { display: grid; gap: 8px; margin-bottom: 16px; }
.legal__list > li { position: relative; padding-left: 22px; }
.legal__list > li::before {
    content: ""; position: absolute; left: 6px; top: .7em;
    width: 6px; height: 6px; border-radius: var(--lp-radius-pill); background: var(--lp-accent);
}
.legal__list--sub { margin: 8px 0 0; }
.legal__list--sub > li::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--lp-accent); }
.legal__list--alpha > li { padding-left: 28px; }
.legal__list--alpha > li::before { content: none; }
.legal__mark { position: absolute; left: 0; font-weight: 700; color: var(--lp-accent-press); }

.legal__table {
    margin: 4px 0 20px; overflow-x: auto;
    border: 1px solid var(--lp-border); border-radius: var(--lp-radius-control);
}
.legal__table table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.55; }
.legal__table th {
    padding: 12px 14px; text-align: left; vertical-align: bottom;
    font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    color: var(--lp-ink-soft); background: var(--lp-page); border-bottom: 1px solid var(--lp-border);
}
.legal__table td { padding: 14px; vertical-align: top; }
.legal__table tbody tr + tr td { border-top: 1px solid var(--lp-border); }

@media (max-width: 900px) {
    .legal__grid { grid-template-columns: minmax(0, 1fr); }
    .legal__toc {
        position: static; max-height: none; overflow: visible;
        padding: 16px 18px; border: 1px solid var(--lp-border);
        border-radius: var(--lp-radius-card); background: var(--lp-page);
    }
    .legal__toc ol { border-left: 0; }
    .legal__toc a { padding: 5px 0; margin-left: 0; border-left: 0; }
}

@media (max-width: 720px) {
    .legal__table { border: 0; border-radius: 0; overflow: visible; }
    .legal__table table, .legal__table tbody, .legal__table tr, .legal__table td { display: block; }
    .legal__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    .legal__table tr {
        padding: 2px 14px; margin-bottom: 12px;
        border: 1px solid var(--lp-border); border-radius: var(--lp-radius-control);
    }
    .legal__table td { padding: 10px 0; }
    .legal__table tbody td + td { border-top: 1px solid var(--lp-border); }
    .legal__table tbody tr + tr td:first-child { border-top: 0; }
    .legal__table td:first-child { font-weight: 600; }
    .legal__table td::before {
        content: attr(data-l); display: block; margin-bottom: 2px;
        font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
        color: var(--lp-ink-soft);
    }
}

/* --- footer -----------------------------------------------------------------
   Four columns: who we are, what is in the product, the company, how to get
   help. Below, a single row for the legal notes. */
.ft { background: #001b36; color: var(--bbx-gray-400); padding: clamp(44px, 5vw, 64px) 20px 28px; }
.ft a { color: var(--bbx-blue-200); }
.ft a:hover { color: #fff; text-decoration: none; }

.ft__top {
    display: grid;
    grid-template-columns: minmax(240px, 1.6fr) repeat(auto-fit, minmax(150px, 1fr));
    gap: clamp(28px, 4vw, 48px);
    padding-inline: 0;
}
.ft__brand { min-width: 0; max-width: 34em; }
.ft__brand img { height: 26px; width: auto; margin-bottom: 18px; }
.ft__brand p { font-size: 15px; line-height: 1.55; }
.ft__group { margin-top: 12px !important; font-size: 14px !important; color: var(--bbx-gray-400); }
.ft__group strong { font-weight: 600; color: var(--bbx-blue-200); }
.ft__stores { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.ft__stores img { height: 36px; width: auto; }

.ft__col { min-width: 0; }
.ft__col h2 {
    font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: #fff; margin-bottom: 14px;
}
.ft__col ul { display: grid; gap: 9px; }
.ft__col li { font-size: 15px; line-height: 1.35; }
.ft__hours { margin-top: 16px; font-size: 13px; line-height: 1.5; color: var(--bbx-gray-400); }

.ft__bar {
    display: flex; flex-wrap: wrap; gap: 12px 32px;
    justify-content: space-between; align-items: center;
    margin-top: clamp(32px, 4vw, 48px); padding: 20px 0 0;
    border-top: 1px solid rgba(255,255,255,.1);
    font-size: 13px;
}
.ft__legal { color: var(--bbx-gray-400); }
.ft__links { display: flex; flex-wrap: wrap; gap: 10px 20px; }

/* --- tablet and below ----------------------------------------------------------
   Below 900px the two hero columns do not hold: the laptop drops under the
   claim and the title scales with the window width again
   (12.15em of longest word against ~860px of row: it fits). */
@media (max-width: 900px) {
    .hero__inner { grid-template-columns: minmax(0, 1fr); --hero-h1: clamp(32px, 6.6vw, 56px); }
    .hero__mock { max-width: 560px; margin-inline: auto; }

    /* The quote: the pitch above, the form below. In two columns at
       this width the fields become shorter than what is typed
       into them. */
    .qt { grid-template-columns: minmax(0, 1fr); }
    .qt__says { max-width: 34em; }
}

/* --- phone ------------------------------------------------------------------- */
@media (max-width: 760px) {
    .below__photos { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
    .hd__nav { display: none; }
    .hd__login { padding-inline: 2px; }
    .hero__shot { margin-top: -24px; }
    /* The four-column footer does not fit: the brand takes the full row
       and the three navigations lay out in two columns. */
    .ft__top { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
    .ft__brand { grid-column: 1 / -1; max-width: none; }

    .pr__controls { width: 100%; }
    .pr__switch { flex: 1 1 100%; justify-content: center; }
    .pr__switch button { flex: 1; justify-content: center; padding-inline: 8px; }

    /* The four-column table in 350px: the spacing shrinks, not the
       columns. The percentages stay those of the title — changing them here
       would push the coverage dots out of their column — and the text takes
       care of being narrow, since at that point it can break a word
       instead of making the table scroll. */
    .cf__t th, .cf__t td { padding: 11px 8px; }
    .cf__t thead th { font-size: 12px; }
    .cf__t tbody th, .cf__t tbody td { font-size: 14px; }
    .cf__t tbody th { overflow-wrap: break-word; }
    .cf__sum-t { padding: 14px 10px; font-size: 15px; gap: 8px; }

    /* The top-ups: same squeeze as the accordion above. With a short
       screen the box must not spend on borders what the cards
       need. */
    .cr__sum { padding: 14px 10px; }
    .cr__acc .cr__cards { padding: 12px 10px 14px; }
    .pr--credit { padding: 16px; }
}

/* --- the narrow header ------------------------------------------------------
   The bar carries four things (brand, language, log in, trial) plus the
   menu button. With the full call to action it needed 442px: so the
   compaction threshold is at 520 and not 420, because between 421 and 519 the
   navigation is already gone but the bar is still wide. */
@media (max-width: 520px) {
    /* With the menu button next to it, «Accedi» is the fourth thing in the bar
       and no longer fits: the same item is inside the sheet that opens. */
    html.mo-nav .hd__login { display: none; }
    .hd__end { gap: 8px; }
    .btn--sm { padding: 8px 12px; font-size: 14px; }
}

/* --- narrow phones ----------------------------------------------------------
   Below 420px nothing more is removed: everything tightens. */
@media (max-width: 420px) {
    /* The title steps down: «sui dati per le paghe» at 40px does not fit
       in 280px of row, and the rotating word does not wrap by construction. */
    .hero__h1 { font-size: clamp(26px, 8.6vw, 40px); }

    .hd__bar { gap: 8px; padding-inline: 12px; }
    .hd__logo img { height: 22px; }
    .hd__lang { padding: 5px 8px; font-size: 13px; }
    .hd__login { font-size: 14px; padding-inline: 2px; }
}

/* --- the feature wall ------------------------------------------------------
   Twelve items instead of three sections. They are not bordered cards: a border
   twelve times becomes a cage, and the page needs to breathe here. The only
   mark is the icon tile, which gives the whole column its alignment
   and keeps the lines of text on a single grid. */
.wall {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(26px, 3.4vw, 40px) clamp(24px, 3vw, 44px);
}
.wall__v { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 14px; align-items: start; }
.wall__i {
    width: 42px; height: 42px; border-radius: 13px;
    background: var(--lp-accent-tint); color: var(--lp-accent-press);
    display: grid; place-items: center;
}
/* The icons are strokes, not filled shapes: a single attribute here and none
   in the twelve drawings. */
.wall__i svg {
    width: 22px; height: 22px;
    fill: none; stroke: currentColor; stroke-width: 1.7;
    stroke-linecap: round; stroke-linejoin: round;
}
.wall__v h3 { font-size: 17px; font-weight: 700; line-height: 1.2; }
.wall__v p { font-size: 15px; line-height: 1.45; color: var(--lp-ink-soft); margin-top: 5px; }
/* The icon sprite must not take up space in the flow. */
.wall__stamp { position: absolute; width: 0; height: 0; overflow: hidden; }

@media (max-width: 900px) { .wall { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .wall { grid-template-columns: minmax(0, 1fr); } }

/* --- the costs strip -------------------------------------------------------
   It was a whole section with its screenshot plus three cards below. But the
   point is just one — the hours you have already collected serve this too — and
   a claim and four lines are enough to say it. The rule above each item is what
   makes it read as a strip and not as a bulleted list. */
.strip {
    display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.3fr);
    gap: clamp(24px, 4vw, 56px); align-items: start;
}
.strip__p { font-size: 17px; line-height: 1.5; color: var(--lp-ink-soft); margin-top: 12px; max-width: 30em; }
.strip__l { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px clamp(24px, 3vw, 36px); }
.strip__l li {
    font-size: 15px; line-height: 1.45; color: var(--lp-ink-soft);
    padding-top: 12px; border-top: 2px solid var(--lp-border);
}
.strip__l b { display: block; color: var(--lp-ink); font-weight: 700; margin-bottom: 3px; }
@media (max-width: 900px) { .strip { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .strip__l { grid-template-columns: minmax(0, 1fr); } }

/* --- the other pages -------------------------------------------------------
   The strip at the bottom of every page that says where else you can go.
   It is the only place on the site where a page names the others, so it must
   read as a passage and not as another section to read: rule on top, no
   background, and cards that are nothing but a link.

   The padding is the tight one (.sec--tight): it comes after the argument is
   over, and must not weigh as much as a real section. */
.alt__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: 16px;
}
.alt__card {
    position: relative;
    display: block;
    background: var(--lp-surface);
    border: 1px solid var(--lp-border);
    border-radius: var(--lp-radius-card);
    padding: 22px 52px 22px 24px;
    color: inherit;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.alt__card:hover {
    border-color: var(--lp-accent);
    box-shadow: var(--bbx-shadow-sm);
    transform: translateY(-2px);
}
.alt__card h3 { font-size: 19px; font-weight: 700; line-height: 1.2; margin-bottom: 6px; }
.alt__card p { font-size: 15px; line-height: 1.5; color: var(--lp-ink-soft); }

/* The arrow rests in the card and moves on hover: it is the sign that
   the whole card is a link, and that is enough. */
.alt__go {
    position: absolute;
    top: 22px; right: 22px;
    color: var(--lp-accent);
    font-size: 18px; line-height: 1;
    transition: transform .18s ease;
}
.alt__card:hover .alt__go { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
    .alt__card, .alt__go { transition: none; }
    .alt__card:hover { transform: none; }
}

/* --- people, before the plans -----------------------------------------------
   Same strip as the costs: two columns, the argument on the left and the items
   on the right. Here on the left there is also the button leading to the HR
   modules page — it is the only difference, and does not deserve a new component. */
.people__eyebrow {
    font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--lp-accent-press); margin-bottom: 10px;
}
.people__go { margin-top: 20px; }

/* --- the e-signature --------------------------------------------------------
   On the right the code step as the signer sees it (desk/sign.php): the
   document, the card with the four steps, and below the stamp and the trail. Still:
   it is meant to be read. The code is in tabular figures so it does not jump between widths. */
.esg__plans { margin-top: 14px; font-size: 14px; font-weight: 600; color: var(--lp-accent-press); }

.esg { max-width: 440px; margin-inline: auto; display: grid; gap: 12px; }
.esg__doc {
    display: flex; align-items: center; gap: 12px; padding: 14px 16px;
    background: var(--lp-surface); border: 1px solid var(--lp-border);
    border-radius: var(--lp-radius-card); box-shadow: var(--bbx-shadow-sm);
}
.esg__file {
    font-size: 11px; font-weight: 800; letter-spacing: .04em; color: var(--lp-ink-invert);
    background: var(--lp-accent); border-radius: 6px; padding: 5px 7px;
}
.esg__name { font-size: 15px; font-weight: 600; color: var(--lp-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.esg__card {
    padding: 20px; background: var(--lp-surface); border: 1px solid var(--lp-border);
    border-radius: var(--lp-radius-card); box-shadow: var(--bbx-shadow-lg);
}
.esg__steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 18px; }
.esg__steps li { border-top: 3px solid var(--lp-border); padding-top: 8px; }
.esg__steps li span {
    display: grid; place-items: center; width: 22px; height: 22px; border-radius: var(--lp-radius-pill);
    font-size: 12px; font-weight: 700; background: var(--bbx-gray-100); color: var(--bbx-gray-600);
}
.esg__steps li.is-done { border-top-color: var(--lp-ok-ink); }
.esg__steps li.is-done span { background: var(--lp-ok-soft); color: var(--lp-ok-ink); }
.esg__steps li.is-on { border-top-color: var(--lp-accent); }
.esg__steps li.is-on span { background: var(--lp-accent); color: var(--lp-ink-invert); }
.esg__h { font-size: 17px; font-weight: 700; margin-bottom: 4px; }
.esg__dest { font-size: 14px; color: var(--lp-ink-soft); margin-bottom: 12px; }
.esg__code {
    font-size: 24px; font-weight: 700; letter-spacing: .12em; font-variant-numeric: tabular-nums;
    padding: 10px 14px; border: 1px solid var(--lp-accent); border-radius: var(--lp-radius-control);
    box-shadow: 0 0 0 3px var(--lp-accent-tint); margin-bottom: 14px; width: max-content; max-width: 100%;
}
.esg__btn {
    text-align: center; font-size: 15px; font-weight: 700; color: var(--lp-ink-invert);
    background: var(--lp-accent); border-radius: var(--lp-radius-control); padding: 11px 14px;
}
.esg__ok {
    display: flex; align-items: center; gap: 10px; padding: 12px 16px;
    background: var(--lp-ok-soft); color: var(--lp-ok-ink); border-radius: var(--lp-radius-card);
    font-size: 14px; font-weight: 600;
}
.esg__tick {
    display: grid; place-items: center; width: 22px; height: 22px; flex: 0 0 auto;
    border-radius: var(--lp-radius-pill); background: var(--lp-ok-ink); color: var(--lp-ink-invert); font-size: 12px;
}
.esg__trail { font-size: 13px; color: var(--lp-ink-soft); text-align: center; }