/* TrustLayer new design system — translated from design/Homepage 1f.dc.html.
   Tokens, keyframes and hover/responsive rules live here; the page markup keeps
   the board's inline styles so tl.js (her tl-fx motion library) can find its
   targets, which it does by matching style attributes. */

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#F6F7F9;font-family:'Inter',sans-serif;-webkit-font-smoothing:antialiased}
body:has(.tl[data-theme="dark"]){background:#0B0F14}
a{color:#00A88A;text-decoration:none}a:hover{color:#00C6A2}

/* Token set — verbatim from Homepage 1f (--body added by the Blog Article board) */
.tl{--bg:#F6F7F9;--fg:#0B0F14;--fg2:#46596D;--fg3:#6B7C91;--body:#2B3A4A;--line:#DDE3EB;--card:#FFFFFF;--cardline:#E1E6EE;--soft:#EEF1F5;--teal-text:#00705C;--red-text:#C42631;--band:#ECEFF4;--bandteal:#E4F6F1;--panel:#0B0F14;--panelline:transparent;--ctabg:#00C6A2;--ctafg:#0B0F14;--logo:invert(1) brightness(.1);--blob:.32;--amber:#7A4F00;--amberbg:#FBF1DC}
.tl[data-theme="dark"]{--bg:#0B0F14;--fg:#F2F5F8;--fg2:#C9D3DF;--fg3:#8A98A8;--body:#D5DEE8;--line:#1E2630;--card:#0F141B;--cardline:#1E2630;--soft:#151B23;--teal-text:#00C6A2;--red-text:#FF6B76;--band:#0F141B;--bandteal:#0F1A1B;--panel:#0F141B;--panelline:#1E2630;--ctabg:#00C6A2;--ctafg:#0B0F14;--logo:none;--blob:.35;--amber:#F2B134;--amberbg:#2A2210}

/* Article body typography — the Blog Article board's styles applied to
   markdown-rendered content (posts keep plain markdown; the look lives here). */
.tl-article{font-size:18px;line-height:1.7;color:var(--body)}
.tl-article p{margin:0 0 28px}
.tl-article h2{font:600 30px/1.2 'Sora',sans-serif;letter-spacing:-.025em;color:var(--fg);margin:56px 0 20px}
.tl-article h3{font:600 22px/1.25 'Sora',sans-serif;letter-spacing:-.02em;color:var(--fg);margin:44px 0 16px}
.tl-article h4,.tl-article h5,.tl-article h6{font:600 18px/1.3 'Sora',sans-serif;color:var(--fg);margin:36px 0 12px}
.tl-article ul,.tl-article ol{margin:0 0 28px;padding-left:24px;display:flex;flex-direction:column;gap:12px}
.tl-article strong{color:var(--fg);font-weight:600}
.tl-article a{color:var(--teal-text);font-weight:500}
.tl-article img{max-width:100%;height:auto;border-radius:16px;border:1px solid var(--cardline);margin:8px 0 28px}
.tl-article blockquote{margin:0 0 28px;padding:8px 0 8px 24px;border-left:3px solid var(--teal-text);font:500 20px/1.5 'Sora',sans-serif;letter-spacing:-.01em;color:var(--fg)}
.tl-article blockquote p{margin:0}
.tl-article .table-wrap{overflow-x:auto;border:1px solid var(--cardline);border-radius:16px;background:var(--card);margin:0 0 32px}
.tl-article table{border-collapse:collapse;width:100%;font-size:15px;line-height:1.55}
.tl-article th{text-align:left;padding:14px 24px;background:var(--soft);font:600 12px 'Inter',sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--fg3)}
.tl-article td{padding:20px 24px;border-top:1px solid var(--cardline);color:var(--fg2);vertical-align:top}
.tl-article td:first-child{font-weight:600;color:var(--fg)}
.tl-article code{font-size:15px;background:var(--soft);border:1px solid var(--cardline);border-radius:6px;padding:2px 6px}
.tl-article pre{overflow-x:auto;background:var(--soft);border:1px solid var(--cardline);border-radius:12px;padding:20px;margin:0 0 28px}
.tl-article pre code{background:none;border:none;padding:0}
.tl-article hr{border:none;border-top:1px solid var(--line);margin:48px 0}
.tl-toc-empty{display:none}

/* Photo slots from the v2 boards (<image-slot>): a labelled placeholder
   until a real photo is dropped in. Swap the div for an <img> to fill one. */
.tl-imgslot{border:1px dashed var(--line);border-radius:24px;background:var(--soft);display:flex;align-items:center;justify-content:center;color:var(--fg3);font:500 13px 'Inter',sans-serif;text-align:center;padding:12px}

/* Needs-sign-off convention (borrowed from the partner portal): anything not
   yet approved sits in this visible box rather than reading as settled. */
.tl-signoff{border:2px dashed #E8833A;border-radius:12px;padding:20px 24px;margin:28px 0}
.tl-signoff::before{content:"Needs sign-off";display:block;font:600 11px 'Inter',sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#E8833A;margin-bottom:10px}

@keyframes tlDriftA{0%{transform:translate(0,0) scale(1)}50%{transform:translate(180px,120px) scale(1.15)}100%{transform:translate(0,0) scale(1)}}
@keyframes tlDriftB{0%{transform:translate(0,0) scale(1)}50%{transform:translate(-220px,-90px) scale(1.1)}100%{transform:translate(0,0) scale(1)}}
@keyframes tlDriftC{0%{transform:translate(0,0)}50%{transform:translate(120px,-160px)}100%{transform:translate(0,0)}}
@keyframes tlMarquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.tl.tl-theming, .tl.tl-theming *{transition:background-color .45s ease,color .45s ease,border-color .45s ease !important}

/* style-hover translations from the board */
.tl-pill:hover{background:var(--soft);color:var(--fg)}
.tl-pill.is-open{background:var(--soft);color:var(--fg)}
.tl-navlink:hover{background:var(--soft)}
.tl-hovercard:hover{transform:translateY(-6px);box-shadow:0 24px 48px rgba(11,15,20,.10)}
.tl-hovercard--deep:hover{box-shadow:0 24px 48px rgba(11,15,20,.12)}

/* Mega menu open/close (JS toggles .is-open on the wrapper) */
.tl-mega{display:none}
.tl-mega.is-open{display:flex}

/* Layer selector states (JS toggles .is-active on rows) */
.tl-layer-row{color:var(--fg3)}
.tl-layer-row .tl-layer-tag{opacity:0;transition:opacity .25s}
.tl-layer-row.is-active{color:var(--fg)}
.tl-layer-row.is-active .tl-layer-tag{opacity:1}

/* Dark-panel CTA rows (closes): visible hover feedback */
.tl-ctarow{transition:border-color .2s,background .2s,transform .2s}
.tl-ctarow:hover{border-color:#00C6A2 !important;transform:translateY(-2px)}

/* Product page: policy rows and hero side links */
.tl-polrow.is-active{background:var(--soft)}
.tl-insidelink:hover{border-color:#00C6A2 !important}

/* Forms (Contact page and newsletter) */
.tl-input{font:15px 'Inter',sans-serif;color:var(--fg);padding:14px 16px;border:1px solid var(--line);border-radius:10px;background:var(--bg);outline:none;width:100%}
.tl-input:focus{border-color:#00A88A;background:var(--card);box-shadow:0 0 0 3px rgba(0,168,138,.18)}
.tl-select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--fg3) 50%),linear-gradient(135deg,var(--fg3) 50%,transparent 50%);background-position:calc(100% - 22px) 22px,calc(100% - 16px) 22px;background-size:6px 6px;background-repeat:no-repeat}

/* Blog listing: filter pills, row hover, batched reveal */
.tl-fpill{font-size:13px;font-weight:500;padding:9px 16px;border-radius:999px;cursor:pointer;border:1px solid var(--cardline);background:var(--card);color:var(--fg);transition:all .2s}
.tl-fpill.is-on{border-color:var(--fg);background:var(--fg);color:var(--bg)}
.tl-postrow:hover{padding-left:12px}
.tl-postrow[hidden]{display:none}

/* Mobile-only structural variants (from the Homepage mobile board):
   .tl-only-mobile blocks replace their .tl-only-desktop siblings under 860px. */
.tl-only-mobile{display:none !important}

/* Mobile nav */
.tl-burger{display:none}
.tl-mobilenav{display:none}
.tl-mobilenav.is-open{display:block}

@media (prefers-reduced-motion: reduce){
  .tl [data-tl-blob]>div{animation:none !important}
  .tl .tl-marquee-track{animation:none !important}
}

/* ------------------------------------------------------------------ */
/* Responsive derivation. The board is desktop-only (min-width 1100px, */
/* no media queries), so everything below is our own translation of it */
/* for smaller screens. !important is required because the design's    */
/* styles are inline.                                                  */
/* ------------------------------------------------------------------ */
@media (max-width: 1099px){
  .tl{min-width:0 !important}
  .tl-px{padding-left:32px !important;padding-right:32px !important}
  .tl-header{padding:18px 24px !important}
  .tl-hero{padding:64px 32px 0 !important;margin:12px 12px 0 !important;width:auto !important;max-width:none !important}
  .tl-close{padding:64px 32px 40px !important;margin:80px 12px 12px !important;border-radius:24px !important;width:auto !important;max-width:none !important}
  .tl-hero h1{font-size:52px !important}
  .tl-mock{grid-template-columns:160px 1fr !important}
}
@media (max-width: 860px){
  .tl-nav-pills{display:none !important}
  .tl-nav-cta{display:none !important}
  .tl-burger{display:flex !important}
  .tl-px{padding-left:20px !important;padding-right:20px !important;padding-top:72px !important}
  .tl-header{padding:14px 16px !important}
  .tl-hero{padding:52px 24px 0 !important;margin:8px 12px 0 !important;border-radius:20px !important;width:auto !important;max-width:none !important}
  .tl-hero h1{font-size:42px !important}
  .tl-hero p{font-size:16px !important}
  .tl-hero-ctas{flex-direction:column !important}
  .tl-mock{grid-template-columns:1fr !important;min-height:0 !important}
  .tl-mock-side{display:none !important}
  .tl-mock-stats{grid-template-columns:1fr 1fr !important}
  .tl-cols2, .tl-cols3{grid-template-columns:1fr !important}
  .tl-cell{padding:32px 0 !important;border-right:none !important;border-bottom:1px solid var(--line);min-height:0 !important}
  .tl-cell:last-child{border-bottom:none}
  .tl-close .tl-cell{border-bottom:none}
  .tl-sechead{flex-direction:column !important;align-items:flex-start !important;gap:20px !important}
  .tl-sechead p{text-align:left !important}
  .tl-layers{grid-template-columns:1fr !important;gap:24px !important}
  .tl-layer-name{font-size:34px !important}
  .tl-panel{padding:28px !important;grid-template-rows:auto auto auto !important}
  .tl-panel-stats{grid-template-columns:1fr !important}
  .tl h2{font-size:32px !important}
  .tl h3{font-size:24px !important}
  .tl-article h2{font-size:24px !important}
  .tl-article h3{font-size:20px !important}
  .tl-article{font-size:17px !important}
  .tl-articlegrid{grid-template-columns:1fr !important;gap:0 !important}
  .tl-toc{position:static !important;display:none !important}
  .tl-articlehead h1{font-size:32px !important}
  .tl-ctaband{flex-direction:column !important;align-items:flex-start !important;padding:32px !important}
  .tl-postrow{grid-template-columns:1fr !important;gap:10px !important;padding:28px 0 !important}
  .tl-postrow > span{display:none !important}
  .tl-faqrow{grid-template-columns:1fr !important;gap:10px !important}
  .tl-polrow{grid-template-columns:70px 1fr !important;gap:14px !important}
  .tl-polrow .tl-polarrow{display:none !important}
  .tl-runson{grid-template-columns:1fr !important}
  .tl-close h2{font-size:34px !important}
  .tl-bignum{font-size:40px !important}
  .tl-footer-cols{flex-direction:column !important;gap:24px !important}
  .tl-footer-bar{flex-direction:column !important;gap:12px !important;align-items:flex-start !important}
  .tl-band{padding-top:56px !important;padding-bottom:56px !important}
  .tl-only-desktop{display:none !important}
  .tl-only-mobile{display:flex !important}
  .tl-close h2{font-size:40px !important}
  .tl-close{padding:48px 24px 32px !important;margin:56px 12px 12px !important;border-radius:20px !important;width:auto !important;max-width:none !important}
}

/* Customer logos: uniform grey on light, white silhouettes in dark mode
   (the portal lesson: mixed dark/light artwork needs flattening). */
.tl-clogo{height:26px;width:auto;flex:none;filter:grayscale(1) brightness(0) opacity(.5)}
.tl[data-theme="dark"] .tl-clogo{filter:grayscale(1) brightness(0) invert(1) opacity(.7)}

/* --- Filter chips (insights listing) --- */
.tl-chip{font:600 13px 'Inter',sans-serif;color:var(--fg2);background:var(--card);border:1px solid var(--cardline);border-radius:999px;padding:8px 16px;cursor:pointer;transition:border-color .2s,color .2s,background .2s}
.tl-chip:hover{border-color:#00C6A2;color:var(--fg)}
.tl-chip[aria-pressed="true"]{background:var(--panel);color:#F2F5F8;border-color:var(--panel)}
[data-tl-dlrows] .tl-postrow[hidden],[data-tl-noresults][hidden]{display:none}
[data-tl-search][hidden]{display:none!important}
@media (max-width: 860px){.tl-quotesgrid{grid-template-columns:1fr !important}}
.tl-postrow[hidden]{display:none!important}
.tl [hidden]{display:none!important}
[data-tl-searchresults] a:hover{background:var(--band)}

/* The .tl wrapper is full-bleed (no 1440px cap), so the ambient blob wash
   runs to the window edge and needs no mask; blobs fade out on their own. */

/* Leadership grid: hover (or keyboard focus) reveals a bio overlay on cards
   that have one. Only APPROVED bios go in a .tl-bio — never drafts. */
.tl-biocard .tl-bio{position:absolute;inset:0;border-radius:16px;background:rgba(11,15,20,.9);color:#E6EDF4;font-size:13.5px;line-height:1.55;padding:22px;display:flex;align-items:flex-end;opacity:0;transition:opacity .25s;pointer-events:none}
.tl-biocard:hover .tl-bio,.tl-biocard:focus .tl-bio{opacity:1}

/* Compare pages (Lucinda's boards, 16 Sept): the numbered differences
   selector. Items highlight on hover/click; panels cross-fade. */
.tl-diffitem{color:var(--fg3)}
.tl-diffitem.is-active{color:var(--fg)}
.tl-diffpanel{grid-area:1/1;visibility:hidden;opacity:0;transition:opacity .25s}
.tl-diffpanel.is-active{visibility:visible;opacity:1}

/* Tickable pills (demo form interests): the whole pill is the label. */
.tl-checkpill{display:inline-flex;gap:9px;align-items:center;font-size:14px;font-weight:500;color:var(--fg);padding:10px 18px;border-radius:999px;border:1px solid var(--cardline);background:var(--card);cursor:pointer;transition:border-color .2s,background .2s}
.tl-checkpill input{accent-color:#00A88A;width:15px;height:15px;flex:none;cursor:pointer;margin:0}
.tl-checkpill:hover{border-color:var(--teal-text)}
.tl-checkpill:has(input:checked){background:var(--bandteal);border-color:var(--teal-text)}