/* Telamont figure runtime - styles for the HTML product illustrations on
   /product/ai-agent and /product/boards. Referenced from site-wide head. */
.tm-fig{position:relative;width:100%;height:100%;overflow:hidden;
  --font-sans:'Geist',-apple-system,BlinkMacSystemFont,'Segoe UI','Helvetica Neue',Arial,sans-serif;
  --font-mono:'Fragment Mono','SF Mono',Menlo,Consolas,monospace;
  --font-display:'GranicSans','Geist',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif}
/* default canvas is 1040 square; .tm-c1120 overrides for the wider features */
.tm-fig__c{position:absolute;top:0;left:0;transform-origin:top left;
  width:1040px;height:1040px}

/* ---- motion -------------------------------------------------------------
   Per the v2 handoff: one logic per illustration, one-shot with `both` fill so
   any resting frame reads as a finished composition. Nothing loops except the
   voice waveform, which is the message rather than decoration.

   Hidden states are scoped to .tm-js, which the script adds on init. If the
   script never runs, the content is simply visible instead of stuck at
   opacity 0 - these figures carry real copy, so they must not depend on JS to
   be legible. */
@keyframes tmArOnce{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes tmWv{0%,100%{transform:scaleY(.38)}50%{transform:scaleY(.9)}}
@keyframes tmRowIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* AI agent: three staggered reveals */
.tm-fig.tm-js .tm-r1,.tm-fig.tm-js .tm-r2,.tm-fig.tm-js .tm-r3{opacity:0}
.tm-fig.is-in .tm-r1{animation:tmArOnce .6s ease-out .2s both}
.tm-fig.is-in .tm-r2{animation:tmArOnce .6s ease-out .55s both}
.tm-fig.is-in .tm-r3{animation:tmArOnce .6s ease-out .9s both}

/* AI agent: the one permitted ambient loop, paused while off screen */
.tm-fig .tm-wv{width:3px;height:26px;border-radius:2px;
  background:linear-gradient(#5b93ef,#2563eb);opacity:.8;
  animation:tmWv 1.4s ease-in-out infinite;animation-play-state:paused}
.tm-fig.is-live .tm-wv{animation-play-state:running}

/* Boards tab cards: the rows arrive in order, once. Per-row delay is set by the
   script (animationDelay) so the stagger adapts to however many rows a card
   has; longhand properties here so that inline delay is not reset. */
.tm-fig.tm-js .tm-tr,.tm-fig.tm-js .tm-grp,.tm-fig.tm-js .tm-xr,
.tm-fig.tm-js .tm-rowfx{opacity:0}
.tm-fig.is-in .tm-tr,.tm-fig.is-in .tm-grp,.tm-fig.is-in .tm-xr,
.tm-fig.is-in .tm-rowfx{animation-name:tmRowIn;animation-duration:.5s;
  animation-timing-function:ease-out;animation-fill-mode:both}

/* ---- font alias ----------------------------------------------------------
   The design source names the family "Granic Sans"; Webflow registers the
   very same files as "GranicSans". Without this alias the ported markup
   silently falls back to Geist for every card title. Same URLs Webflow
   already serves, so no extra download. */
@font-face{font-family:'Granic Sans';font-weight:300;font-style:normal;font-display:swap;src:url('https://cdn.prod.website-files.com/69a9f731b9e571eada527dff/69a9fb94d01739444fd89dd8_GranicSans-Light.ttf') format('truetype')}
@font-face{font-family:'Granic Sans';font-weight:500;font-style:normal;font-display:swap;src:url('https://cdn.prod.website-files.com/69a9f731b9e571eada527dff/69a9fb9406a5e1b7e9c01c31_GranicSans-Medium.ttf') format('truetype')}
@font-face{font-family:'Granic Sans';font-weight:700;font-style:normal;font-display:swap;src:url('https://cdn.prod.website-files.com/69a9f731b9e571eada527dff/69a9fb9458491f7536c80ec2_GranicSans-Bold.ttf') format('truetype')}
@font-face{font-family:'Granic Sans';font-weight:500;font-style:italic;font-display:swap;src:url('https://cdn.prod.website-files.com/69a9f731b9e571eada527dff/69a9fb9419eaa1ec2f9e21ee_GranicSans-MediumItalic.ttf') format('truetype')}
@font-face{font-family:'Granic Sans';font-weight:700;font-style:italic;font-display:swap;src:url('https://cdn.prod.website-files.com/69a9f731b9e571eada527dff/69a9fb94529e12355feb7019_GranicSans-BoldItalic.ttf') format('truetype')}

/* ---- ported figures ------------------------------------------------------
   Boards tab cards are now a direct port of "Boards Mockups.dc.html" (turn 4,
   options 4a-4g) rather than a rebuild. The source canvas is 520 square, not
   1040 - the PNGs were 2x exports, which is why the earlier reconstruction
   drifted on type size and spacing. Markup is fully inline-styled; the only
   class it needs is .tm-mk (the source's own .mk). */
.tm-c520{width:520px;height:520px}
.tm-c560{width:560px;height:560px}
.tm-mk{background:#f2f4f6;border:1px solid rgba(15,21,37,.07);border-radius:14px;
  overflow:hidden;position:relative}

@media (prefers-reduced-motion:reduce){
  .tm-fig .tm-r1,.tm-fig .tm-r2,.tm-fig .tm-r3,
  .tm-fig .tm-tr,.tm-fig .tm-grp,.tm-fig .tm-xr,.tm-fig .tm-rowfx{
    opacity:1;animation:none}
  .tm-fig .tm-wv{animation:none;transform:scaleY(.64)}
}

.tm-c1120{width:1120px;height:1120px}
/* .tm-cite base lives in the cards stylesheet - both sets share it. Only the
   pointed-at variant is defined here. */
.tm-cite--on{padding:6px 13px 6px 6px;border-radius:10px;
  background:#2563eb;color:#fff;font-size:19px;gap:9px}
.tm-cite--on b{background:rgba(255,255,255,.22);width:26px;height:26px;font-size:11px}
.tm-tile{background:#fff;border:1px solid #e5e8ec;border-radius:15px;
  padding:26px 12px 22px;display:flex;flex-direction:column;align-items:center;gap:16px;
  font:400 18px/1.3 var(--font-sans);color:#1e293b;text-align:center}
.tm-chip{display:inline-flex;width:50px;height:50px;align-items:center;
  justify-content:center;border-radius:14px;background:#dbeafe}
.tm-chip--g{background:#d1fae5}
.tm-grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.tm-sec{display:flex;align-items:center;gap:12px;margin:8px 0 6px;
  font:600 24px/1 var(--font-display),var(--font-sans);color:#101828}
.tm-row{display:grid;grid-template-columns:310px 1fr;align-items:center;
  padding:18px 28px;font:400 20px/1.35 var(--font-sans)}
.tm-row>i{font-style:normal;color:#5b6b81}
.tm-row>span{display:flex;align-items:center;gap:16px;color:#1e293b;white-space:nowrap}
.tm-row+.tm-row{border-top:1px solid #f1f3f6}

.tm-c1040{width:1040px;height:1040px}
.tm-mask{position:absolute;left:58px;top:52px;display:flex;gap:20px;opacity:.5;
  filter:blur(1.6px)}
.tm-mask span{height:15px;border-radius:7px;background:#dfe4ec;display:block}
.tm-bc{position:absolute;left:107px;right:107px;background:rgba(255,255,255,.94);
  backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.9);border-radius:18px;
  box-shadow:0 36px 74px -30px rgba(15,42,71,.3),0 2px 6px rgba(15,42,71,.05);overflow:hidden}
.tm-bch{display:flex;align-items:center;gap:14px;padding:20px 26px}
.tm-bci{display:inline-flex;width:42px;height:42px;align-items:center;justify-content:center;
  border-radius:12px;flex:none}
.tm-bci svg{width:24px;height:24px}  /* overrides the inline attrs in the embeds */
.tm-bct{font:600 26px/1.2 var(--font-display),var(--font-sans);color:#0f2547}
.tm-th,.tm-tr{display:grid;gap:22px;padding:21px 26px;align-items:start}
.tm-th{font:500 21px/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:#475569;
  border-bottom:1px solid #eef0f4}
.tm-tr{font:400 23px/1.4 var(--font-sans);color:#0f2547;border-bottom:1px solid #f1f3f6}
.tm-tr--last{border-bottom:none}
.tm-tr b{font:600 24px/1.3 var(--font-sans);color:#0f2547}
.tm-cite{display:inline-flex;align-items:center;gap:7px;vertical-align:middle;
  font:400 17px/1 var(--font-mono);color:#334155;white-space:nowrap}
.tm-cite b{display:inline-flex;width:23px;height:23px;align-items:center;justify-content:center;
  border-radius:6px;background:#0d9488;color:#fff;font:600 10px/1 var(--font-mono)}
.tm-bc .tm-cite{font-size:19px}
.tm-bc .tm-cite b{width:26px;height:26px;font-size:11px}
/* Adjacent citations. cites() concatenates pills with no separator, so they
   touched in the block contexts and sat at only the flex gap in .tm-grpv.
   The exports place them ~31px apart, ink to ink. */
.tm-tr .tm-cite + .tm-cite,
.tm-xr .tm-cite + .tm-cite{margin-left:31px}
.tm-grpv .tm-cite + .tm-cite{margin-left:13px}   /* + the 18px flex gap */
.tm-d-co b{background:#d97706}
.tm-d-pl b{background:#2563eb}
.tm-note{display:flex;gap:12px;align-items:flex-start;margin:4px 26px 6px;padding:16px 18px;
  border-radius:12px;background:#f6f8fa;font:400 19px/1.55 var(--font-sans);color:#5b6b81}
.tm-note svg{flex:none;margin-top:1px}
.tm-xr{padding:20px 26px;font:400 23px/1.6 var(--font-sans);color:#0f2547;border-bottom:1px solid #f1f3f6}
.tm-xr--last{border-bottom:none}
.tm-xr b{font:400 23px/1.6 var(--font-mono);color:#6d4ed8}
.tm-grp{padding:26px 26px;border-bottom:1px solid #f1f3f6;display:flex;
  flex-direction:column;gap:9px}
.tm-grp--last{border-bottom:none}
.tm-grpl{font:500 20px/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:#475569}
.tm-meta{margin-left:auto;font:400 21px/1 var(--font-mono);color:#475569}
.tm-grpv{font:400 23px/1.4 var(--font-sans);color:#0f2547;display:flex;align-items:center;gap:18px;
  flex-wrap:wrap}
.tm-shh{display:flex;align-items:center;gap:20px;padding:24px 26px;
  border-bottom:1px solid #eef0f4}
.tm-shb{margin-left:auto;display:inline-flex;align-items:center;gap:9px;padding:13px 20px;
  border-radius:11px;background:#0f2744;color:#fff;font:500 20px/1 var(--font-sans);flex:none}
.tm-sr{display:flex;align-items:center;gap:16px;padding:24px 26px;
  border-bottom:1px solid #f1f3f6;font:400 23px/1 var(--font-sans);color:#0f2547}
.tm-sr--last{border-bottom:none}
.tm-srr{margin-left:auto;display:flex;align-items:center}
.tm-pdf{display:inline-flex;width:24px;height:24px;align-items:center;justify-content:center;
  border-radius:6px;background:#dc2626;color:#fff;font:700 8px/1 var(--font-mono);flex:none}
/* ---- design-system utilities, scoped ------------------------------------
   The ported markup carries DS component classes as well as inline styles, so
   the rules behind those classes have to travel with it. Generated by matching
   every class token that actually appears in tm-boards-figs.js against the DS
   bundle - not hand-picked, because a rule missed here shows up as a silent
   typography drift on the live page and nowhere in a local test.
   Variants are dropped (these figures are static) and every selector is scoped
   under .tm-fig so nothing leaks into the Webflow page. */
/* Minimal scoped preflight. The DS relies on Tailwind's base layer; without
   box-sizing the paddings add to widths and the cards overflow their canvas.
   --tw-border-style is what the `border` utility resolves against. */
.tm-fig,.tm-fig *,.tm-fig *::before,.tm-fig *::after{box-sizing:border-box;--tw-border-style:solid;--tw-ring-offset-width:0px;--tw-ring-inset:;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000}
.tm-fig{--font-size: 16px;--background: #f6f7f9;--foreground: #0f1525;--card: #ffffff;--card-foreground: #0f1525;--popover: #ffffff;--popover-foreground: #0f1525;--primary: #030213;--primary-foreground: #ffffff;--secondary: oklch(0.95 0.0058 264.53);--secondary-foreground: #030213;--muted: #ececf0;--muted-foreground: #6b7184;--accent: #e9ebef;--accent-foreground: #030213;--destructive: #d4183d;--destructive-foreground: #ffffff;--border: rgba(15, 21, 37, 0.08);--border-strong: rgba(15, 21, 37, 0.14);--shadow-card: 0 1px 2px rgba(15, 21, 37, 0.04), 0 8px 28px rgba(15, 21, 37, 0.04);--shadow-elevated: 0 2px 4px rgba(15, 21, 37, 0.06), 0 16px 40px rgba(15, 21, 37, 0.08);--surface-muted: #f3f3f5;--surface-subtle: #fafafb;--success: #1b7f47;--success-foreground: #ffffff;--warning: #b8740a;--warning-foreground: #ffffff;--vision: #6b3eb0;--vision-foreground: #ffffff;--input: transparent;--input-background: #f3f3f5;--switch-background: #cbced4;--font-weight-medium: 500;--font-weight-normal: 400;--ring: oklch(0.708 0 0);--chart-1: oklch(0.646 0.222 41.116);--chart-2: oklch(0.6 0.118 184.704);--chart-3: oklch(0.398 0.07 227.392);--chart-4: oklch(0.828 0.189 84.429);--chart-5: oklch(0.769 0.188 70.08);--radius: 0.5rem;--radius-pill: 0.375rem;--surface-info: #eef4ff;--surface-info-foreground: #1d4ed8;--surface-info-border: #dbe6ff;--surface-success: #ecfdf5;--surface-success-foreground: #047857;--surface-success-border: #c7ebd9;--surface-warning: #fff8eb;--surface-warning-foreground: #b45309;--surface-warning-border: #f5e2bd;--surface-danger: #fef2f2;--surface-danger-foreground: #b91c1c;--surface-danger-border: #f5d0d0;--ai-blue: #3b82f6;--bbox-accent: var(--ai-blue);--bbox-dim: rgba(0, 0, 0, 0.22);--sidebar: #003166;--sidebar-foreground: #ffffff;--sidebar-primary: #ffffff;--sidebar-primary-foreground: #003166;--sidebar-accent: #1a4a78;--sidebar-accent-foreground: #ffffff;--sidebar-border: #ffffff20;--sidebar-ring: oklch(0.708 0 0);--brand-navy: #003166;--font-sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;--font-display: 'Granic Sans', 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial,
    sans-serif;--font-mono: 'Fragment Mono', 'SF Mono', Menlo, Consolas, monospace;--spacing:0.25rem;--text-sm:0.875rem;--text-base:1rem;--text-sm--line-height:calc(1.25 / 0.875);--text-base--line-height:calc(1.5 / 1);--default-transition-duration:150ms;--default-transition-timing-function:cubic-bezier(0.4,0,0.2,1);--tw-leading:normal;--tw-duration:150ms;--tw-ease:cubic-bezier(0.4,0,0.2,1)}
.tm-fig .flex{display: flex;}
.tm-fig .inline-flex{display: inline-flex;}
.tm-fig .h-8{height: calc(var(--spacing) * 8);}
.tm-fig .h-9{height: calc(var(--spacing) * 9);}
.tm-fig .w-fit{width: fit-content;}
.tm-fig .w-full{width: 100%;}
.tm-fig .min-w-0{min-width: 0;}
.tm-fig .shrink-0{flex-shrink: 0;}
.tm-fig .items-center{align-items: center;}
.tm-fig .justify-center{justify-content: center;}
.tm-fig .gap-1{gap: var(--spacing);}
.tm-fig .gap-1\.5{gap: calc(var(--spacing) * 1.5);}
.tm-fig .overflow-hidden{overflow: hidden;}
.tm-fig .rounded-md{border-radius: calc(var(--radius) - 2px);}
.tm-fig .rounded-sm{border-radius: calc(var(--radius) - 4px);}
.tm-fig .border{border-style: var(--tw-border-style); border-width: 1px;}
.tm-fig .border-border{border-color: var(--border);}
.tm-fig .border-input{border-color: var(--input);}
.tm-fig .bg-input-background{background-color: var(--input-background);}
.tm-fig .bg-primary{background-color: var(--primary);}
.tm-fig .px-1\.5{padding-inline: calc(var(--spacing) * 1.5);}
.tm-fig .px-3{padding-inline: calc(var(--spacing) * 3);}
.tm-fig .py-0{padding-block: 0;}
.tm-fig .py-1{padding-block: var(--spacing);}
.tm-fig .text-base{font-size: var(--text-base); line-height: var(--tw-leading, var(--text-base--line-height));}
.tm-fig .text-sm{font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height));}
.tm-fig .text-\[11px\]{font-size: 11px;}
.tm-fig .font-medium{--tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium);}
.tm-fig .whitespace-nowrap{white-space: nowrap;}
.tm-fig .text-foreground{color: var(--foreground);}
.tm-fig .text-primary-foreground{color: var(--primary-foreground);}
.tm-fig .transition-\[color\,box-shadow\]{transition-property: color,box-shadow; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration));}
.tm-fig .transition-all{transition-property: all; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration));}
.tm-fig .outline-none{--tw-outline-style: none; outline-style: none;}
.tm-fig .selection\:bg-primary{& *::selection { background-color: var(--primary); } &::selection { background-color: var(--primary); }}
.tm-fig .selection\:text-primary-foreground{& *::selection { color: var(--primary-foreground); } &::selection { color: var(--primary-foreground); }}
.tm-fig .file\:inline-flex{&::file-selector-button { display: inline-flex; }}
.tm-fig .file\:h-7{&::file-selector-button { height: calc(var(--spacing) * 7); }}
.tm-fig .file\:border-0{&::file-selector-button { border-style: var(--tw-border-style); border-width: 0px; }}
.tm-fig .file\:bg-transparent{&::file-selector-button { background-color: transparent; }}
.tm-fig .file\:text-sm{&::file-selector-button { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); }}
.tm-fig .file\:font-medium{&::file-selector-button { --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); }}
.tm-fig .file\:text-foreground{&::file-selector-button { color: var(--foreground); }}
.tm-fig .placeholder\:text-muted-foreground{&::placeholder { color: var(--muted-foreground); }}
.tm-fig .hover\:bg-primary\/90{&:hover { @media (hover: hover) { background-color: var(--primary); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--primary) 90%, transparent); } } }}
.tm-fig .focus-visible\:border-ring{&:focus-visible { border-color: var(--ring); }}
.tm-fig .focus-visible\:ring-\[3px\]{&:focus-visible { --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); }}
.tm-fig .focus-visible\:ring-ring\/50{&:focus-visible { --tw-ring-color: var(--ring); @supports (color: color-mix(in lab, red, red)) { --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent); } }}
.tm-fig .disabled\:pointer-events-none{&:disabled { pointer-events: none; }}
.tm-fig .disabled\:cursor-not-allowed{&:disabled { cursor: not-allowed; }}
.tm-fig .disabled\:opacity-50{&:disabled { opacity: 50%; }}
.tm-fig .aria-invalid\:border-destructive{&[aria-invalid="true"] { border-color: var(--destructive); }}
.tm-fig .aria-invalid\:ring-destructive\/20{&[aria-invalid="true"] { --tw-ring-color: var(--destructive); @supports (color: color-mix(in lab, red, red)) { --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent); } }}
.tm-fig .md\:text-sm{@media (width >= 48rem) { font-size: var(--text-sm); line-height: var(--tw-leading, var(--text-sm--line-height)); }}
.tm-fig .dark\:bg-input\/30{&:is(.dark *) { background-color: var(--input); @supports (color: color-mix(in lab, red, red)) { background-color: color-mix(in oklab, var(--input) 30%, transparent); } }}
.tm-fig .dark\:aria-invalid\:ring-destructive\/40{&:is(.dark *) { &[aria-invalid="true"] { --tw-ring-color: var(--destructive); @supports (color: color-mix(in lab, red, red)) { --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent); } } }}
@keyframes popIn{0%,4%{opacity:0;transform:translateY(10px) scale(.985)}16%,90%{opacity:1;transform:none}98%,100%{opacity:0;transform:translateY(10px) scale(.985)}}

/* ---- inherited-text firewall ---------------------------------------------
   The ported markup only carries the styles the design source set explicitly.
   Everything it left alone came from the design system document's own <html> and
   <body>, which we are not shipping - so on a Webflow page those properties
   instead inherit from Webflow's body. That is not hypothetical: the site sets

     body{color:#333;font-family:Arial;font-size:14px;letter-spacing:-.05em;line-height:1.3}

   and letter-spacing:-.05em is what made the lettering look cramped - at 10px it
   pulls half a pixel out of every gap. font-size:14px was just as bad in a
   quieter way, because a relative line-height then resolves against 14 instead
   of 16.

   So pin every inheritable text property to the value the design system itself
   resolves at the canvas boundary, measured from its own document rather than
   assumed: 16px / 400 / 24px / normal tracking / 0 word-spacing / black / start.
   Declared last so it wins over the DS variable block above.

   Anything the design set on purpose stays put: those values live in inline
   styles on the elements themselves, which outrank this rule. */
.tm-fig{
  font-family:'Geist',ui-sans-serif,system-ui,sans-serif;
  font-size:16px;font-weight:400;font-style:normal;font-stretch:100%;
  /* unitless on purpose: the DS specifies 1.5, which every descendant recomputes
     against its own font-size. An absolute 24px would inherit unchanged and blow
     up the small citation pills. Safe here only because font-size is pinned. */
  line-height:1.5;letter-spacing:normal;word-spacing:0;
  color:#000;text-align:start;text-transform:none;text-indent:0;
  white-space:normal;direction:ltr;tab-size:4;
  font-variant-ligatures:normal;font-feature-settings:normal;font-kerning:auto}
/* Form controls inherit none of the above on their own; the DS gets that from
   Tailwind's preflight. Without it the inputs render in Arial, pick up the
   page's tracking, and sit ~3px shorter. */
.tm-fig input,.tm-fig button,.tm-fig select,.tm-fig textarea{
  font:inherit;letter-spacing:inherit;word-spacing:inherit;color:inherit}