/* =====================================================================
   SkyRock Logbooks — public landing page (/license/logbooks).

   SELF-CONTAINED on purpose. The two sibling landings are too
   (public/agents/styles.css imports nothing), and this one had to stop
   riding /dental-books/styles.css: that sheet is built for a page whose
   ground is the cosmos, and this page's ground is white. Overriding a
   dark system into a light one is how a stylesheet ends up with a
   six-selector override list per button — the exact problem the app's
   own rebuild removed (components/logbooks/logbooks.css, "THE SHEET").

   THE DIRECTION. The Logbooks app floats exactly once: one white sheet
   on the sky, everything else grouped inside it with tint and a
   hairline. This page is that sheet. The cosmos brackets it — hero
   above, closing panel below — so arriving here looks like opening the
   product, and the starfield stays the frame it is in the app.

   Tokens mirror components/logbooks/logbooks.css, including its
   measured ink ladder (that file carries the contrast numbers; do not
   re-pick these by eye). `lbl-` namespace throughout.
   ===================================================================== */

:root {
    /* ---- Ground ---- */
    --lbl-cosmos: #0b0e1a;
    --lbl-sheet: #ffffff;
    --lbl-tray: #f7f7f7;
    --lbl-tray-2: #ebebeb;
    --lbl-line: #e4e4e4;
    --lbl-line-strong: #d2d2d2;

    /* ---- Ink (the app's ladder — measured on --lbl-tray, its hardest ground) ---- */
    --lbl-text: #232731;      /* 13.94:1 — body and headings */
    --lbl-muted: #3f454f;     /*  9.01:1 — secondary lines, labels */
    --lbl-subtle: #545a63;    /*  6.49:1 — meta, hints, table heads */
    --lbl-gold-ink: #7a5e17;  /*  5.70:1 — derived values, locked fields, brand eyebrow */
    --lbl-green-ink: #21714d; /* roll-up ink */

    /* ---- On the cosmos ---- */
    --lbl-on-dark: #FFF6F6;
    --lbl-on-dark-muted: rgba(255, 255, 255, 0.76);
    --lbl-on-dark-faint: rgba(255, 255, 255, 0.55);
    --lbl-gold-light: #d9c08a;   /* the ON-DARK gold; --lbl-gold-ink is its on-white twin */

    /* ---- Brand ---- */
    --lbl-accent: #3C486B;
    --lbl-accent-hover: #2e3a56;
    --lbl-accent-soft: #eef1f7;
    --lbl-gold: #c2a35a;
    --lbl-gold-soft: rgba(194, 163, 90, 0.40);
    --lbl-green: #2e9e6b;
    --lbl-steel-grad: linear-gradient(-145deg, #2e3a56, #3C486B, #283350, #46557e, #2e3a56);
    --lbl-silver-grad: linear-gradient(-145deg, #f4f4f4, #e0e0e0, #fcfcfc, #d8d8d8, #eeeeee);
    --lbl-plate: linear-gradient(145deg, #5a6068 0%, #34383f 38%, #23272d 55%, #444a52 78%, #2b2f35 100%);

    /* ---- Type. Two faces: the system stack, and a mono UTILITY face for the
       technical layer — formulas, field keys, layer marks, figures. The app sets
       formulas in mono (.lb-mod-formula); this page promotes that to the page's
       one typographic signature instead of importing a display face the rest of
       the family does not have. ---- */
    --lbl-font: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --lbl-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    --lbl-fs-xs: 0.72rem;
    --lbl-fs-sm: 0.84rem;
    --lbl-fs-md: 0.95rem;
    --lbl-fs-lg: 1.12rem;
    --lbl-fs-h2: clamp(1.55rem, 3.6vw, 2.35rem);
    --lbl-fs-hero: clamp(2.5rem, 7.5vw, 4.6rem);

    /* ---- Space (4px base) ---- */
    --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
    --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;

    /* ---- Radius ---- */
    --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-pill: 999px;

    /* ---- Elevation. Three, no more: resting on a tray, the sheet floating on the
       sky, a module lifted off the canvas. ---- */
    --sh-rest: 0 1px 2px rgba(8, 12, 24, 0.06);
    --sh-sheet: 0 2px 6px rgba(5, 8, 18, 0.20), 0 22px 60px rgba(5, 8, 18, 0.40);
    --sh-pop: 0 1px 2px rgba(8, 12, 24, 0.10), 0 10px 24px rgba(8, 12, 24, 0.14);

    /* ---- Focus. One ring, the app's: steel-navy at 0.70 measures 3.99:1 on white,
       clearing SC 2.4.11. Gold-soft (1.39:1) does not, which is why it is not used. ---- */
    --lbl-ring: 0 0 0 3px rgba(60, 72, 107, 0.70);
    --lbl-ring-dark: 0 0 0 3px rgba(217, 192, 138, 0.85);

    --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
    --dur: 160ms;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
/* The UA gives <figure> `margin: 1em 40px`. Every figure here is a full-width
   exhibit, and 80px of inherited indent was costing the tables and the chart a
   quarter of the sheet on a phone. */
figure { margin: 0; }

body {
    min-height: 100vh;
    color: var(--lbl-text);
    font-family: var(--lbl-font);
    font-size: var(--lbl-fs-md);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    background-color: var(--lbl-cosmos);
    background-image:
        linear-gradient(180deg, rgba(8, 11, 22, 0.55), rgba(8, 11, 22, 0.74)),
        url('/components/files/images/sky.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}
a { color: var(--lbl-accent); text-decoration: none; }
:focus-visible { outline: none; box-shadow: var(--lbl-ring); border-radius: var(--r-sm); }

/* =====================================================================
   Top bar — brushed black metal. The one piece of family furniture that
   does not change between the three landings.
   ===================================================================== */
.lbl-top {
    position: sticky; top: 0; z-index: 20;
    display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
    padding: var(--s-3) var(--s-5);
    background: linear-gradient(-145deg, #1c1c1c, #2a2a2a, #141414, #333333, #1c1c1c);
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
}
.lbl-brand { display: flex; align-items: center; gap: var(--s-3); color: var(--lbl-on-dark); }
/* A PLACARD, not a bare mark: the logo artwork is a globe with a compass rule that
   runs edge to edge, so at a small square size the rule spans the box and the globe
   collapses to a dot. Give it a plate and 81% of the plate height — the same fix
   the app's masthead and the Dental Books shell both use. */
.lbl-brand-plate {
    width: 3.6rem; height: 1.8rem; flex: 0 0 auto; display: inline-block; border-radius: 8px;
    background-image: url('/components/files/icons/OfficialSkyRockWhiteLogo.svg'), var(--lbl-plate);
    background-size: auto 1.46rem, cover;
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
    border: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow: 0 1px 3px rgba(10, 12, 16, 0.40), inset 0 -1px 0 rgba(255, 255, 255, 0.30), inset 0 1px 0 rgba(0, 0, 0, 0.35);
}
.lbl-brand-text { display: flex; flex-direction: column; line-height: 1.05; font-weight: 700; letter-spacing: 0.04em; }
.lbl-brand-sub { color: rgba(255, 255, 255, 0.52); font-size: 0.6rem; letter-spacing: 0.18em; font-weight: 400; text-transform: uppercase; margin-top: 2px; }

.lbl-nav { display: flex; align-items: center; gap: var(--s-1); flex-wrap: wrap; justify-content: flex-end; }
.lbl-nav a {
    color: rgba(255, 255, 255, 0.72); font-size: 0.9rem; font-weight: 600;
    padding: 0.5rem 0.85rem; border-radius: var(--r-md); border: 1px solid transparent;
    transition: color var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.lbl-nav a:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
.lbl-nav a:focus-visible { box-shadow: var(--lbl-ring-dark); }
.lbl-nav a.is-cta { border-color: var(--lbl-gold-light); color: var(--lbl-on-dark); }
.lbl-nav a.is-cta:hover { background: rgba(194, 163, 90, 0.16); color: #fff; }
.lbl-lang { display: inline-flex; align-items: center; margin-right: var(--s-2); }

/* =====================================================================
   Buttons — one system. Primary is silver on the cosmos and steel on the
   sheet, because a silver button on white is invisible and a steel button
   on the stars is a hole.
   ===================================================================== */
.lbl-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
    min-height: 44px; padding: 0.65rem 1.35rem;
    border: 1px solid transparent; border-radius: var(--r-md);
    font-family: inherit; font-size: var(--lbl-fs-md); font-weight: 700; cursor: pointer;
    transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
                color var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
                transform var(--dur) var(--ease), filter var(--dur) var(--ease);
}
.lbl-btn:active { transform: translateY(1px); }
.lbl-btn--silver { background: var(--lbl-silver-grad); color: var(--lbl-accent); box-shadow: var(--sh-pop); }
.lbl-btn--silver:hover { filter: brightness(1.04); }
.lbl-btn--ghost { background: rgba(255, 255, 255, 0.08); color: var(--lbl-on-dark); border-color: rgba(255, 255, 255, 0.42); }
.lbl-btn--ghost:hover { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.62); color: #fff; }
.lbl-btn--ghost:focus-visible { box-shadow: var(--lbl-ring-dark); }
.lbl-btn--steel { background: var(--lbl-steel-grad); color: #fff; box-shadow: var(--sh-rest); }
.lbl-btn--steel:hover { filter: brightness(1.12); }
.lbl-btn--quiet { background: var(--lbl-sheet); color: var(--lbl-accent); border-color: var(--lbl-line-strong); }
.lbl-btn--quiet:hover { background: var(--lbl-tray); border-color: var(--lbl-accent); }

/* =====================================================================
   Hero — on the cosmos, deliberately short. It hands off to the sheet.
   ===================================================================== */
.lbl-hero {
    max-width: 58rem; margin: 0 auto;
    padding: clamp(2.5rem, 7vw, 4.5rem) var(--s-5) clamp(2rem, 5vw, 3rem);
    text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--s-4);
}
.lbl-hero-badge {
    display: inline-flex; align-items: center; color: var(--lbl-gold-light);
    text-transform: uppercase; letter-spacing: 0.16em; font-size: var(--lbl-fs-xs); font-weight: 700;
    padding: 0.42rem 0.9rem; border: 1px solid var(--lbl-gold-soft); border-radius: var(--r-pill);
    background: rgba(194, 163, 90, 0.12);
}
.lbl-hero-title {
    margin: 0; font-weight: 800; letter-spacing: -0.03em; line-height: 0.98;
    font-size: var(--lbl-fs-hero);
    display: flex; flex-wrap: wrap; gap: 0 0.24em; justify-content: center;
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45);
}
.lbl-hero-t1 { color: var(--lbl-on-dark); }
.lbl-hero-t2 {
    background: linear-gradient(180deg, #f3e6c2 0%, #d9c08a 55%, #c2a35a 100%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: #d9c08a;
}
.lbl-hero-lead {
    margin: 0; color: var(--lbl-on-dark-muted); max-width: 40rem;
    font-size: clamp(1.02rem, 2.2vw, 1.18rem); line-height: 1.6;
}
.lbl-hero-cta { display: flex; gap: var(--s-3); flex-wrap: wrap; justify-content: center; margin-top: var(--s-2); }

/* =====================================================================
   THE SHEET — one white surface holding the whole page.
   ===================================================================== */
.lbl-sheet {
    max-width: 76rem; margin: 0 auto clamp(2rem, 6vw, 3.5rem);
    background: var(--lbl-sheet);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-sheet);
    overflow: hidden;   /* the tinted bands run to the sheet's rounded edge */
}
/* A band is a section. White by default; tinted when it needs to group as one
   thing. Depth is NEVER used here — inside the sheet, hierarchy is tint + rule. */
.lbl-band { padding: clamp(2.25rem, 5.5vw, 3.5rem) clamp(1.25rem, 4vw, 3.25rem); }
.lbl-band + .lbl-band { border-top: 1px solid var(--lbl-line); }
.lbl-band--tray { background: var(--lbl-tray); }
.lbl-band--head { padding-top: clamp(1.75rem, 4vw, 2.5rem); }

.lbl-eyebrow {
    margin: 0 0 var(--s-2); color: var(--lbl-gold-ink);
    text-transform: uppercase; letter-spacing: 0.16em; font-size: var(--lbl-fs-xs); font-weight: 700;
}
/* 34ch, not 24: at 24 every heading on this page broke one word onto a second
   line ("…capa por / capa"). A measure that guarantees an orphan is the wrong
   measure — 34ch keeps the solo headings on one line and still wraps the two
   that sit in a --split head's narrower column, where wrapping is intended. */
.lbl-h2 {
    margin: 0 0 var(--s-3); font-size: var(--lbl-fs-h2); font-weight: 800;
    letter-spacing: -0.02em; line-height: 1.15; color: var(--lbl-text); max-width: 34ch;
}
.lbl-lead { margin: 0 0 var(--s-6); color: var(--lbl-muted); max-width: 60ch; font-size: 1.02rem; }
.lbl-lead:last-child { margin-bottom: 0; }

/* A section header. --split gives it a second column for a figure or a formula, and
   ONLY the bands that actually have one take it — an empty 1fr track next to a
   two-line heading is the dead right half this page was redesigned to remove. */
.lbl-bandhead { margin-bottom: var(--s-6); }
.lbl-bandhead > :last-child { margin-bottom: 0; }
.lbl-bandhead--split {
    display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: var(--s-6); align-items: end;
}
.lbl-bandhead--split > :first-child > :last-child { margin-bottom: 0; }
@media (max-width: 56rem) { .lbl-bandhead--split { grid-template-columns: 1fr; gap: var(--s-5); align-items: start; } }

/* The formula chip — the page's typographic signature. The product's own
   language, set in the product's own face, used as a section device. */
.lbl-formula {
    margin: 0; padding: var(--s-4);
    font-family: var(--lbl-mono); font-size: var(--lbl-fs-sm); line-height: 1.7;
    color: var(--lbl-accent); background: var(--lbl-tray-2);
    border: 1px solid var(--lbl-line); border-left: 3px solid var(--lbl-gold);
    border-radius: var(--r-md); overflow-x: auto;
}
.lbl-formula b { color: var(--lbl-gold-ink); font-weight: 700; }
.lbl-formula .lbl-formula-c { display: block; color: var(--lbl-subtle); font-weight: 400; }

/* =====================================================================
   Cards
   ===================================================================== */
.lbl-grid { display: grid; gap: var(--s-4); }
.lbl-grid--2 { grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); }
.lbl-grid--3 { grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr)); }
.lbl-grid--4 { grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr)); }
/* A grid that follows a figure in the same band: the figure is the statement, the
   cards are its footnotes, so they sit closer to it than to the next band. */
.lbl-grid--under { margin-top: var(--s-5); }

.lbl-card {
    background: var(--lbl-sheet); border: 1px solid var(--lbl-line);
    border-radius: var(--r-md); padding: var(--s-5);
    box-shadow: var(--sh-rest);
    transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.lbl-band--tray .lbl-card { background: var(--lbl-sheet); }
.lbl-card:hover { border-color: var(--lbl-line-strong); transform: translateY(-2px); }
.lbl-card-ic {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.5rem; height: 2.5rem; border-radius: var(--r-md); margin-bottom: var(--s-3);
    border: 1px solid var(--lbl-line); background: var(--lbl-accent-soft); color: var(--lbl-accent);
}
.lbl-card-ic svg { width: 20px; height: 20px; display: block; }
.lbl-card-ic--gold { background: rgba(194, 163, 90, 0.14); border-color: var(--lbl-gold-soft); color: var(--lbl-gold-ink); }
.lbl-card-ic--green { background: rgba(46, 158, 107, 0.12); border-color: rgba(46, 158, 107, 0.35); color: var(--lbl-green-ink); }
.lbl-card-t { margin: 0 0 var(--s-2); font-size: var(--lbl-fs-lg); font-weight: 700; color: var(--lbl-text); line-height: 1.25; }
.lbl-card-p { margin: 0; color: var(--lbl-muted); font-size: var(--lbl-fs-md); }

/* =====================================================================
   SIGNATURE — the blueprint. A to-scale reproduction of the real canvas:
   the app's dotted paper, its cable stroke, its port dots, its kind
   stripes (navy = a field, gold = an operation, navy = the result).
   Drawn as ONE inline SVG with a viewBox so the modules and the cables
   between them can never drift apart at any width.
   ===================================================================== */
.lbl-bp { margin: 0; }
.lbl-bp-frame {
    border: 1px solid var(--lbl-line-strong); border-radius: var(--r-lg);
    background: #f6f6f6; box-shadow: var(--sh-rest), inset 0 1px 0 rgba(255, 255, 255, 0.6);
    overflow: hidden;
}
/* The workspace chrome, so the drawing reads as a screen and not a diagram. */
.lbl-bp-bar {
    display: flex; align-items: center; gap: var(--s-3);
    padding: 0.55rem 0.85rem; background: linear-gradient(180deg, #ffffff, var(--lbl-tray));
    border-bottom: 1px solid var(--lbl-line);
}
.lbl-bp-dots { display: inline-flex; gap: 5px; }
.lbl-bp-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--lbl-line-strong); }
.lbl-bp-crumb {
    font-family: var(--lbl-mono); font-size: var(--lbl-fs-xs); color: var(--lbl-subtle);
    letter-spacing: 0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lbl-bp-crumb b { color: var(--lbl-accent); font-weight: 700; }
/* The drawing SCROLLS rather than shrinks. At 390px a 660-unit viewBox renders its
   11px labels at under 6px — the one thing the page is built around, illegible on
   the device most visitors arrive on. 30rem is the width at which the module titles
   stay readable; above it the min-width is inert and nothing scrolls. */
.lbl-bp-scroll { overflow-x: auto; overscroll-behavior-x: contain; }
.lbl-bp-svg { display: block; width: 100%; min-width: 30rem; height: auto; }
/* On a phone the drawing gets its OWN type scale rather than a smaller min-width alone.
   Everything inside an SVG is in user units, so raising these sizes buys legibility back
   at a smaller rendered scale — 26rem instead of 30rem, which is a quarter less to
   scroll and, at 390px, keeps the whole result module and its figure inside the port.
   The right edge then softens so the half-shown module reads as "more this way" rather
   than as a broken layout; masking the SCROLLPORT keeps that fade pinned to the edge
   while the drawing travels under it. */
@media (max-width: 40rem) {
    .lbl-bp-svg { min-width: 26rem; }
    .bp-title { font-size: 15px; }
    .bp-kind { font-size: 14px; }
    .bp-val { font-size: 19px; }
    .bp-val--out { font-size: 21px; }
    .lbl-bp-scroll {
        -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 2.25rem), transparent);
        mask-image: linear-gradient(90deg, #000 calc(100% - 2.25rem), transparent);
    }
}
.lbl-bp-cap {
    margin: var(--s-4) 0 0; color: var(--lbl-subtle); font-size: var(--lbl-fs-sm);
    display: flex; align-items: baseline; gap: var(--s-2); flex-wrap: wrap;
}
.lbl-bp-cap b { color: var(--lbl-text); font-weight: 700; }

/* --- the SVG's own vocabulary --- */
.bp-paper { fill: url(#bpDots); }
.bp-mod-box { fill: #ffffff; stroke: var(--lbl-line-strong); stroke-width: 1; }
.bp-mod-head { fill: var(--lbl-tray); }
.bp-mod-rule { stroke: var(--lbl-line); stroke-width: 1; }
.bp-stripe--in { fill: url(#bpIn); }
.bp-stripe--op { fill: url(#bpOp); }
.bp-stripe--res { fill: url(#bpRes); }
.bp-kind { font-family: var(--lbl-font); font-size: 11px; font-weight: 800; }
.bp-kind-box { stroke-width: 1; }
.bp-kind-box--in { fill: var(--lbl-accent-soft); stroke: var(--lbl-line-strong); }
.bp-kind-box--op { fill: rgba(194, 163, 90, 0.18); stroke: var(--lbl-gold-soft); }
.bp-kind-box--res { fill: var(--lbl-accent-soft); stroke: var(--lbl-line-strong); }
.bp-kind--in, .bp-kind--res { fill: var(--lbl-accent); }
.bp-kind--op { fill: var(--lbl-gold-ink); }
.bp-title {
    font-family: var(--lbl-font); font-size: 11px; font-weight: 700;
    letter-spacing: 0.07em; fill: var(--lbl-muted);
}
.bp-val {
    font-family: var(--lbl-mono); font-size: 15px; font-weight: 700;
    fill: var(--lbl-text); font-variant-numeric: tabular-nums;
}
.bp-val--out { fill: var(--lbl-gold-ink); font-size: 17px; }
.bp-field { fill: var(--lbl-tray); stroke: var(--lbl-line); stroke-width: 1; }
.bp-cable { fill: none; stroke: rgba(60, 72, 107, 0.55); stroke-width: 2.25; stroke-linecap: round; }
.bp-port { fill: #ffffff; stroke: var(--lbl-accent); stroke-width: 2; }
.bp-port--out { fill: var(--lbl-gold); stroke: var(--lbl-gold-ink); }
/* Subtraction reads left to right: the first plug is the one the others come OUT of,
   so the app marks it rather than leaving two identical dots. Kept here because a
   drawing that quietly lied about that would be a drawing of a different product. */
.bp-port--base { fill: #ffffff; stroke: var(--lbl-gold-ink); stroke-width: 2.5; }

/* THE ONE ORCHESTRATED MOMENT on this page: the cables draw themselves, then the
   total lands. It runs once, on load, in the hero — everything else holds still.

   FAIL-SAFE BY CONSTRUCTION. The hidden state lives in the keyframes and the fill
   mode is `backwards`, never `forwards`: the element holds the from-state only
   while the animation is pending, and reverts to its own style once it ends. Put
   the other way round — opacity:0 in the base rule, held by `forwards` — a browser
   that never runs the animation leaves the result box permanently blank, which is
   a worse page than one with no animation at all.
   520 units is longer than the longest cable, so one dash length covers all three
   and none of them clips. */
.bp-cable { animation: bp-draw 700ms var(--ease) backwards; }
.bp-cable--b { animation-delay: 160ms; }
.bp-cable--c { animation-delay: 420ms; }
.bp-land { animation: bp-land 420ms var(--ease) 900ms backwards; }
@keyframes bp-draw {
    from { stroke-dasharray: 520; stroke-dashoffset: 520; }
    to { stroke-dasharray: 520; stroke-dashoffset: 0; }
}
@keyframes bp-land { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* =====================================================================
   The layers figure — a drill-down, actually nested. A client row opens
   and its payments sheet sits INSIDE it, which is what the product does
   and what two boxes side by side could never say.
   ===================================================================== */
.lbl-layers { border: 1px solid var(--lbl-line-strong); border-radius: var(--r-lg); background: var(--lbl-sheet); overflow: hidden; box-shadow: var(--sh-rest); }
.lbl-ly-head {
    display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
    padding: 0.7rem 0.9rem; background: linear-gradient(180deg, #ffffff, var(--lbl-tray));
    border-bottom: 1px solid var(--lbl-line);
}
.lbl-ly-name { font-weight: 800; color: var(--lbl-text); font-size: var(--lbl-fs-md); }
/* The layer mark. L0/L1/L2 is the product's own vocabulary and the order is
   load-bearing (a layer belongs to exactly one parent), so the numbering
   carries information rather than decorating a list. */
.lbl-ly-mark {
    font-family: var(--lbl-mono); font-size: var(--lbl-fs-xs); font-weight: 700;
    color: var(--lbl-gold-ink); background: rgba(194, 163, 90, 0.16);
    border: 1px solid var(--lbl-gold-soft); border-radius: var(--r-pill);
    padding: 0.12rem 0.55rem; white-space: nowrap; letter-spacing: 0.06em;
}
.lbl-ly-mark--navy { color: var(--lbl-accent); background: var(--lbl-accent-soft); border-color: var(--lbl-line-strong); }
.lbl-ly-row {
    display: grid; grid-template-columns: minmax(6rem, 1.5fr) minmax(4.5rem, 1fr) minmax(4.5rem, 1fr);
    gap: var(--s-3); align-items: center;
    padding: 0.55rem 0.9rem; border-top: 1px solid var(--lbl-line); font-size: var(--lbl-fs-md);
}
.lbl-ly-row:first-of-type { border-top: none; }
.lbl-ly-row--head {
    font-size: var(--lbl-fs-xs); font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.09em; color: var(--lbl-subtle); border-top: none;
}
.lbl-ly-row--open { background: var(--lbl-tray-2); font-weight: 700; }
/* nowrap: a money value that breaks after its currency mark reads as two numbers.
   Every figure in this table is at most nine characters, which fits the narrowest
   column this grid produces — keep it that way if the demo data ever changes. */
.lbl-num { text-align: right; font-family: var(--lbl-mono); font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.lbl-num--derived { color: var(--lbl-gold-ink); }
/* The inner layer, opened inside its parent's row. The gold rule is the app's
   own mark for a nested scope; the notch says which row it came out of. */
.lbl-ly-inner { margin: 0 0.9rem 0.7rem 1.9rem; border: 1px solid var(--lbl-line); border-left: 3px solid var(--lbl-gold); border-radius: var(--r-md); background: var(--lbl-tray); position: relative; }
.lbl-ly-inner::before {
    content: ""; position: absolute; left: -0.95rem; top: -0.35rem; width: 0.95rem; height: 1.15rem;
    border-left: 1px solid var(--lbl-line-strong); border-bottom: 1px solid var(--lbl-line-strong);
    border-bottom-left-radius: var(--r-sm);
}
.lbl-ly-inner .lbl-ly-head { background: none; border-bottom: 1px solid var(--lbl-line); padding: 0.5rem 0.7rem; }
.lbl-ly-inner .lbl-ly-row { padding: 0.45rem 0.7rem; font-size: var(--lbl-fs-sm); }
.lbl-ly-foot { margin: 0; padding: 0.55rem 0.7rem 0.65rem; color: var(--lbl-subtle); font-size: var(--lbl-fs-sm); font-style: italic; }
@media (max-width: 30rem) {
    .lbl-ly-inner { margin-left: 0.9rem; }
    .lbl-ly-inner::before { display: none; }
}

/* =====================================================================
   The totals board — the L0 layer. Hand-rolled SVG bars, which is what
   the app itself draws (no charting library exists in this codebase and
   none is added for a landing page).
   ===================================================================== */
.lbl-board { border: 1px solid var(--lbl-line-strong); border-radius: var(--r-lg); background: var(--lbl-sheet); box-shadow: var(--sh-rest); overflow: hidden; }
.lbl-board-head {
    display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap;
    padding: 0.7rem 0.9rem; background: linear-gradient(180deg, #ffffff, var(--lbl-tray)); border-bottom: 1px solid var(--lbl-line);
}
.lbl-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 1px; background: var(--lbl-line); border-bottom: 1px solid var(--lbl-line); }
.lbl-tile { background: var(--lbl-sheet); padding: var(--s-4) var(--s-4) calc(var(--s-4) - 2px); }
.lbl-tile-l { display: block; font-size: var(--lbl-fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; color: var(--lbl-subtle); }
.lbl-tile-v { display: block; margin-top: 2px; font-family: var(--lbl-mono); font-size: 1.35rem; font-weight: 700; color: var(--lbl-text); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.lbl-tile--gold .lbl-tile-v { color: var(--lbl-gold-ink); }
.lbl-chart { padding: var(--s-5) var(--s-4) var(--s-4); }
.lbl-chart svg { display: block; width: 100%; height: auto; }
.bp-bar { fill: var(--lbl-accent); opacity: 0.82; }
/* Gold fill measures 2.36:1 on white — under the 3:1 a graphical object needs — so
   the current month gets a gold-ink boundary that clears it (5.79:1). The month is
   also the last and tallest bar, so the colour is never the only thing saying so. */
.bp-bar--now { fill: var(--lbl-gold); opacity: 1; stroke: var(--lbl-gold-ink); stroke-width: 1; }
.bp-axis { stroke: var(--lbl-line-strong); stroke-width: 1; }
.bp-tick { font-family: var(--lbl-font); font-size: 10px; font-weight: 600; fill: var(--lbl-subtle); }

/* =====================================================================
   The Agent exchange — one turn, in the dock's own shape.
   ===================================================================== */
.lbl-chat { display: flex; flex-direction: column; gap: var(--s-3); max-width: 34rem; }
.lbl-msg { border-radius: var(--r-lg); padding: 0.7rem 0.95rem; font-size: var(--lbl-fs-md); line-height: 1.55; }
.lbl-msg--you { align-self: flex-end; background: var(--lbl-accent); color: #fff; border-bottom-right-radius: var(--r-sm); }
.lbl-msg--agent { align-self: flex-start; background: var(--lbl-sheet); color: var(--lbl-text); border: 1px solid var(--lbl-line-strong); border-bottom-left-radius: var(--r-sm); box-shadow: var(--sh-rest); }
.lbl-msg-who { display: block; font-size: var(--lbl-fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 3px; color: var(--lbl-subtle); }
.lbl-msg--you .lbl-msg-who { color: rgba(255, 255, 255, 0.7); }
/* flex, not inline-flex: the confirmation is its own line under the reply, not the
   tail of that sentence. Inline it ran on ("…de Ana María ✓ Pendiente: $ 250.000"). */
.lbl-msg-done { display: flex; align-items: center; gap: 0.4rem; margin-top: var(--s-2); font-size: var(--lbl-fs-sm); font-weight: 700; color: var(--lbl-green-ink); }
.lbl-msg-done svg { width: 15px; height: 15px; flex: 0 0 auto; }

/* A note that needs to be read but must not shout: the honest line about what
   Logbooks is for. Gold rule, tray ground, no depth. */
.lbl-note {
    display: flex; gap: var(--s-4); align-items: flex-start; margin-top: var(--s-5);
    padding: var(--s-4) var(--s-5); border: 1px solid var(--lbl-line);
    border-left: 3px solid var(--lbl-gold); border-radius: var(--r-md); background: var(--lbl-tray);
}
.lbl-note-ic { flex: 0 0 auto; color: var(--lbl-gold-ink); margin-top: 2px; }
.lbl-note-ic svg { width: 20px; height: 20px; display: block; }
.lbl-note-p { margin: 0; color: var(--lbl-muted); font-size: var(--lbl-fs-md); }
.lbl-note-p b { color: var(--lbl-text); }

/* =====================================================================
   Closing panel — back on the cosmos, so the page ends where it began.
   ===================================================================== */
.lbl-close { max-width: 76rem; margin: 0 auto; padding: 0 var(--s-5) clamp(2rem, 6vw, 3rem); }
.lbl-close-panel {
    text-align: center; border: 1px solid #283350; border-radius: var(--r-lg);
    background: var(--lbl-steel-grad); box-shadow: var(--sh-sheet); color: #fff;
    padding: clamp(2.2rem, 6vw, 3.5rem) clamp(1.5rem, 5vw, 3.25rem);
    display: flex; flex-direction: column; align-items: center; gap: var(--s-3);
}
.lbl-close-h { margin: 0; font-size: clamp(1.5rem, 4vw, 2.3rem); font-weight: 800; letter-spacing: -0.02em; color: #fff; max-width: 26ch; line-height: 1.15; }
.lbl-close-p { margin: 0 auto var(--s-2); max-width: 46rem; color: rgba(255, 255, 255, 0.84); font-size: clamp(1rem, 2.1vw, 1.08rem); }
.lbl-close-panel .lbl-btn--ghost:focus-visible { box-shadow: var(--lbl-ring-dark); }

.lbl-foot {
    display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; justify-content: center;
    color: var(--lbl-on-dark-faint); font-size: var(--lbl-fs-sm);
    padding: var(--s-5) var(--s-5) var(--s-7); text-align: center;
}
.lbl-foot a { color: var(--lbl-on-dark-muted); }
.lbl-foot a:hover { color: #fff; text-decoration: underline; }
.lbl-foot a:focus-visible { box-shadow: var(--lbl-ring-dark); }
.lbl-foot-dot { color: rgba(255, 255, 255, 0.3); }

/* =====================================================================
   Responsive
   ===================================================================== */
@media (max-width: 60rem) {
    .lbl-sheet { border-radius: var(--r-md); margin-left: var(--s-3); margin-right: var(--s-3); }
    .lbl-close { padding-left: var(--s-3); padding-right: var(--s-3); }
}
@media (max-width: 38rem) {
    .lbl-top { flex-direction: column; align-items: stretch; gap: var(--s-2); padding: var(--s-3) var(--s-4); }
    .lbl-brand { justify-content: center; }
    .lbl-nav { justify-content: center; gap: 2px 4px; }
    .lbl-nav a { padding: 0.4rem 0.6rem; font-size: 0.82rem; }
    .lbl-lang { margin-right: 0; }
    .lbl-hero-cta .lbl-btn { flex: 1 1 100%; }
    .lbl-ly-row { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-2); padding-left: 0.6rem; padding-right: 0.6rem; }
    .lbl-band { padding-left: var(--s-4); padding-right: var(--s-4); }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .lbl-card, .lbl-btn, .lbl-nav a { transition: none; }
    .lbl-card:hover { transform: none; }
    /* The signature holds still: the finished state, with no drawing. */
    .bp-cable, .bp-land { animation: none; }
}