/* Lexara Ink + Document Assessment page.
   Every colour on this page is a token declared once below. The literals
   live here only because the marketing site's main.css does not expose a
   token set; each pair was measured (WCAG ratio printed in the drop notes).
   The page paints its own backgrounds on every band, so no state relies on
   an inherited page colour. */
.lx {
    --lx-navy: #061C39;        /* brand navy */
    --lx-navy-2: #122C52;      /* raised card on navy */
    --lx-navy-hi: #16345E;     /* hover on navy controls */
    --lx-gold: #F5A623;        /* brand gold: fills and text on navy only (2.03:1 on white) */
    --lx-gold-hi: #FFD27A;     /* gold control hover */
    --lx-gold-deep: #8A5300;   /* gold read on light grounds, 6.33:1 on white */
    --lx-ink: #0E1726;         /* body text on light */
    --lx-muted: #4A5568;       /* secondary text on light */
    --lx-paper: #FFFFFF;
    --lx-tint: #F6F8FB;
    --lx-lemon: #FFF7DF;
    --lx-rule: #7B8799;        /* borders on light, 3.42:1 on tint */
    --lx-rule-navy: #6F86AB;   /* borders on navy and navy cards */
    --lx-on-navy: #F4F6FA;
    --lx-on-navy-muted: #B8C3D6;
    --lx-ok: #14653A;   --lx-ok-bg: #E8F6EE;
    --lx-crit: #9B1C1C; --lx-crit-bg: #FDECEC;
    --lx-mod: #7A5200;  --lx-mod-bg: #FFF7DF;

    font-family: "Aptos", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    color: var(--lx-ink);
    background: var(--lx-paper);
    line-height: 1.55;
}
.lx *, .lx *::before, .lx *::after { box-sizing: border-box; }

.lx-wrap { max-width: 1180px; margin: 0 auto; padding: 0 28px; }
.lx-band { padding: 88px 0; }
.lx-band-white { background: var(--lx-paper); color: var(--lx-ink); }
.lx-band-tint  { background: var(--lx-tint);  color: var(--lx-ink); }
.lx-band-navy  { background: var(--lx-navy);  color: var(--lx-on-navy); }

.lx-h2 { font-size: clamp(1.7rem, 2.6vw, 2.35rem); line-height: 1.18; font-weight: 700; margin: 0 0 16px; color: var(--lx-navy); max-width: 26ch; letter-spacing: -0.01em; }
.lx-h3 { font-size: 1.12rem; line-height: 1.3; font-weight: 700; margin: 0 0 8px; color: var(--lx-navy); }
.lx-intro { font-size: 1.08rem; color: var(--lx-muted); max-width: 62ch; margin: 0 0 36px; }
.lx-on-navy { color: var(--lx-on-navy); max-width: 30ch; }
.lx-on-navy-muted { color: var(--lx-on-navy-muted); }
.lx-kicker { font-size: 0.95rem; font-weight: 600; color: var(--lx-gold); margin: 0 0 14px; }
.lx p { margin: 0 0 12px; }
.lx-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Buttons: every state sets background and colour together (s9b). */
.lx-btn { display: inline-flex; align-items: center; padding: 12px 22px; border-radius: 999px; font-weight: 500; font-size: 0.98rem; text-decoration: none; border: 1px solid transparent; transition: background-color .15s, color .15s, border-color .15s; }
.lx-btn:focus-visible { outline: 3px solid var(--lx-gold); outline-offset: 3px; }
.lx-btn-gold { background: var(--lx-gold); color: var(--lx-navy); border-color: var(--lx-gold); }
.lx-btn-gold:hover, .lx-btn-gold:focus-visible { background: var(--lx-gold-hi); color: var(--lx-navy); border-color: var(--lx-gold-hi); }
.lx-btn-navy { background: var(--lx-navy); color: var(--lx-gold); border-color: var(--lx-navy); }
.lx-btn-navy:hover, .lx-btn-navy:focus-visible { background: var(--lx-navy-hi); color: var(--lx-gold); border-color: var(--lx-navy-hi); }
.lx-band-white .lx-btn:focus-visible, .lx-band-tint .lx-btn:focus-visible { outline-color: var(--lx-navy); }
/* Secondary on navy: a visible fill, never transparent (s12). */
.lx-btn-line-dark { background: var(--lx-navy-2); color: var(--lx-on-navy); border-color: var(--lx-rule-navy); }
.lx-btn-line-dark:hover, .lx-btn-line-dark:focus-visible { background: var(--lx-navy-hi); color: var(--lx-gold); border-color: var(--lx-gold); }
.lx-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* HERO */
.lx-hero { background: var(--lx-navy); color: var(--lx-on-navy); padding: 132px 0 96px; overflow: hidden; }
.lx-hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; }
.lx-hero h1 { font-size: clamp(2.2rem, 4.4vw, 3.5rem); line-height: 1.06; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 20px; color: var(--lx-on-navy); max-width: 16ch; }
.lx-lede { font-size: 1.15rem; color: var(--lx-on-navy-muted); max-width: 48ch; }
.lx-fine-dark { font-size: 0.9rem; color: var(--lx-on-navy-muted); margin-top: 18px; }

.lx-doc { background: var(--lx-paper); color: var(--lx-ink); border-radius: 6px; padding: 26px 28px 22px; box-shadow: 0 30px 60px -20px rgba(0,0,0,.55); border-top: 4px solid var(--lx-gold); transform: rotate(-1.2deg); max-width: 500px; margin-left: auto; }
.lx-doc-head { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px solid var(--lx-rule); padding-bottom: 10px; margin-bottom: 14px; }
.lx-doc-title { font-family: "Times New Roman", Times, serif; font-size: 1.05rem; color: var(--lx-navy); }
.lx-doc-page { font-size: 0.78rem; color: var(--lx-muted); }
.lx-clause { display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: start; padding: 10px 0; border-bottom: 1px dashed var(--lx-rule); }
.lx-clause p { font-family: "Times New Roman", Times, serif; font-size: 0.93rem; line-height: 1.45; margin: 0; color: var(--lx-ink); }
.lx-clause b { font-weight: 700; }
.lx-chip { font-size: 0.74rem; font-weight: 600; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.lx-sev-crit { background: var(--lx-crit-bg); color: var(--lx-crit); }
.lx-sev-mod  { background: var(--lx-mod-bg);  color: var(--lx-mod); }
.lx-sev-ok   { background: var(--lx-ok-bg);   color: var(--lx-ok); }
.lx-sign { position: relative; padding-top: 18px; }
.lx-sign-line { border-bottom: 1px solid var(--lx-navy); width: 66%; height: 48px; }
.lx-ink-path { width: 220px; height: 48px; display: block; }
.lx-ink-path path { fill: none; stroke: var(--lx-navy); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 420; stroke-dashoffset: 0; }
.lx-sign-label { display: block; font-size: 0.78rem; color: var(--lx-muted); margin-top: 6px; }
.lx-seal { position: absolute; right: 4px; bottom: 2px; width: 96px; height: 96px; border-radius: 50%; background: var(--lx-navy); color: var(--lx-gold); border: 2px solid var(--lx-gold); display: grid; place-items: center; text-align: center; font-size: 0.68rem; line-height: 1.2; padding: 8px; font-weight: 600; transform: rotate(-12deg); box-shadow: 0 0 0 4px var(--lx-paper), 0 0 0 5px var(--lx-gold-deep); }

/* Load sequence: clauses rated, then ink, then seal. Only when motion is welcome. */
@media (prefers-reduced-motion: no-preference) {
    .lx-anim .lx-chip { opacity: 0; transform: translateY(4px); animation: lxIn .35s ease-out forwards; animation-delay: calc(.7s + var(--d) * .55s); }
    .lx-anim .lx-clause:nth-child(2) .lx-chip { --d: 0; }
    .lx-anim .lx-clause:nth-child(3) .lx-chip { --d: 1; }
    .lx-anim .lx-clause:nth-child(4) .lx-chip { --d: 2; }
    .lx-anim .lx-ink-path path { stroke-dashoffset: 420; animation: lxInk 1.3s ease-in-out 2.6s forwards; }
    .lx-anim .lx-sign-label { opacity: 0; animation: lxIn .4s ease-out 3.8s forwards; }
    .lx-anim .lx-seal { opacity: 0; transform: rotate(-12deg) scale(1.6); animation: lxSeal .45s cubic-bezier(.2,.9,.3,1.3) 4.0s forwards; }
}
@keyframes lxIn { to { opacity: 1; transform: none; } }
@keyframes lxInk { to { stroke-dashoffset: 0; } }
@keyframes lxSeal { to { opacity: 1; transform: rotate(-12deg) scale(1); } }

/* THREE LINES */
.lx-three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.lx-three p { color: var(--lx-muted); max-width: 36ch; }
.lx-band-white .lx-three > div { border-top: 3px solid var(--lx-navy); padding-top: 18px; }

/* FLOW: outlined blocks, drawn arrows, no dark band */
.lx-flow { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 48px 1fr 48px 1fr 48px 1fr; align-items: stretch; gap: 8px; }
.lx-step { background: var(--lx-paper); color: var(--lx-ink); border: 1.5px solid var(--lx-navy); border-radius: 10px; padding: 22px 20px 20px; display: flex; flex-direction: column; }
.lx-step h3 { margin: 6px 0 8px; font-size: 1.15rem; color: var(--lx-navy); }
.lx-step p { color: var(--lx-muted); font-size: 0.95rem; flex: 1; }
.lx-step-n { width: 30px; height: 30px; border-radius: 50%; background: var(--lx-navy); color: var(--lx-gold); display: grid; place-items: center; font-weight: 700; font-size: 0.9rem; }
.lx-step-tag { align-self: flex-start; margin-top: 10px; font-size: 0.78rem; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: var(--lx-navy); color: var(--lx-gold); }
.lx-step-tag-all { background: var(--lx-ok-bg); color: var(--lx-ok); }
.lx-arrow { display: grid; place-items: center; }
.lx-arrow svg { width: 44px; height: 22px; }
.lx-arrow path { fill: none; stroke: var(--lx-navy); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* ENTERPRISE */
.lx-ent-grid { display: grid; gap: 18px; margin-bottom: 40px; }
.lx-ent { background: var(--lx-navy-2); color: var(--lx-on-navy); border: 1px solid var(--lx-rule-navy); border-top: 3px solid var(--lx-gold); border-radius: 10px; padding: 22px 20px; }
.lx-ent h3 { color: var(--lx-gold); font-size: 1.05rem; margin: 0 0 10px; }
.lx-ent p { color: var(--lx-on-navy-muted); font-size: 0.94rem; margin: 0; }

/* SCREENSHOT INSETS: shot, a vertical bar, the merit beside it. Sides alternate. */
.lx-insets { display: grid; gap: 56px; margin: 8px 0 48px; }
.lx-inset { display: grid; grid-template-columns: minmax(0, 42%) 4px minmax(0, 1fr); gap: 32px; align-items: center; }
.lx-inset-rev { grid-template-columns: minmax(0, 1fr) 4px minmax(0, 42%); }
.lx-inset-rev .lx-inset-shot { order: 3; }
.lx-inset-rev .lx-inset-bar { order: 2; }
.lx-inset-rev .lx-inset-text { order: 1; }
.lx-inset-bar { align-self: stretch; width: 4px; border-radius: 2px; background: var(--lx-gold-deep); }
.lx-band-navy .lx-inset-bar { background: var(--lx-gold); }
.lx-inset-shot { display: block; padding: 0; margin: 0; border: 1px solid var(--lx-rule); border-radius: 10px; background: var(--lx-paper); cursor: zoom-in; overflow: hidden; box-shadow: 0 14px 30px -18px rgba(6, 28, 57, .45); transition: border-color .15s, box-shadow .15s; }
.lx-band-navy .lx-inset-shot { border-color: var(--lx-rule-navy); box-shadow: 0 18px 36px -18px rgba(0, 0, 0, .7); }
.lx-inset-shot img { display: block; width: 100%; height: auto; }
.lx-inset-shot:hover, .lx-inset-shot:focus-visible { border-color: var(--lx-gold-deep); background: var(--lx-paper); }
.lx-band-navy .lx-inset-shot:hover, .lx-band-navy .lx-inset-shot:focus-visible { border-color: var(--lx-gold); background: var(--lx-paper); }
.lx-inset-shot:focus-visible { outline: 3px solid var(--lx-navy); outline-offset: 3px; }
.lx-band-navy .lx-inset-shot:focus-visible { outline-color: var(--lx-gold); }
.lx-inset-text h2, .lx-inset-text h3 { font-size: clamp(1.35rem, 2vw, 1.7rem); line-height: 1.2; font-weight: 700; margin: 0 0 14px; color: var(--lx-navy); max-width: 24ch; }
.lx-inset-text p { color: var(--lx-muted); font-size: 1.04rem; max-width: 56ch; }
.lx-band-navy .lx-inset-text h2, .lx-inset-text h3 { color: var(--lx-gold); }
.lx-band-navy .lx-inset-text p { color: var(--lx-on-navy-muted); }
.lx-inset-note { font-size: 0.92rem; color: var(--lx-gold-deep); font-weight: 600; }
.lx-band-tint p.lx-inset-note, .lx-band-white p.lx-inset-note { color: var(--lx-gold-deep); }
.lx-ent-also { margin: 8px 0 18px; font-size: 1.15rem; }
.lx-ent-grid { grid-template-columns: repeat(3, 1fr); }

/* SHOWCASE TABS: folder tabs fixed to the panel's edge. On wide screens they
   hang off the left side, stacked vertically; where there is no room they sit
   along the top. The selected tab is gold and joins the panel.
   Every state sets background and text together (s9b). */
.lx-tabs { position: relative; }
.lx-tablist { position: absolute; right: 100%; top: 28px; width: 150px; display: flex; flex-direction: column; gap: 8px; }
.lx-tab { display: block; width: 100%; text-align: left; font: inherit; font-size: 0.98rem; font-weight: 600; cursor: pointer; padding: 12px 16px; border: 1px solid var(--lx-rule-navy); border-right: 0; border-radius: 10px 0 0 10px; background: var(--lx-navy-2); color: var(--lx-on-navy); transition: background-color .15s, color .15s, border-color .15s; position: relative; }
.lx-tab-name { display: block; color: inherit; }
.lx-tab:hover { background: var(--lx-navy-hi); color: var(--lx-gold); border-color: var(--lx-gold); }
.lx-tab[aria-selected="true"] { background: var(--lx-gold); color: var(--lx-navy); border-color: var(--lx-gold); margin-right: -1px; width: calc(100% + 1px); }
.lx-tab[aria-selected="true"]:hover { background: var(--lx-gold-hi); color: var(--lx-navy); border-color: var(--lx-gold-hi); }
.lx-tab:focus-visible { outline: 3px solid var(--lx-on-navy); outline-offset: 2px; z-index: 1; }
.lx-panels { border: 1px solid var(--lx-gold); border-radius: 0 14px 14px 14px; background: var(--lx-navy-2); padding: 32px 36px; }
.lx-panel:focus-visible { outline: 2px solid var(--lx-gold); outline-offset: 6px; border-radius: 8px; }
.lx-panel[hidden] { display: none; }
.lx-panels .lx-insets { margin: 0; gap: 36px; }
.lx-panels .lx-inset { grid-template-columns: minmax(0, 44%) 4px minmax(0, 1fr); gap: 24px; }
.lx-panels .lx-inset-rev { grid-template-columns: minmax(0, 1fr) 4px minmax(0, 44%); }
.lx-panels .lx-inset-text h3 { font-size: 1.3rem; margin-bottom: 10px; }
.lx-panels .lx-inset-text p { font-size: 0.97rem; margin-bottom: 8px; }
.lx-panels .lx-inset-shot { border-color: var(--lx-rule-navy); }
@media (prefers-reduced-motion: no-preference) {
    .lx-panel:not([hidden]) { animation: lxIn .3s ease-out; }
}
/* No room to hang the tabs off the left: they sit along the top edge. */
@media (max-width: 1540px) {
    .lx-tablist { position: static; width: auto; flex-direction: row; gap: 6px; }
    .lx-tab { width: auto; border: 1px solid var(--lx-rule-navy); border-bottom: 0; border-radius: 10px 10px 0 0; }
    .lx-tab[aria-selected="true"] { margin: 0 0 -1px; width: auto; border-color: var(--lx-gold); }
    .lx-panels { border-radius: 0 14px 14px 14px; }
}

/* ENLARGED SCREENSHOT: the s8a frame. Navy bar flush on top, gold title,
   gold rule under it, 1px gold hairline on the other three sides only.
   A transient view that holds no work, so a click outside also closes it. */
.lx-modal { position: fixed; inset: 0; z-index: 10000; background: rgba(6, 28, 57, .72); display: grid; place-items: center; padding: 24px; }
.lx-modal[hidden] { display: none; }
.lx-modal-box { width: min(1400px, 100%); max-height: calc(100vh - 48px); display: flex; flex-direction: column; background: var(--lx-paper); border-radius: 10px; overflow: hidden; }
.lx-modal-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 18px; background: var(--lx-navy); border-bottom: 3px solid var(--lx-gold); }
.lx-modal-title { margin: 0; font-size: 1.05rem; font-weight: 600; color: var(--lx-gold); }
.lx-modal-close { font: inherit; font-size: 0.92rem; padding: 6px 16px; border-radius: 999px; cursor: pointer; background: var(--lx-navy-2); color: var(--lx-on-navy); border: 1px solid var(--lx-rule-navy); }
.lx-modal-close:hover, .lx-modal-close:focus-visible { background: var(--lx-gold); color: var(--lx-navy); border-color: var(--lx-gold); }
.lx-modal-close:focus-visible { outline: 3px solid var(--lx-on-navy); outline-offset: 2px; }
.lx-modal-body { overflow: auto; background: var(--lx-paper); border: 1px solid var(--lx-gold); border-top: 0; border-radius: 0 0 10px 10px; }
.lx-modal-body img { display: block; width: 100%; height: auto; }

/* TABLES: item down the left, options across the top */
.lx-table-scroll { overflow-x: auto; position: relative; }
.lx-table { width: 100%; border-collapse: collapse; background: var(--lx-paper); color: var(--lx-ink); font-size: 0.97rem; min-width: 720px; }
.lx-table th, .lx-table td { text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--lx-rule); vertical-align: top; }
.lx-table thead th { background: var(--lx-navy); color: var(--lx-gold); font-weight: 600; border-bottom: 3px solid var(--lx-gold); }
.lx-table tbody th { color: var(--lx-navy); font-weight: 600; }
.lx-table td { color: var(--lx-muted); }
.lx-table td.lx-win { color: var(--lx-ok); font-weight: 700; }
.lx-plans td, .lx-plans thead th:not(:first-child) { text-align: center; }
.lx-plans .lx-col-ent { background: var(--lx-lemon); color: var(--lx-ink); }
.lx-plans thead th.lx-col-ent { background: var(--lx-navy-2); color: var(--lx-gold); }
.lx-col-note { display: block; font-size: 0.75rem; font-weight: 500; color: var(--lx-on-navy-muted); }
.lx-tick { color: var(--lx-ok); font-weight: 700; font-size: 1.1rem; }
.lx-plans td.lx-tick { color: var(--lx-ok); }
.lx-dash { color: var(--lx-muted); font-size: 1.1rem; }
.lx-plans td.lx-dash { color: var(--lx-muted); }
.lx-plan-cta td, .lx-plan-cta th { border-bottom: 0; padding-top: 20px; }
.lx-legend { font-size: 0.88rem; color: var(--lx-muted); margin-top: 14px; }

/* SPLITS AND LISTS */
.lx-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.lx-points { list-style: none; padding: 0; margin: 0; }
.lx-points li { position: relative; padding: 0 0 12px 22px; color: var(--lx-muted); max-width: 60ch; }
.lx-points li::before { content: ""; position: absolute; left: 0; top: .62em; width: 9px; height: 9px; border-radius: 2px; background: var(--lx-gold-deep); }
.lx-points strong { color: var(--lx-navy); }
.lx-next { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px 40px; }
.lx-next li { color: var(--lx-muted); border-left: 3px solid var(--lx-gold-deep); padding-left: 14px; }
.lx-next strong { color: var(--lx-navy); }
.lx-close { text-align: left; }

/* RESPONSIVE */
@media (max-width: 1024px) {
    .lx-ent-grid { grid-template-columns: repeat(2, 1fr); }
    .lx-panels .lx-inset, .lx-panels .lx-inset-rev { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .lx-inset, .lx-inset-rev { grid-template-columns: minmax(0, 1fr); gap: 18px; }
    .lx-inset-rev .lx-inset-shot, .lx-inset-rev .lx-inset-bar, .lx-inset-rev .lx-inset-text { order: 0; }
    .lx-inset-bar { width: 72px; height: 4px; }
    .lx-flow { grid-template-columns: 1fr; }
    .lx-arrow svg { transform: rotate(90deg); }
}
@media (max-width: 860px) {
    .lx-band { padding: 64px 0; }
    .lx-hero { padding: 112px 0 64px; }
    .lx-hero-grid, .lx-two-col, .lx-three { grid-template-columns: 1fr; }
    .lx-doc { margin: 0 auto; transform: none; }
}
@media (max-width: 560px) {
    .lx-panels { padding: 22px 18px; }
    .lx-ent-grid { grid-template-columns: 1fr; }
    .lx-wrap { padding: 0 18px; }
}
#showcase { scroll-margin-top: calc(var(--navbar-h, 80px) + 8px); }

/* The product address, set just above the hero's Try free button. */
.lx-domain { display: inline-block; margin-top: 26px; font-size: 1.35rem; font-weight: 700; letter-spacing: 0.01em; color: var(--lx-gold); text-decoration: none; border-bottom: 2px solid var(--lx-rule-navy); padding-bottom: 2px; }
.lx-domain:hover, .lx-domain:focus-visible { color: var(--lx-gold-hi); border-bottom-color: var(--lx-gold); }
.lx-domain:focus-visible { outline: 3px solid var(--lx-on-navy); outline-offset: 4px; border-radius: 2px; }
.lx-actions-tight { margin-top: 14px; }