/* Sub-page styles — 4-point retrofit 2026-07-09 (spacing/heights/type on the token
   scale; element-first inputs at 48px; content-first cards). */

/* ---------------- product page hero (light dot grid) ---------------- */
.page-hero-dots{position:relative;padding:clamp(152px,17vw,224px) clamp(20px,5vw,64px) clamp(72px,9vw,128px);text-align:center;
  background:
    radial-gradient(135% 95% at 78% 4%, #E1EAF4 0%, rgba(225,234,244,0) 50%),
    radial-gradient(120% 70% at 50% 120%, rgba(30,154,68,.08) 0%, rgba(30,154,68,0) 60%),
    linear-gradient(160deg,#FFFFFF 0%,#FAFCFE 42%,#EEF4FA 100%)}
.page-hero-dots::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;
  background-image:radial-gradient(rgba(11,70,120,.18) 1.1px,transparent 1.1px);background-size:26px 26px}
.page-hero-dots>*{position:relative}
.page-hero-dots .badge-pill{margin-bottom:var(--sp-6)}
.page-hero-dots .lede{max-width:760px}
.page-hero-dots .cta-row{display:flex;flex-wrap:wrap;gap:var(--sp-4);justify-content:center;margin-top:var(--sp-8)}

/* ---------------- product: credibility 2-col + chips + orbital ---------------- */
.credibility{background:#fff}
.cred-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:center}
.cred-h2{margin:0 0 var(--sp-5);font-size:clamp(24px,3vw,36px);font-weight:800;letter-spacing:var(--ls-heading);line-height:1.2;color:#101828}
.cred-copy p{margin:0 0 var(--sp-6);font-size:var(--fs-base);line-height:1.7;color:var(--slate)}
.cred-chips{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.cred-chip{display:inline-flex;align-items:center;gap:var(--sp-2);height:var(--h-btn);padding:0 var(--sp-4);border-radius:999px;background:#fff;
  border:1px solid var(--border);box-shadow:0 1px 2px rgba(8,54,93,.05);font-size:var(--fs-sm);font-weight:700;color:var(--navy)}
.cred-chip .dot{width:var(--sp-2);height:var(--sp-2);border-radius:50%;background:var(--green)}
.orbital{position:relative;aspect-ratio:1;max-width:480px;margin:0 auto;width:100%;container-type:inline-size}
/* 0x1F534 The rings ROTATE, and a rotating square sweeps an axis-aligned bounding
   box up to 1.41x its own size -- 314px inside a 320px orbital became 443px and
   pushed the document 39px wider, cyclically. Nothing is visible: the ring is a
   circle inscribed in that box, so the corners it sweeps are empty. Clipping the
   ORBITAL itself would have cut the chips, which legitimately sit outside it, so
   the rings get their own clipped layer and the chips stay out of it. */
.orbit-rings{position:absolute;inset:0;overflow:clip;border-radius:50%;pointer-events:none}
.orbit-ring{position:absolute;border:1.5px dashed var(--navy-100);border-radius:50%;animation:tlxOrbitSpin 80s linear infinite}
.orbit-ring.r1{inset:31%;animation-duration:45s}
.orbit-ring.r2{inset:16%;animation-duration:60s;animation-direction:reverse}
.orbit-ring.r3{inset:1%}
.orbit-hub{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:112px;height:112px;border-radius:50%;
  background:radial-gradient(120% 120% at 30% 25%,#12558C 0%,var(--navy-deep) 70%);display:flex;align-items:center;justify-content:center;
  box-shadow:0 18px 40px -14px rgba(8,54,93,.5);animation:tlxOrbitHub 4.5s var(--ease) infinite}
/* Chips revolve on the outer ring: rotate to start angle → push out by radius →
   counter-rotate so the chip stays upright. --r in cqw so it tracks the container. */
.orbit-chip{position:absolute;left:50%;top:50%;--r:49cqw;display:inline-flex;align-items:center;gap:var(--sp-2);height:var(--h-btn-sm);padding:0 var(--sp-3);border-radius:999px;background:#fff;
  border:1px solid var(--border);box-shadow:0 1px 2px rgba(8,54,93,.06),0 8px 18px -12px rgba(8,54,93,.3);
  font-family:var(--mono);font-size:var(--fs-xs);font-weight:500;color:var(--navy-deep);white-space:nowrap;
  transform:translate(-50%,-50%) rotate(var(--a0)) translateX(var(--r)) rotate(calc(-1 * var(--a0)));
  animation:tlxOrbitChip 70s linear infinite}
.orbit-chip .dot{width:var(--sp-2);height:var(--sp-2);border-radius:50%;background:var(--green)}
.oc1{--a0:-90deg}
.oc2{--a0:-30deg}
.oc3{--a0:30deg}
.oc4{--a0:90deg}
.oc5{--a0:150deg}
.oc6{--a0:210deg}
@keyframes tlxOrbitSpin{to{transform:rotate(360deg)}}
@keyframes tlxOrbitHub{
  0%,100%{box-shadow:0 18px 40px -14px rgba(8,54,93,.5),0 0 0 0 rgba(30,154,68,.3)}
  55%{box-shadow:0 18px 40px -14px rgba(8,54,93,.5),0 0 0 22px rgba(30,154,68,0)}}
@keyframes tlxOrbitChip{
  from{transform:translate(-50%,-50%) rotate(var(--a0)) translateX(var(--r)) rotate(calc(-1 * var(--a0)))}
  to{transform:translate(-50%,-50%) rotate(calc(var(--a0) + 360deg)) translateX(var(--r)) rotate(calc(-1 * var(--a0) - 360deg))}}
@media (prefers-reduced-motion:reduce){.orbit-ring,.orbit-hub,.orbit-chip{animation:none}}
@media (max-width:900px){.cred-grid{grid-template-columns:1fr}.orbital{max-width:400px}}
/* ---- orbital on phones (2026-08-19) ----------------------------------------
   The orbit only fits when chipWidth <= W/2 - hubRadius. At a 320px container
   with the full-size hub that budget is 104px and the widest chip is 146px, so
   the layout was mathematically impossible and chips overlapped the hub at every
   width <=520px on the shipped build. Three levers, all phone-only: shorter
   labels, a smaller hub, tighter chip padding. Chip TYPE never shrinks -- it is
   13.5px and must stay above the 10pt floor, which is why scaling was rejected. */
/* Two-column band: the orbital column is 404-468px here while chip width is
   fixed, so chips at the desktop --r cleared the orbital box and clipped against
   the viewport by up to 10px (worst at ~950px). Above 1200 the orbital reaches
   its 480px cap and the page is wide enough that it stops mattering. */
@media (min-width:900.02px) and (max-width:1200px){.credibility .orbit-chip{--r:44cqw}}
.oc-short{display:none}
@media (max-width:640px){
  .oc-full{display:none}
  .oc-short{display:inline}
  .orbital .orbit-hub{width:72px;height:72px}
  .orbital .orbit-hub svg{width:24px;height:24px}
  .credibility .orbit-chip{--r:34cqw;padding:0 var(--sp-2)}
}

/* ---------------- markets: bento industry grid ---------------- */
.bento{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-6);align-items:start}
.bento-col{display:grid;gap:var(--sp-6)}
.ind-card{background:#fff;border:1px solid var(--border);border-radius:16px;padding:var(--sp-8);
  box-shadow:0 1px 2px rgba(8,54,93,.04),0 10px 26px -20px rgba(8,54,93,.25)}
.ind-top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:var(--sp-5)}
.ind-ico{display:inline-flex;align-items:center;justify-content:center;width:var(--sp-12);height:var(--sp-12);border-radius:var(--radius);
  background:var(--surface);border:1px solid var(--border);color:var(--navy)}
.ind-ico svg{width:var(--sp-6);height:var(--sp-6)}
.ind-mark{width:96px;height:auto;mix-blend-mode:multiply}
.ind-card .eyebrow{margin-bottom:var(--sp-2)}
.ind-card h3{margin:0 0 var(--sp-3);font-size:clamp(20px,2vw,24px);font-weight:800;letter-spacing:-.015em;color:#101828}
.ind-challenge{margin:0 0 var(--sp-5);font-size:var(--fs-base);line-height:1.6;color:var(--slate)}
.ind-checks{list-style:none;margin:0 0 var(--sp-6);padding:0;display:grid;gap:var(--sp-3)}
.ind-checks li{position:relative;padding-left:var(--sp-8);font-size:var(--fs-sm);line-height:var(--lh-sm);color:var(--navy);font-weight:500}
.ind-checks li::before{content:"";position:absolute;left:0;top:0;width:var(--sp-5);height:var(--sp-5);border-radius:50%;
  background:var(--green) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="3.4" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>') center/11px no-repeat}
.ind-outcome{margin:0 0 var(--sp-4);padding-top:var(--sp-5);border-top:1px solid var(--border-soft);font-size:var(--fs-sm);line-height:var(--lh-sm);font-style:italic;color:var(--slate)}
.live-card{background:linear-gradient(150deg,#0E4A7C 0%,var(--navy-deep) 70%);border-radius:16px;padding:var(--sp-8);color:#fff;
  box-shadow:0 20px 44px -22px rgba(8,54,93,.55)}
.live-card .eyebrow{color:var(--green-bright);margin-bottom:var(--sp-2)}
.live-card h3{margin:0 0 var(--sp-2);font-size:clamp(20px,2.1vw,24px);font-weight:800;letter-spacing:-.015em;color:#fff}
.live-sub{margin:0 0 var(--sp-6);font-size:var(--fs-base);line-height:1.6;color:rgba(255,255,255,.85)}
.live-slot{border-radius:12px}
@media (max-width:900px){.bento{grid-template-columns:1fr}}

/* ---------------- markets: stats band ---------------- */
.stats-band{padding-top:0;padding-bottom:0}
.stats-row{background:linear-gradient(125deg,#12507F 0%,var(--navy-deep) 60%,#062A49 100%);border-radius:16px;
  padding:clamp(40px,5vw,64px) clamp(24px,4vw,56px);display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-8)}
.stat{border-left:3px solid var(--green);padding-left:var(--sp-5)}
.stat-v{display:block;font-size:clamp(32px,3.4vw,40px);font-weight:800;letter-spacing:var(--ls-heading);color:#fff;margin-bottom:var(--sp-2)}
.stat-l{display:block;font-size:var(--fs-xs);line-height:var(--lh-xs);font-style:italic;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.75)}
@media (max-width:900px){.stats-row{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.stats-row{grid-template-columns:1fr}}

/* ---------------- markets: get-started gradient card ---------------- */
.get-started{padding-top:0}
.get-started .tlx-section-copy{max-width:none;border-radius:16px;padding:clamp(48px,6vw,80px) clamp(24px,5vw,64px);
  background:
    linear-gradient(115deg, rgba(120,145,175,.28) 0%, rgba(255,255,255,0) 40%),
    radial-gradient(80% 100% at 90% 80%, rgba(30,154,68,.18) 0%, rgba(30,154,68,0) 60%),
    linear-gradient(160deg,#F2F6FA 0%,#FBFDFD 55%,#EDF7F0 100%);
  box-shadow:0 14px 36px -24px rgba(8,54,93,.35)}
.get-started .cta-row{display:flex;flex-wrap:wrap;gap:var(--sp-4);justify-content:center;margin-top:var(--sp-8)}

/* ---------------- contact: form card ---------------- */
.form-card{max-width:940px;margin:0 auto;background:#FAFBFD;border:1px solid var(--border);border-radius:16px;
  padding:clamp(28px,5vw,56px);box-shadow:0 14px 36px -26px rgba(8,54,93,.3)}
.form-title{margin:0 0 var(--sp-8);font-size:var(--fs-3xl);font-weight:800;letter-spacing:var(--ls-heading);color:#101828;text-align:center}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-6)}
.form-field{display:flex;flex-direction:column;gap:var(--sp-2)}
.form-field.wide,.check-list.wide{grid-column:1 / -1}
.form-field label,.check-list legend{font-size:var(--fs-sm);line-height:var(--lh-sm);font-weight:600;color:#101828}
.req{color:#C0392B}
.form-field input,.form-field select{
  font:inherit;font-size:var(--fs-base);color:var(--navy-deep);background:#fff;height:var(--h-input);
  border:1px solid var(--border);border-radius:var(--radius);padding:0 var(--sp-4);
  transition:border-color .15s var(--ease),box-shadow .15s var(--ease)}
.form-field textarea{
  font:inherit;font-size:var(--fs-base);color:var(--navy-deep);background:#fff;min-height:96px;resize:vertical;
  border:1px solid var(--border);border-radius:var(--radius);padding:var(--sp-3) var(--sp-4);
  transition:border-color .15s var(--ease),box-shadow .15s var(--ease)}
.form-field input::placeholder,.form-field textarea::placeholder{color:var(--slate-light)}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{
  outline:none;border-color:var(--navy);box-shadow:0 0 0 3px var(--navy-50)}
.check-list{border:0;margin:0;padding:0;display:grid;gap:var(--sp-3)}
.check-list legend{margin-bottom:var(--sp-3);padding:0}
.check-list label{display:flex;align-items:center;gap:var(--sp-3);font-size:var(--fs-sm);line-height:var(--lh-sm);color:var(--navy-deep);font-weight:400;cursor:pointer}
.check-list input{width:var(--sp-4);height:var(--sp-4);accent-color:var(--green)}
.form-submit{display:block;width:100%;margin-top:var(--sp-8);height:var(--h-btn-lg);border:0;border-radius:var(--radius);cursor:pointer;
  background:var(--navy);color:#fff;font:inherit;font-size:var(--fs-base);font-weight:700;font-style:italic;
  transition:background-color .2s var(--ease),transform .2s var(--ease)}
.form-submit:hover{background:var(--navy-deep);transform:translateY(-1px)}
.hp-field{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}
@media (max-width:640px){.form-grid{grid-template-columns:1fr}}

/* ---------------- legal pages ---------------- */
.legal-body{max-width:760px;margin:0 auto;font-size:var(--fs-base);line-height:1.75;color:var(--slate)}
.legal-body h2{margin:var(--sp-8) 0 var(--sp-3);font-size:var(--fs-xl);line-height:var(--lh-xl);font-weight:700;color:var(--navy-deep)}
.legal-body h3{margin:var(--sp-6) 0 var(--sp-2);font-size:var(--fs-lg);line-height:var(--lh-lg);font-weight:700;color:var(--navy)}
.legal-body p{margin:0 0 var(--sp-4)}
.legal-body ul{margin:0 0 var(--sp-4);padding-left:var(--sp-5)}
.legal-body li{margin:0 0 var(--sp-2)}
.legal-body a{color:var(--green-aa);font-weight:600;text-decoration:none}
.legal-body a:hover{text-decoration:underline}
.legal-body strong{color:var(--navy-deep);font-weight:700}
/* ---------------- terms of use (2026-08-19) ----------------
   John Bolinder's attorney-reviewed Terms of Use runs to 31 sections, so the page
   gets a jump list and hanging section numbers.  The numbers hang in the left
   margin on desktop and fall inline below 900px, where there is no margin to hang
   into.  Type floor is 14px -- the 10pt rule leaves no room for --fs-xs here. */
.legal-toc{margin:var(--sp-8) 0;padding:var(--sp-5) var(--sp-6);background:var(--surface);
  border:1px solid var(--border);border-radius:var(--radius-lg)}
.legal-toc-h{margin:0 0 var(--sp-3)!important;font-size:var(--fs-sm)!important;
  line-height:var(--lh-sm)!important;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--slate-light)!important}
.legal-toc ol{margin:0;padding:0;list-style:none;counter-reset:toc;
  columns:2;column-gap:var(--sp-8)}
.legal-toc li{margin:0 0 var(--sp-2);padding-left:var(--sp-8);position:relative;
  font-size:var(--fs-sm);line-height:var(--lh-sm);break-inside:avoid}
.legal-toc li::before{counter-increment:toc;content:counter(toc) ".";position:absolute;left:0;
  color:var(--slate-dim);font-variant-numeric:tabular-nums}
.legal-toc a{color:var(--slate);font-weight:500;text-decoration:none}
.legal-toc a:hover{color:var(--green-aa);text-decoration:underline}
.legal-body h2[id]{scroll-margin-top:var(--sp-24);position:relative}
.legal-num{position:absolute;right:calc(100% + var(--sp-3));color:var(--slate);
  font-weight:600;font-variant-numeric:tabular-nums}
/* 2026-09-23 legal audit: was --slate-dim (#9CA3AF), 2.54:1 on white -- a WCAG AA
   failure on both legal pages. --slate (#4B5563) is 7.56:1. The numbers are real
   text content, not decoration, so the 3:1 large-text allowance does not apply
   either: 20px at weight 600 is neither >=24px nor bold. */
.legal-contact{padding-left:var(--sp-4);border-left:3px solid var(--navy-100);
  color:var(--navy-deep);font-weight:500}
@media (max-width:900px){
  .legal-toc ol{columns:1}
  .legal-num{position:static;margin-right:var(--sp-2)}
}

.legal-callout{background:var(--amber-50);border:1px solid var(--amber);border-radius:var(--radius);padding:var(--sp-4);
  font-size:var(--fs-sm);line-height:var(--lh-sm);color:#7C5A0B;margin-bottom:var(--sp-6)}

/* ---------------- partner page ---------------- */
.partner-ways{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--sp-4);margin-top:var(--sp-10)}
.way-card{background:#fff;border:1px solid var(--border);border-radius:16px;padding:var(--pad-card);box-shadow:var(--shadow-card);text-align:left}
.way-card h3{margin:0 0 var(--sp-3);font-size:var(--fs-lg);line-height:var(--lh-lg);font-weight:700;color:var(--navy)}
.way-card p{margin:0 0 var(--sp-4);font-size:var(--fs-sm);line-height:var(--lh-sm);color:var(--slate)}
.way-card .ind-checks li{font-weight:400}
.perk-list{list-style:none;margin:var(--sp-6) auto 0;padding:0;max-width:560px;display:grid;gap:var(--sp-3);text-align:left}
.perk-list li{position:relative;padding-left:var(--sp-8);font-size:var(--fs-base);line-height:var(--lh-base);color:var(--navy);font-weight:500}
.perk-list li::before{content:"";position:absolute;left:0;top:2px;width:var(--sp-5);height:var(--sp-5);border-radius:50%;
  background:var(--green) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="3.4" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>') center/11px no-repeat}

/* ============================================================
   2026-08-05 · SECURITY SECTION (revision round 3)
   Draft. Cards marked .sec-pending carry facts still owed by John
   (via Brandon). Do not ship to a public URL while any PENDING
   chip is still rendering.
   ============================================================ */
/* ============================================================================
   SECURITY — RE-GROUNDED DARK 2026-08-07 (Sam).

   It measured 248.8 sitting in a run of five consecutive light sections at the
   bottom of this page, so the one section whose whole job is to feel solid read
   as the flattest thing on it. It now uses the shared --gd-* ramp, same as
   every other dark band on the site, so it follows _proto/ground.html too.

   Inverting a section means inverting ALL of it — ground, headings, lede, card
   surfaces, icon tiles, body copy, the note block and the group heading. The
   home hero taught this the hard way on 2026-08-06: re-grounding without
   repainting the copy left navy text on navy. Every light-ground colour below
   has a dark counterpart, and the amber sec-pending treatment is re-tuned
   rather than dropped, because those cards must still shout if they are ever
   un-commented.
   ============================================================================ */
.tlx-security{
  position:relative;overflow:hidden;
  padding:clamp(64px,7vw,104px) 0;
  color:#fff;
  background:
    radial-gradient(120% 78% at 50% 118%, rgba(30,154,68,var(--gd-glow-green)) 0%, rgba(30,154,68,0) 60%),
    /* Blue bloom damped here — measured, it bought only 4.35 -> 4.42 on the
       eyebrow, so it is NOT what was costing contrast (--gd-1 is). Kept anyway
       because this section reads flatter and more solid without the corner
       wash, which is the point of a security section. */
    radial-gradient(85% 55% at 14% -8%, rgba(19,88,146,calc(var(--gd-glow-blue) * .5)) 0%, rgba(19,88,146,0) 62%),
    linear-gradient(var(--gd-angle),var(--gd-1) 0%,var(--gd-2) 46%,var(--gd-3) 100%);
}
.tlx-security > *{position:relative;z-index:1}
.tlx-security .sec-inner{max-width:1180px;margin:0 auto;padding:0 clamp(20px,4vw,40px)}
.tlx-security .sec-head{max-width:760px;margin:0 0 clamp(36px,4vw,52px)}
.tlx-security .sec-h2{margin:12px 0 16px;font-size:clamp(30px,4vw,44px);line-height:1.14;
  font-weight:800;letter-spacing:-.02em;color:#fff}
/* --green-bright, not --green-dark: #1A8A3D on this navy is ~2.4:1. */
.tlx-security .sec-h2 .accent{color:var(--green-bright)}
.tlx-security .eyebrow{color:var(--green-bright)}
.tlx-security .sec-lede{margin:0;font-size:clamp(16px,1.7vw,19px);line-height:1.6;color:rgba(255,255,255,.82)}

/* 2026-08-06: 280px capped the row at 3 tracks, so hiding the pending group left
   the 4 confirmed cards as 3 + 1 orphan. 250px fits all four on one row at this
   container width. auto-fit (not auto-fill) collapses empty tracks, so if the
   pending group is restored its 3 cards still stretch across their own row. */
.tlx-security .sec-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px}
/* Cards tint DOWN off the ground, with a light hairline for the edge — the
   same recipe the home page's dark surfaces use. A white card here would fight
   the section instead of sitting in it. */
.tlx-security .sec-card{
  position:relative;display:flex;flex-direction:column;gap:8px;
  padding:24px;border-radius:14px;background:rgba(3,16,30,.34);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.11), 0 18px 40px -30px rgba(0,8,18,.8);
}
.tlx-security .sec-ico{display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:11px;
  background:rgba(53,193,104,.13);border:1px solid rgba(53,193,104,.30);
  color:var(--green-bright);margin-bottom:4px}
.tlx-security .sec-ico svg{width:20px;height:20px}
.tlx-security .sec-card h3{margin:0;font-size:17px;line-height:1.3;font-weight:700;color:#fff}
.tlx-security .sec-card p{margin:0;font-size:14.5px;line-height:1.55;color:rgba(255,255,255,.78)}

/* Facts still owed by John: must be unmistakable in a review. Re-tuned for the
   dark ground rather than dropped — these three cards are currently commented
   out of enterprise.html, and if they are ever restored they still have to
   shout. Amber ink on a warm dark panel, instead of dark ink on cream. */
.tlx-security .sec-card.sec-pending{
  background:rgba(74,55,10,.42);box-shadow:inset 0 0 0 1.5px rgba(233,196,106,.62);
}
.tlx-security .sec-card.sec-pending .sec-ico{
  background:rgba(233,196,106,.16);border-color:rgba(233,196,106,.42);color:#F0C462}
.tlx-security .sec-card.sec-pending h3{color:#F7DFA6}
.tlx-security .sec-card.sec-pending p{color:rgba(247,223,166,.84)}
.tlx-security .sec-flag{
  align-self:flex-start;margin-top:2px;padding:4px 12px;border-radius:999px;
  background:#E9C46A;color:#4A370A;
  font-size:13.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
}
.tlx-security .sec-note{
  margin:28px 0 0;padding:16px 20px;border-radius:12px;
  background:rgba(3,16,30,.34);box-shadow:inset 0 0 0 1px rgba(255,255,255,.09);
  font-size:13.5px;line-height:1.6;color:rgba(255,255,255,.72);
}

.tlx-security .sec-grouph{
  margin:0 0 16px;font-size:13.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.58);
}
.tlx-security .sec-grid + .sec-grouph{margin-top:36px}
.tlx-security .sec-grouph-pending{color:#F0C462}   /* #8A6114 was ~1.6:1 on navy */